/* ECOMMERCE CATALOG STYLE */


/* columns */
.ui-ecommerce-catalog > div > .ui.grid > .column.main { flex-grow: 1; width: auto; max-width: 100%; }
.ui-ecommerce-catalog > div > .ui.grid > .column.min { /*flex-grow: 1;*/ width: auto; max-width: 26rem; }

/* Tablet (min) - 768px */
@media only screen and (min-width: 768px) {
    .ui-ecommerce-catalog > div > .ui.grid { flex-wrap: nowrap; }
    .ui-ecommerce-catalog > div > .ui.grid > .column.min { min-width: 18rem; padding-right: 0; }
}

/* ordering: quantity dropdown tweak */
.qty-width { width: 100px !important; }

/* ordering: section */
.section-width { max-width: 450px; }

/* tweaks */
.catalog-image.single .main-image { height: auto; max-height: 28rem; }
.catalog-image.single .main-image > .ui.image { height: auto; max-height: inherit; }
.catalog-image.multiple .main-image { height: auto; max-height: 28rem; /*height: 400px; max-height: 400px;*/ }
.catalog-image.multiple .main-image > .ui.image { height: auto; max-height: inherit; }
.catalog-image .main-image .zoom { cursor: zoom-in; }

/* banner image (background mode) */
.catalog-image.banner .main-image { height: auto; max-height: 28rem; }
.catalog-image.banner .main-image > .ui.image.background { height: auto; max-height: inherit; }
.catalog-image.banner .main-image > .ui.image.background { 
    background-position: center; 
    background-attachment: scroll;  /* safari fix */
    -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; 
    background-repeat: no-repeat; }
/* Mobile - below 768px*/
@media only screen and (max-width: 767px) {
    .catalog-image.banner .main-image > .ui.image.background { width:100%; min-height:13rem; }
}
/* Tablet - 768px - 991px*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .catalog-image.banner .main-image > .ui.image.background { width: 100%; min-height: 13rem; }
}
/* Small Monitor - 992px - 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .catalog-image.banner .main-image > .ui.image.background { width: 100%; min-height: 13rem; }
}
/* Large Monitor - above 1200px */
@media only screen and (min-width: 1200px) {
    .catalog-image.banner .main-image > .ui.image.background { width: 100%; min-height: 13rem; }
}


/* banner image (img) */
.catalog-image.banner .main-image { height: auto; max-height: 28rem; }
.catalog-image.banner .main-image > img.ui.image { height: auto; max-height: inherit; }
/* Mobile - below 768px*/
@media only screen and (max-width: 767px) {
    .catalog-image.banner .main-image > img.ui.image { height: auto; max-height: 15rem; }
}
/* Tablet - 768px - 991px*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .catalog-image.banner .main-image > img.ui.image { height: auto; max-height: 20rem; }
}
/* Small Monitor - 992px - 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .catalog-image.banner .main-image > img.ui.image { height: auto; max-height: 20rem; }
}
/* Large Monitor - above 1200px */
@media only screen and (min-width: 1200px) {
}

/* carousel */
.pf-carousel .item { height: 80px; min-width: 80px; position: relative; text-align: center; /*height: 150px;*/ overflow: hidden; /*max-height: 150px;*/ box-sizing: border-box; /*margin-bottom: 2rem;*/ }
.pf-carousel .ui.horizontal.list { max-width: 100%; overflow-y: hidden; /*overflow: visible;*/ -ms-overflow-style: none; /* IE 10+*/ scrollbar-width: none; /* Firefox  */ }
.pf-carousel .ui.horizontal.list::-webkit-scrollbar { display: none; /* Safari and Chrome*/ }
.pf-carousel .ui.horizontal.list > .item > .image { vertical-align: top; width: auto; /*height: inherit; max-height: inherit;*/ }
.pf-carousel .ui.horizontal.list > .item > .image.tiny { max-height: 66px; }
.pf-carousel .ui.horizontal.list > .item > .image.small { max-height: 136px; }
.pf-carousel .ui.horizontal.list > .item > .backdrop { position: absolute; top: 0.5em; bottom: 0.5em; left: 0.5em; right: 0.5em; background-color: #fff; }

/* files */

/* responsive */
.pf-responsive-mobile .ui-ecommerce-catalog--add-to-cart.container { margin: 0 !important; }

.pf-responsive-mobile .ui-ecommerce-catalog--add-to-cart .button { width: 100%; }

/* price */
.ui-ecommerce-page .calculated-price-concept { color: #2185d0; }
.ui-ecommerce-page h1.calculated-price-concept span.caption { display: inline-block; }
.ui-ecommerce-page h1.calculated-price-concept .caption { font-size: 0.65em; }
.ui-ecommerce-page h1.calculated-price span.caption { display: inline-block; }
.ui-ecommerce-page h1.calculated-price .caption { font-size: 0.65em; }