/* @session aca71c6f-da79-4138-bc31-26c289c46610 | @session d9b64f98-280b-41d9-b220-1d42c8533abf | @updated 2026-10-09 06:11 | @purpose Arkusz motywu testosterone | @version 1.21 | @change "Polecane" na stronie glownej schowane na telefonie ( products-section[featured] ) */ :root { --bg: #f7f9f7; --bg-darker: #e8eaea; --bg-shadow: rgba(247,249,247,0.8); --green: #FE4900; --blue: #FE4900; --red: #f21b3f; --gray: #919191; --transition: 0.6s cubic-bezier(0.75, 0, 0.175, 1); --box-shadow: 0 2px 3px rgba(0,0,0,0.1); --box-shadow-top: 0 -2px 3px rgba(0,0,0,0.1); --container-padding: 15px; --rating: 0; /* Stitch design tokens - testosterone.pl rebrand */ --color-primary: #FE4900; --color-primary-hover: #E55A00; --color-primary-light: #FFF3E6; --color-primary-dark: #CC5200; --color-bg: #FFFFFF; --color-bg-alt: #F7F7F8; --color-bg-card: #FFFFFF; --color-text: black; --color-text-secondary: black; --color-text-tertiary: #9CA3AF; --color-dark: #111111; --color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #3B82F6; --color-star: #FBBF24; --color-border: #E5E7EB; --color-border-hover: #D1D5DB; --font-heading: 'Inter', 'Inter-fallback', system-ui, sans-serif; --font-body: 'Inter', 'Inter-fallback', system-ui, sans-serif; --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); --fs-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); --fs-base: clamp(0.875rem, 0.8rem + 0.4vw, 1rem); --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --fs-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; --space-12: 80px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --shadow-sticky: 0 -2px 12px rgba(0,0,0,0.1); } /* minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html, body, div, span, button, input, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ul { list-style: none; } html { box-sizing: border-box; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; scrollbar-gutter: stable; } body { min-height: 100vh; /*line-height: calc(2px + 2ex + 2px);*/ line-height: 1; -webkit-font-smoothing: antialiased; font-size: 14px; color: #000; background: var(--bg); font-family: flags, "Segoe UI", Roboto, system-ui, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Twemoji Country Flags", "Segoe UI Emoji", "Segoe UI Symbol"; } *, *::before, *::after { box-sizing: inherit; } img, picture, video { display: block; max-width: 100%; height: auto; } iframe { display: block; width: 100%; } @media (max-width: 767px) { iframe { height: auto; } } label { cursor: pointer; } input, button, textarea, select { font: inherit; } table { border-collapse: collapse; border-spacing: 0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } a { color: unset; text-decoration: unset; text-decoration-skip-ink: auto; cursor: pointer; transition: filter 0.2s var(--transition); } a:active { filter: brightness(0.95); transform: scale(0.98); } :target { scroll-margin-block: 60px; } @media (min-width: 768px) { :target { scroll-margin-block: 80px; } } @media (min-width: 768px) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f2f2f2; } ::-webkit-scrollbar-thumb { background: #bdbdbd; } ::-webkit-scrollbar-thumb:hover { background: #6e6e6e; } } :user-invalid { border: 2px solid #f00; } sticky-bar { display: block; position: sticky; top: 0; z-index: 3; box-shadow: var(--box-shadow); background-color: var(--bg); } .flex-right { margin-left: auto; } .no-padding { padding: 0; } .relative { position: relative; } .flex-column { display: flex; flex-direction: column; } .gap-20 { gap: 20px; padding: 20px 0; @media (min-width: 768px) { & products-listing { grid-template-rows: 1fr; grid-auto-rows: 0; overflow: hidden; } } } max-container { display: block; max-width: 1366px; margin: 0 auto; height: 100%; } @media (max-width: 1385px) { max-container:not([no-padding]) { padding: 0 var(--container-padding); } } max-container[white] { background: #fff; } center-container { display: flex; justify-content: center; } promo-bar { display: grid; grid-template-columns: 1fr 8fr 1fr; text-align: center; font-weight: bold; color: #fff; font-size: 13px; text-transform: uppercase; background-color: var(--green); align-items: center; } promo-bar promo-message { grid-column-start: 2; line-height: 15px; padding: 5px 0; } promo-bar close-button { text-align: right; cursor: pointer; padding-right: 10px; height: 100%; display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 767px) { promo-bar { line-height: 20px; } } promo-bar coupon-code { outline: 1px dashed #fff; margin: 0 2px; padding: 0 3px; } facts-bar { display: flex; gap: 25px; line-height: 50px; font-size: 12px; color: #000; text-transform: uppercase; white-space: nowrap; overflow-x: auto; } @media (max-width: 767px) { facts-bar { gap: 10px; line-height: 30px; } } facts-bar > * { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjRweCcgaGVpZ2h0PScyNHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnIGZpbGw9JyMwMDAwMDAnIHg9Jzc2LjUnIHk9Jzc2LjUnIHJvbGU9J2ltZycgc3R5bGU9J2Rpc3BsYXk6aW5saW5lLWJsb2NrO3ZlcnRpY2FsLWFsaWduOm1pZGRsZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZyBmaWxsPScjMDAwMDAwJz48cGF0aCBmaWxsPSdjdXJyZW50Q29sb3InIGQ9J00yMiA4YS43Ni43NiAwIDAgMCAwLS4yMXYtLjA4YS43Ny43NyAwIDAgMC0uMDctLjE2YS4zNS4zNSAwIDAgMC0uMDUtLjA4bC0uMS0uMTNsLS4wOC0uMDZsLS4xMi0uMDlsLTktNWExIDEgMCAwIDAtMSAwbC05IDVsLS4wOS4wN2wtLjExLjA4YS40MS40MSAwIDAgMC0uMDcuMTFhLjM5LjM5IDAgMCAwLS4wOC4xYS41OS41OSAwIDAgMC0uMDYuMTRhLjMuMyAwIDAgMCAwIC4xQS43Ni43NiAwIDAgMCAyIDh2OGExIDEgMCAwIDAgLjUyLjg3bDkgNWEuNzUuNzUgMCAwIDAgLjEzLjA2aC4xYTEuMDYgMS4wNiAwIDAgMCAuNSAwaC4xbC4xNC0uMDZsOS01QTEgMSAwIDAgMCAyMiAxNlY4em0tMTAgMy44N0w1LjA2IDhsMi43Ni0xLjUybDYuODMgMy45em0wLTcuNzJMMTguOTQgOEwxNi43IDkuMjVMOS44NyA1LjM0ek00IDkuN2w3IDMuOTJ2NS42OGwtNy0zLjg5em05IDkuNnYtNS42OGwzLTEuNjhWMTVsMi0xdi0zLjE4bDItMS4xMXY1Ljd6Jy8+PC9nPjwvc3ZnPg=="); background-position: left center; background-repeat: no-repeat; padding-left: 30px; background-size: 20px; color: #000; } body[data-route="checkout-cart"] label[for="cart-panel-toggle"], body[data-route="checkout-checkout"] label[for="cart-panel-toggle"], body[data-route="checkout-checkout"] label[for="settings-panel-toggle"] { opacity: 0.5; filter: grayscale(1); pointer-events: none; } .dropdown-panel { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; transition: opacity var(--transition), visibility var(--transition), transform var(--transition); visibility: hidden; opacity: 0; transform: translateY(15px) translateZ(0); pointer-events: none; z-index: 2; text-transform: uppercase; font-weight: bold; font-size: 16px; white-space: nowrap; } @media (max-width: 767px) { .dropdown-panel { visibility: hidden; opacity: 0; transform: none !important; pointer-events: unset; z-index: 2; } } @media (max-width: 767px) { [mobile-shadow-end], .mobile-shadow-end { padding-right: 50px; } [mobile-shadow-end]:after, .mobile-shadow-end:after { content: ""; position: absolute; height: 30px; margin: auto 0; width: calc(100vw / 4); border: 0; pointer-events: none; box-shadow: inset -80px 0 30px -30px var(--bg-shadow); right: 0; } [mobile-shadow-end][white-shadow]:after, .mobile-shadow-end[white-shadow]:after { box-shadow: inset calc(-0.285 * 100vw + 22.85px) 0 30px -30px rgba(255,255,255,0.8); } .mobile-hidden { display: none; } .mobile-hidden-important { display: none !important; } mobile-break { display: block; } } @media (min-width: 768px) { .desktop-hidden { display: none; } } ul.breadcrumbs-bar { display: flex; line-height: 40px; font-size: 12px; color: var(--gray); overflow-x: auto; white-space: nowrap; margin: 0; padding-left: 0; list-style: none; } @media (min-width: 768px) { ul.breadcrumbs-bar { padding-left: 40px; } } ul.breadcrumbs-bar > li { display: inline-block; } ul.breadcrumbs-bar > li + li:before { padding: 0 5px; content: "\00a0/\00a0"; } .panel-toggle { display: none; } body:has(.panel-toggle:checked) { overflow: hidden; } body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel { visibility: visible; pointer-events: unset; } @media (min-width: 768px) { body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel[desktop-dropdown] { opacity: 1; transform: none !important; display: table; } } body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel side-panel-overlay { opacity: 1; pointer-events: unset; } body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel side-panel-content { translate: 0; } @media (min-width: 768px) { body:has(.panel-toggle:checked + side-panel[desktop-dropdown]) sticky-overlay { opacity: 1; pointer-events: unset; } } side-panel { inset: 0; z-index: 999; contain: strict; visibility: hidden; transition: var(--transition); position: fixed; } @media (max-width: 767px) { side-panel { pointer-events: none; } } @media (min-width: 768px) { side-panel[desktop-dropdown] { display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; transition: var(--transition); visibility: hidden; opacity: 0; transform: translateY(15px) translateZ(0); pointer-events: none; z-index: 2; } } side-panel side-panel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); opacity: 0; transition: var(--transition); pointer-events: none; } side-panel side-panel-content { --width: 500px; display: block; width: var(--width); position: fixed; top: 0; height: 100%; left: 0; background: #fff; overflow: auto; max-width: 83vw; outline: 0; touch-action: pan-y; z-index: 4; padding: 0; box-shadow: 0 0 6px rgba(0,0,0,0.1); transition: var(--transition); translate: calc(-1 * var(--width)) 0; overscroll-behavior: none; } side-panel[right] side-panel-content { left: unset; right: 0; translate: var(--width) 0; } @media (max-width: 767px) { side-panel side-panel-content { padding: 0; overflow: hidden; } side-panel side-panel-content > label { line-height: 50px; width: 100%; text-align: right; position: relative; padding-right: 20px; top: -15px; } side-panel side-panel-content ul { line-height: 40px; list-style: none; } } @media (min-width: 768px) { side-panel[name="filters"] { display: contents; visibility: visible; } side-panel[name="filters"] > label { display: none; } side-panel[name="filters"] side-panel-content { display: contents; } side-panel[name="filters"] side-panel-content > label { display: none; } } @media (min-width: 768px) { side-panel[desktop-dropdown] { display: block; visibility: visible; } side-panel[desktop-dropdown] > label { display: none; } side-panel[desktop-dropdown] side-panel-content { display: contents; } side-panel[desktop-dropdown] side-panel-content > label { display: none; } side-panel[name="side-panel"] side-panel-content ul { list-style: none; padding: 10px; line-height: 25px; color: #000; max-height: 500px; overflow-y: auto; overscroll-behavior-block: contain; } side-panel[name="side-panel"] side-panel-content li { padding: 0 10px; } side-panel[name="side-panel"] side-panel-content li a { display: block; } side-panel[name="side-panel"] side-panel-content li:hover { background: var(--bg); } side-panel[name="side-panel"] side-panel-content ul ul { display: none; } side-panel[name="side-panel"] side-panel-content ul li:has(ul):hover ul { display: flex; flex-direction: column; flex-wrap: wrap; position: absolute; left: 500px; top: 0; background: #fff; right: 0; height: 100%; } } @media (min-width: 768px) { side-panel[desktop-dropdown] { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; opacity: 0; visibility: hidden; transform: translateY(15px); transition: var(--transition); pointer-events: none; z-index: 2; } body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel[desktop-dropdown] { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; } side-panel[desktop-dropdown] side-panel-content { display: block; width: 100%; position: static; transform: none !important; /* Ważne - wyłącz transform */ translate: none !important; /* Wyłącz translate */ box-shadow: none; /* Usuń shadow z content */ background: transparent; overflow: visible; max-width: none; transition: none; /* Wyłącz transition na content */ } side-panel[desktop-dropdown] side-panel-overlay { display: none; } } products-section { display: block; background: #fff; white-space: normal; } @media (min-width: 768px) { products-section:has(> section-banner) { display: grid; grid-template-areas: "banner content"; grid-template-columns: 1fr 5fr; justify-items: unset; align-items: flex-start; } products-section:has(> section-banner) > div { margin-left: 10px; } products-section:has(> section-banner) products-listing > *:nth-child(n+6) { display: none; } } products-section > div { grid-area: content; padding: 30px 0 20px; } @media (max-width: 767px) { products-section > div { padding: 20px 0 10px; } products-section > div:has(section-description) { display: flex; flex-direction: column; } products-section > div:has(section-description) section-description { order: 1; } /* "Polecane" na stronie glownej tylko od 768 px: na telefonie 5 produktow w 2 kolumnach = dziura ( Maciek 09.10 ) */ products-section[featured] { display: none; } } products-section section-header { padding: 0 30px; @media (max-width: 767px) { padding: 0 var(--container-padding); } } products-section section-banner { grid-area: banner; display: block; height: 100%; background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-color: #f2f2f2; } section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; & span, & h1, & h2, & h3 { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--color-text); line-height: 1.3; padding-left: 16px; border-left: 4px solid var(--color-primary); } & a, & label { font-size: 13px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; text-decoration: none; &:hover { text-decoration: underline; } } & label[x] { padding: 15px; position: absolute; right: 0; height: 50px; font-weight: bold; font-size: 20px; } &[left] { & span, & h1 { font-size: 22px; } } @media (max-width: 767px) { margin-bottom: 20px; & span, & h1 { font-size: 22px; padding-left: 12px; } & a, & label { font-size: 12px; } } } section-description { display: block; line-height: 1.5; padding: 20px 30px; font-size: 15px; } section-description * { padding: 0 !important; margin: 0 !important; } section-description a { color: var(--blue); } section-description p { margin: 1rem 0 !important; } section-description p:last-child { margin-bottom: 0 !important; } section-description h2, section-description h3, section-description h4 { margin: 1rem 0 !important; font-weight: 600; } section-description ul, section-description ol { padding-left: 24px !important; margin: 0.5rem 0 1rem !important; } section-description li { list-style: disc !important; margin-bottom: 4px !important; } section-description ol li { list-style: decimal !important; } section-description h2 { font-size: 150%; } section-description h3 { font-size: 117%; } section-description h4 { font-size: 100%; } section-description ul { list-style: disc; padding-left: 16px !important; } section-description li { padding-left: 2px !important; } section-description p.has-read-more~ *:not(.read-more) { display: none; } section-description p.has-read-more .read-more { color: var(--blue); text-transform: uppercase; margin-left: 6px !important; padding-left: 17px !important; cursor: pointer; white-space: nowrap; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAATlBMVEX///9pvOc+qt/f8Pnb7/lluuVguOXz+v3k8vrV7fik1u+My+xIruGGyeuCx+p5w+lZtuTO6fap2PCe1O9+xep0wehywOjp9PvS6/dTs+JkVz/gAAAAZklEQVQIHQXBhQHCQBAAsNxb3QXYf1ES6NeoNdYMnPNydN0xzSOcaQBKGulTBuhTtq0ALI82AFCayv6KatsJlT3U5vkR2gBAabYFgOmVUw/wSYUxFSCnC8Z5+nbdMM0XkO+IiLvgD1afA0VDf+OnAAAAAElFTkSuQmCC") left center no-repeat; } products-listing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 10px; } @media (min-width: 540px) { products-listing { gap: 16px; } } @media (min-width: 768px) { products-listing { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { products-listing { grid-template-columns: repeat(4, 1fr); } } products-listing.htmx-settling { } products-listing[mobile-horizontal] { --gap: 10px; --padding-end: 50px; } @media (max-width: 767px) { products-listing[mobile-horizontal] { display: flex; flex-wrap: nowrap; gap: var(--gap); overflow-x: auto; /*scroll-snap-type: x mandatory;*/ padding-right: var(--padding-end); } products-listing[mobile-horizontal] single-product { min-width: 175px; scroll-snap-align: center; } products-listing[mobile-horizontal]:after { content: ""; position: absolute; height: 100%; margin: auto 0; width: calc(100vw / 4); border: 0; pointer-events: none; box-shadow: inset -70px 0 30px -30px var(--bg); right: 0; } products-listing[mobile-horizontal] + scroll-button { display: block; width: 40px; height: 40px; background: #fff url("data:image/svg+xml,") center no-repeat; fill: #000; position: absolute; top: 30%; right: 20px; border: 2px solid #000; opacity: 0.2; } products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)) { --padding-end: 0; } products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)):after { display: none; } products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)) + scroll-button { display: none; } products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)):not(:has(single-product + single-product)) { justify-content: center; } products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)):not(:has(single-product + single-product)) single-product { width: 50%; } } @media (max-width: 767px) and (orientation: portrait) { products-listing[mobile-horizontal] single-product { min-width: calc(50% + calc((var(--padding-end) - var(--gap)) / 2)); } } /* mzv2 single-product styles removed - replaced with stitch nested CSS at end of file */ .manufacturers white-container { padding: 30px 0 20px; } @media (max-width: 767px) { .manufacturers white-container { padding: 20px 0 10px; } .manufacturers white-container section-header { padding: 0 var(--container-padding); } } manufacturers-grouped { display: block; max-width: 1366px;; margin: 0 auto; padding: var(--space-4); & manufacturers-index { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-bg-alt); border-radius: 8px; margin-bottom: var(--space-6); font-family: var(--font-body); & .label { font-weight: 600; color: var(--color-text-secondary); margin-right: var(--space-2); } & a { display: inline-block; padding: 4px 10px; color: var(--color-primary); font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 4px; transition: background 0.15s; &:hover { background: var(--color-primary-light); } } } & manufacturers-group { display: block; margin-bottom: var(--space-5); scroll-margin-top: 80px; & manufacturers-letter { display: inline-block; min-width: 64px; padding: var(--space-3) var(--space-4); background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 24px; text-align: center; border-radius: 6px; margin-bottom: var(--space-3); } & ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-6); list-style: none; padding: var(--space-3) var(--space-4); margin: 0; background: var(--color-bg-alt); border-radius: 8px; @media (max-width: 767px) { grid-template-columns: 1fr; } } & li a { display: block; padding: var(--space-2) 0; color: var(--color-text); font-size: 15px; text-decoration: none; transition: color 0.15s; &:hover { color: var(--color-primary); } &.featured { color: var(--color-primary); font-weight: 700; } } } } styled-select { display: block; position: relative; } styled-select select { border: none; width: 100%; padding: 0; font-size: 15px; font-weight: 600; background: var(--bg); color: #333; text-align: center; appearance: none; line-height: 2; } styled-select:after { content: ''; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjRweCcgaGVpZ2h0PScyNHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xMi43MDcxIDE0LjcwNzFDMTIuMzE2NiAxNS4wOTc2IDExLjY4MzQgMTUuMDk3NiAxMS4yOTI5IDE0LjcwNzFMNi4yOTI4OSA5LjcwNzExQzUuOTAyMzcgOS4zMTY1OCA1LjkwMjM3IDguNjgzNDIgNi4yOTI4OSA4LjI5Mjg5QzYuNjgzNDIgNy45MDIzNyA3LjMxNjU4IDcuOTAyMzcgNy43MDcxMSA4LjI5Mjg5TDEyIDEyLjU4NThMMTYuMjkyOSA4LjI5Mjg5QzE2LjY4MzQgNy45MDIzNyAxNy4zMTY2IDcuOTAyMzcgMTcuNzA3MSA4LjI5Mjg5QzE4LjA5NzYgOC42ODM0MiAxOC4wOTc2IDkuMzE2NTggMTcuNzA3MSA5LjcwNzExTDEyLjcwNzEgMTQuNzA3MVonIGZpbGw9JyMwMDAwMDAnLz48L3N2Zz4="); background-position: right center; background-repeat: no-repeat; background-size: 20px; position: absolute; right: 10px; height: 100%; width: 20px; top: 1px; pointer-events: none; } [loading="lazy"][onload] { opacity: 0; transition: 0.5s; } [loading="lazy"].loaded { opacity: 1; } footer-columns { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; line-height: 1.5; } footer-columns ul { line-height: 20px; } @media (max-width: 767px) { footer-columns { grid-template-columns: 1fr; gap: 40px; } footer-columns ul { line-height: 30px; } } under-line { display: block; font-size: 16px; font-weight: 600; margin-bottom: 20px; } under-line:after { background-color: #ccc; content: ""; display: block; width: 30px; height: 2px; margin-top: 2px; } home-icon { display: block; background: url("data:image/svg+xml,") center center no-repeat; background-size: 20px; width: 20px; height: 100%; } relative-container { display: block; position: relative; } footer { background: #000; color: #fff; padding: 40px 0; font-size: 14px; } sticky-overlay { position: absolute; top: 100%; left: 0; width: 100%; height: calc(100vh - 70px); background: rgba(0,0,0,0.7); opacity: 0; will-change: opacity; transition: var(--transition); z-index: 1; pointer-events: none; display: block; } body:has(search-results:not(:empty)) { overflow: hidden; } body:has(search-results:not(:empty)) sticky-overlay { opacity: 1; pointer-events: unset; } search-results { display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: var(--box-shadow); z-index: 2; overflow-y: auto; overscroll-behavior-block: contain; max-height: calc(100vh - 75px); } @media (min-width: 768px) { search-results { max-height: calc(100vh - 150px); } search-results:has(products-section + products-section) { display: grid; grid-template-columns: 1fr 5fr; } } .search-manufacturer-result { display: flex; align-items: center; gap: 14px; padding: 12px 20px; text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-border); grid-column: 1 / -1; cursor: pointer; &:hover { background: var(--color-bg-alt); } & img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; flex-shrink: 0; } & strong { display: block; font-size: 15px; font-weight: 700; } & em { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 1px; } } product-container { display: block; } product-container product-top { display: grid; grid-template-areas: "images title" "images details"; grid-template-columns: 3fr 5fr; grid-template-rows: min-content 1fr; grid-column-gap: 20px; } @media (min-width: 768px) { product-container product-top:has(product-images ul) { grid-template-columns: 4fr 5fr; } } @media (max-width: 767px) { product-container product-top { grid-template-areas: "title" "images" "details"; grid-template-columns: 1fr; } } product-container product-top product-title { display: block; grid-area: title; background: #fff; padding: 20px 25px 10px; position: relative; } @media (max-width: 767px) { product-container product-top product-title { background: none; padding: 10px; text-align: center; } } product-container product-top product-title .manufacturer { color: var(--blue); text-transform: uppercase; } product-container product-top product-title h1 .manufacturer { font-weight: bold; } product-container product-top product-title h1 span { display: block; font-size: 30px; font-weight: 700; letter-spacing: -1px; word-spacing: -1px; } product-container product-top product-title h1 + h2 { line-height: 25px; font-style: italic; } product-container product-top product-images { display: flex; grid-area: images; } product-container product-top product-images main-image { display: block; padding: 10% 5%; background: #fff; flex: 1; position: relative; } product-container product-top product-images main-image img { margin: 0 auto; } @media (max-width: 767px) { product-container product-top product-images main-image { padding: 30px; } } product-container product-top product-images ul { width: 100px; margin-right: 20px; } product-container product-top product-images ul li { margin-bottom: 20px; padding: 15px; background: #fff; } product-container product-top product-images img { cursor: pointer; } @media (max-width: 767px) { product-container product-top product-images { flex-direction: column; } product-container product-top product-images ul { order: 2; display: flex; column-gap: 10px; width: 100%; margin: 10px 0 0; } product-container product-top product-images ul li { max-width: 100px; } } product-container product-top product-details { display: grid; grid-area: details; background: #fff; padding: 10px 25px 20px; grid-template-areas: "attrs price" "options options" "bottom bottom"; grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { product-container product-top product-details[wide] { grid-template-columns: 2fr 1fr; } } @media (max-width: 767px) { product-container product-top product-details { grid-template-areas: "price" "options" "attrs" "bottom"; grid-template-columns: 1fr; } } product-container product-top product-details product-attrs { display: flex; grid-area: attrs; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600; } product-container product-top product-details product-attrs span { font-weight: normal; } product-container product-top product-details product-attrs span.bold { font-weight: bold; } product-container product-top product-details product-attrs .green { color: var(--green); } product-container product-top product-details product-attrs .red { color: var(--red); } product-container product-top product-details product-attrs .blue { color: var(--blue); } product-container product-top product-details product-attrs product-features { display: block; line-height: 25px; font-size: 15px; font-weight: normal; margin-top: 10px; margin-bottom: 20px; } product-container product-top product-details product-attrs product-features ul { list-style: disc; padding-left: 14px; } product-container product-top product-details product-price { display: block; grid-area: price; text-align: right; } @media (max-width: 767px) { product-container product-top product-details product-price { margin-bottom: 20px; } } product-container product-top product-details product-price price-normal { display: inline-block; font-size: 48px; color: var(--green); font-weight: 700; letter-spacing: -2px; } product-container product-top product-details product-price preorder-info { display: block; font-size: 16px; font-weight: bold; color: var(--blue); text-transform: uppercase; line-height: 2; } product-container product-top product-details product-price special-info { display: block; font-size: 10.5px; color: #4c4c4c; text-transform: uppercase; } product-container product-top product-details product-price price-old { display: inline-block; font-size: 25px; color: #050505; text-decoration: line-through; font-weight: 600; letter-spacing: -2px; vertical-align: bottom; } product-container product-top product-details product-price special-percent { display: inline-block; font-size: 28px; color: #fff; background: var(--red); padding: 0 6px; font-weight: 700; vertical-align: bottom; line-height: 36px; margin: 0 5px 0 10px; } product-container product-top product-details product-price special-percent.preorder { background: var(--blue); } product-container product-top product-details product-price price-new { display: inline-block; font-size: 48px; color: var(--red); font-weight: 700; letter-spacing: -2px; vertical-align: bottom; position: relative; top: 3px; } product-container product-top product-details product-price price-new + portion-text { color: var(--red); margin-top: 3px; } product-container product-top product-details product-price portion-text { display: block; font-size: 14px; color: var(--green); } product-container product-top product-details product-options { grid-area: options; } product-container product-top product-details product-variants { grid-area: variants; display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 10px; } product-container product-top product-details product-variants a, product-container product-top product-details product-variants span { background: var(--bg); font-size: 15px; padding: 15px; display: flex; justify-content: center; align-items: center; border: 2px solid var(--bg); cursor: pointer; text-align: center; } product-container product-top product-details product-variants a.selected, product-container product-top product-details product-variants span.selected, product-container product-top product-details product-variants a[selected], product-container product-top product-details product-variants span[selected] { border: 2px solid var(--green); background: var(--green); color: #fff; font-weight: bold; } product-container product-top product-details product-variants a.disabled, product-container product-top product-details product-variants span.disabled, product-container product-top product-details product-variants a[disabled], product-container product-top product-details product-variants span[disabled] { color: #d3d3d3; pointer-events: none; } product-container product-top product-details product-variants a.disabled.selected, product-container product-top product-details product-variants span.disabled.selected, product-container product-top product-details product-variants a[disabled].selected, product-container product-top product-details product-variants span[disabled].selected, product-container product-top product-details product-variants a.disabled[selected], product-container product-top product-details product-variants span.disabled[selected], product-container product-top product-details product-variants a[disabled][selected], product-container product-top product-details product-variants span[disabled][selected] { border: 2px solid var(--red); } product-container product-top product-details product-variants option.out-of-stock { color: #d3d3d3; } @media (max-width: 767px) { product-container product-top product-details product-variants { margin-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; } } product-container product-top product-details product-buy { grid-area: buy; margin-top: auto; } product-container product-top product-details product-buy form { display: flex; flex-direction: row; font-size: 20px; line-height: 50px; text-align: center; } product-container product-top product-details product-buy form [name="quantity"] { width: 100px; height: 100%; vertical-align: bottom; text-align: left; padding-left: 40px; } product-container product-top product-details product-buy form button { flex: 1; background: var(--blue); color: #fff; border: 0; cursor: pointer; text-transform: uppercase; font-size: 20px; font-weight: 600; transition: background-color var(--transition); } product-container product-top product-details product-buy form button:active { filter: brightness(0.95); } product-container product-top product-details product-buy form button[readonly] { background: var(--green); color: #fff; } @media (max-width: 767px) { product-container product-top product-details product-buy { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 3; box-shadow: var(--box-shadow-top); } product-container product-top product-details product-buy form [name="quantity"] { width: 70px; padding-left: 20px; } product-container product-top product-details product-buy form button { font-size: 16px; font-weight: 700; } product-container product-top product-details product-buy form button svg { display: none; } } /* Pasek zakladek karty ( przyklejony pod site-header ): zakladki sekcji + cena i koszyk po zjechaniu ponizej glownego przycisku ( od 900 px, skrypt w product_container.twig ) */ product-container sticky-shortcuts { display: flex; align-items: center; gap: var(--space-3); position: sticky; top: var(--shortcuts-top); z-index: 50; height: var(--shortcuts-height); padding: 0 var(--space-4); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); @media (min-width: 768px) { & { padding: 0 max( var(--space-6), calc( ( 100% - 1366px ) / 2 + var(--space-6) ) ); } } & nav { display: flex; gap: var(--space-1); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } & nav a { padding: var(--space-2) 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; &:hover { color: var(--color-text); } &[aria-current] { background: var(--color-dark); color: #fff; } } /* "Sklad": od 1101 px do karty obok opisu ( #nutrition ), wezej do zakladki skladu ( #ingredients ) - jak tabela w section-full; 1100.98: przy ulamkowej szerokosci ( zoom ) bez przerwy, w ktorej widac oba linki */ @media (max-width: 1100.98px) { & nav a[href="#nutrition"] { display: none; } } @media (min-width: 1101px) { & nav a[href="#ingredients"] { display: none; } } shortcuts-buy { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; /* ponizej 900 px same zakladki ( jak projekt karty ): kupno w glownej sekcji zakupu, na telefonie dolny pasek sticky-atc */ @media (max-width: 899px) { & { display: none; } } } &[buy] shortcuts-buy { opacity: 1; visibility: visible; } shortcuts-price { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 800; white-space: nowrap; &[no-discount] { color: var(--color-info); } } & button { height: 40px; } } product-container products-section { margin-top: 20px; } product-container product-description { display: block; background: #fff; line-height: 1.5; font-size: 15px; margin: 10px auto 0; padding: 0; max-width: 758px; } product-container product-description p { margin: 1rem 0; } product-container product-description p:last-child { margin-bottom: 0; } product-container product-description h2 { margin: 1rem 0; font-weight: bold; } product-container product-description ul { list-style: disc; padding-left: 16px; } product-container product-description li { padding-left: 2px; } product-container details { font-size: 15px; line-height: 1.5; } product-container details summary { font-size: 24px; line-height: 22px; text-transform: uppercase; font-weight: 600; cursor: pointer; position: relative; margin-top: 15px; margin-bottom: 10px; } @media (max-width: 767px) { product-container details summary { font-size: 20px; } } product-container details[open] summary { margin-bottom: 25px; } product-container details[open] summary:after { content: ''; display: block; width: 100px; height: 2px; background: var(--green); position: absolute; top: calc(100% + 10px); left: 0; } product-buy button, product-bottom buy-button { transition: visibility var(--transition); } product-buy button.loading-spinner, product-bottom buy-button.loading-spinner { cursor: not-allowed; pointer-events: none; position: relative; color: transparent !important; } product-buy button.loading-spinner > *, product-bottom buy-button.loading-spinner > * { visibility: hidden; } product-buy button.loading-spinner::after, product-bottom buy-button.loading-spinner::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 0.6s linear infinite; } product-buy button.success-state, product-bottom buy-button.success-state { cursor: not-allowed; pointer-events: none; position: relative; color: transparent !important; } product-buy button.success-state > *, product-bottom buy-button.success-state > * { visibility: hidden; } product-buy button.success-state::after, product-bottom buy-button.success-state::after { content: "✓ " attr(data-text-added); color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } rating-info { font-size: 12px; font-weight: bold; line-height: 1.6; } rating-stars { --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: 20px; font-family: Times, serif; vertical-align: sub; } rating-stars::before { content: '★★★★★'; letter-spacing: 3px; background: linear-gradient(90deg, #f59e0b var(--percent), #d1d5db var(--percent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } review-rating { display: inline-flex; gap: 2px; align-items: center; } star-icon { display: inline-flex; & svg { fill: #d1d5db; stroke: none; } &.filled svg { fill: #f59e0b; } } /* Opinie na karcie produktu jak w projekcie karty, uklad wg szerokosci zakladki ( kontener ), nie ekranu - na desktopie tresc ma szerokosc kolumny obrazka: od 860 px podsumowanie 280 px obok kart ( projekt .rev-grid ), od 560 px podsumowanie poziome nad kartami w 2 kolumnach, ponizej jedna kolumna; kolory z !important, bo sanitizer tresci zakladek ( koniec pliku ) je zeruje */ #reviews product-tab-body { container-type: inline-size; } .review-list { display: grid; gap: var(--space-5); align-items: start; padding-top: var(--space-2); } .review-cards { display: grid; gap: var(--space-4); } @container (min-width: 560px) { .review-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (560px <= width < 860px) { /* .review-list przed klasa: wygrywa z bazowym .review-summary ( display: flex ) zdefiniowanym nizej */ .review-list .review-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: center; align-items: center; column-gap: var(--space-8); & .review-distribution { grid-column: 2; grid-row: 1 / span 3; justify-self: stretch; margin-top: 0; } } } @container (width >= 860px) { .review-list { grid-template-columns: 280px minmax(0, 1fr); column-gap: 40px; } } /* podsumowanie: srednia, gwiazdki, liczba opinii, rozklad ocen */ .review-summary { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); text-align: center; font-size: 14px !important; & .review-summary-score { font-size: 52px !important; font-weight: 800 !important; line-height: 1 !important; color: var(--color-text) !important; } & rating-stars { font-size: 22px !important; } & .review-distribution { align-self: stretch; display: grid; gap: 6px; margin-top: var(--space-3); font-size: 12px !important; & > div { display: grid; grid-template-columns: 22px 1fr 22px; gap: var(--space-2); align-items: center; } } & .review-bar { height: 6px; border-radius: var(--radius-full); overflow: hidden; background-color: var(--color-border) !important; & i { display: block; height: 100%; border-radius: var(--radius-full); background-color: var(--color-primary) !important; } } } .review-item { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; & .review-header { display: flex; align-items: center; justify-content: space-between; } /* gwiazdki opinii czytelne obok tekstu 14 px ( sanitizer zakladek zeruje rozmiar rating-stars ) */ & rating-stars { font-size: 16px !important; } & .review-text { flex: 1; font-size: 14px; line-height: 1.6; color: var(--color-text) !important; margin: 0 !important; } & .review-footer { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px !important; color: var(--color-text-secondary) !important; & strong { color: var(--color-text) !important; } } } lab-info { display: inline-block; position: absolute; top: 20px; right: 25px; padding-left: 30px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAEbElEQVQ4jXWUXYhUZRzGn/O+7/me79nd2S+0XV3dTVHSNAWzJKWIwhsviqCMKAi60EIwKOnOAqFCEKG6sTWRxAIpkbKPi9RKF/xYXTfX2l3XnNnZnZkzZ86Zc8573rcLF7aUnpv/zf95+P8vnp8ipcR9isI4aPI4jmPOCaGEapohDUO7fxOAck9EEIb1qufH0zRR4nBjxQtRpDJBmp1GsCyZTCVSpqL8f0Rtls/6F28a70WsuDj9rIZ0hFkXIwpoiEYzcpL1rW3eS7mCpavzF7G5KVEsVgL9kug6A3G5Wh8f4ze62PMENkUBEBy3ffVKM3dB2MOivDuX6TJN/a6V3B0zZf+2emA0u83FaDd5sTVdiFiFoakiloAEVORtPEiQr+hfFNvema5NRlE8H9Fwm6687uYHa6LckOMW8t7EwODuxLGDJQI9AQJoDLaBdhO9DEtq9Ptq9rPZqWDuESml6/jV1kEXo3k8VFA2aYivnyNHP+AnyFlLz7/w8mIB14VFIDVkCYgHp6TvJ2af7T2XsCzS9HhJPVFk+3PY0kfesNDjo7ZkjbK0XyNK8PWhS0cGxw3YSaQlAFApmYo2BUoz97Nf4wDoWzvfvqXtj4zLi7BLR4ePyQBeNusMPMHuXE3/NVI5+8OIoPTRdb06wCGlAgVEICTEthobLD1Nd+x8vageCvWJAI6htDMkOVwff69s7ch3rrt27WYySb75/Do3sXL1ApXZMQwFhMMxlJTFVxqim4DGSbuTKlYlHhqTH07jtI3eDPpn3CXHPvm1eKscUa5a+GjXL1tXHb14vpIDiTHTgi1J9DfpDSFAhBLnycbl2NfDXiWKXsVvNZymMD/d+8exL39qyXVsfmp9NpPxZG346pRmhz7GVORMdMdwBSIoYCQ20czE1p8GCv3YU8V5guKFofHDB08BytOvpPa8tj10zei4/+b7q3sHuI9cBqs4agS2yhdSDcRgmaaYKuHbABNMJrJ4uICNV875pVnnge78bWf4wFd7Qz7z+GNrVzzSQ6AmsEJDTiJS4lbmL1J1hegWUZsDBDkBIsAU1DmmxkdmdKpRnZz8WDsyeJ613ejuM+tFNUbdxXAdIyUc96OyRVsYY8ww1YSzKopWm6ppKWykfPndHd/9eLhGICbHHIbUgmUZAVHozFXL/qzLSeL3Eoo6TKO+PpFMzDU1CINb05fsrlEL5tDE6d3bT3mu15ZpDcM4YsXAVZ1iVBVhR4+67/Dm5V39ZVwzG0+mnW2FjtR82auVhiOumvnJaXEmCutUJbZYeic+6WBIRkYj8nnk6yTXke+3SLvpbbKqzxTaWigj82XPZG1UBpySrrWMN40TKayRtOSp5zTY0ggspE10WujjIMLto5UNbe1z/n/xAshkE6gucu7YRtLgZlWwpoWFEkIiTmOTHi8GN9TZ5a10bbpTJ3SeXPeCT8SyXvc8v8HVSa5NSiViMBXeGvsZk+YzqYxuMvxX90bMMUzIIIhiDikgAcqg6YSxe8139Q9axRCh/8Iu6QAAAABJRU5ErkJggg==") left center no-repeat; text-transform: uppercase; font-size: 12px; font-weight: bold; line-height: 22px; } @media (max-width: 767px) { lab-info { position: unset; } } menu-container { display: block; padding: var(--container-padding); } /* mzv2 filterable-container styles removed - replaced with stitch nested CSS at end of file */ white-container { display: block; background: #fff; } article.blog h1 { font-size: 34px; font-weight: 600; text-transform: none; text-align: center; margin: 10px 0 30px; } @media (max-width: 767px) { article.blog h1 { margin-bottom: 20px; } } article.blog white-container { padding: 30px 0 100px; } @media (max-width: 767px) { article.blog white-container { padding-top: 15px; } } article.blog .stats { margin: 20px; color: #777; } article.blog .stats i + i::before { content: "/"; margin: 0 9px 0 8px; font-size: 9px; vertical-align: middle; } @media (max-width: 767px) { article.blog .stats { margin: 20px 0; } } article.blog h1, article.blog h2, article.blog h3, article.blog h4, article.blog h5, article.blog h6 { font-weight: 600; line-height: 1.3; } article.blog h1 b, article.blog h2 b, article.blog h3 b, article.blog h4 b, article.blog h5 b, article.blog h6 b { font-weight: inherit; display: contents; } article.blog h2, article.blog h3, article.blog h4 { margin-block: 20px; } article.blog h2 { font-size: 150%; } article.blog h3, article.blog h4 { font-size: 117%; } article.blog .main_description { line-height: 1.7; font-size: 15px; } article.blog .main_description p { margin-block: 20px; } article.blog .main_description p:empty { display: none; } article.blog .main_description p span { display: contents; } article.blog .main_description ul, article.blog .main_description ol { list-style: square; margin: 20px 30px; } article.blog .main_description ul li, article.blog .main_description ol li { padding-left: 10px; } article.blog .main_description ul li p, article.blog .main_description ol li p { margin: 0; } article.blog .main_description ul.collapsed, article.blog .main_description ol.collapsed { display: none; } article.blog .main_description a { color: var(--blue); text-decoration: underline; } article.blog .main_description img { margin-block: 20px 0; } article.blog .main_description button[data-target] { margin: 20px 0; padding: 10px 20px; display: block; cursor: pointer; } notifications-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition: var(--transition); z-index: 999; display: flex; justify-content: center; align-items: center; text-align: center; opacity: 0; pointer-events: none; visibility: hidden; } notifications-container:not(:empty) { opacity: 1; pointer-events: initial; visibility: visible; } body:has(notifications-container:not(:empty)) { overflow: hidden; } notification-dialog { padding: 24px; background: #fff; font-size: 16px; width: 100%; max-width: 440px; line-height: 1.3; position: relative; border-radius: var(--radius-lg, 12px); box-sizing: border-box; } notification-dialog section-header span { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } notification-dialog img { margin: 40px auto 20px; } @media (max-width: 767px) { notification-dialog img { display: none; } } notification-dialog .bold { font-weight: bold; } notification-dialog input[type="email"] { display: block; color: #000; background-color: #eee; padding: 0 30px; font-weight: 600; line-height: 44px; height: 44px; text-align: center; width: 100%; margin-top: 20px; border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius-md, 8px); } notification-dialog input[type="email"]:focus { outline: none; border-color: var(--color-primary, #FE4900); } notification-dialog button, notification-dialog buy-button { display: block; color: #fff; background-color: var(--color-primary, #FE4900); padding: 0 30px; font-weight: 700; text-transform: uppercase; line-height: 48px; height: 48px; text-align: center; cursor: pointer; margin-top: 10px; width: 100%; border: none; border-radius: var(--radius-md, 8px); transition: background-color .15s ease, transform .15s ease; } notification-dialog button:hover, notification-dialog buy-button:hover { background-color: var(--color-primary-hover, #E55A00); } notification-dialog button[blue], notification-dialog buy-button[blue] { background-color: var(--blue); } notification-dialog button:active, notification-dialog buy-button:active { filter: brightness(0.95); } notification-dialog a button, notification-dialog a buy-button { margin-top: 20px; } crypted-email { cursor: pointer; } crypted-email:after { content: attr(data-name) "@" attr(data-domain); } .latest-articles { display: block; background: #fff; margin-bottom: 20px; } @media (min-width: 768px) { .latest-articles single-product { margin: 0 20px; } } .blue-heading { display: inline-block; font-size: 26px; font-weight: bold; font-style: italic; color: #fff; transform: skew(-5deg, 0deg); width: auto; padding-right: 20px; text-transform: uppercase; } @media (max-width: 767px) { .blue-heading { font-size: 20px; width: 80%; } } .blue-heading:before { content: ''; display: block; width: 100%; background: #40a8de; transform: skew(-5deg, 0deg); z-index: -1; position: absolute; top: -3px; left: -10px; height: calc(100% + 8px); } /* Roboto removed - testosterone uses Inter (loaded from Google Fonts in header) */ @font-face { font-display: fallback; font-family: 'flags'; font-style: normal; font-weight: normal; src: url("/fonts/TwemojiCountryFlags.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } #checkout-checkout .panel-body .radio { border: 2px solid #e9e9e9; padding: 5px 25px; margin-bottom: 15px; cursor: pointer; transition: 0.1s; background-color: #fff; } #checkout-checkout .panel-body .radio:hover { border-color: #c0c0c0; box-shadow: 0 4px 8px rgba(0,0,0,0.05); } #checkout-checkout .panel-body .radio:has(input:checked) { border-color: var(--blue); background-color: #f0f8ff; } #checkout-checkout .panel-body .radio input[type="radio"] { margin-right: 10px; vertical-align: middle; } #checkout-checkout .panel-body .radio label { display: block; padding: 10px; } #checkout-checkout .panel-body .radio label img { margin-top: 10px; } #checkout-checkout .panel-body .paczkomat { display: flex; align-items: stretch; margin-top: 10px; margin-bottom: 5px; } #checkout-checkout .panel-body .paczkomat #button-paczkomaty-select { border-right: none; white-space: nowrap; flex-shrink: 0; } #checkout-checkout .panel-body .paczkomat #paczkomat { background-color: #f8f9fa; cursor: default; } #checkout-checkout .panel-body .paczkomat #paczkomat:focus, #checkout-checkout .panel-body .paczkomat #button-paczkomaty-select:focus + #paczkomat { border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25); position: relative; z-index: 2; } #checkout-checkout .panel-body .paczkomat #paczkomat::placeholder { color: #6c757d; font-style: italic; } @media (max-width: 768px) { #checkout-checkout .panel-body .paczkomat { flex-direction: column; } #checkout-checkout .panel-body .paczkomat #button-paczkomaty-select { width: 100%; border-right: 1px solid transparent; } #checkout-checkout .panel-body .paczkomat #paczkomat { text-align: center; width: 100%; border-top: 0; } } @media screen and (max-width: 600px) { body.product-product #CookiebotWidget:not(.CookiebotWidget-inactive) { bottom: 60px !important; } } @-moz-keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @-o-keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ======================================================================== STITCH REDESIGN - testosterone.pl Custom HTML element tags + native nested CSS with & ======================================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } body { font-family: var(--font-body); } .panel-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ======================================================================== ANNOUNCEMENT BAR ======================================================================== */ /* czarna przez cala szerokosc okna, cienka linia nad naglowkiem ( jak desktop-nav ); ikony svg z tresci panelu w kolorze marki */ announcement-bar { display: flex; justify-content: center; align-items: center; background: var(--color-dark); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.02em; padding: var(--space-2) var(--space-4); line-height: 1.4; overflow: hidden; & svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); } & a { color: #fff; text-decoration: none; transition: opacity 0.15s; &:hover { opacity: 0.85; text-decoration: underline; } } } @media (max-width: 768px) { announcement-bar max-container > div > div { display: none !important; } announcement-bar max-container > div > div.ab-active { display: flex !important; animation: abFadeIn 0.4s ease; } } @keyframes abFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ======================================================================== SITE HEADER ======================================================================== */ site-header { display: block; position: sticky; top: 0; z-index: 100; color: #fff; /* czarny przez cala szerokosc okna takze na telefonie; tresc w srodku na tym samym miejscu co wczesniej ( odstep 15 px z boku ) */ background: var(--color-dark); padding: 0 var(--container-padding); @media (min-width: 768px) { & { padding: 0; } } site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; max-width: 1366px; margin: 0 auto; padding: 8px 10px; background: var(--color-dark); @media (min-width: 768px) { & { padding: var(--space-4) var(--space-6); gap: var(--space-3); } } } site-header-left { display: flex; align-items: center; gap: 4px; min-width: 0; flex-shrink: 1; @media (min-width: 768px) { & { gap: var(--space-3); flex-shrink: 0; } } } site-header-icons { display: flex; align-items: center; gap: 0; flex-shrink: 0; @media (min-width: 768px) { & { gap: var(--space-2); } } } & .site-header-logo { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; min-width: 0; flex-shrink: 1; & img { height: 24px; width: auto; display: block; max-width: 100%; @media (min-width: 768px) { & { height: 36px; } } } } & .menu-toggle, & .mobile-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: none; color: #fff; cursor: pointer; flex-shrink: 0; @media (min-width: 768px) { & { display: none; } } } & .header-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; position: relative; background: none; border: none; color: #fff; cursor: pointer; text-decoration: none; flex-shrink: 0; &.mobile-search-btn { @media (min-width: 768px) { display: none; } } @media (min-width: 768px) { & { width: 44px; height: 44px; } } } header-badge { position: absolute; top: 2px; right: 2px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } } /* ======================================================================== HEADER SEARCH (desktop) ======================================================================== */ .header-blog-link { display: none; align-items: center; color: rgba(255,255,255,0.85); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; margin-right: var(--space-3); white-space: nowrap; &:hover { color: var(--color-primary); } @media (min-width: 768px) { & { display: flex; } } } currency-selector { display: none; align-items: center; margin-right: var(--space-3); @media (min-width: 768px) { & { display: flex; } } & select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-md); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 6px 28px 6px 12px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; &:hover { border-color: rgba(255,255,255,0.5); } &:focus { outline: none; border-color: var(--color-primary); } & option { background: var(--color-dark); color: #fff; } } } header-search { display: none; flex: 1; max-width: 680px; margin: 0 var(--space-6); position: relative; @media (min-width: 768px) { & { display: block; } } & .header-search-form { position: relative; width: 100%; } & input[type="search"], & input[type="text"] { width: 100%; padding: 10px 44px 10px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; box-sizing: border-box; font-size: var(--fs-sm); font-family: var(--font-body); outline: none; &::placeholder { color: rgba(255,255,255,0.5); } &:focus { background: rgba(255,255,255,0.15); border-color: var(--color-primary); } } & .header-search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: var(--color-primary); border: none; color: #fff; width: 32px; height: 32px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } } /* ======================================================================== DESKTOP NAV + MEGA MENU ======================================================================== */ desktop-nav { display: none; background: var(--color-dark); border-top: 1px solid rgba(255,255,255,0.1); position: relative; @media (min-width: 768px) { & { display: block; } } & .desktop-nav-list { display: flex; justify-content: center; list-style: none; max-width: 1366px; margin: 0 auto; padding: 0; flex-wrap: wrap; & > li { position: static; /* li na pelna wysokosc paska (hover bez szczeliny), tekst wysrodkowany w pionie - pozycja w 2 linijkach (Program lojalnosciowy) */ display: flex; align-items: center; & > a { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: clamp(0px, 0.06vw, 0.08em); color: rgba(255,255,255,0.85); text-decoration: none; padding: 14px clamp(10px, 1.2vw, 16px); display: block; text-align: center; cursor: pointer; transition: color 0.15s; &:hover { color: var(--color-primary); } } &:hover > mega-menu { visibility: visible; opacity: 1; transition: opacity 0.12s ease 0s, visibility 0s 0s; } } } & .nav-promo { color: var(--color-primary) !important; } } mega-menu { /* T13: hover-gap fix - always block (absolute, no layout impact); show/hide via visibility+opacity. Delayed hide (~0.3s) buffers diagonal cursor travel from the narrow
  • into the full-width dropdown. visibility:hidden = no pointer-events when truly hidden, but stays interactive during the delay window so li:hover re-fires. */ display: block; visibility: hidden; opacity: 0; transition: opacity 0.12s ease 0.2s, visibility 0s 0.3s; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-top: 3px solid var(--color-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: var(--space-6) var(--space-8); z-index: 200; /* jawna siatka 5 kolumn: 1 mega-col = 1 kolumna (column-count balansowal i sklejal kolumny) */ display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--space-6); align-items: start; max-width: 1366px;; margin: 0 auto; & mega-col { display: block; & .mega-heading { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); text-decoration: none; padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--color-border); margin: var(--space-2) 0; text-transform: none; letter-spacing: 0; &:hover { color: var(--color-primary); } } & ul { list-style: none; padding: 0; margin: 0; } & ul a, & ul .a { display: block; padding: 4px 0; font-size: 12px; font-weight: 400; color: var(--color-text-secondary); text-decoration: none; text-transform: none; letter-spacing: 0; transition: color 0.15s; &:hover { color: var(--color-primary); } } } } .desktop-nav-list > li:first-child > mega-menu { max-height: 450px; overflow: hidden; } /* Producenci: wiersze (marki wlasne / polecamy / pozostale) zamiast kolumn */ mega-menu.mega-rows { display: block; & mega-col + mega-col { margin-top: var(--space-4); } /* Pozostale (zawsze ostatni wiersz): rowna siatka zamiast ciagu tekstu */ & mega-col ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 var(--space-5); } /* Marki wlasne i Polecamy: wyrozniajace pigulki */ & mega-col:not(:last-child) ul { display: flex; flex-wrap: wrap; gap: var(--space-2); } & mega-col:not(:last-child) ul a, & mega-col:not(:last-child) ul .a { padding: 6px 14px; background: var(--color-bg-alt); border: 1px solid var(--color-border-hover); border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: var(--color-text); &:hover { border-color: var(--color-primary); color: var(--color-primary); } } } /* ======================================================================== MOBILE MENU (uses side-panel component - same as cart/user/filter panels) ======================================================================== */ side-panel[name="mobile-menu"] { @media (min-width: 768px) { display: none !important; } & side-panel-content { --width: 320px; background: var(--color-dark); color: #fff; padding: var(--space-5) var(--space-4); overflow-y: auto; } mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-4); margin: 0 0 var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.08); } & .mobile-drawer-logo { display: inline-flex; align-items: center; text-decoration: none; & img { height: 24px; width: auto; } } & .mobile-drawer-close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; flex-shrink: 0; } & .mobile-drawer-nav { list-style: none; padding: 0; margin: 0; & > li { border-bottom: 1px solid rgba(255,255,255,0.08); } & a { display: block; padding: var(--space-3) 0; font-size: var(--fs-base); font-weight: 500; color: rgba(255,255,255,0.8); text-decoration: none; &:hover { color: var(--color-primary); } } & details summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; font-size: var(--fs-base); font-weight: 500; color: rgba(255,255,255,0.8); cursor: pointer; list-style: none; &::-webkit-details-marker { display: none; } } & .drawer-sub { list-style: none; padding-left: var(--space-4); padding-bottom: var(--space-3); margin: 0; & a { padding: var(--space-2) 0; font-size: var(--fs-sm); color: rgba(255,255,255,0.6); } } & .nav-promo { color: var(--color-primary); } & .nav-bold { font-weight: 700; } } & .mobile-drawer-contact { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); & p { margin: var(--space-1) 0; } & a { color: var(--color-primary); text-decoration: none; } } & .nav-promo { color: var(--color-primary); } } /* ======================================================================== SEARCH OVERLAY (mobile) ======================================================================== */ search-overlay { display: none; position: fixed; inset: 0; background: var(--color-bg); z-index: 350; padding: var(--space-4); overflow-y: auto; @media (min-width: 768px) { & { display: none; } } & .search-overlay-bar { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: 0; position: relative; } & .search-overlay-input { flex: 1; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-base); font-family: var(--font-body); outline: none; &:focus { border-color: var(--color-primary); } } & .search-overlay-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: none; background: var(--color-bg-alt); border-radius: var(--radius-md); font-size: 24px; color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0; } /* search-results dziedziczone z bazowego absolute dropdown - uniwersalny komponent */ } #mobile-search-toggle:checked ~ search-overlay { display: block; } /* ======================================================================== SEARCH RESULTS - floating dropdown (mzv2 pattern) i dziedziczone tak samo jak w kategorii (uniwersalny komponent), tylko constrain szerokości i positioning ======================================================================== */ search-results { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); z-index: 200; max-height: calc(100vh - 120px); overflow-y: auto; margin-top: 6px; &:empty { display: none; } & products-section { display: block; padding: var(--space-3); } & section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); & span { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; } & a { font-size: 11px; font-weight: 700; color: var(--color-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; &:hover { text-decoration: underline; } } } /* products-listing i single-product dziedziczone bez nadpisań - uniwersalny komponent */ & + scroll-button { display: none; } } /* Header-search & search-overlay form must be relative for absolute search-results */ header-search .header-search-form, search-overlay .search-overlay-bar { position: relative; } /* ======================================================================== PRODUCT PAGE ======================================================================== */ product-container { display: block; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); /* pasek zakladek pod przyklejonym site-header: 54 px na telefonie ( zmierzone 320-767 px ), 76 px na desktopie ( 768-1920 px ) */ --shortcuts-top: 54px; --shortcuts-height: 56px; @media (min-width: 768px) { & { --shortcuts-top: 76px; } } & .fade-in { opacity: 0; animation: fadeInUp 0.5s ease forwards; &.fade-in-1 { animation-delay: 0.05s; } &.fade-in-2 { animation-delay: 0.10s; } &.fade-in-3 { animation-delay: 0.15s; } &.fade-in-4 { animation-delay: 0.20s; } &.fade-in-5 { animation-delay: 0.25s; } &.fade-in-6 { animation-delay: 0.30s; } } @media (prefers-reduced-motion: reduce) { & .fade-in { animation-duration: 0.01ms; animation-delay: 0ms; } } &:focus-visible, & :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } } product-layout { display: grid; /* minmax: brakujacy obrazek ( img width=600 ) nie rozpycha kolumny poza ekran telefonu ( opcje i przyciski uciete ) */ grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1366px;; margin: 0 auto; padding: 0; overflow-x: clip; /* zakladka "W skrocie" z paska zakladek */ scroll-margin-top: var(--shortcuts-top); @media (min-width: 768px) { & { grid-template-columns: 55% 1fr; gap: var(--space-8); padding: var(--space-5) var(--space-6); } } } /* --- Gallery --- */ product-gallery { position: relative; display: flex; flex-direction: column; align-self: start; @media (min-width: 768px) { & { flex-direction: row; gap: var(--space-3); position: sticky; top: 80px; } } gallery-badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); z-index: 2; @media (min-width: 768px) { & { left: calc(72px + var(--space-3) + var(--space-3)); } } } gallery-badge { display: inline-block; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.04em; &[sale] { background: var(--color-danger); } &[new] { background: var(--color-success); } } gallery-thumbs { display: flex; flex-direction: row; gap: var(--space-2); padding: var(--space-2) var(--space-3); justify-content: center; order: 1; @media (min-width: 768px) { & { flex-direction: column; order: -1; width: 72px; flex-shrink: 0; padding: 0; } } } & .gallery-thumb { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px; background: var(--color-bg); cursor: pointer; transition: border-color 0.15s; flex-shrink: 0; @media (min-width: 768px) { & { width: 72px; height: 72px; padding: var(--space-1); } } &.active, &:hover { border-color: var(--color-primary); } & img { width: 100%; height: 100%; object-fit: contain; } } gallery-main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); background: var(--color-bg); aspect-ratio: 1 / 1; flex: 1; &::-webkit-scrollbar { display: none; } @media (min-width: 768px) { & { aspect-ratio: auto; } } } gallery-slide { scroll-snap-align: center; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--color-bg); overflow: hidden; & img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; } @media (min-width: 768px) { & { align-items: flex-start; } & img { max-height: 500px; } } } gallery-dots { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-3) 0; @media (min-width: 768px) { & { display: none; } } } & .gallery-dot { width: 12px; height: 12px; min-width: 12px; border-radius: var(--radius-full); background: var(--color-border); border: none; padding: 0; cursor: pointer; transition: background 0.2s, width 0.2s; &.active { background: var(--color-primary); width: 28px; } } } /* --- Product Info --- */ product-info { display: block; padding: var(--space-4) var(--space-3); @media (min-width: 768px) { & { padding: var(--space-4) 0; } } & .product-brand { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--space-1); text-decoration: none; cursor: pointer; &:hover { text-decoration: underline; } } & .product-title { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--space-2); line-height: 1.1; & .product-option-text { display: block; font-size: var(--fs-base); font-weight: 500; color: var(--color-text-secondary); margin-top: 4px; } } & .product-subtitle { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; color: var(--color-text-secondary); margin-bottom: var(--space-4); } product-features { display: block; margin: var(--space-3) 0 var(--space-5); padding: 14px 16px; background: #FFF7F0; border: 1px solid #FFE4D1; border-left: 3px solid var(--color-primary); border-radius: 6px; font-size: 13px; color: var(--color-text); line-height: 1.4; & ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } & li { position: relative; padding-left: 24px; font-weight: 600; color: #1A1A1A; } & li::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--color-primary); border-radius: 50%; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; flex-shrink: 0; } } } rating-info { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--fs-sm); color: var(--color-text-secondary); & .rating-score { font-weight: 600; color: var(--color-text); } & .rating-count { font-size: var(--fs-xs); color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; } } /* --- Price Block --- */ price-block { display: block; margin-bottom: var(--space-5); padding: var(--space-4); background: var(--color-bg-alt); border-radius: var(--radius-md); price-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; position: relative; } price-current { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 800; color: var(--color-text); } /* Produkt bez rabatu ( sztywna cena ): cena w innym kolorze + gwiazdka z dymkiem */ &[no-discount] price-current { color: var(--color-info); } price-note { align-self: flex-start; margin-left: calc( -1 * var(--space-2) ); & button { min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; font-size: var(--fs-xl); font-weight: 800; line-height: 1; color: var(--color-info); cursor: help; } & [role="tooltip"] { position: absolute; top: 100%; left: 0; z-index: 10; width: max-content; max-width: min( 320px, 100% ); margin-top: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-dark); color: #fff; font-size: var(--fs-xs); font-style: italic; line-height: 1.4; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); visibility: hidden; /* chowanie z opoznieniem: kursor zdazy przejsc z gwiazdki na dymek ( WCAG 1.4.13 ) */ transition: visibility 0s linear 0.3s; } &:hover [role="tooltip"], &:focus-within [role="tooltip"] { visibility: visible; transition-delay: 0s; } /* Esc ( skrypt w product_container.twig ) */ &[closed] [role="tooltip"] { visibility: hidden; } } .price-from { font-size: var(--fs-md); font-weight: 400; color: var(--color-text-secondary); } price-original { font-size: var(--fs-md); color: var(--color-text-tertiary); text-decoration: line-through; & s { text-decoration: line-through; } } price-discount { display: inline-block; background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); } price-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.04em; &[promo] { background: var(--color-primary); color: #fff; } &[preorder] { background: #573FCF; color: #fff; } } price-omnibus { display: block; font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); } portion-text { display: block; font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: var(--space-2); } price-discounts { display: block; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); list-style: none; font-size: var(--fs-xs); color: var(--color-text-secondary); & li { padding: 2px 0; } } } /* --- USP Box --- */ usp-box { display: block; border: 2px solid var(--color-primary-light); border-left: 4px solid var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); font-size: var(--fs-sm); color: var(--color-text); font-weight: 500; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; } /* --- Stock Status --- */ .free-shipping-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 4px; background: var(--color-success); color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); } stock-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-4); padding-left: 16px; & svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-success); } & strong { font-weight: 700; color: var(--color-success); } &.green svg, &.green strong { color: var(--color-success); } &.red svg, &.red strong, &.out_of_stock svg, &.out_of_stock strong { color: var(--color-danger); } &.purple svg, &.purple strong { color: #573FCF; } &.low_stock svg, &.low_stock strong { color: var(--color-warning); } } product-meta { display: block; font-size: var(--fs-xs); color: var(--color-text-secondary); margin-bottom: var(--space-2); & strong { color: var(--color-text); font-weight: 600; } } /* --- Variant Group --- */ variant-group { display: block; margin-top: 28px; margin-bottom: var(--space-5); padding-top: 20px; border-top: 1px solid var(--color-border); variant-label { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-text); margin-bottom: 10px; padding-left: 10px; border-left: 4px solid var(--color-primary); /* wspolna gramatura opcji */ & span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-text-secondary); } } variant-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 100%; /* duzo opcji: dwa rzedy z wygaszeniem, reszta po "Pokaz wszystkie" ( 2 x min-height pastylki 40 px + odstep; lista z dwoch rzedow bez przyciecia, skrypt w product_container.twig ) */ &[clip] { max-height: calc( 2 * 40px + var(--space-2) ); overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } /* koszyk bez wybranej opcji ( window.__chooseOption w product_container.twig ) */ &[shake] { animation: shake 0.35s; @media (prefers-reduced-motion: reduce) { animation: none; } } } /* pastylki opcji jak w projekcie karty ( wariant A ) */ & .variant-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 7px 14px; min-height: 40px; min-width: 48px; max-width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--fs-sm); font-weight: 500; color: var(--color-text); text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-family: var(--font-body); white-space: normal; word-break: break-word; &:hover { border-color: var(--color-text); } &.selected, &[aria-checked="true"], &[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; } &.disabled, &[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } } & .variant-more { padding: 6px 0 0; border: 0; background: none; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary-dark); text-decoration: underline; cursor: pointer; } } @keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* --- ATC Section --- */ atc-section { display: block; margin-bottom: var(--space-5); & .atc-form { display: flex; gap: var(--space-3); align-items: stretch; } & .btn-atc { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: none; min-height: 52px; cursor: pointer; transition: background 0.15s, transform 0.1s; text-transform: uppercase; letter-spacing: 0.04em; &:hover { background: var(--color-primary-hover); } &:active { transform: scale(0.97); } & svg { width: 22px; height: 22px; flex-shrink: 0; } &.btn-atc-notify { background: var(--color-primary); &:hover { background: var(--color-primary-hover); } } } } qty-selector { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); flex-shrink: 0; & select { height: 52px; border: none; padding: 0 var(--space-3); font-size: var(--fs-base); font-weight: 700; color: var(--color-text); background: transparent; font-family: var(--font-body); cursor: pointer; min-width: 70px; } } /* --- Badania & Certyfikat ( pod przyciskiem koszyka, karta jak w projekcie karty ) --- */ .lab-cta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); font-size: 13px; line-height: 1.4; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; &:hover { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(254, 73, 0, 0.12); } & svg { flex-shrink: 0; color: var(--color-primary); } & span:first-of-type { flex: 1; } & strong { color: var(--color-text); } & span:last-child { font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; } } /* --- Trust Badges --- */ trust-badges { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); margin-bottom: var(--space-4); trust-badge { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; font-size: 11px; color: var(--color-text-secondary); font-weight: 500; } trust-badge-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-bg-alt); color: var(--color-text-secondary); } } /* --- Delivery Timeline --- */ delivery-timeline { display: block; background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-5); delivery-title { display: block; font-size: var(--fs-sm); font-weight: 600; text-align: center; margin-bottom: var(--space-4); color: var(--color-text); } delivery-steps { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 0 var(--space-2); &::before { content: ''; position: absolute; top: 18px; left: 36px; right: 36px; height: 2px; background: var(--color-border); z-index: 0; } } delivery-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); position: relative; z-index: 1; text-align: center; flex: 0 0 auto; } delivery-step-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; } delivery-step-label { font-size: 10px; font-weight: 700; color: var(--color-text); } } /* --- Section wrapper --- */ section-full { display: block; max-width: 1366px;; margin: 0 auto; padding: var(--space-8) var(--space-4); @media (min-width: 768px) { & { padding: var(--space-10) var(--space-6); } } /* desktop ( od 1101 px jak projekt karty ): tresc w kolumnie obrazka ( jak product-layout ), obok plywajacy komponent zakupu; wiersz 1 prawej kolumny = tabela wartosci ( #nutrition, jesli jest ), wiersz 2 = komponent zakupu ( reszta wysokosci, sticky ) */ @media (min-width: 1101px) { & { display: grid; grid-template-columns: 55% 1fr; grid-template-rows: auto 1fr; column-gap: var(--space-8); } & > product-tabs { grid-row: 1 / 3; } /* tabela tylko w karcie obok opisu: zakladka skladu bez tabeli, a bez innej tresci ( "Skladniki" ) wcale; osobne reguly, bo przegladarka bez :has() odrzuca cala liste selektorow i pokazalaby tabele dwa razy ( CR r2 ) */ & #ingredients .nutrition-facts-wrap { display: none; } & #ingredients:has(.nutrition-facts-wrap):not(:has(product-ingredients)) { display: none; } /* sam tekst "Skladniki" ( tabela ukryta ): dolny odstep jak w innych zakladkach, nie 0 z nutrition_facts.tpl ( CR r1 ) */ & #ingredients product-tab-body:has(.nutrition-facts-wrap):has(product-ingredients) { padding-bottom: var(--space-5); } } /* Sklad: tabela wartosci obok poczatku opisu ( jak "W skrocie" w projekcie karty ), gora karty na wysokosci tekstu naglowka "Co warto wiedziec"; ponizej 1101 px ukryta ( tabela w zakladce skladu pod opisem ). Karta zaczyna sie 16 px nizej niz zakladka opisu ( margines summary 15 px + ramka ): klik "Opis" stawia opis 12 px pod paskiem, a karta musi byc dalej niz 24 px pod paskiem ( tolerancja aktywnej zakladki ), inaczej podswietla sie "Sklad" */ & > #nutrition { display: none; scroll-margin-top: calc( var(--shortcuts-top) + var(--shortcuts-height) + var(--space-3) ); @media (min-width: 1101px) { & { display: block; grid-area: 1 / 2; margin-top: var(--space-6); } & .nutrition-facts-wrap { margin-top: 0; } /* tabela od 4 kolumn ( WPC 80: 642 px przy karcie 536 px ): pismo 13 px, wartosci zawijane rownymi liniami ( "123 kcal" / "(516 kJ)" ) zamiast przewijania, ostatnia kolumna nie chowa sie za krawedzia; tabele 2-3 kolumnowe zawijaja jak w zakladce ( CR r1, r2 ) */ &:has(tr > :nth-child(4)) { font-size: var(--fs-xs); & :is(td, th) { white-space: normal; text-wrap: balance; } } } } } /* --- Komponent zakupu obok tresci ( desktop od 1101 px, sticky pod paskiem zakladek; wezszy ekran = cena i koszyk w pasku od 900 px ) --- */ side-buy { display: none; @media (min-width: 1101px) { & { display: grid; grid-area: 2 / 2; gap: var(--space-3); align-self: start; justify-self: end; width: 100%; max-width: 340px; position: sticky; top: calc( var(--shortcuts-top) + var(--shortcuts-height) + var(--space-5) ); padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); } } side-buy-head { display: flex; align-items: center; gap: var(--space-3); line-height: 1.3; } & img { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; background: var(--color-bg-alt); border-radius: 10px; } & strong { display: block; font-weight: 700; } & small { display: block; font-size: 12px; color: var(--color-text-secondary); } side-buy-price { display: block; font-family: var(--font-heading); font-size: 22px; font-weight: 800; line-height: 1.2; &[no-discount] { color: var(--color-info); } } & button { width: 100%; height: 46px; } } /* przyciski paska zakladek i komponentu zakupu ( dzialaja jak sticky-atc ) */ product-container :is(shortcuts-buy, side-buy) button { padding: 0 18px; border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: background 0.15s; &:hover { background: var(--color-primary-hover); } } /* --- Product Tabs (accordion) --- */ product-tabs { display: block; min-width: 0; border-top: 1px solid var(--color-border); & details.product-tab { /* zakladka z paska: sekcja pod paskiem, nie pod nim */ scroll-margin-top: calc( var(--shortcuts-top) + var(--shortcuts-height) + var(--space-3) ); border-bottom: 1px solid var(--color-border); &[open] .product-tab-icon { transform: rotate(180deg); } } & .product-tab-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; background: none; border: none; width: 100%; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 700; color: var(--color-text); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; list-style: none; &::-webkit-details-marker { display: none; } &:hover { color: var(--color-primary); } } & .product-tab-icon { width: 24px; height: 24px; transition: transform 0.25s; color: var(--color-text-tertiary); flex-shrink: 0; } } product-tab-body { display: block; padding: 0 0 var(--space-5) 0; font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.7; overflow-x: auto; & p { margin-bottom: var(--space-3); } & ul { padding-left: var(--space-5); margin: var(--space-3) 0; } & li { margin-bottom: var(--space-2); } /* Related products grid - identyczny jak category listing */ & products-listing { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3) !important; padding: 0 !important; @media (min-width: 540px) { & { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; } } } & products-listing ul, & products-listing li { padding: 0; margin: 0; list-style: none; } /* Tabela wartosci ( nutrition_facts.tpl i stara tabela, obie w .nutrition-facts-wrap ): karta jak w projekcie karty ( wariant A ); !important tam, gdzie sanitizer tresci ( koniec pliku ) zeruje kolory, tla i ramki w zakladkach */ & .nutrition-facts-wrap { box-sizing: border-box; margin: var(--space-3) 0; padding: var(--space-2) var(--space-5) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); } /* objasnienia pod tabela od 4 kolumn ( A* / B** z nutrition_facts.tpl ): szerokosc karty, nie przewijanej tabeli */ & .nutrition-facts-wrap .nf-note { margin: var(--space-2) 0 0; } & :is(.nutrition-facts, .nutrition-table) { width: 100%; border-collapse: collapse; margin: 0; font-family: var(--font-body); & tr:nth-child(n) { background-color: transparent !important; } & :is(th, td) { padding: 9px var(--space-3) 9px 0 !important; border-bottom: 1px solid var(--color-border) !important; text-align: left; vertical-align: top; color: var(--color-text) !important; background-color: transparent !important; } & :is(th, td):last-child { padding-right: 0 !important; } & tr:last-child td { border-bottom: 0 !important; } & th { font-weight: 700; } & :is(th, td):not(:first-child) { text-align: right; } /* wartosc pogrubiona jak w projekcie tylko w tabeli 2-kolumnowej ( nazwa | wartosc ); szersze tabele ( porcja / 100 g, grupy smakow ) maja pogrubienie z panelu */ & :is(th, td):nth-child(2):last-child:not([colspan]) { font-weight: 700 !important; } /* wiersz z co najmniej 3 wartosciami ( tabela od 4 kolumn, np. porcja / 100 g x grupy smakow ): liczby w jednej linii, na telefonie tabela przewija sie w karcie; tabela 3-kolumnowa i komorki z colspan z nutrition_facts.tpl ( naglowek / przypis w A, od 4 kolumn tez porcja w B, od lewej ) bez nowrap; objasnienia z konca tabeli od 4 kolumn ( A* / B** ) tpl wypisuje pod tabela ( .nf-note ), bo colspan ma szerokosc calej przewijanej tabeli */ & tr:has(> :not(:first-child):not(:empty) ~ :not(:empty) ~ :not(:empty)) > :not(:first-child) { white-space: nowrap; } & td[colspan]:not(:first-child) { text-align: left; } /* pusty wiersz ( odstep w tabeli JSON ) i linie --- / === z nutrition_facts.tpl: bez wysokosci wiersza */ & tr.nf-empty td { height: var(--space-2); padding: 0 !important; border-bottom: 0 !important; /* komorka z   albo
    nie podnosi wiersza do wysokosci linii tekstu */ font-size: 0 !important; line-height: 0 !important; } & tr:is(.nf-sep-thin, .nf-sep-thick) td { padding: 0 !important; border-bottom: 1px solid var(--color-text) !important; } & tr.nf-sep-thick td { border-bottom: 3px double var(--color-text) !important; } /* "w tym ..." wciete i szare, bialko w kolorze marki ( klasy z nutritionRowClass w kontrolerze karty ) */ & tr.nf-sub td:first-child { padding-left: 14px !important; color: var(--color-text-secondary) !important; } & tr.nf-hl td { font-size: var(--fs-md) !important; color: var(--color-primary-dark) !important; } } & .nutrition-table td:not(:first-child) { white-space: nowrap; } & .nutrition-header { font-weight: 700; color: var(--color-text) !important; margin: var(--space-3) 0 var(--space-1); font-size: var(--fs-md) !important; } & h3 { font-size: var(--fs-md); color: var(--color-text); margin: var(--space-4) 0 var(--space-2); font-family: var(--font-heading); } & table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; } & th, & td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--fs-xs); } & th { font-weight: 700; color: var(--color-text); background: var(--color-bg-alt); } & img { max-width: 100%; height: auto !important; } } /* --- FBT Section --- */ fbt-section { display: block; background: var(--color-bg-alt); padding: var(--space-8) var(--space-4); @media (min-width: 768px) { & { padding: var(--space-10) var(--space-6); } } fbt-title { display: block; max-width: 1366px;; margin: 0 auto var(--space-6); font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; text-align: center; color: var(--color-text); } fbt-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 1366px;; margin: 0 auto; @media (min-width: 540px) { & { grid-template-columns: repeat(3, 1fr); } } } } /* --- Sticky ATC (mobile) --- */ sticky-atc { position: fixed; bottom: 0; left: 0; right: 0; height: 68px; padding: var(--space-2) var(--space-4); background: var(--color-bg); box-shadow: var(--shadow-sticky); z-index: 90; display: flex; align-items: center; gap: var(--space-3); @media (min-width: 768px) { & { display: none; } } sticky-atc-price { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); white-space: nowrap; &[no-discount] { color: var(--color-info); } } & .sticky-atc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: none; min-height: 48px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; &:active { transform: scale(0.97); } } } @media (max-width: 767px) { body.product-product { padding-bottom: 76px; } } /* ======================================================================== AUTH PAGES - login / register / forgotten ======================================================================== */ auth-page { display: block; max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); @media (max-width: 767px) { padding: var(--space-4) var(--space-3) var(--space-8); } & auth-alert { display: block; padding: var(--space-3) var(--space-4); border-radius: 8px; margin-bottom: var(--space-4); font-size: 14px; font-family: var(--font-body); &.success { background: #E8F5E9; color: #1B5E20; border-left: 4px solid var(--color-success); } &.error { background: #FFF3F3; color: #B71C1C; border-left: 4px solid var(--color-danger); } } } auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); @media (max-width: 767px) { grid-template-columns: 1fr; } } auth-card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 36px; font-family: var(--font-body); @media (max-width: 767px) { padding: 20px 18px; } &[wide] { max-width: 720px; margin: 0 auto; } & .auth-title { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-2); line-height: 1.2; } & .auth-intro { color: var(--color-text-secondary); font-size: 14px; margin: 0 0 var(--space-5); line-height: 1.5; } & form-section { display: block; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); &:last-of-type { border-bottom: none; padding-bottom: 0; } & h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); margin: 0 0 var(--space-3); } } & form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); @media (max-width: 600px) { grid-template-columns: 1fr; } } & .form-field { display: block; margin-bottom: var(--space-3); & label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; } &.required label:after { content: ' *'; color: var(--color-danger); } & input[type="text"], & input[type="email"], & input[type="password"], & input[type="tel"] { width: 100%; padding: 10px 14px; font-size: 14px; font-family: var(--font-body); color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: 6px; transition: border-color 0.15s; &:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } } & .field-error { color: var(--color-danger); font-size: 12px; margin-top: 4px; } } & password-wrapper { display: flex; position: relative; & input { padding-right: 44px !important; } & .toggle-pwd { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; font-size: 18px; padding: 6px 10px; color: var(--color-text-tertiary); &:hover { color: var(--color-primary); } } } & radio-group { display: flex; flex-direction: column; gap: var(--space-2); &[inline] { flex-direction: row; gap: var(--space-4); } & .radio-item { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14px; } & input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; } } & .forgot-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--color-primary); text-decoration: none; &:hover { text-decoration: underline; } } & auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); & .btn-primary, & .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 6px; text-decoration: none; cursor: pointer; transition: all 0.15s; border: none; font-family: var(--font-body); } & .btn-primary { background: var(--color-primary); color: #fff; &:hover { background: var(--color-primary-hover); } } & .btn-secondary { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); &:hover { background: var(--color-bg-alt); } } & .agree-label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text-secondary); cursor: pointer; & input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; } } } } auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--color-text-tertiary); font-size: 13px; &::before, &::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } } .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border: 1.5px solid #747775; border-radius: 6px; background: #fff; color: #1f1f1f; font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; &:hover { background: #f7f7f7; border-color: #d1d5db; } } .google-consent { margin-top: 10px; font-size: 11px; color: var(--color-text-tertiary); text-align: center; line-height: 1.4; & a { color: var(--color-text-secondary); text-decoration: underline; } } /* ======================================================================== SITE FOOTER ======================================================================== */ span.a { cursor: pointer; } site-footer { display: block; background: var(--color-dark); color: rgba(255,255,255,0.6); padding: var(--space-10) var(--space-4) 0; font-family: var(--font-body); footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: 1366px;; margin: 0 auto var(--space-8); @media (min-width: 540px) { & { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { & { grid-template-columns: 1.4fr 1fr 1fr; } } } footer-col { display: block; & h4 { font-family: var(--font-heading); color: #fff; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-4); } & ul { list-style: none; padding: 0; margin: 0; } & li { margin-bottom: var(--space-2); font-size: var(--fs-sm); line-height: 1.5; } & a { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.15s; &:hover { color: var(--color-primary); } } } & .footer-logo { display: inline-block; margin-bottom: var(--space-4); & img { height: 32px; width: auto; } } & .footer-about { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: var(--space-4); } & .footer-contact { & li { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); color: rgba(255,255,255,0.5); } & strong { color: rgba(255,255,255,0.8); font-weight: 600; min-width: 80px; } } & .footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); list-style: none; padding: 0; & li { margin: 0; } & a, & .a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(255,255,255,0.05); border-radius: var(--radius-md); font-size: var(--fs-xs); color: rgba(255,255,255,0.7); transition: background 0.15s, color 0.15s; &:hover { background: var(--color-primary); color: #fff; } } } & .footer-shipping { & li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); font-size: var(--fs-xs); } & em { font-style: normal; color: rgba(255,255,255,0.8); font-weight: 600; white-space: nowrap; } } & .footer-shipping-free { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-primary); color: #fff; border-radius: var(--radius-md); text-align: center; font-size: var(--fs-xs); font-weight: 600; & strong { color: #fff; font-weight: 800; } } footer-bottom { display: block; border-top: 1px solid rgba(255,255,255,0.08); padding: var(--space-5) var(--space-4); } & .footer-bottom-inner { max-width: 1366px;; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; font-size: var(--fs-xs); color: rgba(255,255,255,0.4); @media (min-width: 768px) { & { flex-direction: row; justify-content: space-between; text-align: left; } } } & .footer-payments { display: flex; gap: var(--space-2); align-items: center; & img { height: 24px; width: auto; opacity: 0.7; } } } /* ======================================================================== CATEGORY PAGE - stitch redesign on mzv2 element structure custom elements: filterable-container, side-panel[name=filters], filters-container, filter-container, products-section, products-listing, single-product (mzv2 names - for cross-project consistency) ======================================================================== */ /* --- Body white globally --- */ body { background: #fff; } category-page { display: block; font-family: var(--font-body); color: var(--color-text); background: #fff; min-height: 60vh; } /* --- HERO - centered, clean --- */ category-hero { display: block; background: #fff; category-hero-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 1366px;; margin: 0 auto; padding: var(--space-6) var(--space-4) 0; text-align: center; @media (min-width: 768px) { & { padding: 0; } } } & .category-title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); margin: 0; line-height: 1.1; @media (min-width: 768px) { & { font-size: var(--fs-2xl); } } } category-stats { font-size: var(--fs-xs); color: var(--color-text-tertiary); font-weight: 500; & strong { color: var(--color-text-secondary); font-weight: 600; } } /* Hero description ukryta na górze - wyświetlamy tylko na dole jako SEO content */ category-description { display: none; } } /* Ingredient encyclopedia - description visible in hero (legacy 1:1 parity) */ category-page[variant="ingredient"] category-hero category-description { display: block; max-width: 900px; margin: var(--space-3) auto 0; font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.6; text-align: left; } category-page[variant="ingredient"] category-hero category-description p { margin: 0 0 var(--space-2); } category-page[variant="ingredient"] category-hero category-description p:last-child { margin-bottom: 0; } /* --- SUBNAV PILLS - tight row pod hero, centered --- */ category-subnav { display: block; background: #fff; category-subnav-inner { display: flex; gap: var(--space-2); max-width: 1366px;; margin: 0 auto; padding: var(--space-3) var(--space-4) var(--space-4); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; &::-webkit-scrollbar { display: none; } @media (min-width: 768px) { & { padding: var(--space-4) var(--space-6) var(--space-5); flex-wrap: wrap; overflow: visible; justify-content: center; } } } & .subnav-pill { display: inline-flex; align-items: center; flex-shrink: 0; padding: 8px 16px; background: var(--color-bg-alt); border: 1px solid var(--color-border-hover); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--color-text); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: all 0.15s; white-space: nowrap; &:hover, &.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } } } /* --- LAYOUT: 2-col grid (sidebar + content) --- */ filterable-container { display: block; max-width: 1366px;; margin: 0 auto; padding: var(--space-5) var(--space-4); @media (min-width: 992px) { &:has(side-panel) { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-6); align-items: start; } } & products-section { display: block; min-width: 0; & > div { display: block; } } } /* --- SIDEBAR z filtrami - czysty, elegancki --- */ side-panel[name="filters"] { @media (min-width: 992px) { & { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; } } & side-panel-content { --width: 320px; overflow-y: auto; } & filters-container { display: block; background: transparent; padding: var(--space-4); } category-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); & h3 { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; } & .filters-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 24px; color: var(--color-text-secondary); background: none; border: none; cursor: pointer; @media (min-width: 992px) { & { display: none; } } } } } /* Generic .panel-toggle mechanism handles filter panel open/close */ filter-container { display: block; margin-bottom: 0; & + filter-container details { border-top: 1px solid var(--color-border); } /* kazdy filter-container ma jeden details, wiec details:first-of-type lapal wszystkie - linia tylko miedzy sekcjami */ &:first-of-type summary { padding-top: 0; } & details { &[open] summary svg { transform: rotate(180deg); } } & summary { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; list-style: none; padding: var(--space-3) 0; &::-webkit-details-marker { display: none; } & svg { transition: transform 0.2s; color: var(--color-text-tertiary); width: 14px; height: 14px; } } } filter-options { display: block; padding: var(--space-2) 0 var(--space-1); max-height: 280px; overflow-y: auto; & .filter-checkbox { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--color-text-secondary); line-height: 1.3; position: relative; &:hover { color: var(--color-text); } & input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } & .checkbox-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid var(--color-border-hover); border-radius: 3px; background: var(--color-bg); transition: all 0.15s; flex-shrink: 0; } & input[type="checkbox"]:checked + .checkbox-box { background: var(--color-primary); border-color: var(--color-primary); &::after { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } } & .filter-label { flex: 1; } } } /* --- PRICE RANGE FILTER (dual range slider, pure HTML+CSS) --- */ filter-price { display: block; padding: var(--space-4) 0 var(--space-2); price-range-label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 14px; text-align: center; & output { font-weight: 700; color: var(--color-text); } } price-range-track { display: block; position: relative; height: 28px; margin: 0 8px; /* Tor - szara linia w tle */ &::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: var(--color-border); border-radius: 2px; transform: translateY(-50%); pointer-events: none; } /* Pomarańczowa linia (statyczna, full width - bez JS nie wiemy zakresu) */ &::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: var(--color-primary); border-radius: 2px; transform: translateY(-50%); pointer-events: none; } & input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; outline: none; &::-webkit-slider-runnable-track { background: none; height: 28px; border: none; } &::-moz-range-track { background: none; height: 28px; border: none; } &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #fff; border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.15); position: relative; z-index: 2; margin-top: 0; &:hover { background: var(--color-primary); } &:active { transform: scale(1.1); } } &::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.15); &:hover { background: var(--color-primary); } &:active { transform: scale(1.1); } } } } } /* --- TOOLBAR - slim, inline z gridem --- */ category-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: 0 0 var(--space-3); background: transparent; border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: var(--space-4); flex-wrap: wrap; & .toolbar-filters-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 11px; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; min-height: 36px; @media (min-width: 992px) { & { display: none; } } } toolbar-count { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; margin-right: auto; & strong { color: var(--color-text); font-weight: 700; } } toolbar-sort { display: flex; align-items: center; gap: var(--space-2); & label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } & select { padding: 6px 28px 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 12px; font-size: 13px; font-weight: 600; color: var(--color-text); font-family: var(--font-body); cursor: pointer; min-height: 36px; -webkit-appearance: none; appearance: none; &:focus { border-color: var(--color-primary); outline: none; } } } /* telefon, gdy jest pole Pokaz: Filtry w swoim wierszu, Sortuj + Pokaz obok siebie w drugim ( sortowanie zabiera reszte szerokosci ); od 520 px trzy elementy mieszcza sie w jednym wierszu ( zmierzone ), wiec tam zostaje flex jak wyzej; nadpisuje padding pola z reguly wyzej specyficznoscia :has(#limit), nie kolejnoscia */ @media (max-width: 519.98px) { &:has(#limit) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; } /* ciasniej niz na desktopie: najdluzsza opcja "Cena (od najwyzszej)" miesci sie od 360 px */ &:has(#limit) toolbar-sort { gap: 4px; } &:has(#limit) toolbar-sort label { letter-spacing: 0; } &:has(#limit) .toolbar-filters-btn { grid-column: 1 / -1; justify-self: start; } &:has(#limit) toolbar-sort, &:has(#limit) toolbar-sort select { min-width: 0; } &:has(#limit) toolbar-sort:first-of-type select { flex: 1; } /* mniejszy padding i czcionka pola: razem z odstepami wyzej opcje cenowe w calosci od 360 px ( 320 px tnie je, "Domyslne" miesci sie ) */ &:has(#limit) toolbar-sort select { padding-left: 8px; padding-right: 22px; background-position: right 6px center; font-size: 12px; } } } /* --- PRODUCT GRID - universal adaptive grid (works in category, search, related) --- */ products-listing { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding-bottom: 0; @media (min-width: 540px) { & { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } } &.htmx-settling { } } /* --- SINGLE PRODUCT CARD - elegant, clean --- */ products-listing single-product { display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-align: left; padding: 0; transition: box-shadow 0.2s ease; &:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); } &[out-of-stock] { opacity: 0.65; & img { filter: grayscale(0.6); } } single-product-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; pointer-events: none; } single-product-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-primary); color: #fff; line-height: 1.2; box-shadow: 0 1px 3px rgba(0,0,0,0.08); &[sale] { background: var(--color-danger); } &[shipping] { background: var(--color-success); } &[best] { background: var(--color-warning); color: var(--color-text); } &[preorder] { background: #573FCF; } } & > a:has(img) { display: flex; align-items: center; justify-content: center; height: 170px; background: var(--color-bg); padding: 10px; text-decoration: none; overflow: hidden; width: 100%; @media (min-width: 540px) { & { height: 200px; } } & img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; display: block; } &:hover img { transform: scale(1.04); } } & > a:not(:has(img)), & > .a:not(:has(img)) { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 4px; text-decoration: none; } manufacturer-name { display: block; padding: 10px 12px 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); line-height: 1.2; } manufacturer-name + .a:not(:has(img)), manufacturer-name + a:not(:has(img)) { padding-top: 3px; } product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--color-text); line-height: 1.35; min-height: 2.7em; white-space: normal; } product-features { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); line-height: 1.5; padding: 0 12px; margin: 6px 0; &:has(.features-list) { display: block; -webkit-line-clamp: unset; overflow: visible; } & .features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; & li { list-style: none; &::before { content: '✓'; color: inherit; font-weight: 700; margin-right: 4px; } } } } single-product-rating { display: flex; align-items: center; gap: 4px; padding: 2px 12px 0; font-size: 10px; color: var(--color-text-secondary); & rating-stars { display: inline-block; } } product-bottom { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 12px; margin-top: auto; } product-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-height: 24px; & .price-now { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--color-primary); line-height: 1.1; } & .price-was { font-size: 12px; color: var(--color-text-tertiary); text-decoration: line-through; & s { text-decoration: line-through; } } &[special] .price-now { color: var(--color-danger); } & .price-from { font-size: 13px; font-weight: 400; color: var(--color-text-secondary); } } buy-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; background: var(--color-primary); border: none; border-radius: var(--radius-md); font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; min-height: 38px; font-family: var(--font-body); transition: background 0.15s ease, transform 0.1s ease; width: 100%; box-sizing: border-box; &:hover { background: var(--color-primary-hover); } &:active { transform: scale(0.98); } & svg { width: 15px; height: 15px; flex-shrink: 0; } &.out-of-stock { background: var(--color-bg-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); &:hover { background: var(--color-border); color: var(--color-text); } } } &[out-of-stock] buy-button { background: var(--color-bg-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); } &[preorder] product-price .price-now { color: #573FCF; } &[preorder] buy-button { background: #573FCF; color: #fff; &:hover { background: #4530A8; } } /* Produkt bez rabatu ( sztywna cena ): cena w kolorze jak na karcie; za [special] i [preorder], wiec wygrywa ( plakietka -X% i przekreslona cena zostaja ) */ & product-price[no-discount] .price-now { color: var(--color-info); } } /* --- EMPTY STATE --- */ category-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-12) var(--space-4); text-align: center; background: transparent; color: var(--color-text-tertiary); & svg { opacity: 0.4; } & p { font-size: var(--fs-md); font-weight: 600; } } /* --- SEO DESCRIPTION (na dole) --- */ category-description-bottom { display: block; background: transparent; border-top: 1px solid var(--color-border); padding: var(--space-6) 0 0; margin-top: var(--space-6); font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; & h1 { font-size: 36px; } & h2 { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); margin: var(--space-3) 0 var(--space-3); text-transform: none; letter-spacing: 0; font-size: 150% !important; font-weight: 600; margin-block: 20px; } & h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 700; color: var(--color-text); margin: var(--space-4) 0 var(--space-2); font-size: 120% !important; } & p { margin-bottom: var(--space-3); } & strong { color: var(--color-text); font-weight: 600; } & ul, & ol { padding-left: var(--space-5); margin: var(--space-2) 0 var(--space-3); } & li { list-style: disc; margin-bottom: var(--space-1); } & ol li { list-style: decimal; } /* "Rozwin" ( appendReadMore w kontrolerze kategorii / producenta ): pierwszy akapit do 6 linii, reszta opisu ukryta do klikniecia */ & p.has-read-more { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; & ~ *:not(.read-more) { display: none; } } & .read-more { padding: 0; border: 0; background: none; color: var(--color-primary) !important; font-weight: 700; cursor: pointer; } } /* ======================================================================== PAGINATION ======================================================================== */ .pagination-nav { display: flex; justify-content: center; padding: var(--space-5) 0; } .pagination-nav:empty { display: none; } .pagination-nav .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; } .pagination-nav .pagination li a, .pagination-nav .pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--color-text); text-decoration: none; background: #fff; transition: background 0.15s, border-color 0.15s; } .pagination-nav .pagination li a:hover { background: var(--color-bg-alt); border-color: var(--color-border-hover); } .pagination-nav .pagination li.active span { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ======================================================================== CHECKOUT (d_quickcheckout) - testo overrides ======================================================================== */ body[data-route="checkout-checkout"] { background: #fff; /* Bootstrap fallbacks (.container, .row, .col-sm-*) */ & .container { max-width: 1366px;; margin: 0 auto; padding: var(--space-4) var(--space-4); box-sizing: border-box; width: 100%; @media (min-width: 768px) { & { padding: var(--space-5) var(--space-6); } } } & .row { display: flex; flex-wrap: wrap; margin: 0; } & [class^="col-sm-"], & [class*=" col-sm-"] { width: 100%; box-sizing: border-box; } & #content { background: #fff; } /* Override dark background na .qc */ & .qc { background: #fff; color: var(--color-text); font-family: var(--font-body); } /* Account tabs - active=orange, inactive=grey */ & .qc .ve-btn--primary, & .qc a.ve-btn--primary, & .qc-btn.ve-btn--primary { background: #ddd !important; color: #777 !important; &:hover { background: var(--color-primary-hover) !important; color: #fff !important; } &.active { background: var(--color-primary) !important; color: #fff !important; } } & .qc .ve-tab__item { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; } /* Step headers */ & .qc h4, & .qc .qc-step__heading { font-family: var(--font-body) !important; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); } /* Inputs */ & .qc input[type="text"], & .qc input[type="email"], & .qc input[type="tel"], & .qc input[type="password"], & .qc input[type="number"], & .qc select, & .qc textarea, & .qc .ve-input { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4; height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 14px; color: var(--color-text); background: #fff; transition: border-color 0.2s; box-sizing: border-box; &:focus { border-color: var(--color-primary); outline: none; } } & .qc textarea { height: auto; min-height: 80px; padding: 10px 14px; } & .qc select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } /* Field spacing + col-half fix */ & .qc .field-sortable { margin-bottom: 10px; } & .qc .col-half { width: calc(50% - 6px) !important; padding: 0 !important; float: left; box-sizing: border-box; &:nth-child(even) { margin-left: 12px; } } & .qc .ve-clearfix::after { content: ''; display: table; clear: both; } /* Radio/checkbox → orange */ & .qc input[type="radio"]:checked { accent-color: var(--color-primary); } /* Checkout checkboxes - styl jak filtry kategorii */ & .qc .ve-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--color-text); padding: 6px 0; position: relative; & input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; margin: 0 !important; } /* = custom checkbox box - override bundle CSS completely */ & > i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; min-width: 18px !important; border: 1.5px solid var(--color-border-hover) !important; border-radius: 3px !important; background: var(--color-bg) !important; transition: all 0.15s !important; flex-shrink: 0 !important; position: relative !important; box-shadow: none !important; } & > i:before, & > i:after { content: none !important; display: none !important; } &.qc-checkbox-selected > i, &:has(input[type="checkbox"]:checked) > i { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } &.qc-checkbox-selected > i:after, &:has(input[type="checkbox"]:checked) > i:after { content: '' !important; display: block !important; width: 4px !important; height: 9px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) translate(-1px, -1px) !important; position: static !important; background: transparent !important; box-shadow: none !important; } & > span { flex: 1; line-height: 1.4; } } /* Cart table clean */ & .qc table { width: 100%; border-collapse: collapse; font-size: 14px; } & .qc table td { padding: 12px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle; } & .qc table img { border-radius: var(--radius-sm); max-width: 60px; } /* Totals → right aligned, bold total */ & .qc .qc-totals { text-align: right; } /* Confirm button → big orange */ & .qc .qc-confirm .ve-btn, & .qc #qc_confirm_order { background: var(--color-primary) !important; color: #fff !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: var(--radius-md) !important; min-height: 52px !important; border: none !important; width: 100% !important; &:hover { background: var(--color-primary-hover) !important; } } /* Alerts */ & .qc .alert, & .qc .ve-alert { border-radius: var(--radius-md); font-size: 13px; padding: 12px 16px; } /* Links → orange */ & .qc a { color: var(--color-primary); &:hover { color: var(--color-primary-hover); } } /* Labels */ & .qc label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; } /* Error text red */ & .qc .text-danger, & .qc .ve-field__error { color: var(--color-danger); font-size: 12px; } /* Payment method images */ & .qc .payment-method-image { max-height: 30px; margin-right: 8px; } /* Loading bar → orange */ & .ve-loading-bar, & .qc .ve-loading-bar { background: var(--color-primary) !important; } & .ve-loading-bar__progress, & .qc .ve-loading-bar__progress { background: var(--color-primary) !important; } /* Loading overlay */ & .qc .ve-loading, & .qc .qc-loading { background: rgba(255,255,255,0.8) !important; } /* Region field - ukryty (niepotrzebny w PL/EU) */ & .qc [data-field-name="zone_id"], & .qc .qc-field-zone_id { display: none !important; } } /* ======================================================================== HOMEPAGE SLIDER ======================================================================== */ homepage-slider { display: block; position: relative; max-width: 1366px; margin: var(--space-3) auto 0; overflow: hidden; border-radius: var(--radius-lg); slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } & .slider-slide { flex: 0 0 100%; scroll-snap-align: center; display: block; & img { width: 100%; height: auto; display: block; object-fit: cover; } } slider-dots { display: flex; justify-content: center; gap: 8px; padding: var(--space-3) 0; position: absolute; bottom: 10px; left: 0; right: 0; } & .slider-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: rgba(255,255,255,0.5); border: none; cursor: pointer; transition: background 0.2s, width 0.2s; padding: 0; &.active { background: var(--color-primary); width: 28px; } } } /* ======================================================================== BLOG LATEST - dark cards with overlay ======================================================================== */ blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); @media (min-width: 768px) { & { grid-template-columns: repeat(3, 1fr); } } & .blog-card { display: block; position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: #fff; background: var(--color-dark); & img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, opacity 0.3s; opacity: 0.7; } &:hover img { transform: scale(1.05); opacity: 0.5; } blog-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-2); background: linear-gradient(transparent 30%, rgba(0,0,0,0.8) 100%); @media (min-width: 768px) { & { padding: var(--space-4); } } } & h3 { font-family: var(--font-heading); font-size: 11px; font-weight: 700; line-height: 1.3; margin: 0; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; @media (min-width: 768px) { & { font-size: var(--fs-sm); } } } } } /* ======================================================================== CONTENT SANITIZER - override inline styles from DB content ======================================================================== */ product-tab-body > :not(products-listing) *, product-tab-body > :not(products-listing), category-description *, category-description-bottom *, section-description * { font-family: var(--font-body) !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; background-color: transparent !important; letter-spacing: inherit !important; } .main_description * { font-family: var(--font-body) !important; font-size: inherit !important; line-height: inherit !important; background-color: transparent !important; letter-spacing: inherit !important; } product-tab-body > :not(products-listing) strong, product-tab-body > :not(products-listing) b, product-tab-body > :not(products-listing) h1, product-tab-body > :not(products-listing) h2, product-tab-body > :not(products-listing) h3, product-tab-body > :not(products-listing) h4, .main_description strong, .main_description b, .main_description h1, .main_description h2, .main_description h3, .main_description h4 { font-weight: 700 !important; } product-tab-body > :not(products-listing) a, .main_description a { color: var(--color-primary) !important; } /* Naglowki w tresci zakladek ( opis, FAQ ): edytor zapisuje je jako bezposrednie dzieci product-tab-body, a sanitizer wyzej robi z nich zwykly tekst */ product-tab-body > :not(products-listing):is(h1, h2, h3, h4), product-tab-body > :not(products-listing) :is(h1, h2, h3, h4) { font-family: var(--font-heading) !important; font-weight: 700 !important; color: var(--color-text) !important; line-height: 1.3 !important; margin: var(--space-5) 0 var(--space-2) !important; } product-tab-body > :not(products-listing):is(h1, h2), product-tab-body > :not(products-listing) :is(h1, h2) { font-size: var(--fs-lg) !important; } product-tab-body > :not(products-listing):is(h3, h4), product-tab-body > :not(products-listing) :is(h3, h4) { font-size: var(--fs-md) !important; } product-tab-body > :not(products-listing):is(h1, h2, h3, h4):empty { display: none !important; } product-tab-body > ul, product-tab-body > ol, product-tab-body > :not(products-listing) ul, product-tab-body > :not(products-listing) ol, .main_description ul, .main_description ol { padding-left: 24px !important; margin: 0.5rem 0 1rem !important; } product-tab-body > :not(products-listing) li, .main_description li { list-style: disc !important; margin-bottom: 4px !important; } product-tab-body > ol > li, product-tab-body > :not(products-listing) ol li, .main_description ol li { list-style: decimal !important; } product-tab-body > :not(products-listing) table, .main_description table { border-collapse: collapse !important; border: none !important; } product-tab-body > :not(products-listing) table td, product-tab-body > :not(products-listing) table th, .main_description table td, .main_description table th { background-color: transparent !important; border: none !important; } .main_description table th { background-color: var(--color-bg-alt) !important; } /* paski w tabelach opisu; tabela wartosci je wylacza ( tr:nth-child(n) w bloku product-tab-body ) */ product-tab-body table tr:nth-child(even) { background-color: var(--color-bg-alt) !important; } /* Skladniki ( pole z panelu ) pod tabela wartosci: zwykly tekst o 2 px mniejszy; ta sama specyficznosc co sanitizer wyzej, wiec musi stac po nim */ product-tab-body > product-ingredients { display: block !important; font-size: calc( 1em - 2px ) !important; margin-top: var(--space-4) !important; } product-tab-body > product-ingredients > b:first-child { display: block !important; margin-bottom: var(--space-1) !important; } /* ======================================================================== SIDEBAR CART - cart-product styling ======================================================================== */ cart-product { display: grid; grid-template-columns: 55px 1fr auto auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); & > a { grid-row: 1; grid-column: 1; & img { width: 55px; height: auto; border-radius: 4px; } } & > div { grid-row: 1; grid-column: 2 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2); min-width: 0; } & product-name { display: block; font-size: 13px; line-height: 1.3; color: var(--color-text); overflow: hidden; & manufacturer-name { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); padding: 0; margin-bottom: 1px; } } & product-bottom { display: contents; } & product-bottom form { display: contents; } & product-price { white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--color-primary); } } qty-control { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; & .qty-btn { width: 30px; height: 30px; border: none; background: var(--color-bg-alt); font-size: 16px; font-weight: 700; color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; &:hover { background: var(--color-primary-light); color: var(--color-primary); } } & .qty-input { width: 36px; height: 30px; text-align: center; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); font-size: 13px; font-weight: 600; font-family: var(--font-body); color: var(--color-text); background: #fff; -moz-appearance: textfield; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; } } & .qty-btn[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } & .qty-remove { width: 30px; height: 30px; border: none; background: none; font-size: 18px; color: var(--color-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 4px; border-radius: 4px; transition: all 0.15s; &:hover { color: var(--color-danger); background: #FFF3F3; } } } /* ======================================================================== D_QUICKCHECKOUT CART - product names + manufacturer ======================================================================== */ .qc .qc-name a, .qc label a, .qc table a { color: var(--color-text) !important; text-decoration: none !important; font-weight: 600 !important; } .qc .qc-name a:hover, .qc table a:hover { color: var(--color-primary) !important; } /* Tabular figures: rowne szerokosci cyfr w cenach i tabelach skladu (Inter/Hanken) */ product-price, price-normal, price-special, price-old, .price, .total, product-tab-body table td, .qc-checkout-product td { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }