/* ============================================================
   HOMEPAGE — dobre-systemy.pl
   ============================================================ */
.ds-homepage { background: #f8f9fa; }
.ds-hp-wrap { max-width: 1250px; margin: 0 auto; padding: 0 20px 40px; display: flex; flex-direction: column; gap: 20px; }

/* BANNER */
.ds-banner { position: relative !important; overflow: hidden !important; border-radius: 12px; background: #222; aspect-ratio: 1200/280; min-height: 180px; }
.ds-banner__placeholder { display: flex; align-items: center; justify-content: center; height: 220px; background: linear-gradient(135deg,#222,#444); border-radius: 12px; }
.ds-banner__placeholder-text { text-align: center; color: #fff; }
.ds-banner__placeholder-text h2 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.ds-banner__track { position: relative !important; width: 100%; height: 100%; }
.ds-banner__slide { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-size: cover !important; background-position: center !important; opacity: 0 !important; transition: opacity .5s ease; display: flex; align-items: center; pointer-events: none !important; z-index: 0 !important; }
.ds-banner__slide.is-active { opacity: 1 !important; pointer-events: all !important; z-index: 1 !important; }
.ds-banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.5) 0%,transparent 65%); z-index: 1; }
.ds-banner__content { position: relative; z-index: 2; padding: 28px 40px; display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.ds-banner__title { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.2; margin: 0; }
.ds-banner__sub { color: rgba(255,255,255,.9); font-size: 14px; margin: 0; }
.ds-btn-banner { display: inline-block; background: #F65F0A; color: #fff !important; padding: 10px 22px; border-radius: 4px; font-weight: 700; font-size: 14px; text-decoration: none !important; align-self: flex-start; }
.ds-btn-banner:hover { background: #d4530a !important; }
.ds-banner__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.ds-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; cursor: pointer; padding: 0; transition: all .2s; }
.ds-banner__dot.is-active { background: #fff; width: 24px; border-radius: 4px; }

/* KATEGORIE — zawsze pełna szerokość, ikony się rozciągają */
.ds-hp-cats { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px 16px 12px; }

.ds-hp-cats__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important; /* rozciągnij na pełną szerokość */
    gap: 4px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    align-items: flex-start;
}
.ds-hp-cats__track::-webkit-scrollbar { display: none; }

.ds-cat-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex: 1 1 0 !important; /* każdy kafelek rośnie jednakowo */
    min-width: 60px;
    max-width: 110px;
    padding: 6px 4px;
    transition: transform .15s;
}
.ds-cat-tile:hover { transform: translateY(-2px); }

.ds-cat-tile__img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ds-cat-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-cat-tile__name { font-size: 13px; font-weight: 700; color: #222; text-align: center; line-height: 1.3; word-break: break-word; }

/* SECTION HEADER */
.ds-section { display: flex; flex-direction: column; gap: 12px; }
.ds-section__header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid #e5e5e5; }
.ds-section__title { font-size: 22px !important; font-weight: 700; color: #111; margin: 0; } /* 22px jak żądane */
.ds-section__more { font-size: 13px; color: #F65F0A; text-decoration: none; font-weight: 500; }
.ds-section__more:hover { text-decoration: underline; }

/* CAROUSEL */
.ds-carousel { position: relative; padding: 0 28px; }
.ds-carousel__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.ds-carousel__track::-webkit-scrollbar { display: none; }

/* Kafelki karuzeli — 254px jak na normalnych sekcjach */

.ds-carousel__btn { position: absolute; top: 38%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 2px 6px rgba(0,0,0,.1); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #222; transition: all .15s; }
.ds-carousel__btn:hover { background: #F65F0A; border-color: #F65F0A; color: #fff; }
.ds-carousel__btn--prev { left: 0; }
.ds-carousel__btn--next { right: 0; }

/* PRODUCT CARD */
.ds-product-card { display: flex !important; flex-direction: column !important; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; transition: border-color .15s, box-shadow .15s; height: 100%; }
.ds-product-card:hover { border-color: #bbb; box-shadow: 0 2px 10px rgba(0,0,0,.09); }
.ds-product-card__link { display: flex !important; flex-direction: column !important; flex: 1; text-decoration: none; color: inherit; }
.ds-product-card__image { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #fafafa; }
.ds-product-card__image img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 6px !important; display: block !important; }
.ds-badge--sale { position: absolute; top: 8px; left: 0; background: #00813a; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 0 3px 3px 0; z-index: 2; pointer-events: none; }
.ds-product-card__body { flex: 1; padding: 10px 10px 4px; display: flex; flex-direction: column; gap: 4px; }
.ds-product-card__title { font-size: 13px; font-weight: 500; color: #111; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.ds-product-card:hover .ds-product-card__title { color: #F65F0A; }
.ds-product-card__price { margin-top: 4px; }
.ds-product-card__price ins,
.ds-product-card__price ins .woocommerce-Price-amount { font-size: 18px; font-weight: 700; color: #111; text-decoration: none; display: block; }
.ds-product-card__price .price { font-size: 18px; font-weight: 700; color: #111; }
.ds-product-card__price del { font-size: 12px; color: #999; display: block; }
.ds-product-card__delivery { font-size: 12px; color: #555; margin-top: 2px; }
.ds-product-card__delivery strong { color: #111; }
.ds-product-card__footer { padding: 6px 8px 10px; margin-top: auto; }
.ds-btn--cart { display: block; width: 100%; padding: 9px 10px; background: #fff; color: #F65F0A !important; border: 1.5px solid #F65F0A; border-radius: 4px; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.ds-btn--cart:hover { background: #F65F0A !important; color: #fff !important; }

/* CATEGORY IMAGE ROW */
.ds-hp-cat-row {
    display: grid !important;
    grid-template-columns: 3fr 7fr !important;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    min-height: 280px;
}

.ds-hp-cat-row__img-wrap {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    background: #222;
}
/* Pełna wysokość sekcji — absolutne pozycjonowanie */
.ds-hp-cat-row__img-wrap img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important; /* bez paddingu dla cover */
    display: block !important;
    transition: transform .3s ease;
}
.ds-hp-cat-row__img-wrap:hover img { transform: scale(1.04); }
.ds-hp-cat-row__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; z-index: 1; }
.ds-hp-cat-row__name { color: #fff; font-size: 18px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ds-hp-cat-row__more { color: rgba(255,255,255,.8); font-size: 13px; margin-top: 4px; font-weight: 500; }

.ds-hp-cat-row__products { padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ds-hp-cat-row__products .ds-section__header { padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
/* Karty w sekcji kategorii — dopasowane do szerokości 7/10 */
.ds-hp-cat-row__products .ds-carousel { padding: 0 28px; }
.ds-hp-cat-row__products .ds-carousel__item { flex: 0 0 220px !important; }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .ds-hp-cat-row__products .ds-carousel__item { flex: 0 0 calc(33% - 8px) !important; }
}
@media (max-width: 767px) {
    .ds-hp-wrap { padding: 0 10px 24px; gap: 14px; }
    .ds-banner { aspect-ratio: 16/7; border-radius: 8px; min-height: 120px; }
    .ds-banner__content { padding: 16px 20px; }
    .ds-banner__title { font-size: 16px; }
    .ds-hp-cats { padding: 10px 12px 8px; }
    .ds-hp-cats__track { justify-content: flex-start !important; }
    .ds-cat-tile { flex: 0 0 auto !important; width: 72px !important; max-width: 72px !important; }
    .ds-cat-tile__img { width: 56px; height: 56px; }
    .ds-section__title { font-size: 17px !important; }
    .ds-carousel__btn { display: none; }
    .ds-hp-cat-row { grid-template-columns: 1fr !important; }
    .ds-hp-cat-row__img-wrap { min-height: 160px; position: relative; }
    .ds-hp-cat-row__img-wrap img { position: absolute !important; }
    .ds-hp-cat-row__products { padding: 12px; }
    .ds-hp-cat-row__products .ds-carousel__item { flex: 0 0 150px !important; }
}

/* ── CAROUSEL: 7 produktów widocznych w normalnych sekcjach ── */
.ds-section--products .ds-carousel .ds-carousel__item,
.ds-section .ds-carousel:not(.ds-hp-cat-row__products .ds-carousel) .ds-carousel__item {
    flex: 0 0 calc((100% - 6 * 12px) / 7.6) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
}

/* ── CAROUSEL: 5 produktów w sekcjach kategorii z obrazkiem ── */
.ds-hp-cat-row__products .ds-carousel__item {
    flex: 0 0 calc(20% - 8px) !important;
    min-width: 120px;
}

@media (max-width: 1200px) {
    .ds-section--products .ds-carousel__item { flex: 0 0 calc(100% / 4.3) !important; }
    .ds-hp-cat-row__products .ds-carousel__item { flex: 0 0 calc(33% - 8px) !important; }
}
@media (max-width: 767px) {
    .ds-section--products .ds-carousel__item { flex: 0 0 calc(100% / 2.3) !important; }
    .ds-hp-cat-row__products .ds-carousel__item { flex: 0 0 calc(50% - 5px) !important; }
}

/* ── KATEGORIE — dostosowanie do rozdzielczości ── */

/* 1920px+ */
@media (min-width: 1920px) {
    .ds-hp-cats__track { gap: 6px !important; }
    .ds-cat-tile { max-width: 130px !important; }
    .ds-cat-tile__img { width: 100px !important; height: 100px !important; }
    .ds-cat-tile__name { font-size: 14px !important; }
}

/* 1440–1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
    .ds-hp-cats__track { gap: 4px !important; }
    .ds-cat-tile { max-width: 110px !important; }
    .ds-cat-tile__img { width: 90px !important; height: 90px !important; }
    .ds-cat-tile__name { font-size: 13px !important; }
}

/* 1024–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    .ds-hp-cats__track { gap: 3px !important; }
    .ds-cat-tile { max-width: 90px !important; padding: 4px 2px !important; }
    .ds-cat-tile__img { width: 68px !important; height: 68px !important; }
    .ds-cat-tile__name { font-size: 11px !important; }
}

/* 768–1023px (tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
    .ds-hp-cats__track { gap: 4px !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
    .ds-cat-tile { flex: 0 0 calc(20% - 4px) !important; max-width: none !important; }
    .ds-cat-tile__img { width: 64px !important; height: 64px !important; }
    .ds-cat-tile__name { font-size: 11px !important; }
}

/* mobile < 768px */
@media (max-width: 767px) {
    .ds-hp-cats__track { gap: 6px !important; }
    .ds-cat-tile { flex: 0 0 calc(20% - 5px) !important; min-width: 56px !important; max-width: none !important; }
    .ds-cat-tile__img { width: 100% !important; aspect-ratio: 1/1 !important; height: auto !important; }
    .ds-cat-tile__name { font-size: 10px !important; }
}

/* ── Karuzele: strzałki WEWNĄTRZ kontenera ── */
.ds-carousel { padding: 0 !important; position: relative !important; overflow: hidden !important; }

.ds-carousel__track {
    padding: 0 !important;
    overflow-x: auto !important;
    scroll-padding: 0 !important;
}

/* Strzałki nakładają się na karty od wewnątrz */
.ds-carousel__btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
}
.ds-carousel__btn--prev { left: 6px !important; }
.ds-carousel__btn--next { right: 6px !important; }
.ds-carousel__btn:hover { background: #F65F0A !important; border-color: #F65F0A !important; color: #fff !important; }

/* Ostatnia karta wystaje 30% */

/* Sekcje kategorii z obrazkiem — strzałki też wewnątrz */
.ds-hp-cat-row__products .ds-carousel { overflow: hidden !important; }



/* ── Nieskończona dawka pomysłów — siatka 3 kolumny ── */
.ds-hp-infinite { margin-top: 24px; overflow: hidden; max-width: 100%; }
.ds-infinite-grid { max-width: 100%; }
.ds-infinite-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .ds-infinite-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 767px)  { .ds-infinite-grid { grid-template-columns: repeat(2,1fr); } }
.ds-infinite-more { text-align: center; margin-top: 24px; }
.ds-btn-more { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: #fff; border: 2px solid #F65F0A; border-radius: 8px; color: #F65F0A; font-size: 15px; font-weight: 700; cursor: pointer; font-family: 'Inter',sans-serif; transition: all .15s; }
.ds-btn-more:hover { background: #F65F0A; color: #fff; }


/* % badge — prawy górny róg */
.ds-product-card__image { position: relative; }
.ds-badge--pct {
    position: absolute !important;
    top: 8px !important; right: 8px !important;
    background: #F65F0A !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 4px !important;
    z-index: 2 !important;
    line-height: 1.3 !important;
}

/* Omnibus */
.ds-product-card__omnibus { font-size: 10px; color: #999; margin-top: 3px; line-height: 1.3; }
.ds-product-card__omnibus .woocommerce-Price-amount { font-size: 10px !important; color: #999 !important; font-weight: 400 !important; }



/* Ostatnia karta — wysuwa się poza 70% ≈ 30% peek */

@media (max-width: 767px)  { .ds-carousel__item { flex: 0 0 calc(50% - 6px) !important; } }
@media (max-width: 480px)  { .ds-carousel__item { flex: 0 0 calc(70%) !important; } }

/* ── FOOTER CZARNY ── */
.ds-footer { background: #111 !important; color: #aaa !important; }
.ds-footer * { color: inherit; }
.ds-footer__col-title { color: #fff !important; }
.ds-footer a { color: #bbb !important; }
.ds-footer a:hover { color: #F65F0A !important; }
.ds-footer__bottom { background: #000 !important; border-top: 1px solid #2a2a2a !important; }
.ds-footer__copy { color: #555 !important; }