.option_76 {
    display: none;
}
/* Skorka NIE ustawia globalnego box-sizing - kazdy nasz element z width:100% + padding
   musi byc border-box, inaczej wystaje poza viewport i strona "plywa" w bok na mobile */
.bundle-type-bar,
.bundle-types,
.bundle-type,
.bundle-presets-collapse,
.bundle-presets-toggle,
.bundle-presets-body,
.bundle-mobile-tray,
.bundle-mobile-tray *,
.bundle-addons-screen,
.bundle-addons-panel,
.bundle-addons-panel *,
.bundle-step-products,
.bundle-products-wrapper,
.bundle-product,
.bundle-step-head,
.sets-gallery.bundle-restored {
    box-sizing: border-box;
}
/* ===== Pasek "Rodzaj zestawu" (zastepuje miniatury variant-container) ===== */
.bundle-type-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 18px;
    padding: 0 15px;
    width: 100%;
    position: relative;
}
.bundle-type-label {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a7f83;
}
.bundle-types {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px;
    scrollbar-width: none;
    min-width: 0;
}
.bundle-type {
    scroll-snap-align: start;
}
/* Licznik " · 5 do wyboru" tylko na mobile */
.bundle-type-count-hint {
    display: none;
}

.bundle-types::-webkit-scrollbar {
    display: none;
}
.bundle-type {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #eadfe3;
    border-radius: 12px;
    padding: 6px 12px 6px 6px;
    background: #fff;
    text-align: left;
    color: #3b3238;
    text-decoration: none;
}
/* Desktop: kafelki lezace w rzedzie. Proporcja 4:5, czyli jak pliki zrodlowe. */
.bundle-type img {
    width: 40px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
}
.bundle-type .bt-price em {
    font-style: normal;
    font-weight: 700;
    color: #d82261;
}
.bundle-type .bt-price s {
    margin-left: 4px;
    color: #8a7f83;
}
.bundle-type:hover {
    border-color: #d82261;
    color: #3b3238;
    text-decoration: none;
}
.bundle-type b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #3b3238;
}
.bundle-type .bt-txt {
    display: block;
    color: #3b3238;
}
.bundle-type .bt-price {
    display: block;
    font-size: 11.5px;
    color: #d82161;
    font-weight: 700;
}
.bundle-type.active {
    border-color: #d82261;
    background: #fdf0f3;
}
/* Strzalki przewijania paska "Rodzaj zestawu" - nakladane na kafelki, znikaja na krancach */
.bundle-types-shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.bundle-type-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}
.bundle-type-arrow span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #d82261;
    background: #fff;
    color: #d82261;
    font-size: 18px;
    line-height: 2;
    box-shadow: 0 2px 8px rgba(60, 20, 35, .18);
}
.bundle-type-arrow:hover span {
    background: #d82261;
    color: #fff;
}
.bundle-type-arrow-left {
    left: 0;
}
.bundle-type-arrow-right {
    right: 0;
}
@media (max-width: 991px) {
    .bundle-type-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .bundle-types-shell {
        width: 100%;
    }
    .bundle-types {
        width: 100%;
    }
}
@media (max-width: 991px) {
    .bundle-type-bar {
        margin: 6px 0 5px;
    }
}
/* ===== Mobile: rodzaj zestawu jako siatka kafelkow ze zdjeciem (bez przewijania i strzalek) ===== */
@media (max-width: 991px) {
    .bundle-types {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        overflow: visible;
        padding: 2px 0;
        scroll-snap-type: none;
    }
    .bundle-type {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 0;
        text-align: center;
    }
    .bundle-type img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid transparent;
    }
    .bundle-type.active {
        background: transparent;
        border: none;
    }
    .bundle-type.active img {
        border-color: #d82261;
    }
    /* Ptaszek w prawym gornym rogu zdjecia wybranego zestawu - ten sam, co przy
       napisie "Zestaw gotowy". Kafelek jest kotwica, bo zdjecie zajmuje cala jego szerokosc. */
    .bundle-type {
        position: relative;
    }
    .bundle-type.active::after {
        content: "";
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #d82261 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
        box-shadow: 0 1px 4px rgba(60, 20, 35, .28);
    }
    .bundle-type .bt-txt {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .bundle-type .bt-txt b {
        font-size: 10.5px;
        line-height: 1.25;
        white-space: normal;
        font-weight: 700;
    }
    .bundle-type.active .bt-txt b {
        color: #d82261;
    }
    /* Cena nad nazwa zestawu (order, zeby nie ruszac kolejnosci w HTML) */
    .bundle-type .bt-price {
        display: block;
        order: -1;
        font-size: 10.5px;
        line-height: 1.25;
        margin-bottom: 1px;
    }
    /* Kafelki maja ok. 70px szerokosci - cena przed przecena sie nie miesci */
    .bundle-type .bt-price s {
        display: none;
    }
    .bundle-type-arrow {
        display: none !important;
    }
}
/* Stare miniatury zestawow - pasek je zastepuje (1.css laduje sie tylko na stronach zestawow) */
.variant-container {
    display: none !important;
}
/* Plakietki Bestseller / X zl taniej / Darmowa dostawa nad kreatorem (mobilny blok zestawu 1425) */
.hidden-lg-up.product-price > div[style*="float"] {
    display: none !important;
}
/* Wyrozniki z ikonami (product-info-5) - nowy kreator ich nie uzywa; mobile i desktop */
#box_productfull .product-info-5 {
    display: none !important;
}
/* Jednolita wysokosc znaku we wszystkich strzalkach przewijania */
.scroll-btn,
.addon-scroll-btn,
.bundle-type-arrow span {
    line-height: 2;
}
/* Siatka bezpieczenstwa: zadnego poziomego scrolla strony na mobile */
@media (max-width: 991px) {
    /* Tylko html - na body overflow-x zrobilby z niego kontener przewijania
       i przypiety pasek filtrow przestalby sie przyklejac. */
    html {
        overflow-x: hidden;
    }
}
/* Na stronach zestawow gorna belka sklepu nie przypina sie na mobile - przyklejone
   maja byc wylacznie filtry. Wczesniej blokowal ja overflow-x na body, ktory musial
   zniknac, zeby dzialalo przypinanie filtrow. */
@media (max-width: 991px) {
    .sticky-bar.is-sticky {
        position: static !important;
    }
}
/* ===== Dymek czatu Tidio zaslania przyciski kreatora na mobile ===== */
@media (max-width: 991px) {
    #tidio-chat-root,
    #tidio-chat,
    iframe#tidio-chat-iframe {
        display: none !important;
    }
}
/* ===== Wskaznik ladowania produktow (spinner) ===== */
.bundle-loading-indicator {
    text-align: center;
    padding: 28px 20px;
    color: #8a7f83;
    font-size: 14px;
    font-weight: 600;
}
.bundle-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid #f3cdd9;
    border-top-color: #d82261;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: -4px;
    animation: bundle-spin .8s linear infinite;
}
@keyframes bundle-spin {
    to { transform: rotate(360deg); }
}
/* ===== Zwijana sekcja "Popularne zestawy" ===== */
.bundle-presets-collapse {
    margin: 14px 0;
    border: 1px solid #f7cbcf;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.bundle-presets-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 13px 14px;
    background: #fff6f7;
    border: none;
    font: inherit;
    font-size: 14px;
    color: #3b3238;
    cursor: pointer;
    text-align: left;
}
.bundle-presets-toggle b {
    font-weight: 700;
}
.bundle-presets-chev {
    margin-left: auto;
    transition: transform .2s;
}
@media (max-width: 991px) {
    .bundle-presets-toggle {
        white-space: nowrap;
        font-size: 12.5px;
        padding: 12px 10px;
        gap: 4px;
    }
}
@media (max-width: 400px) {
    .bundle-presets-toggle {
        font-size: 11px;
        padding: 12px 8px;
    }
}
.bundle-presets-collapse.open .bundle-presets-chev {
    transform: rotate(180deg);
}
.bundle-presets-body {
    display: none;
    padding: 10px 12px 12px;
}
.bundle-presets-collapse.open .bundle-presets-body {
    display: block;
}
/* ===== Przypieta dolna belka na mobile: kolka wyboru + przycisk koszyka ===== */
.bundle-mobile-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -6px 18px rgba(60, 20, 35, .08);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
}
.bundle-mobile-tray .bundle-selections {
    position: static !important;
    top: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none;
    background: transparent;
    justify-content: flex-start !important;
    gap: 10px;
}
.bundle-mobile-tray .bundle-selection {
    flex: 0 0 auto;
    padding: 2px;
}
.bundle-mobile-tray .bundle-selection .selection-preview img.image {
    /* Sztywne 60px - tu kolka nie robily sie jajkami i plynna szerokosc tylko
       je zmniejszala. Poprawka proporcji dotyczy wylacznie prawej kolumny na desktopie. */
    width: 60px;
    height: 60px;
}
.bundle-mobile-tray .bundle-selection span.image-text {
    font-size: 8px;
    max-width: 60px;
    line-height: 1.25;
}
.bundle-mobile-tray .bundle-selection .placeholder {
    font-size: 9px;
    padding-top: 4px;
    padding-bottom: 2px;
}
.bundle-mobile-tray .bundle-selection .name {
    font-size: 9px;
    line-height: 1.2;
    padding-top: 3px;
    max-width: 64px;
}
.bundle-mobile-tray button.addtobasket {
    width: 100%;
    margin: 0;
}
body.has-bundle-tray {
    padding-bottom: 190px; /* zapas; dokladna wartosc ustawia JS z realnej wysokosci belki */
}
@media (min-width: 992px) {
    .bundle-mobile-tray {
        display: none;
    }
    body.has-bundle-tray {
        padding-bottom: 0;
    }
}
/* ===== Biezacy krok wyboru: podswietlone pierwsze puste kolko ===== */
.bundle-selection.empty .selection-preview img.image {
    border-style: dashed;
}
.bundle-selection.current .selection-preview img.image {
    border: 2px solid #d82261;
    border-style: solid;
}
.bundle-selection.current .placeholder {
    color: #d82261;
    font-weight: 700;
}
/* Wieksze kolka, zeby tekst "Wybierz ... z listy" miescil sie w srodku */
.bundle-selection .selection-preview img.image {
    /* Skorka sklepu ma globalne img { max-width: 100% }. Przy waskiej prawej kolumnie
       (992-1200px) sciskalo to szerokosc, a sztywna wysokosc zostawala - kolka robily
       sie jajkami. Szerokosc plynna, wysokosc z proporcji, wiec zawsze jest kolo. */
    width: 100%;
    max-width: 110px;
    height: auto;
}
.bundle-selection span.image-text {
    max-width: 110px;
    font-size: 10px;
}
/* ===== Odstepy od krawedzi ekranu na mobile ===== */
@media (max-width: 991px) {
    .bundle-products-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* ===== Puste pozostalosci po prawej kolumnie na mobile (timer i przycisk sa w belce) ===== */
@media (max-width: 991px) {
    #box_productfull .product-info-2,
    #box_productfull .platnosci,
    .breadcrumbs .innerbreadcrumbs {
        display: none !important;
    }
    /* Dodatki na mobile zyja tylko w popupie ("Dalej: dodatki") - sekcja w tresci strony ukryta.
       Selektor celowo z form.form-basket: po przeniesieniu do popupu opcje przestaja go matchowac. */
    #box_productfull form.form-basket .variants {
        display: none !important;
    }
    /* Dubel nazwy produktu i ceny z prawej kolumny pod lista produktow - gora strony juz to pokazuje */
    #box_productfull .col-lg-4 h2.name,
    #box_productfull .col-lg-4 .product-price {
        display: none !important;
    }
}
/* Belka schowana takze podczas pelnoekranowej galerii (klasa nadawana przez JS)
   + fallback CSS na autorska galerie Shopera (.shop-gallery traci .inactive po otwarciu) */
/* Galeria Shopera nadaje atrybut inert wszystkim dzieciom body poza soba - to najpewniejszy
   sygnal, ze cos przykrywa strone (galeria zdjec, okno zgody na ciasteczka).
   Kazdy selektor w osobnej regule: gdyby przegladarka nie znala :has(), reszta ma dzialac. */
.bundle-mobile-tray[inert] {
    display: none !important;
}
/* Otwarte menu boczne (mmenu dodaje mm-opened na <html>) - belka zaslanialaby kategorie */
html.mm-opened .bundle-mobile-tray {
    display: none !important;
}
body:has(.js__gallery_new) .bundle-mobile-tray {
    display: none !important;
}
body.bundle-lightbox-open .bundle-mobile-tray {
    display: none !important;
}
/* Odstep miedzy blokiem ceny (Omnibus) a galeria na mobile */
.hidden-lg-up.product-price .sets-gallery {
    margin-top: 15px;
}
/* Gdy otwarta pelnoekranowa galeria zdjec, dolna belka nie moze jej zaslaniac */
body:has(.pswp--open) .bundle-mobile-tray {
    display: none !important;
}
/* ===== Naglowek kroku: "Wybierz swiece" + "Krok 1 z 2" ===== */
/* Odstep, o jaki przegladarka ma sie zatrzymac nad naglowkiem kroku.
   To JEDYNE miejsce, gdzie ustawia sie wysokosc tego odstepu - zwieksz,
   jesli przyklejony pasek sklepu kiedykolwiek zaslonilby napis. */
.bundle-step-head {
    scroll-margin-top: 90px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 12px;
}
.bundle-step-head h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #1e151a;
}
@media (max-width: 991px) {
    .bundle-step-head {
        scroll-margin-top: 12px;
    }
    .bundle-step-head h4 {
        font-size: 16px;
        margin-top: 8px;
        margin-left: -10px;
    }
}
.bundle-step-count {
    font-size: 13px;
    font-weight: 700;
    color: #8a7f83;
    white-space: nowrap;
}
/* ===== Filtry okazji nad lista produktow (kafelki jak na makiecie) ===== */
/* Powloka: to ona jest przyklejona i trzyma strzalki. Pasek w srodku sie przewija. */
.bundle-filters-shell {
    position: sticky;
    /* Wysokosc belki sklepu mierzy JS i wpisuje do zmiennej; 75px to wartosc awaryjna. */
    top: var(--bundle-filters-top, 75px);
    z-index: 3;
    /* Tlo siega 10px poza kafelki, zeby zza paska nie wygladalo rozowe tlo kart */
    margin: 0 -10px 4px;
    padding: 8px 10px 18px;
    /* Delikatna biala mgielka u dolu, zeby pasek ladnie nachodzil na kafelki */
    background: linear-gradient(to bottom,
        #fff 0,
        #fff calc(100% - 18px),
        rgba(255, 255, 255, 0) 100%);
}
.bundle-filters {
    display: flex;
    /* Zawsze jedna linia - po przypieciu dwie zabieraly za duzo ekranu. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 5px;
}
/* Krawedz zanika tam, gdzie jest jeszcze co przewijac - to sygnal "jest wiecej" */
.bundle-filters-shell.can-right .bundle-filters {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
}
.bundle-filters-shell.can-left .bundle-filters {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px);
    mask-image: linear-gradient(to right, transparent 0, #000 46px);
}
.bundle-filters-shell.can-left.can-right .bundle-filters {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}
/* Mozna zlapac i przeciagnac */
.bundle-filters-shell.can-left .bundle-filters,
.bundle-filters-shell.can-right .bundle-filters {
    cursor: grab;
}
.bundle-filters.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}
/* Strzalki: widoczne tylko wtedy, gdy w tamta strone jest co przewijac */
.bundle-filters-arrow {
    position: absolute;
    top: 8px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #eadfe3;
    border-radius: 50%;
    background: #fff;
    color: #3b3238;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(60, 20, 35, .12);
}
.bundle-filters-arrow:hover {
    border-color: #d82261;
    color: #d82261;
}
.bundle-filters-prev {
    left: 2px;
}
.bundle-filters-next {
    right: 2px;
}
.bundle-filters-shell.can-left .bundle-filters-prev,
.bundle-filters-shell.can-right .bundle-filters-next {
    display: flex;
}
.bundle-filters::-webkit-scrollbar {
    display: none;
}
.bundle-filter {
    flex: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #3b3238;
    background: #fff;
    border: 1px solid #eadfe3;
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.bundle-filter:hover {
    border-color: #d82261;
    color: #d82261;
}
.bundle-filter.is-active,
.bundle-filter.is-active:hover {
    background: #1e151a;
    border-color: #1e151a;
    color: #fff;
}
/* Kafelek wyrozniony (sezon trwa) - jasne brazowe tlo i brazowy tekst */
.bundle-filter-highlight {
    background: #f6ecdd;
    border-color: #e0c9a6;
    color: #8a5a23;
}
.bundle-filter-highlight:hover {
    background: #f0e0c9;
    border-color: #c79a56;
    color: #8a5a23;
}
.bundle-filter-highlight.is-active,
.bundle-filter-highlight.is-active:hover {
    background: #8a5a23;
    border-color: #8a5a23;
    color: #fff;
}
.bundle-product.bundle-filter-hidden {
    display: none !important;
}
/* ===== Wyszukiwarka w pasku filtrow ===== */
.bundle-search-toggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #eadfe3;
    border-radius: 50%;
    background: #fff;
    color: #3b3238;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.bundle-search-toggle:hover {
    border-color: #d82261;
    color: #d82261;
}
/* Pole ukryte, dopoki klient nie kliknie lupki */
/* Ramke rysuje otoczka, a nie samo pole. Skorka sklepu dokladala inputowi wlasna
   obwodke i widac bylo dwie linie - tak mamy pewnosc, ze jest dokladnie jedna. */
.bundle-search-field {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    position: relative;
    background: #fff;
    border: 1.5px solid #d82261;
    border-radius: 999px;
}
.bundle-filters.is-searching .bundle-search-field {
    display: flex;
}
/* Przy otwartym polu filtry ustepuja miejsca - pasek zostaje jednolinijkowy */
.bundle-filters.is-searching .bundle-filter {
    display: none;
}
.bundle-filters.is-searching .bundle-search-toggle {
    background: #1e151a;
    border-color: #1e151a;
    color: #fff;
}
.bundle-search-input,
.bundle-search-input:focus,
.bundle-search-input:focus-visible {
    width: 100%;
    box-sizing: border-box;
    /* 16px to minimum, przy ktorym iOS NIE przybliza strony po wejsciu w pole */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.2;
    color: #1e151a;
    background: transparent;
    border: 0 !important;
    border-radius: 999px;
    padding: 8px 40px 8px 16px;
    margin: 0;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.bundle-search-input::placeholder {
    color: #9b9096;
}
.bundle-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3b3238;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.bundle-search-clear:hover {
    color: #d82261;
}
/* Komunikat, gdy nic nie pasuje do wpisanego tekstu */
.bundle-search-empty {
    padding: 22px 4px 10px;
    color: #8a7f83;
    font-size: 14px;
    text-align: center;
}
/* Mobile: kafelki przewijane w bok, od krawedzi do krawedzi */
@media (max-width: 991px) {
    .bundle-filters-shell {
        margin: 0 -12px 4px;
        padding: 8px 12px 18px;
        top: 0; /* na telefonie nic nie wisi u gory, wiec pasek idzie pod sama krawedz */
    }
    .bundle-filters {
        -webkit-overflow-scrolling: touch;
    }
    /* Na dotyku przesuwa sie palcem - strzalki tylko zabieralyby miejsce */
    .bundle-filters-arrow {
        display: none !important;
    }
}
/* ===== Cena zestawu jak na makiecie: duza czerwona + przekreslona + oszczednosc ===== */
#box_productfull .product-price .price em.main-price {
    font-size: 22px;
    font-weight: 800;
    color: #1e151a;
}
/* Czerwona tylko cena promocyjna (Shoper dodaje klase .color przy przecenie) */
#box_productfull .product-price .price em.main-price.color {
    color: #e03a3a;
}
#box_productfull .product-price .price del {
    font-size: 15px;
    font-weight: 600;
    color: #8a7f83;
}
.bundle-saving {
    display: inline-block;
    background: #e5f3dc;
    color: #3f7d2c;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 12.5px;
    font-weight: 700;
    margin-left: 8px;
    white-space: nowrap;
    vertical-align: text-bottom;
}
/* ===== Galeria zestawu: rowne odstepy i zaokraglenia na obu wersjach ===== */
.sets-gallery .thumb-item img {
    border-radius: 6px;
}
/* ===== Karty produktow: ramka, hover, stan wybrany z checkiem ===== */
.bundle-product {
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.bundle-product:hover {
    border-color: #d82261;
    background: #fff6f7;
}
.bundle-product.selected {
    border-color: #d82261;
    background: #fdf0f3;
}
.bundle-product.selected::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d82261 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    box-shadow: 0 2px 6px rgba(60, 20, 35, .25);
}
.bundle-product.selected button.bundle-product-button {
    background: #d82261;
    border-color: #d82261;
    color: #fff;
}
/* Najechanie na wybrana karte: przycisk zmienia sie w COFNIJ, a ptaszek w X (klik usuwa wybor) */
.bundle-product.selected:hover button.bundle-product-button {
    font-size: 0;
}
.bundle-product.selected:hover button.bundle-product-button::after {
    content: "COFNIJ";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}
.bundle-product.selected:hover::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* Spojny ptaszek na wybranej kartce w wariancie (prawy gorny rog); wstazki bez checka */
.option_96 .property {
    position: relative;
}
.option_96 .property.active::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d82261 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    box-shadow: 0 1px 4px rgba(60, 20, 35, .25);
}
.bundle-product:hover button.bundle-product-button {
    background: #d82261;
    border-color: #d82261;
    color: #fff;
}
.bundle-product a {
    color: inherit;
    text-decoration: none;
}
.bundle-products {
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
}
.bundle-products .bundle-product {
    flex-basis: calc(25% - 8px);
}
@media (max-width: 600px) {
    .bundle-products .bundle-product {
        flex-basis: calc(50% - 5px);
    }
}
/* ===== Zakladka "DODAJ DO ZAMOWIENIA" (kartki) - zbedna na stronach zestawow ===== */
#heading7,
#collapse7 {
    display: none !important;
}
.card:has(> .card-header#heading7) {
    display: none !important;
}
/* ===== Ilosc "- 1 +" ukryta na mobile (zestaw zawsze 1 szt.) ===== */
@media (max-width: 991px) {
    #box_productfull form.form-basket .quantity_wrap {
        display: none !important;
    }
}
/* ===== Timer wysylki: na glownym ekranie mobile ukryty, widoczny tylko w popupie dodatkow =====
   !important konieczne: logika komunikatow w kreatorze wola $('#wysylka-text').show()
   po kazdej zmianie wyboru i ustawia inline display */
.bundle-mobile-tray #wysylka-text,
.bundle-mobile-tray #timer {
    display: none !important;
}
/* ===== Podsumowanie wyboru na ekranie dodatkow ===== */
.bundle-addons-summary {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #fff6f7;
    border: 1px solid #f7cbcf;
    border-radius: 12px;
}
.bundle-addons-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a7f83;
    margin-bottom: 8px;
}
.bundle-addons-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.bundle-addons-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1px solid #f0dfe4;
}
.bundle-addons-item span {
    font-size: 13px;
    font-weight: 600;
    color: #3b3238;
}
.bundle-addons-change {
    margin-left: auto;
    flex: none;
    border: 1px solid #d8cfd3;
    background: transparent;
    color: #8a7f83;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.bundle-addons-change:hover {
    border-color: #8a7f83;
    color: #3b3238;
}
/* ===== Ekran dodatkow (otwiera sie po skompletowaniu zestawu) ===== */
.bundle-addons-screen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(30, 10, 20, .45);
    display: none;
}
.bundle-addons-screen.open {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.bundle-addons-panel {
    position: relative;
    background: #fff;
    width: 100%;
    max-height: 92%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    padding: 0;
    box-sizing: border-box;
}
.bundle-addons-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 10px;
    min-height: 0;
}
@media (min-width: 992px) {
    .bundle-addons-screen.open {
        align-items: center;
    }
    .bundle-addons-panel {
        max-width: 620px;
        max-height: 86%;
        border-radius: 16px;
    }
}
/* Na mobile popup na caly ekran, bez wolnego pola u gory */
@media (max-width: 991px) {
    .bundle-addons-panel {
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}
/* Zamkniecie popupu: krzyzyk w prawym gornym rogu panelu */
.bundle-addons-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #eadfe3;
    border-radius: 50%;
    background: #fff;
    color: #3b3238;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.bundle-addons-close:hover {
    border-color: #d82261;
    color: #d82261;
}
/* Miejsce na krzyzyk robimy tylko pod tytulem i podtytulem.
   Na calym .bundle-addons-head skracaloby to rowniez rozowe podsumowanie zestawu. */
.bundle-addons-head h4 {
    margin: 0 0 4px;
    font-size: 18px;
    padding-right: 48px;
}
.bundle-addons-head p {
    margin: 0 0 14px;
    color: #8a7f83;
    font-size: 13px;
    padding-right: 48px;
}
.bundle-addons-footer {
    flex: none;
    margin-top: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f0e4e8;
    background: #fff;
}
/* Zielony pasek darmowej dostawy (wg makiety) */
.bundle-free-shipping {
    /* background: #eaf6e4; */
    /* border: 1px solid #bfe3ae; */
    /* border-radius: 12px; */
    /* padding: 10px 12px; */
    margin-bottom: 10px;
    font-size: 13px;
    color: #1e151a;
}
/* Zielone tlo na samym tekscie, na cala szerokosc paska postepu */
.bundle-free-text {
    display: block;
    background: #eaf6e4;
    border-radius: 3px;
    padding: 6px;
    text-align: center;
}
.bundle-free-shipping.ok {
    text-align: center;
    font-weight: 700;
    color: #2f5d22;
}
/* Ten sam ptaszek przy "Zestaw gotowy" (rozowe kolko) */
.bundle-step-check {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 3px;
    vertical-align: -2px;
    border-radius: 50%;
    background: #d82261 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
}
/* Ten sam ptaszek co przy "Dodano", w zielonym kolku */
.bundle-free-check {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    vertical-align: -3px;
    border-radius: 50%;
    background: #5aa545 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.bundle-free-bar {
    height: 6px;
    background: #f0f0f0;
    border-radius: 999px;
    margin: 8px 0;
    overflow: hidden;
}
.bundle-free-bar i {
    display: block;
    height: 100%;
    background: #5aa545;
    border-radius: 999px;
}
.bundle-free-cta {
    display: block;
    width: 100%;
    background: #e9f6e4;
    color: #5ba546;
    border: 2px solid #5ba546;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
/* Po najechaniu wypelniamy - przy jasnym tle stary ciemnozielony hover zostawialby
   zielony tekst na zielonym tle */
.bundle-free-cta:hover {
    background: #5ba546;
    color: #fff;
}
.bundle-addons-footer button.addtobasket {
    width: 100%;
    margin: 0 0 10px;
    /* rozmiar jak zwykly przycisk na desktopie */
    font-weight: 600 !important;
    border-radius: 3px !important;
    padding: .8rem .875rem !important;
    font-size: 0.95rem !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}
.bundle-addons-footer #wysylka-text {
    display: block !important;
    text-align: center !important;
    float: none !important;
    margin: 2px 0 8px;
}
.bundle-addons-footer #wysylka-text > span,
.bundle-addons-footer #wysylka-text .countdown-text {
    display: inline !important;
    float: none !important;
    margin-left: 0 !important;
    text-align: center;
}
.bundle-addons-back {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #8a7f83;
    text-decoration: underline;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
    text-align: center;
}
body.bundle-addons-open {
    overflow: hidden;
}
/* Kolka wyboru siedza w .variants - w popupie dodatkow to dubel informacji, chowamy */
.bundle-addons-body .bundle-selections {
    display: none !important;
}
/* ===== Dodatki: pigulka "Dodaj" zamiast TAK/NIE ===== */
.option.addon-toggle .property {
    display: none !important;
}
/* Pogrubione nazwy dodatkow (cena z ::after zostaje zwykla) */
.option.addon-toggle .option-flex-container .option-name {
    font-weight: 700;
}
.option.addon-toggle .option-flex-container .option-name::after {
    font-weight: 400;
}
/* Opcje z wlasnym spanem (kartka): zwykla grubosc dla dopiskow, bold tylko na nazwie (JS owija w <b>) */
.option.addon-toggle .option-flex-container .option-name > span {
    font-weight: 400;
}
.option.addon-toggle .option-flex-container .option-name > span > b {
    font-weight: 700;
}
.bundle-addon-add {
    flex: none;
    margin-left: auto;
    border: 2px solid #d82261;
    background: #fff;
    color: #d82261;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    padding: 7px 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.bundle-addon-add.added {
    background: #d82261;
    color: #fff;
}
/* Ten sam "ptaszek" co na kartach produktow */
.bundle-addon-check {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 3px;
    vertical-align: -1px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Puls po kliknieciu kolka/przycisku: przycisk ciemnieje, nie tylko rosnie */
/* Puls po wskazaniu kolka: delikatne rozowe tlo zamiast pelnego wypelnienia */
button.bundle-product-button.animate_pulse {
    background: #fde4ec;
    border-color: #f0a3bf;
    color: #b81b50;
}
/* Przycisk koszyka w stanie "Wybierz ..." - wyglada jak nieaktywny, ale klik przewija do kroku */
button.addtobasket.bundle-incomplete {
    opacity: .75;
    cursor: pointer;
}
/* ===== Listy kolorow wstazki (92) i kartek (96): jeden rzad, przewijany w prawo ===== */
.option_92 .option-flex-container > div:last-of-type,
.option_96 .option-flex-container > div:last-of-type {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    /* wrapper ma inline'owy min-width: fit-content, ktory wygrywa z max-width i rozpycha strone */
    min-width: 0 !important;
    padding-bottom: 4px;
}
.option_92 .option-flex-container > div:last-of-type::-webkit-scrollbar,
.option_96 .option-flex-container > div:last-of-type::-webkit-scrollbar {
    display: none;
}
.option_92 .property,
.option_96 .property {
    flex: none;
}
/* Strzalki przewijania - desktop i mobile (myszka nie przewija w bok, a kartek nigdy nie widac wszystkich) */
.option_92 .option-flex-container,
.option_96 .option-flex-container {
    position: relative;
}
.addon-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #eadfe3;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 2;
    color: #3b3238;
    padding: 0;
    z-index: 2;
}
.option-flex-container.no-overflow .addon-scroll-btn {
    display: none;
}
.addon-scroll-btn:hover {
    border-color: #d82261;
    color: #d82261;
}
.addon-scroll-left {
    right: 44px;
}
.addon-scroll-right {
    right: 10px;
}
/* ===== Galeria mobilna odtworzona z kopii (bez karuzeli skina) ===== */
.sets-gallery.bundle-restored {
    display: flex;
    gap: 0;
    margin-top: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.sets-gallery.bundle-restored::-webkit-scrollbar {
    display: none;
}
.sets-gallery.bundle-restored .thumb-item {
    flex: 0 0 calc(25% - 6px);
}
.sets-gallery.bundle-restored .thumb-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
/* Prawa kolumna z wyborem przyklejona na desktopie.
   Brakowalo tu zestawow 1534 i 1583 - na nich nie przypinala sie w ogole. */
@media (min-width: 992px) {
    #shop_product1425 .bottomborder,
    #shop_product1487 .bottomborder,
    #shop_product1501 .bottomborder,
    #shop_product1534 .bottomborder,
    #shop_product1583 .bottomborder {
        position: sticky;
        /* Przypieta gora pod belka sklepu - wybrane produkty maja byc widoczne przy
           przewijaniu kafelkow. Bez max-height i przewijania w srodku (nikt nie wiedzial,
           ze kolumna sie przewija); dolna czesc kolumny odslania sie, gdy lista kafelkow
           dobiega konca i kolumna rusza razem ze strona. */
        top: 75px;
    }
    /* Dymek "najnizsza cena z 30 dni" jest wysrodkowany na ikonce, a ta stoi przy prawej
       krawedzi kolumny - przyklejamy go do prawej, zeby po ukryciu przewijania nie byl przyciety. */
    .bottomborder .info-container .info-tooltip {
        left: auto;
        right: 0;
        transform: none;
    }
    .bottomborder .info-container .info-tooltip::after {
        left: auto;
        right: 10px;
        transform: none;
    }
}

@media (max-width: 991px) {
    /* Dopisane 1534 i 1583 - wczesniej na tych zestawach nazwa dublowala sie na mobile */
    #shop_product1425 #box_productfull .col-lg-4 h2.name,
    #shop_product1487 #box_productfull .col-lg-4 h2.name,
    #shop_product1501 #box_productfull .col-lg-4 h2.name,
    #shop_product1534 #box_productfull .col-lg-4 h2.name,
    #shop_product1583 #box_productfull .col-lg-4 h2.name,
    #shop_product1425 #box_productfull .col-lg-4 .product-info-5,
    #shop_product1487 #box_productfull .col-lg-4 .product-info-5,
    #shop_product1501 #box_productfull .col-lg-4 .product-info-5,
    #shop_product1534 #box_productfull .col-lg-4 .product-info-5,
    #shop_product1583 #box_productfull .col-lg-4 .product-info-5 {
        display: none;
    }
}
/* Okruchy ukryte na zestawach takze na desktopie (kto wszedl w zestaw, nie cofa sie po nich) */
.breadcrumbs .innerbreadcrumbs {
    display: none !important;
}
.bundle-product {
    flex-basis: 25%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.bundle-products {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-left: -10px;
    margin-right: -10px;
}
.bundle-product-image {
    overflow: hidden;
}
.bundle-product-image img {
    scale: 1.2;
}
/* Zdjecie na karcie produktu przyciete rownomiernie po 10px od gory i od dolu */
.bundle-product .bundle-product-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: -15px 0 -10px 0;
}
.bundle-product .bundle-product-image {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
/* Plakietka "Nowość" - lewy gorny rog, zeby nie kolidowala z ptaszkiem wyboru po prawej */
.bundle-new-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: #d82261;
    border-radius: 999px;
    padding: 2px 8px;
    pointer-events: none;
}
/* Popularne zestawy: to samo przyciecie i zaokraglenie zdjec */
.bundle-preset-product .bundle-product-image {
    border-radius: 5px;
    overflow: hidden;
}
.bundle-preset-product .bundle-product-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: -10px 0;
}
.bundle-product-title {
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    padding: 8px 5px;
}
.bundle-product-notes {
    text-transform: uppercase;
    font-size: 9px;
    text-align: center;
    padding: 0 5px;
}
button.bundle-product-button {
    padding: 10px;
    margin-top: 5px;
    width: 100%;
    border: 1px solid #f7cbcf;
    font-weight: 600;
    border-radius: 5px;
    color: #333;
    text-transform: uppercase;
    background: #fff6f7;
    font-size: 12px;
}
.bundle-selections {
    display: flex;
    justify-content: space-evenly;
    margin-top: 15px;
    margin-bottom: 20px;
}
.bundle-selections.hidden-lg-up {
    position: sticky;
    top: 63px;
    background: #fff;
    padding-top: 10px;
    margin-left: -12px;
    padding-left: 10px;
    margin-right: -12px;
    padding-right: 10px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 2;
}
.bundle-selection {
    position: relative;
    flex-basis: 25%;
    padding: 2px;
    cursor: pointer; /* klik przelacza liste na ten krok */
}

.bundle-selection .remove {
    position: absolute;
    top: 0;
    right: 0;
    background: #e9e9e9;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
    cursor: pointer;
}

.selection-preview img.image {
    border: 1px solid #bbb;
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

.selection-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bundle-selection.empty .remove {
    display: none;
}
/* Krok pelny + klik "Wybierz": X-y wybranych produktow swieca na czerwono i pulsuja */
.bundle-selection .remove {
    transition: background .15s, color .15s;
}
.bundle-selection .remove.bundle-full-hint {
    background: #e03a3a;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 0 3px rgba(224, 58, 58, .25);
    animation: bundle-full-hint-pulse .6s ease-in-out 3;
}
@keyframes bundle-full-hint-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
.bundle-selection .placeholder{
    text-transform: uppercase;
    color: #424242;
    font-size: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.bundle-selection:not(.empty) .placeholder{
    display: none;
}
.bundle-selection .name{
    font-size: 12px;
    padding-top: 11px;
    text-align: center!important;
}
.bundle-selection.empty .name{
    display: none;
}
span.image-text {
    position: absolute;
    font-size: 10px;
    color: #b9b9b9;
    text-align: center;
    width: 100%;
    max-width: 100px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bundle-selection:not(.empty) .image-text{
    display: none;
}
button.addtobasket[disabled] {
    opacity: 0.7;
}
@media (max-width: 600px) {
     .bundle-product {
         flex-basis: 50%;
     }
}
@-webkit-keyframes shakeX {
    0%,to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}

@keyframes shakeX {
    0%,to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}

.animate_shakeX {
    -webkit-animation-name: shakeX;
    animation-name: shakeX;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.animate_pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}
.bundle-preset-product {
    display: flex;
    flex-direction: column;
    width: calc(50% - 2.5px);
}

.bundle-preset-products {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

button.bundle-preset {
    padding: 10px;
    margin-top: 0;
    width: 100%;
    border: 1px solid #f7cbcf;
    font-weight: 600;
    border-radius: 5px;
    color: #333;
    text-transform: uppercase;
    background: #fff6f7;
}

.bundle-preset-product span {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.1rem;
    height: 2.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    margin: 5px 0;
}
.bundle-preset-product img{
    scale: 1.2;
}
.bundle-presets {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: scroll;
}

.bundle-preset-card {
    padding: 5px;
    border: 1px solid #f7cbcf;
    border-radius: 5px;
    max-width: 250px;
    min-width: 250px;
    transition: border-color .15s, background .15s;
}
/* Najechanie na gotowy zestaw: ramka i przycisk jak przy karcie produktu */
.bundle-preset-card:hover {
    border-color: #d82261;
    background: #fff6f7;
}
.bundle-preset-card:hover button.bundle-preset {
    background: #d82261;
    border-color: #d82261;
    color: #fff;
}
/* Strzalki przewijania popularnych zestawow: rowne kolo (padding + line-height robily z nich jajo) */
.bundle-presets-body button.scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    line-height: 1;
}

/* ===== Galeria zestawu: miniaturka wideo + wlasny podglad pelnoekranowy ===== */
.sets-gallery .thumb-item {
    cursor: pointer;
}
.bundle-video-thumb {
    position: relative;
}
.bundle-video-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
/* Trojkat odtwarzania na srodku miniaturki */
.bundle-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(30, 21, 26, .55);
    pointer-events: none;
}
.bundle-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
}

/* ===== Podglad pelnoekranowy ===== */
.bundle-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(18, 10, 14, .94);
    display: none;
}
.bundle-lightbox.open {
    display: block;
}
.bundle-lb-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bundle-lb-track::-webkit-scrollbar {
    display: none;
}
.bundle-lb-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 12px;
    box-sizing: border-box;
}
.bundle-lb-slide img,
.bundle-lb-slide video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 8px;
    background: #000;
}
.bundle-lb-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.bundle-lb-close:hover {
    background: rgba(255, 255, 255, .3);
}
.bundle-lb-counter {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    pointer-events: none;
}
.bundle-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.bundle-lb-nav:hover {
    background: rgba(255, 255, 255, .3);
}
.bundle-lb-nav[disabled] {
    opacity: 0;
    pointer-events: none;
}
.bundle-lb-prev {
    left: 10px;
}
.bundle-lb-next {
    right: 10px;
}
/* Na mobile strzalki sa zbedne - przewija sie palcem */
@media (max-width: 991px) {
    .bundle-lb-nav {
        display: none;
    }
    .bundle-lb-slide {
        padding: 56px 0 40px;
    }
}

/* ===== Kartka: wzor + "Twoje zyczenia" + pole zyczen w jednej ramce (2.js owija je w .kartka-box) ===== */
.kartka-box {
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 10px;
}
.kartka-box .option.option_96 .option-flex-container,
.kartka-box .option.option_120 .option-flex-container {
    border: 0;
    border-radius: 0;
    padding: 0;
}
.kartka-box .option.option_96,
.kartka-box .option.option_120,
.kartka-box .option.option_121 {
    margin: 0;
}
/* Odstep miedzy rzedem kartek a "Twoje zyczenia" i polem */
.kartka-box .option.option_120 {
    margin-top: 14px;
}
.kartka-box .option.option_121 {
    margin-top: 12px;
}
/* Strzalki przewijania kartek: bez wewnetrznego paddingu wyladowaly nizej - wyrownanie do naglowka "Wybierz kartke" */
.kartka-box .addon-scroll-btn {
    top: -10px;
}
.kartka-box .addon-scroll-right {
    right: 10px;
}
.kartka-box .addon-scroll-left {
    right: 44px;
}

/* ===== Przelacznik "Twoje zyczenia" (bezplatne - bez "Dodaj", zeby nie wygladalo na doplate) ===== */
.bundle-addon-add.bundle-switch {
    width: 52px;
    height: 32px;
    padding: 3px;
    border: 0;
    border-radius: 999px;
    background: #d9cdd2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background .15s;
}
.bundle-addon-add.bundle-switch.added {
    background: #d82261;
    justify-content: flex-end;
}
.bundle-switch-knob {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(42, 35, 39, .25);
}

/* Naglowek "1. Wybierz kartke:" w ramce kartki */
.kartka-box .option.option_96 .option-name {
    font-weight: 700;
}

/* Wiersz w podsumowaniu popupu dodatkow dziala jak "Zmien" */
.bundle-addons-item {
    cursor: pointer;
}