custom-colors,shop,woocommerce */  :root{     --font-primary: "DM Sans", sans-serif;     --color-main: #262626;     --color-button: #10B981;     --color-hover: #086848;     --color-white: #ffffff;     --color-light-gray: #f5f5f5;     --color-gray: #6b7280;     --color-dark: #1a1a1a;     --color-dark-lighter: #2d2d2d;     --font-size-base: 16px;     --font-size-sm: 14px;     --font-size-xs: 12px;     --font-size-lg: 18px;     --font-weight-normal: 400;     --font-weight-medium: 500;     --font-weight-bold: 600;     --transition-ease: 0.3s ease;     --transition-fast: 0.2s ease;     --spacing-xs: 5px;     --spacing-sm: 8px;     --spacing-md: 15px;     --spacing-lg: 20px;     --spacing-xl: 30px;     --max-width: 1240px;     --header-height: 70px;     --top-bar-height: 40px;     --category-bar-height: 50px;     --border-radius: 8px;     --border-radius-lg: 8px;     --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }*{     box-sizing: border-box;     margin: 0;     padding: 0; }html{     scroll-behavior: smooth; }body{     font-family: var(--font-primary);     font-size: var(--font-size-base);     color: var(--color-main);     line-height: 1.6;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale; }a{     text-decoration: none;     color: inherit;     transition: color var(--transition-fast); }ul,ol{     list-style: none; }img{     max-width: 100%;     height: auto;     display: block; }button{     cursor: pointer;     border: none;     background: none;     font-family: inherit; }/* ===================================    Header Wrapper (Sticky)    =================================== */ .header-wrapper{     position: sticky;     top: 0;     z-index: 1000; }/* ===================================    Top Bar    =================================== */ .top-bar{     background-color: var(--color-button);     color: var(--color-white);     font-size: var(--font-size-sm);     height: var(--top-bar-height);     display: flex;     align-items: center; }.top-bar-container{     max-width: var(--max-width);     width: 100%;     margin: 0 auto;     padding: 0 var(--spacing-lg);     display: flex;     justify-content: space-between;     align-items: center; }.top-bar-left a{     color: var(--color-white);     font-weight: var(--font-weight-medium);     transition: opacity var(--transition-fast); }.top-bar-left a:hover{     opacity: 0.8; }.top-bar-center{     font-weight: var(--font-weight-medium);     display: flex;     align-items: center;     gap: var(--spacing-sm); }.top-bar-right{     display: flex;     gap: var(--spacing-md); }.top-bar-right a{     color: var(--color-white);     font-size: var(--font-size-base);     transition: opacity var(--transition-fast), transform var(--transition-fast);     display: flex;     align-items: center;     justify-content: center;     width: 28px;     height: 28px; }.top-bar-right a:hover{     opacity: 0.8;     transform: scale(1.1); }/* ===================================    Main Header    =================================== */ .site-header{     background-color: var(--color-dark);     height: var(--header-height);     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }.header-container{     max-width: var(--max-width);     width: 100%;     height: 100%;     margin: 0 auto;     padding: 0 var(--spacing-lg);     display: flex;     justify-content: space-between;     align-items: center; }/* Logo */ .header-logo{     flex-shrink: 0; }.header-logo a{     display: flex;     align-items: center;     font-size: 28px;     font-weight: 900;     color: var(--color-button);     text-decoration: none; }/* Navigation */ .header-nav{     flex: 1;     display: flex;     justify-content: center; }.header-menu{     display: flex;     gap: var(--spacing-xl);     align-items: center; }.header-menu li{     position: relative; }.header-menu li a{     color: var(--color-white);     font-size: var(--font-size-base);     font-weight: var(--font-weight-medium);     padding: var(--spacing-sm) 0;     display: inline-block;     position: relative; }.header-menu li a::after{     content: '';     position: absolute;     bottom: 0;     left: 0;     width: 0;     height: 2px;     background-color: var(--color-button);     transition: width var(--transition-ease); }.header-menu li a:hover::after{     width: 100%; }/* Header Icons */ .header-icons{     display: flex;     align-items: center;     gap: var(--spacing-sm); }.header-icon{     color: var(--color-white);     font-size: 16px;     padding: var(--spacing-sm);     display: flex;     align-items: center;     justify-content: center;     position: relative;     transition: color var(--transition-fast), transform var(--transition-fast);     background: none;     border: none;     cursor: pointer; }.header-icon:hover{     color: var(--color-button);     transform: scale(1.1); }/* Cart Count Badge */ .cart-count,.wishlist-count{     position: absolute;     top: 0;     right: 0;     background-color: var(--color-button);     color: var(--color-white);     font-size: 9px;     font-weight: var(--font-weight-bold);     min-width: 16px;     height: 16px;     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     opacity: 0;     transform: scale(0);     transition: all var(--transition-fast); }/* Cart Total */ .header-cart-total{     color: var(--color-white);     font-size: var(--font-size-sm);     font-weight: var(--font-weight-bold);     white-space: nowrap; }/* ===================================    Category Bar    =================================== */ .category-bar{     background-color: var(--color-dark-lighter);     height: var(--category-bar-height);     border-bottom: 1px solid rgba(255,255,255,0.1); }.category-bar-container{     max-width: var(--max-width);     width: 100%;     height: 100%;     margin: 0 auto;     padding: 0 var(--spacing-lg);     display: flex;     justify-content: center; }.category-list{     display: flex;     align-items: center;     justify-content: center;     height: 100%;     gap: 0; }.category-item{     position: relative;     height: 100%;     display: flex;     align-items: center; }.category-link{     display: flex;     align-items: center;     height: 100%;     padding: 0 var(--spacing-md);     font-size: var(--font-size-sm);     font-weight: var(--font-weight-medium);     color: var(--color-button);     white-space: nowrap;     transition: color var(--transition-fast), background-color var(--transition-fast); }.category-link:hover{     color: var(--color-white); }.category-toggle{     display: flex;     align-items: center;     justify-content: center;     width: 28px;     height: 28px;     color: var(--color-button);     font-size: 10px;     transition: all var(--transition-fast);     margin-right: var(--spacing-sm); }.category-toggle:hover{     color: var(--color-hover); }.category-toggle i{     transition: transform var(--transition-fast); }.category-item.open .category-toggle i{     transform: rotate(180deg); }/* Category Dropdown */ .category-dropdown{     position: absolute;     top: 100%;     left: 0;     background-color: var(--color-dark-lighter);     min-width: 250px;     padding: var(--spacing-md) 0;     border-radius: 0 0 var(--border-radius) var(--border-radius);     box-shadow: var(--box-shadow);     opacity: 0;     visibility: hidden;     transform: translateY(-10px);     transition: all var(--transition-fast);     z-index: 100;     display: none; }.category-item.open .category-dropdown{     opacity: 1;     visibility: visible;     transform: translateY(0);     display: block; }.subcategory-list{     display: flex;     flex-direction: column; }.subcategory-item{     position: relative; }.subcategory-link{     display: block;     padding: var(--spacing-sm) var(--spacing-lg);     font-size: var(--font-size-sm);     color: var(--color-button);     transition: all var(--transition-fast); }.subcategory-link:hover{     background-color: rgba(16, 185, 129, 0.1);     color: var(--color-hover); }/* Sub-subcategory */ .sub-subcategory-list{     display: none;     padding: var(--spacing-sm) 0; }.subcategory-item.open .sub-subcategory-list{     display: block; }.sub-subcategory-item a{     display: block;     padding: var(--spacing-xs) var(--spacing-lg);     padding-left: var(--spacing-xl);     font-size: var(--font-size-xs);     color: var(--color-button);     opacity: 0.8;     transition: all var(--transition-fast); }.sub-subcategory-item a:hover{     color: var(--color-hover);     opacity: 1; }/* ===================================    Mobile Menu Panel    =================================== */ .mobile-menu-panel{     position: fixed;     top: 0;     left: -320px;     width: 320px;     height: 100vh;     background-color: var(--color-dark-lighter);     z-index: 2000;     transition: left var(--transition-ease);     display: flex;     flex-direction: column;     box-shadow: var(--box-shadow); }.mobile-menu-panel.active{     left: 0; }.mobile-menu-header{     display: flex;     justify-content: space-between;     align-items: center;     padding: var(--spacing-lg);     border-bottom: 1px solid rgba(255,255,255,0.1);     background-color: var(--color-dark); }.mobile-menu-title{     font-size: var(--font-size-lg);     font-weight: var(--font-weight-bold);     color: var(--color-white); }.mobile-menu-close{     font-size: var(--font-size-lg);     color: var(--color-white);     padding: var(--spacing-sm);     transition: color var(--transition-fast); }.mobile-menu-close:hover{     color: var(--color-button); }.mobile-menu-content{     flex: 1;     overflow-y: auto;     padding: var(--spacing-lg); }.mobile-category-list{     display: flex;     flex-direction: column; }.mobile-category-item,.mobile-subcategory-item{     border-bottom: 1px solid rgba(255,255,255,0.05); }.mobile-category-row{     display: flex;     align-items: center;     justify-content: space-between; }.mobile-category-row a{     flex: 1;     display: block;     padding: var(--spacing-md) 0;     font-size: var(--font-size-sm);     color: var(--color-button); }.mobile-category-row a:hover{     color: var(--color-hover); }.mobile-category-toggle{     width: 40px;     height: 40px;     display: flex;     align-items: center;     justify-content: center;     color: var(--color-button);     font-size: 12px; }.mobile-category-toggle:hover{     color: var(--color-hover); }.mobile-category-toggle i{     transition: transform var(--transition-fast); }.mobile-category-item.open > .mobile-category-row .mobile-category-toggle i,.mobile-subcategory-item.open > .mobile-category-row .mobile-category-toggle i{     transform: rotate(180deg); }.mobile-subcategory-list,.mobile-sub-subcategory-list{     display: none;     padding-left: var(--spacing-md); }.mobile-category-item.open > .mobile-subcategory-list,.mobile-subcategory-item.open > .mobile-sub-subcategory-list{     display: block; }.mobile-sub-subcategory-list li a{     padding: var(--spacing-sm) var(--spacing-md);     font-size: var(--font-size-xs);     color: var(--color-button);     opacity: 0.7; }.mobile-sub-subcategory-list li a:hover{     opacity: 1; }/* ===================================    Search Panel    =================================== */ .search-panel{     position: fixed;     top: 0;     right: -400px;     width: 400px;     height: 100vh;     background-color: var(--color-white);     z-index: 2000;     transition: right var(--transition-ease);     display: flex;     flex-direction: column;     box-shadow: var(--box-shadow); }.search-panel.active{     right: 0; }.search-panel-header{     display: flex;     justify-content: space-between;     align-items: center;     padding: var(--spacing-lg);     border-bottom: 1px solid var(--color-light-gray); }.search-panel-title{     font-size: var(--font-size-lg);     font-weight: var(--font-weight-bold);     color: var(--color-main); }.search-panel-close{     font-size: var(--font-size-lg);     color: var(--color-gray);     padding: var(--spacing-sm);     transition: color var(--transition-fast); }.search-panel-close:hover{     color: var(--color-main); }.search-panel-content{     flex: 1;     overflow-y: auto;     padding: var(--spacing-lg); }.search-input-wrapper{     position: relative;     display: flex;     align-items: center; }.search-input{     width: 100%;     padding: var(--spacing-md) var(--spacing-lg);     padding-right: 50px;     border: 2px solid var(--color-light-gray);     border-radius: var(--border-radius);     font-size: var(--font-size-base);     font-family: inherit;     transition: border-color var(--transition-fast); }.search-input:focus{     outline: none;     border-color: var(--color-button); }.search-submit{     position: absolute;     right: var(--spacing-md);     color: var(--color-gray);     font-size: var(--font-size-lg);     transition: color var(--transition-fast); }.search-submit:hover{     color: var(--color-button); }/* Search Results */ .search-results{     margin-top: var(--spacing-lg); }.search-results-list{     display: flex;     flex-direction: column;     gap: var(--spacing-md); }.search-result-item a{     display: flex;     align-items: center;     gap: var(--spacing-md);     padding: var(--spacing-md);     border-radius: var(--border-radius);     transition: background-color var(--transition-fast); }.search-result-item a:hover{     background-color: var(--color-light-gray); }.search-result-image{     width: 60px;     height: 60px;     flex-shrink: 0;     border-radius: var(--border-radius);     overflow: hidden;     background-color: var(--color-light-gray); }.search-result-image img{     width: 100%;     height: 100%;     object-fit: cover; }.search-result-info{     flex: 1;     display: flex;     flex-direction: column;     gap: var(--spacing-xs); }.search-result-title{     font-weight: var(--font-weight-medium);     color: var(--color-main);     font-size: var(--font-size-sm);     line-height: 1.4; }.search-result-price{     color: var(--color-button);     font-weight: var(--font-weight-bold);     font-size: var(--font-size-sm); }.no-results{     text-align: center;     color: var(--color-gray);     padding: var(--spacing-xl); }.search-view-all{     display: block;     text-align: center;     padding: var(--spacing-md);     margin-top: var(--spacing-md);     background-color: var(--color-button);     color: var(--color-white);     font-size: var(--font-size-sm);     font-weight: var(--font-weight-bold);     border-radius: var(--border-radius);     transition: background-color var(--transition-fast); }.search-view-all:hover{     background-color: var(--color-hover); }/* ===================================    Mini Cart Panel    =================================== */ .mini-cart-panel{     position: fixed;     top: 0;     right: -500px;     width: 500px;     height: 100vh;     background-color: var(--color-white);     z-index: 2000;     transition: right var(--transition-ease);     display: flex;     flex-direction: column;     box-shadow: var(--box-shadow); }.mini-cart-panel.active{     right: 0; }.mini-cart-header{     display: flex;     justify-content: space-between;     align-items: center;     padding: var(--spacing-lg);     border-bottom: 1px solid var(--color-light-gray);     background-color: var(--color-white); }.mini-cart-title{     font-size: var(--font-size-lg);     font-weight: var(--font-weight-bold);     color: var(--color-main); }.mini-cart-close{     font-size: var(--font-size-lg);     color: var(--color-gray);     padding: var(--spacing-sm);     transition: color var(--transition-fast); }.mini-cart-close:hover{     color: var(--color-main); }/* Shipping Info */ .mini-cart-shipping-info{     padding: var(--spacing-md) var(--spacing-lg);     background-color: var(--color-light-gray);     border-bottom: 1px solid #e5e7eb; }.shipping-progress{     display: flex;     flex-direction: column;     gap: var(--spacing-sm); }.shipping-progress-bar{     width: 100%;     height: 8px;     background-color: #e5e7eb;     border-radius: 4px;     overflow: hidden; }.shipping-progress-fill{     height: 100%;     background: linear-gradient(90deg, var(--color-button), var(--color-hover));     border-radius: 4px;     transition: width var(--transition-ease); }.shipping-message{     font-size: var(--font-size-sm);     color: var(--color-gray);     display: flex;     align-items: center;     gap: var(--spacing-sm); }.shipping-message i{     color: var(--color-button); }.shipping-message strong{     color: var(--color-main); }.shipping-free{     display: flex;     align-items: center;     gap: var(--spacing-sm);     color: var(--color-button);     font-weight: var(--font-weight-medium); }.shipping-free i{     font-size: var(--font-size-lg); }/* Mini Cart Content */ .mini-cart-content{     flex: 1;     overflow-y: auto;     padding: var(--spacing-lg); }/* Empty Cart */ .mini-cart-empty{     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;     height: 100%;     color: var(--color-gray);     gap: var(--spacing-md); }.mini-cart-empty i{     font-size: 48px;     opacity: 0.5; }.mini-cart-empty p{     font-size: var(--font-size-base); }/* Mini Cart Footer */ .mini-cart-footer{     padding: var(--spacing-lg);     border-top: 1px solid var(--color-light-gray);     background-color: var(--color-white);     display: flex;     flex-direction: column;     gap: var(--spacing-md); }.mini-cart-total{     display: flex;     justify-content: space-between;     align-items: center;     font-size: var(--font-size-lg);     font-weight: var(--font-weight-bold); }.total-price{     color: var(--color-button); }.btn-view-cart,.btn-checkout{     display: flex;     align-items: center;     justify-content: center;     padding: var(--spacing-md) var(--spacing-lg);     border-radius: var(--border-radius);     font-size: var(--font-size-base);     font-weight: var(--font-weight-bold);     text-transform: uppercase;     letter-spacing: 0.5px;     transition: all var(--transition-fast); }.btn-view-cart{     background-color: var(--color-white);     color: var(--color-main);     border: 2px solid var(--color-main); }.btn-view-cart:hover{     background-color: var(--color-main);     color: var(--color-white); }.btn-checkout{     background-color: var(--color-button);     color: var(--color-white);     border: 2px solid var(--color-button); }.btn-checkout:hover{     background-color: var(--color-hover);     border-color: var(--color-hover); }/* ===================================    Overlay    =================================== */ .panel-overlay{     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(0, 0, 0, 0.5);     z-index: 1500;     opacity: 0;     visibility: hidden;     transition: all var(--transition-ease);     backdrop-filter: blur(2px); }.panel-overlay.active{     opacity: 1;     visibility: visible; }/* ===================================    Animations    =================================== */ @keyframes slideOut{     from {         opacity: 1;         transform: translateX(0);     }     to {         opacity: 0;         transform: translateX(100%);     } }/* ===================================    Responsive Design    =================================== */ @media (max-width: 1024px){     .header-menu {         gap: var(--spacing-lg);     }          .header-menu li a {         font-size: var(--font-size-sm);     }          .category-link {         padding: 0 var(--spacing-sm);         font-size: var(--font-size-xs);     } }@media (max-width: 768px) {/* Header Wrapper sticky na mobile */     .header-wrapper{         position: sticky;         top: 0;         z-index: 1000;     }.top-bar-container{         flex-wrap: wrap;         padding: var(--spacing-sm) var(--spacing-md);     }.top-bar-left{         display: none;     }.top-bar-center{         order: 1;         width: 100%;         justify-content: center;         font-size: var(--font-size-xs);         text-align: center;     }.top-bar-right{         display: none;     }.top-bar{         display: none;     }/* Hide desktop nav */     .header-nav{         display: none;     }.header-container{         padding: 0 var(--spacing-md);     }.header-logo a{         font-size: 18px;     }.header-icons{         gap: 3px;     }.header-icon{         font-size: 14px;         padding: 6px;     }.header-cart-total{         display: none;     }/* Category bar hidden on mobile (in mobile menu instead) */     .category-bar{         display: none;     }.mini-cart-panel,.search-panel{         width: 100%;         right: -100%;     }.mobile-menu-panel{         width: 100%;         left: -100%;     }}@media (max-width: 480px) {.search-panel,.mini-cart-panel{         width: 100%;     }.mini-cart-footer{         padding-bottom: 60px;     }.search-view-all{         margin-bottom: 50px;     }}/* ===================================    Category Bar - POPRAWKA FINALNA    =================================== */ .category-bar{     background-color: var(--color-dark-lighter);     height: var(--category-bar-height);     border-bottom: 1px solid rgba(255,255,255,0.1); }.category-bar-container{     max-width: var(--max-width);     width: 100%;     height: 100%;     margin: 0 auto;     padding: 0 var(--spacing-lg);     display: flex;     justify-content: center; }.category-list{     display: flex;     align-items: center;     justify-content: center;     height: 100%;     gap: 0; }.category-item{     position: relative;     height: 100%;     display: flex;     align-items: center; }/* Link kategorii */ .category-link{     display: flex;     align-items: center;     height: 100%;     padding: 0 var(--spacing-xs);     padding-left: var(--spacing-md);     font-size: var(--font-size-sm);     font-weight: var(--font-weight-medium);     color: var(--color-button);     white-space: nowrap;     transition: color var(--transition-fast), background-color var(--transition-fast); }.category-link:hover{     color: var(--color-white); }/* ================================    CHEVRON - OBOK NAZWY KATEGORII    ================================ */ .category-toggle{     display: inline-flex;     align-items: center;     justify-content: center;     width: 20px;     height: 100%;     color: var(--color-button);     font-size: 9px;     transition: all var(--transition-fast);     cursor: pointer;     background: none;     border: none;     padding: 0;     margin-right: var(--spacing-sm); }.category-toggle:hover{     color: var(--color-hover); }.category-toggle i{     transition: transform var(--transition-fast); }.category-item.open .category-toggle i{     transform: rotate(180deg); }/* ================================    DROPDOWN - Z PRZEWIJANIEM    ================================ */ .category-dropdown{     position: absolute;     top: 100%;     left: 0;     background-color: var(--color-dark-lighter);     min-width: 280px;     max-height: 60vh; /* Max 60% wysokości ekranu */     overflow-y: auto;     padding: var(--spacing-md) 0;     border-radius: 0 0 var(--border-radius) var(--border-radius);     box-shadow: 0 10px 40px rgba(0,0,0,0.3);     opacity: 0;     visibility: hidden;     transform: translateY(-10px);     transition: all var(--transition-fast);     z-index: 100;     display: none; }/* Scrollbar */ .category-dropdown::-webkit-scrollbar{     width: 5px; }.category-dropdown::-webkit-scrollbar-track{     background: rgba(255,255,255,0.05); }.category-dropdown::-webkit-scrollbar-thumb{     background: var(--color-button);     border-radius: 3px; }.category-dropdown::-webkit-scrollbar-thumb:hover{     background: var(--color-hover); }.category-item.open .category-dropdown{     opacity: 1;     visibility: visible;     transform: translateY(0);     display: block; }/* Subcategory list */ .subcategory-list{     display: flex;     flex-direction: column; }/* Subcategory item - flex row */ .subcategory-item{     display: flex;     flex-wrap: wrap;     align-items: center; }.subcategory-item.has-children{     /* nic specjalnego */ }/* Subcategory link */ .subcategory-link{     flex: 1;     display: block;     padding: var(--spacing-sm) var(--spacing-lg);     font-size: var(--font-size-sm);     color: var(--color-button);     transition: all var(--transition-fast); }.subcategory-link:hover{     background-color: rgba(16, 185, 129, 0.1);     color: var(--color-hover); }/* Subcategory toggle - OBOK NAZWY */ .subcategory-toggle{     display: inline-flex;     align-items: center;     justify-content: center;     width: 36px;     height: 36px;     color: var(--color-button);     font-size: 10px;     transition: all var(--transition-fast);     cursor: pointer;     background: none;     border: none;     padding: 0;     margin-right: var(--spacing-xs); }.subcategory-toggle:hover{     color: var(--color-hover); }.subcategory-toggle i{     transition: transform var(--transition-fast); }.subcategory-item.open > .subcategory-toggle i{     transform: rotate(180deg); }/* Sub-subcategory list */ .sub-subcategory-list{     display: none;     width: 100%;     padding: var(--spacing-xs) 0;     background-color: rgba(0,0,0,0.15); }.subcategory-item.open > .sub-subcategory-list{     display: block; }.sub-subcategory-item a{     display: block;     padding: var(--spacing-xs) var(--spacing-lg);     padding-left: calc(var(--spacing-xl) + var(--spacing-sm));     font-size: var(--font-size-xs);     color: var(--color-button);     opacity: 0.75;     transition: all var(--transition-fast); }.sub-subcategory-item a:hover{     color: var(--color-hover);     opacity: 1;     background-color: rgba(16, 185, 129, 0.1); }/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .category-link {         padding: 0 var(--spacing-xs);         padding-left: var(--spacing-sm);         font-size: var(--font-size-xs);     }          .category-toggle {         width: 16px;         font-size: 8px;     }          .category-dropdown {         min-width: 220px;     } }@media (max-width: 768px) {.category-bar{         display: none;     }}/* ===================================    Footer    =================================== */ .site-footer{     background-color: var(--color-dark);     color: var(--color-white); }.footer-main{     padding: 60px 0 40px;     border-bottom: 1px solid rgba(255, 255, 255, 0.1); }.footer-container{     max-width: var(--max-width);     margin: 0 auto;     padding: 0 var(--spacing-lg);     display: grid;     grid-template-columns: 1.5fr 1fr 1fr 1fr;     gap: 40px; }.footer-bottom .footer-container{     display: flex;     justify-content: space-between;     align-items: center; }/* Footer Brand Column */ .footer-brand{     display: flex;     flex-direction: column;     gap: var(--spacing-lg); }.footer-logo{     font-size: 24px;     font-weight: 900;     color: var(--color-button);     display: inline-block; }.footer-logo:hover{     color: var(--color-hover); }.footer-contact{     display: flex;     flex-direction: column;     gap: var(--spacing-sm); }.footer-contact-item{     display: flex;     align-items: center;     gap: var(--spacing-sm);     color: var(--color-light-gray);     font-size: var(--font-size-sm);     transition: color var(--transition-fast); }.footer-contact-item:hover{     color: var(--color-button); }.footer-contact-item i{     width: 20px;     color: var(--color-button); }/* Footer Columns */ .footer-title{     font-size: 24px;     font-weight: var(--font-weight-bold);     color: var(--color-button);     margin-bottom: var(--spacing-lg); }.footer-menu{     display: flex;     flex-direction: column;     gap: var(--spacing-sm); }.footer-menu li a,.footer-nav .footer-menu li a{     color: var(--color-light-gray);     font-size: var(--font-size-sm);     transition: color var(--transition-fast);     display: block;     padding: 4px 0; }.footer-menu li a:hover,.footer-nav .footer-menu li a:hover{     color: var(--color-button); }/* Footer Social */ .footer-social{     display: flex;     gap: var(--spacing-md); }.social-icon{     width: 44px;     height: 44px;     background-color: rgba(255, 255, 255, 0.1);     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     color: var(--color-white);     font-size: var(--font-size-lg);     transition: all var(--transition-fast); }.social-icon:hover{     background-color: var(--color-button);     transform: translateY(-3px); }/* Footer Bottom */ .footer-bottom{     padding: var(--spacing-lg) 0; }.footer-copyright{     font-size: var(--font-size-sm);     color: var(--color-gray); }.footer-credits{     font-size: var(--font-size-sm);     color: var(--color-gray); }.footer-credits a{     color: var(--color-button);     font-weight: var(--font-weight-medium); }.footer-credits a:hover{     color: var(--color-hover); }@media (max-width: 768px) {/* Footer Responsive */     .footer-container{         grid-template-columns: 1fr;         gap: var(--spacing-xl);         text-align: left;     }.footer-brand{         align-items: flex-start;     }.footer-contact{         align-items: flex-start;     }.footer-menu{         align-items: flex-start;     }.footer-social{         justify-content: flex-start;     }.footer-bottom .footer-container{         flex-direction: column;         gap: var(--spacing-sm);         text-align: left;     }}/* ===================================    Cookie Banner - prawy dolny róg (kwadrat)    =================================== */ .cookie-banner{     position: fixed;     bottom: 20px;     right: 20px;     top: auto;     left: auto;     z-index: 9998; /* mniej niż back-to-top (9999) */     display: block;     width: 480px;     max-width: calc(100vw - 40px);     opacity: 0;     visibility: hidden;     transform: translateY(20px);     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; }.cookie-banner.active{     opacity: 1;     visibility: visible;     transform: translateY(0); }/* Overlay - zostawiamy w DOM,ale ukrywamy */ .cookie-overlay{     display: none; }.cookie-content{     position: relative;     background: var(--color-dark, #1a1a1a);     border-radius: 16px;     padding: 20px;     width: 100%;     max-height: calc(100vh - 40px);     overflow-y: auto;     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);     border: 1px solid rgba(255, 255, 255, 0.1); }/* Header */ .cookie-header{     display: flex;     align-items: center;     gap: 10px;     margin-bottom: 8px; }.cookie-icon{     font-size: 24px;     color: var(--color-button, #f5a623); }.cookie-header h3{     color: var(--color-white, #fff);     font-size: 17px;     font-weight: 700;     margin: 0; }/* Description */ .cookie-description{     color: var(--color-light-gray, #a0a0a0);     font-size: 12.5px;     line-height: 1.45;     margin: 0 0 12px 0; }/* Options - bardziej kompaktowe */ .cookie-options{     display: flex;     flex-direction: column;     gap: 8px;     margin-bottom: 12px;     padding: 10px 12px;     background: rgba(255, 255, 255, 0.03);     border-radius: 10px;     border: 1px solid rgba(255, 255, 255, 0.08); }.cookie-option{     padding-bottom: 8px;     border-bottom: 1px solid rgba(255, 255, 255, 0.08); }.cookie-option:last-child{     padding-bottom: 0;     border-bottom: none; }.cookie-option-header{     display: flex;     align-items: center;     gap: 10px;     margin-bottom: 2px; }.cookie-option-info{     display: flex;     align-items: center;     gap: 8px;     flex-wrap: wrap; }.cookie-option-title{     color: var(--color-white, #fff);     font-weight: 600;     font-size: 13.5px; }.cookie-option-badge{     font-size: 10px;     padding: 2px 7px;     background: rgba(255, 255, 255, 0.1);     color: var(--color-light-gray, #a0a0a0);     border-radius: 20px; }.cookie-option-desc{     color: var(--color-light-gray, #888);     font-size: 11.5px;     line-height: 1.4;     margin: 0;     padding-left: 50px; }/* Toggle Switch - mniejszy */ .cookie-toggle{     position: relative;     display: inline-block;     width: 36px;     height: 20px;     flex-shrink: 0; }.cookie-toggle input{     opacity: 0;     width: 0;     height: 0; }.cookie-toggle-slider{     position: absolute;     cursor: pointer;     top: 0;     left: 0;     right: 0;     bottom: 0;     background-color: rgba(255, 255, 255, 0.2);     transition: 0.3s;     border-radius: 24px; }.cookie-toggle-slider:before{     position: absolute;     content: "";     height: 14px;     width: 14px;     left: 3px;     bottom: 3px;     background-color: white;     transition: 0.3s;     border-radius: 50%; }.cookie-toggle input:checked + .cookie-toggle-slider{     background-color: var(--color-button, #f5a623); }.cookie-toggle input:checked + .cookie-toggle-slider:before{     transform: translateX(16px); }.cookie-toggle.disabled .cookie-toggle-slider{     background-color: var(--color-button, #f5a623);     opacity: 0.6;     cursor: not-allowed; }.cookie-toggle.disabled .cookie-toggle-slider:before{     transform: translateX(16px); }/* Buttons - główny na całą szerokość,dwa drugorzędne w jednym rzędzie */ .cookie-buttons{     display: grid;     grid-template-columns: 1fr 1fr;     gap: 8px; }.cookie-btn{     padding: 10px 16px;     border-radius: 8px;     font-size: 13px;     font-weight: 600;     cursor: pointer;     transition: all 0.2s ease;     border: 2px solid transparent;     display: flex;     align-items: center;     justify-content: center;     gap: 6px;     line-height: 1.2; }.cookie-btn-accept-all{     background-color: var(--color-button, #f5a623);     color: var(--color-white, #fff);     border-color: var(--color-button, #f5a623);     grid-column: 1 / -1; /* główny przycisk na pełną szerokość */     padding: 12px 16px;     font-size: 14px; }.cookie-btn-accept-all:hover{     background-color: var(--color-hover, #e09000);     border-color: var(--color-hover, #e09000);     transform: translateY(-2px); }.cookie-btn-save{     background-color: rgba(255, 255, 255, 0.1);     color: var(--color-white, #fff);     border-color: rgba(255, 255, 255, 0.3); }.cookie-btn-save:hover{     background-color: rgba(255, 255, 255, 0.15);     border-color: rgba(255, 255, 255, 0.5); }.cookie-btn-necessary{     background-color: transparent;     color: var(--color-light-gray, #a0a0a0);     border-color: rgba(255, 255, 255, 0.15);     font-size: 12.5px; }.cookie-btn-necessary:hover{     color: var(--color-white, #fff);     border-color: rgba(255, 255, 255, 0.3); }/* Footer */ .cookie-footer{     text-align: center;     margin-top: 10px;     font-size: 11.5px;     color: var(--color-light-gray, #666); }.cookie-footer a{     color: var(--color-light-gray, #888);     text-decoration: none; }.cookie-footer a:hover{     color: var(--color-button, #f5a623);     text-decoration: underline; }/* Scrollbar */ .cookie-content::-webkit-scrollbar{     width: 6px; }.cookie-content::-webkit-scrollbar-track{     background: rgba(255, 255, 255, 0.05);     border-radius: 3px; }.cookie-content::-webkit-scrollbar-thumb{     background: rgba(255, 255, 255, 0.2);     border-radius: 3px; }/* Responsive */ @media (max-width: 540px){     .cookie-banner {         bottom: 10px;         right: 10px;         left: 10px;         width: auto;         max-width: none;     }      .cookie-content {         padding: 18px;     }      /* Na mobile przyciski drugorzędne wracają do układu pionowego */     .cookie-buttons {         grid-template-columns: 1fr;     }      .cookie-btn-accept-all {         grid-column: 1;     }      .cookie-option-desc {         padding-left: 0;         margin-top: 4px;     } }.slide{     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     opacity: 0;     visibility: hidden;     transition: opacity 0.8s ease, visibility 0.8s ease; }.slide.active{     opacity: 1;     visibility: visible; }.section-badge{     display: inline-block;     width: max-content;     background-color: #10b98120;     border: 1px solid var(--color-button);     color: var(--color-white);     font-size: var(--font-size-xs);     font-weight: var(--font-weight-bold);     padding: var(--spacing-sm) var(--spacing-md);     border-radius: 30px;     margin-bottom: var(--spacing-md);     letter-spacing: 1px;     text-transform: uppercase; }/* ========================================    Responsive - Tablet    ======================================== */  @media screen and (max-width: 1024px){     .sports-category-item {         aspect-ratio: 3 / 2;     }          .sports-category-text {         font-size: 1.3rem;     }          .sports-category-content {         padding: 20px 25px;     }          .sports-category-hover-text {         bottom: 20px;         left: 25px;         font-size: 1rem;     } }/* ========================================    Responsive - Mobile (2x2 Grid)    ======================================== */  @media screen and (max-width: 768px){     .sports-categories-grid {         grid-template-columns: repeat(2, 1fr);     }          .sports-category-item {         aspect-ratio: 1 / 1;     }          .sports-category-text {         font-size: 1.1rem;     }          .sports-category-content {         padding: 15px 20px;     }          .sports-category-hover-text {         bottom: 15px;         left: 20px;         font-size: 0.9rem;     } }/* ========================================    Responsive - Small Mobile    ======================================== */  @media screen and (max-width: 480px){     .sports-category-text {         font-size: 1rem;         letter-spacing: 0.02em;     }          .sports-category-content {         padding: 12px 15px;     }          .sports-category-hover-text {         bottom: 12px;         left: 15px;         font-size: 0.8rem;     } }/* Responsive */ @media (max-width: 992px){     .brands-section-container {         flex-direction: column;         text-align: left;     }          .brands-left .section-badge,     .brands-left .section-title,     .brands-left .section-subtitle {         text-align: left;     }               .brands-divider {         width: 80%;         height: 2px;         min-height: auto;         transform: skewY(-2deg);         margin: 30px auto;     }          .brands-right {         width: 100%;     } }.ts-newsletter-form{     max-width: 1000px !important; }/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .hero-slider { height: 500px; }     .slide-heading { font-size: 36px; }     .products-grid { grid-template-columns: repeat(3, 1fr); }     .reviews-grid { grid-template-columns: 1fr; } }/* ===================================    Mobile Slider - CRITICAL: zapobiegaj flash 4 produktów    =================================== */ @media (max-width: 768px){     .products-slider-track {         gap: var(--spacing-md);     }          /* Kluczowe: od razu 1 produkt na całą szerokość */     .product-slide {         width: 100% !important;         min-width: 100% !important;         max-width: 100% !important;     }          .products-slider-wrapper {         gap: var(--spacing-sm);     }          .slider-arrow {         width: 36px;         height: 36px;     }          .slider-arrow i {         font-size: 14px;     }          /* Blog section - na mobile: nagłówek na górze, divider, wpisy na dole */     .blog-section-container {         flex-direction: column;     }          .blog-right {         order: -1;     }          .blog-right .section-badge,     .blog-right .section-title,     .blog-right .section-subtitle {         text-align: left;     }          .reviews-left .section-badge,     .reviews-left .section-title,     .reviews-left .section-subtitle {         text-align: left;     }          .reviews-average {         justify-content: flex-start;     }          .section-header {         text-align: left;     }          .newsletter-content {         text-align: left;     }          .contact-section .section-header {         text-align: left;     }          .contact-info {         justify-items: start;     } }/* ===================================    Kontakt Page Styles    =================================== */  /* Hero Section */ .page-hero{     position: relative;     min-height: 400px;     background-color: var(--color-dark);     background-size: cover;     background-position: center;     display: flex;     align-items: center; }/* Breadcrumbs */ .breadcrumbs{     display: flex;     align-items: center;     gap: var(--spacing-sm);     font-size: var(--font-size-sm); }.breadcrumbs a{     color: var(--color-light-gray);     transition: color var(--transition-fast); }.breadcrumbs a:hover{     color: var(--color-button); }.breadcrumbs .separator{     color: var(--color-gray);     font-size: 10px; }.breadcrumbs .current{     color: var(--color-button); }/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .contact-page-grid {         grid-template-columns: 1fr;         gap: 40px;     }          .contact-info-column {         padding-right: 0;     } }@media (max-width: 768px) {.page-hero{         min-height: 200px;     }}@media (max-width: 480px) {.breadcrumbs{         font-size: var(--font-size-xs);     }}/* ===================================    Info Pages Styles (Dostawa,Płatności,Zwroty,Regulamin)    =================================== */  /* Info Page Section */ .info-page-section{     background-color: var(--color-dark);     background-image: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.1) 0%, transparent 70%);     padding: 60px 0 80px; }.info-page-container{     max-width: 900px;     margin: 0 auto;     padding: 0 var(--spacing-lg); }/* CTA Box */ .info-cta{     text-align: center;     background-color: var(--color-dark-lighter);     border-radius: var(--border-radius-lg);     padding: 50px;     margin-top: 50px; }.info-cta h3{     font-size: 24px;     font-weight: 700;     color: var(--color-white);     margin-bottom: var(--spacing-sm); }.info-cta p{     font-size: var(--font-size-base);     color: var(--color-gray);     margin-bottom: var(--spacing-xl); }.info-cta-btn{     display: inline-flex;     align-items: center;     gap: var(--spacing-sm);     background-color: var(--color-button);     color: var(--color-white);     font-size: var(--font-size-base);     font-weight: var(--font-weight-bold);     padding: var(--spacing-md) var(--spacing-xl);     border-radius: var(--border-radius);     transition: background-color var(--transition-fast); }.info-cta-btn:hover{     background-color: var(--color-hover); }/* Info Text Content */ .info-text-content{     font-size: var(--font-size-base);     color: var(--color-light-gray);     line-height: 1.8; }.info-text-content h3{     font-size: var(--font-size-lg);     font-weight: var(--font-weight-bold);     color: var(--color-white);     margin: var(--spacing-xl) 0 var(--spacing-md); }.info-text-content h3:first-child{     margin-top: 0; }.info-text-content p{     margin-bottom: var(--spacing-md); }.info-text-content ul,.info-text-content ol{     margin: var(--spacing-md) 0;     padding-left: var(--spacing-xl); }.info-text-content li{     margin-bottom: var(--spacing-sm); }.info-text-content strong{     color: var(--color-white); }.info-text-content a{     color: var(--color-button); }.info-text-content a:hover{     text-decoration: underline; }/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .process-steps {         grid-template-columns: repeat(2, 1fr);         gap: var(--spacing-xl);     }          .process-step:not(:last-child)::after {         display: none;     }          .payment-methods-grid {         grid-template-columns: repeat(2, 1fr);     } }@media (max-width: 768px) {.info-page-section{         padding: 40px 0 60px;     }.info-cta{         padding: 30px var(--spacing-lg);     }}/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .blog-posts-grid {         grid-template-columns: repeat(2, 1fr);     } }/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .related-posts-grid {         grid-template-columns: repeat(2, 1fr);     } }/* Style dla cen WooCommerce (del = stara cena{     color: #999 !important;     font-size: 1.1rem;     font-weight: 400;     text-decoration: line-through;     margin-right: 8px; }  @keyframes pulse-badge {     0%, 100% {         transform: scale(1);     }     50% {         transform: scale(1.05);     } }/* ========================================    Responsive    ======================================== */  @media screen and (max-width: 768px){     .sp-price {         font-size: 1.5rem;     }          .sp-price del,     .sp-price .sp-price-old {         font-size: 1rem;     }          .sp-price-discount-badge {         font-size: 0.8rem;         padding: 5px 10px;     }          .sp-omnibus {         font-size: 0.75rem;     } }/* ===================================    Responsive    =================================== */ @media (max-width: 1024px){     .sp-main {         gap: 40px;     }          .sp-reviews-content {         grid-template-columns: 1fr;     } }/* ==========================================    RESPONSIVE    ========================================== */ @media (max-width: 768px){     .mk-auth-container {         grid-template-columns: 1fr;         gap: 30px;     }          .mk-auth-box {         padding: 30px 20px;     }          .mk-social-buttons {         flex-direction: column;     }          .mk-btn-social {         width: 100%;     }          .mk-form-row--2col {         grid-template-columns: 1fr;     } }  @keyframes mkFadeIn {     from { opacity: 0; transform: translateY(10px); }     to { opacity: 1; transform: translateY(0); } }/* ==========================================    RESPONSIVE    ========================================== */ @media (max-width: 1024px){     .mk-account-container { grid-template-columns: 240px 1fr; gap: 30px; }     .mk-stats-grid { grid-template-columns: repeat(2, 1fr); } }/* ==========================================    ORDERS TABLE - MOBILE    ========================================== */ @media (max-width: 768px){     .mk-orders-table-wrapper {         margin: 0 -20px;         padding: 0 20px;     }          .mk-orders-table,     .mk-orders-table thead,     .mk-orders-table tbody,     .mk-orders-table th,     .mk-orders-table td,     .mk-orders-table tr {         display: block;     }          .mk-orders-table thead {         display: none;     }          .mk-orders-table tbody tr {         background: var(--mk-bg-dark);         border: 1px solid var(--mk-border);         border-radius: var(--mk-radius-sm);         margin-bottom: 15px;         padding: 15px;     }          .mk-orders-table tbody tr:hover {         background: var(--mk-bg-card-hover);     }          .mk-orders-table td {         display: flex;         justify-content: space-between;         align-items: center;         padding: 10px 0;         border-bottom: 1px solid var(--mk-border);         text-align: right;     }          .mk-orders-table td:last-child {         border-bottom: none;     }          .mk-orders-table td::before {         content: attr(data-label);         font-size: 12px;         font-weight: 500;         color: var(--mk-text-muted);         text-transform: uppercase;         text-align: left;     }          /* Products table in order details */     .mk-products-table,     .mk-products-table thead,     .mk-products-table tbody,     .mk-products-table th,     .mk-products-table td,     .mk-products-table tr {         display: block;     }      .mk-products-table thead {         display: none;     }          .mk-products-table tbody tr {         background: var(--mk-bg-dark);         border: 1px solid var(--mk-border);         border-radius: var(--mk-radius-sm);         margin-bottom: 15px;         padding: 15px;     }          .mk-products-table td {         display: flex;         justify-content: space-between;         align-items: center;         padding: 10px 0;         border-bottom: 1px solid var(--mk-border);         text-align: right;     }          .mk-products-table td:last-child {         border-bottom: none;     }          .mk-products-table td::before {         content: attr(data-label);         font-size: 12px;         font-weight: 500;         color: var(--mk-text-muted);         text-transform: uppercase;         text-align: left;         flex-shrink: 0;         margin-right: 15px;     }          .mk-product-cell {         flex-direction: row-reverse;         width: 100%;     }          .mk-product-thumb {         width: 40px;         height: 40px;     }          .mk-products-table tfoot tr {         background: transparent;         border: none;         padding: 5px 0;     }          .mk-products-table tfoot td {         padding: 8px 0;         border-bottom: 1px solid var(--mk-border);     }          .mk-products-table tfoot td:last-child {         width: 100%;     }          .mk-order-total-row td {         font-weight: 600;     }          /* Loyalty history table */     .mk-loyalty-history-table,     .mk-loyalty-history-table thead,     .mk-loyalty-history-table tbody,     .mk-loyalty-history-table th,     .mk-loyalty-history-table td,     .mk-loyalty-history-table tr {         display: block;     }          .mk-loyalty-history-table thead {         display: none;     }          .mk-loyalty-history-table tbody tr {         background: var(--mk-bg-dark);         border: 1px solid var(--mk-border);         border-radius: var(--mk-radius-sm);         margin-bottom: 10px;         padding: 12px 15px;     }          .mk-loyalty-history-table td {         display: flex;         justify-content: space-between;         align-items: center;         padding: 6px 0;         border-bottom: 1px solid var(--mk-border);         font-size: 13px;     }          .mk-loyalty-history-table td:last-child {         border-bottom: none;     }          .mk-loyalty-history-table td::before {         content: attr(data-label);         font-size: 11px;         font-weight: 500;         color: var(--mk-text-muted);         text-transform: uppercase;     } }/* ==========================================    RESPONSIVE    ========================================== */ @media (max-width: 1200px){     .cart-layout {         grid-template-columns: 1fr 350px;         gap: 30px;     } }/* InPost Geowidget v5 - WAŻNE: wymuszenie wysokości */ inpost-geowidget{     display: block !important;     width: 100% !important;     height: 500px !important;     min-height: 500px !important;     border-radius: var(--co-radius-sm);     overflow: hidden; }inpost-geowidget [class*="map"]{     height: 100% !important;     min-height: 450px !important; }/* ==========================================    RESPONSIVE    ========================================== */ @media (max-width: 1100px){     .checkout-layout {         grid-template-columns: 1fr 380px;         gap: 30px;     } }/* ==========================================    RESPONSIVE    ========================================== */ @media (max-width: 768px){     .ts-ty-section {         padding: 25px 0 50px;     }          .ts-ty-container {         padding: 0 15px;     }          .ts-ty-icon {         width: 70px;         height: 70px;         font-size: 30px;     }          .ts-ty-title {         font-size: 22px;     }          .ts-ty-subtitle {         font-size: 14px;     }          .ts-ty-loyalty {         flex-direction: column;         text-align: center;         padding: 20px;     }          .ts-ty-loyalty-points {         justify-content: center;     }          .ts-ty-points-earned {         font-size: 30px;     }          .ts-ty-box {         padding: 20px;     }          .ts-ty-order-meta {         grid-template-columns: 1fr;     }          .ts-ty-products-table th:nth-child(2),     .ts-ty-products-table td:nth-child(2) {         display: none;     }          .ts-ty-product-thumb {         width: 45px;         height: 45px;     }          .ts-ty-actions {         flex-direction: column;     }          .ts-ty-btn {         justify-content: center;         width: 100%;     }          .ts-ty-paczkomat {         flex-direction: column;         text-align: center;         align-items: center;     } }  @keyframes tsShopSlideIn {     from { transform: translateX(-100%); }     to { transform: translateX(0); } }/* ==========================================    RESPONSIVE    ========================================== */ @media (max-width: 1200px){     .ts-shop-products {         grid-template-columns: repeat(3, 1fr);     } }  @keyframes pulse {     0%, 100% { transform: scale(1); }     50% { transform: scale(1.2); } }  @keyframes fadeOutItem {     from { opacity: 1; transform: scale(1); }     to { opacity: 0; transform: scale(0.8); } }.ts-variant-modal-overlay{     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: rgba(0, 0, 0, 0.8);     backdrop-filter: blur(4px); }.ts-variant-modal-content{     position: relative;     width: 100%;     max-width: 500px;     max-height: 90vh;     background: rgba(17, 17, 17, 0.95);     border: 1px solid rgba(255, 255, 255, 0.1);     border-radius: 16px;     display: flex;     flex-direction: column;     animation: modalSlideIn 0.3s ease;     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); }  @keyframes modalSlideIn {     from { opacity: 0; transform: translateY(30px) scale(0.95); }     to { opacity: 1; transform: translateY(0) scale(1); } }.ts-variant-modal-header{     display: flex;     justify-content: space-between;     align-items: center;     padding: 20px 25px;     border-bottom: 1px solid rgba(255, 255, 255, 0.1); }.ts-variant-modal-header h3{     margin: 0;     font-size: 18px;     color: #ffffff;     font-weight: 600; }.ts-variant-modal-close{     width: 36px;     height: 36px;     border: none;     background: rgba(255, 255, 255, 0.1);     border-radius: 50%;     cursor: pointer;     display: flex;     align-items: center;     justify-content: center;     color: #ffffff;     transition: all 0.3s ease; }.ts-variant-modal-close:hover{     background: rgba(255, 255, 255, 0.2); }.ts-variant-modal-body{     padding: 25px;     overflow-y: auto;     flex: 1; }.ts-variant-modal-product{     display: flex;     gap: 20px;     margin-bottom: 25px;     padding-bottom: 20px;     border-bottom: 1px solid rgba(255, 255, 255, 0.1); }.ts-variant-modal-image{     width: 100px;     height: 100px;     border-radius: 12px;     overflow: hidden;     flex-shrink: 0;     background: rgba(255, 255, 255, 0.05); }.ts-variant-modal-image img{     width: 100%;     height: 100%;     object-fit: cover; }.ts-variant-modal-details h4{     margin: 0 0 10px;     font-size: 16px;     color: #ffffff;     line-height: 1.4;     font-weight: 600; }.ts-variant-modal-price{     font-size: 20px;     font-weight: 700;     color: #10b981; }.ts-variant-modal-loading{     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;     padding: 40px;     color: #ffffff;     gap: 15px; }.ts-variant-modal-loading i{     font-size: 32px;     color: #10b981; }/* Attribute groups */ .ts-variant-attribute-group{     margin-bottom: 24px; }.ts-variant-attribute-group > label{     display: block;     font-size: 14px;     font-weight: 600;     color: #ffffff;     margin-bottom: 12px;     text-transform: uppercase;     letter-spacing: 0.5px; }.ts-variant-options{     display: flex;     flex-wrap: wrap;     gap: 10px; }.ts-variant-option{     position: relative; }.ts-variant-option input{     position: absolute;     opacity: 0;     pointer-events: none; }.ts-variant-option span{     display: block;     padding: 12px 20px;     border: 1px solid rgba(255, 255, 255, 0.2);     border-radius: 8px;     font-size: 14px;     font-weight: 500;     color: #ffffff;     cursor: pointer;     transition: all 0.3s ease;     background: rgba(255, 255, 255, 0.05); }.ts-variant-option input:checked + span{     border-color: #10b981;     background: rgba(16, 185, 129, 0.2);     color: #10b981; }.ts-variant-option span:hover{     border-color: rgba(255, 255, 255, 0.4);     background: rgba(255, 255, 255, 0.1); }/* Quantity */ .ts-variant-modal-quantity{     display: flex;     align-items: center;     gap: 15px;     margin-bottom: 20px; }.ts-variant-modal-quantity > label{     font-size: 14px;     font-weight: 600;     color: #ffffff; }.ts-quantity-selector{     display: flex;     align-items: center;     border: 1px solid rgba(255, 255, 255, 0.2);     border-radius: 8px;     overflow: hidden;     background: rgba(255, 255, 255, 0.05); }.ts-qty-btn{     width: 44px;     height: 44px;     border: none;     background: rgba(255, 255, 255, 0.1);     cursor: pointer;     display: flex;     align-items: center;     justify-content: center;     color: #ffffff;     transition: all 0.3s ease; }.ts-qty-btn:hover{     background: rgba(255, 255, 255, 0.2); }.ts-quantity-selector input{     width: 60px;     height: 44px;     border: none;     text-align: center;     font-size: 16px;     font-weight: 600;     background: transparent;     color: #ffffff;     -moz-appearance: textfield; }.ts-quantity-selector input::-webkit-outer-spin-button,.ts-quantity-selector input::-webkit-inner-spin-button{     -webkit-appearance: none; }/* Selected price */ .ts-variant-modal-selected{     display: flex;     justify-content: space-between;     align-items: center;     padding: 16px 20px;     background: rgba(16, 185, 129, 0.15);     border: 1px solid rgba(16, 185, 129, 0.3);     border-radius: 10px;     margin-bottom: 15px; }.ts-variant-modal-selected .label{     font-size: 14px;     color: #ffffff;     font-weight: 500; }.ts-variant-modal-selected .price{     font-size: 24px;     font-weight: 700;     color: #10b981; }/* Stock info */ .ts-variant-modal-stock{     padding: 12px 16px;     border-radius: 8px;     font-size: 14px;     display: flex;     align-items: center;     gap: 10px;     font-weight: 500; }/* Footer */ .ts-variant-modal-footer{     display: flex;     gap: 15px;     padding: 20px 25px;     border-top: 1px solid rgba(255, 255, 255, 0.1); }.ts-variant-modal-cancel{     flex: 1;     padding: 14px 20px;     border: 1px solid rgba(255, 255, 255, 0.2);     background: transparent;     border-radius: 10px;     font-size: 15px;     font-weight: 600;     color: #ffffff;     cursor: pointer;     transition: all 0.3s ease; }.ts-variant-modal-cancel:hover{     border-color: rgba(255, 255, 255, 0.4);     background: rgba(255, 255, 255, 0.1); }.ts-variant-modal-submit{     flex: 2;     display: flex;     align-items: center;     justify-content: center;     gap: 10px;     padding: 14px 20px;     border: none;     background: #10b981;     border-radius: 10px;     font-size: 15px;     font-weight: 600;     color: #ffffff;     cursor: pointer;     transition: all 0.3s ease; }.ts-variant-modal-submit:hover:not(:disabled){     background: #059669;     transform: translateY(-2px);     box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }.ts-variant-modal-submit:disabled{     opacity: 0.5;     cursor: not-allowed; }.ts-variant-modal-submit.added{     background: #10b981; }/* ==========================================    RESPONSIVE MODAL    ========================================== */  @media (max-width: 768px){     .ts-variant-modal-content,     .ts-notify-modal-content {         max-height: 95vh;         margin: 10px;         border-radius: 12px;     }          .ts-variant-modal-header,     .ts-notify-modal-header,     .ts-variant-modal-body,     .ts-notify-modal-body,     .ts-variant-modal-footer {         padding: 15px 20px;     }          .ts-variant-modal-product {         flex-direction: column;         align-items: center;         text-align: center;     }          .ts-variant-modal-image {         width: 120px;         height: 120px;     }          .ts-variant-options {         justify-content: center;     }          .ts-variant-modal-footer {         flex-direction: column;     }          .ts-variant-modal-cancel,     .ts-variant-modal-submit {         flex: none;         width: 100%;     }          .ts-notify-input-group {         flex-direction: column;     }          .ts-notify-submit {         width: 100%;         justify-content: center;     }      .ts-wishlist-count-info {         font-size: 12px;     }      .ts-wishlist-clear-btn {         font-size: 10px;     } }/* Responsywność */ @media screen and (max-width: 768px){     .product-omnibus {         font-size: 6px;     } }/* Responsive */ @media (max-width: 1200px){     .loyalty-tiers {         grid-template-columns: repeat(3, 1fr);     } }/* Animacja ikony dzwonka */ @keyframes bellRing{     0%, 100% { transform: rotate(0); }     20% { transform: rotate(15deg); }     40% { transform: rotate(-15deg); }     60% { transform: rotate(10deg); }     80% { transform: rotate(-10deg); } }/* ===================================    Mobile Header - przycisk Kategorie    =================================== */ .mobile-cat-toggle{     display: none;     align-items: center;     gap: 8px;     padding: 8px 14px;     background-color: rgba(255, 255, 255, 0.06);     border: 1px solid rgba(16, 185, 129, 0.4);     border-radius: var(--border-radius);     color: var(--color-white);     font-size: var(--font-size-sm);     font-weight: var(--font-weight-medium);     cursor: pointer;     transition: all var(--transition-fast); }.mobile-cat-toggle i{     color: var(--color-button);     font-size: 14px; }.mobile-cat-toggle .mobile-cat-toggle-arrow{     font-size: 10px;     transition: transform var(--transition-fast); }.mobile-cat-toggle:hover{     border-color: var(--color-button); }.mobile-cat-toggle.is-open .mobile-cat-toggle-arrow{     transform: rotate(180deg); }/* ===================================    Mobile Bottom Navigation    =================================== */ .mobile-bottom-nav{     display: none; }@media (max-width: 768px) {/* ukrywamy tekstowe logo w nagłówku */     .header-logo{         display: none;     }/* pokazujemy przycisk Kategorie po lewej */     .mobile-cat-toggle{         display: flex;         order: -1;     }/* dolny pasek nawigacji */     .mobile-bottom-nav{         display: flex;         position: fixed;         bottom: 0;         left: 0;         width: 100%;         height: 64px;         background-color: var(--color-dark);         border-top: 1px solid rgba(255, 255, 255, 0.1);         box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);         z-index: 1400;         justify-content: space-around;         align-items: center;     }.mobile-bottom-nav-item{         flex: 1;         display: flex;         flex-direction: column;         align-items: center;         justify-content: center;         gap: 4px;         height: 100%;         color: var(--color-light-gray);         font-size: 11px;         font-weight: var(--font-weight-medium);         transition: color var(--transition-fast);     }.mobile-bottom-nav-item i{         font-size: 18px;         color: var(--color-button);         transition: transform var(--transition-fast);     }.mobile-bottom-nav-item:hover,.mobile-bottom-nav-item:active,.mobile-bottom-nav-item.active{         color: var(--color-white);     }.mobile-bottom-nav-item:active i{         transform: scale(0.9);     }/* środkowe logo - wyniesione ponad pasek */     .mobile-bottom-nav-logo{         flex: 0 0 auto;         width: 62px;         height: 62px;         margin-top: -28px;         background-color: var(--color-dark);         border: 4px solid var(--color-dark);         border-radius: 50%;         display: flex;         align-items: center;         justify-content: center;         box-shadow: 0 0 18px rgba(16, 185, 129, 0.55);         transition: transform var(--transition-fast);     }.mobile-bottom-nav-logo:active{         transform: scale(0.95);     }.mobile-bottom-nav-logo img{         width: 40px;         height: 40px;         object-fit: contain;     }/* miejsce na pasek,żeby treść się pod nim nie chowała */     body{         padding-bottom: 64px;     }/* baner cookies podnosimy ponad dolny pasek */     .cookie-banner{         bottom: 74px;     }}/* ============================================    TS Returns — style dopasowane do motywu "Twój Sportowy"    Używa zmiennych :root motywu (--color-button,szczegóły{     display: inline-flex;     align-items: center;     gap: 8px;     padding: 10px 18px;     background-color: var(--color-button, #10B981);     color: var(--color-white, #fff);     border: none;     border-radius: var(--border-radius, 8px);     font-family: var(--font-primary, "DM Sans", sans-serif);     font-size: var(--font-size-sm, 14px);     font-weight: var(--font-weight-bold, 600);     cursor: pointer;     transition: background-color var(--transition-fast, 0.2s ease);     line-height: 1.2; }/* ============================================================    2) MODAL ZWROTU — ciemny motyw,zielony akcent    ============================================================ */ .ts-modal{     position: fixed;     inset: 0;     z-index: 99999;     display: none;     align-items: flex-start;     justify-content: center;     padding: 40px 16px;     overflow-y: auto;     font-family: var(--font-primary, "DM Sans", sans-serif); }.ts-modal.is-open{ display: flex; }.ts-modal__overlay{     position: fixed;     inset: 0;     background: rgba(0, 0, 0, .8);     backdrop-filter: blur(5px); }.ts-modal__dialog{     position: relative;     background: var(--color-dark, #1a1a1a);     border: 1px solid var(--color-dark-lighter, #2d2d2d);     border-radius: var(--border-radius-lg, 12px);     max-width: 560px;     width: 100%;     padding: 32px;     box-shadow: 0 20px 60px rgba(0, 0, 0, .5);     z-index: 1;     margin: auto;     color: var(--color-white, #fff); }.ts-modal__close{     position: absolute;     top: 14px;     right: 18px;     background: none;     border: none;     font-size: 28px;     line-height: 1;     color: var(--color-gray, #6b7280);     cursor: pointer; }.ts-modal__close:hover{ color: var(--color-white, #fff); }.ts-modal__title{ margin: 0 0 18px; font-size: 22px; font-weight: var(--font-weight-bold, 600); color: var(--color-white, #fff); }.ts-modal__message{     padding: 12px 14px;     border-radius: var(--border-radius, 8px);     margin-bottom: 16px;     font-size: 14px; }.ts-step__desc{ color: var(--color-light-gray, #f5f5f5); margin-bottom: 16px; font-size: 14px; line-height: 1.6; }/* Pola formularza */ .ts-field{ margin-bottom: 16px; }.ts-field label{     display: block;     margin-bottom: 6px;     font-weight: var(--font-weight-medium, 500);     font-size: 14px;     color: var(--color-white, #fff); }.ts-field input,.ts-field textarea{     width: 100%;     padding: 12px 14px;     background: var(--color-dark-lighter, #2d2d2d);     border: 1px solid var(--color-button, #10B981);     border-radius: var(--border-radius, 8px);     color: var(--color-light-gray, #f5f5f5);     font-size: 14px;     font-family: inherit;     box-sizing: border-box; }.ts-field input::placeholder,.ts-field textarea::placeholder{ color: var(--color-gray, #6b7280); }.ts-field input:focus,.ts-field textarea:focus{ outline: none; border-color: var(--color-hover, #086848); }/* Lista pozycji */ .ts-items{ margin-bottom: 18px; }/* Zgoda */ .ts-confirm-box{     background: rgba(16, 185, 129, .08);     border: 1px solid rgba(16, 185, 129, .25);     border-radius: var(--border-radius, 8px);     padding: 14px;     margin-bottom: 18px; }.ts-checkbox{     display: flex;     gap: 10px;     align-items: flex-start;     font-size: 13.5px;     line-height: 1.5;     cursor: pointer;     color: var(--color-light-gray, #f5f5f5); }.ts-checkbox input{     margin-top: 2px;     flex-shrink: 0;     width: 18px;     height: 18px;     accent-color: var(--color-button, #10B981); }/* Przyciski w modalu */ .ts-btn{     display: inline-block;     width: 100%;     padding: 14px;     border: none;     border-radius: var(--border-radius, 8px);     font-size: 15px;     font-weight: var(--font-weight-bold, 600);     font-family: inherit;     cursor: pointer;     text-align: center;     transition: background-color .2s, opacity .2s; }.ts-btn--primary{ background: var(--color-button, #10B981); color: var(--color-white, #fff); }.ts-btn--primary:hover{ background: var(--color-hover, #086848); }.ts-btn--primary:disabled{ background: var(--color-dark-lighter, #2d2d2d); color: var(--color-gray, #6b7280); cursor: not-allowed; }/* Instrukcje / sukces */ .ts-success-badge{     width: 56px;     height: 56px;     border-radius: 50%;     background: rgba(16, 185, 129, .15);     color: var(--color-button, #10B981);     font-size: 28px;     display: flex;     align-items: center;     justify-content: center;     margin: 0 auto 16px; }.ts-instructions-box{     background: var(--color-dark-lighter, #2d2d2d);     border: 1px solid rgba(255, 255, 255, .1);     border-radius: var(--border-radius, 8px);     padding: 18px;     margin-bottom: 18px; }.ts-instructions-box h3{ margin: 0 0 10px; font-size: 16px; color: var(--color-white, #fff); }.ts-instructions-box h4{ margin: 16px 0 6px; font-size: 14px; color: var(--color-white, #fff); }.ts-instructions-box > div{ color: var(--color-light-gray, #f5f5f5); font-size: 14px; line-height: 1.7; }.ts-address{     background: var(--color-dark, #1a1a1a);     border: 1px dashed var(--color-button, #10B981);     border-radius: var(--border-radius, 8px);     padding: 12px;     font-size: 14px;     line-height: 1.6;     color: var(--color-light-gray, #f5f5f5); }/* Loader */ .ts-loader{     position: absolute;     inset: 0;     background: rgba(26, 26, 26, .8);     display: flex;     align-items: center;     justify-content: center;     border-radius: var(--border-radius-lg, 12px); }.ts-spinner{     width: 38px;     height: 38px;     border: 4px solid var(--color-dark-lighter, #2d2d2d);     border-top-color: var(--color-button, #10B981);     border-radius: 50%;     animation: ts-spin .8s linear infinite; } @keyframes ts-spin { to { transform: rotate(360deg); } }@media (max-width: 600px) {.ts-modal{ padding: 16px 8px; }.ts-modal__dialog{ padding: 22px 18px; }}/* ============================================================    3) MOJE KONTO — akcje w tabeli,karta zamówienia{     display: flex;     flex-wrap: wrap;     gap: 8px;     align-items: center; }/* ============================================================    5) OVERRIDE MODALA WTYCZKI POD CIEMNY MOTYW TwójSportowy    Modal wtyczki używa własnych zmiennych --tsr-*. Domyślnie są jasne    (pod Bobaska),więc tu nadpisujemy je na ciemne wartości motywu.    ============================================================ */ :root{     --tsr-dialog-bg: var(--color-dark, #1a1a1a);     --tsr-field-bg: var(--color-dark-lighter, #2d2d2d);     --tsr-border: var(--color-dark-lighter, #2d2d2d);     --tsr-text: #ffffff;     --tsr-text-muted: var(--color-gray, #6b7280);     --tsr-accent: var(--color-button, #10B981);     --tsr-accent-hover: var(--color-hover, #086848);     --tsr-radius: var(--border-radius, 8px);     --tsr-radius-lg: var(--border-radius-lg, 8px); }/* loader na ciemnym tle */ .ts-loader{ background: rgba(26, 26, 26, .8) !important; }/* odstęp boczny dla details (bo h2 ma padding{     margin-left: auto;     margin-right: auto; }.info-text-content ul li{     position: relative;     list-style: none;     padding-left: 24px; }.info-text-content ul li::before{     content: '';     position: absolute;     left: 0;     top: 0.65em;     width: 8px;     height: 8px;     background-color: var(--color-button);     border-radius: 50%;     transform: translateY(-50%); }siatka,watermark,cząsteczki,UI    08. Pasek statystyk (liczniki)    09. Aurora w tle sekcji    10. Karty produktów (holo / głębia 3D / wirująca obwódka)    11. Slider mobilny 2/rzad    12. FX pozostałych sekcji    13. Modal wariantów — szlif    14. Reduced motion    =================================================================== */  /* ----------------------------------------------------------------    01. TOKENY    ---------------------------------------------------------------- */ :root{     --fx-accent: #10B981;     --fx-accent-2: #34d399;     --fx-accent-3: #a7f3d0;     --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);     --fx-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);     --fx-card-radius: 18px;     --fx-glass: rgba(255, 255, 255, 0.04);     --fx-glass-border: rgba(255, 255, 255, 0.12); }  @property --fx-rot {     syntax: '<angle>';     initial-value: 0deg;     inherits: false; }/* ----------------------------------------------------------------    02. WEJŚCIE HERO — bez preloadera,delikatny wjazd przy załadowaniu    ---------------------------------------------------------------- */ @keyframes fx-hero-in{     from { opacity: 0; transform: scale(1.04); filter: blur(8px); }     to   { opacity: 1; transform: scale(1);    filter: blur(0); } }/* ----------------------------------------------------------------    05. REVEAL ON SCROLL + LITERY TYTUŁÓW    ---------------------------------------------------------------- */ [data-reveal]{     opacity: 0;     transform: translateY(46px);     filter: blur(8px);     transition:         opacity 0.9s var(--fx-ease),         transform 0.9s var(--fx-ease),         filter 0.9s var(--fx-ease);     will-change: opacity, transform, filter; }[data-reveal="left"]{ transform: translateX(-60px); }[data-reveal="right"]{ transform: translateX(60px); }/* tytuły sekcji — litera po literze{ perspective: 600px; letter-spacing: -0.02em; }  @keyframes fx-ch-in {     to { opacity: 1; transform: rotateX(0) translateY(0); } }.section-badge{     position: relative;     overflow: hidden;     backdrop-filter: blur(8px); }.section-badge::after{     content: '';     position: absolute;     top: 0;     left: -80%;     width: 60%;     height: 100%;     background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);     animation: fx-badge-shine 3.4s ease-in-out infinite; }  @keyframes fx-badge-shine {     0%, 60% { left: -80%; }     100%    { left: 140%; } }  @keyframes fx-marquee {     from { transform: translateX(0); }     to   { transform: translateX(-50%); } }  @keyframes fx-grid-run {     from { background-position: 0 0, 0 0; }     to   { background-position: 0 56px, 0 0; } }  @keyframes fx-wm-scroll {     from { transform: translateX(0); }     to   { transform: translateX(-50%); } }/* boczne slajdy — treść schowana{     opacity: 0;     pointer-events: none;     transition: opacity 0.4s ease; }  @keyframes fx-kenburns {     from { transform: scale(1.14) translateX(1.5%); }     to   { transform: scale(1) translateX(0); } }  @keyframes fx-rise {     to { opacity: 1; transform: translateY(0); } }  @keyframes fx-energy {     from { background-position: 200% 0; }     to   { background-position: -200% 0; } }  @keyframes fx-dot-progress {     to { stroke-dashoffset: 0; } }  @keyframes fx-drift {     from { transform: translate3d(0, 0, 0) scale(1); }     to   { transform: translate3d(6%, 8%, 0) scale(1.15); } }  @keyframes fx-border-spin {     to { --fx-rot: 360deg; } }  @keyframes fx-scanline {     from { top: -20%; }     to   { top: 120%; } }  @keyframes fx-badge-pulse {     0%, 100% { transform: scale(1); }     50%      { transform: scale(1.06); } }/* ----------------------------------------------------------------    11. MOBILE ≤768px — slider 2/rzad,krok co 2,nawigacja    ---------------------------------------------------------------- */ @media (max-width: 768px){     .fx-viewport {         overflow: hidden;         border-radius: var(--fx-card-radius);     }      .fx-products {         display: flex;         flex-wrap: nowrap;         gap: 12px;         transition: transform 0.55s var(--fx-ease);         will-change: transform;         perspective: none;     }      .fx-products .fx-card {         flex: 0 0 calc(50% - 6px);         min-width: calc(50% - 6px);     }      .fx-card-body { padding: 12px 12px 14px; gap: 6px; }     .fx-card-title { font-size: 12px; }     .fx-card-price { font-size: 14px; }     .fx-card-price del { font-size: 11px; }      .fx-card-actions { flex-direction: column; gap: 6px; }     .fx-btn { padding: 10px 10px; font-size: 10px; border-radius: 10px; }     .fx-btn-icon { display: none; }     .fx-card .product-omnibus { font-size: 8px; }      .fx-mobile-nav {         display: flex;         align-items: center;         justify-content: center;         gap: 16px;         margin-top: 18px;     }      .fx-nav {         width: 42px;         height: 42px;         border-radius: 50%;         border: 1px solid rgba(16, 185, 129, 0.5);         background: rgba(16, 185, 129, 0.1);         color: var(--fx-accent-2);         display: flex;         align-items: center;         justify-content: center;         font-size: 14px;         cursor: pointer;         transition: all 0.25s var(--fx-ease);     }      .fx-nav:active { transform: scale(0.92); }     .fx-nav:disabled { opacity: 0.25; pointer-events: none; }      .fx-dots { display: flex; gap: 7px; }      .fx-dot {         width: 7px;         height: 7px;         border-radius: 10px;         background: rgba(255, 255, 255, 0.2);         transition: all 0.35s var(--fx-ease);     }      .fx-dot.fx-dot-active {         width: 22px;         background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-2));         box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);     }      /* HERO na mobile — boczne slajdy schowane, prostszy ruch */     .hero-slider .slide.fx-pos-prev,     .hero-slider .slide.fx-pos-next {         opacity: 0;         visibility: hidden;         pointer-events: none;     }      .fx-hero-watermark { display: none; }     .fx-hero-arrow { width: 40px; height: 40px; }     .fx-hero-ui { bottom: 14px; gap: 14px; }      .fx-stats-container { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }     .fx-stat + .fx-stat::before { display: none; }     .fx-stat-label { font-size: 10px; letter-spacing: 1px; }      .fx-marquee-item { font-size: 12px; letter-spacing: 1.5px; gap: 18px; padding-right: 18px; }      .ts-toast { bottom: 84px; } }/* ----------------------------------------------------------------    13. MODAL WARIANTÓW — szlif    ---------------------------------------------------------------- */ .ts-variant-modal-content{     border: 1px solid rgba(16, 185, 129, 0.25);     box-shadow:         0 25px 70px rgba(0, 0, 0, 0.65),         0 0 60px rgba(16, 185, 129, 0.12); }.ts-variant-option span{ border-radius: 30px; }.ts-variant-option input:checked + span{     box-shadow: 0 0 18px rgba(16, 185, 129, 0.35); }/* ----------------------------------------------------------------    14. REDUCED MOTION — wyłącz wszystko co lata    ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){     .hero-slider { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }     .fx-scroll-progress,     .fx-hero-grid,     .fx-hero-watermark,     .fx-hero-canvas { display: none !important; }      [data-reveal] {         opacity: 1 !important;         transform: none !important;         filter: none !important;         transition: none !important;     }      .section-title .fx-ch { opacity: 1 !important; transform: none !important; animation: none !important; }      .hero-slider .slide { transition: opacity 0.5s ease !important; transform: none !important; filter: none !important; }     .hero-slider .slide.fx-pos-prev,     .hero-slider .slide.fx-pos-next { opacity: 0 !important; visibility: hidden !important; }     .hero-slider .slide .slide-badge,     .hero-slider .slide .slide-heading,     .hero-slider .slide .slide-text,     .hero-slider .slide .slide-cta { opacity: 1 !important; transform: none !important; animation: none !important; }     .hero-slider .slide.fx-pos-active .slide-image img { animation: none !important; }      .fx-marquee-track { animation: none !important; }     .fx-card:hover { animation: none !important; }     .fx-card-media::after { animation: none !important; opacity: 0 !important; } }.fx-sec-ghost{     position: absolute;     top: 50%;     left: -14px;     transform: translateY(-58%);     font-size: clamp(84px, 13vw, 180px);     font-weight: 900;     line-height: 1;     letter-spacing: 0.04em;     color: transparent;     -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);     white-space: nowrap;     pointer-events: none;     user-select: none;     z-index: 0; }.fx-sec-eyebrow{     display: flex;     align-items: center;     gap: 14px;     font-size: 11px;     font-weight: 800;     letter-spacing: 4px;     text-transform: uppercase;     color: var(--fx-accent-2);     margin-bottom: 16px; }.fx-sec-eyebrow i{     display: block;     width: 48px;     height: 1px;     background: linear-gradient(90deg, var(--fx-accent), transparent);     box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }/* ----------------------------------------------------------------    15b. ICON BOXES → HUD (ścięte rogi{     background-color: #0d0d0d;     border-top: 1px solid rgba(16, 185, 129, 0.2);     border-bottom: 1px solid rgba(255, 255, 255, 0.05);     padding: 34px 0; }/* ----------------------------------------------------------------    15c. SPORTY → AKORDEON (hover rozszerza panel)    ---------------------------------------------------------------- */ @media (min-width: 769px){     .sports-categories-grid {         display: flex;         height: 540px;         gap: 6px;         padding: 6px;         background: #0a0a0a;     }      .sports-categories-grid .sports-category-item {         flex: 1;         aspect-ratio: auto;         border-radius: 14px;         transition: flex 0.75s var(--fx-ease);     }      .sports-categories-grid .sports-category-item .sports-category-image img {         filter: grayscale(0.55) brightness(0.75);         transition: filter 0.6s var(--fx-ease), transform 0.75s var(--fx-ease);     }      /* hover na siatce ścieśnia pozostałe, najechany rośnie */     .sports-categories-grid:hover .sports-category-item { flex: 0.72; }     .sports-categories-grid .sports-category-item:hover { flex: 3.2; }      .sports-categories-grid .sports-category-item:hover .sports-category-image img {         filter: grayscale(0) brightness(1) blur(0) !important;         transform: scale(1.04);     }      .sports-categories-grid .sports-category-item:hover .sports-category-image {         transform: none;     }      /* zwinięty panel — nazwa obrócona pionowo */     .sports-category-content {         transition: all 0.5s var(--fx-ease);     }      .sports-category-text {         display: inline-block;         transition: all 0.55s var(--fx-ease);         transform-origin: left bottom;         transform: rotate(-90deg) translateX(14px);         font-size: 1.15rem;         letter-spacing: 0.14em;         white-space: nowrap;         opacity: 0.85;     }      .sports-categories-grid .sports-category-item:hover .sports-category-text {         transform: rotate(0) translateX(0);         font-size: 2rem;         opacity: 1;         letter-spacing: 0.05em;     }      /* podpis "Zobacz produkty" wysuwa się pod nazwą po rozwinięciu */     .sports-category-hover-text {         bottom: 25px;         left: 30px;         transition-delay: 0.25s;     }      .sports-categories-grid .sports-category-item:hover .sports-category-hover-text {         opacity: 1;         transform: translateY(0);         position: static;         display: block;         margin-top: 10px;     }      .sports-categories-grid .sports-category-item:hover .sports-category-hover-text::after {         width: 50px;     } }/* ----------------------------------------------------------------    15g. RESPONSIVE nowych układów    ---------------------------------------------------------------- */ @media (max-width: 900px){     .fx-sec-head {         flex-direction: column;         align-items: flex-start;         gap: 18px;         margin-bottom: 36px;     }      .fx-sec-head-right {         align-items: flex-start;         text-align: left;         max-width: none;     }      .fx-sec-ghost { font-size: clamp(64px, 18vw, 110px); left: -6px; } }/* ===================================================================    16. POPRAWKI I NOWE SEKCJE (v4)    =================================================================== */  /* ----------------------------------------------------------------    16a. JEDNOLITE,NIERUCHOME TŁO CAŁEJ STRONY    Jedno stałe tło pod wszystkim — sekcje są przezroczyste,a poświaty NIE scrollują się razem ze stroną (position: fixed).    ---------------------------------------------------------------- */ body{     background-color: #0e0e0e !important; }body::before{     content: '';     position: fixed;     inset: 0;     z-index: -1;     pointer-events: none;     background:         radial-gradient(900px 600px at 12% 8%, rgba(16, 185, 129, 0.10), transparent 60%),         radial-gradient(800px 600px at 88% 45%, rgba(16, 185, 129, 0.06), transparent 60%),         radial-gradient(900px 700px at 30% 95%, rgba(52, 211, 153, 0.05), transparent 60%),         #0e0e0e; }/* zamiast siatki: subtelny szum filmowy + winieta przy krawędziach */ body::after{     content: '';     position: fixed;     inset: 0;     z-index: -1;     pointer-events: none;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");     background-size: 160px 160px;     opacity: 0.05;     mix-blend-mode: overlay; }/* winieta — delikatne ściemnienie krawędzi ekranu */ html::after{     content: '';     position: fixed;     inset: 0;     z-index: 0;     pointer-events: none;     background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.4) 100%); }/* wyłączamy elementy{ display: none !important; }/* ----------------------------------------------------------------    16b. IKONY KORZYŚCI — zielone{     background: rgba(16, 185, 129, 0.12);     border: 1px solid rgba(16, 185, 129, 0.55);     box-shadow:         0 0 22px rgba(16, 185, 129, 0.25),         inset 0 0 14px rgba(16, 185, 129, 0.15); }cena tuż pod gwiazdkami{     gap: 6px;     justify-content: flex-start; }/* fallback dla przeglądarek bez aspect-ratio */ @supports not (aspect-ratio: 1){     .fx-card-media { height: 0; padding-bottom: 100%; }     .fx-card-media img,     .fx-card-media a { position: absolute; inset: 0; }     .fx-card-media img { height: 100%; } }/* ----------------------------------------------------------------    16e. MOBILE — spójna typografia kart,przyciski TYLKO IKONY    ---------------------------------------------------------------- */ @media (max-width: 768px){     /* jedna, spójna skala tekstów */     .fx-card-title,     .fx-card-title a { font-size: 12px !important; line-height: 1.35; }     .fx-card-rating .stars i { font-size: 9px; }     .fx-card-rating .review-count { font-size: 9px; }      .fx-card-price,     .fx-card-price .woocommerce-Price-amount,     .fx-card-price ins,     .fx-card-price bdi { font-size: 14px !important; font-weight: 700; }      .fx-card-price del,     .fx-card-price del .woocommerce-Price-amount,     .fx-card-price del bdi { font-size: 10px !important; font-weight: 400; }      .fx-card .product-omnibus { font-size: 8px; line-height: 1.3; }     .fx-card .product-omnibus .woocommerce-Price-amount { font-size: 8px; }      /* przyciski: tylko ikony, równe wysokości */     .fx-btn-label { display: none; }      .fx-card-actions {         flex-direction: row;         gap: 6px;         padding-top: 8px;     }      .fx-btn {         padding: 0;         height: 40px;         border-radius: 11px;         font-size: 15px;     }      .fx-btn i { font-size: 15px; }      .fx-btn-primary { flex: 1; }      .fx-btn-icon {         display: inline-flex;         flex: 0 0 40px;         width: 40px;     } }/* ===================================================================    18. HEADER + FOOTER — restyling pod nowy design (v6)    Funkcje i układ bez zmian — tylko wygląd.    =================================================================== */  /* ----------------------------------------------------------------    18a. TOP BAR    ---------------------------------------------------------------- */ .top-bar{     background: rgba(10, 10, 10, 0.9);     border-bottom: 1px solid rgba(16, 185, 129, 0.15);     backdrop-filter: blur(8px); }.top-bar-center{     color: var(--fx-accent-2);     font-weight: 700;     letter-spacing: 0.6px;     text-shadow: 0 0 14px rgba(16, 185, 129, 0.35); }.top-bar-left a:hover,.top-bar-right a:hover{     color: var(--fx-accent-2);     text-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }/* ----------------------------------------------------------------    18b. GŁÓWNY HEADER — glass + neon    ---------------------------------------------------------------- */ .site-header{     background: rgba(12, 12, 12, 0.78);     backdrop-filter: blur(16px);     -webkit-backdrop-filter: blur(16px);     border-bottom: 1px solid rgba(16, 185, 129, 0.18); }.header-logo a{     background: linear-gradient(120deg, #ffffff 35%, var(--fx-accent-2) 80%, var(--fx-accent) 100%);     -webkit-background-clip: text;     background-clip: text;     -webkit-text-fill-color: transparent;     transition: filter 0.3s ease; }.header-logo a:hover{     filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5)); }.header-menu a{     position: relative;     transition: color 0.25s ease; }.header-menu > li > a::after{     content: '';     position: absolute;     left: 50%;     bottom: -4px;     width: 0;     height: 2px;     background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-3));     box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);     transform: translateX(-50%);     transition: width 0.3s var(--fx-ease); }.header-menu > li > a:hover::after{ width: 100%; }.header-menu a:hover{ color: var(--fx-accent-2); }/* ikony headera */ .header-icon{     transition: color 0.25s ease, transform 0.25s var(--fx-ease); }.header-icon:hover{     color: var(--fx-accent-2);     transform: translateY(-2px);     filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.7)); }.header-cart-total{ color: var(--fx-accent-2); font-weight: 800; }/* ----------------------------------------------------------------    18c. PASEK KATEGORII + DROPDOWNY GLASS    ---------------------------------------------------------------- */ .category-bar{     background: rgba(10, 10, 10, 0.72);     backdrop-filter: blur(12px);     border-bottom: 1px solid rgba(255, 255, 255, 0.06); }.category-link{     border-radius: 30px;     transition: color 0.25s ease, background 0.25s ease; }.category-item:hover > .category-link,.category-link:hover{     color: var(--fx-accent-2);     background: rgba(16, 185, 129, 0.1); }.category-dropdown{     background: rgba(14, 14, 14, 0.96) !important;     backdrop-filter: blur(18px);     border: 1px solid rgba(16, 185, 129, 0.25);     border-radius: 16px;     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(16, 185, 129, 0.08);     overflow: hidden; }.subcategory-link:hover,.sub-subcategory-item a:hover{     color: var(--fx-accent-2) !important;     background: rgba(16, 185, 129, 0.08); }/* ----------------------------------------------------------------    18d. PANELE WYSUWANE (szukaj / koszyk / kategorie mobile)    ---------------------------------------------------------------- */ .search-panel,.mini-cart-panel,.mobile-menu-panel{     background: rgba(13, 13, 13, 0.96);     backdrop-filter: blur(20px);     -webkit-backdrop-filter: blur(20px);     border-color: rgba(16, 185, 129, 0.2) !important;     box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55); }.search-panel-header,.mini-cart-header,.mobile-menu-header{     border-bottom: 1px solid rgba(16, 185, 129, 0.18); }.search-panel-title,.mini-cart-title,.mobile-menu-title{     position: relative;     padding-left: 14px; }.search-panel-title::before,.mini-cart-title::before,.mobile-menu-title::before{     content: '';     position: absolute;     left: 0;     top: 50%;     transform: translateY(-50%);     width: 4px;     height: 70%;     border-radius: 4px;     background: linear-gradient(180deg, var(--fx-accent), var(--fx-accent-3));     box-shadow: 0 0 10px rgba(16, 185, 129, 0.8); }.panel-overlay.active{     background: rgba(0, 0, 0, 0.6);     backdrop-filter: blur(3px); }/* wyszukiwarka */ .search-input{     background: rgba(255, 255, 255, 0.05) !important;     border: 1px solid rgba(16, 185, 129, 0.3) !important;     border-radius: 14px !important;     color: #fff !important; }.search-input:focus{     border-color: var(--fx-accent) !important;     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 0 24px rgba(16, 185, 129, 0.2) !important; }.search-submit{     background: linear-gradient(135deg, var(--fx-accent), #0d9668) !important;     border-radius: 12px !important; }.search-result-item a{     border-radius: 12px;     transition: background 0.25s ease, transform 0.25s var(--fx-ease); }.search-result-item a:hover{     background: rgba(16, 185, 129, 0.08);     transform: translateX(4px); }.search-result-price{ color: var(--fx-accent-2) !important; }.search-view-all{     border-radius: 30px !important;     border: 1px solid rgba(16, 185, 129, 0.5) !important;     color: var(--fx-accent-2) !important;     transition: all 0.3s var(--fx-ease) !important; }.search-view-all:hover{     background: rgba(16, 185, 129, 0.14) !important;     box-shadow: 0 0 24px rgba(16, 185, 129, 0.25); }/* mini koszyk */ .shipping-progress-bar{     background: rgba(255, 255, 255, 0.08) !important;     border-radius: 10px;     overflow: hidden; }.shipping-progress-fill{     background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-3)) !important;     box-shadow: 0 0 14px rgba(16, 185, 129, 0.8); }.shipping-message i,.shipping-free i{ color: var(--fx-accent-2); }.btn-checkout{     background: linear-gradient(135deg, var(--fx-accent), #0d9668) !important;     border-radius: 14px !important;     box-shadow: 0 10px 28px rgba(16, 185, 129, 0.35);     transition: transform 0.3s var(--fx-ease), box-shadow 0.3s var(--fx-ease) !important; }.btn-checkout:hover{     transform: translateY(-2px);     box-shadow: 0 14px 36px rgba(16, 185, 129, 0.5); }.btn-view-cart{     background: rgba(255, 255, 255, 0.05) !important;     border: 1px solid rgba(16, 185, 129, 0.45) !important;     color: var(--fx-accent-2) !important;     border-radius: 14px !important; }.btn-view-cart:hover{ background: rgba(16, 185, 129, 0.12) !important; }/* kategorie mobile */ .mobile-category-row a{ transition: color 0.2s ease; }.mobile-category-row a:hover{ color: var(--fx-accent-2); }.mobile-category-toggle{ color: var(--fx-accent-2) !important; }/* ----------------------------------------------------------------    18e. DOLNA NAWIGACJA MOBILE — glass + neon active    ---------------------------------------------------------------- */ .mobile-bottom-nav{     background: rgba(12, 12, 12, 0.9) !important;     backdrop-filter: blur(18px);     -webkit-backdrop-filter: blur(18px);     border-top: 1px solid rgba(16, 185, 129, 0.25) !important;     box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }.mobile-bottom-nav-item{     transition: color 0.25s ease, transform 0.25s var(--fx-ease); }.mobile-bottom-nav-item:hover,.mobile-bottom-nav-item:active{     color: var(--fx-accent-2) !important; }.mobile-bottom-nav-item:hover i{     filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8)); }.mobile-bottom-nav-logo{     position: relative; }.mobile-bottom-nav-logo img{     border-radius: 50%;     border: 2px solid transparent;     background:         linear-gradient(#0e0e0e, #0e0e0e) padding-box,         conic-gradient(from var(--fx-rot), var(--fx-accent), rgba(255,255,255,0.15) 40%, var(--fx-accent-3) 70%, var(--fx-accent)) border-box;     animation: fx-border-spin 6s linear infinite;     box-shadow: 0 0 22px rgba(16, 185, 129, 0.45); }/* ----------------------------------------------------------------    18f. FOOTER — spójny z jednolitym tłem    ---------------------------------------------------------------- */ .site-footer{     background: transparent !important;     border-top: 1px solid rgba(16, 185, 129, 0.15);     position: relative; }.footer-main{ background: transparent !important; }.footer-logo{     background: linear-gradient(120deg, #ffffff 35%, var(--fx-accent-2) 85%);     -webkit-background-clip: text;     background-clip: text;     -webkit-text-fill-color: transparent; }.footer-title{     position: relative;     padding-bottom: 10px; }.footer-title::after{     content: '';     position: absolute;     left: 0;     bottom: 0;     width: 34px;     height: 2px;     border-radius: 2px;     background: linear-gradient(90deg, var(--fx-accent), transparent);     box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }.footer-menu a,.footer-contact-item{     transition: color 0.25s ease, transform 0.25s var(--fx-ease); }.footer-menu a:hover,.footer-contact-item:hover{     color: var(--fx-accent-2) !important;     transform: translateX(4px); }.footer-contact-item i{ color: var(--fx-accent-2); }.social-icon{     border: 1px solid rgba(16, 185, 129, 0.4) !important;     background: rgba(16, 185, 129, 0.06) !important;     color: var(--fx-accent-2) !important;     transition: all 0.3s var(--fx-ease) !important; }.social-icon:hover{     background: var(--fx-accent) !important;     color: #fff !important;     transform: translateY(-4px);     box-shadow: 0 10px 26px rgba(16, 185, 129, 0.4); }.footer-bottom{     background: rgba(10, 10, 10, 0.6) !important;     border-top: 1px solid rgba(255, 255, 255, 0.05); }.footer-credits a{ color: var(--fx-accent-2); }.back-to-top:hover{     box-shadow: 0 12px 34px rgba(16, 185, 129, 0.6) !important; }/* popup newslettera — glass zamiast zdjęcia w tle */ .newsletter-popup-bg{ display: none !important; }.newsletter-popup-bg-overlay{     background: rgba(16, 16, 16, 0.97) !important; }.newsletter-popup-content{     border: 1px solid rgba(16, 185, 129, 0.35) !important;     box-shadow:         0 25px 60px rgba(0, 0, 0, 0.6),         0 0 60px rgba(16, 185, 129, 0.15) !important; }.newsletter-popup-form .ts-newsletter-form input[type="text"],.newsletter-popup-form .ts-newsletter-form input[type="email"]{     background: rgba(255, 255, 255, 0.05) !important;     border: 1px solid rgba(16, 185, 129, 0.3) !important;     border-radius: 12px !important; }.newsletter-popup-form .ts-newsletter-form input:focus{     border-color: var(--fx-accent) !important;     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; }.newsletter-popup-form .ts-newsletter-form button{     background: linear-gradient(135deg, var(--fx-accent), #0d9668) !important;     border-radius: 12px !important;     box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35); }/* cookie banner */ .cookie-content{     background: rgba(14, 14, 14, 0.97) !important;     backdrop-filter: blur(18px);     border: 1px solid rgba(16, 185, 129, 0.3) !important;     border-radius: 20px !important;     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(16, 185, 129, 0.1) !important; }.cookie-icon{ color: var(--fx-accent-2) !important; }.cookie-toggle input:checked + .cookie-toggle-slider{     background: var(--fx-accent) !important;     box-shadow: 0 0 12px rgba(16, 185, 129, 0.6); }.cookie-btn-accept-all{     background: linear-gradient(135deg, var(--fx-accent), #0d9668) !important;     box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35);     border-radius: 12px !important; }.cookie-btn-save,.cookie-btn-necessary{     border: 1px solid rgba(16, 185, 129, 0.4) !important;     background: rgba(255, 255, 255, 0.04) !important;     color: var(--fx-accent-2) !important;     border-radius: 12px !important; }.cookie-btn-save:hover,.cookie-btn-necessary:hover{     background: rgba(16, 185, 129, 0.12) !important; }.cookie-option-badge{     background: rgba(16, 185, 129, 0.15) !important;     color: var(--fx-accent-2) !important;     border: 1px solid rgba(16, 185, 129, 0.35); }.cookie-footer a{ color: var(--fx-accent-2); }/* ===================================================================    19. PANELE — pełne przemalowanie na ciemno (v7)    Oryginalne style paneli miały jasne tła (nagłówek,pasek dostawy,kafle produktów,stopka koszyka) — tu nadpisujemy WSZYSTKIE    elementy mini koszyka,wyszukiwarki i panelu kategorii mobile.    =================================================================== */  ::selection{ background: rgba(16, 185, 129, 0.45); color: #fff; }/* --- nagłówki wszystkich paneli --- */ .search-panel-header,.mini-cart-header,.mobile-menu-header{     background: transparent !important; }.search-panel-title,.mini-cart-title,.mobile-menu-title{     color: #ffffff !important; }.search-panel-close,.mini-cart-close,.mobile-menu-close{     background: rgba(255, 255, 255, 0.06) !important;     border: 1px solid rgba(255, 255, 255, 0.12) !important;     border-radius: 50% !important;     color: rgba(255, 255, 255, 0.7) !important;     transition: all 0.25s ease !important; }.search-panel-close:hover,.mini-cart-close:hover,.mobile-menu-close:hover{     background: rgba(16, 185, 129, 0.15) !important;     border-color: var(--fx-accent) !important;     color: var(--fx-accent-2) !important; }/* ----------------------------------------------------------------    19a. MINI KOSZYK    ---------------------------------------------------------------- */ .mini-cart-shipping-info{     background: rgba(255, 255, 255, 0.03) !important;     border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; }.shipping-message{     color: rgba(255, 255, 255, 0.75) !important; }.shipping-message strong{ color: var(--fx-accent-2) !important; }.shipping-message i{ color: var(--fx-accent-2) !important; }.shipping-free{ color: var(--fx-accent-2) !important; }.shipping-free p{ color: var(--fx-accent-2) !important; margin: 0; }.shipping-free i{ color: var(--fx-accent-2) !important; }/* pusty koszyk */ .mini-cart-empty{ color: rgba(255, 255, 255, 0.55) !important; }.mini-cart-empty i{ color: rgba(16, 185, 129, 0.5) !important; }.mini-cart-empty p{ color: rgba(255, 255, 255, 0.55) !important; }/* stopka koszyka */ .mini-cart-footer{     background: rgba(9, 9, 9, 0.92) !important;     border-top: 1px solid rgba(16, 185, 129, 0.22) !important;     backdrop-filter: blur(10px); }.mini-cart-total,.mini-cart-total span{ color: #ffffff !important; }.mini-cart-total .total-price{     color: var(--fx-accent-2) !important;     font-weight: 900 !important;     text-shadow: 0 0 18px rgba(16, 185, 129, 0.35); }/* ----------------------------------------------------------------    19b. WYSZUKIWARKA    ---------------------------------------------------------------- */ .search-panel-content{ background: transparent !important; }.search-input{ caret-color: var(--fx-accent-2); }/* wyniki jako ciemne kafle */ .search-results{ background: transparent !important; }.search-results-list{     display: flex;     flex-direction: column;     gap: 10px; }.search-result-item{ border: none !important; }.search-result-item a{     display: flex;     align-items: center;     gap: 14px;     padding: 12px !important;     background: rgba(255, 255, 255, 0.04) !important;     border: 1px solid rgba(255, 255, 255, 0.08) !important;     border-radius: 16px !important; }.search-result-item a:hover{     background: rgba(16, 185, 129, 0.09) !important;     border-color: rgba(16, 185, 129, 0.4) !important;     transform: translateX(4px); }.search-result-image{     flex-shrink: 0;     border-radius: 12px;     overflow: hidden;     background: #ffffff; }.search-result-image img{ display: block; }.search-result-title{     color: #ffffff !important;     font-weight: 600;     line-height: 1.35; }.search-result-item a:hover .search-result-title{ color: var(--fx-accent-3) !important; }.no-results{ color: rgba(255, 255, 255, 0.55) !important; text-align: center; }/* ----------------------------------------------------------------    19c. PANEL KATEGORII MOBILE    ---------------------------------------------------------------- */ .mobile-menu-content{ background: transparent !important; }.mobile-category-item,.mobile-subcategory-item{     border-color: rgba(255, 255, 255, 0.07) !important; }.mobile-category-row a{     color: rgba(255, 255, 255, 0.9) !important; }.mobile-category-row a:hover{ color: var(--fx-accent-2) !important; }.mobile-subcategory-list a,.mobile-sub-subcategory-list a{     color: rgba(255, 255, 255, 0.65) !important; }.mobile-subcategory-list a:hover,.mobile-sub-subcategory-list a:hover{ color: var(--fx-accent-2) !important; }/* ===================================================================    20. PODSTRONY — SKLEP / KATEGORIE / PRODUKT / KOSZYK / ZAMÓWIENIE    Restyling pod nowy design (v8). Funkcje i układy bez zmian.    =================================================================== */  /* ----------------------------------------------------------------    20a. HERO PODSTRON + BREADCRUMBS    ---------------------------------------------------------------- */ .page-hero{     position: relative;     isolation: isolate; }.page-hero::after{     content: '';     position: absolute;     left: 0;     bottom: 0;     width: 100%;     height: 2px;     background: linear-gradient(90deg, transparent, var(--fx-accent), transparent);     background-size: 200% 100%;     animation: fx-energy 4s linear infinite;     z-index: 3; }.breadcrumbs{     font-size: 12px;     letter-spacing: 0.4px; }.breadcrumbs a{     color: rgba(255,255,255,0.6) !important;     transition: color 0.2s ease; }.breadcrumbs a:hover{ color: var(--fx-accent-2) !important; }.breadcrumbs .current{ color: var(--fx-accent-2) !important; }.breadcrumbs .separator i{ color: rgba(16,185,129,0.5); font-size: 9px; }/* ----------------------------------------------------------------    20b. SKLEP / KATEGORIE — pasek filtrów,modal{     background: rgba(12,12,12,0.85) !important;     backdrop-filter: blur(16px);     -webkit-backdrop-filter: blur(16px);     border-top: 1px solid rgba(16,185,129,0.15) !important;     border-bottom: 1px solid rgba(16,185,129,0.15) !important; }/* ===================================================================    21. NOWE UKŁADY PODSTRON — hero edytorski,chipy,nagłówki FX    =================================================================== */  /* ----------------------------------------------------------------    21a. FX PAGE HERO (sklep + kategorie)    Nadpisuje stare .page-hero (zdjęcie w tle całości → warstwa    maskowana gradientem,treść wyrównana do lewej jak fx-sec-head)    ---------------------------------------------------------------- */ .fx-page-hero{     position: relative;     isolation: isolate;     height: auto !important;     min-height: 0 !important;     max-height: none !important;     display: flex;     align-items: flex-end;     background: transparent !important;     background-image: none !important;     padding: 0 !important;     overflow: hidden; }.fx-page-hero::before{     content: '';     position: absolute;     inset: 0;     z-index: -1;     background:         radial-gradient(55% 130% at 8% -10%, rgba(16,185,129,0.22), transparent 60%),         radial-gradient(45% 110% at 92% 20%, rgba(16,185,129,0.10), transparent 60%),         radial-gradient(60% 80% at 50% 120%, rgba(52,211,153,0.06), transparent 60%),         linear-gradient(180deg, #121514 0%, #0e100f 55%, #0e0e0e 100%); }.fx-page-hero::after{     content: '';     position: absolute;     left: 0;     bottom: 0;     width: 100%;     height: 2px;     background: linear-gradient(90deg, transparent, var(--fx-accent), transparent);     background-size: 200% 100%;     animation: fx-energy 4s linear infinite; }.fx-page-hero-inner{     position: relative;     width: 100%;     max-width: 1240px;     margin: 0 auto;     padding: 72px 40px 24px; }.fx-page-ghost{     position: absolute;     right: 24px;     bottom: -10px;     left: auto;     top: auto;     transform: none;     font-size: clamp(80px, 13vw, 210px);     line-height: 0.78;     font-weight: 800;     letter-spacing: 0.04em;     white-space: nowrap;     max-width: 100%;     overflow: hidden;     color: transparent;     -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);     opacity: 1;     pointer-events: none;     user-select: none;     z-index: 0; }.fx-page-hero-inner > *:not(.fx-page-ghost){ position: relative; z-index: 1; }.fx-page-hero .fx-crumbs{ margin-bottom: 16px; }.fx-page-hero .fx-sec-eyebrow{ margin-bottom: 10px; }.fx-page-title{     margin: 0 0 8px !important;     font-size: clamp(30px, 4vw, 48px) !important;     font-weight: 900 !important;     line-height: 1.02 !important;     letter-spacing: -0.02em;     background: linear-gradient(120deg, #ffffff 40%, var(--fx-accent-2) 95%);     -webkit-background-clip: text;     background-clip: text;     -webkit-text-fill-color: transparent;     filter: drop-shadow(0 8px 30px rgba(0,0,0,0.55)); }/* breadcrumbs — pigułki */ .fx-crumbs{     display: flex;     align-items: center;     flex-wrap: wrap;     gap: 8px;     font-size: 12px; }.fx-crumbs a,.fx-crumbs .current{     display: inline-flex;     align-items: center;     padding: 5px 13px;     border-radius: 20px;     background: rgba(255,255,255,0.05);     border: 1px solid rgba(255,255,255,0.1);     color: rgba(255,255,255,0.65) !important;     text-decoration: none;     transition: all 0.25s var(--fx-ease);     backdrop-filter: blur(6px); }.fx-crumbs a:hover{     border-color: rgba(16,185,129,0.5);     color: var(--fx-accent-2) !important;     background: rgba(16,185,129,0.08); }.fx-crumbs .current{     border-color: rgba(16,185,129,0.5);     background: rgba(16,185,129,0.1);     color: var(--fx-accent-2) !important; }.fx-crumbs .separator{ display: none; }/* ----------------------------------------------------------------    21f. RESPONSIVE    ---------------------------------------------------------------- */ @media (max-width: 768px){     .fx-page-hero-inner { padding: 64px 20px 20px; }     .fx-page-ghost { font-size: clamp(52px, 17vw, 100px); right: 10px; bottom: -4px; -webkit-text-stroke-width: 1px; }     .fx-page-sub { font-size: 13.5px; }     .fx-crumbs { gap: 6px; }     .fx-crumbs a, .fx-crumbs .current { padding: 4px 10px; font-size: 11px; }     .fx-cat-chips-wrap { padding: 18px 0 26px; }     .fx-cat-chip { padding: 8px 14px; font-size: 12px; }     .fx-cart-head { margin-bottom: 26px; }     .fx-cart-head .fx-sec-ghost,     .fx-checkout-head .fx-sec-ghost { font-size: clamp(44px, 14vw, 80px); opacity: 0.04; } }@media (prefers-reduced-motion: reduce) {.fx-page-hero::after{ animation: none; }}/* ===================================================================    22. POPRAWKI v10 — koszyk (układ pozycji i gwarancji),siatka sklepu    =================================================================== */  /* koszyk: zdjęcie OBOK nazwy (poziomo){     display: flex !important;     flex-direction: row !important;     align-items: center !important;     gap: 16px !important;     text-align: left !important; }/* koszyk: gwarancje w poziomie{     display: flex !important;     flex-direction: row !important;     justify-content: space-between !important;     align-items: stretch !important;     gap: 12px !important;     margin-top: 22px !important;     padding-top: 20px !important;     border-top: 1px solid rgba(255,255,255,0.08) !important; }.info-cta{     background: var(--fx-glass) !important;     border: 1px solid var(--fx-glass-border) !important;     border-radius: 16px !important; }/* highlight = zielony akcent{ border-color: rgba(16,185,129,0.4) !important; }/* CTA i przyciski */ .info-cta{ text-align: center; }.info-cta-btn{     background: linear-gradient(135deg, var(--fx-accent), #0d9668) !important;     border: none !important;     border-radius: 12px !important;     color: #fff !important;     box-shadow: 0 6px 18px rgba(16,185,129,0.3);     transition: transform 0.25s var(--fx-ease), box-shadow 0.25s var(--fx-ease) !important; }.info-cta-btn:hover{     transform: translateY(-2px);     box-shadow: 0 10px 26px rgba(16,185,129,0.45); }/* single post: tagi,share,nawigacja{     background: var(--fx-glass) !important;     border: 1px solid var(--fx-glass-border) !important;     border-radius: 30px !important;     color: #fff !important; }/* ===================================================================    27. v16 — TŁO FX NA STRONACH INFO/BLOG/KONTAKT + poprawki widoczności    =================================================================== */  /* sekcje przezroczyste — widać globalne tło z poświatami (jak front) */ .info-page-section{     background: transparent !important;     background-image: none !important; }/* wewnętrzne kontenery motywu też nie mogą zasłaniać tła */ .info-page-container{     background: transparent !important; }/* nagłówki i tekst w glassowych boxach — jasne,.info-cta h3{     color: #fff !important; }.info-cta p{     color: rgba(255,255,255,0.7) !important; }/* ===================================================================    28. v17 — poprawki: procenty rabatu,scenariusz{     background: none !important;     -webkit-background-clip: initial !important;     background-clip: initial !important;     -webkit-text-fill-color: #fff !important;     color: #fff !important;     text-shadow: 0 2px 10px rgba(0,0,0,0.35); }/* KAŻDA strona: content na 1240px,żadnego zwężania */ .info-page-container{     max-width: 1240px !important;     width: 100% !important;     margin-left: auto !important;     margin-right: auto !important; }/* "Co dalej?" — większy nagłówek{     justify-content: center !important;     font-size: 21px !important;     margin-bottom: 22px !important; }/* ===================================================================    31. v20 — blog: tabele w treści + zielone punktory list    =================================================================== */  /* --- Tabele w artykułach: glass{     width: 100%;     border-collapse: collapse;     margin: 22px 0;     background: var(--fx-glass);     border: 1px solid var(--fx-glass-border);     border-radius: 14px;     overflow: hidden;     font-size: 15px; }/* Zagnieżdżone listy — mniejsza kropka{     width: 6px;     height: 6px;     background: transparent;     border: 1.5px solid var(--fx-accent);     box-shadow: none; }/* Nagłówek tabeli — zintegrowany pasek{     background: rgba(255, 255, 255, 0.04) !important;     border: none !important;     border-bottom: 1px solid var(--fx-glass-border) !important;     border-radius: 0 !important;     margin: 0 !important;     color: rgba(255, 255, 255, 0.55) !important;     font-size: 11px !important;     letter-spacing: 2.5px !important;     text-transform: uppercase; }/* Wiersze produktów — rozdzielone liniami{ gap: 0 !important; }/* Usuwanie — dyskretne{     background: transparent !important;     border: 1px solid transparent !important;     color: rgba(255, 255, 255, 0.4) !important;     border-radius: 50% !important; }