/* ========================================================================== POLNIER — style motywu Kolory i wymiary 1:1 z makiety (kontener 1320 px, Manrope + IBM Plex Mono). ========================================================================== */ :root { --pn-accent: #C1502A; --pn-accent-h: #A34121; --pn-ink: #1E2226; --pn-body: #5A6068; --pn-muted: #8A9099; --pn-faint: #A5ABB2; --pn-line: #E4E6E8; --pn-line-2: #ECEDEF; --pn-line-3: #E7E8EA; --pn-bg: #F0F1F2; --pn-bg-2: #F7F8F9; --pn-ok: #2E7D5B; --pn-foot: #1A1D21; --pn-wrap: 1320px; --pn-pad: 32px; --pn-header-h: 88px; --pn-font: "Manrope", Helvetica, Arial, sans-serif; --pn-mono: "IBM Plex Mono", ui-monospace, monospace; --pn-shadow: 0 10px 26px rgba(30, 34, 38, .09); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pn-header-h) + 16px); } body { margin: 0; background: #fff; font-family: var(--pn-font); font-size: 15px; line-height: 1.6; color: var(--pn-body); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } a { color: var(--pn-accent); text-decoration: none; transition: color .15s, background-color .15s, border-color .15s, box-shadow .2s; } a:hover { color: var(--pn-accent-h); } h1, h2, h3, h4 { color: var(--pn-ink); margin: 0; line-height: 1.2; } p { margin: 0 0 1em; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: var(--pn-ink); } :focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 2px; } .pn-ic { display: block; flex: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .pn-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--pn-ink); color: #fff; padding: 10px 16px; font-weight: 700; } .pn-skip:focus { top: 12px; color: #fff; } .pn-anchor { display: block; position: relative; top: -120px; } .pn-wrap { max-width: var(--pn-wrap); margin-left: auto; margin-right: auto; padding-left: var(--pn-pad); padding-right: var(--pn-pad); } .pn-main { display: block; min-height: 40vh; } .pn-sec { padding-top: 72px; } .pn-sec--s { padding-top: 56px; } .pn-dot { color: #D5D8DB; } /* Typografia sekcji ------------------------------------------------------ */ .pn-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 18px; } .pn-h2--sm { font-size: 26px; margin: 0; } .pn-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .pn-eyebrow__line { width: 22px; height: 2px; background: var(--pn-accent); display: block; } .pn-eyebrow__t { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--pn-accent); text-transform: uppercase; } .pn-more { font-size: 13.5px; font-weight: 700; color: var(--pn-accent); white-space: nowrap; } .pn-sechead { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .pn-sechead--end { align-items: flex-end; margin-bottom: 32px; } .pn-sechead .pn-h2 { margin: 0; } .pn-sechead__sub { margin: 8px 0 0; font-size: 13.5px; color: var(--pn-muted); } .pn-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--pn-muted); text-transform: uppercase; margin: 36px 0 12px; } .pn-muted-note { font-size: 13.5px; line-height: 1.7; color: var(--pn-muted); margin: 32px 0 0; } .pn-empty { padding: 48px 0; font-size: 15px; } /* Przyciski --------------------------------------------------------------- */ .pn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 16px 26px; border-radius: 3px; border: 1px solid transparent; line-height: 1.2; text-align: center; } .pn-btn__arr { font-weight: 400; } .pn-btn--primary { background: var(--pn-accent); color: #fff; } .pn-btn--primary:hover { background: var(--pn-accent-h); color: #fff; } .pn-btn--dark { background: var(--pn-ink); color: #fff; } .pn-btn--dark:hover { background: var(--pn-accent); color: #fff; } .pn-btn--outline { background: #fff; color: var(--pn-ink); border-color: #D5D8DB; } .pn-btn--outline:hover { border-color: var(--pn-ink); color: var(--pn-ink); } .pn-btn--ghost { background: rgba(255, 255, 255, .7); color: var(--pn-ink); border-color: #C6CACE; border-radius: 2px; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; padding: 16px 28px; } .pn-btn--ghost:hover { border-color: var(--pn-ink); color: var(--pn-ink); } .pn-btn--sm { font-size: 11.5px; padding: 12px 18px; } /* ========================================================================== Pasek górny i nagłówek ========================================================================== */ .pn-topbar { background: var(--pn-bg); color: var(--pn-ink); font-size: 12px; font-weight: 500; } .pn-topbar__in { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .pn-topbar__l, .pn-topbar__r { display: flex; align-items: center; gap: 28px; } .pn-topbar__a { display: inline-flex; align-items: center; gap: 9px; color: var(--pn-ink); font-weight: 600; white-space: nowrap; } .pn-topbar__a:hover { color: var(--pn-accent); } .pn-topbar__a--strong { font-weight: 700; } .pn-langs { display: flex; align-items: center; gap: 14px; font-size: 12px; } .pn-langs__a { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-weight: 600; opacity: .7; } .pn-langs__a:hover, .pn-langs__a.is-current { opacity: 1; color: inherit; } .pn-langs__a.is-current { font-weight: 800; } .pn-langs--top { padding-left: 20px; border-left: 1px solid #D5D8DB; gap: 10px; } .pn-flag { width: 18px; height: 12px; display: block; flex: none; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } .pn-flag--pl { background: linear-gradient(180deg, #fff 50%, #D4213D 50%); } .pn-flag--de { background: linear-gradient(180deg, #1A1A1A 33.3%, #D4213D 33.3% 66.6%, #E6B31E 66.6%); } .pn-flag--en { background: #012169; } .pn-flag--en::before, .pn-flag--en::after { content: ""; position: absolute; background: #fff; } .pn-flag--en::before { left: 0; right: 0; top: 4px; height: 4px; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff; background: linear-gradient(#fff 0 25%, #C8102E 25% 75%, #fff 75%); } .pn-flag--en::after { top: 0; bottom: 0; left: 7px; width: 4px; background: linear-gradient(90deg, #fff 0 25%, #C8102E 25% 75%, #fff 75%); } .pn-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--pn-line); transition: box-shadow .2s; } .admin-bar .pn-header { top: 32px; } .pn-header.is-stuck { box-shadow: 0 6px 20px rgba(30, 34, 38, .06); } .pn-header__in { height: var(--pn-header-h); display: flex; align-items: center; gap: 24px; } .pn-logo { flex: none; display: block; } .pn-logo__img { height: 46px; width: auto; } .pn-drawer { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 24px; } .pn-drawer__extra { display: none; } .pn-nav { order: 1; flex: none; } .pn-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 20px; } .pn-nav__item { position: static; display: flex; align-items: center; } .pn-nav__link { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--pn-ink); white-space: nowrap; height: var(--pn-header-h); } .pn-nav__link:hover, .pn-nav__item.is-current > .pn-nav__link { color: var(--pn-accent); } .pn-nav__caret { color: var(--pn-muted); font-size: 9px; transition: transform .2s; } .pn-nav__toggle { display: none; } .pn-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--pn-line); box-shadow: 0 18px 34px rgba(30, 34, 38, .08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s .18s; } .pn-mega__grid { padding-top: 32px; padding-bottom: 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .pn-nav__item.has-kids:hover > .pn-mega, .pn-nav__item.has-kids:focus-within > .pn-mega, .pn-nav__item.is-open > .pn-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; } .pn-nav__item.has-kids:hover .pn-nav__caret { transform: rotate(180deg); } .pn-mega__a { display: block; color: var(--pn-body); } .pn-mega__t { display: block; font-size: 15px; font-weight: 700; color: var(--pn-ink); margin-bottom: 6px; } .pn-mega__d { display: block; font-size: 13px; line-height: 1.6; } .pn-mega__a:hover .pn-mega__t, .pn-mega__item.is-current .pn-mega__t { color: var(--pn-accent); } .pn-mega__sub { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; } .pn-mega__sub a { color: var(--pn-body); } .pn-mega__sub a:hover { color: var(--pn-accent); } .pn-search { order: 2; flex: 1 1 200px; min-width: 0; max-width: 260px; margin-left: auto; height: 42px; border: 1px solid var(--pn-line); border-radius: 21px; display: flex; align-items: center; padding: 0 5px 0 18px; background: #FAFBFB; } .pn-search:focus-within { border-color: #C6CACE; background: #fff; } .pn-search__in { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 13.5px; outline: none; padding: 0; height: 100%; -webkit-appearance: none; appearance: none; } .pn-search__in::placeholder { color: #9AA1AB; } .pn-search__in::-webkit-search-cancel-button { display: none; } .pn-search__btn { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--pn-line); display: flex; align-items: center; justify-content: center; color: var(--pn-body); flex: none; padding: 0; } .pn-search__btn:hover { border-color: var(--pn-accent); color: var(--pn-accent); } .pn-search--big { max-width: 520px; height: 52px; border-radius: 26px; margin: 0 auto 28px; } .pn-search--big .pn-search__btn { width: 40px; height: 40px; } .pn-hicons { display: flex; align-items: center; gap: 20px; flex: none; } .pn-hicon { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--pn-body); position: relative; } .pn-hicon:hover { color: var(--pn-accent); } .pn-hicon__l { font-size: 11px; line-height: 1; white-space: nowrap; } .pn-cart-count { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--pn-accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Licznik liczony od środka ikony, a nie od szerokości podpisu („Cart” / „Warenkorb”) – zawsze w prawym górnym rogu koszyka. */ .pn-hicon--cart .pn-cart-count { right: auto; left: calc(50% + 4px); } .pn-cart-count.is-empty { background: #B9BEC3; } .pn-burger { display: none; background: none; border: 0; padding: 6px; color: var(--pn-ink); } .pn-burger__close { display: none; } /* ========================================================================== Okruszki, nagłówki podstron ========================================================================== */ .pn-crumbs { border-bottom: 1px solid var(--pn-line-2); } .pn-crumbs__list { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--pn-muted); } .pn-crumbs__list li { display: flex; align-items: center; gap: 10px; } .pn-crumbs__list li + li::before { content: "›"; color: #D5D8DB; } .pn-crumbs__list a { color: var(--pn-muted); } .pn-crumbs__list a:hover { color: var(--pn-ink); } .pn-crumbs__list [aria-current] { color: var(--pn-ink); font-weight: 600; } .pn-crumbs .pn-wrap { padding-top: 0; padding-bottom: 0; } .pn-phead { padding-top: 44px; padding-bottom: 8px; } .pn-phead--flush { padding-left: 0; padding-right: 0; padding-top: 32px; } .pn-phead__h { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .pn-phead__lead { margin: 16px 0 0; font-size: 16px; max-width: 46em; } /* ========================================================================== Strona główna ========================================================================== */ .pn-hero { background: var(--pn-bg); overflow: hidden; } .pn-hero__in { max-width: var(--pn-wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 560px; } .pn-hero__txt { padding: 72px 56px 72px var(--pn-pad); display: flex; flex-direction: column; justify-content: center; } .pn-hero__h { margin: 0 0 22px; letter-spacing: -.03em; line-height: 1.02; font-size: 62px; } .pn-hero__l1 { display: block; font-weight: 800; color: var(--pn-ink); } .pn-hero__l2 { display: block; font-weight: 300; color: var(--pn-muted); } .pn-hero__p { font-size: 16px; line-height: 1.65; margin: 0 0 40px; max-width: 26em; } .pn-hero__usps { list-style: none; margin: 0; padding: 0 0 36px; display: flex; flex-wrap: wrap; gap: 20px 34px; border-bottom: 1px solid #DFE1E3; } .pn-hero__usps li { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .pn-hero__usps strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--pn-ink); } .pn-hero__usps small { display: block; font-size: 12.5px; } .pn-ring { width: 34px; height: 34px; border: 1px solid #C6CACE; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pn-ink); } .pn-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .pn-hero__btns .pn-btn { padding: 17px 26px; } .pn-hero__media { position: relative; background: var(--pn-ink); min-height: 560px; overflow: hidden; margin-right: calc(-1 * max(0px, (100vw - var(--pn-wrap)) / 2)); } .pn-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pn-catbar-wrap { position: relative; z-index: 20; } .pn-catbar { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border: 1px solid var(--pn-line); background: #fff; margin-top: -34px; box-shadow: 0 14px 34px rgba(30, 34, 38, .10); } .pn-catbar__a { padding: 24px 20px; border-right: 1px solid var(--pn-line); display: flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 600; color: var(--pn-ink); line-height: 1.35; } .pn-catbar__a:last-child { border-right: 0; } .pn-catbar__a:hover { background: #FAFBFB; color: var(--pn-accent); } .pn-catbar__ic { color: #6B7480; width: 27px; height: 27px; } .pn-catbar__a:hover .pn-catbar__ic { color: var(--pn-accent); } .pn-about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 76px; } .pn-about .pn-h2 { font-size: 32px; line-height: 1.18; margin-bottom: 22px; } .pn-about__p { font-size: 15.5px; line-height: 1.75; } .pn-about__p p { margin: 0 0 16px; } .pn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 0; margin: 18px 0 0; border-top: 1px solid var(--pn-line); border-bottom: 1px solid var(--pn-line); } .pn-stats dt { font-size: 26px; font-weight: 800; color: var(--pn-ink); letter-spacing: -.02em; line-height: 1.2; } .pn-stats dd { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; } .pn-about__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .pn-about__btns:empty { display: none; } .pn-about__gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 14px; height: 500px; } .pn-about__gal > div { overflow: hidden; background: #E8EAEC; } .pn-about__gal img { width: 100%; height: 100%; object-fit: cover; } .pn-about__big { grid-row: span 2; } .pn-best { padding-top: 64px; } .pn-best__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } /* Mała karta (strona główna) */ .pn-mcard { border: 1px solid var(--pn-line); background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s; } .pn-mcard:hover { box-shadow: var(--pn-shadow); } .pn-mcard__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: block; background: #fff; } .pn-mcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; } .pn-mcard__body { padding: 18px; border-top: 1px solid var(--pn-line); display: flex; flex-direction: column; flex: 1; } .pn-mcard__sku { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--pn-muted); margin-bottom: 8px; text-transform: uppercase; } .pn-mcard__t { font-size: 14.5px; font-weight: 700; line-height: 1.4; min-height: 60px; } .pn-mcard__t a { color: var(--pn-ink); } .pn-mcard__t a:hover { color: var(--pn-accent); } .pn-mcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; } .pn-mcard__go { width: 36px; height: 36px; border: 1px solid var(--pn-line); border-radius: 3px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pn-body); } .pn-mcard__go:hover { background: var(--pn-accent); border-color: var(--pn-accent); color: #fff; } .pn-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--pn-accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; text-transform: uppercase; line-height: 1.3; } .pn-badge--order { background: var(--pn-ink); } .pn-badge--new { background: var(--pn-ok); } /* Ceny */ .pn-price { color: var(--pn-ink); } .pn-price .woocommerce-Price-amount { white-space: nowrap; } .pn-price__from { font-size: 11.5px; color: var(--pn-muted); margin-bottom: 3px; font-weight: 500; } .pn-price__row { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 7px; } .pn-price__v { font-weight: 800; letter-spacing: -.02em; } .pn-price__net { font-size: 12.5px; font-weight: 700; } .pn-price__old { color: var(--pn-faint); font-size: .72em; font-weight: 600; } .pn-price__req { font-weight: 800; color: var(--pn-ink); } .pn-price--mini .pn-price__v { font-size: 17px; } .pn-price--mini .pn-price__req { font-size: 14px; } .pn-price--card { margin-top: 16px; } .pn-price--card .pn-price__v { font-size: 22px; } .pn-price--card .pn-price__req { font-size: 16px; } .pn-price--card .pn-price__from { display: inline; } .pn-price--single { margin-top: 4px; } .pn-price--single .pn-price__v { font-size: 40px; letter-spacing: -.03em; line-height: 1; } .pn-price--single .pn-price__net { font-size: 15px; } .pn-price--single .pn-price__req { font-size: 26px; } .pn-price--single .pn-price__from { display: inline; font-size: 13px; } .pn-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pn-muted); flex-wrap: wrap; } .pn-stock .pn-ic { color: var(--pn-ok); } .pn-stock__s { font-weight: 600; color: var(--pn-ok); } .pn-stock.is-order .pn-ic, .pn-stock.is-order .pn-stock__s { color: #B7791F; } .pn-stock.is-out .pn-ic, .pn-stock.is-out .pn-stock__s { color: var(--pn-muted); } /* Produkcja na wymiar */ .pn-custom { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: var(--pn-ink); position: relative; } .pn-custom__txt { padding: 52px 48px; } .pn-custom__h { font-size: 30px; font-weight: 700; color: #fff; margin: 0 0 26px; line-height: 1.22; letter-spacing: -.02em; } .pn-custom__media { position: relative; min-height: 380px; background: #F4F5F6; } .pn-custom__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pn-custom__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pn-ink) 0%, rgba(30, 34, 38, 0) 26%); pointer-events: none; } .pn-custom__badge { position: absolute; left: -46px; bottom: 46px; width: 92px; height: 92px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--pn-ink); line-height: 1.4; z-index: 3; text-transform: uppercase; padding: 8px; } .pn-ticks { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pn-ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; } .pn-ticks li::before { content: "✓"; color: var(--pn-accent); font-weight: 800; flex: none; } .pn-ticks--light li { color: #D2D6DA; } .pn-ticks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; } .pn-ticks--grid li { padding: 12px 0; border-bottom: 1px solid var(--pn-line-2); line-height: 1.5; color: var(--pn-body); } /* Pasek zaufania */ .pn-trust { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-top: 68px; } .pn-trust__i { display: flex; gap: 14px; align-items: flex-start; } .pn-trust__ic { color: var(--pn-accent); margin-top: 2px; width: 30px; height: 30px; } .pn-trust strong { display: block; font-size: 13px; font-weight: 700; color: var(--pn-ink); margin-bottom: 4px; line-height: 1.35; } .pn-trust p { margin: 0; font-size: 12px; line-height: 1.5; } /* Katalog */ .pn-catalog { position: relative; overflow: hidden; background: #EDEEF0; min-height: 620px; } .pn-catalog__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; } .pn-catalog::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(240, 241, 242, .97) 0%, rgba(240, 241, 242, .9) 34%, rgba(240, 241, 242, .4) 54%, rgba(240, 241, 242, 0) 70%); pointer-events: none; } .pn-catalog__txt { position: relative; z-index: 2; padding: 68px 56px; max-width: 660px; } .pn-catalog__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--pn-accent); margin-bottom: 22px; text-transform: uppercase; } .pn-catalog__h { font-size: 46px; font-weight: 800; margin: 0 0 26px; line-height: 1.08; letter-spacing: -.03em; } .pn-catalog__bar { width: 54px; height: 3px; background: var(--pn-accent); display: block; margin-bottom: 26px; } .pn-catalog__p { font-size: 15.5px; line-height: 1.75; color: #4A5057; margin: 0 0 40px; max-width: 32em; } .pn-catalog__feats { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pn-catalog__feats li { display: flex; flex-direction: column; gap: 16px; padding: 0 18px; border-left: 1px solid #D8DBDE; color: var(--pn-accent); } .pn-catalog__feats li:first-child { padding-left: 0; border-left: 0; } .pn-catalog__feats span { font-size: 12.5px; line-height: 1.6; color: #4A5057; } .pn-catalog__btns { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; margin-bottom: 22px; } .pn-dlbtn { display: inline-flex; align-items: center; gap: 16px; background: var(--pn-accent); color: #fff; padding: 16px 28px; border-radius: 2px; } .pn-dlbtn:hover { background: var(--pn-accent-h); color: #fff; } .pn-dlbtn strong { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .pn-dlbtn small { display: block; font-size: 12.5px; font-weight: 500; opacity: .9; margin-top: 3px; } .pn-catalog__note { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #6B7480; } /* FAQ */ .pn-faqsec { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; } .pn-faqaside .pn-h2 { margin-bottom: 18px; } .pn-faqaside__t { font-size: 14.5px; line-height: 1.7; margin: 0 0 24px; } .pn-faqaside__phone { display: block; font-size: 15px; font-weight: 800; color: var(--pn-ink); } .pn-faqaside__hours { font-size: 13px; color: var(--pn-muted); margin-top: 6px; } .pn-faq { border-top: 1px solid var(--pn-line); } .pn-faq__item { border-bottom: 1px solid var(--pn-line); } .pn-faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--pn-ink); line-height: 1.45; } .pn-faq__q::-webkit-details-marker { display: none; } .pn-faq__q:hover { color: var(--pn-accent); } .pn-faq__sign { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pn-line); flex: none; position: relative; } .pn-faq__sign::before, .pn-faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--pn-accent); transform: translate(-50%, -50%); transition: transform .2s; } .pn-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); } .pn-faq__item[open] .pn-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); } .pn-faq__a { font-size: 14.5px; line-height: 1.75; max-width: 60em; padding: 0 0 22px; margin-top: -8px; } .pn-faq__a p { margin: 0; } /* Blog */ .pn-blogsec { padding-top: 76px; } .pn-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .pn-posts--list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .pn-post { border: 1px solid var(--pn-line); background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s; } .pn-post:hover { box-shadow: var(--pn-shadow); } .pn-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EDEEF0; } .pn-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .pn-post:hover .pn-post__media img { transform: scale(1.03); } .pn-post__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #B9BEC3; } .pn-post__body { padding: 20px; border-top: 1px solid var(--pn-line); display: flex; flex-direction: column; flex: 1; } .pn-post__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11.5px; color: var(--pn-muted); } .pn-post__cat { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--pn-accent); text-transform: uppercase; } .pn-post__sep { width: 1px; height: 10px; background: var(--pn-line); display: block; } .pn-post__t { font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; } .pn-post__t a { color: var(--pn-ink); } .pn-post__t a:hover { color: var(--pn-accent); } .pn-post__ex { font-size: 13px; line-height: 1.65; margin: 0 0 18px; } .pn-post__more { font-size: 13px; font-weight: 700; color: var(--pn-accent); margin-top: auto; } /* Tekst SEO */ .pn-seo { margin-top: 72px; } .pn-seo__h { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 24px; padding-top: 40px; border-top: 1px solid var(--pn-line); } .pn-seo__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; font-size: 13.5px; line-height: 1.8; } .pn-seo__col p { margin: 0 0 18px; } .pn-seo__col strong { color: var(--pn-ink); font-weight: 700; } .pn-seo__col h3 { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--pn-ink); margin: 0 0 12px; } /* ========================================================================== Stopka ========================================================================== */ .pn-foot { background: var(--pn-foot); color: #9AA1AB; margin-top: 56px; font-size: 13px; } .pn-foot a { color: #9AA1AB; } .pn-foot a:hover { color: #fff; } .pn-foot a.pn-btn--primary, .pn-foot a.pn-btn--primary:hover { color: #fff; } .pn-foot__cta { border-bottom: 1px solid #2B2F33; } .pn-foot__cta-in { padding-top: 34px; padding-bottom: 34px; display: flex; align-items: center; justify-content: space-between; gap: 32px 40px; flex-wrap: wrap; } .pn-foot__cta-l { display: flex; align-items: center; gap: 18px; } .pn-foot__ring { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #3A3F44; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pn-accent); } .pn-foot__ring--sm { width: 32px; height: 32px; color: #9AA1AB; } .pn-foot__cta-t { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 5px; } .pn-foot__cta-s { font-size: 13.5px; } .pn-foot__cta-r { display: flex; align-items: center; gap: 24px 34px; flex-wrap: wrap; } .pn-foot__contact { display: flex; align-items: center; gap: 12px; } .pn-foot__contact strong { display: block; font-size: 14px; font-weight: 700; color: #fff; } .pn-foot__contact small { display: block; font-size: 12px; color: #9AA1AB; } .pn-foot__cols { padding-top: 56px; padding-bottom: 40px; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; } .pn-foot__brand .pn-logo__img { margin-bottom: 22px; } .pn-foot__about { line-height: 1.7; margin: 0 0 20px; } .pn-foot__addr { font-size: 12.5px; line-height: 1.7; margin: 0; } .pn-foot__h { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #fff; margin-bottom: 18px; text-transform: uppercase; } .pn-foot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .pn-foot__list--icons { gap: 13px; } .pn-foot__list--icons a, .pn-foot__list--icons span { display: flex; align-items: center; gap: 10px; } .pn-foot__list--icons .pn-ic { color: #6B7480; } .pn-foot__list--icons .pn-foot__addr-li { align-items: flex-start; line-height: 1.6; } .pn-foot__list--icons .pn-foot__addr-li .pn-ic { flex: 0 0 auto; margin-top: 3px; } .pn-foot__list--icons .pn-foot__addr-li > span { display: block; } .pn-foot__more { display: inline-block; margin-top: 11px; color: #fff !important; border-bottom: 1px solid #3A3F44; padding-bottom: 3px; } .pn-foot__col .pn-btn { margin-top: 20px; color: #fff; } .pn-socials { display: flex; gap: 10px; margin-top: 22px; } .pn-social { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3A3F44; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .pn-foot .pn-social:hover { border-color: var(--pn-accent); color: var(--pn-accent); } .pn-foot__bottom { border-top: 1px solid #2B2F33; } .pn-foot__bottom-in { padding-top: 24px; padding-bottom: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: center; } .pn-foot__label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #6B7480; margin-bottom: 14px; text-transform: uppercase; } .pn-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pn-pay__i { height: 30px; background: #fff; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; flex: none; } .pn-pay__visa { font-size: 15px; font-weight: 800; font-style: italic; color: #1A1F71; } .pn-pay__mc { gap: 7px; font-size: 10.5px; font-weight: 600; color: #231F20; } .pn-pay__circles { position: relative; width: 26px; height: 17px; display: block; } .pn-pay__circles span { position: absolute; top: 0; width: 17px; height: 17px; border-radius: 50%; } .pn-pay__circles span:first-child { left: 0; background: #EB001B; } .pn-pay__circles span:last-child { right: 0; background: #F79E1B; opacity: .9; } .pn-pay__pp { font-size: 13.5px; font-weight: 800; font-style: italic; color: #253B80; } .pn-pay__pp span { color: #179BD7; } .pn-pay__stripe { background: #635BFF; color: #fff; font-size: 13px; font-weight: 700; padding: 0 12px; } .pn-langs--foot { gap: 18px; font-size: 12.5px; } .pn-langs--foot .pn-langs__a { color: #9AA1AB; opacity: 1; font-weight: 500; } .pn-langs--foot .pn-langs__a.is-current, .pn-langs--foot .pn-langs__a:hover { color: #fff; } .pn-foot__legal { text-align: right; font-size: 12px; } .pn-foot__legal > div { margin-bottom: 12px; } .pn-foot__legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; } .pn-foot__legal-list li + li::before { content: "|"; color: #3A3F44; margin-right: 18px; } /* ========================================================================== Sklep – listing ========================================================================== */ .pn-shop { padding-top: 32px; padding-bottom: 16px; } .pn-banner { position: relative; background: var(--pn-ink); overflow: hidden; min-height: 400px; display: flex; align-items: center; } .pn-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; } .pn-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(22, 25, 28, .96) 0%, rgba(22, 25, 28, .9) 34%, rgba(22, 25, 28, .4) 66%, rgba(22, 25, 28, .12) 100%); } .pn-banner__txt { position: relative; z-index: 2; padding: 64px 56px; max-width: 580px; } .pn-banner__h { font-size: 46px; font-weight: 800; color: #fff; margin: 0 0 20px; letter-spacing: -.03em; line-height: 1.08; } .pn-banner__p { font-size: 15.5px; line-height: 1.75; color: #B9BEC3; margin: 0 0 40px; max-width: 460px; } .pn-banner__hl { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px 32px; flex-wrap: wrap; } .pn-banner__hl li { display: flex; align-items: center; gap: 12px; color: var(--pn-accent); } .pn-banner__hl strong { display: block; font-size: 13px; font-weight: 700; color: #fff; } .pn-banner__hl small { display: block; font-size: 12px; color: var(--pn-muted); margin-top: 3px; } .pn-shop__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px 56px; align-items: start; margin-top: 56px; } .pn-side__h { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--pn-muted); margin-bottom: 12px; padding-left: 18px; text-transform: uppercase; } .pn-side__list, .pn-side__sub { list-style: none; margin: 0; padding: 0; } .pn-side__list > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-size: 14px; color: var(--pn-body); border-left: 2px solid transparent; } .pn-side__list > li > a:hover { color: var(--pn-ink); background: #FBFBFC; } .pn-side__list > li.is-active > a { font-weight: 700; color: var(--pn-ink); background: var(--pn-bg-2); border-left-color: var(--pn-accent); } .pn-side__list > li.is-active > a span { color: var(--pn-accent); } .pn-side__sub { padding: 6px 0 10px 18px; } .pn-side__sub a { display: block; padding: 8px 18px; font-size: 13.5px; color: var(--pn-body); border-left: 1px solid var(--pn-line); } .pn-side__sub li.is-active a, .pn-side__sub a:hover { color: var(--pn-accent); border-left-color: var(--pn-accent); } .pn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--pn-line-2); flex-wrap: wrap; } .pn-toolbar__count { font-size: 13px; color: var(--pn-muted); } .pn-toolbar__count strong { color: var(--pn-ink); } .pn-toolbar__r { display: flex; align-items: center; gap: 20px; } .pn-toolbar__sep { width: 1px; height: 16px; background: var(--pn-line-2); display: block; } .pn-sort { display: flex; align-items: center; gap: 8px; } .pn-sort__l { font-size: 12.5px; color: var(--pn-muted); } .pn-sort form { margin: 0; } .pn-sort select { border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23A5ABB2'/%3E%3C/svg%3E") no-repeat right center / 8px; font-size: 12.5px; font-weight: 700; color: var(--pn-ink); padding: 4px 16px 4px 0; -webkit-appearance: none; appearance: none; cursor: pointer; } .pn-view { display: flex; gap: 12px; } .pn-view__b { background: none; border: 0; padding: 0; color: #B9BEC3; display: flex; } .pn-view__b.is-active, .pn-view__b:hover { color: var(--pn-accent); } .pn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; align-items: stretch; } .pn-shop__main .pn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1280px) { .pn-shop__main .pn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pn-listing .pn-grid { margin-top: 28px; } /* Karta produktu na liście */ .pn-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--pn-line-2); padding: 8px 18px 18px; background: #fff; transition: box-shadow .2s; } .pn-card:hover { box-shadow: 0 10px 30px rgba(30, 34, 38, .09); } .pn-card__media { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pn-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s; } .pn-card:hover .pn-card__media img { transform: scale(1.05); } .pn-card__media .pn-badge { top: 10px; left: 0; } .pn-card__body { padding-top: 14px; display: flex; flex-direction: column; flex: 1; } .pn-card__t { font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; min-height: 74px; } .pn-card__t a { color: var(--pn-ink); } .pn-card__t a:hover { color: var(--pn-accent); } .pn-card__dims { font-family: var(--pn-mono); font-size: 13px; color: var(--pn-ink); margin-top: 2px; } .pn-card__sku { font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--pn-accent); margin: 6px 0 4px; } .pn-card__excerpt { display: none; } .pn-card__stock { margin: 9px 0 18px; } .pn-card__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--pn-line-3); padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--pn-ink); margin-top: auto; } .pn-card__btn span { font-weight: 400; color: var(--pn-muted); } .pn-card__btn:hover { border-color: var(--pn-ink); color: var(--pn-ink); } /* Widok listy */ .pn-grid.is-list { grid-template-columns: 1fr !important; gap: 16px; } .pn-grid.is-list .pn-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 14px 24px 14px 14px; } .pn-grid.is-list .pn-card__media { height: 180px; } .pn-grid.is-list .pn-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto auto auto 1fr; column-gap: 28px; padding-top: 6px; } .pn-grid.is-list .pn-card__t, .pn-grid.is-list .pn-card__dims, .pn-grid.is-list .pn-card__sku, .pn-grid.is-list .pn-card__excerpt { grid-column: 1; } .pn-grid.is-list .pn-card__t { min-height: 0; margin-bottom: 4px; } .pn-grid.is-list .pn-card__excerpt { display: block; font-size: 13.5px; line-height: 1.65; margin-top: 12px; } .pn-grid.is-list .pn-price, .pn-grid.is-list .pn-card__stock, .pn-grid.is-list .pn-card__btn { grid-column: 2; } .pn-grid.is-list .pn-price { grid-row: 1; margin-top: 0; } .pn-grid.is-list .pn-card__stock { grid-row: 2; margin: 8px 0 14px; } .pn-grid.is-list .pn-card__btn { grid-row: 3; margin-top: 0; } .pn-ctabar { background: var(--pn-bg-2); margin-top: 48px; padding: 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; } .pn-ctabar__t { font-size: 20px; font-weight: 800; color: var(--pn-ink); letter-spacing: -.02em; margin-bottom: 8px; } .pn-ctabar__x { font-size: 14px; line-height: 1.65; max-width: 44em; } .pn-ctabar .pn-btn { flex: none; text-transform: none; font-size: 13.5px; font-weight: 800; letter-spacing: 0; padding: 17px 30px; border-radius: 0; } .pn-pages { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; } .pn-pages .page-numbers { min-width: 34px; height: 34px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; color: var(--pn-body); } .pn-pages a.page-numbers:hover { color: var(--pn-ink); } .pn-pages .page-numbers.current { background: var(--pn-accent); color: #fff; font-weight: 700; } .pn-pages .page-numbers.dots { color: #C6CACE; } .pn-pages .prev, .pn-pages .next { font-size: 15px; } .pn-catseo { margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--pn-line-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .pn-catseo--one { display: block; max-width: 900px; } .pn-catseo__h { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; } .pn-catseo__t { font-size: 14px; line-height: 1.75; } .pn-catseo__t p { margin: 0 0 12px; } .pn-catfaq { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--pn-line-2); display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; } .pn-catfaq .pn-h2 { font-size: 24px; margin-bottom: 12px; } .pn-faqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; } .pn-faqgrid__item { padding: 18px 0; border-bottom: 1px solid var(--pn-line-2); } .pn-faqgrid__q { font-size: 15px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; } .pn-faqgrid__a { font-size: 13.5px; line-height: 1.7; } .pn-faqgrid__a p { margin: 0; } /* ========================================================================== Karta produktu ========================================================================== */ .pn-product { padding-top: 44px; padding-bottom: 32px; } .pn-product__top { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 64px; align-items: start; } .pn-gallery__main { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; } .pn-gallery__link { display: flex; align-items: center; justify-content: center; width: 86%; cursor: zoom-in; } .pn-gallery__img { width: 100%; max-height: 440px; object-fit: contain; } .pn-gallery__zoom { position: absolute; top: 4px; right: 4px; background: none; border: 0; color: var(--pn-muted); padding: 4px; } .pn-gallery__zoom:hover { color: var(--pn-accent); } .pn-gallery__main .pn-badge { top: 0; left: 0; } .pn-gallery__nav { display: flex; align-items: center; gap: 16px; margin-top: 34px; } .pn-gallery__arr { background: none; border: 0; font-size: 19px; color: #B9BEC3; flex: none; line-height: 1; padding: 4px; } .pn-gallery__arr:hover { color: var(--pn-ink); } .pn-gallery__thumbs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .pn-gallery__thumbs::-webkit-scrollbar { display: none; } .pn-gallery__thumb { height: 86px; display: flex; align-items: center; justify-content: center; padding: 6px; background: none; border: 0; border-bottom: 2px solid transparent; } .pn-gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .55; transition: opacity .15s; } .pn-gallery__thumb.is-active { border-bottom-color: var(--pn-accent); } .pn-gallery__thumb.is-active img, .pn-gallery__thumb:hover img { opacity: 1; } .pn-buy { display: flex; flex-direction: column; } .pn-buy__h { font-size: 33px; font-weight: 800; margin: 0 0 10px; line-height: 1.18; letter-spacing: -.025em; } .pn-buy__sku { font-size: 20px; line-height: 1.3; color: var(--pn-muted); margin-bottom: 22px; } .pn-buy__sku span { color: var(--pn-accent); font-weight: 600; } .pn-buy__lead { font-size: 15px; line-height: 1.65; margin: 0 0 34px; max-width: 30em; } .pn-buy__lead p { margin: 0 0 8px; } .pn-buy__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--pn-muted); margin-top: 12px; } .pn-buy__meta .pn-stock { font-size: 13px; } .pn-buy__meta .pn-stock__s { font-weight: 700; } .pn-buy__cart { margin-top: 34px; } .pn-buy__cart:empty { display: none; } .pn-buy__cart form.cart { display: flex; gap: 12px; margin: 0; flex-wrap: wrap; } .pn-buy__cart form.variations_form { display: block; } .pn-buy__cart .variations { width: 100%; border-collapse: collapse; margin: 0 0 18px; } .pn-buy__cart .variations th, .pn-buy__cart .variations td { text-align: left; padding: 8px 0; vertical-align: middle; } .pn-buy__cart .variations th { font-size: 13px; color: var(--pn-muted); font-weight: 600; padding-right: 16px; width: 1%; white-space: nowrap; } .pn-buy__cart .variations select { width: 100%; height: 46px; border: 1px solid var(--pn-line-3); padding: 0 12px; background: #fff; border-radius: 0; } .pn-buy__cart .reset_variations { font-size: 12.5px; margin-left: 10px; } .pn-buy__cart .single_variation { margin-bottom: 14px; font-size: 14px; } .pn-buy__cart .woocommerce-variation-add-to-cart { display: flex; gap: 12px; } .pn-buy__cart .woocommerce-variation-price .price { font-size: 22px; font-weight: 800; color: var(--pn-ink); } .pn-buy__cart .quantity { display: flex; align-items: center; border: 1px solid var(--pn-line-3); flex: none; } .pn-buy__cart .quantity .qty { width: 44px; height: 56px; border: 0; text-align: center; font-size: 15px; font-weight: 700; -moz-appearance: textfield; background: transparent; } .pn-buy__cart .quantity .qty::-webkit-inner-spin-button, .pn-buy__cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pn-qty-b { width: 44px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #B9BEC3; background: none; border: 0; } .pn-qty-b:hover { color: var(--pn-ink); } .pn-buy__cart .single_add_to_cart_button, .pn-buy__cart .button { flex: 1; min-width: 200px; background: var(--pn-accent); color: #fff; height: 58px; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; font-weight: 800; letter-spacing: .02em; } .pn-buy__cart .single_add_to_cart_button::before { content: ""; width: 21px; height: 21px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5h2.6l2.7 11h10.4'/%3E%3Cpath d='M6 6.5h15l-2.2 6.5H7.6'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17.5' cy='19' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5h2.6l2.7 11h10.4'/%3E%3Cpath d='M6 6.5h15l-2.2 6.5H7.6'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17.5' cy='19' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; } .pn-buy__cart .single_add_to_cart_button:hover { background: var(--pn-accent-h); } .pn-buy__cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; } .pn-buy__cart .single_add_to_cart_button.loading { opacity: .7; } .pn-buy__cart .stock { display: none; } .pn-buy__quote { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 12px; border: 1px solid var(--pn-line-3); color: var(--pn-ink); font-size: 13.5px; font-weight: 700; text-align: center; padding: 10px 16px; } .pn-buy__quote span { font-weight: 400; color: var(--pn-muted); } .pn-buy__quote:hover { border-color: var(--pn-ink); color: var(--pn-ink); } .pn-buy__usps { list-style: none; margin: 34px 0 0; padding: 28px 0 0; border-top: 1px solid var(--pn-line-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .pn-buy__usps li { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; color: var(--pn-accent); } .pn-buy__usps span { font-size: 13.5px; font-weight: 600; color: #3F454B; line-height: 1.4; } .pn-product__info { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 64px; align-items: start; margin-top: 72px; } .pn-tabs-f__nav { display: flex; gap: 32px; border-bottom: 1px solid var(--pn-line-2); overflow-x: auto; } .pn-tabs-f__b { padding: 0 0 16px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; color: var(--pn-muted); white-space: nowrap; } .pn-tabs-f__b:hover { color: var(--pn-ink); } .pn-tabs-f__b.is-active { font-weight: 800; color: var(--pn-ink); border-bottom-color: var(--pn-accent); } .pn-tabs-f__pane { padding-top: 28px; } .pn-tabs-f__pane[hidden] { display: none; } .pn-content--product { font-size: 14.5px; line-height: 1.75; } .pn-content--product > p:first-child { font-size: 15px; color: #3F454B; } .pn-drawing { margin: 0 0 24px; display: flex; justify-content: center; } .pn-drawing img { max-height: 420px; width: auto; } .pn-files { list-style: none; margin: 0; padding: 0; } .pn-files a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--pn-line-2); color: var(--pn-accent); } .pn-files li:last-child a { border-bottom: 0; } .pn-files__t { flex: 1; font-size: 14px; font-weight: 700; color: var(--pn-ink); } .pn-files__m { font-size: 12.5px; color: var(--pn-muted); } .pn-files a:hover .pn-files__t { color: var(--pn-accent); } .pn-steps { list-style: none; margin: 0; padding: 0; } .pn-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--pn-line-2); } .pn-steps li:last-child { border-bottom: 0; } .pn-steps__n { font-size: 12.5px; font-weight: 800; color: var(--pn-accent); padding-top: 2px; } .pn-steps h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 7px; } .pn-steps p { font-size: 14px; line-height: 1.7; margin: 0; } .pn-steps__note { display: flex; gap: 14px; align-items: center; margin-top: 26px; font-size: 13.5px; line-height: 1.7; color: var(--pn-muted); } .pn-steps__note .pn-ic { color: var(--pn-accent); } .pn-specs__h { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--pn-ink); padding-bottom: 18px; border-bottom: 1px solid var(--pn-line-2); text-transform: uppercase; } .pn-specs__list { margin: 0; } .pn-specs__list div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--pn-line-2); } .pn-specs__list div:last-child { border-bottom: 0; } .pn-specs__list dt { font-size: 13.5px; color: var(--pn-muted); } .pn-specs__list dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--pn-ink); text-align: right; } .pn-specs__pdf { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; margin-top: 28px; border: 1px solid var(--pn-line-3); color: var(--pn-ink); font-size: 13.5px; font-weight: 700; padding: 10px 16px; text-align: center; } .pn-specs__pdf .pn-ic { color: var(--pn-accent); } .pn-specs__pdf:hover { border-color: var(--pn-accent); color: var(--pn-accent); } .pn-related { margin-top: 88px; padding-top: 44px; border-top: 1px solid var(--pn-line-2); } .pn-related .pn-grid { margin-top: 0; } .pn-related .pn-card__t { font-size: 17px; min-height: 70px; } /* Lightbox */ .pn-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 22, 25, .92); display: flex; align-items: center; justify-content: center; padding: 56px 72px; } .pn-lb[hidden] { display: none; } .pn-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; } .pn-lb__b { position: absolute; background: none; border: 0; color: #fff; padding: 12px; opacity: .8; font-size: 26px; line-height: 1; } .pn-lb__b:hover { opacity: 1; } .pn-lb__close { top: 12px; right: 12px; } .pn-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); } .pn-lb__next { right: 12px; top: 50%; transform: translateY(-50%); } body.pn-noscroll { overflow: hidden; } /* ========================================================================== Treści: strony, wpisy, kontakt, 404 ========================================================================== */ .pn-page, .pn-article { padding-top: 32px; padding-bottom: 32px; } .pn-page__img, .pn-article__img { margin: 0 0 40px; } .pn-page__img img, .pn-article__img img { width: 100%; max-height: 520px; object-fit: cover; } .pn-content { max-width: 820px; font-size: 16px; line-height: 1.75; } .pn-content h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 40px 0 16px; } .pn-content h3 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; } .pn-content ul, .pn-content ol { padding-left: 1.3em; margin: 0 0 1em; } .pn-content li { margin-bottom: .35em; } .pn-content img { height: auto; } .pn-content blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--pn-accent); color: var(--pn-ink); font-size: 18px; } .pn-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 14px; } .pn-content th, .pn-content td { border-bottom: 1px solid var(--pn-line-2); padding: 10px 12px 10px 0; text-align: left; } .pn-content a { text-decoration: underline; text-underline-offset: 3px; } .pn-content .alignleft { float: left; margin: 0 24px 16px 0; } .pn-content .alignright { float: right; margin: 0 0 16px 24px; } .pn-content .aligncenter { margin-left: auto; margin-right: auto; } .pn-content .wp-caption-text { font-size: 13px; color: var(--pn-muted); margin-top: 6px; } .pn-article__head { max-width: 820px; margin-bottom: 32px; } .pn-article__h { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; } .pn-article__foot { max-width: 820px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--pn-line-2); } .pn-listing { padding-top: 28px; } .pn-listing .pn-posts { margin-top: 28px; } .pn-contact { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; padding-top: 36px; align-items: start; } .pn-contact__intro { margin-bottom: 28px; font-size: 15px; } .pn-contact__h { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-muted); margin-bottom: 20px; } .pn-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .pn-contact__list li { display: flex; gap: 16px; align-items: flex-start; font-size: 15px; color: var(--pn-ink); line-height: 1.55; } .pn-contact__list .pn-ring { color: var(--pn-accent); } .pn-contact__list small { display: block; font-size: 12px; color: var(--pn-muted); margin-bottom: 2px; } .pn-contact__list a { color: var(--pn-ink); font-weight: 700; } .pn-contact__list a:hover { color: var(--pn-accent); } .pn-form { background: var(--pn-bg-2); padding: 40px; } .pn-form__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; } .pn-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .pn-form__f { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--pn-ink); } .pn-form__f--wide { grid-column: 1 / -1; } .pn-form__f input, .pn-form__f textarea { width: 100%; border: 1px solid #D5D8DB; background: #fff; padding: 13px 14px; font-size: 14.5px; font-weight: 400; border-radius: 0; } .pn-form__f input:focus, .pn-form__f textarea:focus { border-color: var(--pn-ink); outline: none; } .pn-form__f input[readonly] { background: #EEF0F1; } .pn-form__f textarea { resize: vertical; min-height: 140px; } .pn-form__f.is-invalid input, .pn-form__f.is-invalid textarea { border-color: var(--pn-accent); } .pn-form__consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; } .pn-form__consent input { margin-top: 3px; accent-color: var(--pn-accent); } .pn-form__consent.is-invalid { color: var(--pn-accent); } .pn-form__bar { display: flex; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; } .pn-form__msg { font-size: 14px; font-weight: 600; } .pn-form__msg.is-ok { color: var(--pn-ok); } .pn-form__msg.is-err { color: var(--pn-accent); } .pn-form.is-sending button[type=submit] { opacity: .6; pointer-events: none; } .pn-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pn-404 { text-align: center; padding-top: 80px; padding-bottom: 40px; } .pn-404__code { font-size: 120px; font-weight: 800; color: var(--pn-line); line-height: 1; letter-spacing: -.04em; margin-bottom: 12px; } .pn-404 p { max-width: 36em; margin: 0 auto 28px; } /* ========================================================================== WooCommerce – koszyk, zamówienie, konto, komunikaty ========================================================================== */ .pn-shoppage { padding-top: 32px; padding-bottom: 24px; } .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border: 0 !important; border-left: 3px solid var(--pn-ok) !important; background: var(--pn-bg-2) !important; color: var(--pn-ink) !important; padding: 16px 20px !important; margin: 0 0 24px !important; list-style: none; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .woocommerce-info { border-left-color: var(--pn-muted) !important; } .woocommerce-error { border-left-color: var(--pn-accent) !important; flex-direction: column; align-items: flex-start; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-message .button, .woocommerce-info .button { order: 2; } .pn-product .woocommerce-notices-wrapper { margin-bottom: 8px; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button, .woocommerce-page .button { background: var(--pn-ink); color: #fff; border: 0; border-radius: 3px; padding: 13px 22px; font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { background: var(--pn-accent); color: #fff; } .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--pn-accent); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--pn-accent-h); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row .input-text { border: 1px solid #D5D8DB; border-radius: 0; padding: 12px 14px; background: #fff; font-size: 14.5px; line-height: 1.4; } .woocommerce form .form-row label { font-size: 13px; font-weight: 700; color: var(--pn-ink); } .woocommerce form .form-row .required { color: var(--pn-accent); } /* Konto */ .woocommerce-MyAccount-content { font-size: 15px; min-width: 0; } .woocommerce-MyAccount-content > p:first-child { font-size: 16px; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 20px; font-weight: 800; margin: 0 0 16px; } .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .woocommerce-Addresses::before, .woocommerce-Addresses::after { display: none !important; } .woocommerce-Address { width: auto !important; float: none !important; background: var(--pn-bg-2); padding: 24px; } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .woocommerce-Address address { font-style: normal; line-height: 1.7; } #customer_login.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } #customer_login.col2-set::before, #customer_login.col2-set::after { display: none; } #customer_login .col-1, #customer_login .col-2 { width: auto; float: none; background: var(--pn-bg-2); padding: 36px; } #customer_login h2 { font-size: 22px; font-weight: 800; margin-bottom: 20px; } .woocommerce form.login, .woocommerce form.register { border: 0; padding: 0; margin: 0; border-radius: 0; } .woocommerce-form-login__rememberme { display: block; margin: 8px 0 14px; font-size: 13px; } .woocommerce table.shop_table { border: 1px solid var(--pn-line-2); border-radius: 0; border-collapse: collapse; width: 100%; font-size: 14px; } .woocommerce table.shop_table th { font-weight: 700; color: var(--pn-ink); background: var(--pn-bg-2); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 14px; border-top: 1px solid var(--pn-line-2); text-align: left; } .woocommerce table.my_account_orders .button { padding: 8px 14px; font-size: 12px; margin: 2px; } .woocommerce-pagination { margin-top: 20px; } /* Bloki koszyka i zamówienia */ .pn-shoppage .wp-block-woocommerce-cart, .pn-shoppage .wp-block-woocommerce-checkout { max-width: none; } .pn-shoppage .wc-block-components-button:not(.is-link) { background: var(--pn-accent); color: #fff; border-radius: 0; font-weight: 800; min-height: 54px; } .pn-shoppage .wc-block-components-button:not(.is-link):hover { background: var(--pn-accent-h); } .pn-shoppage .wc-block-components-text-input input, .pn-shoppage .wc-block-components-combobox .components-combobox-control__input, .pn-shoppage .wc-blocks-components-select__select { border-radius: 0 !important; } .pn-shoppage .wc-block-cart-items__header, .pn-shoppage .wc-block-components-totals-item__label { color: var(--pn-ink); } .pn-shoppage .wc-block-components-product-name { color: var(--pn-ink); font-weight: 700; } /* ========================================================================== Responsywność ========================================================================== */ @media (max-width: 1240px) { .pn-nav__list { gap: 16px; } .pn-nav__link { font-size: 14px; } .pn-hicon__l { display: none; } .pn-best__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pn-best__grid > :nth-child(5) { display: none; } .pn-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } .pn-hero__h { font-size: 54px; } .pn-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-foot__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 40px; align-items: start; } .pn-foot__brand .pn-logo { grid-row: span 2; } .pn-foot__brand .pn-socials { margin-top: 0; } } @media (max-width: 1100px) { :root { --pn-header-h: 72px; } .pn-burger { display: flex; } .pn-hicon__l { display: none; } .pn-drawer { position: fixed; top: var(--pn-drawer-top, 112px); left: 0; right: 0; bottom: 0; z-index: 39; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 20px var(--pn-pad) 40px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; } .pn-open .pn-drawer { transform: none; visibility: visible; transition: transform .25s ease; } .pn-open .pn-burger__open { display: none; } .pn-open .pn-burger__close { display: block; } .pn-search { order: 0; max-width: none; flex: none; margin: 0 0 12px; height: 46px; border-radius: 23px; } .pn-nav { order: 1; } .pn-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .pn-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--pn-line-2); } .pn-nav__link { height: auto; padding: 16px 0; font-size: 16px; font-weight: 600; flex: 1; } .pn-nav__caret { display: none; } .pn-nav__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; color: var(--pn-ink); transition: transform .2s; } .pn-nav__item.is-open > .pn-nav__toggle { transform: rotate(180deg); } .pn-mega { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; transition: none; } .pn-nav__item.has-kids:hover > .pn-mega { opacity: 1; } .pn-nav__item.is-open > .pn-mega { display: block; } .pn-mega__grid { padding: 0 0 12px 12px; grid-template-columns: 1fr; gap: 0; } .pn-mega__a { padding: 10px 0; } .pn-mega__t { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; } .pn-mega__d { font-size: 12.5px; } .pn-drawer__extra { order: 2; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; font-size: 14px; } .pn-drawer__extra > a { display: flex; align-items: center; gap: 10px; color: var(--pn-ink); font-weight: 600; } .pn-drawer__extra .pn-langs { margin-top: 8px; font-size: 14px; gap: 20px; } .pn-topbar .pn-langs--top, .pn-topbar__a--mail { display: none; } .pn-hicons { margin-left: auto; gap: 18px; } .pn-hero__in { grid-template-columns: 1fr; min-height: 0; } .pn-hero__txt { padding: 56px var(--pn-pad) 64px; } .pn-hero__media { min-height: 380px; margin-right: 0; } .pn-catbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-catbar__a { border-bottom: 1px solid var(--pn-line); } .pn-about { grid-template-columns: 1fr; gap: 40px; } .pn-about__gal { height: 420px; } .pn-best__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-best__grid > :nth-child(4) { display: none; } .pn-custom { grid-template-columns: 1fr; } .pn-custom__media { min-height: 300px; } .pn-custom__media::after { background: linear-gradient(180deg, var(--pn-ink) 0%, rgba(30, 34, 38, 0) 30%); } .pn-custom__badge { left: auto; right: 24px; bottom: 24px; } .pn-faqsec, .pn-catfaq { grid-template-columns: 1fr; gap: 32px; } .pn-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-seo__cols, .pn-catseo { grid-template-columns: 1fr; gap: 24px; } .pn-shop__layout { grid-template-columns: 1fr; margin-top: 32px; } .pn-side__list { display: flex; flex-wrap: wrap; gap: 8px; } .pn-side__list > li > a { padding: 9px 14px; border: 1px solid var(--pn-line-2); border-left-width: 1px; font-size: 13px; } .pn-side__list > li.is-active > a { border-color: var(--pn-accent); } .pn-side__list > li.is-active > a span { display: none; } .pn-side__sub { display: none; } .pn-side__h { padding-left: 0; } .pn-shop__main .pn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-product__top, .pn-product__info { grid-template-columns: 1fr; gap: 40px; } .pn-product__info { margin-top: 48px; } .pn-gallery__main { min-height: 320px; } .pn-contact { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 782px) { .admin-bar .pn-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .pn-header { top: 0; } } @media (max-width: 860px) { :root { --pn-pad: 20px; } .pn-sec { padding-top: 56px; } .pn-h2 { font-size: 26px; } .pn-hero__h { font-size: 44px; } .pn-hero__usps { flex-direction: column; gap: 14px; } .pn-catbar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -24px; } .pn-catbar__a { padding: 18px 16px; } .pn-catbar__a:nth-child(2n) { border-right: 0; } .pn-catbar__a:nth-child(2n+1):not(:last-child) { border-right: 1px solid var(--pn-line); } .pn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-about__gal { height: 320px; gap: 10px; } .pn-best__grid, .pn-shop__main .pn-grid, .pn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pn-best__grid > :nth-child(4) { display: flex; } .pn-custom__txt { padding: 40px 28px; } .pn-custom__h { font-size: 26px; } .pn-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-catalog { min-height: 0; } .pn-catalog::before { background: linear-gradient(180deg, rgba(240, 241, 242, .96) 0%, rgba(240, 241, 242, .9) 70%, rgba(240, 241, 242, .75) 100%); } .pn-catalog__txt { padding: 44px 28px; } .pn-catalog__h { font-size: 34px; } .pn-catalog__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; } .pn-catalog__feats li:nth-child(3) { padding-left: 0; border-left: 0; } .pn-banner { min-height: 0; } .pn-banner__txt { padding: 40px 28px; } .pn-banner__h { font-size: 32px; } .pn-banner__p { margin-bottom: 24px; } .pn-ctabar { flex-direction: column; align-items: flex-start; padding: 28px; } .pn-faqgrid { grid-template-columns: 1fr; } .pn-card { padding: 6px 12px 14px; } .pn-card__media { height: 150px; } .pn-card__t { font-size: 15px; min-height: 0; } .pn-price--card .pn-price__v { font-size: 18px; } .pn-card__btn { padding: 10px 12px; font-size: 12.5px; } .pn-grid.is-list .pn-card { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; } .pn-grid.is-list .pn-card__media { height: 120px; } .pn-grid.is-list .pn-card__body { display: flex; } .pn-grid.is-list .pn-card__excerpt { display: none; } .pn-view { display: none; } .pn-toolbar__sep { display: none; } .pn-buy__h { font-size: 26px; } .pn-price--single .pn-price__v { font-size: 32px; } .pn-buy__usps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-ticks--grid { grid-template-columns: 1fr; } .pn-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-foot__brand { display: block; } .pn-foot__bottom-in { grid-template-columns: 1fr; gap: 24px; } .pn-foot__legal { text-align: left; } .pn-foot__legal-list { justify-content: flex-start; } .pn-phead__h, .pn-article__h { font-size: 30px; } .pn-form { padding: 28px 20px; } .pn-form__grid { grid-template-columns: 1fr; } #customer_login.col2-set, .woocommerce-Addresses { grid-template-columns: 1fr; gap: 24px; } #customer_login .col-1, #customer_login .col-2 { padding: 24px; } } @media (max-width: 520px) { .pn-topbar__in { justify-content: center; } .pn-topbar__l:empty { display: none; } .pn-topbar__l .pn-topbar__a { font-size: 11.5px; } .pn-hero__h { font-size: 38px; } .pn-hero__media { min-height: 260px; } .pn-hero__btns .pn-btn { flex: 1 1 100%; } .pn-posts, .pn-posts--list { grid-template-columns: 1fr; } .pn-trust { grid-template-columns: 1fr; } .pn-foot__cols { grid-template-columns: 1fr; } .pn-foot__cta-r { flex-direction: column; align-items: flex-start; } .pn-dlbtn, .pn-catalog__btns .pn-btn { width: 100%; } .pn-gallery__thumbs { grid-auto-columns: calc((100% - 32px) / 3); } .pn-buy__cart .single_add_to_cart_button { min-width: 0; } .pn-lb { padding: 56px 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media print { .pn-topbar, .pn-header, .pn-foot, .pn-crumbs, .pn-buy__cart, .pn-buy__quote, .pn-related { display: none !important; } } .pn-buy__ask { width: 100%; height: 58px; justify-content: center; } /* Okienko zapytania na karcie produktu */ .pn-modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 3px; background: #fff; color: var(--pn-ink); box-shadow: 0 30px 80px rgba(20, 22, 25, .35); overflow: auto; } .pn-modal::backdrop { background: rgba(20, 22, 25, .62); } .pn-modal[open] { animation: pn-modal-in .22s ease-out; } @keyframes pn-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .pn-modal__box { position: relative; padding: 36px 40px 32px; } .pn-modal__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; background: none; font-size: 18px; color: var(--pn-muted); cursor: pointer; border-radius: 2px; } .pn-modal__x:hover { background: #F0F1F2; color: var(--pn-ink); } .pn-modal__h { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 40px 8px 0; } .pn-modal__lead { color: var(--pn-muted); font-size: 15px; line-height: 1.6; margin: 0 0 20px; } .pn-modal__prod { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 22px; background: #F7F8F9; border: 1px solid var(--pn-line); border-left: 3px solid var(--pn-accent); border-radius: 2px; } .pn-modal__img { flex: 0 0 72px; width: 72px; height: 72px; background: #fff; border: 1px solid var(--pn-line); display: flex; align-items: center; justify-content: center; } .pn-modal__img img { width: 100%; height: 100%; object-fit: contain; } .pn-modal__prod small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A9099; margin-bottom: 3px; } .pn-modal__prod strong { display: block; font-size: 16px; line-height: 1.35; } .pn-modal__sku { display: block; font-size: 14px; color: var(--pn-muted); margin-top: 3px; } .pn-modal__sku b { color: var(--pn-accent); font-weight: 600; } .pn-modal .pn-form { padding: 0; border: 0; box-shadow: none; background: none; } @media (max-width: 520px) { .pn-modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; } .pn-modal__box { padding: 28px 18px 24px; } .pn-modal__h { font-size: 21px; } } /* =================================================================== */ /* Koszyk, zamówienie, konto */ /* =================================================================== */ .pn-shoppage { padding-bottom: 96px; } .pn-shoppage__content > .woocommerce { margin: 0; } /* Pasek kroków */ .pn-costeps { display: flex; align-items: center; gap: 0; list-style: none; margin: -8px 0 40px; padding: 0; counter-reset: s; } .pn-costeps li { display: flex; align-items: center; color: var(--pn-muted); font-size: 14px; font-weight: 600; } .pn-costeps li + li::before { content: ""; width: 56px; height: 1px; background: var(--pn-line); margin: 0 16px; } .pn-costeps li.is-done + li::before { background: var(--pn-accent); } .pn-costeps a, .pn-costeps li > span { display: flex; align-items: center; gap: 10px; color: inherit; } .pn-costeps a:hover { color: var(--pn-ink); } .pn-costeps__n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--pn-line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: #fff; } .pn-costeps .is-current { color: var(--pn-ink); } .pn-costeps .is-current .pn-costeps__n { background: var(--pn-ink); border-color: var(--pn-ink); color: #fff; } .pn-costeps .is-done { color: var(--pn-ink); } .pn-costeps .is-done .pn-costeps__n { background: var(--pn-accent); border-color: var(--pn-accent); color: #fff; } /* Wspólne: kolumna podsumowania i lista zaufania */ .pn-sum { background: var(--pn-bg-2); border: 1px solid var(--pn-line); border-top: 3px solid var(--pn-accent); padding: 28px 28px 24px; } .pn-sum__h, .pn-sum .cart_totals > h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; } .pn-trustlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .pn-trustlist li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--pn-body); } .pn-trustlist .pn-ic { color: var(--pn-accent); flex: none; } .pn-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--pn-ink); } .pn-back:hover { color: var(--pn-accent); } .pn-back--sm { margin-top: 18px; font-size: 13px; color: var(--pn-muted); } /* ---------- Koszyk ---------- */ .pn-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; } .pn-cartpage__side { position: sticky; top: calc(var(--pn-header-h) + 24px); } .pn-cart__head, .pn-cart__item { display: grid; grid-template-columns: 112px minmax(0, 1fr) 130px 138px 130px 36px; gap: 20px; align-items: center; } .pn-cart__head { padding: 0 0 12px; border-bottom: 1px solid var(--pn-ink); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pn-muted); } .pn-cart__head span:first-child { grid-column: 1 / 3; } .pn-cart__head span:nth-child(n+2) { text-align: right; } .pn-cart__head span:nth-child(3) { text-align: center; } .pn-cart__item { padding: 22px 0; border-bottom: 1px solid var(--pn-line); } .pn-cart__thumb { width: 112px; height: 112px; background: #fff; border: 1px solid var(--pn-line); display: flex; align-items: center; justify-content: center; padding: 6px; } .pn-cart__thumb img { width: 100%; height: 100%; object-fit: contain; } .pn-cart__sku { font-size: 13px; font-weight: 600; color: var(--pn-accent); margin-bottom: 3px; } .pn-cart__name { font-size: 16px; font-weight: 700; line-height: 1.4; } .pn-cart__name a { color: var(--pn-ink); } .pn-cart__name a:hover { color: var(--pn-accent); } .pn-cart__dims { font-family: var(--pn-mono); font-size: 12.5px; color: var(--pn-muted); margin-top: 4px; } .pn-cart__info .variation { margin: 6px 0 0; font-size: 13px; } .pn-cart__price, .pn-cart__sub { text-align: right; font-size: 15px; white-space: nowrap; } .pn-cart__sub { font-weight: 800; color: var(--pn-ink); font-size: 16px; } .pn-cart__qty { display: flex; justify-content: center; } .pn-cart__qty .quantity { display: inline-flex; align-items: center; border: 1px solid #D5D8DB; background: #fff; } .pn-cart__qty .qty { width: 46px; height: 44px; border: 0; text-align: center; font-size: 15px; font-weight: 700; background: transparent; -moz-appearance: textfield; } .pn-cart__qty .qty::-webkit-inner-spin-button, .pn-cart__qty .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pn-cart__qty .pn-qty-b, .pn-buy__cart .pn-qty-b { width: 40px; height: 44px; border: 0; background: none; font-size: 18px; color: var(--pn-muted); cursor: pointer; } .pn-cart__qty .pn-qty-b:hover { color: var(--pn-ink); background: var(--pn-bg-2); } .pn-cart__rm { text-align: right; } .woocommerce .pn-cart__rm a.remove { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--pn-muted) !important; background: none; font-size: 0; } .woocommerce .pn-cart__rm a.remove:hover { background: #FBEDE8 !important; color: var(--pn-accent) !important; } .pn-cart__actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 0 0; flex-wrap: wrap; } .pn-cart__coupon label { display: block; font-size: 13px; font-weight: 700; color: var(--pn-ink); margin-bottom: 8px; } .pn-cart__coupon-row { display: flex; } .pn-cart__coupon-row .input-text { width: 220px; height: 46px; border: 1px solid #D5D8DB; border-right: 0; padding: 0 14px; font-size: 14px; font-family: inherit; } .woocommerce .pn-cart__coupon-row .button { height: 46px; border-radius: 0; padding: 0 20px; } .woocommerce .pn-cart__update { background: #fff; color: var(--pn-ink); border: 1px solid #D5D8DB; } .woocommerce .pn-cart__update:hover { background: #fff; color: var(--pn-ink); border-color: var(--pn-ink); } .woocommerce .pn-cart__update[disabled] { opacity: .45; } .js .pn-cart__update { display: none; } /* zmiana ilości zapisuje koszyk sama */ /* Podsumowanie koszyka (cart-totals.php) */ .pn-sum .cart_totals { width: 100% !important; float: none !important; } .pn-sum table.shop_table, .woocommerce .pn-sum table.shop_table { border: 0; background: none; margin: 0 0 20px; } .woocommerce .pn-sum table.shop_table th, .woocommerce .pn-sum table.shop_table td { background: none; border: 0; border-top: 1px solid var(--pn-line); padding: 13px 0; font-size: 14px; vertical-align: top; } .woocommerce .pn-sum table.shop_table tr:first-child th, .woocommerce .pn-sum table.shop_table tr:first-child td { border-top: 0; } .woocommerce .pn-sum table.shop_table th { font-weight: 600; color: var(--pn-body); width: 45%; } .woocommerce .pn-sum table.shop_table td { text-align: right; color: var(--pn-ink); } .woocommerce .pn-sum .order-total th, .woocommerce .pn-sum .order-total td { border-top: 1px solid var(--pn-ink) !important; padding-top: 16px; font-size: 16px; color: var(--pn-ink); font-weight: 800; } .woocommerce .pn-sum .order-total td strong .amount { font-size: 22px; } .pn-sum .order-total small.includes_tax { display: block; font-size: 12px; font-weight: 500; color: var(--pn-muted); } .pn-sum #shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; } .pn-sum #shipping_method li { margin: 0 0 6px; } .pn-sum .woocommerce-shipping-destination, .pn-sum .shipping-calculator-button { font-size: 12.5px; color: var(--pn-muted); } .pn-sum .wc-proceed-to-checkout { padding: 0; } .woocommerce .pn-sum .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 58px; margin: 0; padding: 0 20px; background: var(--pn-accent); color: #fff; border-radius: 0; font-size: 15px; font-weight: 800; letter-spacing: .02em; } .woocommerce .pn-sum .wc-proceed-to-checkout a.checkout-button::after { content: "→"; font-weight: 400; } .woocommerce .pn-sum .wc-proceed-to-checkout a.checkout-button:hover { background: var(--pn-accent-h); } /* Pusty koszyk */ .pn-empty { max-width: 560px; margin: 24px auto 0; text-align: center; padding: 56px 32px; border: 1px solid var(--pn-line); background: var(--pn-bg-2); } .pn-empty__ic { width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 1px solid var(--pn-line); display: inline-flex; align-items: center; justify-content: center; color: var(--pn-accent); margin-bottom: 20px; } .pn-empty__h { font-size: 26px; font-weight: 800; margin-bottom: 10px; } .pn-empty__p { font-size: 15px; margin-bottom: 26px; } .pn-empty__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .woocommerce-cart .cart-empty.woocommerce-info { display: none !important; } /* ---------- Zamówienie ---------- */ .pn-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; } .pn-checkout__side { position: sticky; top: calc(var(--pn-header-h) + 24px); } .pn-co-step { background: #fff; border: 1px solid var(--pn-line); padding: 30px 32px 26px; margin-bottom: 20px; } .pn-co-step__h { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 22px; } .pn-co-step__h span { font-size: 15px; font-weight: 800; color: var(--pn-accent); border: 1px solid #E9C9BD; background: #FBF3F0; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .pn-co-step .woocommerce-billing-fields > h3, .pn-co-step .woocommerce-additional-fields > h3 { display: none; } .pn-co-step h3#ship-to-different-address { font-size: 15px; font-weight: 700; margin: 0 0 16px; } .pn-co-step h3#ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .pn-co-step .woocommerce-additional-fields { margin-top: 8px; } /* Pola: siatka zamiast floatów WooCommerce */ .pn-checkout .woocommerce-billing-fields__field-wrapper, .pn-checkout .woocommerce-shipping-fields__field-wrapper, .pn-checkout .woocommerce-additional-fields__field-wrapper, .woocommerce-account .woocommerce-address-fields__field-wrapper, .woocommerce-account .woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .pn-checkout .form-row, .woocommerce-account .woocommerce-address-fields .form-row, .woocommerce-account .woocommerce-EditAccountForm .form-row { float: none !important; width: auto !important; grid-column: 1 / -1; margin: 0 0 16px !important; padding: 0 !important; } .pn-checkout .form-row-first, .woocommerce-account .form-row-first { grid-column: 1; } .pn-checkout .form-row-last, .woocommerce-account .form-row-last { grid-column: 2; } .woocommerce-account .woocommerce-EditAccountForm fieldset, .woocommerce-account .woocommerce-EditAccountForm > p:last-of-type, .woocommerce-account .woocommerce-EditAccountForm > .clear { grid-column: 1 / -1; } .woocommerce form .form-row label, .pn-checkout label { display: block; margin: 0 0 6px; line-height: 1.4; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { width: 100%; min-height: 48px; font-family: inherit; color: var(--pn-ink); transition: border-color .15s, box-shadow .15s; } .woocommerce form .form-row textarea { min-height: 110px; } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--pn-ink); box-shadow: 0 0 0 3px rgba(30, 34, 38, .07); } .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--pn-accent); } .woocommerce form .form-row .optional { font-weight: 500; color: var(--pn-muted); } .woocommerce .select2-container .select2-selection--single { height: 48px; border: 1px solid #D5D8DB; border-radius: 0; } .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--pn-ink); font-size: 14.5px; } .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .select2-dropdown { border-color: #D5D8DB; border-radius: 0; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--pn-ink); } .pn-checkout input[type=checkbox], .pn-checkout input[type=radio], .woocommerce-account input[type=checkbox] { accent-color: var(--pn-accent); width: 17px; height: 17px; } /* Płatność */ .woocommerce .pn-co-step #payment { background: none; border-radius: 0; } .woocommerce .pn-co-step #payment ul.payment_methods { padding: 0; border: 0; margin: 0 0 20px; } .woocommerce .pn-co-step #payment ul.payment_methods li { list-style: none; border: 1px solid var(--pn-line); margin: 0 0 10px; padding: 16px 18px; background: #fff; } .woocommerce .pn-co-step #payment ul.payment_methods li:has(input:checked) { border-color: var(--pn-ink); box-shadow: inset 3px 0 0 var(--pn-accent); } .woocommerce .pn-co-step #payment ul.payment_methods li > label { display: inline; font-weight: 700; color: var(--pn-ink); font-size: 15px; margin-left: 8px; cursor: pointer; } .woocommerce .pn-co-step #payment ul.payment_methods li img { display: inline-block; max-height: 22px; margin-left: 8px; vertical-align: middle; } .woocommerce .pn-co-step #payment div.payment_box { background: var(--pn-bg-2); color: var(--pn-body); font-size: 13.5px; margin: 12px 0 0; padding: 14px 16px; border-radius: 0; } .woocommerce .pn-co-step #payment div.payment_box::before { display: none; } .woocommerce .pn-co-step #payment ul.payment_methods li.woocommerce-notice { border-left: 3px solid var(--pn-accent); background: var(--pn-bg-2); font-weight: 600; color: var(--pn-ink); } .woocommerce .pn-co-step #payment div.form-row.place-order { padding: 0; margin: 0 !important; } .pn-co-step .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--pn-muted); margin-bottom: 18px; } .pn-co-step .woocommerce-privacy-policy-text p { margin: 0 0 10px; } .woocommerce .pn-co-step #place_order { float: none; width: 100%; height: 60px; background: var(--pn-accent); color: #fff; border-radius: 0; font-size: 16px; font-weight: 800; letter-spacing: .02em; } .woocommerce .pn-co-step #place_order:hover { background: var(--pn-accent-h); } /* Podsumowanie zamówienia (review-order.php) */ .woocommerce .pn-sum table.woocommerce-checkout-review-order-table thead { display: none; } .woocommerce .pn-sum table.woocommerce-checkout-review-order-table .cart_item td { border-top: 1px solid var(--pn-line); padding: 12px 0; } .woocommerce .pn-sum table.woocommerce-checkout-review-order-table .cart_item td.product-name { text-align: left; font-weight: 600; line-height: 1.45; padding-right: 12px; } .pn-sum .product-quantity { color: var(--pn-muted); font-weight: 600; white-space: nowrap; } .woocommerce .pn-sum table.woocommerce-checkout-review-order-table tfoot th { text-align: left; } .woocommerce-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, .7) !important; } .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 16px !important; } .woocommerce form.checkout_coupon { border: 1px solid var(--pn-line); border-radius: 0; padding: 20px; margin: 0 0 24px; } /* Potwierdzenie zamówienia */ .woocommerce-order { max-width: 880px; } .woocommerce-order .woocommerce-thankyou-order-received { font-size: 20px; font-weight: 800; color: var(--pn-ink); border-left: 3px solid var(--pn-ok); background: var(--pn-bg-2); padding: 20px 24px; margin-bottom: 28px; } .woocommerce ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0 0 36px; padding: 0; border: 1px solid var(--pn-line); } .woocommerce ul.order_details::before, .woocommerce ul.order_details::after { display: none; } .woocommerce ul.order_details li { float: none; margin: 0; padding: 18px 20px; border-right: 1px solid var(--pn-line); border-bottom: 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pn-muted); } .woocommerce ul.order_details li:last-child { border-right: 0; } .woocommerce ul.order_details li strong { display: block; margin-top: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--pn-ink); } .woocommerce-order-details, .woocommerce-customer-details { margin-bottom: 32px; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 20px; font-weight: 800; margin: 0 0 14px; } .woocommerce .woocommerce-customer-details address { border: 1px solid var(--pn-line); border-radius: 0; padding: 20px 22px; font-style: normal; line-height: 1.7; } /* ---------- Moje konto ---------- */ .pn-account { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; } .pn-account__side { position: sticky; top: calc(var(--pn-header-h) + 24px); border: 1px solid var(--pn-line); background: #fff; } .pn-account__user { display: flex; align-items: center; gap: 14px; padding: 22px 22px 20px; border-bottom: 1px solid var(--pn-line); background: var(--pn-bg-2); } .pn-account__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--pn-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: .04em; flex: none; } .pn-account__user strong { display: block; color: var(--pn-ink); font-size: 15px; line-height: 1.3; } .pn-account__user small { display: block; color: var(--pn-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; } .pn-accnav ul { list-style: none; margin: 0; padding: 8px 0; } .pn-accnav a { display: flex; align-items: center; gap: 12px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; color: var(--pn-body); border-left: 3px solid transparent; } .pn-accnav a:hover { color: var(--pn-ink); background: var(--pn-bg-2); } .pn-accnav .pn-ic { color: var(--pn-muted); flex: none; } .pn-accnav li.is-active a { color: var(--pn-ink); background: var(--pn-bg-2); border-left-color: var(--pn-accent); } .pn-accnav li.is-active .pn-ic { color: var(--pn-accent); } .pn-accnav .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid var(--pn-line); margin-top: 8px; padding-top: 8px; } .pn-accnav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--pn-muted); } .pn-account__main { min-width: 0; font-size: 15px; } .pn-account__main > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 8px; } .pn-account__main h2, .pn-account__main h3 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; } .pn-account__main > p { max-width: 720px; } .pn-account__main .woocommerce-info, .pn-account__main .woocommerce-message { max-width: none; } /* Kokpit */ .pn-dash__h { font-size: 30px !important; margin-bottom: 8px !important; } .pn-dash__lead { font-size: 16px; margin-bottom: 28px; } .pn-dash__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; } .pn-dash__tile { position: relative; display: block; padding: 22px 22px 20px; border: 1px solid var(--pn-line); background: #fff; color: var(--pn-body); transition: border-color .15s, box-shadow .2s, transform .2s; } .pn-dash__tile:hover { border-color: var(--pn-ink); box-shadow: var(--pn-shadow); transform: translateY(-2px); color: var(--pn-body); } .pn-dash__ic { width: 44px; height: 44px; border-radius: 50%; background: #FBF3F0; color: var(--pn-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .pn-dash__tile strong { display: block; font-size: 16px; color: var(--pn-ink); margin-bottom: 4px; } .pn-dash__tile small { font-size: 13px; color: var(--pn-muted); } .pn-dash__go { position: absolute; top: 22px; right: 22px; color: var(--pn-muted); transition: transform .2s, color .2s; } .pn-dash__tile:hover .pn-dash__go { color: var(--pn-accent); transform: translateX(3px); } .pn-dash__box { border: 1px solid var(--pn-line); margin-bottom: 20px; } .pn-dash__boxhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--pn-line); background: var(--pn-bg-2); } .pn-dash__boxhead h3 { font-size: 16px !important; margin: 0 !important; } .pn-dash__boxhead a { font-size: 13.5px; font-weight: 700; } .pn-dash__orders { list-style: none; margin: 0; padding: 0; } .pn-dash__orders li + li { border-top: 1px solid var(--pn-line); } .pn-dash__orders a { display: grid; grid-template-columns: 1.2fr 1fr auto 1fr; gap: 16px; align-items: center; padding: 16px 22px; color: var(--pn-body); font-size: 14px; } .pn-dash__orders a:hover { background: var(--pn-bg-2); } .pn-dash__ono { font-weight: 800; color: var(--pn-ink); } .pn-dash__ototal { text-align: right; font-weight: 700; color: var(--pn-ink); } .pn-dash__none { padding: 20px 22px; margin: 0; } .pn-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--pn-bg); color: var(--pn-body); white-space: nowrap; } .pn-status--completed { background: #E3F1EA; color: var(--pn-ok); } .pn-status--processing { background: #FBF3F0; color: var(--pn-accent-h); } .pn-status--on-hold, .pn-status--pending { background: #FFF5DD; color: #8A6112; } .pn-status--cancelled, .pn-status--failed, .pn-status--refunded { background: #F3F3F3; color: var(--pn-muted); } .pn-dash__help { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 24px; background: var(--pn-ink); color: #C9CDD2; } .pn-dash__help strong { display: block; color: #fff; font-size: 16px; margin-bottom: 2px; } .pn-dash__help span { font-size: 13.5px; } .pn-dash__helplinks { display: flex; gap: 20px; flex-wrap: wrap; } .pn-dash__helplinks a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; } .pn-dash__helplinks a:hover { color: #F1B79F; } /* Zamówienia, adresy, dane konta */ .woocommerce .pn-account__main table.shop_table { border: 1px solid var(--pn-line); } .woocommerce .pn-account__main table.shop_table thead th { background: var(--pn-bg-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--pn-muted); border-top: 0; } .woocommerce .pn-account__main table.shop_table td, .woocommerce .pn-account__main table.shop_table th { padding: 14px 16px; border-top: 1px solid var(--pn-line); vertical-align: middle; } .woocommerce-orders-table__cell-order-number a { font-weight: 800; color: var(--pn-ink); } .woocommerce .pn-account__main .woocommerce-orders-table .button { padding: 9px 14px; font-size: 12px; background: #fff; color: var(--pn-ink); border: 1px solid #D5D8DB; } .woocommerce .pn-account__main .woocommerce-orders-table .button:hover { border-color: var(--pn-ink); background: #fff; color: var(--pn-ink); } .pn-account__main .woocommerce-Addresses { gap: 20px; } .pn-account__main .woocommerce-Address { background: #fff; border: 1px solid var(--pn-line); padding: 22px 24px; } .pn-account__main .woocommerce-Address-title h2 { font-size: 17px !important; margin: 0 0 12px !important; } .pn-account__main .woocommerce-Address-title .edit { font-size: 13px; font-weight: 700; } .woocommerce-account .woocommerce-EditAccountForm fieldset { border: 1px solid var(--pn-line); padding: 20px 22px 6px; margin: 8px 0 20px; } .woocommerce-account .woocommerce-EditAccountForm legend { font-size: 15px; font-weight: 800; color: var(--pn-ink); padding: 0 8px; } .woocommerce-account .woocommerce-EditAccountForm fieldset .form-row { grid-column: 1 / -1; } .woocommerce-account .woocommerce-EditAccountForm > .clear, .pn-checkout .clear { display: none; } .woocommerce .pn-account__main button.button, .woocommerce .pn-account__main .woocommerce-address-fields .button { background: var(--pn-accent); height: 52px; padding: 0 28px; } .woocommerce .pn-account__main button.button:hover { background: var(--pn-accent-h); } .pn-account__main .woocommerce-info .button, .pn-account__main .woocommerce-message .button { order: 2; } /* Logowanie / rejestracja */ .woocommerce-account:not(.logged-in) .pn-shoppage__content > .woocommerce { max-width: none; } #customer_login .col-1, #customer_login .col-2 { background: #fff !important; border: 1px solid var(--pn-line); border-top: 3px solid var(--pn-ink); } #customer_login .col-2 { border-top-color: var(--pn-accent); } .woocommerce form.login .button, .woocommerce form.register .button { width: 100%; height: 52px; background: var(--pn-accent); margin-top: 6px; } .woocommerce form.login .button:hover, .woocommerce form.register .button:hover { background: var(--pn-accent-h); } .woocommerce-LostPassword { margin-top: 14px; font-size: 13.5px; } .woocommerce form.woocommerce-ResetPassword { max-width: 520px; border: 1px solid var(--pn-line); padding: 28px; border-radius: 0; } @media (max-width: 1240px) { .pn-cart__head, .pn-cart__item { grid-template-columns: 96px minmax(0, 1fr) 110px 130px 110px 36px; gap: 14px; } .pn-cart__thumb { width: 96px; height: 96px; } .pn-cartpage, .pn-checkout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } } @media (max-width: 1100px) { .pn-cartpage, .pn-checkout, .pn-account { grid-template-columns: 1fr; } .pn-cartpage__side, .pn-checkout__side, .pn-account__side { position: static; } .pn-dash__tiles { grid-template-columns: 1fr 1fr; } .pn-accnav ul { display: flex; flex-wrap: wrap; padding: 6px; gap: 4px; } .pn-accnav a { border-left: 0; border-radius: 2px; padding: 10px 14px; } .pn-accnav li.is-active a { box-shadow: inset 0 -2px 0 var(--pn-accent); } .pn-accnav .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 0; margin: 0; padding: 0; } } @media (max-width: 860px) { .pn-cart__head { display: none; } .pn-cart__item { grid-template-columns: 84px minmax(0, 1fr) 36px; grid-template-areas: "t i r" "t q s"; gap: 10px 14px; } .pn-cart__thumb { grid-area: t; width: 84px; height: 84px; align-self: start; } .pn-cart__info { grid-area: i; } .pn-cart__rm { grid-area: r; align-self: start; } .pn-cart__price { display: none; } .pn-cart__qty { grid-area: q; justify-content: flex-start; } .pn-cart__sub { grid-area: s; grid-column: 2 / 4; text-align: right; align-self: center; } .pn-co-step { padding: 22px 18px 16px; } .pn-costeps li + li::before { width: 20px; margin: 0 8px; } .pn-costeps__t { font-size: 12.5px; } .pn-dash__orders a { grid-template-columns: 1fr auto; } .pn-dash__odate { display: none; } } @media (max-width: 520px) { .pn-checkout .woocommerce-billing-fields__field-wrapper, .pn-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-account .woocommerce-address-fields__field-wrapper, .woocommerce-account .woocommerce-EditAccountForm { grid-template-columns: 1fr; } .pn-checkout .form-row-first, .pn-checkout .form-row-last, .woocommerce-account .form-row-first, .woocommerce-account .form-row-last { grid-column: 1; } .pn-dash__tiles { grid-template-columns: 1fr; } .pn-costeps .pn-costeps__t { display: none; } .pn-costeps .is-current .pn-costeps__t { display: inline; } .pn-sum { padding: 22px 18px; } .pn-cart__coupon-row .input-text { width: 100%; } .pn-cart__coupon, .pn-cart__coupon-row { width: 100%; } } /* Poprawki */ html.js .woocommerce .pn-cart__update { display: none; } .woocommerce .pn-cart__coupon-row .button { white-space: nowrap; } .woocommerce form .form-row select { height: 48px; padding: 0 40px 0 14px; line-height: 46px; } .woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start !important; } .woocommerce-account .woocommerce-address-fields .form-row-first, .woocommerce-account .woocommerce-EditAccountForm .form-row-first { grid-column: 1; } .woocommerce-account .woocommerce-address-fields .form-row-last, .woocommerce-account .woocommerce-EditAccountForm .form-row-last { grid-column: 2; } .woocommerce-account .woocommerce-EditAccountForm .form-row em, .woocommerce form .form-row .description { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--pn-muted); } .pn-accnav li:not(.is-active) a { background: none; } .pn-accnav li:not(.is-active) a:hover { background: var(--pn-bg-2); } .woocommerce form .password-input, .woocommerce-page form .password-input { position: relative; display: block; } .woocommerce form .password-input .input-text { padding-right: 48px; } .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; color: var(--pn-muted); } .woocommerce form .show-password-input::before, .woocommerce-page form .show-password-input::before { content: ""; position: absolute; inset: 7px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .woocommerce form .show-password-input.display-password, .woocommerce form .show-password-input:hover { color: var(--pn-ink); } .woocommerce form .show-password-input::after { display: none !important; } .pn-costeps li { gap: 10px; } .pn-costeps li + li::before { margin: 0 10px 0 6px; } .woocommerce .select2-container { width: 100% !important; } .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 36px 0 14px !important; line-height: 46px !important; height: 46px; } /* =================================================================== */ /* Mobile: top bar i ciemne menu */ /* =================================================================== */ .pn-topbar__phone-m, .pn-langdd, .pn-logo__dark { display: none; } .pn-logo { position: relative; } @media (max-width: 1100px) { /* Top bar: telefon po lewej, języki po prawej */ .pn-topbar__in { justify-content: space-between !important; height: 42px; } .pn-topbar__l .pn-topbar__a:not(.pn-topbar__phone-m), .pn-topbar__r > .pn-topbar__a, .pn-topbar .pn-langs--top { display: none !important; } .pn-topbar__phone-m { display: inline-flex; font-size: 13px; font-weight: 700; } .pn-topbar__l, .pn-topbar__r { gap: 0; } .pn-langdd { display: block; position: relative; } .pn-langdd__btn { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid #D5D8DB; border-radius: 2px; background: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--pn-ink); cursor: pointer; list-style: none; user-select: none; } .pn-langdd__btn::-webkit-details-marker { display: none; } .pn-langdd__btn .pn-ic { color: var(--pn-muted); transition: transform .2s; } .pn-langdd[open] .pn-langdd__btn { border-color: var(--pn-ink); } .pn-langdd[open] .pn-langdd__btn .pn-ic { transform: rotate(180deg); } .pn-langdd__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--pn-line); box-shadow: 0 16px 36px rgba(20, 22, 25, .16); } .pn-langdd__a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 14px; font-weight: 600; color: var(--pn-body); border-radius: 2px; } .pn-langdd__a:hover { background: var(--pn-bg-2); color: var(--pn-ink); } .pn-langdd__a.is-current { background: var(--pn-bg-2); color: var(--pn-ink); font-weight: 800; } .pn-langdd__a .pn-ic { margin-left: auto; color: var(--pn-accent); } /* Jasne menu */ .pn-drawer { background: #fff; } .pn-drawer .pn-nav__link { font-size: 17px; } .pn-drawer .pn-mega__grid { border-left: 2px solid var(--pn-accent); padding-left: 16px; margin-bottom: 14px; } .pn-drawer__extra { gap: 0; padding-top: 28px; } .pn-drawer__btns { display: flex; flex-direction: column; gap: 10px; } .pn-drawer__btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 18px; border: 1px solid #D5D8DB; border-radius: 2px; background: #fff; color: var(--pn-ink); font-size: 15px; font-weight: 700; } .pn-drawer__btn:hover { border-color: var(--pn-ink); color: var(--pn-ink); } .pn-drawer__btn--primary { background: var(--pn-accent); border-color: var(--pn-accent); color: #fff; } .pn-drawer__btn--primary:hover { color: #fff; } .pn-drawer__btn--primary:hover { background: var(--pn-accent-h); border-color: var(--pn-accent-h); } .pn-drawer__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-drawer__langs { margin-top: 28px; } .pn-drawer__label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-muted); margin-bottom: 10px; } .pn-drawer__extra .pn-langs--drawer { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid #D5D8DB; border-radius: 2px; overflow: hidden; } .pn-drawer__extra .pn-langs--drawer .pn-langs__a { justify-content: center; gap: 9px; height: 48px; font-size: 14px; font-weight: 700; color: var(--pn-muted); opacity: 1; } .pn-drawer__extra .pn-langs--drawer .pn-langs__a + .pn-langs__a { border-left: 1px solid #D5D8DB; } .pn-drawer__extra .pn-langs--drawer .pn-langs__a:hover { color: var(--pn-ink); background: var(--pn-bg-2); } .pn-drawer__extra .pn-langs--drawer .pn-langs__a.is-current { background: var(--pn-ink); color: #fff; font-weight: 800; } .pn-drawer__extra .pn-drawer__cat { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; font-weight: 700; color: var(--pn-ink); } .pn-drawer__extra .pn-drawer__cat .pn-ic { color: var(--pn-accent); } .pn-drawer__extra .pn-drawer__cat:hover { color: var(--pn-accent); } } /* Desktop: „Produkty” jako prosta lista rozwijana (zamiast szerokiego mega menu) */ @media (min-width: 1101px) { .pn-nav__item.has-kids { position: relative; } .pn-mega { left: -18px; right: auto; min-width: 290px; border: 1px solid var(--pn-line); border-top: 2px solid var(--pn-accent); box-shadow: 0 18px 40px rgba(30, 34, 38, .12); } .pn-mega__grid.pn-wrap { display: block; max-width: none; margin: 0; padding: 8px 0; } .pn-mega__item + .pn-mega__item { border-top: 1px solid var(--pn-line-2); } .pn-mega__a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; white-space: nowrap; } .pn-mega__a::after { content: "→"; color: var(--pn-faint); font-size: 14px; transition: transform .15s, color .15s; } .pn-mega__a:hover { background: var(--pn-bg-2); } .pn-mega__a:hover::after { color: var(--pn-accent); transform: translateX(3px); } .pn-mega__t { font-size: 14.5px; font-weight: 600; margin: 0; } .pn-mega__d { display: none; } .pn-mega__sub { display: none; } } /* =================================================================== */ /* Strona „O nas” */ /* =================================================================== */ .pn-eyebrow--light .pn-eyebrow__t { color: #F1B79F; } .pn-ab-center { text-align: center; } .pn-ab-lead { font-size: 16px; line-height: 1.7; margin-bottom: 28px; } /* Nagłówek – zdjęcie z okładki katalogu */ .pn-ab-hero { position: relative; min-height: 560px; display: flex; align-items: center; background: #141619 var(--pn-ab-hero) center 62% / cover no-repeat; color: #C9CDD2; overflow: hidden; } .pn-ab-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 19, 21, .92) 0%, rgba(17, 19, 21, .72) 38%, rgba(17, 19, 21, .12) 72%), linear-gradient(0deg, rgba(17, 19, 21, .55) 0%, rgba(17, 19, 21, 0) 40%); } .pn-ab-hero__in { position: relative; width: 100%; padding-top: 72px; padding-bottom: 80px; } .pn-ab-hero__h { color: #fff; font-size: 64px; font-weight: 800; line-height: 1.04; letter-spacing: -.035em; max-width: 720px; margin-bottom: 24px; } .pn-ab-hero__lead { font-size: 18px; line-height: 1.7; max-width: 560px; margin: 0; color: #D5D8DC; } /* Wstęp */ .pn-ab-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; padding-top: 96px; } .pn-ab-intro .pn-h2 { font-size: 34px; line-height: 1.18; margin-bottom: 22px; } .pn-ab-intro__body p { font-size: 16px; line-height: 1.8; } .pn-ab-intro__gal { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 480px; } .pn-ab-intro__gal > div img { width: 100%; height: 100%; object-fit: cover; } .pn-ab-intro__big { grid-row: 1 / 3; } .pn-ab-intro__small { grid-row: 2 / 3; grid-column: 2; } .pn-madein { position: absolute; top: 18px; right: 18px; width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: radial-gradient(circle at 35% 30%, #FAFAFA 0%, #D9DCDF 45%, #AEB3B8 100%); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--pn-accent), 0 18px 40px rgba(20, 22, 25, .25); } .pn-madein__flag { width: 46px; height: 30px; background: linear-gradient(180deg, #fff 50%, #D4213D 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); border-radius: 2px; } .pn-madein__t { font-size: 13px; font-weight: 800; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--pn-ink); } /* Wyróżniki */ .pn-ab-values { padding-top: 104px; } .pn-ab-values .pn-h2 { margin-bottom: 36px; } .pn-ab-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--pn-line); } .pn-ab-value { padding: 34px 28px 30px; border-right: 1px solid var(--pn-line); } .pn-ab-value:last-child { border-right: 0; } .pn-ab-value__ic { width: 60px; height: 60px; border-radius: 50%; background: #FBF3F0; color: var(--pn-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .pn-ab-value h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; } .pn-ab-value p { font-size: 14px; line-height: 1.7; margin: 0; } /* Produkcja */ .pn-ab-proc { margin-top: 104px; background: var(--pn-bg-2); border-top: 1px solid var(--pn-line); border-bottom: 1px solid var(--pn-line); } .pn-ab-proc__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: stretch; padding-top: 88px; padding-bottom: 88px; } .pn-ab-proc__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; } .pn-ab-steps { list-style: none; margin: 0; padding: 0; } .pn-ab-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--pn-line); } .pn-ab-steps li:last-child { border-bottom: 1px solid var(--pn-line); } .pn-ab-steps__n { font-size: 26px; font-weight: 300; color: var(--pn-accent); line-height: 1.1; letter-spacing: -.02em; } .pn-ab-steps h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; } .pn-ab-steps p { font-size: 14px; line-height: 1.7; margin: 0; } /* Co produkujemy */ .pn-ab-cats { padding-top: 104px; } .pn-ab-cats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .pn-ab-cat { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pn-line); color: var(--pn-ink); transition: border-color .15s, box-shadow .2s, transform .2s; } .pn-ab-cat:hover { border-color: var(--pn-ink); box-shadow: var(--pn-shadow); transform: translateY(-3px); color: var(--pn-ink); } .pn-ab-cat__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pn-bg); } .pn-ab-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .pn-ab-cat:hover .pn-ab-cat__img img { transform: scale(1.05); } .pn-ab-cat__n { position: absolute; top: 12px; left: 12px; padding: 3px 8px; background: rgba(20, 22, 25, .75); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; } .pn-ab-cat__t { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; font-size: 15px; font-weight: 700; line-height: 1.35; } .pn-ab-cat__t span { color: var(--pn-muted); transition: transform .2s, color .2s; } .pn-ab-cat:hover .pn-ab-cat__t span { color: var(--pn-accent); transform: translateX(3px); } /* Jak zamówić – ciemna sekcja jak w katalogu */ .pn-ab-order { margin-top: 104px; background: linear-gradient(118deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 70%), #17191C; color: #A9AEB5; padding: 88px 0 92px; } .pn-ab-order__h { color: #fff; font-size: 34px; margin-bottom: 44px; } .pn-ab-order__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .pn-ab-order__grid li { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; } .pn-ab-order__n { display: block; font-size: 48px; font-weight: 800; color: var(--pn-accent); line-height: 1; margin-bottom: 18px; letter-spacing: -.02em; } .pn-ab-order__grid h3 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 8px; } .pn-ab-order__grid p { font-size: 15px; line-height: 1.7; margin: 0; } /* Zaproszenie */ .pn-ab-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-top: 88px; padding-bottom: 96px; } .pn-ab-cta .pn-h2 { font-size: 34px; margin-bottom: 8px; } .pn-ab-cta p { font-size: 16px; margin: 0; } .pn-ab-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 1100px) { .pn-ab-hero { min-height: 460px; } .pn-ab-hero__h { font-size: 48px; } .pn-ab-intro, .pn-ab-proc__in { grid-template-columns: 1fr; gap: 44px; } .pn-ab-intro { padding-top: 64px; } .pn-ab-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-ab-value:nth-child(2) { border-right: 0; } .pn-ab-value:nth-child(-n+2) { border-bottom: 1px solid var(--pn-line); } .pn-ab-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-ab-proc__media img { min-height: 300px; max-height: 420px; } .pn-ab-values, .pn-ab-cats { padding-top: 72px; } .pn-ab-proc, .pn-ab-order { margin-top: 72px; } } @media (max-width: 680px) { .pn-ab-hero { min-height: 420px; background-position: 65% 70%; } .pn-ab-hero::before { background: linear-gradient(180deg, rgba(17, 19, 21, .85) 0%, rgba(17, 19, 21, .55) 60%, rgba(17, 19, 21, .35) 100%); } .pn-ab-hero__in { padding-top: 48px; padding-bottom: 56px; } .pn-ab-hero__h { font-size: 38px; } .pn-ab-hero__lead { font-size: 16px; } .pn-ab-intro .pn-h2, .pn-ab-order__h, .pn-ab-cta .pn-h2 { font-size: 27px; } .pn-ab-intro__gal { height: 340px; gap: 10px; } .pn-madein { width: 112px; height: 112px; top: 10px; right: 10px; gap: 5px; } .pn-madein__flag { width: 34px; height: 22px; } .pn-madein__t { font-size: 10.5px; } .pn-ab-values__grid { grid-template-columns: 1fr; } .pn-ab-value { border-right: 0 !important; border-bottom: 1px solid var(--pn-line); } .pn-ab-value:last-child { border-bottom: 0; } .pn-ab-cats__grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pn-ab-cat__t { padding: 12px 12px 14px; font-size: 13.5px; } .pn-ab-order { padding: 64px 0; } .pn-ab-order__grid { grid-template-columns: 1fr; gap: 28px; } .pn-ab-proc__in { padding-top: 56px; padding-bottom: 56px; } .pn-ab-cta__btns, .pn-ab-cta__btns .pn-btn { width: 100%; } } @media (max-width: 680px) { .pn-ab-cats .pn-sechead { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Długi opis kategorii / sklepu pod produktami */ .pn-longtxt { margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--pn-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 64px; align-items: start; } .pn-longtxt > h2 { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: calc(var(--pn-header-h) + 24px); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0; } .pn-longtxt > h2::after { content: ""; display: block; width: 44px; height: 2px; background: var(--pn-accent); margin-top: 18px; } .pn-longtxt > :not(h2) { grid-column: 2; } .pn-longtxt p { font-size: 15px; line-height: 1.85; margin: 0; } .pn-longtxt h3 { font-size: 17px; font-weight: 800; margin: 12px 0 0; } .pn-longtxt ul { margin: 0; padding-left: 1.2em; line-height: 1.8; } @media (max-width: 860px) { .pn-longtxt { grid-template-columns: 1fr; margin-top: 48px; padding-top: 32px; } .pn-longtxt > h2 { position: static; grid-row: auto; font-size: 22px; } .pn-longtxt > :not(h2) { grid-column: 1; } } /* Karta kategorii – poprawki */ @media (min-width: 1101px) { .pn-shop__side { position: sticky; top: calc(var(--pn-header-h) + 32px); max-height: calc(100vh - var(--pn-header-h) - 48px); overflow-y: auto; } .admin-bar .pn-shop__side { top: calc(var(--pn-header-h) + 64px); } } .woocommerce .pn-sort .woocommerce-ordering, .pn-sort .woocommerce-ordering { float: none; margin: 0; display: flex; align-items: center; } .pn-sort select.orderby { height: 32px; line-height: 32px; padding: 0 22px 0 0; margin: 0; vertical-align: middle; } .pn-sort__l { line-height: 32px; } /* Długi opis: bez pustych wierszy siatki pod tekstem */ .pn-longtxt { row-gap: 0; margin-bottom: 8px; } .pn-longtxt p { margin: 0 0 16px; } .pn-longtxt > :last-child { margin-bottom: 0; } .pn-longtxt > h2 { top: calc(var(--pn-header-h) + 56px); } .admin-bar .pn-longtxt > h2 { top: calc(var(--pn-header-h) + 88px); } /* FAQ na stronie głównej: lewa kolumna przyklejona */ @media (min-width: 1101px) { .pn-faqsec > :first-child { position: sticky; top: calc(var(--pn-header-h) + 40px); } .admin-bar .pn-faqsec > :first-child { top: calc(var(--pn-header-h) + 72px); } } /* =================================================================== */ /* Logowanie i rejestracja */ /* =================================================================== */ .pn-auth__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-accent); margin-bottom: 14px; } .pn-auth__h { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; } .pn-auth__lead { font-size: 15px; line-height: 1.7; margin: 0 0 28px; max-width: 560px; } .pn-auth__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pn-auth__labelrow a { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; } .pn-auth__check { display: flex !important; align-items: flex-start; gap: 10px; font-size: 13.5px !important; font-weight: 500 !important; color: var(--pn-body) !important; line-height: 1.5; cursor: pointer; margin: 0 !important; } .pn-auth__check input { accent-color: var(--pn-accent); width: 17px; height: 17px; margin: 1px 0 0; flex: none; } .pn-auth__check a { font-weight: 700; } .pn-auth__submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 0; background: var(--pn-accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .15s; } .pn-auth__submit:hover { background: var(--pn-accent-h); } .pn-auth__submit--auto { width: auto; padding: 0 32px; margin: 0; } .pn-auth form.login .form-row, .pn-reg form .form-row { margin: 0 0 18px; padding: 0; } .pn-auth form .input-text, .pn-reg form .input-text, .pn-reg form select { width: 100%; height: 50px; border: 1px solid #D5D8DB; border-radius: 0; padding: 0 14px; font-family: inherit; font-size: 14.5px; color: var(--pn-ink); background: #fff; } .pn-reg form select { padding-right: 36px; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238A9099'/%3E%3C/svg%3E") no-repeat right 14px center / 9px; } .pn-auth form .input-text:focus, .pn-reg form .input-text:focus, .pn-reg form select:focus { outline: none; border-color: var(--pn-ink); box-shadow: 0 0 0 3px rgba(30, 34, 38, .07); } .pn-auth form label, .pn-reg form label { display: block; font-size: 13px; font-weight: 700; color: var(--pn-ink); margin: 0 0 6px; } /* Logowanie: formularz + ciemny panel ze zdjęciem */ .pn-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--pn-line); background: #fff; max-width: 1180px; } .pn-auth__form { padding: 56px 56px 48px; } .pn-auth__form form, .pn-auth__alt { max-width: 440px; } .pn-auth__alt { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--pn-line); } .pn-auth__alt strong { display: block; font-size: 16px; color: var(--pn-ink); margin-bottom: 6px; } .pn-auth__alt p { font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; } .pn-auth__side { position: relative; display: flex; align-items: center; background: #141619 var(--pn-auth-bg) center / cover no-repeat; color: #A9AEB5; } .pn-auth__side::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 19, 21, .72) 0%, rgba(17, 19, 21, .88) 100%); } .pn-auth__side-in { position: relative; padding: 56px; } .pn-auth__side .pn-auth__eyebrow { color: #F1B79F; } .pn-auth__side-h { color: #fff; font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 28px; } .pn-auth__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .pn-auth__list li { display: flex; gap: 14px; } .pn-auth__list .pn-ic { color: var(--pn-accent); flex: none; margin-top: 2px; } .pn-auth__list strong { display: block; color: #fff; font-size: 15px; margin-bottom: 3px; } .pn-auth__list span { font-size: 13.5px; line-height: 1.6; } /* Rejestracja: formularz + kolumna korzyści */ .pn-reg { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; } .pn-reg__form { border: 1px solid var(--pn-line); background: #fff; padding: 48px 48px 40px; } .pn-reg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .pn-reg__grid .form-row-wide, .pn-reg__consents, .pn-reg__bar { grid-column: 1 / -1; } .pn-reg__pc { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; } .pn-reg__passnote { align-self: end; font-size: 13px; color: var(--pn-muted); line-height: 1.5; padding-bottom: 14px !important; } .pn-reg__consents { display: grid; gap: 12px; margin: 8px 0 26px; } .pn-reg__bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--pn-line); } .pn-reg__note { font-size: 13px; color: var(--pn-muted); } .pn-reg__side { position: sticky; top: calc(var(--pn-header-h) + 24px); display: grid; gap: 16px; } .pn-reg__dark { background: linear-gradient(118deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 70%), #1B1E22; padding: 32px 30px; color: #A9AEB5; } .pn-reg__dark .pn-auth__eyebrow { color: #F1B79F; margin-bottom: 20px; } .pn-reg__benefit + .pn-reg__benefit { margin-top: 18px; } .pn-reg__benefit strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; } .pn-reg__benefit span { font-size: 13.5px; line-height: 1.6; } .pn-reg__help { border: 1px solid var(--pn-line); padding: 26px 28px; background: #fff; } .pn-reg__help strong { display: block; font-size: 16px; color: var(--pn-ink); margin-bottom: 6px; } .pn-reg__help p { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; } .pn-reg__help a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--pn-ink); margin-top: 8px; } .pn-reg__help a .pn-ic { color: var(--pn-accent); } @media (max-width: 1100px) { .pn-auth, .pn-reg { grid-template-columns: 1fr; } .pn-reg__side { position: static; } } @media (max-width: 680px) { .pn-auth__form, .pn-auth__side-in, .pn-reg__form { padding: 30px 20px; } .pn-auth__h { font-size: 26px; } .pn-reg__grid { grid-template-columns: 1fr; } .pn-reg__grid .form-row-first, .pn-reg__grid .form-row-last { grid-column: 1; } .pn-reg__bar .pn-auth__submit--auto { width: 100%; } } .woocommerce form .pn-auth__submit, .pn-auth__submit { float: none !important; margin-right: 0; } .pn-auth { max-width: none; } /* =================================================================== */ /* Wpis blogowy */ /* =================================================================== */ .pn-art__head { background: var(--pn-bg-2); border-bottom: 1px solid var(--pn-line); } .pn-art__head-in { padding-top: 56px; padding-bottom: 132px; } .pn-art__layout--noimg { margin-top: 56px; } .pn-art__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--pn-muted); margin-bottom: 18px; } .pn-art__meta > span { display: inline-flex; align-items: center; gap: 6px; } .pn-art__meta .pn-ic { color: var(--pn-accent); } .pn-art__h { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; max-width: 960px; margin: 0; } .pn-art__lead { font-size: 19px; line-height: 1.65; max-width: 820px; margin: 22px 0 0; color: var(--pn-body); } .pn-art__img { margin-top: -84px; margin-bottom: 0; } .pn-art__img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; box-shadow: 0 24px 60px rgba(20, 22, 25, .14); } .pn-art__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; padding-top: 56px; padding-bottom: 88px; } .pn-art__body { min-width: 0; max-width: 780px; } .pn-art__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--pn-line); } .pn-art__foot .pn-back { margin-top: 0; } /* Kolumna boczna */ .pn-art__side { position: sticky; top: calc(var(--pn-header-h) + 32px); display: grid; gap: 20px; } .admin-bar .pn-art__side { top: calc(var(--pn-header-h) + 64px); } .pn-toc { border: 1px solid var(--pn-line); background: #fff; padding: 24px 24px 18px; max-height: calc(100vh - var(--pn-header-h) - 330px); overflow-y: auto; } .pn-toc__h { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-accent); margin-bottom: 12px; } .pn-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .pn-toc li { counter-increment: toc; } .pn-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 8px 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--pn-body); border-top: 1px solid var(--pn-line-2); } .pn-toc li:first-child a { border-top: 0; } .pn-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11.5px; font-weight: 800; color: var(--pn-faint); padding-top: 1px; } .pn-toc a:hover, .pn-toc a.is-active { color: var(--pn-ink); } .pn-toc a.is-active::before { color: var(--pn-accent); } .pn-art__cta { background: linear-gradient(118deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 70%), #1B1E22; color: #A9AEB5; padding: 28px 26px; } .pn-art__cta strong { display: block; color: #fff; font-size: 18px; line-height: 1.3; margin-bottom: 8px; } .pn-art__cta p { font-size: 13.5px; line-height: 1.65; margin: 0 0 20px; } .pn-art__cta .pn-btn { width: 100%; } .pn-art__tel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: #fff; font-weight: 700; font-size: 14px; } .pn-art__tel .pn-ic { color: var(--pn-accent); } .pn-art__tel:hover { color: #F1B79F; } /* Typografia treści */ .pn-prose { font-size: 16.5px; line-height: 1.85; color: var(--pn-body); } .pn-prose > p:first-child { font-size: 18.5px; line-height: 1.75; color: #3A4046; } .pn-prose p { margin: 0 0 20px; } .pn-prose h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--pn-ink); margin: 56px 0 18px; padding-top: 28px; border-top: 1px solid var(--pn-line); scroll-margin-top: calc(var(--pn-header-h) + 24px); } .pn-prose h3 { font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--pn-ink); margin: 36px 0 12px; } .pn-prose h4 { font-size: 17px; font-weight: 800; color: var(--pn-ink); margin: 28px 0 10px; } .pn-prose strong { color: var(--pn-ink); font-weight: 700; } .pn-prose a { color: var(--pn-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .pn-prose a:hover { color: var(--pn-accent-h); } .pn-prose ul, .pn-prose ol { margin: 0 0 24px; padding: 0; list-style: none; } .pn-prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; } .pn-prose ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 8px; height: 8px; background: var(--pn-accent); } .pn-prose ol { counter-reset: pl; } .pn-prose ol li { position: relative; padding-left: 38px; margin-bottom: 12px; counter-increment: pl; } .pn-prose ol li::before { content: counter(pl, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: 14px; font-weight: 800; color: var(--pn-accent); } .pn-prose blockquote { margin: 32px 0; padding: 22px 28px; border-left: 3px solid var(--pn-accent); background: var(--pn-bg-2); font-size: 18px; line-height: 1.7; color: var(--pn-ink); } .pn-prose blockquote p:last-child { margin: 0; } .pn-prose img { height: auto; } .pn-prose figure { margin: 32px 0; } .pn-prose figcaption { font-size: 13px; color: var(--pn-muted); margin-top: 8px; } .pn-prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 14.5px; } .pn-prose th, .pn-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--pn-line); } .pn-prose th { background: var(--pn-bg-2); color: var(--pn-ink); font-weight: 700; } .pn-prose hr { border: 0; border-top: 1px solid var(--pn-line); margin: 40px 0; } /* Kolejne wpisy */ .pn-art-more { background: var(--pn-bg-2); border-top: 1px solid var(--pn-line); padding: 72px 0 88px; } @media (max-width: 1100px) { .pn-art__layout { grid-template-columns: 1fr; gap: 40px; } .pn-art__side { position: static; } .pn-toc { max-height: none; } .pn-art__h { font-size: 38px; } } @media (max-width: 680px) { .pn-art__head-in { padding-top: 36px; padding-bottom: 88px; } .pn-art__h { font-size: 29px; } .pn-art__lead { font-size: 16.5px; } .pn-art__img { margin-top: -56px; } .pn-art__img img { aspect-ratio: 16 / 10; } .pn-art__layout { padding-top: 36px; padding-bottom: 56px; } .pn-prose { font-size: 16px; } .pn-prose > p:first-child { font-size: 17px; } .pn-prose h2 { font-size: 23px; margin-top: 44px; } .pn-art-more { padding: 56px 0; } } .pn-prose .pn-back, .pn-prose .pn-btn { text-decoration: none; } @media (max-width: 1100px) { .pn-art__layout { display: flex; flex-direction: column; gap: 32px; } .pn-art__side { display: contents; } .pn-toc { order: -1; } .pn-art__body { order: 1; max-width: none; } .pn-art__cta { order: 2; } } /* =================================================================== */ /* Blog – lista wpisów */ /* =================================================================== */ .pn-bloghead { background: var(--pn-bg-2); border-bottom: 1px solid var(--pn-line); } .pn-bloghead__in { padding-top: 56px; padding-bottom: 60px; } .pn-bloghead__h { font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0; } .pn-bloghead__lead { font-size: 18px; line-height: 1.65; max-width: 720px; margin: 18px 0 0; } .pn-blog { padding-top: 56px; padding-bottom: 96px; } .pn-post__read { display: inline-flex; align-items: center; gap: 5px; } .pn-post__read .pn-ic { color: var(--pn-accent); } .pn-post__t { font-size: 17px; line-height: 1.4; } /* Wyróżniony wpis */ .pn-feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border: 1px solid var(--pn-line); background: #fff; margin-bottom: 40px; transition: box-shadow .2s; } .pn-feat:hover { box-shadow: var(--pn-shadow); } .pn-feat__media { display: block; overflow: hidden; background: #EDEEF0; min-height: 380px; } .pn-feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .pn-feat:hover .pn-feat__media img { transform: scale(1.03); } .pn-feat__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px 48px 44px; border-left: 1px solid var(--pn-line); } .pn-feat__tag { display: inline-block; padding: 5px 10px; background: #FBF3F0; color: var(--pn-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; } .pn-feat__t { font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 4px 0 16px; } .pn-feat__t a { color: var(--pn-ink); } .pn-feat__t a:hover { color: var(--pn-accent); } .pn-feat__ex { font-size: 15.5px; line-height: 1.75; margin: 0 0 28px; } .pn-blog__grid { margin-top: 0; } .pn-blog__empty { max-width: 560px; margin: 0 auto; } /* Zaproszenie pod listą */ .pn-blog__cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 64px; padding: 36px 40px; background: linear-gradient(118deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 70%), #1B1E22; color: #A9AEB5; } .pn-blog__cta strong { display: block; color: #fff; font-size: 22px; line-height: 1.3; margin-bottom: 6px; } .pn-blog__cta p { margin: 0; font-size: 15px; } .pn-blog__cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } .pn-blog__cta .pn-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .pn-blog__cta .pn-btn--ghost:hover { border-color: #fff; color: #fff; } @media (max-width: 1100px) { .pn-feat { grid-template-columns: 1fr; } .pn-feat__media { min-height: 0; aspect-ratio: 16 / 9; } .pn-feat__body { border-left: 0; border-top: 1px solid var(--pn-line); padding: 32px; } .pn-bloghead__h { font-size: 40px; } .pn-posts--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .pn-bloghead__in { padding-top: 36px; padding-bottom: 40px; } .pn-bloghead__h { font-size: 32px; } .pn-bloghead__lead { font-size: 16px; } .pn-blog { padding-top: 32px; padding-bottom: 64px; } .pn-feat__body { padding: 24px 20px; } .pn-feat__t { font-size: 23px; } .pn-posts--list { grid-template-columns: 1fr; } .pn-blog__cta { padding: 28px 22px; margin-top: 48px; } .pn-blog__cta-btns, .pn-blog__cta-btns .pn-btn { width: 100%; } } /* Poprawki: flaga EN, stopka bez płatności, większe logo */ .pn-flag--en { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E") center / cover no-repeat; } .pn-flag--en::before, .pn-flag--en::after { display: none; } .pn-foot__bottom-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } @media (max-width: 860px) { .pn-foot__bottom-in { grid-template-columns: 1fr; } } .pn-foot__brand .pn-logo__img { height: 42px; } /* Działy sprzedaży na stronie kontaktu */ .pn-sales { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; } .pn-sales__box { border: 1px solid var(--pn-line); border-top: 2px solid var(--pn-accent); background: #fff; padding: 22px 24px; } .pn-sales__box h3 { font-size: 16px; font-weight: 800; color: var(--pn-ink); margin: 0 0 4px; } .pn-sales__box p { font-size: 13px; color: var(--pn-muted); line-height: 1.55; margin: 0 0 14px; } .pn-sales__box a { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--pn-ink); margin-top: 8px; } .pn-sales__box a:hover { color: var(--pn-accent); } .pn-sales__box .pn-ic { color: var(--pn-accent); flex: none; } .pn-specs__pdf--card { margin-top: 12px; } .pn-specs__fmt { font-family: var(--pn-mono); font-size: 11px; color: var(--pn-muted); } /* Hero: opcja „pokaż całe zdjęcie” */ .pn-hero__media.is-contain { background: var(--pn-bg); } .pn-hero__media.is-contain img { object-fit: contain; object-position: center; } /* Ciemne sekcje – kontekst pozycjonowania */ .pn-custom, .pn-banner, .pn-foot__cta, .pn-ab-order, .pn-art__cta, .pn-reg__dark, .pn-blog__cta { position: relative; } .pn-custom > * { position: relative; z-index: 1; } .pn-banner__txt { position: relative; z-index: 2; } /* Propozycja wersji językowej – okno na środku ekranu */ .pn-langpop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; } .pn-langpop[hidden] { display: none; } .pn-langpop.is-in { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } .pn-langpop__bg { position: absolute; inset: 0; background: rgba(22, 25, 28, .58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; } .pn-langpop__box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 6px; box-shadow: 0 40px 90px rgba(12, 14, 16, .35), 0 2px 8px rgba(12, 14, 16, .08); text-align: center; transform: translateY(18px) scale(.965); transition: transform .45s cubic-bezier(.2, .9, .25, 1); } .pn-langpop.is-in .pn-langpop__box { transform: none; } .pn-langpop__box:focus { outline: none; } .pn-langpop__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pn-accent); border-radius: 6px 6px 0 0; z-index: 2; } .pn-langpop__head { position: relative; padding: 46px 32px 26px; background: linear-gradient(180deg, #F2F3F4 0%, #FAFAFB 62%, #fff 100%); overflow: hidden; } .pn-langpop__head::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(30, 34, 38, .028) 0 1px, transparent 1px 7px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; } .pn-langpop__flags { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 22px; } .pn-langpop__flag { position: relative; display: block; border-radius: 9px; overflow: hidden; line-height: 0; } .pn-langpop__flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(30, 34, 38, .14); pointer-events: none; } .pn-langpop__flag .pn-flag { width: 100%; height: 100%; box-shadow: none; } .pn-langpop__flag--from { width: 62px; height: 42px; opacity: .45; filter: saturate(.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transform: translateX(10px); transition: opacity .5s ease .25s, transform .6s cubic-bezier(.2, .9, .25, 1) .2s; } .pn-langpop__flag--to { width: 84px; height: 56px; box-shadow: 0 0 0 1px rgba(30, 34, 38, .1), 0 0 0 5px #fff, 0 16px 30px rgba(30, 34, 38, .2); transform: translateX(-10px) scale(.9); opacity: 0; transition: opacity .5s ease .3s, transform .6s cubic-bezier(.2, .9, .25, 1) .3s; } .pn-langpop.is-in .pn-langpop__flag--from { transform: none; } .pn-langpop.is-in .pn-langpop__flag--to { transform: none; opacity: 1; } .pn-langpop__arr { color: var(--pn-faint); line-height: 0; } .pn-langpop__code { position: relative; z-index: 1; display: inline-block; margin-top: 24px; font-family: var(--pn-mono); font-size: 12px; font-weight: 500; letter-spacing: .24em; color: var(--pn-accent); } .pn-langpop__code i { font-style: normal; color: var(--pn-faint); letter-spacing: 0; margin: 0 .35em; } .pn-langpop__body { padding: 4px 40px 36px; } .pn-langpop__t { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.22; color: var(--pn-ink); margin: 0 0 12px; text-wrap: balance; } .pn-langpop__d { font-size: 15px; line-height: 1.65; color: var(--pn-body); margin: 0 auto; max-width: 340px; text-wrap: pretty; } .pn-langpop__btns { display: grid; gap: 10px; margin-top: 28px; } .pn-langpop__btns .pn-btn { width: 100%; padding: 17px 22px; } .pn-langpop__go .pn-btn__arr { transition: transform .2s; } .pn-langpop__go:hover .pn-btn__arr { transform: translateX(4px); } .pn-langpop__stay { background: #fff; font-family: inherit; } .pn-langpop__x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .8); color: var(--pn-muted); cursor: pointer; transition: background-color .15s, color .15s; } .pn-langpop__x:hover { background: #fff; color: var(--pn-ink); } html.pn-lp-lock, html.pn-lp-lock body { overflow: hidden; } @media (max-width: 520px) { .pn-langpop { padding: 14px; } .pn-langpop__head { padding: 40px 20px 22px; } .pn-langpop__body { padding: 2px 22px 24px; } .pn-langpop__t { font-size: 22px; } .pn-langpop__d { font-size: 14.5px; } .pn-langpop__btns { margin-top: 24px; } } @media (prefers-reduced-motion: reduce) { .pn-langpop, .pn-langpop__box, .pn-langpop__flag--from, .pn-langpop__flag--to { transition: none; } } }