/* ============================================
CLS attempt c954b10 REVERTED (CLS 0.42 → 0.57 worse)
============================================
aspect-ratio: 1376/768 !important na slider images konfliktował z
HTML width/height attributes. Slide 1 (1536×640) forced to 1376/768
= height redistribution po render = MORE shift.
Plus banner min-height interakcja z fadeInUp animation also worse.
Removed both rules. Font preload zachowany (industry-standard,
zero CLS risk).
Deeper CLS diagnose wymaga DevTools Performance tab session
(record + measure shift sources) — odłożone do osobnej sesji. */
/* ============================================
Self-hosted fonts — Inter + Playfair Display
============================================
Replace Google Fonts external (fonts.googleapis.com + fonts.gstatic.com).
GDPR-clean (no Google IP logging) + perf (no DNS/SSL/TCP overhead).
Variable fonts: weight 100-900 axis w jednym woff2 per subset.
Polish: latin (U+0000-00FF) + latin-ext (U+0100-02BA) covers ą/ć/ł/ń/ś/ź/ż. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/Inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/PlayfairDisplay-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/PlayfairDisplay-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ===== DIAMONDI - CZERŃ + ZŁOTO ===== */
/* ============================================
* DESIGN TOKENS — Checkout Redesign v1
* Mobile-first + Desktop 2-col layout
* Branch: feat/checkout-redesign
* ============================================ */
:root {
/* Kolory */
--color-gold: #C5A572;
--color-gold-hover: #B8935C;
--color-bg-primary: #FFFFFF;
--color-bg-subtle: #FAF8F4;
--color-bg-neutral: #FAFAFA;
--color-text-primary: #1A1A1A;
--color-text-muted: #666666;
--color-text-subtle: #999999;
--color-border-subtle: #E5E5E5;
--color-border-divider: #F0F0F0;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 20px;
--space-2xl: 32px;
/* Radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
}
.main-menu__tree__link { font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: #1a1a1a !important; padding: 0.4rem 0.8rem !important; text-decoration: none !important; transition: color 0.2s ease !important; position: relative; }
.main-menu__tree__link::after { content: ''; position: absolute; bottom: -4px; left: 0.8rem; right: 0.8rem; height: 2px; background: #C9A84C; transform: scaleX(0); transition: transform 0.25s ease; transform-origin: center; }
.main-menu__tree__item:hover > a.main-menu__tree__link { color: #C9A84C !important; }
.main-menu__tree__item:hover > a.main-menu__tree__link::after { transform: scaleX(1); }
.main-menu__tree__item.current > a.main-menu__tree__link { color: #C9A84C !important; }
#category-44, #category-46, #category-47, #category-37, #category-39, #category-40 { display: none !important; }
.ps_categorytree .left-block__title { display: none !important; }
#category-tree-13 { display: none !important; }
li:has(> div > [data-bs-target="#category-tree-13"]) { display: none !important; }
#category-tree-15 { display: none !important; }
li:has(> div > [data-bs-target="#category-tree-15"]) { display: none !important; }
li:has(> div > a[href*="12-produkty"]) > .category-tree__item__header { display: none !important; }
li:has(> div > a[href*="44-broszki"]), li:has(> div > a[href*="45-inne"]), li:has(> div > a[href*="46-piercing"]), li:has(> div > a[href*="47-sygnety"]) { display: none !important; }
#search_filters_brands { display: none !important; }
/* Baseline: !important usunięty z background/border żeby specificity-based gold rules dla primary checkout CTAs (na końcu pliku) mogły wygrać bez własnego !important. Inne props (color, border-radius, letter-spacing) zostają — nie konkurują. */
.btn-primary, button.btn-primary, .add-to-cart { background-color: #1a1a1a; border-color: #1a1a1a; color: #ffffff !important; border-radius: 0 !important; letter-spacing: 1px !important; transition: all 0.25s ease !important; }
.btn-primary:hover, button.btn-primary:hover, .add-to-cart:hover { background-color: #C9A84C; border-color: #C9A84C; color: #ffffff !important; }
.badge { background-color: #C9A84C !important; color: #ffffff !important; border-radius: 0 !important; }
.page-category .category-cover { margin-left: -1.5rem; margin-right: -1.5rem; margin-top: -1rem; overflow: hidden; }
.page-category .category-cover img { width: 100%; height: 380px; object-fit: cover; display: block; }
.page-category .page-title-section { font-weight: 300; letter-spacing: 4px; text-transform: uppercase; text-align: center; margin-top: 1.5rem; color: #1a1a1a; }
.search-filters .search-filters-title, .left-block__title { font-size: 0.75rem !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #1a1a1a !important; font-weight: 700 !important; border-bottom: 2px solid #C9A84C !important; padding-bottom: 0.5rem !important; margin-bottom: 1rem !important; }
.category-tree__item__link { font-size: 0.85rem !important; color: #333 !important; transition: color 0.2s ease !important; }
.category-tree__item__link:hover { color: #C9A84C !important; }
.diamondi-categories { padding: 3rem 1rem; text-align: center; }
.diamondi-categories__title { font-size: 1.3rem; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: #1a1a1a; margin-bottom: 2rem; }
.diamondi-categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; max-width: 1200px; margin: 0 auto; }
.diamondi-cat-tile { position: relative; display: block; overflow: hidden; border-radius: 0; aspect-ratio: 3/4; text-decoration: none; }
.diamondi-cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.diamondi-cat-tile:hover img { transform: scale(1.06); }
.diamondi-cat-tile__label { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 1rem 1.2rem; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; font-size: 0.9rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.header { box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important; }
.search-widget form input[type=text] { border-radius: 0 !important; border: 1px solid #ddd !important; }
.search-widget form input[type=text]:focus { border-color: #C9A84C !important; box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important; outline: none !important; }
/* BUG #11 (2026-05-06): paginacja Mejuri/Otiumberg pattern.
Theme.css broadly applied .page-link { background:#1a1a1a !important }
to ALL links (not just active) — active state was indistinguishable.
Override with higher specificity (.pagination .page-link) to restore
white default + charcoal active + gold hover. Brand DNA sek 4 (Friction
Reduction): customer must instantly see current page. */
.pagination .page-link {
background-color: #fff !important;
color: #1a1a1a !important;
border-color: #dee2e6 !important;
}
.pagination .page-item.active .page-link {
background-color: #1a1a1a !important;
color: #fff !important;
border-color: #1a1a1a !important;
}
.pagination .page-link:hover {
background-color: #fff !important;
color: #C9A84C !important;
border-color: #C9A84C !important;
}
.pagination .page-item.disabled .page-link {
background-color: #fafafa !important;
color: #757575 !important;
border-color: #dee2e6 !important;
}
@media (max-width: 768px) { .diamondi-categories__grid { grid-template-columns: repeat(2, 1fr); } }
/* Menu jedna linia */
/* Zmniejsz padding menu zeby zmieściło sie w jednej linii */
#top-menu.main-menu__tree { flex-wrap: nowrap !important; }
.main-menu__tree__link { padding: 0.4rem 0.5rem !important; font-size: 0.78rem !important; letter-spacing: 1.2px !important; }
/* Ukryj strzałkę rozwijania przy pustej Biżuterii */
#category-tree-10 { display: none !important; }
li:has(> div > [data-bs-target="#category-tree-10"]) .accordion-button { display: none !important; }
/* Kolory linków - czerń zamiast niebieskiego */
a { color: #1a1a1a; }
a:hover { color: #C9A84C !important; }
.category-tree__item__link { color: #1a1a1a !important; }
.category-tree__item__link:hover { color: #C9A84C !important; }
.category-tree__item.active > .category-tree__item__header .category-tree__item__link { color: #C9A84C !important; font-weight: 700 !important; }
/* Breadcrumb - czerń */
.breadcrumb a { color: #1a1a1a !important; }
.breadcrumb a:hover { color: #C9A84C !important; }
/* Tytuły produktów na listingu */
.product-miniature__title a { color: #1a1a1a !important; }
.product-miniature__title a:hover { color: #C9A84C !important; }
/* Wszystkie linki - czerń zamiast niebieskiego */
a, a:visited { color: #1a1a1a; text-decoration: none; }
a:hover { color: #C9A84C !important; text-decoration: none; }
/* Tytuły produktów */
.product-miniature .product-miniature__title a,
.product-miniature .product-miniature__title a:visited { color: #1a1a1a !important; }
.product-miniature .product-miniature__title a:hover { color: #C9A84C !important; }
/* Szybki podgląd */
.product-miniature__quickview_button,
.product-miniature__quickview_button i,
.product-miniature__quickview_button span { color: #1a1a1a !important; }
.product-miniature__quickview_button:hover { color: #C9A84C !important; }
/* Ceny przekreślone */
.product-miniature__regular-price { color: #999 !important; }
/* Nadpisz Bootstrap primary color */
--bs-link-color: #1a1a1a;
--bs-link-hover-color: #C9A84C;
/* Badge "Obecnie brak na stanie" - czarny */
.badge.bg-info, .badge[style*="background"],
.product-flags .badge { background-color: #1a1a1a !important; color: #fff !important; border: none !important; }
/* Badge -10% - złoty */
.badge.discount, .badge.on-sale,
.product-flags .badge.discount { background-color: #C9A84C !important; color: #fff !important; }
/* Wszystkie badge niebieskie -> czarne */
.badge.bg-primary, .badge.text-bg-primary { background-color: #1a1a1a !important; }
/* "Obecnie brak na stanie" tekst */
.badge { background-color: #1a1a1a !important; border-radius: 0 !important; }
.badge.discount { background-color: #C9A84C !important; }
/* Remove focus ring ONLY for mouse users (not keyboard) — WCAG 2.4.7 */
*:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
/* Keyboard-focus indicator (restores accessibility) */
*:focus-visible {
outline: 2px solid #C9A84C !important;
outline-offset: 2px;
}
/* Form controls keep custom gold ring on focus (both mouse + keyboard) */
.form-control:focus { border-color: #C9A84C !important; box-shadow: 0 0 0 1px #C9A84C !important; }
/* Badge -10% dla zalogowanych - złoty bez niebieskiej obwódki */
.product-miniature .badge,
.product-flags .badge,
span.badge {
border: none !important;
outline: none !important;
}
.badge.discount, .badge[class*="discount"] { background-color: #C9A84C !important; }
.badge.on-sale { background-color: #C9A84C !important; }
/* Przycisk "Wszystkie produkty" - czarny */
.all-product-link, a.all-product-link {
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
border-radius: 0 !important;
}
.all-product-link:hover { background-color: #C9A84C !important; border-color: #C9A84C !important; }
/* Przycisk "Zobacz szczegóły" - czarny bez obwódki */
.btn-secondary, a.btn-secondary, button.btn-secondary {
background-color: transparent !important;
border: 1px solid #1a1a1a !important;
color: #1a1a1a !important;
border-radius: 0 !important;
}
.btn-secondary:hover {
background-color: #1a1a1a !important;
color: #fff !important;
}
/* Usuń niebieskie obwódki z przycisków */
.btn-secondary:focus, .btn-secondary:focus-visible,
.btn-primary:focus, .btn-primary:focus-visible {
box-shadow: none !important;
outline: none !important;
}
/* === KOSZYK - POPUP === */
/* Kontynuuj zakupy - mniejszy, mniej widoczny */
.cart-preview .cart-content-btn .btn-secondary,
.blockcart-modal .btn-secondary {
background: transparent !important;
border: 1px solid #ccc !important;
color: #666 !important;
font-size: 0.8rem !important;
}
/* === KOSZYK - STRONA === */
/* Kontynuuj zakupy - mały link zamiast przycisku */
.cart-detailed-actions .btn-secondary,
a.btn-secondary[href*="koszyk"] {
background: transparent !important;
border: 1px solid #ccc !important;
color: #888 !important;
font-size: 0.82rem !important;
}
/* Razem - większy i grubszy */
.cart-summary-line.cart-total .value,
.cart-total .value {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #1a1a1a !important;
}
/* === CHECKOUT - KOLORY === */
/* Niebieski tab -> złoty */
.nav-tabs .nav-link.active {
color: #C9A84C !important;
border-bottom-color: #C9A84C !important;
}
.nav-tabs .nav-link {
color: #1a1a1a !important;
}
/* Progress bar - złoty */
.step-number.current,
ol.stepper .step.current .step-number {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
}
/* Przycisk "Przejdź do realizacji" - czarny */
.checkout.cart-detailed-actions .btn-primary {
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
font-size: 1rem !important;
padding: 0.8rem !important;
letter-spacing: 1px !important;
}
.checkout.cart-detailed-actions .btn-primary:hover {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
}
/* === CHECKOUT - WSZYSTKIE GŁÓWNE PRZYCISKI === */
/* "Dalej", "Przejdź do płatności", "Złóż zamówienie" */
.checkout-step .btn-primary,
.checkout-step button[type="submit"],
form[name="checkout"] .btn-primary,
.step-footer .btn-primary,
#payment-confirmation .btn-primary,
button.btn-primary[data-link-action="next-step"] {
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 1rem 2rem !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
border-radius: 0 !important;
min-width: 220px !important;
transition: all 0.25s ease !important;
}
.checkout-step .btn-primary:hover,
form[name="checkout"] .btn-primary:hover,
#payment-confirmation .btn-primary:hover {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
}
/* Złóż zamówienie - ostatni krok - EXTRA duży */
#payment-confirmation button {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
color: #fff !important;
font-size: 1.2rem !important;
font-weight: 800 !important;
padding: 1.2rem 3rem !important;
width: 100% !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}
#payment-confirmation button:hover {
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
}
/* Koszyk - Zamawiam i płacę - większy */
.cart-detailed-actions .btn-primary {
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 1rem !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
}
/* Złóż zamówienie - aktywny */
#payment-confirmation button:not(:disabled) {
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 1rem 2rem !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
opacity: 1 !important;
}
#payment-confirmation button:not(:disabled):hover {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
}
/* Złóż zamówienie - nieaktywny - wyraźnie szary */
#payment-confirmation button:disabled {
background-color: #ccc !important;
border-color: #ccc !important;
color: #888 !important;
cursor: not-allowed !important;
font-size: 1.1rem !important;
padding: 1rem 2rem !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
}
/* === CHECKBOXY - większe i złote === */
input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
cursor: pointer !important;
accent-color: #C9A84C !important;
}
input[type="radio"] {
width: 18px !important;
height: 18px !important;
accent-color: #C9A84C !important;
cursor: pointer !important;
}
/* === ZGADZAM SIĘ Z WARUNKAMI - wyróżniony === */
#payment-confirmation .condition-label,
#payment-confirmation .ps-shown-by-js {
background: #fff9ee !important;
border: 2px solid #C9A84C !important;
border-radius: 4px !important;
padding: 0.8rem 1rem !important;
margin-bottom: 1rem !important;
font-weight: 600 !important;
color: #1a1a1a !important;
}
/* === IKONKI POLITYKA/DOSTAWA/ZWROT === */
.blockreassurance_product .block-icon,
.cart-detailed-totals .block-reassurance img,
.checkout-right-column img {
filter: grayscale(100%) !important;
opacity: 0.7 !important;
}
/* Zastąp ikonki tekstem z ikoną złotą */
.block-reassurance .item span {
color: #1a1a1a !important;
font-size: 0.85rem !important;
}
/* === WSZYSTKIE NIEBIESKIE LINKI -> CZARNE === */
.nav-tabs .nav-link,
.checkout-step a,
.condition-label a,
form .custom-checkbox a {
color: #1a1a1a !important;
}
.nav-tabs .nav-link:hover,
.checkout-step a:hover {
color: #C9A84C !important;
}
.nav-tabs .nav-link.active {
color: #C9A84C !important;
border-bottom: 2px solid #C9A84C !important;
font-weight: 700 !important;
}
/* === PRZYCISKI DALEJ W CHECKOUT === */
.step-footer .btn,
.checkout-step .continue {
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700 !important;
padding: 0.8rem 1.5rem !important;
letter-spacing: 1px !important;
border-radius: 0 !important;
}
.step-footer .btn:hover {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
}
/* Powrót - neutralny szary */
.step-footer .btn-outline-secondary,
.checkout-step .btn-outline-secondary,
a.btn-outline-secondary {
background: transparent !important;
border: 1px solid #ccc !important;
color: #666 !important;
border-radius: 0 !important;
}
.step-footer .btn-outline-secondary:hover {
background: #f5f5f5 !important;
color: #1a1a1a !important;
border-color: #999 !important;
}
/* Zgadzam sie z warunkami - wyroznienie */
.payment-options + .condition-label,
#conditions-to-approve label,
#conditions-to-approve {
display: block !important;
background: #fff9ee !important;
border: 2px solid #C9A84C !important;
border-radius: 4px !important;
padding: 0.8rem 1rem !important;
margin: 1rem 0 !important;
font-weight: 600 !important;
color: #1a1a1a !important;
}
/* Checkbox - zolty przez CSS trick */
input[type="checkbox"]:checked {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
accent-color: #C9A84C !important;
}
/* Zloz zamowienie nieaktywny - szara ramka */
#payment-confirmation button:disabled {
border: 2px solid #ccc !important;
background-color: #f0f0f0 !important;
color: #aaa !important;
}
/* ================================================
DIAMONDI - CHECKOUT FLOW UX v20
================================================ */
input[type="radio"] {
accent-color: #C9A84C !important;
width: 20px !important;
height: 20px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
input[type="checkbox"] {
accent-color: #C9A84C !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
#conditions-to-approve ul {
list-style: none !important;
padding: 0 !important;
margin: 1rem 0 !important;
}
#conditions-to-approve li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
background: #fffdf5 !important;
border: 2px solid #C9A84C !important;
border-radius: 3px !important;
padding: 1rem 1.25rem !important;
}
#conditions-to-approve li label {
font-size: 0.9rem !important;
font-weight: 600 !important;
color: #1a1a1a !important;
line-height: 1.5 !important;
cursor: pointer !important;
margin: 0 !important;
}
.condition-label {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
.checkout-step .btn-primary,
.step-footer .btn-primary {
background: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
border-radius: 0 !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 0.9rem 2rem !important;
}
.checkout-step .btn-primary:hover,
.step-footer .btn-primary:hover {
background: #C9A84C !important;
border-color: #C9A84C !important;
}
#payment-confirmation button[type="submit"] {
background: #C9A84C !important;
border-color: #C9A84C !important;
color: #fff !important;
border-radius: 0 !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 0.9rem 2rem !important;
}
#payment-confirmation button[type="submit"]:hover {
background: #1a1a1a !important;
border-color: #1a1a1a !important;
}
.step-footer .btn-outline-secondary,
.checkout-step .btn-outline-secondary,
a.btn-outline-secondary,
button.btn-outline-secondary {
background: transparent !important;
border: 1px solid #ccc !important;
color: #888 !important;
border-radius: 0 !important;
font-weight: 400 !important;
font-size: 0.85rem !important;
letter-spacing: 0 !important;
padding: 0.7rem 1.2rem !important;
}
.step-footer .btn-outline-secondary:hover,
a.btn-outline-secondary:hover {
background: #f5f5f5 !important;
border-color: #aaa !important;
color: #555 !important;
}
.modal .btn-outline-secondary,
#blockcart-modal .btn-outline-secondary {
background: transparent !important;
border: 1px solid #ccc !important;
color: #666 !important;
border-radius: 0 !important;
}
.modal .btn-primary,
#blockcart-modal .btn-primary {
background: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
border-radius: 0 !important;
}
.modal .btn-primary:hover,
#blockcart-modal .btn-primary:hover {
background: #C9A84C !important;
border-color: #C9A84C !important;
}
.checkout-step a:not(.btn),
.step-footer a:not(.btn),
#conditions-to-approve a {
color: #C9A84C !important;
text-decoration: underline !important;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline-color: #C9A84C !important;
box-shadow: 0 0 0 2px rgba(201,168,76,0.2) !important;
}
/* ================================================
DIAMONDI v21 - BOOTSTRAP CSS VARS OVERRIDE
Nadpisujemy zmienne Bootstrap, nie właściwości
================================================ */
/* Przycisk "Powrót" - szary przez CSS vars */
.step-footer .btn-outline-secondary,
.checkout-step .btn-outline-secondary,
a.btn-outline-secondary,
button.btn-outline-secondary {
--bs-btn-color: #888 !important;
--bs-btn-border-color: #ccc !important;
--bs-btn-hover-color: #555 !important;
--bs-btn-hover-bg: #f5f5f5 !important;
--bs-btn-hover-border-color: #aaa !important;
--bs-btn-active-color: #555 !important;
--bs-btn-active-bg: #f0f0f0 !important;
background-color: transparent !important;
color: #888 !important;
border-color: #ccc !important;
}
/* Przyciski główne w checkout - czarne przez CSS vars */
.checkout-step .btn-primary,
.step-footer .btn-primary {
--bs-btn-bg: #1a1a1a !important;
--bs-btn-border-color: #1a1a1a !important;
--bs-btn-color: #fff !important;
--bs-btn-hover-bg: #C9A84C !important;
--bs-btn-hover-border-color: #C9A84C !important;
--bs-btn-hover-color: #fff !important;
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
}
/* ZŁÓŻ ZAMÓWIENIE - złoty */
#payment-confirmation button[type="submit"] {
--bs-btn-bg: #C9A84C !important;
--bs-btn-border-color: #C9A84C !important;
--bs-btn-color: #fff !important;
--bs-btn-hover-bg: #1a1a1a !important;
--bs-btn-hover-border-color: #1a1a1a !important;
background-color: #C9A84C !important;
border-color: #C9A84C !important;
color: #fff !important;
}
/* Modal "Produkt dodany" - Kontynuuj szary */
#blockcart-modal .btn-outline-secondary,
.modal#blockcart-modal .btn-outline-secondary {
--bs-btn-color: #666 !important;
--bs-btn-border-color: #ccc !important;
--bs-btn-hover-bg: #f5f5f5 !important;
background-color: transparent !important;
color: #666 !important;
border-color: #ccc !important;
}
/* Modal "Produkt dodany" - Zamawiam czarny */
#blockcart-modal .btn-primary,
.modal#blockcart-modal .btn-primary {
--bs-btn-bg: #1a1a1a !important;
--bs-btn-border-color: #1a1a1a !important;
--bs-btn-color: #fff !important;
--bs-btn-hover-bg: #C9A84C !important;
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
}
/* Radio - złote przez CSS form vars */
:root {
--bs-form-check-bg: #fff;
}
.form-check-input:checked {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
}
.form-check-input:focus {
border-color: #C9A84C !important;
box-shadow: 0 0 0 0.25rem rgba(201,168,76,0.25) !important;
}
/* Adres - ramka zaznaczonego złota */
.step .address.selected {
border: 2px solid #C9A84C !important;
margin: 0 !important;
}
/* ================================================
DIAMONDI v23 - TRUST BOX + URGENCY + KONWERSJA
================================================ */
.cart-summary .blockreassurance_product,
.checkout-right-column .blockreassurance_product {
display: none !important;
}
.cart-summary::before {
content: '⏰ Zamów do 13:30 → wysyłka DZIŚ';
display: block !important;
background: #1a1a1a !important;
color: #C9A84C !important;
text-align: center !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
padding: 0.6rem 1rem !important;
margin: -1rem -1rem 1rem -1rem !important;
}
.cart-summary__total .value,
.cart-summary .cart-summary__total span.value {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #1a1a1a !important;
}
.cart-summary__total .label {
font-size: 1rem !important;
font-weight: 700 !important;
color: #1a1a1a !important;
}
#conditions-to-approve li {
background: #fafafa !important;
border: 1px solid #e0d4a0 !important;
border-radius: 3px !important;
padding: 0.75rem 1rem !important;
margin: 0.75rem 0 !important;
}
.btn-outline-secondary.js-back {
--bs-btn-color: #888 !important;
--bs-btn-border-color: #ddd !important;
--bs-btn-bg: transparent !important;
--bs-btn-hover-color: #444 !important;
--bs-btn-hover-bg: #f5f5f5 !important;
--bs-btn-hover-border-color: #bbb !important;
background-color: transparent !important;
border-color: #ddd !important;
color: #888 !important;
}
/* ================================================
DIAMONDI v23 - TRUST BOX + URGENCY + KONWERSJA
================================================ */
.cart-summary::before {
content: '\23F0 Zamow do 13:30 → wysylka DZIS';
display: block !important;
background: #1a1a1a !important;
color: #C9A84C !important;
text-align: center !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
padding: 0.6rem 1rem !important;
margin: -1rem -1rem 1rem -1rem !important;
}
.cart-summary__total .value,
.cart-summary .cart-summary__total span.value {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #1a1a1a !important;
}
.cart-summary__total .label {
font-size: 1rem !important;
font-weight: 700 !important;
color: #1a1a1a !important;
}
#conditions-to-approve li {
background: #fafafa !important;
border: 1px solid #e0d4a0 !important;
border-radius: 3px !important;
padding: 0.75rem 1rem !important;
margin: 0.75rem 0 !important;
}
.btn-outline-secondary.js-back {
--bs-btn-color: #888 !important;
--bs-btn-border-color: #ddd !important;
--bs-btn-bg: transparent !important;
--bs-btn-hover-color: #444 !important;
--bs-btn-hover-bg: #f5f5f5 !important;
--bs-btn-hover-border-color: #bbb !important;
background-color: transparent !important;
border-color: #ddd !important;
color: #888 !important;
}
/* v24 - ukryj emoji ikonki blockreassurance, zostaw trust box JS */
.blockreassurance_product .block-icon img,
.block-reassurance .block-icon img {
display: none !important;
}
.blockreassurance_product p,
.block-reassurance p {
font-size: 0.8rem !important;
color: #555 !important;
}
/* Powrot - bez grubej ramki */
.step-footer,
.checkout-step .step-footer {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* v25 - radio gold fix + ukryj emoji blockreassurance */
.payment-options input[type="radio"],
#checkout-payment-step input[type="radio"] {
accent-color: #C9A84C !important;
width: 20px !important;
height: 20px !important;
}
/* Ukryj stare emoji ikonki modulu */
.blockreassurance_product .block-icon {
display: none !important;
}
.blockreassurance_product .item-product {
padding-left: 0 !important;
}
/* Powrot - bez ramki kontenera */
.step-footer {
background: transparent !important;
border: none !important;
padding: 0.5rem 0 !important;
box-shadow: none !important;
}
/* v26 - ukryj blockreassurance w checkout */
.page-order .blockreassurance_product { display: none !important; }
.checkout-right-column .blockreassurance_product { display: none !important; }
/* v27 fixes */
input[type="radio"] { accent-color: #C9A84C !important; width:20px!important; height:20px!important; }
.btn-outline-primary.w-100.mb-3 { --bs-btn-color:#888!important; --bs-btn-border-color:#ddd!important; background:transparent!important; border-color:#ddd!important; color:#888!important; }
/* v28 - ukryj CSS urgency, JS go doda */
.cart-summary::before { display: none !important; }
/* v29 FINAL CHECKOUT */
/* Radio złote wszędzie */
input[type="radio"] {
accent-color: #C9A84C !important;
width: 20px !important;
height: 20px !important;
cursor: pointer !important;
}
/* Checkbox złoty */
input[type="checkbox"] {
accent-color: #C9A84C !important;
width: 18px !important;
height: 18px !important;
cursor: pointer !important;
}
/* Trust box tekst większy */
.dm-trust div {
font-size: 0.88rem !important;
margin-bottom: 10px !important;
}
/* Urgency bar - wyśrodkowany tekst */
#js-checkout-summary > div:first-child {
border-radius: 0 !important;
}
/* Powrót - szary link bez ramki kontenera */
.step-footer {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0.5rem 0 !important;
}
/* Dodaj nowy adres - szary nie niebieski */
.btn-outline-primary:not(.js-back) {
--bs-btn-color: #555 !important;
--bs-btn-border-color: #ccc !important;
--bs-btn-hover-bg: #f5f5f5 !important;
--bs-btn-hover-color: #333 !important;
--bs-btn-hover-border-color: #aaa !important;
color: #555 !important;
border-color: #ccc !important;
background: transparent !important;
}
/* OOS visual indication (Mejuri pattern) — replaces v30/v31/v32 hide rules.
Background: PS9 by design renders OOS products in category listings
(Category::getProducts has no stock filter). Hiding via CSS caused empty
pages on pagination. Solution: show OOS with reduced opacity + grayscale
so customer browses full inventory but sees clear "this is unavailable"
visual signal. Brand DNA sek 7: "premium = lepiej podane info, nie ukryte".
OOS products remain clickable → PDP shows "Obecnie brak na stanie" message
+ ps_emailalerts notify-me form (see commit d504fe7). */
.product-miniature:has(.badge.out_of_stock) {
opacity: 0.6;
filter: grayscale(50%);
transition: opacity 0.2s ease, filter 0.2s ease;
}
.product-miniature:has(.badge.out_of_stock):hover {
opacity: 0.85;
filter: grayscale(20%);
}
/* BUG #10: search results — OOS na końcu (analogicznie do kategorii via
PS_LAYERED_FILTER_SHOW_OUT_OF_STOCK_LAST=1). PS9 SearchProductSearchProvider
nie respektuje tego flag (Search::find używa ORDER BY position DESC), więc
pchamy OOS na koniec via flex order. .products.row to Bootstrap flex container,
.product-miniature jest flex item — order działa per-item. Scoped do
body.page-search aby nie kolidować z innymi listingami. */
body.page-search .products.row .product-miniature:has(.badge.out_of_stock) {
order: 9999;
}
/* v33 - strzalka "Wszystkie produkty" - zlota */
.all-product-link,
.all-product-link .btn,
a.all-product-link {
color: #C9A84C !important;
border-color: #C9A84C !important;
}
.all-product-link i,
.all-product-link .material-icons {
color: #C9A84C !important;
}
.all-product-link:hover,
.all-product-link:hover .btn {
background: #C9A84C !important;
color: #fff !important;
}
/* v34 - blockreassurance - zamień emoji na złote SVG */
.blockreassurance_product .block-icon img {
display: none !important;
}
.blockreassurance_product .item-product {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
.blockreassurance_product .item-product p {
font-size: 0.82rem !important;
color: #333 !important;
margin: 0 !important;
}
.blockreassurance_product .item-product::before {
content: '';
display: inline-block !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
background: #C9A84C !important;
border-radius: 50% !important;
opacity: 0.8 !important;
}
/* v35 - ukryj blockreassurance wszędzie - zastąpiony przez trust box JS */
.blockreassurance_product {
display: none !important;
}
/* v35 - ukryj blockreassurance - zastapiony przez JS */
.blockreassurance_product {
display: none !important;
}
/* v36 - przywroc blockreassurance na stronie produktu */
.page-product .blockreassurance_product {
display: block !important;
}
.page-product .blockreassurance_product .block-icon img {
display: block !important;
width: 24px !important;
height: 24px !important;
}
/* v36 - przywroc blockreassurance na stronie produktu */
.page-product .blockreassurance_product {
display: block !important;
}
.page-product .blockreassurance_product .block-icon img {
display: block !important;
width: 24px !important;
height: 24px !important;
}
/* v37 - ukryj stary blockreassurance wszedzie */
.blockreassurance_product { display: none !important; }
/* Nasz trust bar na produkcie - poziomy */
.dm-trust-bar {
display: flex !important;
justify-content: space-between !important;
gap: 8px !important;
margin-top: 1rem !important;
padding: 0.875rem 0 !important;
border-top: 1px solid #eee !important;
border-bottom: 1px solid #eee !important;
}
.dm-trust-bar a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
text-align: center !important;
font-size: 0.72rem !important;
color: #555 !important;
text-decoration: none !important;
flex: 1 !important;
line-height: 1.3 !important;
}
.dm-trust-bar a:hover { color: #C9A84C !important; }
.dm-trust-bar a svg { flex-shrink: 0 !important; }
.dm-trust-bar a:not(:last-child) {
border-right: 1px solid #eee !important;
padding-right: 8px !important;
}
/* v38 - FORCE ukryj blockreassurance wszedzie bez wyjatkow */
.blockreassurance_product,
.block-reassurance,
#blockreassurance_product {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* v39 - trust bar ikony zlote + ukryj stary modul */
.dm-trust-bar svg { stroke: #C9A84C !important; }
.dm-trust-bar a { color: #444 !important; }
.blockreassurance_product,
.block-reassurance { display: none !important; }
/* ================================================
DIAMONDI - SLIDE CART v1
================================================ */
/* Overlay */
#dm-cart-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
#dm-cart-overlay.open {
opacity: 1;
visibility: visible;
}
/* Panel */
#dm-slide-cart {
position: fixed;
top: 0; right: -420px;
width: 420px;
max-width: 100vw;
height: 100vh;
background: #fff;
z-index: 9999;
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
display: flex;
flex-direction: column;
font-family: Inter, sans-serif;
}
#dm-slide-cart.open {
right: 0;
}
/* Header */
#dm-slide-cart .dm-sc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #eee;
background: #1a1a1a;
color: #fff;
}
#dm-slide-cart .dm-sc-header h3 {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0;
color: #fff;
}
#dm-slide-cart .dm-sc-close {
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
line-height: 1;
opacity: 0.8;
}
#dm-slide-cart .dm-sc-close:hover { opacity: 1; }
/* Body */
/* Produkt */
#dm-slide-cart .dm-sc-product {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eee;
}
#dm-slide-cart .dm-sc-product img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
#dm-slide-cart .dm-sc-product-info {
flex: 1;
}
#dm-slide-cart .dm-sc-product-name {
font-size: 0.88rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 0.25rem;
line-height: 1.4;
}
#dm-slide-cart .dm-sc-product-price {
font-size: 1rem;
font-weight: 700;
color: #1a1a1a;
}
#dm-slide-cart .dm-sc-product-price-old {
font-size: 0.8rem;
color: #aaa;
text-decoration: line-through;
margin-left: 6px;
}
/* Trust mini */
#dm-slide-cart .dm-sc-trust {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 1.5rem;
padding: 1rem;
background: #fafafa;
border-radius: 4px;
}
#dm-slide-cart .dm-sc-trust div {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: #555;
}
#dm-slide-cart .dm-sc-trust svg {
stroke: #C9A84C;
flex-shrink: 0;
}
/* Summary */
#dm-slide-cart .dm-sc-summary {
padding: 1rem 0;
border-top: 1px solid #eee;
}
#dm-slide-cart .dm-sc-row {
display: flex;
justify-content: space-between;
font-size: 0.88rem;
color: #555;
margin-bottom: 6px;
}
#dm-slide-cart .dm-sc-total {
display: flex;
justify-content: space-between;
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #eee;
}
/* Footer */
#dm-slide-cart .dm-sc-btn-primary {
display: block;
width: 100%;
background: #C9A84C;
color: #fff;
border: none;
padding: 1rem;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background 0.2s;
}
#dm-slide-cart .dm-sc-btn-primary:hover {
background: #1a1a1a;
color: #fff;
}
#dm-slide-cart .dm-sc-btn-secondary {
display: block;
width: 100%;
background: transparent;
color: #666;
border: 1px solid #ddd;
padding: 0.75rem;
font-size: 0.82rem;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
}
#dm-slide-cart .dm-sc-btn-secondary:hover {
border-color: #999;
color: #333;
}
/* Urgency w slide cart */
#dm-slide-cart .dm-sc-urgency {
background: #1a1a1a;
color: #C9A84C;
text-align: center;
font-size: 0.75rem;
font-weight: 700;
padding: 0.5rem;
letter-spacing: 0.05em;
}
@media (max-width: 480px) {
#dm-slide-cart { width: 100vw; right: -100vw; }
}
#dm-cart-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9998;opacity:0;visibility:hidden;transition:opacity .3s ease}
#dm-cart-overlay.open{opacity:1;visibility:visible}
#dm-slide-cart{position:fixed;top:0;right:-420px;width:420px;max-width:100vw;height:100vh;background:#fff;z-index:9999;box-shadow:-4px 0 20px rgba(0,0,0,.15);transition:right .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;font-family:Inter,sans-serif}
#dm-slide-cart.open{right:0}
#dm-slide-cart .dm-sc-urgency{background:#1a1a1a;color:#C9A84C;text-align:center;font-size:.75rem;font-weight:700;padding:.5rem;letter-spacing:.05em}
#dm-slide-cart .dm-sc-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #eee;background:#1a1a1a;color:#fff}
#dm-slide-cart .dm-sc-header h3{font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0;color:#fff}
#dm-slide-cart .dm-sc-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;line-height:1;opacity:.8}
#dm-slide-cart .dm-sc-close:hover{opacity:1}
#dm-slide-cart .dm-sc-body{flex:1;overflow-y:auto;padding:1.5rem}
#dm-slide-cart .dm-sc-product{display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #eee}
#dm-slide-cart .dm-sc-product img{width:80px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0}
#dm-slide-cart .dm-sc-product-name{font-size:.88rem;font-weight:600;color:#1a1a1a;margin:0 0 .25rem;line-height:1.4}
#dm-slide-cart .dm-sc-product-price{font-size:1rem;font-weight:700;color:#1a1a1a}
#dm-slide-cart .dm-sc-product-price-old{font-size:.8rem;color:#aaa;text-decoration:line-through;margin-left:6px}
#dm-slide-cart .dm-sc-trust{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;padding:1rem;background:#fafafa;border-radius:4px}
#dm-slide-cart .dm-sc-trust div{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#555}
#dm-slide-cart .dm-sc-summary{padding:1rem 0;border-top:1px solid #eee}
#dm-slide-cart .dm-sc-row{display:flex;justify-content:space-between;font-size:.88rem;color:#555;margin-bottom:6px}
#dm-slide-cart .dm-sc-total{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:700;color:#1a1a1a;margin-top:8px;padding-top:8px;border-top:1px solid #eee}
#dm-slide-cart .dm-sc-footer{padding:1.25rem 1.5rem;border-top:1px solid #eee;display:flex;flex-direction:column;gap:10px}
#dm-slide-cart .dm-sc-btn-primary{display:block;width:100%;background:#C9A84C;color:#fff;border:none;padding:1rem;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background .2s}
#dm-slide-cart .dm-sc-btn-primary:hover{background:#1a1a1a;color:#fff}
#dm-slide-cart .dm-sc-btn-secondary{display:block;width:100%;background:transparent;color:#666;border:1px solid #ddd;padding:.75rem;font-size:.82rem;text-align:center;text-decoration:none;cursor:pointer;transition:all .2s}
#dm-slide-cart .dm-sc-btn-secondary:hover{border-color:#999;color:#333}
@media(max-width:480px){#dm-slide-cart{width:100vw;right:-100vw}}
#dm-slide-cart .dm-sc-btn-primary{display:block;width:100%;background:#C9A84C;color:#fff;border:none;padding:1rem;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background .2s}
#dm-slide-cart .dm-sc-btn-primary:hover{background:#1a1a1a;color:#fff}
#dm-slide-cart .dm-sc-btn-secondary{display:block;width:100%;background:transparent;color:#666;border:1px solid #ddd;padding:.75rem;font-size:.82rem;text-align:center;cursor:pointer;transition:all .2s}
#dm-slide-cart .dm-sc-btn-secondary:hover{border-color:#999;color:#333}
@media(max-width:480px){#dm-slide-cart{width:100vw;right:-100vw}}
/* ukryj stary blockcart modal */
#blockcart-modal { display: none !important; }
.blockcart-modal { display: none !important; }
/* v45 - badge rabat zalogowany - złoty */
.discount-badge,
.badge.discount,
.product-flag.discount,
.badge[class*="discount"],
span.badge.bg-danger,
.product-flag.new-flag,
li.product-flag {
background-color: #C9A84C !important;
color: #fff !important;
border-color: #C9A84C !important;
}
/* Badge -10% na stronie produktu */
.product__flags .badge,
.product-flags .badge {
background-color: #C9A84C !important;
color: #fff !important;
}
/* v47 - badge fix - ul>li.badge */
ul.product-flags li.badge,
ul.js-product-flags li.badge,
.product-flags li,
.js-product-flags li {
background-color: #C9A84C !important;
color: #fff !important;
border: none !important;
border-radius: 3px !important;
}
/* v48 - badge pozycja na zdjęciu */
.product__flags,
.product-flags {
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 2 !important;
}
.product__cover,
.product-cover,
.product__image-container {
position: relative !important;
}
/* v48 - zniżka % przy cenie - złoty */
.product__discount,
.product-discount,
.discount-percentage,
.price-discount,
[class*="discount-percentage"],
.regular-price + span,
.product__prices .discount {
color: #C9A84C !important;
font-weight: 700 !important;
}
/* v49 - zniżka % przy cenie - złoty */
.product__discount-percentage {
color: #C9A84C !important;
font-weight: 700 !important;
}
/* v50 - badge Nowy - czarny */
ul.product-flags li.badge.new,
ul.product-flags li.badge[class*="new"],
ul.js-product-flags li.badge.new,
.product-flags li.new {
background-color: #1a1a1a !important;
color: #fff !important;
}
/* v50 - przekreślona cena - czarna */
.product__price-regular,
.regular-price {
color: #1a1a1a !important;
font-weight: 400 !important;
}
/* v50 - aktualna cena po zniżce - złota */
.product__current-price,
.current-price,
.price:not(.regular-price) {
color: #C9A84C !important;
}
/* v52 - CTA checkout - złote przyciski */
.cart__totals a.btn,
.cart-detailed-actions a.btn,
a[href*="zamowienie"].btn,
.checkout-step .continue.btn,
#cart .checkout a {
background-color: #1a1a1a !important;
color: #fff !important;
border-color: #1a1a1a !important;
}
.cart__totals .btn-primary,
.checkout .btn-primary {
background-color: #1a1a1a !important;
color: #fff !important;
border-color: #1a1a1a !important;
}
/* v54 - checkboxy w checkout - większe, złote */
.checkout .custom-checkbox input[type="checkbox"],
#checkout .custom-checkbox input[type="checkbox"],
.form-check-input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
cursor: pointer !important;
accent-color: #C9A84C !important;
}
.checkout .custom-checkbox label,
#checkout .custom-checkbox label,
.form-check-label {
cursor: pointer !important;
padding-left: 8px !important;
}
/* Cała ramka adresu klikalna */
.address-item label {
cursor: pointer !important;
width: 100% !important;
display: block !important;
}
/* v54 - ZŁÓŻ ZAMÓWIENIE - czarny domyślnie, złoty hover */
#payment-confirmation button,
button[data-link-action="place-order"],
.place-order .btn {
background-color: #1a1a1a !important;
color: #fff !important;
border-color: #1a1a1a !important;
transition: background 0.2s !important;
}
#payment-confirmation button:hover,
button[data-link-action="place-order"]:hover,
.place-order .btn:hover {
background-color: #C9A84C !important;
color: #fff !important;
border-color: #C9A84C !important;
}
/* v55 - checkbox warunki - zapobiegaj zaznaczaniu tekstu */
#conditions-to-approve label,
.condition-label,
#payment-confirmation label {
user-select: none !important;
-webkit-user-select: none !important;
cursor: pointer !important;
}
#conditions-to-approve .card,
.js-terms {
cursor: pointer !important;
}
/* v57 - ZŁÓŻ ZAMÓWIENIE czarny, hover złoty */
#payment-confirmation button.btn-primary {
--bs-btn-bg: #1a1a1a;
--bs-btn-hover-bg: #C9A84C;
--bs-btn-hover-border-color: #C9A84C;
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
}
#payment-confirmation button.btn-primary:hover {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
color: #fff !important;
}
/* v58 - Kontynuuj zakupy w checkout */
.checkout-step__continue-link {
display: inline-block;
margin-top: 1rem;
font-size: 13px;
color: var(--bs-body-color);
text-decoration: none;
opacity: 0.6;
}
.checkout-step__continue-link:hover { opacity: 1; }
/* Pasek "koszyk zawiera" - styl DIAMONDI zamiast niebieskiego */
article.alert.alert-info[data-alert="info"],
.alert.alert-info {
background: #fdf9f0 !important;
border: 1px solid #C9A84C !important;
border-left: 4px solid #C9A84C !important;
color: #5a4a1e !important;
border-radius: 6px !important;
}
/* ================================================
DIAMONDI – Runda 1 fixes
================================================ */
/* 1. Feedback na przyciskach */
.btn, .btn-primary, .btn-secondary, .add-to-cart,
button[data-button-action="add-to-cart"] {
transition: all 0.15s ease !important;
}
.btn:active, .btn-primary:active, .add-to-cart:active,
button[data-button-action="add-to-cart"]:active {
transform: scale(0.96) !important;
opacity: 0.8 !important;
}
/* 2. Breadcrumb nowrap mobile */
.breadcrumb {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.breadcrumb-item {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* 3. Przycisk Dalej — pełna szerokość, sticky bottom */
body.page-order .step-footer .btn-primary,
body.page-order .step-footer button[type="submit"],
body.page-order #payment-confirmation button[type="submit"] {
width: 100% !important;
padding: 1rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
}
/* ================================================
DIAMONDI – Runda 1 fixes
================================================ */
/* 1. Feedback na przyciskach */
.btn, .btn-primary, .btn-secondary, .add-to-cart,
button[data-button-action="add-to-cart"] {
transition: all 0.15s ease !important;
}
.btn:active, .btn-primary:active, .add-to-cart:active,
button[data-button-action="add-to-cart"]:active {
transform: scale(0.96) !important;
opacity: 0.8 !important;
}
/* 2. Breadcrumb nowrap mobile */
.breadcrumb {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.breadcrumb-item {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* 3. Przycisk Dalej — pełna szerokość, sticky bottom */
body.page-order .step-footer .btn-primary,
body.page-order .step-footer button[type="submit"],
body.page-order #payment-confirmation button[type="submit"] {
width: 100% !important;
padding: 1rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
}
/* 4. Ukryj checkout-irrelevant footer sections, ZACHOWAJ dane firmy (KC art. 11.6
wymóg "łatwo dostępne na każdej stronie", w tym checkout). */
body.page-order .footer__before,
body.page-order .footer__main__top,
body.page-order .footer__main__bottom,
body.page-order .copyright,
body.page-order #block-newsletter,
body.page-order .newsletter-block {
display: none !important;
}
/* Footer wrapper VISIBLE na checkout — minimal styling, container dla .footer__company */
body.page-order footer,
body.page-order #footer,
body.page-order .footer-container {
display: block !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
margin-top: 32px !important;
}
body.page-order .footer__main {
background: transparent !important;
padding: 0 !important;
}
body.page-order .footer__main .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* DIAMONDI - CHECKOUT BUTTON FIX */
.dm-sc-footer {
position: fixed !important;
bottom: 30px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 999999 !important;
background: rgba(255,255,255,0.98) !important;
border: 3px solid #C9A962 !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}
.dm-sc-btn-primary {
background: linear-gradient(135deg, #C9A962, #B8985A) !important;
color: #ffffff !important;
border: 3px solid #C9A962 !important;
padding: 15px 40px !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-block !important;
width: 100% !important;
}
/* REMOVED 2026-04-26: 3 legacy 'NUCLEAR SPECIFICITY' rules (was lines 1596-1648).
* Reason: 'body[id*="cart"] #dm-slide-cart { right: 0 !important }' force'owało
* drawer otwarty na stronie /koszyk niezależnie od .open class — close button
* "działał" (handler odpalał się, .open class się usuwała) ale CSS !important
* trzymało drawer widoczny. User raportował 'close button broken' 2026-04-26.
* Removed: NUCLEAR footer fixed-centered popup, force-visible drawer, golden button
* cart override. Drawer nadal działa poprzez .open class toggle (custom.css:1064
* #dm-slide-cart.open { right: 0 }).
*/
/* NAPRAW UKRYTY PRZYCISK DALEJ W CHECKOUT — strukturalne fixy (visibility/sizing).
Wizualne props (gradient/font/border) usunięte — zastępują je rule'y na końcu pliku
(specificity-based solid gold dla primary checkout CTAs). */
button.continue.btn.btn-primary,
.continue.btn.btn-primary,
input.continue,
.checkout-form button[type="submit"] {
height: auto !important;
width: auto !important;
min-height: 48px !important;
min-width: 200px !important;
padding: 12px 40px !important;
margin: 20px 0 !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
overflow: visible !important;
clip: unset !important;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
/* ENSURE BUTTON CONTAINER IS VISIBLE */
.checkout-personal-information-step,
.checkout-form .form-footer,
.continue-container,
.js-continue {
display: block !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
}
/* ============================================== */
/* PRODUCT PAGE — Trust strip component */
/* Sesja 2026-04-25 (refactor inline → component) */
/* Replaces inline-styled SVG trust badges in */
/* product.tpl lines 89-101 */
/* ============================================== */
/* DIAMONDI trust signals 2x2 grid — Heroicons outline (Mejuri/Otiumberg pattern).
4 items: 14 dni zwrot, BLIK+raty, Szybka wysyłka, Certyfikat. Subtle gold
separator nad/pod, ikona+label inline (NIE stack pionowy poprzedniego 3-item). */
.dm-product-trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
padding: 16px 0;
border-top: 1px solid rgba(201, 168, 76, 0.15);
border-bottom: 1px solid rgba(201, 168, 76, 0.15);
margin: 16px 0;
}
.dm-product-trust__item {
display: flex;
align-items: center;
gap: 8px;
}
.dm-product-trust__icon {
color: #C9A84C;
flex-shrink: 0;
width: 24px;
height: 24px;
}
.dm-product-trust__label {
color: #5A5A5A;
font-family: "Inter", sans-serif;
font-size: 13px;
line-height: 1.4;
}
/* ============================================== */
/* PRODUCT PAGE — Title typography (premium) */
/* Sesja 2026-04-25 (per audit raport 06) */
/* H1 nazwa produktu: Georgia 30px light weight, */
/* letter-spacing 1px — luxury jewelry aesthetic */
/* (replaces Bootstrap .h4 = 24px bold) */
/* ============================================== */
.product__name.dm-product-title {
font-family: Georgia, serif;
font-size: 30px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1.3;
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}
@media (max-width: 575.98px) {
.product__name.dm-product-title {
font-size: 24px;
letter-spacing: 0.5px;
}
}
.diamondi-sku {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-text-subtle);
margin-bottom: var(--space-md);
font-weight: 500;
}
/* ============================================== */
/* PRODUCT PAGE — Sticky right column (desktop) */
/* Sesja 2026-04-25 (per audit raport 02 P1-5) */
/* CTA + nazwa + cena + trust strip pozostają */
/* widoczne podczas scrolla długiego opisu */
/* (Mejuri / Otiumberg pattern) */
/* ============================================== */
@media (min-width: 992px) {
.page-product .row.js-product-container {
align-items: flex-start;
}
.page-product .product__col {
position: sticky;
top: 20px;
}
}
/* ============================================== */
/* CATEGORY PAGE — Premium grid + card hover */
/* Sesja 2026-04-25 (per audit raport 03 P0/P1) */
/* Grid 3 kol XL (zamiast 4), gutter 48px, */
/* CTA z tekstem zamiast tylko ikony, */
/* hover scale + 2nd image swap */
/* ============================================== */
/* Grid loosening: 3 cols on XL desktop instead of 4 */
@media (min-width: 1200px) {
.page-category #products .products .product-miniature,
.page-category #products .products .col-xl-3 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
}
/* Generous vertical gutter between rows (premium breathing) */
.page-category #products .products,
.page-search #products .products,
.page-best-sales #products .products,
.page-new-products #products .products,
.page-prices-drop #products .products {
row-gap: 48px;
}
/* Card hover: lift + shadow */
.product-miniature .card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
border: none;
background: transparent;
}
.product-miniature:hover .card {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
/* Card image hover scale (subtle) */
.product-miniature .product-miniature__image-container {
overflow: hidden;
border-radius: var(--radius-sm);
}
.product-miniature .product-miniature__image {
transition: transform 0.4s ease;
}
.product-miniature:hover .product-miniature__image {
transform: scale(1.04);
}
/* CTA "Do koszyka" with text instead of icon-only */
.product-miniature [data-button-action="add-to-cart"] {
position: relative;
}
.product-miniature [data-button-action="add-to-cart"] .visually-hidden {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 0 0 6px !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
}
.product-miniature [data-button-action="add-to-cart"] i {
font-size: 16px;
}
/* Title typography polish */
.product-miniature .product-miniature__title {
font-size: 13px;
letter-spacing: 0.3px;
line-height: 1.4;
margin-top: 6px;
margin-bottom: 4px;
}
/* Price emphasis */
.product-miniature .product-miniature__price {
font-family: Georgia, serif;
font-size: 15px;
font-weight: 500;
color: var(--color-text-primary);
}
/* Sort orders as chip-style pills (replaces dropdown look) */
.page-category .sort-orders__title,
.page-search .sort-orders__title {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
.page-category .sort-by-row .dropdown-toggle,
.page-search .sort-by-row .dropdown-toggle {
border: 1px solid var(--color-border-subtle);
border-radius: 999px;
padding: 6px 16px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
background: white;
color: var(--color-text-primary);
transition: border-color 0.2s, background 0.2s;
}
.page-category .sort-by-row .dropdown-toggle:hover,
.page-search .sort-by-row .dropdown-toggle:hover {
border-color: var(--color-gold);
background: var(--color-bg-subtle);
}
/* ============================================== */
/* CHECKOUT — Restore footer.form-footer (BUG-04) */
/* 2026-04-26: DALEJ button hidden by earlier rule */
/* 'body.page-order footer { display: none }' on */
/* line ~1494/1545 (duplicate). Override below. */
/* ============================================== */
body.page-order footer.form-footer { display: flex !important; }
body.page-order footer { display: block !important; }
/* ============================================== */
/* CHECKOUT CTAs — Unified gold (kroki 1-3) */
/* + gradient finality dla 'Złóż zamówienie' (4) */
/* 2026-04-26 (audit raport 11 quick win #1+#2) */
/* ============================================== */
/* Steps 1-3: solid gold — Mejuri-style premium */
body.page-order .checkout-step button[name="continue"],
body.page-order .checkout-step .continue,
body.page-order .checkout-step button.continue,
body.page-order .checkout-step button[name="confirmDeliveryOption"],
body.page-order .checkout-step button[name="confirm-addresses"] {
background: var(--color-gold) !important;
color: white !important;
border: none !important;
border-radius: var(--radius-sm) !important;
padding: 12px 28px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
transition: background 0.2s ease, transform 0.1s ease !important;
box-shadow: none !important;
cursor: pointer !important;
}
body.page-order .checkout-step button[name="continue"]:hover,
body.page-order .checkout-step .continue:hover,
body.page-order .checkout-step button.continue:hover,
body.page-order .checkout-step button[name="confirmDeliveryOption"]:hover,
body.page-order .checkout-step button[name="confirm-addresses"]:hover {
background: #A88A52 !important;
}
body.page-order .checkout-step button[name="continue"]:active,
body.page-order .checkout-step .continue:active,
body.page-order .checkout-step button.continue:active,
body.page-order .checkout-step button[name="confirmDeliveryOption"]:active,
body.page-order .checkout-step button[name="confirm-addresses"]:active {
background: #8E7341 !important;
transform: translateY(1px) !important;
}
/* Step 4 (finalny — 'Złóż zamówienie'): gradient signaling decyzji */
body.page-order #payment-confirmation button[type="submit"],
body.page-order #payment-confirmation .btn-primary {
background: linear-gradient(135deg, #C5A572 0%, #B8975F 100%) !important;
color: white !important;
border: none !important;
border-radius: var(--radius-sm) !important;
padding: 14px 32px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
box-shadow: 0 2px 8px rgba(197, 165, 114, 0.3) !important;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
cursor: pointer !important;
}
body.page-order #payment-confirmation button[type="submit"]:hover,
body.page-order #payment-confirmation .btn-primary:hover {
background: #A88A52 !important;
box-shadow: 0 4px 12px rgba(197, 165, 114, 0.5) !important;
transform: translateY(-1px) !important;
}
body.page-order #payment-confirmation button[type="submit"]:active,
body.page-order #payment-confirmation .btn-primary:active {
background: #8E7341 !important;
transform: translateY(0) !important;
}
/* ============================================== */
/* P0 BUG #4 fix (2026-04-26): /koszyk checkout */
/* CTA — solid gold premium (override v52 czarny */
/* rule — gold od razu, nie tylko hover; spójne */
/* ze step 1-3 CTA na /zamowienie) */
/* ============================================== */
body.page-cart .cart-detailed-actions .btn-primary,
body.page-cart .cart-detailed__actions .btn-primary,
body.page-cart .checkout.cart-detailed-actions .btn-primary,
body.page-cart .js-cart-detailed-actions .btn-primary {
background: var(--color-gold) !important;
background-color: var(--color-gold) !important;
border: none !important;
border-color: var(--color-gold) !important;
color: white !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 14px 28px !important;
border-radius: var(--radius-sm) !important;
width: 100% !important;
display: block !important;
text-align: center !important;
text-decoration: none !important;
transition: background 0.2s ease, transform 0.1s ease !important;
cursor: pointer !important;
box-shadow: none !important;
}
body.page-cart .cart-detailed-actions .btn-primary:hover,
body.page-cart .cart-detailed__actions .btn-primary:hover,
body.page-cart .checkout.cart-detailed-actions .btn-primary:hover,
body.page-cart .js-cart-detailed-actions .btn-primary:hover {
background: #A88A52 !important;
background-color: #A88A52 !important;
border-color: #A88A52 !important;
color: white !important;
}
body.page-cart .cart-detailed-actions .btn-primary:active,
body.page-cart .cart-detailed__actions .btn-primary:active,
body.page-cart .checkout.cart-detailed-actions .btn-primary:active,
body.page-cart .js-cart-detailed-actions .btn-primary:active {
background: #8E7341 !important;
border-color: #8E7341 !important;
transform: translateY(1px) !important;
}
body.page-cart .cart-detailed-actions .btn-primary[disabled],
body.page-cart .cart-detailed-actions .btn-primary.disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Arrow → po PS i18n tekście (zostawiamy translation, dodajemy tylko strzałkę). */
body.page-cart .cart-detailed-actions .btn-primary::after,
body.page-cart .cart-detailed__actions .btn-primary::after {
content: " →";
display: inline;
}
/* ============================================== */
/* PRIMARY CHECKOUT CTA — solid gold (specificity)*/
/* (2026-04-26) */
/* Visual continuity: cart→checkout flow ma jeden */
/* spójny gold baseline; mobile UX ~70%, brak */
/* hover. Mejuri/Otiumberg pattern. */
/* */
/* Selektory matchują REAL DOM (.checkout-step */
/* class nie istnieje — to było dead code). */
/* Specificity 0,2,1: body.page-order + */
/* button[name="..."]. Wygrywa nad line 49 */
/* baseline (.btn-primary, 0,1,0) bez !important. */
/* Step 4 (Place order, #payment-confirmation): */
/* osobny rule wyżej z gradient finality. */
/* ============================================== */
body.page-order button[name="continue"],
body.page-order button[name="confirm-addresses"],
body.page-order button[name="confirmAddresses"],
body.page-order button[name="confirmDeliveryOption"],
body.page-order button[name="confirmPaymentOption"],
body.page-order button.continue {
background: var(--color-gold);
background-color: var(--color-gold);
border: none;
border-color: var(--color-gold);
color: white;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 28px;
border-radius: var(--radius-sm);
transition: background 0.2s ease, transform 0.1s ease;
cursor: pointer;
box-shadow: none;
}
body.page-order button[name="continue"]:hover,
body.page-order button[name="confirm-addresses"]:hover,
body.page-order button[name="confirmAddresses"]:hover,
body.page-order button[name="confirmDeliveryOption"]:hover,
body.page-order button[name="confirmPaymentOption"]:hover,
body.page-order button.continue:hover {
background: #A88A52;
background-color: #A88A52;
border-color: #A88A52;
color: white;
}
body.page-order button[name="continue"]:active,
body.page-order button[name="confirm-addresses"]:active,
body.page-order button[name="confirmAddresses"]:active,
body.page-order button[name="confirmDeliveryOption"]:active,
body.page-order button[name="confirmPaymentOption"]:active,
body.page-order button.continue:active {
background: #8E7341;
background-color: #8E7341;
border-color: #8E7341;
transform: translateY(1px);
}
/* Newsletter stopka — fix bladej czcionki w polu email.
Pokrywa stan domyślny, hover, focus oraz placeholder.
Scoped do .email-subscription — nie dotyka innych pól email w sklepie. */
.email-subscription input[type="email"],
.email-subscription input[type="email"]:hover,
.email-subscription input[type="email"]:focus,
.email-subscription input[type="email"]:active {
color: #1a1a1a !important;
}
.email-subscription input[type="email"]::placeholder {
color: #6c6c6c;
opacity: 1;
}
.email-subscription input[type="email"]::-webkit-input-placeholder {
color: #6c6c6c;
opacity: 1;
}
.email-subscription input[type="email"]::-moz-placeholder {
color: #6c6c6c;
opacity: 1;
}
/* Product availability messages (PDP)
Brand DNA sek 3.B Loss Aversion (uczciwie) — spokojnie, bez czerwonego terroru */
.dm-product-availability {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.2px;
}
.dm-product-availability--in-stock {
color: #1A1A1A;
}
.dm-product-availability--low {
color: #C5A572;
}
.dm-product-availability--oos {
color: #5A5A5A;
}
/* Plan D slide-cart (2026-05-06): "Zmień ilość →" link — kompromis po
9 failed iter in-place stepper. Drawer = read-only summary, /koszyk =
full editor (Mejuri/Otiumberg pattern). Rule w custom.css zamiast
cart-popup.css bo tamten plik ma root ownership na serwerze. */
#dm-slide-cart .dm-sc-item-bottom {
gap: 8px;
flex-wrap: wrap;
}
#dm-slide-cart .dm-sc-qty-edit-link {
font-size: 12px;
color: #C9A84C;
text-decoration: none;
letter-spacing: 0.3px;
padding: 4px 8px;
margin-left: -4px;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
#dm-slide-cart .dm-sc-qty-edit-link:hover,
#dm-slide-cart .dm-sc-qty-edit-link:focus {
color: #1a1a1a;
background: rgba(201, 168, 76, 0.08);
text-decoration: none;
outline: none;
}
@media (max-width: 575px) {
#dm-slide-cart .dm-sc-qty-edit-link {
padding: 10px 12px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* Plan B+ v2 (2026-05-07) — Przelewy24 calculator targeted styling.
DevTools verify: SDK używa rgb() notation (nie hex) dla #810000 border:
"border: 1px solid rgb(129, 0, 0)". Plus #810000 jest TYLKO border (białe bg
zostaje). Rules rozdzielone: border-only vs gradient-only.
SDK colors: #D3343B (cena text), #DF0000+#600606 (gradient badge),
rgb(129,0,0)/#810000 (wrapper border). Brand DNA sek 7 — zakaz czerwonego. */
/* 1. Wrapper border: red rgb(129,0,0)/#810000 → gold. NIE touch background. */
#installment-widget-max .widget-max,
#installment-widget-max [style*="rgb(129, 0, 0)"],
#installment-widget-max [style*="rgb(129,0,0)"],
#installment-widget-max [style*="#810000"] {
border-color: #C9A84C !important;
}
/* 2. Czerwony text (#D3343B) — cena "21,47zł" → gold Brand DNA accent */
#installment-widget-max [style*="#D3343B"],
#installment-widget-max [style*="#d3343b"],
#installment-widget-max [style*="rgb(211, 52, 59)"],
#installment-widget-max [style*="rgb(211,52,59)"] {
color: #C9A84C !important;
}
/* 3. Czerwony gradient (badge "raty") → solid charcoal.
background-image: none required — gradient wygrywa nad solid bez tego. */
#installment-widget-max [style*="linear-gradient"],
#installment-widget-max [style*="#DF0000"],
#installment-widget-max [style*="#df0000"],
#installment-widget-max [style*="#600606"],
#installment-widget-max [style*="rgb(223, 0, 0)"],
#installment-widget-max [style*="rgb(223,0,0)"] {
background: #1a1a1a !important;
background-image: none !important;
}
/* Biały text na badge "raty" (#ffffff) zachowany — readable na charcoal */
/* ============================================
ETS searchbycategory — lupka SVG sizing fix
============================================
blocksearch.css z modułu nie jest loaded (PrestaHero asset config quirk),
więc inline SVG renders 1792×1792px (intrinsic viewBox) zamiast 19×19px,
overflowuje 40px button i wygląda jak pusty gold kwadrat.
Brand DNA: white SVG na gold tle (#C9A84C) — premium readable. */
#search_block_top .button-search svg,
.button-search svg {
width: 16px;
height: 16px;
fill: #ffffff;
vertical-align: middle;
}
#search_block_top .button-search,
.button-search {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================
Material Icons — fix font ligature rendering
============================================
Theme bundle ma .material-icons{font-weight:500} ale Material Icons
font istnieje tylko jako font-weight:400 — browser nie znajduje
glyph dla weight 500 i renderuje raw text "search"/"shopping_cart"
zamiast ikony. Plus brak font-feature-settings:"liga" w niektórych
ścieżkach blokuje ligature substitution.
Naprawia broken ikony: header search trigger, login icon, cart icon,
mobile menu, _mobile_user_info, hreflang account icon. */
.material-icons {
font-family: "Material Icons" !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: "liga" !important;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ============================================
Search trigger SVG — Plan B (font-independent)
============================================
header.tpl:47 ma inline SVG zamiast search
bo Material Icons font zawodzi. Theme bundle ma globalny rule
svg{fill:white!important} który nadpisuje fill="currentColor". Stąd
explicit fill !important + width/height żeby pokonać generic svg rule. */
.header-block__action-btn .dm-search-svg,
.header-block__action-btn svg.dm-search-svg,
svg.dm-search-svg,
.dm-search-svg {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
fill: #1a1a1a !important;
color: #1a1a1a !important;
vertical-align: middle !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
transition: fill 0.2s ease;
}
/* Path-level fill — defense if container fill stripped */
.dm-search-svg path,
.dm-search-svg > path,
svg.dm-search-svg path {
fill: #1a1a1a !important;
}
.header-block__action-btn:hover .dm-search-svg,
.header-block__action-btn:hover svg.dm-search-svg {
fill: #C9A84C !important;
}
.header-block__action-btn:hover .dm-search-svg path,
.header-block__action-btn:hover svg.dm-search-svg path {
fill: #C9A84C !important;
}
/* ============================================
Cart header — fix blue color gdy products_count > 0
============================================
Theme override ps_shoppingcart.tpl zamienia na link
gdy cart > 0 — dziedziczy default Bootstrap blue (#0d6efd).
Brand DNA: charcoal #1A1A1A neutral, gold #C9A84C hover. */
.blockcart a,
.blockcart a *,
#_desktop_cart a,
#_desktop_cart a * {
color: #1A1A1A !important;
text-decoration: none !important;
}
.blockcart a:hover,
.blockcart a:hover *,
#_desktop_cart a:hover,
#_desktop_cart a:hover * {
color: #C9A84C !important;
}
/* ============================================
Newsletter "Subskrybuj" button — Brand DNA
============================================
Bootstrap btn-primary domyślnie #0d6efd niebieski.
Brand DNA: charcoal idle, gold hover, biały tekst. */
.email-subscription input.btn-primary[type="submit"],
form[action*="blockEmailSubscription"] input.btn-primary {
background-color: #1A1A1A !important;
border-color: #1A1A1A !important;
color: #FFFFFF !important;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.email-subscription input.btn-primary[type="submit"]:hover,
form[action*="blockEmailSubscription"] input.btn-primary:hover,
.email-subscription input.btn-primary[type="submit"]:focus,
form[action*="blockEmailSubscription"] input.btn-primary:focus {
background-color: #C9A84C !important;
border-color: #C9A84C !important;
color: #FFFFFF !important;
}
/* ============================================
ETS search submit button (.button-search) — Plan C data:URI
============================================
Po 5 nieudanych iteracjach z inline