/* --   SHOPPING CART TOOLBAR   -- */

#shopping-cart-toolbar-mask > .logo img { height: 16px; }
#shopping-cart-toolbar-mask > .logo {
    left: 0;
    top: 0;
    height: 16px;
    position: relative;
}

#shopping-cart-toolbar-mask > .logo.jiggyalbums img { height: 32px; }
#shopping-cart-toolbar-mask > .logo.jiggyalbums { height: 32px; }

#shopping-cart-toolbar-mask > .logo.jiggyalbums img { height: 32px; }
#shopping-cart-toolbar-mask > .logo.jiggyalbums { height: 32px; }

#shopping-cart-toolbar-mask {
    position: absolute;
    width: 100%;
    height: 56px;
    left: 0;
    top: 0;
    z-index: 17;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 32px;
    transform: rotateX(60deg);
    transition: all .6s cubic-bezier(.785, .135, .15, .86);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    opacity: 0;
    background: #fff;
}

#shopping-cart-toolbar {
    position: absolute;
    z-index: 3000;
    height: 56px;
    top: 0;
    right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}










#cart-loader {
    left: auto;
    right: -4px;
}










/* --   PRZYCISKI "DODAJ DO KOSZYKA" I "ZAPISZ ZMIANY W PRODUKCIE"   -- */

#add-product-to-cart,
#save-product-parameters {
    transform: translate(0, 4px);
    margin: 0 16px 0 0 !important;
    border-radius: 0 4px 4px 0;
    border-left: 2px solid rgba(255, 255, 255, .1);
}

#add-product-to-cart svg,
#save-product-parameters svg {
    padding: 11px 11px 11px 3px;
}










/* --   CENA W NAGŁÓWKU   -- */

#product-price {
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16pt;
    font-family: titillium_webbold;
    background: #444;
    padding: 0 16px;
    border-radius: 5px 0 0 5px;
    margin: 0;
    border-right: 2px solid rgba(0, 0, 0, .1);
    transition: all .2s ease-out;
}

#product-price.push-left { margin: 0 0 0 72px; }
#product-price .vat-type { margin: 0 0 0 8px; }
#product-price .price { margin: 0 8px 0 0; }
#product-price .currency {
    font-size: 12pt;
    font-family: titillium_webbold;
    transform: translate(0, -2px);
    text-transform: uppercase;
}





/* --   POLE Z INFORMACJĄ O RABACIE OBOK CENY   -- */

#product-price.details .discount:hover { filter: brightness(1.1); }
#product-price.details .discount { cursor: pointer; }
#product-price .discount {
    position: absolute;
    left: -68px;
    top: 0;
    width: 72px;
    height: 40px;
    color: #fff;
    background: #00a820;
    font-size: 10pt;
    z-index: -1;
    text-align: center;
    border-radius: 5px 0 0 5px;
    transition: all .2s ease-out;
}

#product-price .discount.hide { transform: translate(100%, 0); }
#product-price .discount span {
    width: 100%;
    font-size: 16pt;
}










/* --   UAKTYWNIENIE CENY POD DETALE   -- */

#product-price #toggle-details {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 100;
    display: none;
}

#product-price.details:hover { background: #222; }
#product-price.details #toggle-details { display: block; }

/* --   DETALE CENY   -- */

#product-price #price-details-mask {
    position: absolute;
    right: -200px;
    top: calc(100% + 8px);
    width: 1400px;
    height: 1100px;
    overflow: hidden;
    pointer-events: none;
}

#product-price #top-line {
    position: absolute;
    right: 200px;
    top: 0;
    width: 600px;
    height: 4px;
    background: #;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    transform-origin: 100% 50%;
    transform: scale(0, 1);
    z-index: 10;
}

#product-price #price-details {
    position: absolute;
    right: 200px;
    top: 0;
    width: 600px;
    height: auto;
    background: #f1f1f1;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 128px 128px rgba(255, 255, 255, 0);
    z-index: 9;
    transform: translate(0, -100%);
    pointer-events: all;
    padding: 0 0 16px 0;
}

#product-price #price-details::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, .025);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    z-index: 15;
}

#product-price #price-details .title {
    width: 100%;
    font-size: 12pt;
    text-transform: uppercase;
    font-family: titillium_webbold;
    color: #666;
    padding: 24px;
    background: #ececec;
    line-height: 24px;
}

#product-price #price-details .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

/* --   STAN: WIDOCZNE DETALE   -- */

#product-price.show-details { background: #222; }
#product-price.show-details #top-line { transform: scale(1, 1); }
#product-price.show-details #price-details {
    transform: translate(0, 0);
    box-shadow: 0 0 128px 128px rgba(255, 255, 255, 1);
}





/* --   LISTA CEN   -- */

/* --   WALUTA W DETALACH   -- */

#price-details-currency-select {
    position: absolute;
    right: 24px;
    top: 50%;
    margin: -16px 0 0 0;
}





/* --   ZAKŁADKI Z RODZAJAMI CEN   -- */

#prices-list .price-legend {
    width: 100%;
    color: #666;
    font-family: titillium_webregular;
    font-size: 10pt;
    line-height: 56px;
    height: 56px;
    cursor: default;
    text-transform: uppercase;
    z-index: 12;
    padding: 0 24px;
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
    pointer-events: none;
}

#prices-list .price-legend .tab {
    float: right;
    cursor: pointer;
    line-height: 56px;
    height: 56px;
    text-align: right;
    width: 104px;
}

#prices-list .price-legend .tab:hover { color: #333; }
#prices-list .price-legend .tab.selected {
    font-family: titillium_websemibold;
    color: #;
}





/* --   CENY POSZCZEGÓLNYCH SKŁADOWYCH   -- */

#prices-list { width: 100%; }
#prices-list ul {
    width: 100%;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    z-index: 9;
    list-style: none;
}

/* --   LEVEL 1   -- */

#prices-list ul li {
    width: 100%;
    overflow: hidden;
}

#prices-list .price-line {
    width: 100%;
    line-height: 40px;
    height: 40px;
    color: #666;
    font-family: titillium_webregular;
    font-size: 10pt;
    padding: 0 24px 0 40px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    z-index: 10;
    background: #f1f1f1;
}

#prices-list .price-line:hover { filter: brightness(1.02); }
#prices-list .price-line .netto {
    position: absolute;
    right: 232px;
    top: 0;
    width: 104px;
    text-align: right;
    font-family: titillium_webbold;
    font-size: 12pt;
}

#prices-list .price-line .brutto {
    position: absolute;
    right: 128px;
    top: 0;
    width: 104px;
    text-align: right;
    font-family: titillium_webbold;
    font-size: 12pt;
    color: #333;
}

#prices-list .price-line .user-discount {
    position: absolute;
    right: 24px;
    top: 0;
    width: 104px;
    font-family: titillium_webbold;
    text-align: right;
    font-size: 12pt;
    color: #00a820;
}

#prices-list .price-line svg {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   LEVEL 2   -- */

#prices-list > ul > li > ul { margin-top: -100%; }
#prices-list > ul > li.toggle > ul { margin-top: 0; }
#prices-list > ul > li.toggle > .price-line > svg { transform: rotate(180deg); }
#prices-list > ul > li > ul > li .price-line {
    padding: 0 24px 0 66px;
    background: #ebebeb;
    border-bottom: 1px solid #ddd;
}

#prices-list > ul > li > ul > li > .price-line > svg { left: 36px; }
#prices-list > ul > li > ul > li > .price-line .netto,
#prices-list > ul > li > ul > li > .price-line .brutto {
    color: #777;
    font-size: 11pt;
    font-family: titillium_webbold;
}

#prices-list > ul > li > ul > li > .price-line .user-discount {
    font-size: 11pt;
    font-family: titillium_webbold;
}

/* --   LEVEL 3   -- */

#prices-list > ul > li > ul > li > ul { margin-top: -100%; }
#prices-list > ul > li > ul > li.toggle > ul { margin-top: 0; }
#prices-list > ul > li > ul > li.toggle > .price-line > svg { transform: rotate(180deg); }
#prices-list > ul > li > ul > li > ul > li > .price-line {
    padding: 0 24px 0 92px;
    background: #e6e6e6;
    border-bottom: 1px solid #d2d2d2;
}

#prices-list > ul > li > ul > li > ul > li > .price-line > svg { left: 64px; }
#prices-list > ul > li > ul > li > ul > li > .price-line .netto,
#prices-list > ul > li > ul > li > ul > li > .price-line .brutto {
    color: #666;
    font-size: 10pt;
    font-family: titillium_webregular;
}

#prices-list > ul > li > ul > li > ul > li > .price-line .user-discount {
    font-size: 10pt;
    font-family: titillium_webregular;
}

/* --   LEVEL 4   -- */

#prices-list > ul > li > ul > li > ul > li > ul { margin-top: -100%; }
#prices-list > ul > li > ul > li > ul > li.toggle > ul { margin-top: 0; }
#prices-list > ul > li > ul > li > ul > li.toggle > div > svg { transform: rotate(180deg); }
#prices-list > ul > li > ul > li > ul > li > ul > li > .price-line {
    padding: 0 24px 0 118px;
    background: #dedede;
    border-bottom: 1px solid #d2d2d2;
}

#prices-list > ul > li > ul > li > ul > li > ul > li > .price-line > svg { left: 90px; }
#prices-list > ul > li > ul > li > ul > li > ul > li > .price-line .netto,
#prices-list > ul > li > ul > li > ul > li > ul > li > .price-line .brutto {
    color: #666;
    font-size: 9pt;
    font-family: titillium_webregular;
}

#prices-list > ul > li > ul > li > ul > li > ul > li > .price-line .user-discount {
    font-size: 9pt;
    font-family: titillium_webregular;
}











/* --   ILOŚĆ I NAZWA PRODUKTÓW   -- */

#product-amount {
    height: 32px;
    line-height: 32px;
    margin: 0 16px 0 0;
 }

#product-amount span {
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
    background: #;
    z-index: 2;
}

#product-amount span:hover {
    filter: hue-rotate(-10deg);
}

#product-amount span.minus {
    border-radius: 4px 0 0 4px;
    border-right: 2px solid rgba(255, 255, 255, .1);
}

#product-amount span.plus {
    border-radius: 0 4px 4px 0;
    border-left: 2px solid rgba(255, 255, 255, .1);
}

#product-amount span svg {
    width: 16px;
    height: 16px;
    stroke-width: 4;
}

#product-amount span.minus svg { transform: translate(1px, 0); }
#product-amount span.plus svg { transform: translate(-1px, 0); }

#product-amount span.minus:hover svg { transform: translate(1px, 0) scale(1.2); }
#product-amount span.plus:hover svg { transform: translate(-1px, 0) scale(1.2); }

#product-amount .amount {
    width: 40px;
    height: 32px;
    line-height: 32px;
    font-size: 13pt;
    color: #fff;
    font-family: titillium_webbold;
    text-align: center;
    background: #444;
    border: 0;
    z-index: 1;
    border-left: 2px solid rgba(0, 0, 0, .05);
    border-right: 2px solid rgba(0, 0, 0, .05);
    cursor: pointer;
}

#product-amount .amount.promo {
    background-color: #00a820;
    pointer-events: none;
}

#product-amount .amount.clicked-plus {
    transition:all .1s cubic-bezier(.785, .135, .15, .86);
    font-size: 16pt;
}

#product-amount .amount.clicked-minus {
    transition:all .1s cubic-bezier(.785, .135, .15, .86);
    font-size: 9pt;
}





/* --   NAZWA PRODUKTU   -- */

#product-name.go-up { transform: translate(-50%, -65%); }
#product-name:hover { color: #444; }
#product-name {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 14pt;
    font-family: titillium_websemibold;
    color: #666;
    padding: 0;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

#product-name p {
    opacity: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s !important;
    transform: translate(0, 40px);
}

#shopping-cart-id {
    position: absolute;
    left: 50%;
    top: 52px;
    font-size: 11pt;
    font-family: titillium_webbold;
    color: #fff;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    transform: translate(-50%, -50%);
    background: #444;
}





/* --   ANULOWANIE PRODUKTU   -- */

#product-name #cancel-product {
    position: absolute;
    left: -12px;
    top: -12px;
    width: 64px;
    height: 64px;
    opacity: 0;
    pointer-events: none;
    transition: all .15s ease-out;
    background: rgba(255, 255, 255, 0);
}
#product-name:hover #cancel-product {
    opacity: 1;
    pointer-events: all;
}

#product-name #cancel-product svg {
    width: 64px;
    height: 64px;
    padding: 22px;
    transition: all .05s ease-out;
    color: #aaa;
}

#product-name #cancel-product:hover svg {
    stroke-width: 3;
    color: #ff0008;
}



/* --   CIEMNY MOTYW   -- */

#product-name.dark {
    background: #444;
    color: #fff;
    text-shadow: none;
}

#product-name.dark:hover {
    background: #222;
}

#product-name.dark #cancel-product svg {
    color: #fff;
}

#product-name.dark #cancel-product:hover svg {
    color: #ff0008;
}



/* --   ZIELONY MOTYW - PROMOCJE   -- */

#product-name.green {
    background: #00a820;
    color: #fff;
    text-shadow: none;
}

#product-name.green:hover {
    background: #00b923;
}

#product-name.green #cancel-product svg {
    color: #fff;
}

#product-name.green #cancel-product:hover svg {
    color: rgba(0, 0, 0, .5);
}