/*
* dd-category.css — nowy widok kategorii (port makiety lovable-kategoria).
* Ładowany WYŁĄCZNIE dla kategorii testowych (header.tpl, $dd_new_category_layout).
* Wszystkie reguły są izolowane pod:
* - body.ddc-page (tylko elementy layoutu poza .ddc: kolumny, lewa kolumna)
* - .ddc (cały nowy widok)
* - #category #ddc (nadpisania stylów blocklayered z autoload/cv_custom.css)
*/
/* ------------------------------------------------------------------ tokeny */
.ddc {
--ddc-bg: #fefdfb;
--ddc-fg: #1c1917;
--ddc-fg-75: rgba(28, 25, 23, 0.75);
--ddc-muted: #6b6660;
--ddc-card: #fff;
--ddc-primary: #941114;
--ddc-primary-hover: #7a0e10;
--ddc-primary-8: rgba(148, 17, 20, 0.08);
--ddc-primary-25: rgba(148, 17, 20, 0.25);
--ddc-primary-40: rgba(148, 17, 20, 0.4);
--ddc-product-bg: #f6f2ec;
--ddc-beige: #f5f0e8;
--ddc-beige-deep: #e8dfd0;
--ddc-offwhite: #fbf9f5;
--ddc-border: #e5e0d8;
--ddc-border-soft: rgba(229, 224, 216, 0.6);
--ddc-gold: #c29440;
--ddc-bestseller: #e6c14d;
--ddc-radius: 10px;
--ddc-radius-sm: 6px;
--ddc-shadow-hover: 0 10px 24px -15px rgba(0, 0, 0, 0.18);
--ddc-ink: #15110d;
--ddc-ink-75: rgba(28, 23, 17, 0.75);
--ddc-ink-muted: #625d56;
--ddc-link: #8a0000;
--ddc-font: "Poppins", ui-sans-serif, system-ui, sans-serif;
font-family: var(--ddc-font);
color: var(--ddc-fg);
background: var(--ddc-bg);
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
}
.ddc *,
.ddc *::before,
.ddc *::after {
box-sizing: border-box;
}
/* sklep (cv_custom.css) ustawia letter-spacing .8px na wielu elementach — neutralizacja w obrębie widoku */
#ddc
:where(
p,
a,
span,
strong,
h1,
h2,
h3,
button,
li,
label,
input,
select,
div
) {
letter-spacing: 0;
}
.ddc svg {
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.ddc button {
font-family: inherit;
cursor: pointer;
}
.ddc a {
text-decoration: none;
}
.ddc [hidden] {
display: none !important;
}
.ddc-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* szerokość i marginesy boczne = standardowy #columns.container sklepu (jak na starym widoku) */
.ddc-container {
width: 100%;
}
/* tło sekcji na całą szerokość ekranu bez zmiany szerokości treści */
.ddc-hero,
.ddc-seo,
.ddc-guides {
box-shadow: 0 0 0 100vmax var(--ddc-section-bg);
clip-path: inset(0 -100vmax);
}
.ddc-hero,
.ddc-seo {
--ddc-section-bg: var(--ddc-offwhite);
}
.ddc-guides {
--ddc-section-bg: var(--ddc-bg);
}
/* ------------------------------------------------------- layout strony */
body.ddc-page {
overflow-x: clip;
}
body.ddc-page #center_column {
width: 100%;
float: none;
}
body.ddc-page #left_column {
display: none !important;
}
body.ddc-page .columns-container {
background: #fefdfb;
}
body.ddc-page.ddc-lock {
overflow: hidden;
/* samo overflow:hidden nie zatrzymuje touchmove/rubber-band na iOS Safari —
touch-action:none na tle blokuje przewijanie strony pod otwartym panelem;
pan-y z powrotem włączony tylko w scrollowalnej treści samego panelu
(patrz .ddc-filterpanel__body / .ddc-subcatpanel__body) */
touch-action: none;
}
/* ------------------------------------------------------------ wspólne */
.ddc-eyebrow {
margin: 0 0 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: var(--ddc-primary);
}
#ddc .ddc-eyebrow--wide {
letter-spacing: 0.22em;
}
.ddc-h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
line-height: 1.25;
color: var(--ddc-fg);
text-transform: none;
}
@media (min-width: 768px) {
.ddc-h2 {
font-size: 24px;
}
}
.ddc-more {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border: 0;
background: none;
color: var(--ddc-primary);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
}
.ddc-hero .ddc-more {
color: var(--ddc-link);
line-height: 19.5px;
}
.ddc-more:hover {
text-decoration: underline;
}
.ddc-more svg {
width: 14px;
height: 14px;
transition: transform 0.2s;
}
.ddc-more[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.ddc-more--strong {
margin-top: 12px;
min-height: 44px;
font-size: 13.5px;
font-weight: 600;
}
.ddc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 28px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
border: 1px solid transparent;
transition:
background-color 0.15s,
color 0.15s,
border-color 0.15s;
}
.ddc-btn--primary {
background: var(--ddc-primary);
color: #fff;
}
.ddc-btn--primary:hover {
background: var(--ddc-primary-hover);
}
.ddc-btn--ghost {
background: #fff;
border-color: var(--ddc-border);
color: var(--ddc-fg);
}
.ddc-btn--outline {
background: #fff;
border-color: rgba(148, 17, 20, 0.3);
color: var(--ddc-primary);
}
.ddc-btn--outline:hover {
background: var(--ddc-primary);
color: #fff;
}
.ddc-icon-btn {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--ddc-fg);
}
.ddc-icon-btn svg {
width: 18px;
height: 18px;
}
.ddc-icon-btn--border {
border: 1px solid var(--ddc-border);
background: #fff;
}
.ddc-icon-btn--border:hover:not(:disabled) {
background: var(--ddc-fg);
border-color: var(--ddc-fg);
color: #fff;
}
.ddc-icon-btn:disabled {
opacity: 0.25;
cursor: default;
}
/* ================================================================ HERO */
.ddc-hero {
background: var(--ddc-offwhite);
border-bottom: 1px solid var(--ddc-border-soft);
padding: 12px 0;
}
@media (min-width: 1024px) {
.ddc-hero {
padding: 20px 0;
}
}
/* Breadcrumb — breadcrumb.tpl bez zmian, tylko restyling */
.ddc-breadcrumb {
margin-bottom: 10px;
font-size: 12px;
color: var(--ddc-ink-muted);
}
.ddc-breadcrumb .breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
font-size: 12px;
line-height: 16px;
min-height: 0;
text-transform: none;
}
.ddc-breadcrumb .breadcrumb::before,
.ddc-breadcrumb .breadcrumb::after {
display: none;
}
.ddc-breadcrumb .breadcrumb a {
display: inline-block;
padding: 0;
margin: 0;
color: var(--ddc-ink-muted);
font-size: 12px;
font-weight: 400;
line-height: 16px;
background: none;
}
.ddc-breadcrumb .breadcrumb a::before,
.ddc-breadcrumb .breadcrumb a::after {
display: none;
}
.ddc-breadcrumb .breadcrumb a:hover {
color: var(--ddc-primary);
}
.ddc-breadcrumb .breadcrumb .navigation-pipe {
display: inline-block;
width: 12px;
height: 12px;
margin: 0;
font-size: 0;
color: transparent;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")
center / 12px no-repeat;
}
.ddc-breadcrumb .breadcrumb .navigation_page {
color: var(--ddc-ink);
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.ddc-breadcrumb .breadcrumb .navigation_page a {
color: var(--ddc-ink-muted);
font-weight: 400;
}
.ddc-hero__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
max-width: 768px;
}
#ddc .ddc-hero__title {
margin: 0;
padding: 0;
font-family: var(--ddc-font);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.0265em;
color: var(--ddc-ink);
text-transform: none;
text-align: left;
}
@media (min-width: 1024px) {
#ddc .ddc-hero__title {
font-size: 34px;
}
}
/* Nazwy kategorii są w bazie WIELKIMI LITERAMI. dd-category.js przepisuje je przez
ncTitleCase (z wyjątkami: LED, marki...) i dodaje .ddc-cased; do tego momentu
CSS daje „Pierwsza wielka, reszta mała”, żeby nie mignęły wielkie litery. */
#ddc:not(.ddc-cased) .ddc-hero__title,
#ddc:not(.ddc-cased) .ddc-breadcrumb .breadcrumb a,
#ddc:not(.ddc-cased) .ddc-breadcrumb .navigation_page,
#ddc:not(.ddc-cased) .ddc-subcat__name,
#ddc:not(.ddc-cased) .ddc-subcatgrid__name {
text-transform: lowercase;
}
#ddc:not(.ddc-cased) .ddc-hero__title::first-letter,
#ddc:not(.ddc-cased) .ddc-breadcrumb .breadcrumb a::first-letter,
#ddc:not(.ddc-cased) .ddc-breadcrumb .navigation_page::first-letter,
#ddc:not(.ddc-cased) .ddc-subcat__name::first-letter,
#ddc:not(.ddc-cased) .ddc-subcatgrid__name::first-letter {
text-transform: uppercase;
}
.ddc-rating {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: var(--ddc-ink);
}
.ddc-rating strong {
color: var(--ddc-ink);
font-weight: 600;
}
.ddc-stars {
display: inline-flex;
color: var(--ddc-gold);
}
.ddc .ddc-stars svg,
.ddc .ddc-star-single {
width: 12px;
height: 12px;
fill: currentColor;
stroke: none;
color: var(--ddc-gold);
}
.ddc-rating--desktop {
display: none;
}
@media (min-width: 640px) {
.ddc-rating--desktop {
display: inline-flex;
}
.ddc-rating--mobile {
display: none;
}
}
.ddc-hero__desc {
max-width: 768px;
margin-top: 8px;
font-size: 14px;
font-weight: 400;
line-height: 23.6px;
color: var(--ddc-ink-75);
}
.ddc-hero__desc p,
.ddc-hero__desc div,
.ddc-hero__desc span {
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
font-family: inherit !important;
}
.ddc-hero__desc p {
margin: 0 0 8px;
}
.ddc-hero__desc p:last-child {
margin-bottom: 0;
}
.ddc-hero__desc h2,
.ddc-hero__desc h3 {
font-size: 15px;
font-weight: 600;
margin: 12px 0 4px;
color: var(--ddc-fg);
}
.ddc-hero__desc.is-clamped {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ddc-hero__desc.is-clamped > * {
display: inline;
margin: 0;
}
.ddc-hero__desc.is-clamped > *::after {
content: " ";
}
.ddc-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 4px;
min-height: 20px;
}
/* ========================================================= PODKATEGORIE */
.ddc-subcats {
position: relative;
padding-top: 8px;
}
@media (min-width: 1024px) {
.ddc-subcats {
padding-top: 12px;
}
}
.ddc-subcats__rail {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 8px;
scrollbar-width: none;
-ms-overflow-style: none;
margin-right: -15px;
padding-right: 15px;
}
.ddc-subcats__rail::-webkit-scrollbar {
display: none;
}
/* desktop: gdy podkategorii jest więcej niż mieści się w rzędzie, oprócz strzałek (prev/next)
da się też złapać i przeciągnąć myszką — initDragScroll w dd-category.js, ten sam mechanizm
co pasek wariantów kolorów na karcie (.ddc-card__variants .xsell-container). */
@media (hover: hover) and (pointer: fine) {
.ddc-subcats__rail {
cursor: grab;
}
.ddc-subcats__rail.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
}
/* przeglądarka domyślnie pozwala "przeciągnąć" obrazek (ghost-drag) — koliduje z drag-scrollem
powyżej; initDragScroll tłumi sam dragstart w JS, to tylko dodatkowe zabezpieczenie w CSS */
.ddc-subcat__img img {
-webkit-user-drag: none;
user-drag: none;
}
/* mobile = jak slider produktowy (#similiar_products, Swiper 7 w scripts.tpl): ucięty kafel na
krawędzi BEZ wygaszania (mask-image wyciął), odstęp 10px, widoczne ~2.5 kafla, cienki pasek
przewijania pod spodem. Szerokość kafla liczona od szerokości kontenera (rail ma -15px marginesy
i 15px paddingu z obu stron, więc jego treść = szerokość .ddc-container). */
@media (max-width: 767px) {
.ddc-subcats__rail {
margin-left: -15px;
padding-left: 15px;
padding-right: 15px;
gap: 10px;
scroll-snap-type: none; /* free scroll — bez przyciągania do kafli (jak slider produktu) */
scrollbar-width: thin;
scrollbar-color: rgba(28, 25, 23, .35) transparent;
}
.ddc-subcats__rail::-webkit-scrollbar { display: block; height: 4px; }
.ddc-subcats__rail::-webkit-scrollbar-track { background: transparent; }
.ddc-subcats__rail::-webkit-scrollbar-thumb { background: rgba(28, 25, 23, .35); border-radius: 999px; }
.ddc-subcats__rail .ddc-subcat { width: calc((100% - 20px) / 2.5); max-width: none; }
}
.ddc-subcat {
flex: 0 0 auto;
width: 42vw;
max-width: 170px;
scroll-snap-align: start;
color: var(--ddc-fg);
}
@media (min-width: 768px) {
.ddc-subcat {
width: calc((100% - 6 * 12px) / 6.5);
max-width: none;
text-align: center;
}
}
@media (min-width: 1024px) {
.ddc-subcat {
width: calc((100% - 7 * 12px) / 7.5);
}
}
@media (min-width: 1280px) {
.ddc-subcat {
width: calc((100% - 8 * 12px) / 8.5);
}
}
.ddc-subcat__img {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 12px;
background: var(--ddc-beige);
border: 1px solid var(--ddc-border-soft);
transition:
border-color 0.3s,
box-shadow 0.3s;
}
@media (min-width: 768px) {
.ddc-subcat__img {
aspect-ratio: auto;
height: 150px;
}
}
@media (min-width: 1024px) {
.ddc-subcat__img {
height: 160px;
}
}
@media (min-width: 1280px) {
.ddc-subcat__img {
height: 170px;
}
}
.ddc-subcat__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ddc-subcat:hover .ddc-subcat__img {
border-color: var(--ddc-primary-40);
box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.25);
}
/* bez zoomu zdjęcia przy najechaniu (efekt z makiety Lovable — świadomie nieużywany) */
.ddc-subcat__name {
display: block;
margin-top: 8px;
font-size: 12px;
font-weight: 500;
line-height: 17.2px;
color: var(--ddc-ink);
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.2s;
}
.ddc-subcat:hover .ddc-subcat__name {
color: var(--ddc-primary);
}
.ddc-subcat__count {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 400;
line-height: 11px;
color: var(--ddc-ink-muted);
}
.ddc-rail-arrow {
position: absolute;
top: 87px;
z-index: 5;
display: none;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
transform: translateY(-50%);
border: 1px solid var(--ddc-border);
border-radius: 6px;
background: rgba(254, 253, 251, 0.95);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
color: var(--ddc-fg);
transition:
background-color 0.2s,
color 0.2s;
}
.ddc-rail-arrow svg {
width: 16px;
height: 16px;
}
.ddc-rail-arrow:hover {
background: var(--ddc-primary);
border-color: var(--ddc-primary);
color: #fff;
}
.ddc-rail-arrow--prev {
left: 12px;
}
.ddc-rail-arrow--next {
right: 12px;
}
@media (min-width: 768px) {
.ddc-rail-arrow:not([hidden]) {
display: grid;
}
}
@media (min-width: 1024px) {
.ddc-rail-arrow {
top: 94px;
}
.ddc-rail-arrow--prev {
left: 20px;
}
.ddc-rail-arrow--next {
right: 20px;
}
}
/* „Zobacz wszystkie (N)” — tylko mobile, otwiera ddc-subcatpanel (bottom sheet) */
.ddc-subcats__head {
display: none;
}
@media (max-width: 767px) {
.ddc-subcats__head {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.ddc-subcats__seeall {
padding: 0;
font-size: 12px;
font-weight: 500;
color: var(--ddc-primary);
background: none;
border: none;
}
.ddc-subcats__seeall:hover,
.ddc-subcats__seeall:active {
text-decoration: underline;
}
}
/* Panel „Wszystkie podkategorie” — bottom sheet, jak ddc-filterpanel, tylko mobile */
.ddc-subcatpanel {
display: none;
}
@media (max-width: 767px) {
.ddc-subcatpanel {
display: flex;
position: fixed;
inset: auto 0 0 0;
z-index: 5005;
flex-direction: column;
max-height: 85vh;
background: var(--ddc-bg);
border-radius: 16px 16px 0 0;
transform: translateY(100%);
visibility: hidden;
transition:
transform 0.22s ease-out,
visibility 0.22s;
}
.ddc-subcatpanel.is-open {
transform: translateY(0);
visibility: visible;
}
.ddc-subcatpanel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--ddc-border);
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--ddc-ink);
}
.ddc-subcatpanel__body {
flex: 1;
overflow-y: auto;
touch-action: pan-y;
padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px));
overscroll-behavior: contain;
}
.ddc-subcatgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ddc-subcatgrid__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border: 1px solid var(--ddc-border-soft);
border-radius: 10px;
color: var(--ddc-fg);
}
.ddc-subcatgrid__img {
display: block;
flex: 0 0 auto;
width: 48px;
height: 48px;
overflow: hidden;
border-radius: 8px;
background: var(--ddc-beige);
}
.ddc-subcatgrid__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ddc-subcatgrid__text {
min-width: 0;
}
.ddc-subcatgrid__name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 13px;
font-weight: 500;
line-height: 16.3px;
color: var(--ddc-ink);
}
.ddc-subcatgrid__count {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 400;
line-height: 16.5px;
color: var(--ddc-ink-muted);
}
}
/* ============================================================== TOOLBAR */
.ddc-toolbar {
margin-top: 24px;
scroll-margin-top: 90px;
}
@media (min-width: 1024px) {
.ddc-toolbar {
margin-top: 32px;
}
}
.ddc-filterbox {
position: relative;
}
@media (min-width: 768px) {
.ddc-filterbox {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
padding: 12px;
border-radius: 12px;
background: var(--ddc-offwhite);
border: 1px solid rgba(229, 224, 216, 0.5);
}
.ddc-filterpanel {
flex: 1 1 0;
min-width: 0;
}
.ddc-countsort {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
align-self: stretch;
padding-left: 12px;
border-left: 1px solid var(--ddc-border-soft);
}
.ddc-chips {
flex: 1 0 100%;
padding-top: 12px;
border-top: 1px solid rgba(229, 224, 216, 0.5);
}
}
@media (min-width: 1024px) {
.ddc-filterbox {
padding: 14px;
}
}
.ddc-count {
margin: 0;
font-size: 13.5px;
line-height: 1.2;
color: var(--ddc-muted);
white-space: nowrap;
}
.ddc-count strong {
color: var(--ddc-fg);
font-weight: 600;
}
/* Sortowanie — natywny .selectProductSort (czytany przez blocklayered.js);
działa z i bez pluginu uniform (div.selector > span + select) */
.ddc-sort {
position: relative;
}
.ddc-sort__btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 14px;
border: 1px solid var(--ddc-border);
border-radius: 8px;
background: #fff;
font: 500 14px/1 var(--ddc-font);
color: var(--ddc-fg);
white-space: nowrap;
transition: border-color 0.15s;
}
.ddc-sort__btn:hover,
.ddc-sort__btn[aria-expanded="true"] {
border-color: rgba(148, 17, 20, 0.5);
}
.ddc-sort__label {
color: var(--ddc-muted);
font-weight: 400;
}
.ddc-sort__value {
font-weight: 500;
}
.ddc-sort__chev {
width: 14px !important;
height: 14px !important;
}
.ddc-sort__native {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.ddc-sort__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
width: 224px;
padding: 4px;
background: #fff;
border: 1px solid var(--ddc-border);
border-radius: 6px;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.ddc-sort__menuhead {
display: none;
}
.ddc-sort__opt {
display: block;
width: 100%;
padding: 8px 12px;
border: 0;
border-radius: 4px;
background: none;
text-align: left;
font: 400 14px/1.4 var(--ddc-font);
color: var(--ddc-fg);
}
.ddc-sort__opt:hover {
background: var(--ddc-product-bg);
}
.ddc-sort__opt[aria-selected="true"] {
color: var(--ddc-primary);
font-weight: 600;
}
/* ---------- Filtry (blocklayered) jako pigułki ---------- */
#category #ddc #layered_block_left {
margin: 0;
padding: 0;
border: 0;
background: none;
}
#category #ddc #layered_block_left .block_content {
display: block !important;
padding: 0;
margin: 0;
border: 0;
}
#category #ddc #layered_form {
margin: 0;
}
#category #ddc #layered_form > div,
#category #ddc #layered_form ul {
box-sizing: border-box;
}
#category #ddc .category_filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
max-width: 100%;
flex-direction: row;
}
#category #ddc .layered_filter,
#category #ddc .layered_price,
#category #ddc .layered_weight {
position: relative;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
float: none;
width: auto;
}
#category #ddc .layered_subtitle_heading {
margin: 0;
padding: 0;
border: 0;
background: none;
}
#category #ddc .layered_filter .layered_subtitle,
#category #ddc .layered_price .layered_subtitle,
#category #ddc .layered_weight .layered_subtitle {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 12px 0 14px;
border: 1px solid rgba(229, 224, 216, 0.8);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
font: 500 13px/1 var(--ddc-font);
color: var(--ddc-fg);
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
float: none;
cursor: pointer;
user-select: none;
transition: border-color 0.15s;
}
/* tylko mysz — na dotyku tap otwierający dropdown/akordeon potrafi "przykleić" :hover do
elementu pod palcem (tu: pierwsza opcja listy, bo akurat tam ląduje po rozwinięciu),
zgłoszone na filtrze Styl (sama z siebie podświetlona „Nowoczesny” po samym tapnięciu
w pigułkę) */
@media (hover: hover) and (pointer: fine) {
#category #ddc .layered_subtitle:hover {
border-color: rgba(148, 17, 20, 0.5);
color: var(--ddc-fg);
}
}
#category #ddc .layered_filter .layered_subtitle::after,
#category #ddc .layered_price .layered_subtitle::after,
#category #ddc .layered_weight .layered_subtitle::after {
content: "";
display: block;
width: 14px;
height: 14px;
margin: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
center / 14px no-repeat;
transition: transform 0.2s;
}
#category #ddc .filter_show .layered_subtitle {
border-color: rgba(148, 17, 20, 0.6);
}
#category #ddc .filter_show .layered_subtitle::after {
transform: rotate(180deg);
}
#category #ddc .ddc-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--ddc-primary);
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 1;
}
/* dropdown */
#category #ddc .layered_filter ul.layered_filter_ul,
#category #ddc .layered_price ul.layered_filter_ul,
#category #ddc .layered_weight ul.layered_filter_ul {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 60;
float: none;
display: block;
width: 288px;
min-width: 0;
max-height: 320px;
overflow-y: auto;
margin: 0;
padding: 12px;
list-style: none;
background: #fff;
border: 1px solid var(--ddc-border);
border-radius: 10px;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.22);
visibility: visible;
opacity: 1;
transition:
opacity 0.15s,
visibility 0.15s;
}
#category #ddc .filter_hidden ul.layered_filter_ul {
visibility: hidden;
opacity: 0;
pointer-events: none;
display: block;
}
#category #ddc .layered_filter_ul li {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
float: none;
margin: 0;
padding: 8px 8px;
border-radius: 6px;
list-style: none;
font: 400 13px/1.3 var(--ddc-font);
color: var(--ddc-fg);
}
@media (hover: hover) and (pointer: fine) {
#category #ddc .layered_filter_ul li:hover {
background: var(--ddc-beige);
}
}
#category #ddc .layered_filter_ul li label {
flex: 1;
display: flex;
margin: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
#category #ddc .layered_filter_ul li label a {
flex: 1;
display: flex;
justify-content: space-between;
gap: 8px;
color: var(--ddc-fg);
font: inherit;
}
#category #ddc .layered_filter_ul li label a span,
#category #ddc .layered_filter_ul li label > span {
color: var(--ddc-muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
#category #ddc .layered_filter_ul li label.disabled {
color: #b5afa7;
cursor: default;
}
#category #ddc .layered_filter_ul input[type="checkbox"],
#category #ddc .layered_filter_ul input[type="radio"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--ddc-primary);
cursor: pointer;
}
#category #ddc .layered_filter_ul .checker,
#category #ddc .layered_filter_ul .radio {
flex: 0 0 auto;
margin: 0;
float: none;
}
#category #ddc .layered_filter_ul input.color-option {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
border: 1px solid var(--ddc-border);
border-radius: 4px;
box-shadow: inset 0 0 0 2px #fff;
cursor: pointer;
}
#category #ddc .layered_filter_ul input.color-option.on {
border-color: var(--ddc-primary);
box-shadow:
inset 0 0 0 2px #fff,
0 0 0 1px var(--ddc-primary);
}
#category #ddc .layered_filter_ul .hide-action {
display: block;
width: 100%;
margin-top: 6px;
padding: 6px 8px;
font-size: 12px;
color: var(--ddc-primary);
cursor: pointer;
}
#category #ddc .layered_filter_ul select.select {
width: 100%;
}
/* cena */
#category #ddc .layered_price ul.layered_filter_ul {
width: 300px;
padding: 16px;
}
#category #ddc .layered_price ul li {
padding: 0;
background: none;
display: block;
}
#category #ddc #layered_price_range {
display: block;
margin-bottom: 12px;
font-size: 12px;
color: var(--ddc-muted);
}
#category #ddc .layered_slider_container {
margin: 6px 8px 8px;
}
#category #ddc .layered_slider.ui-slider {
height: 4px;
border: 0;
border-radius: 999px;
background: var(--ddc-border);
}
#category #ddc .layered_slider .ui-slider-range {
background: var(--ddc-primary);
}
#category #ddc .layered_slider .ui-slider-handle {
top: -7px;
width: 18px;
height: 18px;
margin-left: -9px;
border: 2px solid var(--ddc-primary);
border-radius: 50%;
background: #fff;
cursor: grab;
}
#category #ddc .layered_price input.layered_input_range {
height: 36px;
border: 1px solid var(--ddc-border);
border-radius: 6px;
font-size: 13px;
}
/* ukryte elementy modułu w nowym widoku (zastępują je chipy / stopka panelu) */
#category #ddc #enabled_filters,
#category #ddc .mobile_filters_buttons,
#category #ddc #layered_ajax_loader,
#category #ddc #layered_block_left > .close_button {
display: none !important;
}
/* ---------- aktywne filtry (chipy) ---------- */
.ddc-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.ddc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid rgba(232, 223, 208, 0.6);
border-radius: 6px;
background: var(--ddc-beige);
font: 500 12px/1.4 var(--ddc-font);
color: var(--ddc-fg);
transition: background-color 0.15s;
}
.ddc-chip:hover {
background: rgba(232, 223, 208, 0.4);
}
.ddc-chip svg {
width: 12px;
height: 12px;
}
.ddc-chips__clear {
padding: 0;
margin-left: 4px;
border: 0;
background: none;
font: 400 12px/1.4 var(--ddc-font);
color: var(--ddc-primary);
}
.ddc-chips__clear:hover {
text-decoration: underline;
}
/* ---------- mobile: Filtry + skróty + bottom sheet ---------- */
.ddc-mobilebar {
display: none;
}
.ddc-filterpanel__head,
.ddc-filterpanel__foot,
.ddc-panel-backdrop {
display: none;
}
.ddc-listing.ddc-container {
margin-top: 20px !important;
}
@media (max-width: 767px) {
.ddc-mobilebar {
display: flex;
align-items: center;
gap: 8px;
}
.ddc-listing.ddc-container {
margin-top: 8px !important;
}
.ddc-filters-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: var(--ddc-fg);
color: #fff;
font-size: 13px;
font-weight: 600;
}
.ddc-filters-btn svg {
width: 16px;
height: 16px;
}
.ddc-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--ddc-primary);
color: #fff;
font-size: 10px;
}
.ddc-quick {
flex: 1;
min-width: 0;
display: flex;
gap: 6px;
overflow-x: auto;
margin-right: -15px;
padding-right: 15px;
scrollbar-width: none;
}
.ddc-quick::-webkit-scrollbar {
display: none;
}
.ddc-quick__btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
height: 36px;
padding: 0 12px;
border: 1px solid var(--ddc-border);
border-radius: 8px;
background: #fff;
color: var(--ddc-fg);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.ddc-quick__btn svg {
width: 14px;
height: 14px;
opacity: 0.6;
}
.ddc-quick__btn.is-active {
border-color: rgba(148, 17, 20, 0.5);
background: var(--ddc-primary-8);
color: var(--ddc-primary);
}
.ddc-filterbox {
display: flex;
flex-direction: column;
}
.ddc-countsort {
order: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
}
.ddc-count {
font-size: 13px;
}
.ddc-sort__btn {
height: auto;
padding: 0;
gap: 4px;
border: 0;
background: none;
font-size: 13px;
}
/* sortowanie na mobile = bottom sheet (MobileSortSheet z makiety) */
.ddc-sort__menu {
position: fixed;
inset: auto 0 0 0;
top: auto;
width: auto;
z-index: 5005;
padding: 0 0 8px;
border: 0;
border-radius: 16px 16px 0 0;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}
.ddc-sort__menuhead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--ddc-border);
font-size: 16px;
font-weight: 600;
}
.ddc-sort__options {
padding: 8px;
}
.ddc-sort__opt {
padding: 14px 16px;
border-radius: 8px;
font-size: 15px;
}
.ddc-chips {
order: 2;
margin-top: 8px;
}
.ddc-chips:empty {
display: none;
}
.ddc-filterpanel {
position: fixed;
inset: auto 0 0 0;
z-index: 5005;
display: flex;
flex-direction: column;
max-height: 90vh;
background: var(--ddc-bg);
border-radius: 16px 16px 0 0;
transform: translateY(100%);
visibility: hidden;
transition:
transform 0.22s ease-out,
visibility 0.22s;
}
.ddc-filterpanel.is-open {
transform: translateY(0);
visibility: visible;
}
.ddc-filterpanel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--ddc-border);
font-size: 16px;
font-weight: 600;
}
.ddc-filterpanel__body {
flex: 1;
overflow-y: auto;
touch-action: pan-y;
padding: 0 20px;
overscroll-behavior: contain;
}
.ddc-filterpanel__foot {
display: flex;
gap: 12px;
padding: 16px;
border-top: 1px solid var(--ddc-border);
background: var(--ddc-bg);
}
.ddc-filterpanel__foot .ddc-btn {
flex: 1;
padding-inline: 12px;
}
.ddc-filterpanel__foot .ddc-btn--primary {
flex: 1.5;
}
.ddc-panel-backdrop:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 5004;
background: rgba(28, 25, 23, 0.4);
}
/* nad #header sklepu (global.css: #header { z-index: 5003 }) — przyciemnienie ma przykryć też nagłówek */
/* pigułki -> akordeon w panelu */
#category #ddc .category_filters {
display: block;
}
#category #ddc .layered_filter,
#category #ddc .layered_price,
#category #ddc .layered_weight {
display: block;
border-bottom: 1px solid var(--ddc-border);
scroll-margin-top: 8px;
}
#category #ddc .layered_filter .layered_subtitle,
#category #ddc .layered_price .layered_subtitle,
#category #ddc .layered_weight .layered_subtitle {
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
padding: 14px 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
font-size: 14px;
font-weight: 600;
}
#category #ddc .layered_subtitle .ddc-pill-count {
margin-right: auto;
}
#category #ddc .layered_filter ul.layered_filter_ul,
#category #ddc .layered_price ul.layered_filter_ul,
#category #ddc .layered_weight ul.layered_filter_ul {
position: static;
width: 100%;
max-height: none;
padding: 0 0 12px;
border: 0;
box-shadow: none;
overflow: visible;
}
#category #ddc .filter_hidden ul.layered_filter_ul {
display: none;
}
#category #ddc .layered_filter_ul li {
padding: 8px 4px;
font-size: 14px;
}
}
/* ============================================================== LISTING */
/* .ddc-listing {
margin-top: 16px;
} */
.ddc .product-list-container {
position: relative;
}
.ddc .cv-loading-overlay {
position: absolute;
inset: 0;
z-index: 5;
/* lżejsze krycie (było 0.6) i pojawianie się zamiast skoku: animacja odpala się,
gdy blocklayered ustawia display (jQuery .show()), bez zmian w JS */
background: rgba(254, 253, 251, 0.3);
pointer-events: none;
animation: ddc-overlay-in 0.2s ease-out;
}
@keyframes ddc-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* „Pokaż poprzednie produkty” (pagination-top.tpl, dzielony ze starą kartą kategorii) —
w praktyce martwy przycisk: blocklayered.js nigdy nie zapisuje numeru strony w URL
(brak pushState/replaceState), a żaden szablon nie generuje linków z &p=2+, więc $p
zawsze wynosi 1 i ten przycisk nigdy nie ma się kiedy pokazać przy normalnym
przeglądaniu. Chowamy go WYŁĄCZNIE na #ddc przez CSS (nie ruszamy dzielonego
pagination-top.tpl/blocklayered.js — stara karta zostaje bez zmian) — !important,
bo JS tego samego pliku w niektórych ścieżkach robi .show() na tym elemencie. */
.ddc .cv-pagination-top {
display: none !important;
}
/* Opis SEO kategorii (x13extracatdesc) znika po doładowaniu kolejnej strony — moduł
chowa #extra_category_description na hashchange, gdy hash zawiera "/page-N" dla N>1
(patrz override/.../x13extracatdesc/.../category.tpl). Sensowne przy klasycznej,
numerowanej paginacji (inna "strona" = inny adres), ale na #ddc "load more" tylko
dokleja produkty do TEJ SAMEJ, ciągłej strony — blocklayered.js i tak dopisuje do
hasha "/page-N" przy każdym doładowaniu (ten sam mechanizm co przy zwykłych
filtrach, patrz komentarz przy --ddc-search-h w dd-category.js), więc bez tego opis
znikałby za każdym razem, gdy użytkownik przewinie więcej niż jedną "stronę" w dół —
myląco, bo cały czas ogląda tę samą stronę. !important, bo moduł chowa go przez
inline style="display:none" (JS .hide()), nie przez klasę. */
#ddc #extra_category_description {
display: block !important;
}
#extra_category_description {
margin-bottom: 0 !important;
}
#category #ddc ul.ddc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
opacity: 1;
}
#category #ddc ul.ddc-grid::before,
#category #ddc ul.ddc-grid::after {
display: none;
}
@media (min-width: 768px) {
#category #ddc ul.ddc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
}
@media (min-width: 1024px) {
#category #ddc ul.ddc-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
#category #ddc ul.ddc-grid > li {
position: relative;
display: flex;
float: none;
width: auto;
min-width: 0;
height: auto;
margin: 0;
padding: 0;
list-style: none;
border: 0;
background: none;
content-visibility: auto;
contain-intrinsic-size: auto 420px;
}
#category #ddc ul.ddc-grid > li.ddc-grid__banner {
grid-column: 1 / -1;
display: block;
}
/* ---------- karta ---------- */
.ddc-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
overflow: hidden;
background: var(--ddc-card);
border: 1px solid rgba(229, 224, 216, 0.5);
border-radius: 8px;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
/* tylko mysz — na dotyku tapnięcie w kartę (np. przy przewijaniu zdjęć) potrafiło
"przykleić" bordową ramkę hover, bo dotyk nie ma realnego mouseleave */
@media (hover: hover) and (pointer: fine) {
.ddc-card:hover {
border-color: var(--ddc-primary-40);
box-shadow: var(--ddc-shadow-hover);
}
}
.ddc-card__media {
position: relative;
background: var(--ddc-product-bg);
/* padding-top: 30px; */
}
.ddc-card__badges {
position: absolute;
top: 8px;
left: 8px;
z-index: 3;
display: flex;
gap: 6px;
}
#ddc .ddc-badge-bestseller {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
background: var(--ddc-fg);
color: var(--ddc-bestseller);
font-size: 10px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
/* wishlist (nxtalwishlist) — przycisk w kafelku 36x36 */
.ddc-card__wish {
position: absolute;
top: 2px;
right: 2px;
z-index: 4;
}
.ddc-card__wish .wishlist {
margin: 0;
padding: 0;
}
/* a.addToWishlist (blockwishlist_button.tpl) jest pusty — ikona serca rysowana w ::before (mask = currentColor);
pole klikalne 44x44, widoczny kafelek 36x36 */
#ddc .ddc-card__wish .addToWishlist {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
background: none;
border: 0;
color: var(--ddc-muted);
font-size: 0;
}
#ddc .ddc-card__wish .addToWishlist::after {
content: "";
position: absolute;
inset: 4px;
border: 1px solid rgba(229, 224, 216, 0.6);
border-radius: 6px;
background: rgba(246, 242, 236, 0.9);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
transition: border-color 0.15s;
}
#ddc .ddc-card__wish .addToWishlist::before {
content: "";
position: relative;
z-index: 1;
display: block;
width: 16px;
height: 16px;
margin: 0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E")
center / 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E")
center / 16px no-repeat;
transition: color 0.15s;
}
#ddc .ddc-card__wish .addToWishlist:hover {
color: var(--ddc-primary);
}
#ddc .ddc-card__wish .addToWishlist:hover::after,
#ddc .ddc-card__wish .addToWishlist.checked::after {
border-color: var(--ddc-primary-40);
}
#ddc .ddc-card__wish .addToWishlist.checked {
color: var(--ddc-primary);
}
#ddc .ddc-card__wish .addToWishlist.checked::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
}
/* galeria: desktop = crossfade, touch = scroll-snap swipe */
.ddc-card__track {
position: relative;
aspect-ratio: 350 / 435;
width: 100%;
overflow: hidden;
}
.ddc-card__slide {
position: absolute;
inset: 0;
display: block;
opacity: 0;
transition: opacity 0.3s;
/* tło musi być na slajdzie: .ddc-card__slide tworzy kontekst układania (position + z-index),
więc mix-blend-mode na zdjęciu miesza się tylko z jego tłem — bez tego darken nic nie zmienia */
background: var(--ddc-product-bg);
}
.ddc-card__slide.is-active {
opacity: 1;
z-index: 1;
}
/* zanim initCard() dojdzie do tej karty w kolejce idle (dd-category.js, drainCardQueue) —
pierwszy slajd ma być widoczny od razu, nie dopiero po JS. [data-ddc-ready] (ustawiane
na starcie initCard) wyłącza tę regułę i oddaje sterowanie .is-active. */
.ddc-card:not([data-ddc-ready]) .ddc-card__slide:first-child {
opacity: 1;
}
/* jak na starej karcie (autoload/cv_custom.css .product-thumbnail-slider .slick-slide .slide img) */
.ddc-card__img {
display: block;
width: 100%;
max-width: unset;
height: auto;
aspect-ratio: 350 / 435;
object-fit: cover;
object-position: center;
mix-blend-mode: darken;
}
/* auto-crop (dd-category.js 5b, NCImageCrop) jako DOGRYWKA, nie bramka widoczności:
wcześniej cały .ddc-card__img był chowany (opacity:0) aż do końca przetwarzania
canvasem — przy 20+ kartach na stronie to zauważalne opóźnienie pierwszego
wyświetlenia. Teraz oryginał jest widoczny od razu (jak na starej karcie,
autoload/cv_custom.css .product-thumbnail-slider .slick-slide .slide img) —
mix-blend-mode: multiply z reguły .ddc-card__img wyżej już samo rozmywa
(prawie-)białe tło zdjęcia w tło kafla, bez czekania na JS. Gdy canvas
skończy pracę, .ddc-card__crop (niżej) pojawia się NAD oryginałem z już
dopracowanym przemalowaniem (miękkie cienie, zamknięte "wyspy" tła między
elementami — patrz fillEnclosedBackground) — czysto kosmetyczne dociągnięcie,
a nie warunek pokazania zdjęcia w ogóle.
Zdjęcia lifestyle/aranżacyjne (bez recolorowania, .is-lifestyle) też dostają
teraz mix-blend-mode: multiply zamiast dawnego normal — tak samo jak na
starej karcie, bez wyjątku; świadomy kompromis, do obserwacji. */
/* przycięta wersja (blob:) nad oryginałem — oryginalny ![]()
zostaje w DOM z src home_default */
/* WYŁĄCZONE (crop kart):
.ddc-card__crop {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.ddc-card__crop.is-ready {
opacity: 1;
}
*/
@media (hover: none), (pointer: coarse) {
.ddc-card__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ddc-card__track::-webkit-scrollbar {
display: none;
}
.ddc-card__slide {
position: relative;
inset: auto;
flex: 0 0 100%;
opacity: 1;
scroll-snap-align: center;
}
.ddc-card__nav {
display: none !important;
}
}
/* desktop: złap i przesuń zdjęcia w karcie (initGalleryDrag w dd-category.js) */
@media (hover: hover) and (pointer: fine) {
.ddc-card__track.is-draggable {
cursor: grab;
}
.ddc-card__track.is-dragging {
cursor: grabbing;
user-select: none;
}
.ddc-card__track.is-draggable .ddc-card__slide {
cursor: inherit;
-webkit-user-drag: none;
}
.ddc-card__track.is-draggable .ddc-card__img {
-webkit-user-drag: none;
user-select: none;
}
.ddc-card__track.is-dragging .ddc-card__slide {
transition: none;
}
.ddc-card__track.is-settling .ddc-card__slide {
transition: transform 0.25s ease;
}
.ddc-card__track.is-instant .ddc-card__slide {
transition: none !important;
}
}
.ddc-card__nav {
position: absolute;
top: calc(50% + 15px);
z-index: 3;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.15s;
}
.ddc-card__nav svg {
box-sizing: content-box;
width: 14px;
height: 14px;
padding: 10px;
border: 1px solid rgba(229, 224, 216, 0.7);
border-radius: 3px;
background: rgba(255, 255, 255, 0.9);
color: rgba(28, 25, 23, 0.7);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: all 0.15s;
}
.ddc-card__nav:hover svg {
border-color: var(--ddc-primary);
background: var(--ddc-primary);
color: #fff;
}
.ddc-card__nav--prev {
left: 6px;
}
.ddc-card__nav--next {
right: 6px;
}
.ddc-card:hover .ddc-card__nav:not([disabled]),
.ddc-card__nav:focus-visible {
opacity: 1;
}
.ddc-card__nav[disabled] {
pointer-events: none;
}
.ddc-card__dots {
position: absolute;
bottom: 4px;
left: 50%;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
transform: translateX(-50%);
}
.ddc-card__dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(28, 25, 23, 0.4);
cursor: pointer;
transition: all 0.2s;
}
.ddc-card__dot.is-active {
width: 16px;
background: var(--ddc-primary);
}
.ddc-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 12px;
overflow: hidden;
}
.ddc-card__rating {
display: flex;
align-items: center;
min-height: 18px;
font-size: 11px;
}
.ddc-card__rating .revws-product-list {
margin: 0;
padding: 0;
}
.ddc-card__rating .revws-product-list a {
display: flex;
align-items: center;
gap: 4px;
color: var(--ddc-muted);
font-size: 11px;
}
.ddc-card__rating .revws-product-list-empty {
display: none;
}
.ddc-card__rating .revws-grading {
display: flex;
gap: 0;
margin: 0;
}
.ddc-card__rating .revws-grade-wrap {
width: 12px;
height: 12px;
padding: 0;
margin: 0;
}
.ddc-card__rating .revws-grade {
width: 12px;
height: 12px;
stroke: var(--ddc-gold);
stroke-width: 1.5;
}
.ddc-card__rating .revws-grade-on path {
fill: var(--ddc-gold);
}
.ddc-card__rating .revws-grade-off path {
fill: transparent;
}
.ddc-card__rating .revws-count-text {
margin: 0;
font-size: 11px;
color: var(--ddc-muted);
}
.ddc .ddc-card__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 2.7em;
overflow: hidden;
margin: 0;
padding: 0;
font: 500 15px/1.35 var(--ddc-font);
color: var(--ddc-fg);
text-transform: none;
}
.ddc .ddc-card__title a {
color: inherit;
font: inherit;
transition: color 0.15s;
}
.ddc .ddc-card__title a:hover {
color: var(--ddc-primary);
}
@media (max-width: 767px) {
.ddc .ddc-card__title {
font-size: 14px;
}
}
.ddc-card__dims {
min-height: 14px;
margin: 0;
overflow: hidden;
font-size: 11px;
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ddc-muted);
}
.ddc-card__dims.is-empty {
visibility: hidden;
}
.ddc .ddc-card__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
min-height: 20px;
margin: 2px 0 0;
padding: 0;
}
.ddc .ddc-card__price .ddc-price {
margin: 0;
padding: 0;
font: 700 16px/1 var(--ddc-font);
color: var(--ddc-fg);
}
.ddc .ddc-card__price .ddc-price-old {
margin: 0;
padding: 0;
font: 400 11px/1 var(--ddc-font);
color: var(--ddc-muted);
text-decoration: line-through;
}
.ddc .ddc-card__price .ddc-price-saving {
display: inline-flex;
align-items: center;
margin: 0;
padding: 2px 6px;
border: 1px solid var(--ddc-primary-25);
border-radius: 3px;
background: var(--ddc-primary-8);
font: 600 11px/1 var(--ddc-font);
color: var(--ddc-primary);
position: static;
}
/* warianty kolorystyczne (cv_xsell lumina_colors.tpl) */
.ddc-card__variants {
display: flex;
align-items: center;
min-width: 0;
height: 52px;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid rgba(229, 224, 216, 0.4);
}
.ddc-card__variants:not(.has-variants) {
visibility: hidden;
border-color: transparent;
}
/* flex-wrap:nowrap jawnie — bez tego jedyna reguła dla tej właściwości w całej kaskadzie
to globalne .ajax_block_product .xsell-container { flex-wrap: wrap } ze sklepu
(autoload/cv_custom.css), bo ta reguła tu nigdy własnego flex-wrap nie ustawiała.
Skutek: pasek wariantów zawijał się na 2. rząd zamiast zostać w 1 linii z przewijaniem
(zgłoszone na mobilce — kafelek 173x82 zamiast 173x52, .ddc-card__variants ucięty). */
.ddc-card__variants .xsell-container {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 2px;
width: 100%;
min-width: 0;
margin: 0;
padding: 0 20px 0 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.ddc-card__variants .xsell-container::-webkit-scrollbar {
display: none;
}
/* chwytanie myszką i przeciąganie na desktopie (initDragScroll w dd-category.js) —
tylko gdy jest czym sterować (hover:hover = mysz, nie dotyk, patrz mqHover w JS) */
@media (hover: hover) and (pointer: fine) {
.ddc-card__variants .xsell-container {
cursor: grab;
}
.ddc-card__variants .xsell-container.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
}
.ddc-card__variants .xsell-color-container {
flex: 0 0 auto;
margin: 0;
padding: 0;
scroll-snap-align: start;
}
.ddc-card__variants .replaceonhover {
position: relative;
display: grid;
place-items: center;
width: 48px;
height: 48px;
overflow: hidden;
border: 1px solid rgba(229, 224, 216, 0.35);
border-radius: 3px;
background: var(--ddc-product-bg);
transition: border-color 0.15s;
}
.ddc-card__variants .replaceonhover:hover {
border-color: rgba(28, 25, 23, 0.35);
}
.ddc-card__variants .replaceonhover.is-selected {
border-color: var(--ddc-primary);
}
/* position:absolute zamiast polegania na width:100%/height:100% w środku display:grid — sam
CSS specificity już wygrywał (sprawdzone w DevTools), problem był inny: .replaceonhover to
"display:grid; place-items:center" — niejawny tor siatki (brak grid-template-rows/columns)
sam w sobie sizuje się do rozmiaru TREŚCI (naturalnych wymiarów ![]()
, czyli atrybutów
width="40" height="49"), a nie do 40x40 kontenera. Procentowa height:100% dziecka odnosiła
się więc do tego zawyżonego, niekwadratowego toru (stąd zmierzone w DevTools 38.4 × 47.14
zamiast 40×40). position:absolute + inset:0 wyjmuje obrazek z siatki całkowicie i liczy %
względem REALNEGO, kwadratowego pudełka .replaceonhover (position:relative wyżej).
object-fit: contain (NIE cover) — te miniatury to różne PRODUKTY/modele (kolory z
luminadeco_colors, ale też ogólny fallback wariantów z xsell_relations — patrz cv_xsell.php
getVariantThumbs/$products), często o zupełnie innych proporcjach (wysoki żyrandol na
długim łańcuchu vs niski plafon) — cover przycinałby je do kwadratu, ucinając łańcuch/
podstawę (zgłoszone na Capria d40/d50: cover ucinał zdjęcie od góry i od dołu). contain
pokazuje całe zdjęcie, z niewielkim marginesem tam, gdzie proporcje nie są kwadratowe —
to świadomy kompromis: trochę pustego miejsca w kafelku jest lepsze niż ucięty produkt. */
#ddc .ddc-card__variants .xsell-color-image {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
/* Kafelek „+N” (cv_xsell lumina_colors.tpl): moduł podaje osobną liczbę na każdą szerokość
(data-count ≥1200 / -tablet ≤1199 / -mobile ≤991 / -xs-mobile ≤420) i tylko wtedy, gdy
rzeczywiście są ukryte warianty — np. 5 wariantów na desktopie (mieści się 6) nie ma
data-count. Kafelek jest więc widoczny WYŁĄCZNIE, gdy atrybut dla bieżącej szerokości
istnieje; wcześniej zawsze wstawiał data-count, a CSS sklepu (.ajax_block_product
.xsell-color-count::after, cv_custom.css) rysował pustą ramkę. Wygląd = kafelek wariantu. */
#ddc .ddc-card__variants .xsell-container > div:has(> .xsell-color-count) {
flex: 0 0 auto;
}
#ddc .ddc-card__variants .xsell-color-count {
display: none;
}
#ddc .ddc-card__variants .xsell-color-count::after {
content: none;
display: grid;
place-items: center;
box-sizing: border-box;
width: 48px;
height: 48px;
border: 1px solid rgba(229, 224, 216, 0.35);
border-radius: 3px;
background: var(--ddc-product-bg);
font: 600 12px/1 var(--ddc-font);
color: var(--ddc-muted);
transition:
border-color 0.15s,
color 0.15s;
}
#ddc .ddc-card__variants .xsell-color-count:hover::after {
border-color: rgba(28, 25, 23, 0.35);
color: var(--ddc-primary);
}
#ddc .ddc-card__variants .xsell-color-count[data-count] {
display: block;
}
#ddc .ddc-card__variants .xsell-color-count[data-count]::after {
content: attr(data-count);
}
@media (max-width: 1199px) {
#ddc .ddc-card__variants .xsell-color-count {
display: none;
}
#ddc .ddc-card__variants .xsell-color-count[data-count-tablet] {
display: block;
}
#ddc .ddc-card__variants .xsell-color-count[data-count-tablet]::after {
content: attr(data-count-tablet);
}
}
@media (max-width: 991px) {
#ddc .ddc-card__variants .xsell-color-count {
display: none;
}
#ddc .ddc-card__variants .xsell-color-count[data-count-mobile] {
display: block;
}
#ddc .ddc-card__variants .xsell-color-count[data-count-mobile]::after {
content: attr(data-count-mobile);
}
}
@media (max-width: 420px) {
#ddc .ddc-card__variants .xsell-color-count {
display: none;
}
#ddc .ddc-card__variants .xsell-color-count[data-count-xs-mobile] {
display: block;
}
#ddc .ddc-card__variants .xsell-color-count[data-count-xs-mobile]::after {
content: attr(data-count-xs-mobile);
}
}
/* margin-top: 0 jawnie — bez tego jedyna reguła dla tej właściwości w całej kaskadzie
to globalne .ajax_block_product .xsell-variants-count { margin-top: .7rem } ze sklepu
(autoload/cv_custom.css, ta sama specyficzność .xxx .yyy, więc bez własnej deklaracji
tu nie ma czym jej pobić): w kafelku bez próbek kolorów (tylko link "+N wariantów",
patrz cv_xsell lumina_colors.tpl) ten margines spychał tekst poza widoczny obszar
.ddc-card__body (overflow: hidden) — link renderował się, ale był niewidoczny. */
.ddc-card__variants .xsell-variants-count {
flex: 0 0 auto;
margin: 0 0 0 6px;
font-size: 11px;
color: var(--ddc-muted);
white-space: nowrap;
}
.ddc-card__variants .xsell-variants-count:hover {
color: var(--ddc-primary);
}
/* tryb „kolory” (cv_xsell xsell_swatches) — próbki 28x28 jak w ProductCard.tsx, pole klikalne 44x44 */
.ddc-card__variants .xsell-swatches {
gap: 4px;
}
.ddc-card__variants .replaceonhover.xsell-swatch {
position: relative;
width: 28px;
height: 28px;
margin: 8px;
padding: 0;
border: 1px solid rgba(229, 224, 216, 0.35);
border-radius: 3px;
background: none;
overflow: visible;
}
.ddc-card__variants .replaceonhover.xsell-swatch::before {
content: "";
position: absolute;
inset: -9px;
}
.ddc-card__variants .xsell-swatch-color {
display: block;
width: 100%;
height: 100%;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ddc-card__variants .replaceonhover.xsell-swatch:hover {
border-color: rgba(28, 25, 23, 0.35);
}
.ddc-card__variants .replaceonhover.xsell-swatch.is-selected {
border-color: var(--ddc-primary);
box-shadow: 0 0 0 1px var(--ddc-primary);
}
#ddc .ddc-card__variants .xsell-swatches .xsell-color-count::after {
width: 28px;
height: 28px;
margin: 8px 0;
font-size: 11px;
}
/* kolory przed wariantami — rozstrzyga cv_xsell (colors_first), to tylko zabezpieczenie */
.ddc-card__variants:has(.xsell-color-container) .xsell-variants-count {
display: none;
}
/* ---------- wstawka w gridzie ---------- */
.ddc-helper {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid var(--ddc-border-soft);
border-radius: 8px;
background: var(--ddc-offwhite);
}
@media (min-width: 768px) {
.ddc-helper {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 24px;
}
.ddc-helper__text {
max-width: 34%;
}
}
.ddc .ddc-helper__title {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
color: var(--ddc-ink);
}
.ddc .ddc-helper__sub {
margin: 4px 0 0;
font-size: 12px;
line-height: 17.2px;
color: var(--ddc-ink-muted);
}
@media (min-width: 768px) {
.ddc .ddc-helper__title {
font-size: 15px;
}
.ddc .ddc-helper__sub {
font-size: 12.5px;
}
}
.ddc-helper__paths {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
@media (min-width: 768px) {
.ddc-helper__paths {
flex: 1;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
}
.ddc-helper__path {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(229, 224, 216, 0.5);
border-radius: 6px;
background: #fff;
font-size: 12px;
line-height: 18.8px;
color: rgba(28, 25, 23, 0.85);
transition:
color 0.15s,
border-color 0.15s;
}
.ddc-helper__path span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ddc-helper__path svg {
width: 12px;
height: 12px;
color: rgba(148, 17, 20, 0.7);
transition: transform 0.15s;
}
.ddc-helper__path:hover {
color: var(--ddc-primary);
border-color: var(--ddc-primary-40);
}
.ddc-helper__path:hover svg {
transform: translateX(2px);
color: var(--ddc-primary);
}
/* ---------- load more ---------- */
.ddc-loadmore {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 32px 0 0;
padding: 0 16px;
}
.ddc .ddc-loadmore__count {
margin: 0;
font-size: 13px;
color: var(--ddc-muted);
}
.ddc .ddc-loadmore__count strong {
color: var(--ddc-fg);
font-weight: 600;
}
.ddc .ddc-loadmore__bar {
width: 160px;
height: 2px;
margin: 0;
overflow: hidden;
border-radius: 999px;
background: var(--ddc-border);
box-shadow: none;
}
.ddc .ddc-loadmore__bar .progress-bar {
height: 100%;
border-radius: 999px;
background: rgba(148, 17, 20, 0.7);
box-shadow: none;
transition: width 0.3s;
}
.ddc .cv-pagination-bottom-btn {
margin-top: 4px;
width: 100%;
}
@media (min-width: 640px) {
.ddc .cv-pagination-bottom-btn {
width: auto;
}
}
.ddc-empty {
padding: 56px 16px;
text-align: center;
}
.ddc .ddc-empty__title {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.ddc .ddc-empty__text {
margin: 6px 0 0;
font-size: 13px;
color: var(--ddc-muted);
}
/* ============================================================ INSPIRACJE */
.ddc-inspirations {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--ddc-border-soft);
}
@media (min-width: 768px) {
.ddc-inspirations {
margin-top: 44px;
padding-top: 36px;
}
}
.ddc-inspirations .ddc-h2 {
margin-bottom: 16px;
}
.ddc-inspirations__rail {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin: 0 -15px;
padding: 0 15px 8px;
scrollbar-width: none;
}
.ddc-inspirations__rail::-webkit-scrollbar {
display: none;
}
@media (min-width: 768px) {
.ddc-inspirations__rail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
overflow: visible;
}
}
.ddc-insp {
flex: 0 0 82%;
scroll-snap-align: start;
overflow: hidden;
border: 1px solid var(--ddc-border-soft);
border-radius: 8px;
background: #fff;
}
@media (min-width: 640px) {
.ddc-insp {
flex-basis: 58%;
}
}
.ddc-insp__link {
display: block;
color: var(--ddc-fg);
}
.ddc-insp__img {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ddc-product-bg);
}
.ddc-insp__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ddc-insp__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 14px;
}
@media (min-width: 1024px) {
.ddc-insp__body {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
}
}
.ddc-insp__name {
font-size: 14px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ddc-insp__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 600;
color: var(--ddc-primary);
white-space: nowrap;
}
.ddc-insp__cta svg {
width: 14px;
height: 14px;
}
/* ================================================================== SEO */
.ddc-seo {
margin-top: 32px;
background: var(--ddc-offwhite);
border-top: 1px solid var(--ddc-border-soft);
}
@media (min-width: 1024px) {
.ddc-seo {
margin-top: 40px;
}
}
.ddc-seo__inner {
max-width: 1100px;
margin: 0 auto;
padding: 32px 0;
}
@media (min-width: 1024px) {
.ddc-seo__inner {
padding: 48px 0;
}
}
.ddc-seo__article {
max-width: 780px;
padding-bottom: 32px;
border-bottom: 1px solid var(--ddc-border-soft);
}
@media (min-width: 1024px) {
.ddc-seo__article {
padding-bottom: 40px;
}
}
.ddc .ddc-seo__title {
margin: 0;
font: 600 24px/1.25 var(--ddc-font);
color: var(--ddc-fg);
text-transform: none;
}
@media (min-width: 1024px) {
.ddc .ddc-seo__title {
font-size: 30px;
}
}
.ddc-seo__text {
margin-top: 16px;
font-size: 14px;
line-height: 1.75;
color: var(--ddc-fg-75);
}
.ddc-seo__text p {
margin: 0 0 16px;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.ddc-seo__text p:last-child,
.ddc-seo__text > div > p:last-child {
margin-bottom: 0;
}
.ddc-seo__text > div {
margin-top: 16px;
}
@media (min-width: 1024px) {
.ddc-seo__text {
font-size: 15px;
}
}
/* prawdziwy opis kategorii (x13extracatdesc, WYSIWYG z panelu) — dowolny HTML z