html {
    font-size: 100%;
}

[data-swatch-id].is-active {
    border: 1px solid black;
    position: relative;
}

[data-swatch-id].is-active:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #fff;
}

.cms-index-index #dynamic-interaction-hp-content {
    margin: 32px 0;
}

.cms-index-index .base-carousel__carousel .product-flag:after {
    content: "•";
    margin-left: 4px;
    margin-right: 4px;
}

.cms-index-index .base-carousel__carousel .product-flag-discount:nth-child(2) {
    display: none;
}

.base-carousel__carousel .product-flag:last-child:after {
    content: none;
}

.cms-index-index .homepage-two-column-left-wrapper.widget-wrapper {
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 768px) {
    .cms-index-index .homepage-two-column-left-wrapper.widget-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .cms-index-index .homepage-two-column-left-wrapper.widget-wrapper .base-carousel__carousel {
        flex-flow: row wrap;
    }

    .cms-index-index .homepage-two-column-left-wrapper.widget-wrapper .base-carousel__carousel > .catalog-product__grid-product {
        width: 100%;
        flex: 0 1 calc(50% - 8px);
    }

    .cms-index-index .homepage-two-column-left-wrapper.widget-wrapper [data-dots-wrapper] {
        display: none;
    }
}

.cms-index-index .homepage-two-column-right-wrapper.widget-wrapper {
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 32px;
}

@media (min-width: 768px) {
    .cms-index-index .homepage-two-column-right-wrapper.widget-wrapper {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
    }

    .cms-index-index .homepage-two-column-right-wrapper.widget-wrapper .base-carousel__carousel {
        flex-flow: row wrap;
    }

    .cms-index-index .homepage-two-column-right-wrapper.widget-wrapper .base-carousel__carousel > .catalog-product__grid-product {
        width: 100%;
        flex: 0 1 calc(50% - 8px);
    }

    .cms-index-index .homepage-two-column-right-wrapper.widget-wrapper [data-dots-wrapper] {
        display: none;
    }
}

/* Align the widget title (e.g. "pomysł dla mamy") flush-left with the
   product images below it — the title wrapper carries a pl-4 lg:pl-8 inset
   from the markup that the graphics underneath do not have. */
.cms-index-index [data-title-wrapper] {
    padding-left: 0;
}

@media (min-width: 768px) {
    .cms-index-index [data-title-wrapper].empty-title {
        margin: 0!important;
        padding: 0!important;
    }
}

.cms-index-index [data-dots-wrapper]:empty {
    margin: 0!important;
    padding: 0!important;
}

.cms-index-index .base-carousel__container .product-image-container {
    margin-bottom: 0;
}

.cms-index-index .base-carousel__container a {
    color: #000!important;
}

.cms-index-index .base-carousel__container button:hover {
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    border-color: rgb(0 0 0/var(--tw-bg-opacity));
}

.cms-index-index .base-carousel__container button:focus {
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    border-color: rgb(0 0 0/var(--tw-bg-opacity));
}

.cms-index-index .base-carousel__container button.wishlist {
    transition: 0.3s all;
}

.cms-index-index .base-carousel__container button.wishlist > svg > path {
    transition: 0.3s all;
}

.cms-index-index .base-carousel__container button.wishlist:hover {
    background-color: #000;
}

.cms-index-index .base-carousel__container button.wishlist:hover > svg > path {
    fill: #fff;
}

.cms-index-index .base-carousel__container span.product-flag {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: .75rem;
    font-weight: 400;
    line-height: .875rem;
    user-select: none;
}

.cms-index-index .base-carousel__container .special-flag span.product-flag > span.product-flag {
    padding: 6px;
    line-height: 1px;
    font-size: 12px;
}

@media (min-width: 1024px) {
    .cms-index-index .base-carousel__container span.product-flag {
        font-size: .875rem;
        line-height: 1rem;
    }
}

.cms-index-index .base-carousel__container {
    --items-number: 1.25;
    --frame: max(calc(1 - var(--is-carousel)), var(--is-carousel) * 4);
    --is-carousel: 1;
    --frames: 2;
    --delay: calc(-1s * ((var(--frame) - 1) / var(--frames)));
    animation: carousel-states 1s var(--delay) paused;
    --gap: 16px;
    --tile-width: calc(
        (100% / var(--items-number)) - var(--gap) +
        (var(--gap) / var(--items-number))
    );
}

@media (min-width: 640px) {
    .cms-index-index .base-carousel__container {
        --items-number: 2;
    }
}

@media (min-width: 768px) {
    .cms-index-index .base-carousel__container {
        --items-number: 3;
    }
}

@media (min-width: 1024px) {
    .cms-index-index .base-carousel__container {
        --items-number: 4;
    }
}

.cms-index-index .base-carousel__carousel > * {
    min-width: var(--tile-width);
    width: var(--tile-width);
}

@keyframes carousel-states {
    0% {
        --tile-width: calc(
            ((100% / var(--items-number)) - var(--gap)) +
            (var(--gap) / var(--items-number))
        );

        flex-wrap: wrap;
    }

    100% {
        --tile-width: calc(
            (100% / var(--items-number)) - var(--gap) +
            (var(--gap) / var(--items-number))
        );
    }
}

/* Carousel pagination dots are real <button>s (keyboard operable, named).
   Neutralise the theme-wide button styling (padding, border, uppercase,
   transition, hover/focus colours) so they keep the exact 8px dot /
   24px pill look of the former <i> markers; the colours mirror the
   tailwind classes bg-bbk-grey / bg-black the JS toggles. */
.cms-index-index [data-dots-wrapper] > button[data-dot],
.cms-index-index [data-dots-wrapper] > button[data-dot]:hover,
.cms-index-index [data-dots-wrapper] > button[data-dot]:focus,
.cms-index-index [data-dots-wrapper] > button[data-dot]:active {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-image: none;
    background-color: rgb(196 196 196);
    box-shadow: none;
    vertical-align: baseline;
    transition: none;
}

.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black,
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black:hover,
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black:focus,
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black:active {
    border-radius: .5rem;
    background-color: #000;
}

.cms-index-index [data-dots-wrapper] > button[data-dot]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* The brand line is a <p> (it used to be a non-semantic <h5>); keep its mb-1
   spacing, which the landing-wrapper "p { margin: 0 }" rule would otherwise
   swallow. */
.cms-index-index .base-carousel__carousel p.mb-1 {
    margin-bottom: 4px;
}

/* WCAG 2.5.8 Target Size (Minimum): the pagination dots stay 8px (and the active
   one a 24x8 pill) but their button box is padded out to the required 24x24
   pointer target. background-clip keeps the paint on the content box, the
   negative block margin keeps the dots row exactly as tall as before, and the
   wrapper gap is absorbed by the padding so the dots never overlap. */
.cms-index-index [data-dots-wrapper] {
    gap: 0;
}

.cms-index-index [data-dots-wrapper] > button[data-dot],
.cms-index-index [data-dots-wrapper] > button[data-dot]:hover,
.cms-index-index [data-dots-wrapper] > button[data-dot]:focus,
.cms-index-index [data-dots-wrapper] > button[data-dot]:active {
    box-sizing: content-box;
    padding: 8px;
    margin-block: -8px;
    background-clip: content-box;
    border-radius: 9999px;
}

/* The active dot is a pill: with the padding above, an 8px radius would be fully
   consumed by the padding and square off the painted content box, so ask for a
   radius large enough to still clamp to a pill on the 24x8 paint area. */
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black,
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black:hover,
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black:focus,
.cms-index-index [data-dots-wrapper] > button[data-dot].bg-black:active {
    border-radius: 9999px;
}