/*
Theme Name: Chrupniemy
Theme URI: https://chrupniemy.pl
Author: M Media House
Description: Motyw blokowy (FSE) sklepu Chrupniemy - orzechy, bakalie i suszone owoce. Paleta z logo marki: czekolada, karmel, krem.
Version: 3.1.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chrupniemy
Tags: e-commerce, block-theme, full-site-editing
*/
/* ==========================================================================
1. Podstawy
========================================================================== */
:root {
--chr-radius: 14px;
--chr-radius-sm: 10px;
--chr-przejscie: 180ms cubic-bezier(.2, .7, .3, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
/* ostatnia linia obrony przed przewijaniem w bok */
html {
overflow-x: hidden;
scroll-behavior: smooth;
}
.chr-hero,
.chr-kategorie,
.chr-sekcja,
.woocommerce ul.products { max-width: 100%; min-width: 0; }
img { max-width: 100%; height: auto; }
:where(a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, .wc-block-components-button:focus-visible) {
outline: 2px solid var(--wp--preset--color--contrast);
outline-offset: 2px;
border-radius: 4px;
}
/* ==========================================================================
2. Górny pasek informacyjny
========================================================================== */
.chr-pasek-gora {
background: var(--wp--preset--color--base-2);
border-bottom: 1px solid var(--wp--preset--color--line);
font-size: 12.5px;
color: var(--wp--preset--color--contrast-2);
}
.chr-pasek-gora__wnetrze {
padding-block: .6rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.chr-pasek-gora__ig {
display: inline-flex;
align-items: center;
gap: .45rem;
color: inherit;
text-decoration: none;
}
.chr-pasek-gora__ig:hover { color: var(--wp--preset--color--accent); }
.chr-pasek-gora__atuty { display: flex; gap: 2.25rem; flex-wrap: wrap; }
.chr-pasek-gora__atuty span { white-space: nowrap; }
/* ==========================================================================
3. Nagłówek: logo | menu wyśrodkowane | ikony
========================================================================== */
.chr-naglowek {
position: sticky;
top: 0;
z-index: 90;
background: var(--wp--preset--color--base);
border-bottom: 1px solid var(--wp--preset--color--line);
}
.chr-naglowek__rzad {
display: grid !important;
box-sizing: border-box;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 1.5rem;
padding-block: 1.15rem;
}
.chr-naglowek .wp-block-site-logo { margin: 0; }
.chr-naglowek .wp-block-site-logo img { max-height: 54px; width: auto; }
.chr-menu .wp-block-navigation__container { gap: 2.25rem; }
.chr-menu .wp-block-navigation-item__content {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--contrast);
padding: .35rem 0;
border-bottom: 2px solid transparent;
transition: color var(--chr-przejscie), border-color var(--chr-przejscie);
}
.chr-menu .wp-block-navigation-item__content:hover,
.chr-menu .current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--accent);
border-bottom-color: var(--wp--preset--color--accent);
}
.chr-ikony { justify-self: end; }
/* WordPress owija wynik shortcode'a w akapit, a blokowy w kontenerze flex
łamie wiersz i zrzuca ikony do drugiej linii. display: contents sprawia,
że opakowanie znika z układu. */
.chr-ikony > p { display: contents; margin: 0; }
/* position: relative + absolutny licznik. Bez tego licznik jest drugim
elementem siatki i ląduje POD ikoną. */
.chr-ikona,
.chr-ikony .wc-block-customer-account,
.chr-ikony .wc-block-mini-cart__button {
position: relative;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wp--preset--color--contrast);
cursor: pointer;
transition: background var(--chr-przejscie), color var(--chr-przejscie);
}
.chr-ikona:hover,
.chr-ikony .wc-block-customer-account:hover,
.chr-ikony .wc-block-mini-cart__button:hover {
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--accent);
}
.chr-ikony .wc-block-customer-account .label { display: none; }
.chr-ikony .wc-block-mini-cart__badge {
background: var(--wp--preset--color--accent);
color: #fff;
font-weight: 800;
font-size: 10px;
}
/* wysuwana wyszukiwarka */
.chr-szukajka {
border-top: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--base-2);
}
.chr-szukajka[hidden] { display: none; }
.chr-szukajka__form {
max-width: 720px;
margin: 0 auto;
padding: 1.1rem var(--wp--preset--spacing--30);
display: flex;
gap: .6rem;
}
.chr-szukajka__form input[type="search"] {
flex: 1;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 4px;
padding: .8rem 1rem;
font-size: var(--wp--preset--font-size--sm);
background: var(--wp--preset--color--base);
}
.chr-szukajka__form input[type="search"]:focus {
outline: none;
border-color: var(--wp--preset--color--accent);
}
.chr-szukajka__form button {
border: 0;
border-radius: 4px;
padding: .8rem 1.75rem;
background: var(--wp--preset--color--contrast);
color: #fff;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
}
.chr-szukajka__form button:hover { background: var(--wp--preset--color--primary); }
/* ==========================================================================
4. Hero
========================================================================== */
.chr-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
background: var(--wp--preset--color--base-2);
min-height: 560px;
}
.chr-hero__tekst {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40)
var(--wp--preset--spacing--50)
max(var(--wp--preset--spacing--30), calc((100vw - 1360px) / 2));
}
.chr-hero__tytul {
font-size: clamp(3.2rem, 6.2vw, 6rem);
font-weight: 800;
line-height: .92;
letter-spacing: -.04em;
margin: 0 0 1.4rem;
color: var(--wp--preset--color--contrast);
}
.chr-hero__lid {
font-size: clamp(1.05rem, 1.35vw, 1.35rem);
color: var(--wp--preset--color--contrast-2);
margin: 0 0 1.9rem;
line-height: 1.5;
}
.chr-hero__cta {
align-self: flex-start;
font-size: 13.5px;
background: var(--wp--preset--color--contrast);
color: #fff !important;
text-decoration: none !important;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 1.05rem 2.1rem;
border-radius: 4px;
transition: background var(--chr-przejscie);
}
.chr-hero__cta:hover { background: var(--wp--preset--color--primary); }
.chr-hero__atuty {
list-style: none;
margin: 2.4rem 0 2.2rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
}
.chr-hero__atuty li {
display: grid;
place-items: center;
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--wp--preset--color--base);
box-shadow: var(--wp--preset--shadow--karta);
transition: transform var(--chr-przejscie), background var(--chr-przejscie);
}
.chr-hero__atuty li:hover {
transform: translateY(-3px);
background: var(--wp--preset--color--nut);
}
.chr-hero__atuty svg {
width: 40px;
height: 40px;
color: var(--wp--preset--color--contrast);
}
/* podpisy zostają w dokumencie dla czytników ekranu, ale nie zajmują miejsca */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.chr-hero__foto {
position: relative;
min-width: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* białe tło, bo packshoty są na bieli - bez tego trzeba by mieszania kolorów,
a mix-blend-mode wyłącza się przy transformacji (stąd biały prostokąt
pojawiający się pod kursorem) */
background: #fff;
}
/* min-width: 0 jest tu obowiązkowe - bez niego element flex nie zejdzie poniżej
szerokości swojej zawartości (zdjęcia mają 1200 px) i rozpycha całą stronę. */
/* Zdjęcia mają się MIEŚCIĆ w panelu, nie wystawać. Wyrównanie do dołu plus
ujemne marginesy powodowały ucinanie misek przy dolnej krawędzi. */
.chr-hero__paczki {
display: flex;
min-width: 0;
align-items: center;
justify-content: center;
gap: 1.5%;
width: 100%;
height: 100%;
padding: 3.5% 3%;
}
.chr-hero__paczka {
flex: 1 1 0;
min-width: 0;
height: 100%;
display: flex;
align-items: center;
transition: transform var(--chr-przejscie);
}
.chr-hero__paczka--1 { z-index: 2; transform: scale(1.09); }
.chr-hero__paczka--1:hover { transform: scale(1.09) translateY(-8px); }
.chr-hero__paczka img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.chr-hero__paczka:hover { transform: translateY(-8px); }
/* ==========================================================================
5. Pasek kategorii
========================================================================== */
.chr-kategorie {
margin-top: var(--wp--preset--spacing--40);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.chr-kategoria {
display: flex;
min-width: 0;
align-items: center;
gap: .9rem;
padding: .85rem 1rem;
background: var(--wp--preset--color--base-2);
border-radius: 10px;
text-decoration: none !important;
transition: background var(--chr-przejscie), transform var(--chr-przejscie);
}
.chr-kategoria:hover {
background: var(--wp--preset--color--base-3);
transform: translateY(-2px);
}
.chr-kategoria__obraz {
flex: 0 0 auto;
min-width: 0;
width: 58px;
height: 58px;
border-radius: 50%;
overflow: hidden;
background: var(--wp--preset--color--base);
display: grid;
place-items: center;
}
.chr-kategoria__obraz img {
width: 100%;
height: 100%;
object-fit: cover;
/* miska z produktem jest w prawym dolnym rogu packshotu - tam kadrujemy */
transform: scale(2.4);
transform-origin: 80% 84%;
}
.chr-kategoria__tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.chr-kategoria__tekst strong {
overflow-wrap: anywhere;
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
color: var(--wp--preset--color--contrast);
}
.chr-kategoria__tekst em {
font-style: normal;
font-size: 12px;
color: var(--wp--preset--color--contrast-2);
}
/* ==========================================================================
6. Karta produktu na listingu - zdjęcie dominuje
========================================================================== */
/* Woo deklaruje liczbę kolumn klasą .columns-N, ale układa je floatami i dokłada
clearfix przez ::before/::after. W gridzie te pseudo-elementy stają się
KOMÓRKAMI - stąd puste pole na początku i końcu rzędu. Trzeba je wyzerować. */
.woocommerce ul.products {
display: grid;
gap: 3rem 2rem;
margin: 0;
padding-left: 0;
list-style: none;
grid-template-columns: repeat(var(--chr-kolumny, 4), minmax(0, 1fr));
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
content: none !important;
display: none !important;
}
.woocommerce ul.products.columns-1 { --chr-kolumny: 1; }
.woocommerce ul.products.columns-2 { --chr-kolumny: 2; }
.woocommerce ul.products.columns-3 { --chr-kolumny: 3; }
.woocommerce ul.products.columns-4 { --chr-kolumny: 4; }
.woocommerce ul.products.columns-5 { --chr-kolumny: 5; }
.woocommerce ul.products.columns-6 { --chr-kolumny: 6; }
.woocommerce ul.products li.product {
position: relative;
display: flex !important;
flex-direction: column;
float: none !important;
clear: none !important;
width: auto !important;
/* bez min-width: 0 element siatki nie zejdzie poniżej szerokości swojej
zawartości (pigułki z ceną mają nowrap) i rozepchnie całą kolumnę */
min-width: 0;
max-width: none !important;
margin: 0 !important;
padding: 0;
text-align: center;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; }
.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
display: block;
width: 100%;
}
.woocommerce ul.products li.product a img {
width: 100% !important;
height: auto;
max-width: none;
display: block;
border-radius: 10px;
background: var(--wp--preset--color--base-2);
aspect-ratio: 1 / 1;
object-fit: cover;
margin-bottom: .85rem;
transition: transform var(--chr-przejscie);
}
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.4;
color: var(--wp--preset--color--contrast);
padding: 0;
margin: 0 0 .7rem;
/* dokładnie dwie linie - dłuższe nazwy są przycinane wielokropkiem.
Bez tego karta z trzywierszową nazwą przesuwa pigułki w dół i rząd
przestaje się trzymać jednej linii. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 2.8em;
}
.woocommerce ul.products li.product .price {
font-size: var(--wp--preset--font-size--md);
font-weight: 800;
color: var(--wp--preset--color--contrast);
margin: .6rem 0 0;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 500; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--wp--preset--color--sale); }
.woocommerce ul.products li.product .button {
display: block;
width: 100%;
margin-top: auto;
padding: .8rem 1rem;
border-radius: 4px;
background: var(--wp--preset--color--contrast);
color: #fff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
text-align: center;
transition: background var(--chr-przejscie);
}
.woocommerce ul.products li.product .button:hover { background: var(--wp--preset--color--primary); }
.woocommerce ul.products li.product .added_to_cart { display: none; }
.woocommerce span.onsale {
position: absolute;
top: .7rem;
left: .7rem;
right: auto;
z-index: 2;
min-width: 0;
min-height: 0;
padding: .28rem .65rem;
line-height: 1.4;
background: var(--wp--preset--color--sale);
color: #fff;
font-size: 11px;
font-weight: 800;
border-radius: 4px;
}
/* Wybór gramatury. Ciemne bloki były za ciężkie i przytłaczały zdjęcie -
teraz lekkie kafelki z obrysem, wypełniają się dopiero pod kursorem. */
.chr-gramatury {
display: flex;
gap: .5rem;
margin-top: auto;
padding-top: .2rem;
}
.chr-gramatura {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
min-width: 0;
overflow: hidden;
padding: .6rem .3rem;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 6px;
background: var(--wp--preset--color--base);
text-decoration: none !important;
transition: border-color var(--chr-przejscie), background var(--chr-przejscie),
color var(--chr-przejscie);
}
.chr-gramatura:hover,
.chr-gramatura:focus-visible {
border-color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--contrast);
}
.chr-gramatura__waga {
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-2);
white-space: nowrap;
transition: color var(--chr-przejscie);
}
.chr-gramatura__cena {
font-size: 15px;
font-weight: 800;
color: var(--wp--preset--color--contrast);
white-space: nowrap;
transition: color var(--chr-przejscie);
}
.chr-gramatura__cena .woocommerce-Price-amount { color: inherit; }
.chr-gramatura__cena .woocommerce-Price-currencySymbol { font-size: .78em; font-weight: 700; }
.chr-gramatura:hover .chr-gramatura__waga { color: rgba(255, 255, 255, .7); }
.chr-gramatura:hover .chr-gramatura__cena { color: #fff; }
/* Własny kontener sekcji. Nie polegamy ani na alignwide (wymaga rodzica
"constrained"), ani na globalnym wcięciu WordPressa - to drugie sumowało się
z naszym i wypychało treść poza ekran na telefonie. */
.chr-sekcja,
.chr-kategorie,
.chr-pasek-gora__wnetrze,
.chr-naglowek__rzad,
.chr-szukajka__form {
width: 100%;
max-width: calc(1360px + 2 * var(--wp--preset--spacing--30));
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--30);
}
/* nagłówek sekcji: tytuł z lewej, "zobacz wszystkie" z prawej */
.chr-sekcja-naglowek {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.6rem;
}
.chr-sekcja-naglowek a {
font-size: 12px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--contrast);
white-space: nowrap;
}
.chr-sekcja-naglowek a:hover { color: var(--wp--preset--color--accent); }
/* ==========================================================================
5. Karta produktu (strona pojedyncza)
========================================================================== */
/* Nazwa produktu to najważniejsza informacja na stronie - musi być większa
od ceny. Reguła h1 z theme.json przegrywa ze stylami WooCommerce, więc
ustawiamy rozmiar wprost. */
.woocommerce div.product .product_title {
font-size: var(--wp--preset--font-size--3-xl);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.025em;
margin: 0 0 .75rem;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
border-radius: var(--chr-radius);
background: var(--wp--preset--color--base-2);
}
.woocommerce div.product .flex-control-thumbs li img {
border-radius: var(--chr-radius-sm);
border: 1.5px solid transparent;
opacity: .65;
transition: opacity var(--chr-przejscie), border-color var(--chr-przejscie);
}
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
opacity: 1;
border-color: var(--wp--preset--color--accent);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: var(--wp--preset--font-size--2-xl);
font-weight: 800;
color: var(--wp--preset--color--contrast);
}
.woocommerce div.product form.cart .variations {
background: var(--wp--preset--color--base-2);
border-radius: var(--chr-radius);
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.woocommerce div.product form.cart .variations label { font-weight: 700; }
.woocommerce div.product form.cart .variations select {
border: 1.5px solid var(--wp--preset--color--line);
border-radius: var(--chr-radius-sm);
padding: .7rem 1rem;
background: var(--wp--preset--color--base);
font-size: var(--wp--preset--font-size--sm);
min-height: 46px;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
border-radius: 999px;
padding: 1rem 2.5rem;
font-weight: 700;
font-size: var(--wp--preset--font-size--md);
background: var(--wp--preset--color--accent);
min-height: 54px;
}
.woocommerce div.product form.cart .button:hover { background: var(--wp--preset--color--primary); }
.woocommerce div.product .quantity input.qty {
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 999px;
min-height: 54px;
width: 84px;
text-align: center;
font-weight: 700;
background: var(--wp--preset--color--base);
}
/* zakładki */
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0;
margin: 0 0 1.5rem;
border-bottom: 1px solid var(--wp--preset--color--line);
display: flex;
gap: .35rem;
flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: 0;
border-radius: 0;
margin: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: .85rem 1.25rem;
font-weight: 700;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--contrast-2);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--wp--preset--color--contrast);
border-bottom-color: var(--wp--preset--color--accent);
}
.woocommerce-Tabs-panel h3 {
font-size: var(--wp--preset--font-size--lg);
margin: 1.75rem 0 .6rem;
}
.woocommerce-Tabs-panel h4 {
font-size: var(--wp--preset--font-size--md);
margin: 1.5rem 0 .5rem;
}
.woocommerce-Tabs-panel ul { padding-left: 1.15rem; }
.woocommerce-Tabs-panel li { margin-bottom: .35rem; }
.woocommerce-Tabs-panel table {
width: 100%;
border-collapse: collapse;
margin: .75rem 0 1.25rem;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-Tabs-panel th,
.woocommerce-Tabs-panel td {
text-align: left;
padding: .65rem .85rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.woocommerce-Tabs-panel thead th {
background: var(--wp--preset--color--base-2);
font-weight: 700;
}
/* ==========================================================================
6. Zaufanie, koszyk, komunikaty
========================================================================== */
.chr-zaufanie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem;
padding: 1.5rem 0;
}
.chr-zaufanie__punkt {
display: flex;
gap: .85rem;
align-items: flex-start;
font-size: var(--wp--preset--font-size--sm);
}
.chr-zaufanie__ikona {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--wp--preset--color--base-2);
display: grid;
place-items: center;
font-size: 18px;
}
.chr-zaufanie__punkt strong { display: block; margin-bottom: .1rem; }
.chr-zaufanie__punkt span { color: var(--wp--preset--color--contrast-2); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-top: 0;
border-left: 4px solid var(--wp--preset--color--accent);
border-radius: var(--chr-radius-sm);
background: var(--wp--preset--color--base-2);
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--accent); }
.woocommerce-error { border-left-color: var(--wp--preset--color--sale); }
.woocommerce table.shop_table {
border-radius: var(--chr-radius);
border-color: var(--wp--preset--color--line);
}
.woocommerce-cart table.cart img { border-radius: var(--chr-radius-sm); width: 72px; }
/* ==========================================================================
7. Stopka
========================================================================== */
/* Stopka jasna. Logo ma ciemnobrązowe wypełnienie - na ciemnym tle zostawała
z niego tylko kremowa obwódka i znak czytał się jak pusty kontur. Jasne tło
rozwiązuje to bez przerabiania pliku logo. */
.chr-stopka {
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast-2);
border-top: 1px solid var(--wp--preset--color--line);
}
.chr-stopka a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }
.chr-stopka a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.chr-stopka h2, .chr-stopka h3, .chr-stopka strong { color: var(--wp--preset--color--contrast); }
.chr-stopka .wp-block-heading {
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
}
/* ==========================================================================
8. Mobile
========================================================================== */
@media (max-width: 781px) {
.chr-kategorie-kola { --kolo: 80px; }
.woocommerce ul.products { gap: 1.5rem 1rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 0; }
.woocommerce div.product form.cart .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ==========================================================================
11. Szuflada koszyka + "Dobierz do zamówienia"
========================================================================== */
.chr-tlo {
position: fixed;
inset: 0;
z-index: 998;
background: rgba(46, 24, 16, .45);
opacity: 0;
transition: opacity 240ms ease;
}
.chr-tlo.jest-widoczne { opacity: 1; }
.chr-szuflada {
position: fixed;
top: 0;
right: 0;
z-index: 999;
width: min(420px, 100vw);
/* dvh, nie vh - inaczej pasek adresu na telefonie utnie stopkę */
height: 100dvh;
display: flex;
flex-direction: column;
background: var(--wp--preset--color--base);
box-shadow: -8px 0 40px rgba(46, 24, 16, .16);
transform: translateX(100%);
transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.chr-szuflada.jest-otwarta { transform: none; }
.chr-szuflada.jest-zajeta { pointer-events: none; opacity: .7; }
.chr-szuflada__gora {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.chr-szuflada__tytul {
margin: 0;
font-size: 15px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.chr-szuflada__zamknij {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wp--preset--color--contrast);
cursor: pointer;
}
.chr-szuflada__zamknij:hover { background: var(--wp--preset--color--base-2); }
/* tylko środek się przewija - przycisk kasy ma być zawsze widoczny */
.chr-szuflada__srodek {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.1rem 1.25rem;
}
.chr-szuflada__dol {
flex: 0 0 auto;
padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--base);
}
.chr-szuflada__suma {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: .85rem;
font-size: var(--wp--preset--font-size--sm);
}
.chr-szuflada__suma strong {
font-size: var(--wp--preset--font-size--lg);
font-weight: 800;
border-radius: 4px;
padding: 0 .2rem;
}
.chr-szuflada__suma strong.jest-zmieniona {
animation: chr-podswietl 900ms ease;
}
@keyframes chr-podswietl {
0% { background: rgba(180, 90, 18, .18); }
100% { background: transparent; }
}
.chr-szuflada__kasa,
.chr-szuflada__dalej {
display: block;
width: 100%;
text-align: center;
border-radius: 4px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
}
.chr-szuflada__kasa {
padding: 1.05rem 1rem;
background: var(--wp--preset--color--contrast);
color: #fff !important;
text-decoration: none !important;
}
.chr-szuflada__kasa:hover { background: var(--wp--preset--color--primary); }
.chr-szuflada__dalej {
margin-top: .5rem;
padding: .8rem 1rem;
background: transparent;
border: 0;
color: var(--wp--preset--color--contrast-2);
}
.chr-szuflada__dalej:hover { color: var(--wp--preset--color--accent); }
.chr-szuflada__blad {
margin: 0 0 .9rem;
padding: .7rem .9rem;
border-left: 3px solid var(--wp--preset--color--sale);
border-radius: 4px;
background: #fdf1ef;
font-size: var(--wp--preset--font-size--sm);
}
/* ── pozycje koszyka ── */
.chr-koszyk-lista { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.chr-koszyk-pusty {
padding: 2rem 0;
text-align: center;
color: var(--wp--preset--color--contrast-2);
font-size: var(--wp--preset--font-size--sm);
}
.chr-koszyk-poz {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.chr-koszyk-poz.jest-nowa { animation: chr-wejscie 400ms ease; }
@keyframes chr-wejscie {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.chr-koszyk-poz__foto {
flex: 0 0 64px;
width: 64px;
height: 64px;
object-fit: contain;
background: var(--wp--preset--color--base-2);
border-radius: 8px;
}
.chr-koszyk-poz__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chr-koszyk-poz__nazwa {
font-size: 14px;
font-weight: 700;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chr-koszyk-poz__wariant { font-size: 12px; color: var(--wp--preset--color--contrast-2); }
.chr-koszyk-poz__cena { font-size: 14px; font-weight: 800; }
.chr-koszyk-poz__akcje { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.chr-ilosc {
display: flex;
align-items: center;
gap: .1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 999px;
overflow: hidden;
}
.chr-ilosc button {
width: 28px;
height: 28px;
border: 0;
background: transparent;
font-size: 16px;
line-height: 1;
color: var(--wp--preset--color--contrast);
cursor: pointer;
}
.chr-ilosc button:hover { background: var(--wp--preset--color--base-2); }
.chr-ilosc span { min-width: 20px; text-align: center; font-size: 13px; font-weight: 700; }
.chr-koszyk-poz__usun {
border: 0;
background: transparent;
padding: 0;
font-size: 11px;
color: var(--wp--preset--color--contrast-2);
text-decoration: underline;
cursor: pointer;
}
.chr-koszyk-poz__usun:hover { color: var(--wp--preset--color--sale); }
/* ── pasek darmowej dostawy ── */
.chr-dostawa {
margin-bottom: 1.25rem;
padding: .85rem 1rem;
border-radius: 8px;
background: var(--wp--preset--color--base-2);
}
.chr-dostawa__tekst { margin: 0 0 .5rem; font-size: 12.5px; font-weight: 600; }
.chr-dostawa__pasek {
height: 6px;
border-radius: 999px;
background: var(--wp--preset--color--base-3);
overflow: hidden;
}
.chr-dostawa__pasek span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--wp--preset--color--accent);
transition: width 420ms cubic-bezier(.2, .7, .3, 1);
}
.chr-dostawa.jest-osiagnieta .chr-dostawa__pasek span { background: var(--wp--preset--color--success); }
/* ── dobierz do zamówienia ── */
.chr-dobierz { margin-top: .5rem; }
.chr-dobierz__naglowek {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .6rem 0;
border: 0;
background: transparent;
font-size: 12px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
cursor: pointer;
}
.chr-dobierz__licznik { color: var(--wp--preset--color--contrast-2); font-weight: 700; }
.chr-dobierz__strzalka { margin-left: auto; transition: transform 200ms ease; }
.chr-dobierz.jest-zwinieta .chr-dobierz__strzalka { transform: rotate(-90deg); }
.chr-dobierz.jest-zwinieta .chr-dobierz__lista { display: none; }
.chr-dobierz__lista { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: 8px; }
.chr-dokladka {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 10px;
background: var(--wp--preset--color--base);
transition: border-color 150ms ease, opacity 260ms ease, max-height 260ms ease;
max-height: 120px;
overflow: hidden;
}
.chr-dokladka:hover { border-color: var(--wp--preset--color--contrast-2); }
.chr-dokladka.jest-znikajaca { opacity: 0; max-height: 0; padding-block: 0; margin-bottom: -8px; }
.chr-dokladka__foto {
flex: 0 0 64px;
width: 64px;
height: 64px;
object-fit: contain;
background: var(--wp--preset--color--base-2);
border-radius: 8px;
}
.chr-dokladka__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chr-dokladka__nazwa {
font-size: 15px;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chr-dokladka__wariant { font-size: 13px; color: var(--wp--preset--color--contrast-2); }
.chr-dokladka__cena { font-size: 15px; font-weight: 700; }
.chr-dokladka__dodaj {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
background: transparent;
display: grid;
place-items: center;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chr-dokladka__dodaj:hover:not(:disabled) {
background: var(--wp--preset--color--accent);
color: #fff;
}
.chr-dokladka__dodaj.jest-ladowanie .chr-dokladka__plus { visibility: hidden; }
.chr-dokladka__dodaj.jest-ladowanie::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: chr-obrot 700ms linear infinite;
}
.chr-dokladka__dodaj { position: relative; }
@keyframes chr-obrot { to { transform: rotate(360deg); } }
.chr-dokladka__dodaj.jest-dodane {
background: var(--wp--preset--color--success);
border-color: var(--wp--preset--color--success);
color: #fff;
}
.chr-dokladka__dodaj.jest-dodane .chr-dokladka__plus { visibility: hidden; }
.chr-dokladka__dodaj.jest-dodane::after {
content: "";
position: absolute;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translate(-1px, -2px);
animation: none;
border-radius: 0;
}
.chr-gramatura.jest-ladowanie { opacity: .55; pointer-events: none; }
/* ── telefon: arkusz od dołu ── */
@media (max-width: 560px) {
.chr-szuflada {
top: auto;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 85dvh;
border-radius: 18px 18px 0 0;
transform: translateY(100%);
box-shadow: 0 -8px 40px rgba(46, 24, 16, .18);
}
.chr-szuflada.jest-otwarta { transform: none; }
.chr-szuflada__gora { position: relative; padding-top: 1.5rem; }
.chr-szuflada__gora::before {
content: "";
position: absolute;
top: .55rem;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 999px;
background: var(--wp--preset--color--line);
}
.chr-dokladka__foto,
.chr-koszyk-poz__foto { flex-basis: 56px; width: 56px; height: 56px; }
/* przycisk dotykowy nie schodzi poniżej 44 px */
.chr-dokladka__dodaj { flex-basis: 44px; width: 44px; height: 44px; }
}
/* ==========================================================================
12. Wybór gramatury przyciskami na karcie produktu
========================================================================== */
.chr-wybor {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin: .35rem 0 .2rem;
}
.chr-wybor__opcja {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
min-width: 0;
padding: .8rem .7rem;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 8px;
background: var(--wp--preset--color--base);
cursor: pointer;
transition: border-color var(--chr-przejscie), background var(--chr-przejscie),
color var(--chr-przejscie);
}
.chr-wybor__opcja:hover:not(:disabled) { border-color: var(--wp--preset--color--contrast-2); }
.chr-wybor__opcja.jest-wybrana {
border-color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--contrast);
}
.chr-wybor__opcja.jest-wybrana .chr-wybor__waga { color: rgba(255, 255, 255, .7); }
.chr-wybor__opcja.jest-wybrana .chr-wybor__cena { color: #fff; }
.chr-wybor__opcja:disabled,
.chr-wybor__opcja.jest-niedostepna {
opacity: .4;
cursor: not-allowed;
text-decoration: line-through;
}
.chr-wybor__waga {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-2);
white-space: nowrap;
}
.chr-wybor__cena {
font-size: var(--wp--preset--font-size--md);
font-weight: 800;
color: var(--wp--preset--color--contrast);
white-space: nowrap;
}
/* listę rozwijaną chowamy dopiero gdy przyciski faktycznie działają */
.woocommerce div.product form.cart .variations.chr-ma-przyciski select,
.woocommerce div.product form.cart .variations.chr-ma-przyciski .reset_variations {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.woocommerce div.product form.cart .variations.chr-ma-przyciski label { margin-bottom: .2rem; }
@media (max-width: 420px) {
.chr-wybor__opcja { flex-basis: 100%; }
}
/* ==========================================================================
13. Licznik pozycji w koszyku
========================================================================== */
/* Ikona ma display: grid, więc bez pozycjonowania absolutnego licznik
stawał się drugim wierszem siatki i lądował POD ikoną. */
.chr-licznik {
position: absolute;
top: 3px;
right: 1px;
display: grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--wp--preset--color--accent);
color: #fff;
font-size: 10.5px;
font-weight: 800;
line-height: 1;
box-shadow: 0 0 0 2px var(--wp--preset--color--base);
pointer-events: none;
}
.chr-licznik[hidden] { display: none; }
/* ==========================================================================
14. Logo w stopce
========================================================================== */
.chr-stopka__logo {
display: block;
width: 190px;
max-width: 60%;
height: auto;
margin-bottom: 1rem;
}
@media (max-width: 781px) {
.chr-stopka__logo { width: 160px; margin-inline: auto; }
.chr-stopka .wp-block-columns > .wp-block-column:first-child { text-align: center; }
}
/* logo w stopce jako link ze skrótu */
.chr-stopka a.chr-stopka__logo { display: block; width: 200px; max-width: 62%; margin-bottom: 1rem; }
.chr-stopka a.chr-stopka__logo img { width: 100%; height: auto; display: block; }
.chr-stopka > .wp-block-columns p:has(> a.chr-stopka__logo) { margin: 0; }
/* ==========================================================================
RESPONSYWNOŚĆ - na końcu arkusza celowo.
Zapytania medialne nie podnoszą specyficzności, więc zwykła reguła
położona niżej w pliku wygrywa z regułą w @media położoną wyżej.
Trzymanie tego bloku na końcu gwarantuje, że przebija wszystko powyżej.
========================================================================== */
/* ── Siatka produktów ── */
@media (max-width: 1199px) {
.woocommerce ul.products { --chr-kolumny: 3 !important; gap: 2.5rem 1.5rem; }
}
@media (max-width: 899px) {
.woocommerce ul.products { --chr-kolumny: 2 !important; gap: 2rem 1rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 11.5px; letter-spacing: .04em; height: 2.9em;
}
}
@media (max-width: 480px) {
.woocommerce ul.products { gap: 1.6rem .7rem; }
.chr-gramatura { padding: .5rem .15rem; }
.chr-gramatura__cena { font-size: 12.5px; }
.chr-gramatura__waga { font-size: 8.5px; letter-spacing: .04em; }
.chr-gramatura__cena .woocommerce-Price-currencySymbol { font-size: .72em; }
}
/* arkusz Woo na małe ekrany wraca do jednej kolumny z !important - przebijamy */
@media (max-width: 768px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
}
}
/* ── Nagłówek ── */
@media (max-width: 1100px) {
.chr-naglowek__rzad { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; padding-block: .9rem; }
.chr-menu .wp-block-navigation__container { gap: 1.25rem; }
.chr-menu .wp-block-navigation-item__content { font-size: 11.5px; letter-spacing: .06em; }
}
@media (max-width: 860px) {
.chr-naglowek__rzad { grid-template-columns: minmax(0, 1fr) auto auto; }
.chr-naglowek .wp-block-site-logo img { max-height: 42px; }
.chr-pasek-gora__atuty span:nth-child(n+2) { display: none; }
}
@media (max-width: 560px) {
.chr-pasek-gora { font-size: 11.5px; }
.chr-pasek-gora__wnetrze { justify-content: center; }
.chr-pasek-gora__ig span { display: none; }
.chr-naglowek__rzad { gap: .5rem; padding-block: .7rem; }
.chr-naglowek .wp-block-site-logo img { max-height: 34px; }
.chr-ikony { gap: .1rem !important; }
.chr-ikona,
.chr-ikony .wc-block-customer-account { width: 38px; height: 38px; }
.chr-ikona svg { width: 19px; height: 19px; }
.chr-ikony .wc-block-customer-account { display: none; }
.chr-szukajka__form { flex-direction: column; }
.chr-szukajka__form button { width: 100%; }
}
/* ── Hero ── */
@media (max-width: 1024px) {
.chr-hero { grid-template-columns: 1fr; min-height: 0; }
.chr-hero__foto { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
.chr-hero__tekst { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); text-align: left; }
.chr-hero__tytul { font-size: clamp(2.6rem, 9vw, 4rem); }
.chr-hero__atuty { gap: 1rem; margin: 1.8rem 0 1.6rem; }
.chr-hero__atuty li { width: 64px; height: 64px; }
.chr-hero__atuty svg { width: 34px; height: 34px; }
.chr-hero__paczki { padding: 4% 3%; gap: 2%; }
.chr-hero__paczka--1 { transform: none; }
.chr-hero__paczka--1:hover { transform: translateY(-6px); }
}
@media (max-width: 560px) {
.chr-hero__atuty { gap: .8rem; justify-content: flex-start; }
.chr-hero__cta { width: 100%; text-align: center; }
}
/* ── Kategorie ── */
@media (max-width: 900px) {
.chr-kategorie { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@media (max-width: 600px) {
.chr-kategorie { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.chr-kategoria { flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: .9rem .5rem; }
.chr-kategoria__obraz { width: 54px; height: 54px; }
.chr-kategoria__tekst { align-items: center; }
.chr-kategoria__tekst em { display: none; }
.chr-kategoria__tekst strong { font-size: 12.5px; line-height: 1.25; }
}
/* ── Sekcje ── */
@media (max-width: 899px) {
.chr-sekcja { margin-top: var(--wp--preset--spacing--40) !important; }
.chr-sekcja-naglowek { margin-bottom: 1.1rem; }
}
@media (max-width: 640px) {
.chr-sekcja-naglowek { flex-direction: column; align-items: flex-start; gap: .25rem; }
.chr-sekcja-naglowek a { font-size: 11.5px; }
.chr-sekcja-naglowek h2 { font-size: 1.55rem; }
.chr-kategorie { margin-top: var(--wp--preset--spacing--30); }
}
/* ==========================================================================
10b. Karta produktu na telefonie
========================================================================== */
@media (max-width: 900px) {
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
width: 100% !important;
float: none !important;
margin: 0 0 1.5rem !important;
}
.woocommerce div.product .product_title { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
.woocommerce div.product p.price { font-size: var(--wp--preset--font-size--sm); }
/* miniatury galerii: jeden rząd z przewijaniem, nigdy dwa rzędy */
.woocommerce div.product .flex-control-thumbs {
flex-wrap: nowrap !important;
gap: .5rem;
-webkit-overflow-scrolling: touch;
}
.woocommerce div.product .flex-control-thumbs li {
flex: 0 0 64px !important;
width: 64px !important;
}
.woocommerce div.product .flex-control-thumbs li img { width: 64px; height: 64px; }
/* wybór gramatury: etykieta nad przyciskami, przyciski obok siebie */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
display: block;
width: 100%;
padding: 0;
text-align: left;
}
.woocommerce div.product form.cart .variations {
padding: 1rem;
margin-bottom: 1rem;
}
.woocommerce div.product form.cart .variations th.label {
margin-bottom: .5rem;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-2);
}
.chr-wybor { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 0; }
.chr-wybor__opcja { flex: none; }
/* ilość + przycisk w jednym rzędzie, przycisk zajmuje resztę */
.woocommerce div.product form.cart {
display: grid;
grid-template-columns: 88px 1fr;
gap: .6rem;
align-items: stretch;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart .chr-zaufanie { grid-column: 1 / -1; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
display: grid;
grid-template-columns: 88px 1fr;
gap: .6rem;
}
.woocommerce div.product .quantity input.qty { width: 100%; min-height: 52px; }
.woocommerce div.product form.cart .button { width: 100%; min-height: 52px; padding: 1rem; }
/* zakładki jedna pod drugą, bez poziomego rozjazdu */
.woocommerce div.product .woocommerce-tabs ul.tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .7rem .85rem; font-size: 12px; white-space: nowrap; }
.woocommerce-Tabs-panel table { display: block; overflow-x: auto; }
.chr-zaufanie { grid-template-columns: 1fr; gap: .8rem; padding: 1rem 0 0; }
.woocommerce .woocommerce-breadcrumb { font-size: 12px; margin-bottom: .8rem; }
.woocommerce div.product .related ul.products { --chr-kolumny: 2 !important; }
}
/* ==========================================================================
10c. Koszyk i kasa na telefonie
========================================================================== */
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive,
.woocommerce table.shop_table_responsive tbody,
.woocommerce table.shop_table_responsive tr,
.woocommerce table.shop_table_responsive td { display: block; width: 100%; }
.woocommerce table.shop_table_responsive thead { display: none; }
.woocommerce table.shop_table_responsive tr {
border: 1px solid var(--wp--preset--color--line);
border-radius: 10px;
padding: .85rem;
margin-bottom: .85rem;
position: relative;
}
.woocommerce table.shop_table_responsive td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
border: 0;
padding: .3rem 0;
text-align: right;
}
.woocommerce table.shop_table_responsive td::before {
content: attr(data-title);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-2);
}
.woocommerce table.shop_table_responsive td.product-thumbnail { justify-content: flex-start; }
.woocommerce table.shop_table_responsive td.product-thumbnail::before { content: none; }
.woocommerce-cart table.cart img { width: 64px; border-radius: 8px; }
.woocommerce table.shop_table_responsive td.product-remove {
position: absolute;
top: .5rem;
right: .5rem;
width: auto;
padding: 0;
}
.woocommerce table.shop_table_responsive td.product-remove::before { content: none; }
.woocommerce .cart .coupon,
.woocommerce .cart .actions .button {
width: 100%;
float: none !important;
margin: 0 0 .6rem !important;
}
.woocommerce .cart .coupon { display: grid; gap: .5rem; }
.woocommerce .cart .coupon input.input-text { width: 100% !important; min-height: 50px; }
.woocommerce .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
.woocommerce .checkout_coupon,
.woocommerce form.checkout_coupon .form-row { width: 100% !important; float: none !important; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100% !important; float: none !important; }
.woocommerce #payment .form-row.place-order .button { width: 100%; }
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
min-height: 50px;
font-size: 16px; /* poniżej 16px iPhone przybliża widok przy wpisywaniu */
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 8px;
padding: .6rem .8rem;
width: 100%;
}
}
/* ==========================================================================
10d. Stopka na telefonie
========================================================================== */
@media (max-width: 900px) {
.chr-stopka { padding-top: var(--wp--preset--spacing--40) !important; }
.chr-stopka .wp-block-columns {
flex-wrap: wrap !important;
gap: 2rem 1.5rem;
}
.chr-stopka .wp-block-column { flex-basis: calc(50% - .75rem) !important; }
.chr-stopka .wp-block-column:first-child { flex-basis: 100% !important; }
}
@media (max-width: 560px) {
.chr-stopka .wp-block-column { flex-basis: 100% !important; }
.chr-stopka a.chr-stopka__logo { width: 170px; max-width: 70%; margin-inline: auto; }
.chr-stopka .wp-block-column:first-child { text-align: center; }
.chr-stopka .wp-block-columns { gap: 1.75rem; }
.chr-stopka ul { padding-left: 0; list-style: none; }
.chr-stopka li { padding: .3rem 0; }
.chr-stopka .wp-block-heading { margin-bottom: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ==========================================================================
POPRAWKI KOŃCOWE - celowo na samym końcu arkusza
========================================================================== */
/* Galeria produktu: flexslider tworzy
dopiero w przeglądarce i nadaje
pozycjom szerokości w stylach wpisanych w element. Jeden rząd kwadratów
z przewijaniem, nigdy dwa rzędy. */
.woocommerce div.product .flex-control-thumbs {
display: flex !important;
flex-wrap: nowrap !important;
gap: .55rem;
margin: .8rem 0 0 !important;
padding: 0 0 .45rem !important;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
list-style: none;
}
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar { height: 5px; }
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar-thumb {
background: var(--wp--preset--color--line);
border-radius: 999px;
}
.woocommerce div.product .flex-control-thumbs li {
flex: 0 0 78px !important;
width: 78px !important;
max-width: 78px !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
list-style: none;
}
.woocommerce div.product .flex-control-thumbs li img {
width: 78px !important;
height: 78px !important;
object-fit: cover;
}
/* Przycisk zakupu: prostokąt w stylu reszty serwisu, nie pigułka */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
border-radius: 4px !important;
font-size: 13px !important;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
background: var(--wp--preset--color--contrast);
padding: 1rem 1.75rem;
min-height: 54px;
}
.woocommerce div.product form.cart .button:hover:not(.disabled) {
background: var(--wp--preset--color--primary);
}
.woocommerce div.product .quantity input.qty { border-radius: 4px !important; }
@media (max-width: 900px) {
.woocommerce div.product .flex-control-thumbs li,
.woocommerce div.product .flex-control-thumbs li img {
flex-basis: 64px !important;
width: 64px !important;
max-width: 64px !important;
height: 64px !important;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
width: 100%;
padding: 1rem .75rem;
font-size: 12px !important;
}
}
/* Ilość + "dodaj do koszyka" w jednym rzędzie.
Przy produkcie wariantowym przycisk siedzi w .single_variation_wrap, więc
reguły nałożone na bezpośrednie dzieci form.cart go nie obejmują. */
.woocommerce div.product form.cart { display: block; }
.woocommerce div.product form.cart .single_variation_wrap { display: block; width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart > .quantity + .button,
.woocommerce div.product form.cart:not(.variations_form) {
display: flex;
align-items: stretch;
gap: .6rem;
}
.woocommerce div.product form.cart .quantity {
flex: 0 0 92px;
margin: 0 !important;
}
.woocommerce div.product form.cart .quantity input.qty {
width: 100%;
height: 100%;
min-height: 54px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1 1 auto;
max-width: 340px;
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: .8rem; }
@media (max-width: 900px) {
.woocommerce div.product form.cart .quantity { flex: 0 0 84px; }
.woocommerce div.product form.cart .single_add_to_cart_button { max-width: none; }
}
/* Stopka: własny kontener z marginesami. Bez tego treść dotyka krawędzi
ekranu, bo globalne wcięcie WordPressa jest wyłączone. */
.chr-stopka > .wp-block-columns,
.chr-stopka > .wp-block-separator,
.chr-stopka > .wp-block-paragraph,
.chr-stopka > p {
width: 100%;
max-width: calc(1360px + 2 * var(--wp--preset--spacing--30));
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--30);
box-sizing: border-box;
}
.chr-stopka > .wp-block-separator { max-width: calc(1360px + 2 * var(--wp--preset--spacing--30)); }
@media (max-width: 560px) {
.chr-stopka .wp-block-column { text-align: center; }
.chr-stopka ul { padding-left: 0; }
.chr-stopka a.chr-stopka__logo { margin-inline: auto; }
.chr-stopka .wp-block-columns { gap: 1.5rem !important; }
.chr-stopka .wp-block-heading { margin-top: .5rem; }
}
/* ==========================================================================
Hero: baner zamiast klikalnych packshotów
========================================================================== */
.chr-hero__baner {
display: block;
position: relative;
min-width: 0;
overflow: hidden;
/* tło banera to #E4CBB1 - ustawiamy je pod spodem, żeby przy kadrowaniu
nie mignął pasek w innym kolorze */
background: #E4CBB1;
line-height: 0;
}
.chr-hero__baner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 400ms cubic-bezier(.2, .7, .3, 1);
}
.chr-hero__baner:hover img { transform: scale(1.02); }
.chr-hero__baner:focus-visible { outline: 3px solid var(--wp--preset--color--contrast); outline-offset: -3px; }
@media (max-width: 1024px) {
.chr-hero__baner { order: -1; aspect-ratio: 3 / 2; }
.chr-hero__baner img { height: auto; }
}
/* hero bez ikon - przycisk dostaje oddech po lidzie */
.chr-hero__cta { margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ==========================================================================
Koszyk na telefonie - karta zamiast rozbitej tabeli
========================================================================== */
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive,
.woocommerce table.shop_table_responsive tbody { display: block; width: 100%; border: 0; }
.woocommerce table.shop_table_responsive thead { display: none; }
.woocommerce-cart table.cart tr.cart_item {
position: relative;
display: grid;
/* Trzecia kolumna istnieje po to, żeby pigułka ilości (minus, pole, plus)
miała gdzie się rozciągnąć - w układzie dwukolumnowym mieściła się
w 72 px kolumny zdjęcia i gubiła pole z plusem. */
grid-template-columns: 72px minmax(0, 1fr) auto;
grid-template-areas:
"foto nazwa nazwa"
"foto cena cena"
"ilosc ilosc suma";
align-items: center;
gap: .35rem .85rem;
padding: .9rem 2.2rem .9rem .9rem;
margin-bottom: .75rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 12px;
background: var(--wp--preset--color--base);
}
.woocommerce-cart table.cart tr.cart_item td {
display: block;
width: auto;
padding: 0;
border: 0;
text-align: left;
}
.woocommerce-cart table.cart tr.cart_item td::before { content: none !important; }
.woocommerce-cart table.cart td.product-thumbnail { grid-area: foto; align-self: start; }
.woocommerce-cart table.cart td.product-thumbnail img {
width: 72px;
height: 72px;
object-fit: contain;
background: var(--wp--preset--color--base-2);
border-radius: 8px;
display: block;
}
.woocommerce-cart table.cart td.product-name { grid-area: nazwa; }
.woocommerce-cart table.cart td.product-name a {
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
.woocommerce-cart table.cart td.product-name .variation {
margin: .15rem 0 0;
font-size: 12px;
color: var(--wp--preset--color--contrast-2);
}
.woocommerce-cart table.cart td.product-name .variation dt,
.woocommerce-cart table.cart td.product-name .variation dd {
display: inline;
margin: 0;
padding: 0;
float: none;
}
.woocommerce-cart table.cart td.product-price {
grid-area: cena;
font-size: 12.5px;
color: var(--wp--preset--color--contrast-2);
}
.woocommerce-cart table.cart td.product-quantity { grid-area: ilosc; }
.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
width: 72px;
min-height: 42px;
text-align: center;
}
.woocommerce-cart table.cart td.product-subtotal {
grid-area: suma;
text-align: right;
font-size: 16px;
font-weight: 800;
color: var(--wp--preset--color--contrast);
}
.woocommerce-cart table.cart td.product-remove {
position: absolute;
top: .45rem;
right: .45rem;
width: auto;
padding: 0;
}
.woocommerce-cart table.cart td.product-remove a.remove {
width: 26px;
height: 26px;
line-height: 24px;
font-size: 18px;
color: var(--wp--preset--color--contrast-2) !important;
background: var(--wp--preset--color--base-2);
}
.woocommerce-cart table.cart td.product-remove a.remove:hover {
background: var(--wp--preset--color--sale);
color: #fff !important;
}
/* wiersz z kuponem i przeliczeniem - równe, pełnej szerokości */
.woocommerce-cart table.cart tr:not(.cart_item) { display: block; border: 0; padding: 0; }
.woocommerce-cart table.cart td.actions { display: block; padding: 0; border: 0; }
.woocommerce-cart table.cart td.actions .coupon {
display: grid;
gap: .5rem;
width: 100%;
float: none;
padding: 0;
border: 0;
margin-bottom: .6rem;
}
.woocommerce-cart table.cart td.actions .coupon label { display: none; }
.woocommerce-cart table.cart td.actions .coupon input.input-text,
.woocommerce-cart table.cart td.actions .coupon .button,
.woocommerce-cart table.cart td.actions > .button {
width: 100% !important;
float: none !important;
margin: 0 !important;
min-height: 50px;
}
/* podsumowanie */
.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
.woocommerce-cart .cart_totals table.shop_table tr { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td { display: block; padding: 0; border: 0; text-align: right; }
.woocommerce-cart .cart_totals table.shop_table th { text-align: left; font-size: 12.5px; font-weight: 600; }
.woocommerce-cart .cart_totals .order-total td { font-size: 18px; font-weight: 800; }
.woocommerce-cart .wc-proceed-to-checkout .button { width: 100%; min-height: 56px; }
}
@media (max-width: 768px) {
/* wcześniejsza reguła ogólna wyrównuje komórki do prawej - w karcie
produktu tekst ma iść od lewej, tylko kwota do prawej */
.woocommerce-cart table.cart tr.cart_item td { text-align: left !important; }
.woocommerce-cart table.cart tr.cart_item td.product-subtotal { text-align: right !important; }
/* podsumowanie miało etykietę dwa razy: z | i z data-title przez ::before */
.woocommerce-cart .cart_totals table.shop_table td::before,
.woocommerce-cart .cart_totals table.shop_table th::before { content: none !important; }
.woocommerce-cart .cart_totals table.shop_table {
border: 1px solid var(--wp--preset--color--line);
border-radius: 12px;
padding: .35rem 1rem;
background: var(--wp--preset--color--base);
}
.woocommerce-cart .cart_totals table.shop_table tr + tr {
border-top: 1px solid var(--wp--preset--color--line);
}
.woocommerce-cart .cart_totals table.shop_table th { font-size: 13px; }
.woocommerce-cart .cart_totals h2 { font-size: 1.3rem; margin-bottom: .6rem; }
}
/* WooCommerce podmienia na własne opakowanie strony koszyka i kasy,
przez co klasa .chr-sekcja z szablonu tam nie dociera. Dajemy mu ten sam
kontener, inaczej treść dotyka krawędzi ekranu. */
main[data-block-name="woocommerce/page-content-wrapper"] {
width: 100%;
max-width: calc(1360px + 2 * var(--wp--preset--spacing--30));
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--30);
box-sizing: border-box;
}
@media (max-width: 768px) {
/* kwoty dotykały prawej krawędzi ramki, a wiersz "Łącznie" miał szare tło z Woo */
.woocommerce-cart .cart_totals table.shop_table tr { padding-inline: .15rem; }
.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th { background: transparent !important; }
.woocommerce-cart .cart_totals table.shop_table td { padding-right: .1rem; }
}
/* ==========================================================================
Menu mobilne - nakładka bloku nawigacji
========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed !important;
inset: 0 !important;
z-index: 1000;
padding: 1.25rem !important;
background: var(--wp--preset--color--base) !important;
color: var(--wp--preset--color--contrast) !important;
overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
margin-top: 3.5rem;
}
/* przycisk zamykania trzymamy sztywno w rogu nakładki - domyślnie potrafi
uciec poza ekran, bo liczy pozycję względem opakowania nagłówka */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
left: auto !important;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast);
padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex-direction: column;
align-items: flex-start;
gap: 0 !important;
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block;
width: 100%;
padding: 1rem 0 !important;
font-size: 15px !important;
letter-spacing: .08em;
border-bottom: 0 !important;
}
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); }
/* ==========================================================================
Wyszukiwanie podpowiadające
========================================================================== */
.chr-szukajka { position: relative; }
.chr-podpowiedzi {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100%;
z-index: 95;
width: min(720px, calc(100vw - 2 * var(--wp--preset--spacing--30)));
max-height: min(70vh, 480px);
overflow-y: auto;
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 12px;
box-shadow: var(--wp--preset--shadow--unosi);
padding: .4rem;
}
.chr-podpowiedzi[hidden] { display: none; }
.chr-podpowiedz {
display: flex;
align-items: center;
gap: .75rem;
padding: .55rem .6rem;
border-radius: 8px;
text-decoration: none !important;
color: var(--wp--preset--color--contrast);
}
.chr-podpowiedz:hover,
.chr-podpowiedz:focus-visible { background: var(--wp--preset--color--base-2); }
.chr-podpowiedz img {
flex: 0 0 48px;
width: 48px;
height: 48px;
object-fit: contain;
background: var(--wp--preset--color--base-2);
border-radius: 6px;
}
.chr-podpowiedz__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chr-podpowiedz__nazwa {
font-size: 14px;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chr-podpowiedz__meta { font-size: 12px; color: var(--wp--preset--color--contrast-2); }
.chr-podpowiedzi__stan {
margin: 0;
padding: 1rem .6rem;
font-size: 13px;
color: var(--wp--preset--color--contrast-2);
}
.chr-podpowiedzi__wszystkie {
display: block;
margin-top: .25rem;
padding: .7rem .6rem;
border-top: 1px solid var(--wp--preset--color--line);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-align: center;
text-decoration: none !important;
color: var(--wp--preset--color--contrast);
}
.chr-podpowiedzi__wszystkie:hover { color: var(--wp--preset--color--accent); }
@media (max-width: 560px) {
.chr-podpowiedzi { width: calc(100vw - 1.5rem); }
.chr-podpowiedz img { flex-basis: 42px; width: 42px; height: 42px; }
}
/* ==========================================================================
Sekcja "Wiesz dokładnie, co kupujesz"
========================================================================== */
.chr-onas {
position: relative;
margin-top: var(--wp--preset--spacing--60);
padding-block: var(--wp--preset--spacing--50);
background: var(--wp--preset--color--base-2);
isolation: isolate;
}
.chr-onas[data-tlo] {
background-image: var(--chr-tlo);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-block: var(--wp--preset--spacing--60);
}
/* grafika ma jasny, pusty środek, ale przy wąskim kadrze tekst wchodzi na miski */
.chr-onas[data-tlo]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse at center,
rgba(255, 253, 249, .9) 0%,
rgba(255, 253, 249, .76) 50%,
rgba(255, 253, 249, .3) 100%);
}
.chr-onas__wnetrze {
width: 100%;
max-width: calc(1360px + 2 * var(--wp--preset--spacing--30));
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--30);
box-sizing: border-box;
}
.chr-onas__tytul {
margin: 0 0 2rem;
font-size: var(--wp--preset--font-size--2-xl);
font-weight: 800;
letter-spacing: -.025em;
color: var(--wp--preset--color--contrast);
}
.chr-onas__siatka {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
align-items: start;
}
.chr-onas__cecha h3 {
margin: 0 0 .6rem;
font-size: var(--wp--preset--font-size--lg);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--contrast);
/* dwie linie zarezerwowane, żeby akapity zaczynały się na jednym poziomie */
min-height: 2.5em;
display: flex;
align-items: flex-end;
}
.chr-onas__cecha p {
margin: 0;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.65;
color: var(--wp--preset--color--contrast-2);
}
@media (max-width: 1024px) {
.chr-onas__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.chr-onas__cecha h3 { min-height: 0; display: block; }
}
@media (max-width: 700px) {
.chr-onas { margin-top: var(--wp--preset--spacing--40); padding-block: var(--wp--preset--spacing--40); }
.chr-onas__siatka { grid-template-columns: 1fr; gap: 1.75rem; }
.chr-onas__tytul { font-size: 1.6rem; margin-bottom: 1.4rem; }
.chr-onas[data-tlo]::before { background: rgba(255, 253, 249, .92); }
}
/* ==========================================================================
Strona koszyka - dwie kolumny, przyklejone podsumowanie
========================================================================== */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content { max-width: none !important; }
.woocommerce-cart .entry-content > .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 2.5rem;
align-items: start;
}
.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; margin: 0; }
.woocommerce-cart .cart-collaterals {
grid-column: 2;
width: 100% !important;
float: none !important;
margin: 0 !important;
position: sticky;
top: 108px;
}
.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
/* tabela pozycji */
.woocommerce-cart table.cart {
border: 1px solid var(--wp--preset--color--line);
border-radius: 14px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--wp--preset--color--base);
margin: 0;
}
.woocommerce-cart table.cart thead th {
background: var(--wp--preset--color--base-2);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-2);
padding: .9rem 1rem;
border: 0;
}
.woocommerce-cart table.cart td {
padding: 1.1rem 1rem;
border-top: 1px solid var(--wp--preset--color--line);
vertical-align: middle;
}
.woocommerce-cart table.cart td.product-thumbnail img {
width: 78px;
height: 78px;
object-fit: contain;
background: var(--wp--preset--color--base-2);
border-radius: 10px;
}
.woocommerce-cart table.cart td.product-name a {
font-weight: 700;
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--wp--preset--color--accent); }
.woocommerce-cart table.cart td.product-subtotal { font-weight: 800; }
.woocommerce-cart table.cart td.actions { background: var(--wp--preset--color--base-2); }
.woocommerce-cart table.cart a.remove {
width: 26px;
height: 26px;
line-height: 24px;
font-size: 17px;
color: var(--wp--preset--color--contrast-2) !important;
background: var(--wp--preset--color--base-2);
}
.woocommerce-cart table.cart a.remove:hover {
background: var(--wp--preset--color--sale);
color: #fff !important;
}
/* powrót do zakupów */
.chr-wroc {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-right: auto;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none !important;
color: var(--wp--preset--color--contrast-2);
}
.chr-wroc:hover { color: var(--wp--preset--color--accent); }
.woocommerce-cart table.cart td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: .5rem; float: none; margin: 0; }
.woocommerce-cart table.cart td.actions .coupon input.input-text { width: 190px; min-height: 46px; margin: 0; }
/* pasek darmowej dostawy na stronie koszyka */
.chr-dostawa--strona {
margin: 0 0 1.1rem;
padding: .9rem 1.1rem;
border-radius: 12px;
background: var(--wp--preset--color--base-2);
}
.chr-dostawa--strona .chr-dostawa__tekst { margin: 0 0 .55rem; font-size: 13px; font-weight: 600; }
/* podsumowanie */
.woocommerce-cart .cart_totals h2 {
font-size: 1.1rem;
font-weight: 800;
letter-spacing: .02em;
margin: 0 0 .8rem;
}
.woocommerce-cart .cart_totals table.shop_table {
border: 1px solid var(--wp--preset--color--line);
border-radius: 14px;
background: var(--wp--preset--color--base);
padding: .4rem 1.1rem;
margin: 0 0 1rem;
}
.woocommerce-cart .cart_totals table.shop_table tr { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
.woocommerce-cart .cart_totals table.shop_table tr + tr { border-top: 1px solid var(--wp--preset--color--line); }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td { border: 0; padding: 0; background: transparent !important; }
.woocommerce-cart .cart_totals table.shop_table th { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--contrast-2); }
.woocommerce-cart .cart_totals .order-total th { color: var(--wp--preset--color--contrast); font-weight: 800; }
.woocommerce-cart .cart_totals .order-total td { font-size: 19px; font-weight: 800; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout .button { width: 100%; min-height: 56px; }
/* pusty koszyk */
.chr-pusty { text-align: center; padding: 2.5rem 1rem 3.5rem; }
.chr-pusty__logo img { width: 220px; max-width: 60%; height: auto; margin: 0 auto 1.5rem; display: block; }
.chr-pusty h2 { font-size: 1.7rem; margin: 0 0 .5rem; }
.chr-pusty p { color: var(--wp--preset--color--contrast-2); margin: 0 0 1.6rem; }
.chr-pusty__akcje { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.chr-pusty__glowny,
.chr-pusty__poboczny {
display: inline-block;
padding: 1rem 2rem;
border-radius: 4px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
text-decoration: none !important;
}
.chr-pusty__glowny { background: var(--wp--preset--color--contrast); color: #fff !important; }
.chr-pusty__glowny:hover { background: var(--wp--preset--color--primary); }
.chr-pusty__poboczny {
background: transparent;
color: var(--wp--preset--color--contrast) !important;
border: 1.5px solid var(--wp--preset--color--line);
}
.chr-pusty__poboczny:hover { border-color: var(--wp--preset--color--contrast); }
@media (max-width: 1024px) {
.woocommerce-cart .entry-content > .woocommerce { grid-template-columns: 1fr; gap: 1.75rem; }
.woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
}
/* WooCommerce narzuca .woocommerce max-width 1000 px i zwęża komórkę miniatury
do 32 px - stąd pusty kwadrat zamiast zdjęcia i koszyk na pół ekranu. */
.woocommerce-cart .entry-content > .woocommerce {
max-width: none !important;
width: 100%;
}
.woocommerce-cart table.cart td.product-thumbnail {
width: 98px !important;
padding-right: 0 !important;
}
.woocommerce-cart table.cart td.product-thumbnail a { display: block; }
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart table.cart img {
width: 78px !important;
height: 78px !important;
max-width: none !important;
object-fit: contain;
display: block;
background: var(--wp--preset--color--base-2);
border-radius: 10px;
}
.woocommerce-cart table.cart td.product-remove { width: 48px !important; }
@media (max-width: 768px) {
.woocommerce-cart table.cart td.product-thumbnail { width: auto !important; }
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart table.cart img { width: 72px !important; height: 72px !important; }
}
/* Komórka z kuponem musi zostać komórką tabeli - display:flex kasuje colspan
i wiersz zwija się do szerokości pierwszej kolumny. Układ robimy w środku. */
@media (min-width: 769px) {
.woocommerce-cart table.cart td.actions {
display: table-cell !important;
padding: 1rem !important;
background: var(--wp--preset--color--base-2);
overflow: hidden;
}
.woocommerce-cart table.cart td.actions .coupon {
display: inline-flex;
gap: .5rem;
float: left;
margin: 0;
padding: 0;
border: 0;
}
.woocommerce-cart table.cart td.actions .coupon input.input-text {
width: 210px;
min-height: 48px;
margin: 0;
}
.woocommerce-cart table.cart td.actions .coupon .button { margin: 0; min-height: 48px; }
.woocommerce-cart table.cart td.actions > button[name="update_cart"],
.woocommerce-cart table.cart td.actions > .button {
float: right;
margin: 0;
min-height: 48px;
}
.chr-wroc {
float: left;
margin: 0 0 0 1.25rem;
height: 48px;
align-items: center;
}
}
/* WooCommerce wstawia własne "Wróć do sklepu" na sztywno w szablonie pustego
koszyka - dublowałoby przyciski z chr-pusty. */
.woocommerce-cart .cart-empty ~ .return-to-shop,
.woocommerce-cart .wc-empty-cart-message ~ .return-to-shop,
.woocommerce-cart .woocommerce > .return-to-shop,
.woocommerce-cart .entry-content .return-to-shop { display: none !important; }
/* ==========================================================================
Kasa - własny nagłówek, stopka i układ dwukolumnowy
========================================================================== */
.chr-kasa-naglowek {
border-bottom: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--base);
}
.chr-kasa-naglowek__wnetrze,
.chr-kasa-stopka__wnetrze {
width: 100%;
max-width: calc(1360px + 2 * var(--wp--preset--spacing--30));
margin-inline: auto;
padding: 1.1rem var(--wp--preset--spacing--30);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: wrap;
}
.chr-kasa-naglowek__logo { display: block; line-height: 0; }
.chr-kasa-naglowek__logo img { width: 170px; max-width: 45vw; height: auto; }
.chr-kasa-naglowek__prawo { display: flex; align-items: center; gap: 1.5rem; }
.chr-kasa-naglowek__bezpiecznie {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: 12.5px;
font-weight: 600;
color: var(--wp--preset--color--success);
}
.chr-kasa-naglowek__wroc {
font-size: 12px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
text-decoration: none !important;
color: var(--wp--preset--color--contrast-2);
}
.chr-kasa-naglowek__wroc:hover { color: var(--wp--preset--color--accent); }
.chr-kasa-stopka {
margin-top: var(--wp--preset--spacing--50);
border-top: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--base-2);
}
.chr-kasa-stopka__firma { margin: 0; font-size: 12px; color: var(--wp--preset--color--contrast-2); }
.chr-kasa-stopka__linki { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.chr-kasa-stopka__linki a {
font-size: 12px;
text-decoration: none;
color: var(--wp--preset--color--contrast-2);
}
.chr-kasa-stopka__linki a:hover { color: var(--wp--preset--color--accent); }
.chr-kasa__tytul { font-size: var(--wp--preset--font-size--2-xl); margin: 0 0 1.5rem; }
/* układ formularza */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 2.5rem;
align-items: start;
}
.woocommerce-checkout form.checkout .col2-set { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
width: 100% !important;
float: none !important;
margin-bottom: 2rem;
}
.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 .8rem; font-size: 1.1rem; }
.woocommerce-checkout form.checkout #order_review {
grid-column: 2;
grid-row: 2;
position: sticky;
top: 100px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 14px;
background: var(--wp--preset--color--base);
padding: 1.1rem;
}
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.login,
.woocommerce-checkout form.checkout_coupon { grid-column: 1 / -1; }
/* pola formularza */
.woocommerce-checkout h3 { font-size: 1.15rem; margin: 0 0 1rem; }
.woocommerce form .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce form .form-row label { font-size: 12.5px; font-weight: 600; margin-bottom: .3rem; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
width: 100%;
min-height: 50px;
padding: .65rem .85rem;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 8px;
background: var(--wp--preset--color--base);
font-size: 15px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
outline: none;
border-color: var(--wp--preset--color--accent);
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48.5%; }
.woocommerce-checkout #order_review table.shop_table { border: 0; margin: 0 0 .5rem; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
padding: .6rem 0;
border: 0;
border-bottom: 1px solid var(--wp--preset--color--line);
font-size: 14px;
}
.woocommerce-checkout #order_review .order-total td { font-size: 18px; font-weight: 800; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; }
.woocommerce-checkout #payment div.form-row { padding: 1rem 0 0; }
.woocommerce-checkout #place_order { width: 100%; min-height: 56px; }
@media (max-width: 1024px) {
.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 1.5rem; }
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 600px) {
.chr-kasa-naglowek__wnetrze { padding-block: .8rem; }
.chr-kasa-naglowek__bezpiecznie { display: none; }
.chr-kasa-naglowek__logo img { width: 130px; }
.chr-kasa-stopka__wnetrze { flex-direction: column; align-items: flex-start; gap: .6rem; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; }
}
/* drugi przycisk w szufladzie - pełna strona koszyka */
.chr-szuflada__koszyk {
display: block;
width: 100%;
margin-top: .5rem;
padding: .9rem 1rem;
text-align: center;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 4px;
background: transparent;
color: var(--wp--preset--color--contrast) !important;
text-decoration: none !important;
font-size: 12px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.chr-szuflada__koszyk:hover { border-color: var(--wp--preset--color--contrast); }
/* .col2-set rozpina się na dwa wiersze siatki i rozciąga pierwszy z nich,
przez co ramka podsumowania odjeżdżała w dół. */
.woocommerce-checkout form.checkout { grid-template-rows: min-content 1fr; }
.woocommerce-checkout form.checkout #order_review { align-self: start; }
/* cena za kilogram i oszczędność na przycisku gramatury */
.chr-wybor__opcja { position: relative; padding-top: 1.1rem; }
.chr-wybor__zakg {
margin-top: .15rem;
font-size: 11.5px;
font-weight: 600;
color: var(--wp--preset--color--contrast-2);
white-space: nowrap;
}
.chr-wybor__opcja.jest-wybrana .chr-wybor__zakg { color: rgba(255, 255, 255, .75); }
.chr-wybor__odznaka {
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
padding: .18rem .5rem;
border-radius: 999px;
background: var(--wp--preset--color--success);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
/* szkielet ładowania w szufladzie */
.chr-szkielet {
height: 88px;
margin-bottom: .75rem;
border-radius: 10px;
background: linear-gradient(90deg,
var(--wp--preset--color--base-2) 25%,
var(--wp--preset--color--base-3) 37%,
var(--wp--preset--color--base-2) 63%);
background-size: 400% 100%;
animation: chr-puls 1.2s ease infinite;
list-style: none;
}
@keyframes chr-puls {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.chr-szkielet { animation: none; }
}
/* ==========================================================================
Szuflada: twarde ukrycie, gdy zamknięta
==========================================================================
.chr-szuflada ma display:flex, co PRZEBIJA atrybut [hidden] - element
zostawał w układzie i jego stopka przechwytywała kliknięcia w produkty.
Dodatkowo pointer-events wyłączone poza stanem otwartym, żeby nawet przy
nieudanym zamknięciu nic nie blokowało strony. */
.chr-szuflada[hidden],
.chr-tlo[hidden] {
display: none !important;
}
.chr-szuflada:not(.jest-otwarta),
.chr-tlo:not(.jest-widoczne) {
pointer-events: none;
}
.chr-szuflada.jest-otwarta,
.chr-tlo.jest-widoczne {
pointer-events: auto;
}
/* ==========================================================================
Szuflada: sygnał, że lista jest przewijalna
==========================================================================
Przy 3+ pozycjach treść wychodzi poza ekran, ale nic o tym nie mówiło.
Cień u dołu znika po dojechaniu do końca, podpowiedź po pierwszym ruchu. */
.chr-szuflada__obszar {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.chr-szuflada__srodek {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 1.1rem 1.25rem;
scrollbar-width: thin;
scrollbar-color: var(--wp--preset--color--line) transparent;
}
.chr-szuflada__srodek::-webkit-scrollbar { width: 6px; }
.chr-szuflada__srodek::-webkit-scrollbar-thumb {
background: var(--wp--preset--color--line);
border-radius: 999px;
}
.chr-szuflada__cien {
position: absolute;
left: 0;
right: 6px;
height: 40px;
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease;
z-index: 2;
}
.chr-szuflada__cien--gora {
top: 0;
background: linear-gradient(to bottom,
var(--wp--preset--color--base) 0%,
rgba(255, 253, 249, 0) 100%);
}
.chr-szuflada__cien--dol {
bottom: 0;
background: linear-gradient(to top,
var(--wp--preset--color--base) 0%,
rgba(255, 253, 249, 0) 100%);
}
.chr-szuflada__cien.jest-widoczny { opacity: 1; }
.chr-szuflada__wiecej {
position: absolute;
bottom: .6rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .45rem .9rem;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--contrast);
color: #fff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .05em;
cursor: pointer;
box-shadow: 0 3px 12px rgba(46, 24, 16, .22);
animation: chr-podskok 1.6s ease-in-out infinite;
}
.chr-szuflada__wiecej[hidden] { display: none; }
@keyframes chr-podskok {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
.chr-szuflada__wiecej { animation: none; }
}
/* ==========================================================================
Ilość: minus / pole / plus
Blok siedzi na końcu pliku, bo nadpisuje szerokości .quantity ustawione
wcześniej przy karcie produktu i w koszyku - przy równej specyficzności
wygrywa reguła późniejsza.
========================================================================== */
.quantity:has( .chr-ilosc-krok ) {
display: inline-flex;
align-items: stretch;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 999px;
background: var(--wp--preset--color--base);
overflow: hidden;
max-width: 100%;
}
.chr-ilosc-krok {
flex: 0 0 38px;
border: 0;
padding: 0;
background: transparent;
color: var(--wp--preset--color--contrast);
font-size: 17px;
font-weight: 700;
line-height: 1;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
touch-action: manipulation;
transition: background .15s ease, color .15s ease;
}
.chr-ilosc-krok:hover,
.chr-ilosc-krok:focus-visible {
background: var(--wp--preset--color--accent);
color: #fff;
}
.woocommerce .quantity:has( .chr-ilosc-krok ) input.qty,
.quantity:has( .chr-ilosc-krok ) input.qty {
width: 44px !important;
min-width: 0;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
text-align: center;
font-weight: 700;
appearance: textfield;
-moz-appearance: textfield;
}
/* Własne strzałki zastępują natywne - dwie pary obok siebie myliłyby. */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Ilość zablokowana (np. sprzedaż po sztuce) - kroki nie mają czego zmieniać. */
.quantity:has( input.qty[readonly] ) .chr-ilosc-krok { display: none; }
/* Karta produktu: pigułka rośnie z trzech elementów, nie z ustalonych 92 px. */
.woocommerce div.product form.cart .quantity:has( .chr-ilosc-krok ) {
flex: 0 0 auto;
}
/* Koszyk: przeliczanie w tle - wygaszamy to, co za chwilę się zmieni. */
body.chr-przelicza form.woocommerce-cart-form,
body.chr-przelicza .cart_totals {
opacity: .5;
pointer-events: none;
transition: opacity .15s ease;
}
/* ==========================================================================
Dostępność produktu: dioda zamiast liczby sztuk
========================================================================== */
.woocommerce div.product p.stock.chr-dostepnosc,
.chr-dostepnosc {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 0 0 .9rem;
font-size: 13.5px;
font-weight: 600;
}
.chr-dostepnosc::before {
content: "";
flex: 0 0 9px;
width: 9px;
height: 9px;
border-radius: 50%;
}
.woocommerce div.product p.stock.chr-dostepnosc--tak,
.chr-dostepnosc--tak { color: #1c7a3e; }
.chr-dostepnosc--tak::before {
background: #22a353;
box-shadow: 0 0 0 3px rgba( 34, 163, 83, .18 );
}
.woocommerce div.product p.stock.chr-dostepnosc--nie,
.chr-dostepnosc--nie { color: #b3261e; }
.chr-dostepnosc--nie::before {
background: #e5342a;
box-shadow: 0 0 0 3px rgba( 229, 52, 42, .18 );
}
/* Koszyk na telefonie: pigułka ilości nie może być przycięta kolumną siatki. */
@media (max-width: 768px) {
.woocommerce-cart table.cart td.product-quantity {
min-width: 0;
justify-self: start;
}
.woocommerce-cart table.cart td.product-quantity .quantity:has( .chr-ilosc-krok ) {
overflow: visible;
}
}
/* ==========================================================================
Podsumowanie koszyka: metody wysyłki muszą się mieścić w ramce
Wiersze są flexem, a komórka bez min-width:0 nie schodzi poniżej szerokości
swojej treści - lista Paczkomat/Kurier wychodziła poza kartę na telefonie.
========================================================================== */
.woocommerce-cart .cart_totals table.shop_table th { flex: 0 0 auto; }
.woocommerce-cart .cart_totals table.shop_table td {
flex: 1 1 auto;
min-width: 0;
text-align: right;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: .3rem .45rem;
margin: 0 0 .45rem;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li:last-child { margin-bottom: 0; }
.woocommerce-cart .cart_totals .woocommerce-shipping-methods label {
font-size: 14px;
line-height: 1.35;
margin: 0;
}
.woocommerce-cart .cart_totals .inpost_pl-shipping-method-meta-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: .45rem;
width: 100%;
}
.woocommerce-cart .cart_totals .easypack-shipping-method-logo img {
display: block;
width: 52px;
height: auto;
}
.woocommerce-cart .cart_totals #inpost_pl_delivery_terms {
font-size: 12px;
color: var(--wp--preset--color--contrast-2);
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button { font-size: 12.5px; }
/* Wtyczka InPost obrysowuje czas dostawy kreskowaną ramką - w podsumowaniu
wygląda to jak pole formularza, a to zwykła etykieta. */
.woocommerce #inpost_pl_delivery_terms,
.woocommerce-cart #inpost_pl_delivery_terms,
.woocommerce-checkout #inpost_pl_delivery_terms {
border: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Listy w stopce to nawigacja, nie wyliczenie - kropki były wyłączone tylko
w wersji mobilnej, więc na desktopie zostawały widoczne. */
.chr-stopka ul {
padding-left: 0;
list-style: none;
}
/* ==========================================================================
Newsletter: pasek w stopce i zgoda w kasie
========================================================================== */
.chr-newsletter {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 1.5rem 3rem;
max-width: var(--wp--style--global--wide-size);
margin: 0 auto var(--wp--preset--spacing--50);
padding: 1.9rem 2.1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 16px;
background: var(--wp--preset--color--base);
}
.chr-newsletter__tytul {
margin: 0 0 .35rem;
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--wp--preset--color--contrast);
}
.chr-newsletter__lid {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--wp--preset--color--contrast-2);
}
.chr-newsletter__form { min-width: 0; }
.chr-newsletter__pola {
display: flex;
gap: .6rem;
margin-bottom: .7rem;
}
.chr-newsletter__pola input[type="email"] {
flex: 1 1 auto;
min-width: 0;
min-height: 52px;
padding: 0 1.1rem;
border: 1.5px solid var(--wp--preset--color--line);
border-radius: 999px;
background: var(--wp--preset--color--base);
font-size: 15px;
color: var(--wp--preset--color--contrast);
}
.chr-newsletter__pola input[type="email"]:focus {
outline: none;
border-color: var(--wp--preset--color--accent);
}
.chr-newsletter__wyslij {
flex: 0 0 auto;
min-height: 52px;
padding: 0 1.6rem;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s ease;
}
.chr-newsletter__wyslij:hover:not(:disabled) { background: var(--wp--preset--color--accent); }
.chr-newsletter__wyslij:disabled { opacity: .55; cursor: default; }
.chr-newsletter__zgoda {
display: flex;
align-items: flex-start;
gap: .55rem;
font-size: 12px;
line-height: 1.45;
color: var(--wp--preset--color--contrast-2);
}
.chr-newsletter__zgoda input {
flex: 0 0 auto;
margin: .15rem 0 0;
width: 16px;
height: 16px;
accent-color: var(--wp--preset--color--accent);
}
.chr-newsletter__zgoda a { text-decoration: underline; }
.chr-newsletter__wiersz { margin: 0; }
.chr-newsletter__odpowiedz {
margin: .6rem 0 0;
min-height: 1.2em;
font-size: 13px;
font-weight: 600;
}
.chr-newsletter__odpowiedz.jest-sukces { color: #1c7a3e; }
.chr-newsletter__odpowiedz.jest-blad { color: #b3261e; }
/* Zgoda w kasie. WooCommerce owija pole w span > label, więc układ trzeba
nałożyć na etykietę, a nie na wiersz formularza. */
.woocommerce-checkout .chr-zgoda-newsletter {
margin: 0 0 1rem;
padding: 0;
}
.woocommerce-checkout .chr-zgoda-newsletter .woocommerce-input-wrapper { width: 100%; }
.woocommerce-checkout .chr-zgoda-newsletter label.checkbox {
display: flex;
align-items: flex-start;
gap: .55rem;
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--wp--preset--color--contrast-2);
}
.woocommerce-checkout .chr-zgoda-newsletter input[type="checkbox"] {
flex: 0 0 auto;
margin: .15rem 0 0;
width: 16px;
height: 16px;
accent-color: var(--wp--preset--color--accent);
}
.woocommerce-checkout .chr-zgoda-newsletter .optional { color: var(--wp--preset--color--contrast-2); }
@media (max-width: 900px) {
.chr-newsletter {
grid-template-columns: 1fr;
gap: 1.1rem;
padding: 1.5rem 1.2rem;
text-align: center;
}
.chr-newsletter__pola { flex-direction: column; }
.chr-newsletter__wyslij { width: 100%; }
.chr-newsletter__zgoda { text-align: left; }
}
/* ==========================================================================
Strona "O nas"
Tekst do czytania, nie do skanowania - węższa kolumna i większy oddech
między akapitami niż w regulaminie.
========================================================================== */
.chr-onas-wstep {
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
line-height: 1.55;
font-weight: 600;
color: var(--wp--preset--color--contrast);
margin-bottom: 2rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.chr-onas-podpis {
margin-top: 2.2rem;
padding-top: 1.4rem;
border-top: 1px solid var(--wp--preset--color--line);
line-height: 1.5;
}
.chr-onas-cta {
flex-direction: column;
align-items: center;
gap: .8rem !important;
margin-top: 2.6rem;
padding: 2rem 1.2rem;
border-radius: 16px;
background: var(--wp--preset--color--base-2);
text-align: center;
}
.chr-onas-haslo {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--wp--preset--color--contrast-2);
}
/* Siatka produktów pod tekstem "O nas". Wychodzi poza wąską kolumnę do
czytania, bo cztery karty w 760 px byłyby nieczytelne. */
.chr-onas-produkty {
margin-top: 3rem;
padding-top: 2.4rem;
border-top: 1px solid var(--wp--preset--color--line);
}
.chr-onas-produkty .chr-sekcja-naglowek { margin-bottom: 1.4rem; }
/* Tytuł strony był mniejszy niż jej pierwszy akapit - hierarchia stawała na
głowie. Dotyczy wszystkich stron treściowych, nie tylko "O nas". */
.wp-block-post-title {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.03em;
margin: 0 0 1.4rem;
color: var(--wp--preset--color--contrast);
}
/* Zdjęcie sadu na stronie "O nas". Pasek na całą szerokość kolumny głównej,
przycięty do panoramy - pionowy kadr wypychałby tekst poza pierwszy ekran. */
.chr-onas-foto {
margin: 2.2rem 0 2.6rem;
}
.chr-onas-foto img {
display: block;
width: 100%;
height: clamp(220px, 34vw, 420px);
object-fit: cover;
object-position: center 58%;
border-radius: 16px;
}
.chr-onas-foto figcaption {
margin-top: .7rem;
font-size: 12.5px;
color: var(--wp--preset--color--contrast-2);
text-align: center;
}
|