.garage {
    background-repeat: no-repeat;
    background-position: center;
}
.li_color {
    cursor: pointer;
    display: inline-block;
    margin-right: 0.2857em;
    margin-top: 0.18em;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0);
    height: 2.5rem;
    width: 2.5rem;
}
.li_color:first-of-type {
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.li_border_test {
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.span_li{
    display: block;

    border: 1px solid #000;
}

.col-lgg-2{
    float: left;
    width: 15%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.col-xs-18{
    float: left;
    width: 50%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.li_selected{
    background-color: #ffb300;
    border: 1px solid #fff;
    border-radius: 100%;
    color: white;
    width: 40%;
    height: 40%;
    line-height: 10%;
    font-size: 100%;
    position: absolute;
    bottom:-2px;
    right:-2px;

}
.li_selected:after {
    content: "\2713";
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.li_selected_bg{
    background-color: #ffb300;
    border: 1px solid #fff;
    border-radius: 100%;
    color: white;
    width: 15%;
    padding-top: 14%;
    line-height: 10%;
    font-size: 100%;
    position: absolute;
    bottom:-1px;
    right: 1px;
}
.li_selected_bg:after {
    content: "\2713";
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
@media (max-width:1199px) {
    .li_selected_bg {
        width: 7%;
        padding-top: 6.5%;
    }
    .li_selected_bg:after {
        font-size: 2vw;
    }
}

.li_selected_wheel{
    background-color: #ffb300;
    border: 1px solid #fff;
    border-radius: 100%;
    color: white;
    width: 15%;
    height: 15%;
    line-height: 10%;
    font-size: 1vw;
    position: absolute;
    bottom:10%;
    right: 10%;
}
.li_selected_wheel:after {
    content: "\2713";
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

@media (max-width: 1199px ) {
    .li_selected_wheel{
        font-size: 100%;
    }
    #rim_name {
        text-align: right !important;
    }
}

@media (min-width: 1938px ) {
    .garage {
        background-size: cover;
    }
    .garage img {
        padding: 0 26%;
        width: 100%;
    }
    .garage img {
        padding: 0 26%;
        width: 100%;
    }

}
@media (min-width: 768px) {
    .col-sm-1-8th {
        width: 12.5%;
        float: left;
    }
    .conf-slider-fixed {
        margin-top: calc(100vw / 1.87) !important;
    }
}
.single-rim img{
    width: 100%;
    max-width: 100%;
}
.single-rim {
    padding-left: 0;
    padding-right: 0;
}
#wheel_url.affix-top, #wheel_url.affix-bottom,
#formWheel.affix-top, #formWheel.affix-bottom {
    margin-right: 0;
    padding-right: 0;
}
@media (max-width: 1199px) {
    #wheel_url.affix, #wheel_url.affix-top, #wheel_url.affix-bottom,
    #formWheel.affix, #formWheel.affix-top, #formWheel.affix-bottom {
        position: static !important;
        top: auto !important;
        width: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    #formWheel {
        position: static !important;
    }
}
#wheel_url .rim-link-row {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#wheel_url .rim-link-row > [class*="col-"] {
    min-width: 0;
}
/* Mobile and tablet "Kupuję:" menu: fixed-width wheel/rim thumbnail on the left, links on
   the right, and the standard 15px inset from the screen edge (the .row's -15px
   margins otherwise pushed the arrows flush against / past the left edge). On tablets the
   col-sm-3 thumbnail was 160-270px wide. */
@media (max-width: 1199px) {
    #wheel_url {
        padding-left: 15px;
        padding-right: 15px;
    }
    #wheel_url .rim-link-row {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 15px;
    }
    #wheel_url .rim-link-row > .col-xs-4 {
        flex: 0 0 90px;
        width: 90px;
        padding-left: 0;
        padding-right: 10px;
    }
    #wheel_url .rim-link-row > .col-xs-4 img.img-responsive {
        width: 100%;
        max-width: 100%;
    }
    #wheel_url .rim-link-row > .col-xs-8 {
        flex: 1 1 auto;
        width: auto;
        padding-left: 5px;
        padding-right: 0;
    }
    /* The global .link-rarr arrow is pulled 18px to the left of its text, which here put it
       on top of the thumbnail; keep it next to the text instead */
    #wheel_url .rim-link-row .link-rarr svg,
    #wheel_url .rim-link-row .link-rarr img.svg {
        margin-left: 0;
    }
}
#wheel_url .rim-link-row .link-rarr {
    margin-top: 0;
}
/* No focus frame around the products menu links after a mouse click (Bootstrap a:focus);
   keyboard navigation keeps it */
#wheel_url a:focus:not(:focus-visible) {
    outline: none;
}
.snowflake-icon {
    color: #2196f3;
}
.sun-icon {
    color: #ff9800;
}
select {
    padding-right: 25px !important;
}
#rim_name {
    height: 1em;
    margin-top: 13px;
    float: right;
    font-weight: 700;
    color: #ffb300;
    margin-right: 45%;
}
#rim-size {
    margin: 10px 0 5px 0;
    display: inline-block;
}
#rim-size.form-checkbox input[type=checkbox]:not(old) + label > span,
#rim-season.form-checkbox input[type=checkbox]:not(old) + label > span:first-child {
    margin-right: 4px;
}
#rim-size.form-checkbox input[type=checkbox]:not(old):checked + label > span > span,
#rim-season.form-checkbox input[type=checkbox]:not(old):checked + label > span:first-child > span {
    position: relative;
    width: 12px;
    height: 12px;
    margin: 1px 0 0 1px;
}
#rim-size.form-checkbox input[type=checkbox]:not(old):checked + label > span > span:after,
#rim-season.form-checkbox input[type=checkbox]:not(old):checked + label > span:first-child > span:after {
    color: white;
    content: "\2713";
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.sep {
    border-bottom: 1px solid #ccc;
}
#wallpaper-select {
    margin: 0 -2px 10px -2px;
}
.scene-thumb {
    padding: 0 2px;
}
.scene-thumb img{
    cursor: pointer;
}
.turn-fullscreen:not(#big) {
    cursor: pointer;
}
.conf-header {
    border-bottom: 2px solid #000;
    width: 100%;
    margin-bottom: 4px;
    font-weight: 700;
    font-size:1.1em;
}
.conf-slider-text {
    position: absolute;
    color: white;
    text-shadow: 1px 1px black;
    z-index: 1;
    font-size: 2em;
    top: 4vw;
}
.conf-slider-text span{
    font-weight: 700;
}
.conf-slider-text-mobile {
    display: none;
}
#content-start-conf {
    margin-top: 20px;
}
@media (max-width: 767px) {
    #rim-size {
        width: 100%;
    }
    #rim_name {
        margin-bottom: 20px;
    }
    .conf-slider-text {
        display: none;
    }
    .conf-slider .carousel-indicators {
        margin-bottom: 0;
    }
    .conf-slider .carousel-indicators li, .conf-slider .carousel-indicators li.active {
        background-color: #cecece;
        border-color: #cecece;
    }
    .conf-slider .carousel-indicators li.active {
        background-color: #F1C10F;
        border-color: #F1C10F;
    }
    .conf-slider-text-mobile {
        display: block;
        margin-bottom: 15px;
        font-size: 18px;
        text-align: center;
    }
    .conf-slider-text-mobile span {
        font-weight: 700;
    }
    #conf-slider-wrapper {
        position: fixed;
        z-index: 3;
        box-shadow: -9px -1px 32px black;
    }
    #content-start-conf {
        margin-top: calc(100vw / 1.87) !important;
    }
}
/* Mobile configurator: the top menu slides away while scrolling down and comes back when scrolling
   up (class set by wheels_scripts); the fixed car photo below it moves up by the visible part of the
   menu (--conf-header-shift, also set there) */
@media (max-width: 767px) {
    #header,
    #conf-slider-wrapper {
        transition: transform 0.25s ease;
    }
    body.conf-header-hidden #header {
        transform: translateY(-100%);
    }
    body.conf-header-hidden #conf-slider-wrapper {
        transform: translateY(calc(-1 * var(--conf-header-shift, 50px)));
    }
}
.conf-wallpaper {
    height: 100vh;
    margin-left: -15px;
    margin-right: -15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: black;
    display:none;
}

@media screen and (max-device-width: 767px) and (orientation:landscape)  {
    body {
        overflow: hidden;
    }
    #header {
        display: none;
    }
    .container-fluid > div:not(.conf-wallpaper){
        display: none;
    }
    footer {
        display: none;
    }
    .conf-wallpaper {
        display: block;
    }
}
#scene-text-3 {
    color: black;
    text-shadow: 1px 1px white;
}
.wallpaper-visible {
    display: block !important;
}
.rest-invisible {
    display: none !important;
}

.conf-slider .carousel-inner {
    margin-bottom: 0px;
}
.share-mask {
    width: 26px;
    height: 26px;
    z-index: 999;
    display: inline-block;

}
.conf-information {
    margin: 30px 0 50px 0;
}
.conf-information li{
    text-indent: 5px;
}
/* Save button of the configurator: looks like the product heart (.mark-product), without that class so
   the "observe product" handler of add_to_cart.js does not run on it */
.wheel-save-config {
    padding: 0;
    margin: -1px 2px 0 0;
    border: 0;
}
/* Small remove button in the top right corner of a saved configuration; it used to be about 57x58px
   and covered most of the thumbnail, so a click on the thumbnail removed it */
.remove-saved-config {
    position: absolute;
    top: 3px;
    right: 18px;
    z-index: 1;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1;
    color: #ffb300;
}
.remove-saved-config:hover, .remove-saved-config:focus, .remove-saved-config:active {
    color: #FFC107 !important;
}
#big {
    cursor: default !important;
}
.wheels-single-url {
    background-image: url(/img/rarr.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
    display: inline-block;
    line-height: 1.1em;
}
/* Saved configurations are shown right below "Zapisz konfigurację" (section 2) on every screen;
   the copy below the products (section 1) is not used */
#configs-section-1-wrapper {
    display: none;
}
.configs-section-1 {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 5px;
    margin-bottom: 0px;
    padding-bottom: 20px;
}
.configs-section-2 {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 5px;
    margin-bottom: 0px;
    padding-bottom: 20px;
}
.configs-section-1 .panel-default, .configs-section-2 .panel-default {
    box-shadow: none;
    margin-bottom: 0;
}
.configs-section-1 .panel-heading, .configs-section-2 .panel-heading {
    background-color: transparent !important;
    text-transform: none;
    padding-left: 0;
    padding-bottom: 15px;
}
#wheel-rim {
    margin-left: 0;
    margin-right: 0;
}
#wallpaper-controls {
    position: absolute;
    top:-45px;
    width: 100%;
    color: white;
    font-size: 35px;
}
#wallpaper-controls div {
    width: 100px;
    margin: 0 auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12% !important;
    padding: 48px 0 0 0;
}
#wallpaper-controls i {
    cursor: pointer;
}
#conf-wallpaper #share-buttons-wallpaper {
    position: absolute;
    top: 0px;
    right: 5%;
}
#wallpaper-save svg {
    height: 30px;
    width: 29px;
    margin-right: 5px;
}
#wallpaper-controls polygon, #wallpaper-controls line {
    fill: white;
    stroke: white;
}
#wallpaper-close svg {
    height: 29px;
    width: 25px;
}
#wallpaper-controls a {
    cursor: pointer;
}
#wallpaper-controls a:hover polygon, #wallpaper-controls a:hover line {
    fill: black;
    stroke: black;
}
#conf-wallpaper .share-print:hover, #conf-wallpaper .wheel-save-config i:hover, #conf-wallpaper .at-svc-email:hover,
#conf-wallpaper .at-svc-email:focus, #conf-wallpaper .at-svc-email:active, #conf-wallpaper .at-svc-facebook:hover,
#conf-wallpaper .at-svc-facebook:focus, #conf-wallpaper .at-svc-facebook:active, #conf-wallpaper .at-svc-google_plusone_share:hover,
#conf-wallpaper .at-svc-google_plusone_share:focus, #conf-wallpaper .at-svc-google_plusone_share:active {
    margin-top: 0px !important;
    transform: translateY(0px) !important;
}
.conf-wallpaper {
    height: 100vh;
    margin-left: -15px;
    margin-right: -15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: black;
}
#wallpaper-close-notice {
    position: absolute;
    display: block;
    font-size: 18px;
    color: black;
    background-color: white;
    line-height: 1em;
    padding: 2px;
    left: 50%;
}
@media (max-width: 767px) {
    #conf-wallpaper-new a.at-icon-wrapper.at-share-btn, #conf-wallpaper-new #wheel-save-config {
        float: right !important;
        clear: both !important;
    }
    #conf-wallpaper-new #wheel-save-config {
        margin: 8px 0px 5px 0 !important;
    }
    #conf-wallpaper-new a.at-icon-wrapper.at-share-btn {
        margin-right: 0 !important;
    }
    #conf-wallpaper-new #share-buttons-wallpaper {
        top: 0 !important;
        right: 0px !important;
    }
}
.glyphicon-fullscreen {
    color: #ffb300;
}

/* Wheel product modal (slides up from the bottom, shows full product data) */
body.wheel-modal-open {
    overflow: hidden;
}
/* Hide the Trusted Shops floating trustbadge widget while the modal is open,
   it has a dynamic id suffix (trustbadge-container-<hash>) and a high z-index,
   so it would otherwise float on top of the modal content. */
body.wheel-modal-open [id^="trustbadge-container-"],
body.wheel-modal-open [id^="minimized-trustbadge-"],
body.wheel-modal-open [id^="trustbadge-minimized-menu-button-"] {
    display: none !important;
}
.wheel-product-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wheel-product-modal-overlay.active {
    display: block;
    opacity: 1;
}
.wheel-product-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    max-height: 75vh;
    width: 100%;
    background-color: #fff;
    z-index: 2001;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    transition: height 0.35s ease;
    visibility: hidden;
}
.wheel-product-modal.active {
    height: 75vh;
    visibility: visible;
}
.wheel-product-modal-body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 35px;
    padding-bottom: 20px;
    /* Acts as the Bootstrap "container" for the top-level .row inside the modal.
       Without this padding, the row's -15px negative margins have nothing to
       cancel out and bleed straight past the modal's edges, getting clipped by
       overflow-x:hidden and cutting off content on the right. With this padding
       present, the bleed/cancel mechanism works exactly like on a normal page. */
    padding-left: 15px;
    padding-right: 15px;
}
/* Guard against any inner content (long unwrapped text, fixed-width tables/images)
   forcing the modal wider than the viewport on small screens.
   Bootstrap's ".row" relies on negative left/right margins to bleed back out
   to the edges of its padded parent column - clamping it to max-width:100%
   (relative to its own content box, which does NOT include those negative
   margins) breaks that bleed and shrinks every nested .row/.col pair by the
   parent's padding (usually 30px), compounding with each nesting level. That
   was the real cause of the "big empty gap" on the right of the product
   details table inside the modal. So every element gets the guard EXCEPT
   ".row", which must stay free to use its negative margins normally. */
.wheel-product-modal-body,
.wheel-product-modal-body *:not(.row) {
    max-width: 100%;
    box-sizing: border-box;
}
.wheel-product-modal-body td,
.wheel-product-modal-body th {
    word-break: break-word;
    overflow-wrap: break-word;
}
.wheel-product-modal-body img {
    height: auto;
}
.wheel-product-modal-close {
    position: absolute;
    top: 6px;
    right: 15px;
    z-index: 2002;
    background: transparent;
    border: 0;
    font-size: 2em;
    line-height: 1;
    color: #333;
    cursor: pointer;
}
.wheel-product-modal-close:hover,
.wheel-product-modal-close:focus {
    color: #ffb300;
}
.wheel-product-modal-loading {
    text-align: center;
    padding: 60px 0;
}
@media (max-width: 767px) {
    .wheel-product-modal.active {
        height: 85vh;
        max-height: 85vh;
    }
    /* On small screens force table columns to share the available width instead of
       growing to fit their longest unbroken line of text (e.g. long car model names),
       which was pushing the whole modal wider than the viewport. */
    .wheel-product-modal-body table {
        table-layout: fixed;
        width: 100%;
    }
    /* With table-layout:fixed the two columns would otherwise split 50/50,
       leaving a large empty-looking gap after short values (e.g. "Nowy").
       Keep the label column narrow and let the value column use the rest. */
    .wheel-product-modal-body table td:first-child {
        width: 42%;
    }
    .wheel-product-modal-body table td:last-child {
        width: 58%;
    }
}
/* Wheel/rim set page: options picked with checkboxes */
.wheel-option-select {
    margin-top: 8px;
    text-align: right;
}
.wheel-option-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}
.wheel-option-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #ffb300;
    cursor: pointer;
}
.wheel-option-label-disabled,
.wheel-option-label-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* Price summary: base price, selected caps/accessories, total price (grey box) */
.wheel-total-row > td {
    padding: 0 !important;
    border-bottom: 0 !important;
}
.wheel-total-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 16px;
}
.wheel-total-label {
    flex: 1 1 auto;
}
.wheel-total-value {
    flex: none;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}
.wheel-total-value small {
    display: block;
    color: #333;
}
.wheel-total-base {
    padding: 10px 0 15px;
    font-size: 2.2em;
    font-weight: 400;
    line-height: 1.2;
}
.wheel-total-base small {
    margin-top: 10px;
    font-size: 0.45em;
}
.wheel-total-options {
    padding: 15px 0;
    border-top: 1px solid #ddd;
    font-size: 1.6em;
    line-height: 1.2;
}
.wheel-total-options small {
    margin-top: 8px;
    font-size: 0.65em;
}
.wheel-total-options-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.wheel-total-chevron {
    flex: none;
    width: 0.55em;
    height: 0.55em;
    margin: -0.3em 0.9em 0 0.3em;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(45deg);
    transition: transform 0.2s ease-out;
}
.wheel-total-options-toggle[aria-expanded="true"] .wheel-total-chevron {
    margin-top: 0.3em;
    transform: rotate(-135deg);
}
.wheel-total-options-list {
    flex: 1 0 100%;
    margin: 10px 0 0;
    padding: 0 0 0 1.75em;
    list-style: none;
    font-size: 0.6em;
}
.wheel-total-options-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
}
.wheel-total-options-price {
    flex: none;
    white-space: nowrap;
}
.wheel-total-options-name {
    flex: 1 1 auto;
    min-width: 0;
}
/* "Dane techniczne" of a wheel set: collapsible with a chevron on phones, a plain heading elsewhere */
.wheel-specs-toggle {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}
.wheel-specs-chevron {
    display: none;
}
@media (max-width: 767px) {
    .wheel-specs-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
        cursor: pointer;
    }
    .wheel-specs-chevron {
        display: block;
        flex: none;
        width: 0.5em;
        height: 0.5em;
        margin: -0.3em 0.3em 0 0.9em;
        border-right: 2px solid #777;
        border-bottom: 2px solid #777;
        transform: rotate(45deg);
        transition: transform 0.2s ease-out;
    }
    /* the hidden table used to provide the space before the next section */
    .wheel-specs-toggle[aria-expanded="false"] {
        margin-bottom: 25px;
    }
    .wheel-specs-toggle[aria-expanded="true"] .wheel-specs-chevron {
        margin-top: 0.3em;
        transform: rotate(-135deg);
    }
    .wheel-specs-content {
        display: none;
    }
    .wheel-specs-content.wheel-specs-open {
        display: block;
    }
}

/* Product thumbnails in the list of selected caps/accessories (3:2, like the product photos) */
.wheel-total-options-list li {
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}
.wheel-total-options-thumb {
    display: block;
    flex: none;
    width: 72px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}
.wheel-total-grand {
    margin-top: 10px;
    padding: 20px 30px;
    background-color: #bdbdbd;
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1.2;
}
.wheel-total-grand small {
    margin-top: 10px;
    font-size: 0.45em;
    font-weight: 400;
}
@media (max-width: 767px) {
    .wheel-total-base,
    .wheel-total-grand {
        font-size: 1.6em;
    }
    .wheel-total-options {
        font-size: 1.2em;
    }
    .wheel-total-grand {
        padding: 15px;
    }
}

/* Savings at the top of the grey total price box (above "Cena całkowita"), like the savings
   summary in the cart. Sizes are relative to .wheel-total-grand (large, bold). */
.wheel-total-savings {
    flex: 1 0 100%;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 0.55em;
    font-weight: 400;
    line-height: 1.5;
}
.wheel-total-savings-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.wheel-total-savings-line > span:last-child {
    white-space: nowrap;
}
.wheel-total-savings-porsche {
    text-decoration: line-through;
    color: #555;
}
.wheel-total-savings-you-save {
    font-weight: 700;
}
@media (max-width: 767px) {
    .wheel-total-savings {
        font-size: 0.7em;
    }
}

/* Compact copy of the summary in the right column, shown after scrolling past the top one */
.wheel-total-side {
    display: none;
    margin-top: 50px;
}
@media (min-width: 1200px) {
    .wheel-total-side.active {
        display: block;
    }
}
.wheel-total-side-tabs {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 5px;
    border: 0;
    background: none;
    font-size: 0.75em;
}
.wheel-total-side-tabs > li > a {
    padding: 2px 6px;
}
.wheel-total-summary-compact .wheel-total-base {
    padding: 0 0 8px;
    font-size: 1.15em;
}
.wheel-total-summary-compact .wheel-total-options {
    padding: 8px 0;
    font-size: 0.85em;
}
.wheel-total-summary-compact .wheel-total-grand {
    margin-top: 5px;
    padding: 8px 15px;
    font-size: 1.15em;
}
.wheel-total-summary-compact small,
.wheel-total-summary-compact .wheel-total-options small {
    margin-top: 2px;
    font-size: 0.6em;
}
.wheel-total-summary-compact .wheel-total-options-list {
    padding-left: 1.5em;
    font-size: 0.9em;
}
.wheel-total-summary-compact .wheel-total-options-list li {
    gap: 8px;
}
.wheel-total-summary-compact .wheel-total-options-thumb {
    width: 54px;
    height: 36px;
}
.wheel-total-summary-compact .wheel-total-savings {
    margin-bottom: 5px;
    padding-bottom: 5px;
    font-size: 0.7em;
}
.wheel-total-side-cart {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.wheel-total-side-cart .wheel-total-qty {
    width: 36px;
    padding: 5px;
    border: 0;
    border-bottom: 1px solid #ccc;
    box-shadow: none;
    text-align: center;
}
.wheel-total-side-cart .btn-link {
    padding: 6px 8px;
    color: #777;
}
.wheel-total-side-cart .wheel-total-sticky-add {
    background-color: #ffb300;
    border-color: #ffb300;
    border-radius: 0;
}
.wheel-total-side-delivery {
    margin-top: 10px;
    text-align: right;
}

/* Bottom bar with the total price on screens where the right column is not affixed */
.wheel-total-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: #fff;
    border-top: 3px solid #bdbdbd;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(110%);
    transition: transform 0.25s ease-out;
}
.wheel-total-sticky.active {
    transform: translateY(0);
}
@media (min-width: 1200px) {
    .wheel-total-sticky {
        display: none;
    }
}
.wheel-total-sticky-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1170px;
    margin: 0 auto;
}
.wheel-total-sticky-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}
.wheel-total-sticky-price {
    flex: none;
    text-align: right;
    line-height: 1.2;
}
.wheel-total-sticky-price strong {
    font-size: 1.6em;
}
.wheel-total-sticky-price small {
    display: block;
    color: #777;
}
.wheel-total-sticky-add {
    flex: none;
}
.wheel-total-sticky .wheel-total-sticky-add {
    background-color: #ffb300;
    border-color: #ffb300;
    border-radius: 0;
}
@media (max-width: 767px) {
    .wheel-total-sticky-name {
        display: none;
    }
    /* "Cena całkowita:" in its own small line above the price */
    .wheel-total-sticky-label {
        display: block;
        font-size: 0.9em;
    }
    .wheel-total-sticky-inner {
        justify-content: space-between;
    }
    .wheel-total-sticky-price {
        text-align: left;
    }
}

/* Product tiles of the wheel configurator: the description (product name) always takes the same
   number of lines, so all tiles of a section have the same height. Shorter names keep the space,
   longer ones are cut with an ellipsis. Wheel sets (summer 216 / winter 217): 4 lines, rim sets,
   single rims, caps and accessories: 3 lines. */
#groups .teile-product-name {
    --wheel-tile-lines: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--wheel-tile-lines);
    overflow: hidden;
    line-height: 1.45;
    height: calc(var(--wheel-tile-lines) * 1.45em);
}
#groups #group-216 + section .teile-product-name,
#groups #group-217 + section .teile-product-name {
    --wheel-tile-lines: 4;
}

/* Panel headers of the configurator: "1. Wybierz model Porsche", "2. Koła / felgi" (season filter,
   rim diameter filter and the selected rim in one row) and "3. Kup koła / felgi i akcesoria" */
/* the header itself stays a block: matchHeight measures it with display: block */
.conf-header-rims {
    margin-bottom: 15px;
    font-weight: 400;
}
.conf-header-rims .conf-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 30px; /* 10px between the rows when they wrap (mobile) */
}
.conf-header-rims .conf-header-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 6.5px;
}
/* Desktop: "Średnica felg" exactly in the middle of the page (the middle column is centred), the season
   filter at the left and the selected rim at the right, whatever their widths */
@media (min-width: 1200px) {
    .conf-header-rims .conf-header-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 30px;
    }
    .conf-header-rims .conf-header-row > .conf-header-group:nth-child(1) {
        justify-self: start;
    }
    .conf-header-rims .conf-header-row > .conf-header-group:nth-child(2) {
        justify-self: center;
    }
    .conf-header-rims .conf-header-row > .conf-header-group:nth-child(3) {
        justify-self: end;
    }
}
.conf-header-label {
    font-weight: 700;
}
.conf-header-rims #rim-size,
.conf-header-rims #rim-season {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 6.5px; /* 15px between a label and the next checkbox (the hidden input counts as a flex item) */
    width: auto;
    margin: 0;
}
.conf-header-rims label {
    margin-bottom: 0;
    font-weight: 400;
}
.conf-header-rims #rim_name {
    float: none;
    height: auto;
    margin: 0;
    text-align: left !important;
}
#wheel_url .conf-header {
    margin-bottom: 25px;
}

/* Configurator tiles: the availability message of products that cannot be bought ("dostępność na zapytanie",
   "sprzedane", ...) is in the bottom bar, left of the "Sprzedane" button, so the tile keeps the standard height */
.panel .cart-quantity .input-group-addon.wheel-availability-bar {
    display: table-cell; /* teile.css hides the addons of this bar at 1200-1594px */
    width: 100%;
    padding: 0 0 0 15px; /* two lines (narrow tiles) still fit in the 34px high bar */
    border: 0;
    background-color: transparent;
    text-align: left;
    white-space: normal;
    font-size: inherit;
    line-height: 1.05;
}