/* * The shop's pages — the cart, the checkout, the customer account — in the site's design. * Loaded on those three pages only, in place of WooCommerce's own stylesheets * (gorke_theme_shop_styles() in inc/shop.php), so everything WooCommerce prints there is * styled here: the theme's overrides in woocommerce/, and the markup it still renders * itself — form rows, notices, the delivery and payment lists, the account screens. * The cards, panels and tables borrow the classes of Kreator Zapytania and its summary * page from site.css; what is here is what those do not cover. */ /* * Panel Klienta's type scale — four sizes and nothing between them: a screen's title, a * card's or a row's heading, text (values, labels, links, buttons, tables), and small print * (notes, hints, the caps labels over a value). Until 2026-10-20 the account used nine, * 10px to 24px, picked rule by rule. Beside them one display size, for the dark card's * title on every screen and the free-delivery threshold on Rabaty i warunki. */ .shop-section{--shop-title:24px;--shop-heading:16px;--shop-text:14px;--shop-small:12px;--shop-display:40px} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .shop-section .woocommerce{min-width:0} .shop-section h2{font-size:1.18rem;letter-spacing:-.02em;color:var(--navy)} .shop-section h3{color:var(--navy)} .shop-section .woocommerce-Price-amount{white-space:nowrap} .shop-section .tax_label,.shop-section .includes_tax{color:var(--muted);font-size:11px;font-weight:600} /* The photo of the devices beside the hero of the cart, the checkout and Panel Klienta (gorke_theme_shop_hero()). The other photo heroes are 630 px tall; this one keeps the height of its text, so the shop's pages start where they did. Its text column is 640 px rather than their 760, and the photo starts 30 px inside it, under the transparent end of its fade, so no line of the hero runs over the picture. The lead always takes two lines' height — the checkout's fills two, the cart's and Panel Klienta's one — so the hero is the same height on every one of these pages. That holds only while every title fits one line of the column in all three languages, which is why the checkout's reads "Złóż zamówienie." and the confirmation's "Dziękujemy!"; the longest today, "Zaloguj się do sklepu." in Polish, is 546 px of the 640. The cart's hero is the one taller, by its tally and the line over its lead. The photo fades out at its left and bottom edges as the home page's does, rather than the 8% of the other interior pages. Below 1061 px it is left out, as Kreator Zapytania's is: there it would stand above the content and push it down. */ @media(min-width:1061px){ .has-photo.shop-hero{min-height:0} .has-photo.shop-hero .wrap>*{max-width:640px} .has-photo.shop-hero .lead{min-height:3.3em} .has-photo.shop-hero .hero-photo{top:0;bottom:0;left:calc(max(20px,50% - 620px) + 610px);height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%),linear-gradient(0deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 25%),linear-gradient(0deg,transparent,#000 18%)} .shop-hero{--hero-photo-position:center} } @media(max-width:1060px){.shop-hero .hero-photo{display:none}} /* Notices — the same boxes as the site's form messages. */ .woocommerce-notices-wrapper:empty{display:none} .shop-section .woocommerce-message,.shop-section .woocommerce-info,.shop-section .woocommerce-error,.shop-section .woocommerce-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:13px 16px;color:var(--navy);background:var(--ice);border-radius:12px;font-size:14px;font-weight:650;list-style:none} .shop-section .woocommerce-message{color:#17613b;background:#eaf8f0} .shop-section .woocommerce-error{display:block;color:#9b2c38;background:#fff0f1} .shop-section .woocommerce-error li{margin:2px 0} .shop-section .woocommerce-message a,.shop-section .woocommerce-info a{color:var(--blue);font-weight:800} .shop-section .woocommerce-message .button,.shop-section .woocommerce-info .button{order:2;padding:8px 13px;color:#fff;background:var(--blue);border-radius:9px;font-size:13px} /* Koszyk, as the owner drew it on 2026-10-20: the cart's tally on the line under its title, and the table card on the soft ground. Beside the title it read as part of it; under it, it stays clear of the photo's fade too. */ .woocommerce-cart .shop-section{background:var(--soft)} /* The cart and the checkout share one layout, the devices' table on the left and the summary on the right (below, "Podsumowanie on the right"), so the table stands in the same place on the cart and on every step. The empty cart keeps the 1040 px column the two shared from 2026-10-20 to 2026-10-26, when the summary stood under the table: across the whole width the figures stood far from the device they belong to (the owner, 2026-10-20). */ .woocommerce-cart .shop-section .woocommerce:has(.wc-empty-cart-message){max-width:1040px} .shop-hero-head{display:grid;justify-items:start;gap:10px} .shop-cart-tally{margin:0;color:var(--muted);font-size:15px;white-space:nowrap} .shop-cart-tally[hidden]{display:none} /* The line in navy over the cart's lead (gorke_theme_shop_view()). */ .shop-hero-tagline{margin:22px 0 0;color:var(--navy);font-size:20px;font-weight:650;line-height:1.35;letter-spacing:-.01em} .shop-hero .shop-hero-tagline+.lead{margin-top:8px} /* The devices: one card, the column heads over a row per device. Heads and rows share one set of columns, so the figures line up under their heads; each cell's own label is for a screen reader here and shows on a phone, where the heads go. */ .shop-cart{display:grid;gap:22px} .shop-cart-main,.shop-cart-form{min-width:0;display:grid;gap:16px} .shop-items{--shop-cart-cols:80px minmax(0,1fr) 100px 128px 110px 34px;display:grid;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 38px rgba(9,24,71,.06)} .shop-items-head,.shop-item{display:grid;grid-template-columns:var(--shop-cart-cols);align-items:center;column-gap:16px;padding-inline:22px} .shop-items-head{padding-block:13px;color:var(--muted);font-size:13px;line-height:1.3} .shop-items-head span:first-child{grid-column:1/3} .shop-items-head span:nth-child(2),.shop-items-head span:nth-child(4){text-align:right} .shop-items-head span:nth-child(3){text-align:center} .shop-item{padding-block:16px;border-top:1px solid var(--line)} .shop-item-thumb.enquiry-item-thumb{width:80px;height:62px;border-radius:11px} /* Lp. — each device's place in the list, before its photo — on the cart and on Sprawdź zamówienie (`has-index`), the owner's wish of 2026-10-20. Pliki do pobrania's table has none. */ .shop-items.has-index{--shop-cart-cols:28px 80px minmax(0,1fr) 100px 128px 110px 34px} .shop-items.is-review.has-index{--shop-cart-cols:28px 80px minmax(0,1fr) 100px 90px 120px} .shop-items.has-index .shop-items-head span:first-child{grid-column:auto} .shop-items.has-index .shop-items-head span:nth-child(2){grid-column:2/4;text-align:left} .shop-items.has-index .shop-items-head span:nth-child(3),.shop-items.has-index .shop-items-head span:nth-child(5){text-align:right} .shop-items.has-index .shop-items-head span:nth-child(4){text-align:center} .shop-item-index{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums} /* Two lines — the symbol, then the name — each cut short rather than wrapped. */ .shop-item-copy{min-width:0} .shop-item-copy h3{margin:0;font-size:16px;line-height:1.3;letter-spacing:-.01em} .shop-item-copy h3 a:hover{color:var(--blue)} .shop-item-name{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.4} .shop-item-copy h3,.shop-item-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .shop-item-copy dl{margin:4px 0 0;color:var(--muted);font-size:12px} .shop-item .backorder_notification{margin:4px 0 0;color:#8a5a00;font-size:12px} .shop-item-group{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .shop-item-figure{display:grid;justify-items:end;gap:2px;text-align:right} .shop-item-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .shop-item-price .shop-item-value{color:var(--navy);font-size:15px} .shop-item-figure s{color:var(--muted);font-size:12px} .shop-item-net{color:var(--muted);font-size:12px;font-weight:400;line-height:1.3} .shop-item-total .shop-item-value{color:var(--navy);font-size:16px;font-weight:800} .shop-item-quantity{display:grid;justify-items:center} /* − and + inside the box with the number, as one control. Every field's border here is #7d879b, 3.6:1 on white and 3.4:1 on the soft ground — the 3:1 a control's edge needs (WCAG 1.4.11); the page's line colour, 1.26:1, is left to cards and rules, which are not controls. */ .shop-stepper{display:inline-flex;align-items:center;padding:2px;background:#fff;border:1px solid #7d879b;border-radius:11px;transition:.16s ease} .shop-stepper:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,98,220,.08)} .shop-stepper .quantity{display:block} .shop-stepper input.qty{width:40px;min-height:36px;padding:0;color:var(--navy);background:transparent;border:0;outline:0;text-align:center;font-size:15px;font-weight:700;appearance:textfield;-moz-appearance:textfield} .shop-stepper input.qty::-webkit-outer-spin-button,.shop-stepper input.qty::-webkit-inner-spin-button{margin:0;-webkit-appearance:none} .shop-stepper button{width:36px;height:36px;display:grid;place-items:center;padding:0;color:var(--navy);background:none;border:0;border-radius:9px;cursor:pointer;font-size:20px;line-height:1;transition:.16s ease} .shop-stepper button:hover,.shop-stepper button:focus-visible{color:var(--blue);background:var(--soft)} .shop-stepper button:disabled{color:var(--muted);background:none;opacity:.45;cursor:not-allowed} .shop-item-remove{justify-self:end} .shop-item-remove a{width:36px;height:36px;display:grid;place-items:center;color:var(--muted);border-radius:9px;transition:.16s ease} .shop-item-remove svg{width:20px;height:20px} .shop-item-remove a:hover,.shop-item-remove a:focus-visible{color:#a12036;background:#fff0f1} a.enquiry-add-group{display:block;text-align:center} /* Under the card: the way back to the catalogue, and a discount code when WooCommerce takes them. */ .shop-cart-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .shop-cart-back{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-size:15px;font-weight:500} .shop-cart-back svg{width:20px;height:20px;flex:0 0 auto} .shop-cart-back:hover{color:var(--blue)} .shop-coupon{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .shop-coupon label{color:var(--muted);font-size:12px;font-weight:700} .shop-coupon input{width:170px;min-height:40px;padding:8px 11px;color:var(--navy);background:#fff;border:1px solid #7d879b;border-radius:9px} .shop-coupon button,.shop-cart-update{min-height:40px;padding:9px 15px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:800;cursor:pointer} .shop-cart-update:disabled{opacity:.5;cursor:not-allowed} .gorke-shop-live .shop-cart-update{display:none} /* Podsumowanie on the right of the cart and of every step of the checkout — as until 2026-10-20, and again at the owner's word on 2026-10-26 — with Wsparcie techniczne (gorke_theme_shop_support()) under it. The column runs the height of the page's: the summary keeps to the top of the screen while the page scrolls, so the way on stays in reach on a long step, moving inside its track (.shop-side-track), and stops where the track ends, above the support card that closes the column. Below 1200 px the devices' table needs the width: the column goes under the page and the summary takes its width again. When the last device leaves the cart without a reload, WooCommerce swaps the whole cart for the empty one, and the column goes with it. */ .shop-cart-side,.shop-checkout-summary{min-width:0;display:grid;gap:28px;align-content:start} .shop-side-track,.shop-checkout-main{min-width:0} /* The left column is stretched to the right one's height: its rows keep to their content. */ .shop-checkout-main{display:grid;gap:30px;align-content:start} .shop-cart-main{align-content:start} .shop-support{max-width:420px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 38px rgba(9,24,71,.06)} .shop-support-kicker{display:flex;align-items:center;gap:14px;margin:0;color:var(--blue);font-size:var(--shop-small);font-weight:800;letter-spacing:.12em;text-transform:uppercase} .shop-support-icon{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;color:#1f8797;background:rgba(40,183,201,.12);border-radius:11px} .shop-section .shop-support-title{margin:22px 0 0;font-size:var(--shop-title);line-height:1.2;letter-spacing:-.03em} .shop-support-text{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.6} .shop-support-topics{display:grid;gap:14px;margin:22px 0 0;padding:0;list-style:none} .shop-support-topic{display:flex;align-items:center;gap:12px;color:var(--navy);font-size:15px;line-height:1.4} .shop-support .shop-icon{width:18px;height:18px;flex:0 0 auto} .shop-support-topics .shop-icon{color:var(--blue)} .shop-support-button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;margin-top:26px;padding:12px 18px;color:var(--blue);background:var(--soft);border:1px solid rgba(45,98,220,.32);border-radius:12px;font-size:15px;font-weight:700;transition:.16s ease} .shop-support-button:hover,.shop-support-button:focus-visible{background:var(--ice);border-color:var(--blue)} .shop-support-phone{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;color:var(--navy);font-size:15px} .shop-support-phone:hover{color:var(--blue)} @media(min-width:1200px){ .shop-cart,.shop-checkout{grid-template-columns:minmax(0,1fr) 360px;column-gap:32px;align-items:stretch} .shop-cart-side,.shop-checkout-summary{grid-template-rows:1fr auto;align-content:stretch} .shop-side-track>.cart_totals,.shop-side-track>#order_review{position:sticky;top:calc(100px + var(--topline-h))} } /* In a low window the header scrolls away (wordpress.css), and the summary with the page. */ @media(min-width:1200px) and (max-height:500px){.shop-side-track>.cart_totals,.shop-side-track>#order_review{position:static}} /* Podsumowanie — the checkout's summary panel: goods, delivery and VAT, a line, then the total, large. The cart's dark card restyles the same table further down. Its colours are custom properties, their fallbacks the light panel's, so a dark card is one rule that sets them (the checkout's, under "Zamówienie"). */ .shop-section .shop-summary-title{margin:0 0 12px;color:var(--sum-strong,var(--navy));font-size:24px;line-height:1.1;letter-spacing:-.04em} .shop-totals-table{width:100%;border-collapse:collapse;font-size:13px} .shop-totals-table th,.shop-totals-table td{padding:12px 0;vertical-align:top;border-bottom:1px solid var(--line)} .shop-totals-table th{padding-right:12px;color:var(--muted);font-weight:700;text-align:left;white-space:nowrap} .shop-totals-table td{color:var(--sum-strong,var(--navy));font-weight:800;text-align:right} .shop-totals-table .order-total th{color:var(--sum-strong,var(--navy));font-size:14px;font-weight:850} .shop-totals-table .order-total td{font-size:20px;font-weight:900;line-height:1.2} .shop-totals-table tr:last-child th,.shop-totals-table tr:last-child td{border-bottom:0} .shop-totals-table .shop-discount td{color:var(--sum-good,#17613b)} .shop-totals-table .order-total small{display:block;font-size:11px;font-weight:600} .woocommerce-shipping-methods{margin:0;padding:0;list-style:none} .woocommerce-shipping-methods li{display:flex;align-items:flex-start;justify-content:flex-end;gap:7px;margin:0 0 6px;font-weight:700;text-align:right} .woocommerce-shipping-methods li:last-child{margin-bottom:0} .woocommerce-shipping-methods input{margin:3px 0 0;accent-color:var(--blue)} .woocommerce-shipping-methods label{cursor:pointer} .woocommerce-shipping-destination,.woocommerce-shipping-contents{margin:6px 0 0;color:var(--muted);font-size:11px;font-weight:600} .shipping-calculator-button{color:var(--blue);font-size:12px;font-weight:800} .shipping-calculator-form{margin-top:10px;text-align:left} .shipping-calculator-form p{margin:0 0 8px} .shipping-calculator-form button{min-height:36px;padding:7px 12px;color:#fff;background:var(--navy);border:0;border-radius:9px;font-weight:800;cursor:pointer} /* How far the cart is from free delivery, under the totals of both summaries (gorke_theme_shop_free_shipping()). */ .shop-free-shipping{display:grid;gap:9px;margin-top:16px;padding:13px 14px;background:var(--sum-box,var(--soft));border-radius:12px} .shop-free-shipping p{margin:0} .shop-free-shipping-title{display:flex;align-items:center;gap:9px;color:var(--sum-strong,var(--navy));font-size:14px;line-height:1.35} .shop-free-shipping-title svg{width:20px;height:20px;flex:0 0 auto;color:var(--sum-strong,var(--navy))} .shop-free-shipping-title strong{font-weight:850} .shop-free-shipping-title .woocommerce-Price-amount{color:var(--sum-accent,var(--blue))} .shop-free-shipping-note{color:var(--sum-soft,var(--muted));font-size:12px;line-height:1.45} .shop-free-shipping progress{width:100%;height:7px;display:block;border:0;border-radius:9px;overflow:hidden;background:var(--sum-track,var(--line));appearance:none;-webkit-appearance:none} .shop-free-shipping progress::-webkit-progress-bar{background:var(--sum-track,var(--line));border-radius:9px} .shop-free-shipping progress::-webkit-progress-value{background:var(--sum-bar,var(--blue));border-radius:9px} .shop-free-shipping progress::-moz-progress-bar{background:var(--sum-bar,var(--blue));border-radius:9px} .shop-free-shipping.is-free{background:var(--sum-box-free,#f4fbf7)} .shop-free-shipping.is-free .shop-free-shipping-title,.shop-free-shipping.is-free .shop-free-shipping-title svg{color:var(--sum-good,#17613b)} .shop-free-shipping.is-free progress::-webkit-progress-value{background:var(--sum-good,#17613b)} .shop-free-shipping.is-free progress::-moz-progress-bar{background:var(--sum-good,#17613b)} /* Each row laid out on its own, not as table columns: a column as wide as the longest label beside one as wide as the total would not fit the panel. */ .shop-summary-table,.shop-summary-table tbody{display:block} .shop-summary-table tr{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .shop-summary-table th,.shop-summary-table td{display:block;padding:7px 0;border-bottom:0;font-size:14px} .shop-summary-table th{padding-right:0;color:var(--sum-soft,var(--muted));font-weight:500;white-space:normal} .shop-summary-table td{flex:0 0 auto} .shop-summary-note{margin:12px 0 0;color:var(--sum-soft,var(--muted));font-size:13px;line-height:1.45} .shop-summary-table .order-total{margin-top:10px;padding-top:10px;border-top:1px solid var(--sum-line,var(--line))} .shop-summary-table .order-total th{color:var(--sum-strong,var(--navy));font-size:16px;font-weight:850} .shop-summary-table .order-total td{font-size:28px;font-weight:900;letter-spacing:-.04em;line-height:1.1} .shop-free{color:var(--sum-good,#17613b);font-weight:850} .shop-empty{display:grid;justify-items:center} .shop-empty .primary-action{margin-top:4px} /* The empty cart's sentence is the page's h2 (cart-empty.php), at the size the h3 it was had; the arrow after a button's words is a span, which .enquiry-empty would make a block icon. */ .shop-empty h2{margin:0 0 6px;font-size:18px;line-height:inherit;letter-spacing:normal} .shop-empty .shop-arrow{display:inline;margin:0;color:inherit;font-size:inherit} /* The cart's Podsumowanie, on a dark card under the devices (woocommerce/cart/cart-totals.php): the figures side by side over how far free delivery is, and beside them the total, the button and the line under it, which sits level with the free-delivery line. */ .shop-summary-card{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:24px 44px;padding:30px 32px;color:#fff;background:var(--navy);border-radius:20px;box-shadow:0 22px 60px rgba(9,24,71,.2)} .shop-summary-card>:not(.shop-summary-card-figures):not(.shop-summary-card-pay){grid-column:1/-1} .shop-summary-card .shop-summary-title{margin:0 0 18px;color:#fff} .shop-summary-card .shop-summary-table tbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px} .shop-summary-card .shop-summary-table tr{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px} .shop-summary-card .shop-summary-table th,.shop-summary-card .shop-summary-table td{padding:0;text-align:left} .shop-summary-card .shop-summary-table th{color:rgba(255,255,255,.72);font-weight:500} .shop-summary-card .shop-summary-table td{color:#fff;font-size:16px;font-weight:700} .shop-summary-card .shop-summary-table .shipping td{display:flex;flex-direction:column-reverse;gap:6px} .shop-summary-card .shop-summary-table .shipping small{color:rgba(255,255,255,.72);font-size:14px;font-weight:500} .shop-summary-card .shop-summary-table .shop-discount td,.shop-summary-card .shop-free{color:#8be3ec} .shop-summary-card .shop-free-shipping{gap:12px;margin-top:22px;padding:20px 0 0;background:none;border-top:1px solid rgba(255,255,255,.14);border-radius:0} .shop-summary-card .shop-free-shipping-title,.shop-summary-card .shop-free-shipping-title svg,.shop-summary-card .shop-free-shipping-title .woocommerce-Price-amount{color:#fff} .shop-summary-card .shop-free-shipping-title{gap:12px;font-size:15px} .shop-summary-card .shop-free-shipping-title strong{font-weight:500} .shop-summary-card .shop-free-shipping-note{display:none} .shop-summary-card .shop-free-shipping progress{height:6px;background:rgba(255,255,255,.14)} .shop-summary-card .shop-free-shipping progress::-webkit-progress-bar{background:rgba(255,255,255,.14)} .shop-summary-card .shop-free-shipping progress::-webkit-progress-value{background:var(--cyan)} .shop-summary-card .shop-free-shipping progress::-moz-progress-bar{background:var(--cyan)} .shop-summary-card .shop-free-shipping.is-free .shop-free-shipping-title,.shop-summary-card .shop-free-shipping.is-free .shop-free-shipping-title svg{color:#8be3ec} /* The column beside the figures is as tall as they are: the total at its top, and the button at its foot, level with the end of the free-delivery bar (the owner, 2026-10-20) — at its own height, not stretched. */ .shop-summary-card-pay{display:grid;grid-template-rows:auto 1fr;gap:20px;min-width:0} .shop-summary-card-total,.shop-summary-card-total tbody{display:block} .shop-summary-card-total tr{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px} .shop-summary-card-total th,.shop-summary-card-total td{padding:0;color:#fff} .shop-summary-card-total th{font-size:16px;font-weight:500;text-align:left} .shop-summary-card-total td{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1;text-align:right} .shop-summary-card-total .shop-net-total{margin-top:14px} .shop-summary-card-total .shop-net-total th{color:rgba(255,255,255,.72);font-size:14px} .shop-summary-card-total .shop-net-total td{font-size:18px;font-weight:700;letter-spacing:0} .wc-proceed-to-checkout{align-self:end;margin:0} .shop-summary-button.primary-action{width:100%;gap:10px;min-height:54px;color:var(--navy);background:#fff;border-radius:13px;font-size:17px;font-weight:600;transition:transform .18s ease,background .18s ease} .shop-summary-button.primary-action:hover{background:var(--ice);transform:translateY(-2px)} .shop-summary-button svg{width:20px;height:20px;flex:0 0 auto} /* Dodaj urządzenia: the cart's own search, under the cart and under the empty cart — each row with the device's photo. */ .shop-quick-add{display:grid;gap:14px;padding:18px 20px;background:#fff;border:1px dashed rgba(45,98,220,.45);border-radius:13px} .shop-empty+.shop-quick-add{margin-top:20px} .shop-quick-add-head{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap} .shop-quick-add-head h3{margin:0;font-size:15px} .shop-quick-add-head h3 span{color:var(--blue)} .shop-quick-add-head a{color:var(--blue);font-size:13px;font-weight:800} .shop-quick-add-search{display:grid;gap:6px} .shop-quick-add-search[hidden]{display:none} .shop-quick-add-search span{color:var(--navy);font-size:12px;font-weight:700} .shop-quick-add-search input{width:100%;min-height:46px;padding:10px 13px;color:var(--navy);background:var(--soft);border:1px solid #7d879b;border-radius:10px;outline:0;font-size:14px} .shop-quick-add-search input:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,98,220,.08)} .shop-quick-add-results{display:grid;gap:10px} .shop-quick-list{display:grid;gap:8px} .shop-quick-add-results:empty{display:none} .shop-quick-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto 64px auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:var(--soft);border-radius:11px} .shop-quick-row.is-active{background:var(--ice);box-shadow:inset 0 0 0 2px var(--blue)} .shop-quick-thumb{width:52px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden} .shop-quick-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .shop-quick-copy p{margin:0;color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase} .shop-quick-copy h4{margin:2px 0 0;color:var(--navy);font-size:14px;line-height:1.3} .shop-quick-price{display:grid;justify-items:end;gap:1px;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap} .shop-quick-price strong{color:var(--navy);font-size:14px} .shop-quick-price small{font-size:11px;font-weight:400} .shop-quick-quantity{width:64px;min-height:36px;padding:6px;color:var(--navy);background:#fff;border:1px solid #7d879b;border-radius:9px;text-align:center;font-weight:800} .shop-quick-quantity:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 4px rgba(45,98,220,.08)} /* The quantity and the button each sit in a cell of the search's grid (shop-add.js). */ .shop-quick-cell{display:flex;align-items:center} .shop-quick-button{width:44px;height:38px;display:grid;place-items:center;padding:0;color:#fff;background:var(--blue);border:0;border-radius:9px;cursor:pointer} .shop-quick-button svg{width:19px;height:19px} .shop-quick-button.is-done{background:#17613b} .shop-quick-button:disabled,.shop-quick-button[aria-disabled="true"]{opacity:.7;cursor:progress} .shop-quick-note{margin:0;color:var(--muted);font-size:12px} /* Zamówienie, as the owner drew it on 2026-10-20 (woocommerce/checkout/form-checkout.php), under the site's header and the shop's hero as the cart is, in the cart's column, on the soft ground: the progress as four tabs; each step a heading and white cards; and beside every step Podsumowanie on the cart's dark card, with the way on — on the right since 2026-10-26, under the step between 2026-10-20 and that day. */ .woocommerce-checkout .shop-section{background:var(--soft)} .woocommerce-form-coupon-toggle .woocommerce-info{background:#fff;border:1px solid var(--line);border-radius:18px} .shop-checkout{display:grid;gap:30px} .shop-totals-table .shipping small{display:block;color:var(--sum-soft,var(--muted));font-size:11px;font-weight:600} .shop-card{padding:26px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 38px rgba(9,24,71,.06)} /* The progress: a tab per step, its number in a circle and its name over a bar — blue for the step the customer is on, the circles of the steps behind it pale blue. */ .checkout-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;scroll-margin-top:110px} .checkout-progress li{min-width:0} .checkout-progress a{display:flex;align-items:center;gap:12px;min-width:0;padding-bottom:16px;color:var(--muted);border-bottom:3px solid var(--line);font-size:15px;font-weight:500;white-space:nowrap} .checkout-progress a:hover{color:var(--navy)} .checkout-progress-number{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:50%;font-size:14px;font-weight:600;line-height:1} .checkout-progress-label{overflow:hidden;text-overflow:ellipsis} .checkout-progress .is-done a{color:var(--navy)} .checkout-progress .is-done .checkout-progress-number{color:var(--blue);background:var(--ice);border-color:var(--ice)} .checkout-progress .is-current a{color:var(--blue);border-bottom-color:var(--blue);font-weight:600} .checkout-progress .is-current .checkout-progress-number{color:#fff;background:var(--blue);border-color:var(--blue)} .shop-checkout:not(.is-stepped) .checkout-progress{display:none} /* One step: "Krok 1 z 4", its name as the title with the order's tally beside it, a line under it, then its cards. */ .checkout-step{display:grid;gap:24px;align-content:start;min-width:0} .checkout-step[hidden]{display:none} /* The hero follows the step (gorke_theme_shop_hero_text()): checkout.js puts the step on the hero, and only that step's eyebrow, title and line show; without the script, "Złóż zamówienie.". Once the hero says it, the step's own heading is kept for a screen reader only — it is still what takes the focus. */ .shop-hero [data-hero-step]:not([data-hero-step="0"]),.shop-hero[data-step] [data-hero-step="0"]{display:none} .shop-hero[data-step="1"] [data-hero-step="1"],.shop-hero[data-step="2"] [data-hero-step="2"],.shop-hero[data-step="3"] [data-hero-step="3"],.shop-hero[data-step="4"] [data-hero-step="4"]{display:inline} .shop-checkout.is-stepped .checkout-step-head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .checkout-step-head .eyebrow{margin:0 0 10px;letter-spacing:.18em} .checkout-step-head .eyebrow:before{display:none} .checkout-step-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 24px} .checkout-step-title h2{margin:0;color:var(--navy);font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.045em} .checkout-step-title h2:focus{outline:0} .checkout-step-title .shop-feature-dot{margin-left:.06em;color:var(--blue)} .checkout-step-lead{margin:10px 0 0;color:var(--muted);font-size:16px} .checkout-step-error{margin:0;padding:11px 14px;color:#9b2c38;background:#fff0f1;border-radius:10px;font-size:13px;font-weight:700} .checkout-step-error[hidden]{display:none} /* The cards, and the two side by side of steps 3 and 4. */ .checkout-card{min-width:0;padding:30px 32px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 38px rgba(9,24,71,.06)} .shop-section .checkout-card h3{margin:0 0 22px;color:var(--navy);font-size:22px;line-height:1.2;letter-spacing:-.02em} .checkout-card-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-bottom:22px} .shop-section .checkout-card-head h3{margin:0} .checkout-card-aside{margin:0;color:var(--muted);font-size:14px} .checkout-card-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:16px;font-weight:500} .checkout-card-link svg{width:20px;height:20px;flex:0 0 auto} .checkout-card-link:hover{color:var(--navy)} .checkout-card-note{margin:14px 0 0;color:var(--muted);font-size:14px} .checkout-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start} .checkout-hint{margin:0;color:var(--muted);font-size:13px} .checkout-hint a{color:var(--blue);font-weight:800} /* Step 1: the cart's table, read-only, under the card's head; the quantity in a grey pill. */ .checkout-items-card{padding:0;overflow:hidden} .checkout-items-card .checkout-card-head{margin:0;padding:24px 32px} .shop-items.is-review{--shop-cart-cols:80px minmax(0,1fr) 100px 90px 120px;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none} .shop-items.is-review .shop-items-head,.shop-items.is-review .shop-item{padding-inline:32px} .shop-item-copy h4{margin:0;overflow:hidden;color:var(--navy);font-size:16px;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis} .checkout-item-pieces{display:inline-block;padding:5px 12px;color:var(--navy);background:var(--soft);border-radius:8px;font-size:14px;white-space:nowrap} /* Steps 2, 3 and 4: every choice a card — the radio button, an icon, the name and a line under it; the chosen one on the pale blue with a blue edge. */ .checkout-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0} .checkout-option{display:flex;align-items:center;gap:14px;min-width:0;padding:18px 22px;background:#fff;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:.16s ease} .checkout-option:hover{border-color:rgba(45,98,220,.45)} .checkout-option:has(input:checked){background:var(--ice);border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,98,220,.08)} .checkout-option input{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:var(--blue)} .checkout-option-icon{display:grid;place-items:center;flex:0 0 auto;color:var(--muted)} .checkout-option-icon:empty{display:none} .checkout-option-icon svg{width:22px;height:22px} .checkout-option:has(input:checked) .checkout-option-icon{color:var(--blue)} .checkout-option-copy{display:grid;gap:3px;min-width:0} .checkout-option-copy strong{color:var(--navy);font-size:16px;font-weight:600;line-height:1.3} .checkout-option-copy small{color:var(--muted);font-size:14px;line-height:1.4} .checkout-option-price{margin-top:8px;color:var(--muted);font-size:14px} .checkout-option-price .woocommerce-Price-amount:first-child{color:var(--navy);font-size:16px;font-weight:700} /* Step 2: "Kupuję jako" over a rule, then the invoice details in two columns, a rule between. */ .checkout-buyer-card #customer_details{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)} .shop-checkout[data-buyer="private"] .gorke-company-field,.shop-checkout:not([data-buyer="private"]) .gorke-private-field{display:none} .checkout-billing-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .checkout-billing-column{min-width:0;padding-right:36px} .checkout-billing-column+.checkout-billing-column{padding:0 0 0 36px;border-left:1px solid var(--line)} .shop-section .checkout-billing-column h3{margin:0 0 20px;color:var(--navy);font-size:20px;line-height:1.25;letter-spacing:-.02em} .checkout-billing-column>.checkout-hint{margin:-10px 0 20px;font-size:14px} .checkout-billing-column>.checkout-billing-fields~.checkout-hint{margin:22px 0 0} .checkout-billing-column>.checkout-billing-fields~.checkout-hint+.checkout-hint{margin-top:10px} .checkout-billing-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px} .checkout-billing-orderer{margin-top:32px} #billing_company_field,#billing_nip_field{grid-column:1/-1} #billing_email_field,#billing_postcode_field{grid-column:1} #billing_phone_field,#billing_city_field{grid-column:2} /* The country on one line, "Kraj Polska", when the shop sells to Poland alone; a shop that sells further keeps WooCommerce's list. */ #billing_country_field:not(:has(select)){display:flex;align-items:baseline;gap:14px} #billing_country_field:not(:has(select)) label{margin:0;color:var(--muted);font-weight:500} #billing_country_field:not(:has(select)) label .required{display:none} #billing_country_field strong{min-height:0;padding:0;font-weight:600} /* Step 3: the carriers, the InPost locker, and the address — "Taki sam jak adres kupującego" over the invoice address read back, or WooCommerce's second address once it is unticked. */ .checkout-shipping-methods{grid-template-columns:1fr;gap:12px} .checkout-shipping-methods .checkout-option{align-items:flex-start} .checkout-shipping-methods .checkout-option input,.checkout-shipping-methods .checkout-option-icon{margin-top:1px} .checkout-shipping-methods.is-invalid .checkout-option{border-color:#c2384a} .checkout-shipping-none{margin:0;padding:14px 16px;color:#9b2c38;background:#fff0f1;border-radius:12px;font-size:13px;font-weight:700} .checkout-inpost{display:grid;gap:8px;margin-top:14px;padding:16px 18px;background:var(--soft);border-radius:13px} .nip-lookup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px} .nip-lookup[hidden],.nip-lookup-button[hidden]{display:none} .nip-lookup-button{font-size:14px;text-align:left} .nip-lookup-button:disabled,.nip-lookup-button[aria-disabled="true"]{color:var(--muted);cursor:progress;text-decoration:none} .nip-lookup-note{color:var(--muted);font-size:13px;line-height:1.45} .nip-lookup-note:empty{display:none} .checkout-inpost[hidden]{display:none} .checkout-inpost .input-text{max-width:420px} .checkout-inpost-results{display:grid;gap:8px;max-width:520px} .checkout-inpost-results:empty{display:none} .checkout-inpost-note{margin:0;color:var(--muted);font-size:13px} .checkout-inpost-list{display:grid;gap:6px;max-height:360px;overflow-y:auto} .checkout-inpost-row{display:grid;gap:2px;width:100%;padding:10px 14px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer} .checkout-inpost-row:hover,.checkout-inpost-row:focus-visible,.checkout-inpost-row.is-active{background:var(--ice);border-color:var(--blue);outline:0} /* The row ↓ and ↑ picked, and the one focused, are framed as the cart's search's are, not only tinted. */ .checkout-inpost-row:focus-visible,.checkout-inpost-row.is-active{box-shadow:inset 0 0 0 1px var(--blue)} .checkout-inpost-chosen{max-width:520px;padding:14px 16px;background:#fff;border:1.5px solid var(--blue);border-radius:12px} .checkout-inpost-chosen[hidden]{display:none} .checkout-inpost-label{margin:0 0 6px;color:var(--muted);font-size:13px} .checkout-inpost-code{font-weight:800} .checkout-inpost-place{color:var(--muted);font-size:13px} .checkout-same{display:grid;gap:18px} .checkout-same[hidden],.checkout-same-box[hidden]{display:none} .shop-section .checkout-same-toggle{color:var(--navy);font-size:16px;font-weight:500} .shop-section .checkout-same-toggle input{width:20px;height:20px} .checkout-same-box{display:grid;gap:14px} .checkout-same-address{padding:22px 24px;background:var(--soft);border-radius:14px} .checkout-same-label{margin:0 0 12px;color:var(--muted);font-size:14px} .checkout-lines{display:grid;gap:4px;margin:0;color:var(--navy);font-size:15px;line-height:1.5;overflow-wrap:anywhere} .checkout-lines span{display:block} .checkout-lines span:first-child{font-weight:700} .shop-checkout.has-same-address #ship-to-different-address{display:none} /* WooCommerce's script hides the second address as the page loads; this keeps it from showing before that. */ .shop-checkout.has-same-address:has([data-checkout-same-toggle]:checked) .shipping_address{display:none} .checkout-address-card .shipping_address{margin-top:18px} .checkout-step .checkout-address-card .woocommerce-additional-fields{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .shop-section .checkout-address-card .woocommerce-additional-fields>h3{margin:0 0 12px;font-size:16px} /* Step 4: the payment methods as the choices above are, the regulamin's box under them; and "Podsumowanie danych", each part with the way back to its step. */ .wc_payment_methods{display:grid;gap:12px;margin:0;padding:0;list-style:none} .wc_payment_method{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;padding:18px 22px;background:#fff;border:1.5px solid var(--line);border-radius:14px;transition:.16s ease} .wc_payment_method:has(>input:checked){background:var(--ice);border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,98,220,.08)} .wc_payment_method>input{width:20px;height:20px;margin:0;accent-color:var(--blue)} .wc_payment_method>label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--navy);font-size:16px;font-weight:600;cursor:pointer} .wc_payment_method>label img{max-height:26px;width:auto} .payment_box{grid-column:2;margin-top:4px;color:var(--muted);font-size:14px} .payment_box p{margin:0} .wc_payment_methods>li>.woocommerce-info{margin:0} .place-order{display:grid;gap:14px;margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line)} .checkout-recap{display:grid;align-content:start} .checkout-recap[hidden]{display:none} .shop-section .checkout-recap>h3{margin-bottom:6px} .checkout-recap-section{padding:20px 0;border-top:1px solid var(--line)} .checkout-recap-section:last-child{padding-bottom:0} .checkout-recap-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px} .shop-section .checkout-recap-head h4{margin:0;color:var(--muted);font-size:14px;font-weight:500} .checkout-recap-head button{padding:0;color:var(--blue);background:none;border:0;font:inherit;font-size:15px;font-weight:500;cursor:pointer} .checkout-recap-head button:hover{color:var(--navy)} .checkout-recap .checkout-lines+.checkout-lines{margin-top:6px} .checkout-recap [data-recap="address"] span:first-child{font-weight:inherit} .checkout-recap [data-recap="buyer"] span:last-child:not(:first-child){color:var(--muted);font-size:14px} /* Podsumowanie beside every step: the cart's dark card, the total's name over it, and the button for the step the form is on (gorke_theme_checkout_actions()) — none of them without the script, when WooCommerce's own button places the order. */ .shop-summary-card.is-checkout .shop-summary-card-total tr{flex-direction:column;align-items:flex-start;gap:12px} .shop-summary-card.is-checkout .shop-summary-card-total td{text-align:left} .shop-summary-card.is-checkout .shop-summary-card-total .shop-net-total{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px 12px} .shop-total-name.is-last,.shop-checkout[data-step="4"] .shop-total-name{display:none} .shop-checkout[data-step="4"] .shop-total-name.is-last{display:inline} /* In the right-hand column the card is 360 px wide: its figures go one under another, each name beside its amount, and the total under them, as on a phone. */ @media(min-width:1200px){ .shop-side-track .shop-summary-card{grid-template-columns:1fr;gap:20px;padding:26px 24px} .shop-side-track .shop-summary-card-pay{grid-template-rows:none} .shop-side-track .shop-summary-card .shop-summary-table tbody{grid-template-columns:1fr;gap:12px} .shop-side-track .shop-summary-card .shop-summary-table tr{flex-direction:row;align-items:baseline;justify-content:space-between} .shop-side-track .shop-summary-card .shop-summary-table td{text-align:right} .shop-side-track .shop-summary-card .shop-summary-table .shipping td{align-items:flex-end;gap:2px} .shop-side-track .shop-summary-card-total tr:not(.shop-net-total) td{font-size:30px} } .checkout-summary-actions{display:grid;align-content:end;gap:14px} .checkout-summary-actions .shop-summary-button{border:0;font-family:inherit;cursor:pointer} .checkout-summary-actions [data-checkout-from]{display:none} .shop-checkout[data-step="1"] .checkout-summary-actions [data-checkout-from="1"],.shop-checkout[data-step="2"] .checkout-summary-actions [data-checkout-from="2"],.shop-checkout[data-step="3"] .checkout-summary-actions [data-checkout-from="3"],.shop-checkout[data-step="4"] .checkout-summary-actions [data-checkout-place]{display:flex} .shop-checkout.is-stepped #place_order{display:none} /* The form fields every shop form shares — the checkout's, the account's — and the login's heading. */ .shop-section .enquiry-form-intro h2,.shop-section .enquiry-form-intro h3{margin:0 0 6px;color:var(--navy);font-size:24px;line-height:1.04;letter-spacing:-.05em} .shop-section .enquiry-form-intro p:last-child{margin:0;color:var(--muted);font-size:13px} .shop-section .enquiry-form-intro .eyebrow{margin-bottom:8px} .woocommerce-billing-fields>h3{display:none} .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper,.woocommerce-address-fields__field-wrapper,.shop-section .checkout_coupon{display:grid;grid-template-columns:1fr 1fr;gap:16px} .woocommerce-EditAccountForm{display:grid;gap:16px} .shop-section .form-row{grid-column:1/-1;margin:0} .shop-section .form-row-first{grid-column:1} .shop-section .form-row-last{grid-column:2} .shop-section .form-row label{display:block;margin-bottom:6px;color:var(--navy);font-size:14px;font-weight:700} .shop-section .form-row .required{color:var(--blue);text-decoration:none;border:0} .shop-section .form-row .optional{color:var(--muted);font-size:12px;font-weight:500} .shop-section .woocommerce-input-wrapper{display:block} .shop-section .input-text,.shop-section .form-row select,.shop-section .form-row textarea,.shop-coupon input{font:inherit;font-size:14px} .shop-section .form-row .input-text,.shop-section .form-row select,.shop-section .form-row textarea{width:100%;min-height:48px;padding:11px 13px;color:var(--navy);background:var(--soft);border:1px solid #7d879b;border-radius:10px;outline:0} .shop-section .form-row textarea{min-height:110px;resize:vertical} .shop-section .form-row .input-text:focus,.shop-section .form-row select:focus,.shop-section .form-row textarea:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,98,220,.08)} .shop-section .woocommerce-invalid .input-text,.shop-section .woocommerce-invalid select{border-color:#c2384a} .shop-section .input-text[aria-invalid="true"]{border-color:#c2384a} .shop-section input[type="checkbox"][aria-invalid="true"]{outline:2px solid #c2384a;outline-offset:2px} .shop-section .woocommerce-invalid .input-text:focus{border-color:#c2384a;box-shadow:0 0 0 4px rgba(194,56,74,.1)} .shop-section .woocommerce-validated .input-text{border-color:#7d879b} .shop-section .form-row strong{display:block;min-height:48px;padding:12px 0;color:var(--navy)} .shop-section .checkbox,.woocommerce-form__label-for-checkbox{display:flex!important;align-items:center;gap:9px;font-size:14px;font-weight:700;cursor:pointer} .shop-section .checkbox input,.woocommerce-form__label-for-checkbox input{width:17px;height:17px;margin:0;accent-color:var(--blue)} .woocommerce-shipping-fields{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} #ship-to-different-address{margin:0;font-size:inherit} .shipping_address{margin-top:18px} .woocommerce-additional-fields{margin-top:20px} .woocommerce-additional-fields>h3{margin:0 0 12px;font-size:16px} /* In the checkout's third step the shipping fields follow their own heading, "Adres dostawy", so they lose the rule above them. */ .checkout-step .woocommerce-shipping-fields{margin-top:0;padding-top:0;border-top:0} .checkout-step .woocommerce-shipping-fields:empty{display:none} .checkout-step .woocommerce-additional-fields{margin-top:0} .shop-section .checkout_coupon{margin:0 0 20px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px} .shop-section .checkout_coupon p:first-child{grid-column:1/-1;margin:0;color:var(--muted);font-size:13px} .shop-section .checkout_coupon button{min-height:48px;padding:10px 16px;color:#fff;background:var(--navy);border:0;border-radius:10px;font-weight:800;cursor:pointer} /* The regulamin's box and the button that places the order, without the script the order's own. */ .woocommerce-privacy-policy-text p,.woocommerce-terms-and-conditions-wrapper p{margin:0;color:var(--muted);font-size:13px;line-height:1.55} /* The regulamin's checkbox, at the checkout and under the registration form: its sentence already says "(wymagane)", so WooCommerce's asterisk goes. */ .woocommerce-terms-and-conditions-wrapper .form-row{margin-top:12px} .woocommerce-terms-and-conditions-wrapper .checkbox,.shop-terms-accept .checkbox{align-items:flex-start;color:var(--navy);font-size:14px;font-weight:650;line-height:1.5} .woocommerce-terms-and-conditions-wrapper .checkbox input,.shop-terms-accept .checkbox input{margin-top:2px;flex:0 0 auto} .woocommerce-terms-and-conditions-wrapper abbr.required{display:none} .woocommerce-terms-and-conditions-checkbox-text a,.shop-terms-accept a{color:var(--blue);font-weight:800} .woocommerce-privacy-policy-text a,.woocommerce-terms-and-conditions-wrapper a,.woocommerce-LostPassword a,.shop-section .woocommerce-MyAccount-content a:not(.button){color:var(--blue);font-weight:800} #place_order{justify-self:start;min-height:52px;padding:13px 26px;color:#fff;background:var(--blue);border:0;border-radius:11px;font-size:16px;font-weight:850;cursor:pointer} #place_order:hover{transform:translateY(-2px)} /* Panel Klienta: logging in, and opening an account on a screen of its own. */ .shop-login{display:grid;gap:24px;max-width:560px} .shop-login.has-registration{grid-template-columns:1fr 1fr;max-width:none} .shop-login form{display:grid;gap:16px;margin-top:20px} .shop-login .form-row,.shop-login p{margin:0} .shop-login-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .shop-section .woocommerce-button.primary-action,.shop-section .woocommerce-Button.primary-action{border:0;cursor:pointer} .woocommerce-LostPassword{font-size:var(--shop-text)} /* Beside the login and the registration: what an account gives, and the way to the other screen. */ .shop-login-side{display:flex;flex-direction:column;align-self:start;align-items:flex-start;gap:22px} .shop-login-benefits h3{margin:0 0 12px;color:var(--navy);font-size:var(--shop-heading)} .shop-login-benefits ul{display:grid;gap:10px;margin:0;padding:0;list-style:none} .shop-login-benefits li{position:relative;padding-left:30px;color:var(--navy);font-size:var(--shop-text);line-height:1.5} .shop-login-benefits li:before{width:20px;height:20px;position:absolute;left:0;top:1px;display:grid;place-items:center;content:"✓";color:var(--blue);background:var(--ice);border-radius:50%;font-size:11px;font-weight:900} .shop-login-switch{display:grid;gap:8px;width:100%;padding-top:18px;border-top:1px solid var(--line)} .shop-login-switch p{color:var(--muted);font-size:var(--shop-text)} .shop-login-switch .secondary-action{justify-self:start} .shop-register-names{display:grid;grid-template-columns:1fr 1fr;gap:16px} .shop-field-hint{display:block;margin-top:6px;color:var(--muted);font-size:var(--shop-small)} .password-input{position:relative;display:block} .password-input .input-text{padding-right:48px!important} .show-password-input{position:absolute;right:8px;top:50%;width:34px;height:34px;padding:0;background:transparent;border:0;border-radius:8px;cursor:pointer;transform:translateY(-50%)} .show-password-input:before{position:absolute;inset:7px;content:"";background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' 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='%23000' stroke-width='2' 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} .show-password-input.display-password:before{background:var(--blue)} .woocommerce-password-strength{margin-top:8px;padding:7px 10px;border-radius:8px;font-size:var(--shop-small);font-weight:700;color:#9b2c38;background:#fff0f1} .woocommerce-password-strength.good,.woocommerce-password-strength.strong{color:#17613b;background:#eaf8f0} .woocommerce-password-strength.short,.woocommerce-password-strength.bad{color:#9b2c38;background:#fff0f1} .woocommerce-password-hint{display:block;margin-top:6px;color:var(--muted);font-size:var(--shop-small)} .lost_reset_password{display:grid;gap:16px;max-width:520px;padding:26px;background:#fff;border:1px solid var(--line);border-radius:18px} .lost_reset_password p{margin:0} .lost_reset_password button[type="submit"],.woocommerce-EditAccountForm button[type="submit"],.woocommerce-address-fields button[type="submit"]{justify-self:start;min-height:48px;padding:11px 20px;color:#fff;background:var(--blue);border:0;border-radius:11px;font-weight:800;cursor:pointer} /* Panel Klienta, logged in: one frame, as the owner drew it on 2026-10-20 — the menu on white down the left, the screens on the soft ground beside it. */ .woocommerce-account.logged-in .shop-section .woocommerce{display:grid;grid-template-columns:270px minmax(0,1fr);overflow:hidden;background:var(--soft);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 38px rgba(9,24,71,.06)} .woocommerce-account.logged-in .shop-section .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1} /* The menu: an icon to every entry, Dane i konto's heading in small capitals over its parts, a rule before Pliki do pobrania, and the account's age and Wyloguj się at the foot. */ .woocommerce-MyAccount-navigation{display:flex;flex-direction:column;padding:26px 18px 20px;background:#fff;border-right:1px solid var(--line)} .woocommerce-MyAccount-navigation ul{display:grid;gap:2px;margin:0;padding:0;list-style:none} .shop-nav-title{margin:0 12px 16px;color:var(--navy);font-size:var(--shop-heading);font-weight:700} .shop-nav-link{--shop-nav-icon:var(--muted);display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--navy);border-radius:10px;font-size:var(--shop-text);font-weight:500} .shop-nav-link .shop-icon{width:18px;height:18px;flex:0 0 auto;color:var(--shop-nav-icon)} .shop-nav-link:hover{background:var(--soft)} .is-active>.shop-nav-link{--shop-nav-icon:var(--blue);color:var(--blue);background:var(--ice);font-weight:700} .shop-nav-count{min-width:24px;margin-left:auto;padding:1px 7px;color:#5a6579;background:var(--soft);border-radius:7px;font-size:var(--shop-small);font-weight:700;text-align:center} .shop-nav-group{margin:20px 0 4px} .shop-nav-heading{display:inline-flex;padding:4px 12px;color:var(--muted);font-size:var(--shop-small);font-weight:800;letter-spacing:.12em;text-transform:uppercase} .shop-nav-heading:hover,.shop-nav-group.is-active>.shop-nav-heading{color:var(--blue)} ul.shop-nav-more{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .shop-nav-foot{display:grid;gap:4px;margin-top:auto;padding-top:28px} .shop-account-since{margin:0 12px 2px;color:var(--muted);font-size:var(--shop-small)} .woocommerce-MyAccount-content{min-width:0;padding:30px 34px 36px;font-size:var(--shop-text)} /* Over a part of Dane i konto: "Panel Klienta › Rabaty i warunki". */ .shop-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 18px;color:var(--muted);font-size:var(--shop-small)} .shop-section .woocommerce-MyAccount-content a.shop-crumbs-link{color:var(--muted);font-weight:400} .shop-section .woocommerce-MyAccount-content a.shop-crumbs-link:hover{color:var(--blue)} .shop-crumbs [aria-current]{color:var(--navy)} .woocommerce-MyAccount-content>p:first-child{margin-top:0} .woocommerce-MyAccount-content p{color:var(--muted)} .woocommerce-MyAccount-content p strong,.woocommerce-MyAccount-content mark{color:var(--navy);background:none;font-weight:800} /* Every screen of Panel Klienta: a head, then its cards. */ .shop-profile{display:grid;gap:22px} .shop-profile-head .eyebrow{margin-bottom:8px} .shop-profile-head h2{margin:0;font-size:var(--shop-title);line-height:1.1;letter-spacing:-.04em} .shop-profile-head p:last-child{margin:6px 0 0} .shop-profile-list{display:grid;margin:0} .shop-profile-list>div{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)} .shop-profile-list>div:first-child{padding-top:0;border-top:0} .shop-profile-list dt{color:var(--muted);font-size:var(--shop-small);font-weight:700} .shop-profile-list dd{margin:0;color:var(--navy);font-weight:700;overflow-wrap:anywhere} .woocommerce-MyAccount-content .shop-profile-note{margin:0;color:var(--muted);font-size:var(--shop-small)} .woocommerce-MyAccount-content>.shop-profile-head{margin-bottom:22px} /* Adres dostawy's form, and the buttons that look like links in its list. The list itself is with the cards, below. */ .shop-address-badge{padding:4px 10px;color:var(--blue);background:var(--ice);border-radius:8px;font-size:var(--shop-small);font-weight:700} .shop-link-button{padding:0;color:var(--blue);background:none;border:0;font:inherit;font-weight:800;cursor:pointer} .shop-link-button:hover{text-decoration:underline} .shop-link-button.is-danger{color:#9b2c38} .shop-address-form{display:grid;gap:16px} .shop-address-form-title{margin:0;font-size:var(--shop-heading)} .shop-address-buttons{display:flex;align-items:center;gap:16px;margin:0} /* Zgody i prywatność — the boxes under the registration, the screen of acceptances for an account without them, and Konto's rows. */ .shop-consent-hint{margin:0;color:var(--muted);font-size:var(--shop-small)} .shop-consents-form{display:grid;gap:14px;max-width:760px;margin-top:22px} .shop-consents-form .form-row,.shop-consents-form .shop-consent-hint,.shop-consents-actions{margin:0} .shop-privacy-form{display:grid;gap:12px;margin:0} .shop-privacy-form .form-row{margin:0} .shop-privacy-submit{justify-self:start;min-height:48px;padding:11px 20px;color:#fff;background:var(--blue);border:0;border-radius:11px;font-weight:800;cursor:pointer} .shop-privacy-submit.is-danger{background:#9b2c38} /* Each acceptance and consent a card, as the RODO clause under them is: the box, then "Pokaż więcej" opening the longer text, indented to the sentence. */ .shop-consent{display:grid;gap:6px;padding:13px 15px;background:var(--soft);border:1px solid var(--line);border-radius:12px} .shop-consent .shop-terms-accept{margin:0} .shop-consent-more{padding-left:26px} .shop-consent-more summary{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:var(--shop-small);font-weight:800;cursor:pointer;list-style:none} .shop-consent-more summary::-webkit-details-marker{display:none} .shop-consent-more summary:after{content:"\203A";font-weight:900;transition:transform .18s} .shop-consent-more[open] summary:after{transform:rotate(90deg)} .shop-consent-more[open] .shop-consent-open,.shop-consent-more:not([open]) .shop-consent-close{display:none} .shop-consent-text{color:var(--muted);font-size:var(--shop-small);font-weight:400;line-height:1.6} .shop-consent-text p,.shop-consent-text ul{margin:8px 0 0;color:var(--muted);font-size:var(--shop-small)} .shop-consent-text ul{padding-left:18px} .shop-consent-link{color:var(--blue);font-weight:800} /* Konto — five rows, one under another, each a line until it is opened, as the RODO clause under the forms opens. */ .shop-rows{display:grid;gap:10px} .shop-row{background:#fff;border:1px solid var(--line);border-radius:16px} .shop-row>summary{display:flex;align-items:center;gap:16px;padding:15px 18px;cursor:pointer;list-style:none} .shop-row>summary::-webkit-details-marker{display:none} .shop-row[open]>summary{border-bottom:1px solid var(--line)} .shop-row-head{display:grid;gap:2px;min-width:0} .shop-row-head h3{margin:0;font-size:var(--shop-heading)} .shop-row.is-danger .shop-row-head h3{color:#9b2c38} .shop-row-value{color:var(--muted);overflow-wrap:anywhere} .shop-row-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--blue);font-weight:800;white-space:nowrap} .shop-row-toggle:after{content:"\203A";font-weight:900;transition:transform .18s} .shop-row[open] .shop-row-toggle:after{transform:rotate(90deg)} .shop-row[open] .shop-row-show,.shop-row:not([open]) .shop-row-hide{display:none} .shop-row-body{display:grid;gap:16px;max-width:600px;padding:18px} .shop-row-body>p{margin:0} /* Dane do faktury — Osoba fizyczna or Firma over WooCommerce's invoice form, as the checkout asks it, each a link to its own set. */ .woocommerce-MyAccount-content form>h2{margin:0 0 6px;font-size:var(--shop-title);line-height:1.1;letter-spacing:-.04em} .woocommerce-MyAccount-content .woocommerce-address-fields{display:grid;gap:16px} .woocommerce-MyAccount-content .shop-billing-intro{margin:0} .shop-section .woocommerce-MyAccount-content a.shop-billing-type{color:inherit;font-weight:inherit} .shop-billing-type.is-current{color:#fff;background:var(--navy);border-color:var(--navy);box-shadow:0 12px 28px rgba(9,24,71,.18)} .shop-billing-mark{width:18px;height:18px;flex:0 0 auto;background:#fff;border:1.5px solid #9aa6bb;border-radius:50%} .shop-billing-type.is-current .shop-billing-mark{background:var(--navy);border:5px solid var(--cyan)} .shop-billing-type .checkout-option-copy strong{font-size:var(--shop-heading)} .shop-billing-type.is-current .checkout-option-copy strong{color:#fff} .shop-billing-type.is-current .checkout-option-copy small{color:rgba(255,255,255,.7)} /* Panel Klienta's cards — the owner's "Elegancki kontrast" drawing of Rabaty i warunki (2026-10-20), on every screen since: a dark card for what the screen is about, white cards beside and under it — a label and an icon square at the top, a rule over the small print or over the way on — and at the foot the card that leads to the office. */ .shop-cards{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px} .shop-cards.is-even{grid-template-columns:repeat(2,minmax(0,1fr))} .shop-cards.is-mirrored{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} .shop-card-top{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px} .woocommerce-MyAccount-content .shop-card-label{margin:0;color:var(--muted)} .shop-feature{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:26px 28px 18px;color:#fff;background:var(--navy);border-radius:20px;box-shadow:0 18px 40px rgba(9,24,71,.2)} .shop-feature.is-wide{min-height:0} .shop-feature:before,.shop-feature:after{position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;content:"";border:1px solid rgba(255,255,255,.09);border-radius:50%;pointer-events:none} .shop-feature:after{right:-40px;bottom:-60px;width:180px;height:180px} .woocommerce-MyAccount-content .shop-feature .shop-card-label{color:rgba(255,255,255,.85)} .shop-feature-badge{position:relative;padding:6px 12px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:8px;font-size:var(--shop-small);font-weight:700} .shop-feature-badge.is-good{color:#8be3ec;border-color:rgba(139,227,236,.5)} .shop-section .shop-feature-title{position:relative;margin:18px 0 0;color:#fff;font-size:var(--shop-display);line-height:1.04;letter-spacing:-.045em} .shop-feature-dot{color:var(--cyan)} .woocommerce-MyAccount-content .shop-feature-text{position:relative;max-width:440px;margin:0;color:rgba(255,255,255,.75)} .woocommerce-MyAccount-content .shop-feature-note{position:relative;margin:0;color:rgba(255,255,255,.55);font-size:var(--shop-small)} .shop-feature-more{position:relative;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)} .shop-feature-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0;color:#fff;font-weight:600;cursor:pointer;list-style:none} .shop-feature-toggle::-webkit-details-marker{display:none} .shop-feature-toggle .shop-icon{width:18px;height:18px;color:var(--cyan);transition:transform .18s} .shop-feature-more[open] .shop-feature-toggle .shop-icon{transform:rotate(-90deg)} .woocommerce-MyAccount-content .shop-feature-more-text{max-width:520px;margin:10px 0 4px;color:rgba(255,255,255,.75)} .woocommerce-MyAccount-content .shop-feature-example{color:#fff;font-weight:700} .shop-feature-form{position:relative;margin:auto 0 0} .shop-section .woocommerce-MyAccount-content a.shop-feature-foot,.shop-section .woocommerce-MyAccount-content button.shop-feature-foot{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:14px 0 4px;color:#fff;background:none;border:0;border-top:1px solid rgba(255,255,255,.14);font:inherit;font-weight:600;text-align:left;cursor:pointer} .shop-feature-foot .shop-icon{width:18px;height:18px;color:var(--cyan)} .shop-panel{display:flex;flex-direction:column;gap:12px;padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:20px} .shop-panel-icon{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;color:var(--navy);background:var(--soft);border-radius:12px} .shop-panel-icon .shop-icon{width:20px;height:20px} .shop-panel-icon.shop-row-icon{width:40px;height:40px} .shop-row.is-danger .shop-row-icon{color:#9b2c38;background:#fff0f1} .shop-section .shop-panel-name{margin:4px 0 0;color:var(--navy);font-size:var(--shop-heading);line-height:1.3} .woocommerce-MyAccount-content .shop-panel-text{margin:0} .shop-panel address{margin:0;color:var(--navy);font-style:normal;line-height:1.6} .shop-panel-threshold{display:grid;gap:4px;margin-top:auto} .woocommerce-MyAccount-content .shop-panel-lead{margin:0;color:var(--navy);font-weight:500} .woocommerce-MyAccount-content .shop-panel-figure{margin:6px 0 0;color:var(--navy);font-size:var(--shop-display);font-weight:800;line-height:1;letter-spacing:-.045em} .woocommerce-MyAccount-content .shop-panel-unit{margin:0;color:var(--muted)} .woocommerce-MyAccount-content .shop-panel-note{margin:0;padding-top:14px;color:var(--muted);border-top:1px solid var(--line);font-size:var(--shop-small)} .shop-panel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .shop-cta{display:grid;gap:20px;padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:20px} .shop-cta-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 30px} .woocommerce-MyAccount-content .shop-cta-kicker{margin:0 0 6px;color:var(--muted);font-size:var(--shop-small);letter-spacing:.06em} .shop-section .shop-cta-title{margin:0 0 6px;font-size:var(--shop-heading);letter-spacing:-.02em} .woocommerce-MyAccount-content .shop-cta-text{max-width:560px;margin:0} .shop-section .woocommerce-MyAccount-content a.shop-cta-button{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:11px 24px;color:#fff;background:var(--blue);border-radius:11px;font-weight:700} .shop-cta-button .shop-icon{width:18px;height:18px} .shop-cta-button:hover{transform:translateY(-2px)} .shop-cta-ways{display:flex;flex-wrap:wrap;gap:12px 30px;padding-top:18px;border-top:1px solid var(--line)} .shop-section .woocommerce-MyAccount-content a.shop-cta-way{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-weight:500} .shop-section .woocommerce-MyAccount-content a.shop-cta-way:hover{color:var(--blue)} .shop-cta-way .shop-icon{width:18px;height:18px;color:var(--muted)} /* Adres dostawy — the owner's "Lista adresów" drawing (2026-10-20): "Dodaj adres" beside the title, then one list, a row per address, the default first and on the site's dark blue as the dark cards are, and how the book works folded away under it. */ .shop-profile-head.has-action{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px 24px} .shop-section .woocommerce-MyAccount-content a.shop-head-button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:11px 22px;color:#fff;background:var(--blue);border-radius:11px;font-weight:700} .shop-head-button .shop-icon-plus{width:18px;height:18px} .shop-address-count{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px} .woocommerce-MyAccount-content .shop-address-count-title{display:flex;align-items:center;gap:10px;margin:0;color:var(--navy);font-weight:700} .shop-address-count-title .shop-nav-count{background:#e6ecf5} .woocommerce-MyAccount-content .shop-address-count-note{margin:0;color:var(--muted);font-size:var(--shop-small)} .shop-address-list{background:#fff;border:1px solid var(--line);border-radius:20px} .shop-address-row{display:grid;gap:16px;padding:22px 26px} .shop-address-row+.shop-address-row{border-top:1px solid var(--line)} .shop-address-row:first-child{border-radius:19px 19px 0 0} .shop-address-row:last-child{border-radius:0 0 19px 19px} .shop-address-row:only-child{border-radius:19px} .shop-address-top{display:flex;align-items:center;gap:14px} .woocommerce-MyAccount-content .shop-address-name{margin:0;color:var(--navy);font-weight:600} .shop-address-top .shop-address-badge{margin-left:auto} .shop-more{position:relative;margin-left:auto} .shop-address-badge+.shop-more{margin-left:0} .shop-more-toggle{width:36px;height:36px;display:grid;place-items:center;color:var(--muted);border-radius:10px;cursor:pointer;list-style:none} .shop-more-toggle::-webkit-details-marker{display:none} .shop-more-toggle:hover{background:var(--soft)} .shop-more-toggle .shop-icon-more{width:20px;height:20px} .shop-more-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;display:grid;min-width:210px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(9,24,71,.14)} .shop-more-menu form{margin:0} .shop-more-menu .shop-link-button{width:100%;padding:9px 12px;border-radius:8px;text-align:left} .shop-more-menu a.shop-link-button{display:block} .shop-more-menu .shop-link-button:hover{background:var(--soft);text-decoration:none} .shop-address-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:14px 24px} .woocommerce-MyAccount-content .shop-address-street{margin:0;color:var(--navy);font-size:var(--shop-title);font-weight:800;line-height:1.2;letter-spacing:-.03em} .woocommerce-MyAccount-content .shop-address-town{margin:6px 0 0;color:var(--navy)} .shop-address-contact{display:grid;gap:4px} .woocommerce-MyAccount-content .shop-address-person{margin:0;color:var(--navy)} .woocommerce-MyAccount-content .shop-address-company{margin:0;color:var(--muted)} .woocommerce-MyAccount-content .shop-address-phone{display:flex;align-items:center;gap:10px;margin:4px 0 0;color:var(--muted)} .shop-address-phone .shop-icon-phone{width:18px;height:18px} .shop-section .woocommerce-MyAccount-content a.shop-address-edit{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:11px;font-weight:600;white-space:nowrap} .shop-section .woocommerce-MyAccount-content a.shop-address-edit:hover{color:var(--blue);border-color:var(--blue)} .shop-address-edit .shop-icon-pencil{width:18px;height:18px} .shop-address-row.is-default{color:#fff;background:var(--navy)} .shop-address-row.is-default .shop-panel-icon{color:var(--cyan);background:rgba(255,255,255,.08)} .woocommerce-MyAccount-content .is-default .shop-address-name,.woocommerce-MyAccount-content .is-default .shop-address-street,.woocommerce-MyAccount-content .is-default .shop-address-town,.woocommerce-MyAccount-content .is-default .shop-address-person{color:#fff} .woocommerce-MyAccount-content .is-default .shop-address-company,.woocommerce-MyAccount-content .is-default .shop-address-phone{color:rgba(255,255,255,.7)} .is-default .shop-address-phone .shop-icon-phone{color:var(--cyan)} .shop-address-top .is-default .shop-address-badge,.is-default .shop-address-top .shop-address-badge{color:#8be3ec;background:rgba(255,255,255,.06);border:1px solid rgba(139,227,236,.5)} .is-default .shop-more-toggle{color:rgba(255,255,255,.8)} .is-default .shop-more-toggle:hover{background:rgba(255,255,255,.1)} .shop-section .woocommerce-MyAccount-content .is-default a.shop-address-edit{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3)} .shop-section .woocommerce-MyAccount-content .is-default a.shop-address-edit:hover{color:var(--cyan);border-color:var(--cyan)} .shop-address-help{padding-top:18px;border-top:1px solid var(--line)} .shop-address-help-toggle{display:inline-flex;align-items:center;gap:12px;color:var(--navy);font-weight:500;cursor:pointer;list-style:none} .shop-address-help-toggle::-webkit-details-marker{display:none} .shop-address-help-toggle .shop-icon-info,.shop-address-help-toggle .shop-icon-chevron{width:18px;height:18px;color:var(--muted);transition:transform .18s} .shop-address-help[open] .shop-icon-chevron{transform:rotate(180deg)} .woocommerce-MyAccount-content .shop-address-help-text{max-width:640px;margin:10px 0 0 30px;color:var(--muted)} /* Start: the enquiries sent from the account, under the tiles. */ .shop-enquiries-scroll{overflow-x:auto} .shop-section table.shop-enquiries-table tbody th{color:var(--navy);background:#fff;font-size:var(--shop-text);letter-spacing:0;text-transform:none;white-space:nowrap} .shop-section table.shop-enquiries-table tbody tr:last-child th{border-bottom:0} /* Zapytania — every enquiry sent from the account, a line each, opening to what it asked. */ .shop-enquiry-list{display:grid;gap:10px} .shop-enquiry{background:#fff;border:1px solid var(--line);border-radius:16px} .shop-enquiry summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:13px 16px;cursor:pointer;list-style:none} .shop-enquiry summary::-webkit-details-marker{display:none} .shop-enquiry summary::after{margin-left:auto;color:var(--muted);content:"▾"} .shop-enquiry[open] summary{border-bottom:1px solid var(--line)} .shop-enquiry[open] summary::after{content:"▴"} .shop-enquiry-number{color:var(--navy)} .shop-enquiry-date,.shop-enquiry-kind,.shop-enquiry-devices{color:var(--muted)} .shop-enquiry-project{color:var(--navy);font-weight:700} .shop-enquiry-body{display:grid;gap:16px;padding:16px} .shop-enquiry-set{display:grid;gap:8px} .shop-enquiry-set h4{margin:0;font-size:var(--shop-text)} /* Pliki do pobrania: the ZIP of everything, then the devices in the cart's own table — photo, symbol and name as the cart has them, and in the second column the files, one per line. */ .shop-files{display:grid;gap:22px} .shop-items.is-files{--shop-cart-cols:80px minmax(0,1fr) minmax(0,1fr)} .shop-items.is-files .shop-file-head-docs{text-align:left} .shop-section .woocommerce-MyAccount-content a.shop-file-model{color:inherit;font-weight:inherit} .shop-file-note{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.4} .shop-file-list{display:grid;gap:8px;margin:0;padding:0;list-style:none} .shop-section .woocommerce-MyAccount-content a.shop-file-doc{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-size:15px;font-weight:400;line-height:1.35} .shop-section .woocommerce-MyAccount-content a.shop-file-doc:hover{color:var(--blue)} .shop-file-doc .shop-icon-download{width:18px;height:18px;flex:0 0 auto;color:var(--blue)} .shop-file-doc-type{color:var(--muted);font-size:12px;font-weight:600} .woocommerce-MyAccount-content .shop-file-none{margin:0;color:var(--muted);font-size:14px} /* Tables WooCommerce prints itself: orders, one order's lines, downloads. */ .shop-section table.shop_table{width:100%;border:1px solid var(--line);border-radius:16px;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:var(--shop-text)} .shop-section table.shop_table th{padding:11px 14px;color:var(--muted);background:var(--soft);font-size:var(--shop-small);font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--line)} .shop-section table.shop_table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top} .shop-section table.shop_table tbody tr:last-child td,.shop-section table.shop_table tfoot tr:last-child th,.shop-section table.shop_table tfoot tr:last-child td{border-bottom:0} .shop-section table.shop_table tfoot th{background:#fff;text-transform:none;letter-spacing:0;font-size:var(--shop-text)} .shop-section table.shop_table tfoot td{font-weight:800;text-align:right} .shop-section table.shop_table .button,.woocommerce-MyAccount-content .button{display:inline-flex;align-items:center;margin:2px 4px 2px 0;padding:7px 12px;color:#fff;background:var(--blue);border-radius:9px;font-size:var(--shop-text);font-weight:800} .shop-section table.shop_table .button.gorke-order-again{color:var(--blue);background:#fff;box-shadow:inset 0 0 0 1px rgba(45,98,220,.45)} .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} .woocommerce-Address{padding:18px;background:var(--soft);border-radius:14px} .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:10px} .woocommerce-Address-title h2{margin:0;font-size:var(--shop-heading)} .woocommerce-Address address,.woocommerce-customer-details address{margin-top:10px;color:var(--navy);font-style:normal;line-height:1.6} .woocommerce-EditAccountForm em{display:block;margin-top:5px;color:var(--muted);font-size:var(--shop-small)} .woocommerce-pagination{display:flex;gap:10px;margin-top:16px} /* Zamówienie przyjęte — the thank-you page, and one order in the account. */ .woocommerce-order{display:grid;gap:22px} .woocommerce-order>p,.woocommerce-thankyou-order-received{margin:0;padding:15px 18px;color:#17613b;background:#eaf8f0;border-radius:12px;font-weight:750} .woocommerce-order-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0;padding:0;list-style:none} .woocommerce-order-overview li{padding:14px 16px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:13px;font-size:var(--shop-small);font-weight:800;letter-spacing:.05em;text-transform:uppercase} .woocommerce-order-overview li strong{display:block;margin-top:4px;color:var(--navy);font-size:var(--shop-heading);letter-spacing:0;text-transform:none} .woocommerce-order-details,.woocommerce-customer-details{display:grid;gap:12px} .woocommerce-order-details__title,.woocommerce-column__title{margin:0} .woocommerce-columns--addresses{display:grid;grid-template-columns:1fr 1fr;gap:18px} .woocommerce-column{padding:18px;background:var(--soft);border-radius:14px} .woocommerce-customer-details--phone,.woocommerce-customer-details--email{margin:4px 0 0} /* Panel Klienta's screens on the soft ground: what WooCommerce prints there white and outlined, as the cards are; the forms' fields in a card of their own. After every rule they override. */ .woocommerce-MyAccount-content .woocommerce-Address,.woocommerce-MyAccount-content .woocommerce-column{background:#fff;border:1px solid var(--line)} .woocommerce-MyAccount-content table.shop_table{background:#fff} .shop-section .woocommerce-MyAccount-content .form-row .input-text,.shop-section .woocommerce-MyAccount-content .form-row select,.shop-section .woocommerce-MyAccount-content .form-row textarea{background:#fff} .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:20px} .woocommerce-MyAccount-content .woocommerce-info{padding:20px 24px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:20px} @media(max-width:1060px){ .checkout-columns,.checkout-billing-columns{grid-template-columns:1fr} .checkout-billing-column{padding:0} .checkout-billing-column+.checkout-billing-column{margin-top:28px;padding:28px 0 0;border-top:1px solid var(--line);border-left:0} .shop-items{--shop-cart-cols:64px minmax(0,1fr) 90px 124px 96px 32px} .shop-items.has-index{--shop-cart-cols:24px 64px minmax(0,1fr) 90px 124px 96px 32px} .shop-items.is-review.has-index{--shop-cart-cols:24px 64px minmax(0,1fr) 90px 80px 104px} .shop-items.is-files{--shop-cart-cols:64px minmax(0,1fr) minmax(0,1fr)} .shop-items-head,.shop-item{column-gap:12px;padding-inline:16px} .shop-item-thumb.enquiry-item-thumb{width:64px;height:52px} .shop-summary-card{grid-template-columns:1fr;padding:26px} .shop-summary-card-pay{grid-template-rows:none} .woocommerce-account.logged-in .shop-section .woocommerce{grid-template-columns:1fr} .woocommerce-MyAccount-navigation{padding:14px 14px 12px;border-right:0;border-bottom:1px solid var(--line)} .shop-nav-title{display:none} .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:2px} .shop-nav-group{margin:10px 0 2px} ul.shop-nav-more{margin-top:8px;padding-top:8px} .shop-nav-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} } @media(max-width:760px){ .checkout-progress{display:flex;gap:8px} .checkout-progress li{flex:0 0 auto} .checkout-progress li.is-current{flex:1 1 auto} .checkout-progress a{gap:8px;padding-bottom:12px;font-size:14px} .checkout-progress-number{width:30px;height:30px;flex-basis:30px;font-size:13px} /* Hidden from the eye only: a screen reader still hears "Dostawa", not "3". */ .checkout-progress li:not(.is-current) .checkout-progress-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .checkout-options{grid-template-columns:1fr} .checkout-option{padding:14px 16px;gap:12px} .checkout-card{padding:22px 18px} .checkout-items-card{padding:0} .checkout-items-card .checkout-card-head{padding:18px} .shop-items.is-review .shop-item{padding-inline:16px} .checkout-billing-fields{grid-template-columns:1fr} #billing_email_field,#billing_postcode_field,#billing_phone_field,#billing_city_field{grid-column:1} .shop-items-head{display:none} .shop-items-head+.shop-item{border-top:0} .shop-item{grid-template-columns:64px minmax(0,1fr) auto;gap:6px 12px;padding:16px} .shop-item-thumb.enquiry-item-thumb{width:64px;height:52px;grid-column:1;grid-row:1/3;align-self:start} .shop-items.has-index .shop-item{position:relative} .shop-item-index{position:absolute;z-index:1;top:9px;left:9px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 5px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:11px;font-size:12px;font-weight:600} .shop-item-copy{grid-column:2;grid-row:1} .shop-item-copy h3{font-size:16px} /* A line's symbol and name wrap here rather than end in "…": at 320 px — 400% zoom — the name of nearly every device was cut short (WCAG 1.4.10). */ .shop-item-copy h3,.shop-item-copy h4,.shop-item-name{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere} .shop-item-remove{grid-column:3;grid-row:1;align-self:start} .shop-item-price{grid-column:2/4;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;text-align:left} .shop-item-price .shop-item-net{order:1;flex-basis:100%} .shop-item-quantity{grid-column:1/3;grid-row:3;justify-items:start;margin-top:8px} .shop-item-total{grid-column:3;grid-row:3;margin-top:8px} .shop-item-price .shop-item-label,.shop-item-total .shop-item-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;color:var(--muted);font-size:12px} .shop-summary-card{padding:26px 20px;border-radius:20px} .shop-summary-card .shop-summary-table tbody{grid-template-columns:1fr;gap:12px} .shop-summary-card .shop-summary-table tr{flex-direction:row;align-items:baseline;justify-content:space-between} .shop-summary-card .shop-summary-table td{font-size:16px;text-align:right} .shop-summary-card .shop-summary-table .shipping td{align-items:flex-end;gap:2px} .shop-summary-card-total td{font-size:28px} .shop-summary-button.primary-action{min-height:52px;font-size:16px} .shop-card,.woocommerce-MyAccount-content{padding:18px} .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper,.woocommerce-address-fields__field-wrapper,.shop-section .checkout_coupon,.shop-login.has-registration,.woocommerce-Addresses,.woocommerce-columns--addresses{grid-template-columns:1fr} .shop-section .form-row-first,.shop-section .form-row-last{grid-column:1/-1} .shop-cards,.shop-cards.is-even,.shop-cards.is-mirrored{grid-template-columns:1fr} .shop-row>summary{padding:14px 16px} .shop-section{--shop-display:32px} .shop-feature,.shop-panel,.shop-cta,.shop-support{padding:20px} .shop-feature{min-height:0} .shop-address-row{padding:18px} .shop-address-body{grid-template-columns:1fr} .shop-address-edit{justify-self:start} .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{padding:18px} .shop-row-body{padding:16px} .shop-quick-row{grid-template-columns:52px minmax(0,1fr) 64px auto;row-gap:8px} .shop-quick-copy{grid-column:2/-1} .shop-quick-price{grid-column:1/3;justify-self:start;justify-items:start;padding-left:4px} .shop-quick-add{padding:16px} .shop-file-docs{grid-column:2/-1;grid-row:2;margin-top:6px} #place_order{justify-self:stretch} .checkout-items th,.checkout-items td{padding:10px 8px} } /* A field the checkout refuses says why under itself (assets/js/checkout.js, and WooCommerce's own line for a refused order, which shares the class), so the mark is words, not only the red border; the regulamin's box, which has no border to turn red, gets an outline too. */ .checkout-inline-error-message{margin:6px 0 0;color:#9b2c38;font-size:13px;font-weight:700;line-height:1.4} span.checkout-inline-error-message{display:block} .checkout-shipping-methods .checkout-inline-error-message{margin:0} .shop-checkout .woocommerce-invalid input[type="checkbox"]{outline:2px solid #c2384a;outline-offset:2px}