/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

.col-lg-6 {
  /*width: unset;*/
}

@property --num {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

#description .product-description .counter::before {
  counter-reset: my-counter var(--num);
  content: counter(my-counter);
  animation: count 10s ease-in-out infinite alternate;
}

@keyframes count {
  to { --num: 100; }
}


.text-transform-none {
text-transform: none!important;
}

/* STRONA OPISU PRODUKTU */

#product .product-description .rte-content {
color:#333;
font-size: 16px;
line-height: 1.5;
}

#product .product-description .rte-content .rte-content > * {
margin-block-end: 12px; 
}

#product .product-description .rte-content > :is(p, li) {
font-size: 16px;
margin-bottom: 8px;
}

#product .product-description .rte-content > ul li::marker {
color:#d33
}

#product .product-description .rte-content > h2 {
font-size: 32px;
margin-block: 32px 32px;
letter-spacing: .025em;
position: relative;
display: inline-block;
width: max-content;
max-width: 100%;
padding-bottom:4px

}

#product .product-description .rte-content > :is(h2, h3) {
text-transform: uppercase;
}

#product .product-description .rte-content > h2::before {
content:'';
display:block;
position: absolute;
bottom: 0;
width: 10ch;
height: 110%;
border: 8px solid #d33;
border-width: 0 0 2px 16px;
translate: -32px 4px

}

#product .product-description .rte-content > h3 {
font-size: 22px;
margin-block:24px 16px;
color: #d33;
}

#product .product-description .rte-content figure {
margin: 16px auto;
}

.text-transform-none {
text-transform: none!important;
}

/* Dodatkowe ostylowanie przycisku rat na stronie produktu */
.product-additional-info {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: 2rem;
row-gap:1rem;
}

.social-sharing {
width: 100%;
}

#send_aap_button {
margin-right: auto;
}

.product-additional-info #caraty,
.cart-detailed-actions #caraty {
color: #009597;
border: 1px solid #009597;
border-radius: 4px;
padding: .75rem;
width: max-content; 


&:hover {
  outline: 2px solid #009597;
}

a:hover {
  color: unset;
}

a {
  display: flex;
  flex-direction: row;
  gap: 1ex;
  align-items: center;
}

a::before {
  content: "Raty 0%";
  font-size: 1.5rem;
  font-weight: bold;
}
}

.cart-detailed-actions #caraty {
margin-block: 1rem;
width:100%;
a {
  justify-content: space-evenly;
}
}

/* END style CA Raty */


/* MAX menu category Icon size */

.cbp-category-thumb img {
max-width:108px
}

/* Blok z informacją o usłudze montażu Odpal i Jedź */
.odpal-jedz {
display: grid;
grid-template-columns: 3.5em 1fr;
column-gap: 1rem;
margin-block: 1.5rem;
}

.odpal-jedz > * {
grid-column: 2/3;
}

.odpal-jedz__h2 {
font-size: 1.25rem;
margin: 0 0 .5rem 0;
}

.odpal-jedz::before {
content: '';
grid-column: 1/2;
grid-row: 1 / 3;
background-image: url('https://mm.mpptrade.pl/ps-themes/mrf/montaz/icon-red.svg');
background-repeat: no-repeat;
background-position: top left;
place-self: stretch;
width:100%;
background-size: contain;
}

.odpal-jedz__link {
color:#d33 !important;
font-weight:600;
text-transform:uppercase;
white-space: nowrap;
}

/*
.odpal-jedz {
margin-block: 1.5rem;
background-image: url('https://mm.mpptrade.pl/ps-themes/mrf/montaz/icon-red.svg');
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
padding-left: 4em;
}

@media (max-width: 500px) {
.odpal-jedz { padding-left: 6em;}
}
*/

/* ROZSZERZENIE START */

body {padding:0;margin:0}

/* Przywraca domyślną szerokość panelom innym niż opis */
#product-infos-tabs-content .tab-pane:not(#description) {
max-width: 1250px;
margin-inline:auto;
}

#product #inner-wrapper,
#product #content-wrapper{
width: 100%;
max-width: unset;
}

#product .product-info-row {
max-width:1280px;
margin-inline: auto;
}

#product #description .product-description {margin-inline:-15px}

/* ROZSZERZENIE END */

:root {
--max-content-width: 1280px;
--max-text-width: 960px;
--inline-padding: 1rem;
}

body {
font-size: 1.25rem;
line-height: 1.4;
}

.pd-block {
padding-block: 5rem;
}

.grid {
display: grid;
grid-template-columns: var(--sm-grid-columns, 1fr);
gap: var(--row-gap, 0) var(--col-gap, 0);
}

@media (min-width:768px) {
.grid { 
  grid-template-columns: var(--md-grid-columns, var(--sm-grid-columns, 1fr));
}
}

@media (min-width:1024px) {
.grid {
  grid-template-columns: var(--lg-grid-columns, var(--md-grid-columns, var(--sm-grid-columns, 1fr)));
}
}

@media (min-width:1280px) {
.grid {
  grid-template-columns: var(--xl-grid-columns, var(--lg-grid-columns, var(--md-grid-columns, var(--sm-grid-columns, 1fr))));
}
}

#description .rte-content,
.pd-base-grid {
--block-breakout: calc(
  (var(--max-content-width) - var(--max-text-width)) / 2
);
display: grid;
grid-column: 1/-1; 
justify-content: center;
grid-template-columns: 
  [row-start]
  minmax(var(--inline-padding, 1rem), 1fr)
  [block-start]
  minmax(0,var(--block-breakout))
  [text-start]
  min(var(--max-text-width), 100% - 2 * var(--inline-padding))
  [text-end]
  minmax(0,var(--block-breakout))
  [block-end]
  minmax(var(--inline-padding, 1rem), 1fr)
  [row-end];

:where(&) > * {
  grid-column: text;
}

:where(&) > :is(div, section, header, footer, .block) {
  grid-column: block;
}
}

.pd-block-contained {
--_content-width: min( 100% - (2 * var(--inline-padding, 1rem) ), var(--max-content-width) );
padding-inline: calc( (100% - var(--_content-width)) / 2);
}

.pd-joy-block {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}

.flex-col-reverse {
display: flex;
flex-direction: column-reverse;
}

@media (min-width:768px) {
.pd-joy-block {
  grid-template-columns: var(--md-grid-columns, 1fr 1fr);
  grid-template-rows: auto auto;
  column-gap: 2rem;
}
}

.grid-row {
grid-column: 1 / -1 !important;
}

.grid-flow-row {
grid-auto-flow: row;
}

.grid-flow-column {
grid-auto-flow: column;
}

.rowspan-2 {
--rowspan: span 2; /* ustawić aby nie był dziedziczony*/
grid-row: span 2;
}

.colspan-2 {
--colspan: span 2; /* ustawić aby nie był dziedziczony*/
grid-column: span 2
}

.row-start {
grid-column: 1 / var(--colspan, 2);
}

.row-end {
grid-column: var(--colspan, -2) / -1;
}

.column-start {
grid-row: 1 / var(--rowspan, 2);
}

.column-end {
grid-row: var(--rowspan, -2) / -1;
}

.grid-flow-row {
grid-auto-flow: row;
}

.grid-flow-column {
grid-auto-flow: column;
}

@media (min-width:768px) {
.md-rowspan-2 {
  --rowspan: span 2; /* ustawić aby nie był dziedziczony*/
  grid-row: span 2;
}

.md-colspan-2 {
  --colspan: span 2; /* ustawić aby nie był dziedziczony*/
  grid-column: span 2
}
.md-row-start {
  grid-column: 1 / var(--colspan, 2);
}

.md-row-end {
  grid-column: var(--colspan, -2) / -1;
}

.md-column-start {
  grid-row: 1 / var(--rowspan, 2);
}

.md-column-end {
  grid-row: var(--rowspan, -2) / -1;
}

.md-grid-flow-row {
  grid-auto-flow: row;
}

.md-grid-flow-column {
  grid-auto-flow: column;
}
}

.align-self-end {
align-self: end;
}

.align-self-center {
align-self: center;
}

.grid-col-fill {
display: grid;
grid-template-columns: repeat(aut-fill, var(--grid-col-fill, 1fr));
}

.w-max-content {
width: max-content;
max-width: 100%;
}

.mx-auto {
margin-inline: auto
}

.zindex {
z-index: var(--zindex, 1);
}

.block {
display: block
}
.inline {
display: inline;
}

.list-none {
margin-inline: 0;
padding: 0;
list-style: none;

& li {
  list-style: none;
}
}

.bg-white {
background-color: #fafafa;
}

.inverted-colors {
filter: invert(100%);
}

@media (min-width:768px) {
.md-bg {
  background: var(--md-bg, auto);
}
}

.pd-container .border-bottom {
border-bottom: var(--border-width, 2px) solid var(--border-color, currentColor)!important;
}

.blend-lighten {
mix-blend-mode: lighten;
}

/* Images */

.aspect-ratio-1 {
aspect-ratio: 1;
}

img {
max-width: 100%;
height: auto;
display: inline-block;
}

.img-cover {
width: 100% !important;
height: 100% !important;
}

.obj-cover, .img-cover {
object-fit: cover;
object-position: var(--obj-pos, center);
}

.icon-start {
background-position: top left;
background-size: contain;
background-repeat: no-repeat;
padding-left: calc(var(--icon-width, 1rem) + 1ex);
}


/* Typography */

.arial {
font-family: Arial, Helvetica, sans-serif;
}

.text-center {
text-align: center;
}
.text-start {
text-align: start;
}

.text-end {
text-align: end;
}

p {
margin-block: 0 1rem;
}

h2 {
font-size: var(--fs-h2, 3rem);
margin-block: 0 2rem;
line-height: 1.1;
}

h3, .h3 {
font-size: var(--fs-h3, 1.75rem);
}

.bg-light-gray {
background-color: #ccc;
}

.fs-lg {
font-size: 1.25rem;
}

.fs-xl {
font-size: 2rem;
}

header {
margin-block-end: 2rem;
}

header h2 {
margin-block-end: 0;
}

.h2-sub,
header h2 + p,
h2 span {
font-size: var(--fs-h2-sub, 1.25rem);
}

.lc-first::first-letter {
text-transform: lowercase;
}

.uc-first::first-letter {
text-transform: uppercase;
}

/* Przycisk Kup lokalnie */
.mppbuylocally-link.btn-secondary {
  border: 1px solid #999;

  &:is(:hover,:focus-visible) {
    border-color: #d33;
  }
}

.btn.mppbuylocally-link {
  color: #fff;
  background: #d33;
  font-weight: 700;
  border: 0;
  
  &:is(:hover, :focus-visible) {
    background: #fff!important;
    color: #d33!important;
    outline: 4px solid #d33;
    outline-offset: -4px;
  }
}

/* Wyłaczenie odliczania czasu promocji na miniaturach */
.product-miniature .price-countdown-wrapper {
  display: none;
}

/* Nazwa produktu na miniaturach */
.product-miniature .product-title a{
  font-size: 18px;

  &:not(:hover, :focus-visible) {
    color: #000!important;
  }
}



/* BLACK WEEK */
.product-miniature {
    & .product-price-and-shipping {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1ch;
    }

    & .regular-price {
        order: -1;
        line-height: 1;
        font-size: 1rem;
    }

    /* Ukrycie wyboru ilości z karty produktu */
    & .bootstrap-touchspin {
        display: none;
    }
}

.black-week {
    --black-week-display: block;
    --black-week-prefix: 'BLACK WEEK ';

    & .has-discount .discount {
      display: inline-block;
      text-align: start;
      width: unset;
      background: none;
      color:#d33;
      padding: 0;
      font-weight: 700;
    }
}

/* START CookieBot */

/* Branding on the banner */
a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText {
  display: none;
}

/* Branding on the Privacy trigger */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
    display: none!important;
}

/* END CookieBot */
/* BLACK WEEK */
/*
#product {
    --black-week-sticker-top: 1rem;
    --black-week-sticker-right: 0;
    --balck-week-sticker-scale: 1;

    & .presta-studio-price-history {
        margin-top: 8px;
    }

    & .price-countdown {
        background: black;
    }

    & .product_header_container {
        & .product-reference {
            margin-bottom: 1rem;
        }

        & .product-price,
        & .regular-price {
            font-size: 1.75rem;
            line-height: 1;
            padding: 0;
        }

        & .regular-price {
            opacity: .5;
        }
    }

    .has-discount>div {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        width: max-content;
        max-width: 100%;

        & .current-price {
            order: 1;
        }

        & .regular-price {}

        & .discount {
            grid-column: span 2;
            place-self: start;
            order: -1;
            margin-bottom: 8px;
        }

        & .discount::before {
            content: 'BLACK WEEK ';
        }
    }
}

.product-miniature:has(.discount) .product-thumbnail::after,
.product-cover:has(.discount):not(:hover)::after {
    content: '';
    position: absolute;
    top: var(--black-week-sticker-top, 0);
    right: var(--black-week-sticker-right, 8px);
    width: 160px;
    height: 60px;
    background-image: url('https://sklep.kayomoto.pl/img/cms/promocje/black-week-product-sticker.webp');
    scale: var(--black-week-sticker-scale, .85);
    transform-origin: top right;
    z-index: 2;
}

.thumbnail-container .discount,
.product-cover .discount {
    font-size: .9em;
    padding-right: 1em;
}


.product-miniature-default .product-thumbnail img,
.product-cover img {
    aspect-ratio: 2/3;
    object-fit: contain;
}

.table-grid td {
  border: 1px solid;
  vertical-align: top;
}

.table-grid thead {
    background: #333;
    color: #fff;
}*/