/* MIRASVIT SEARCH AUTOCOMPLETE */

.header .ow-search #header-search .block-search .mst-searchautocomplete__index-title {
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
    color: #231f20;
}
.header .ow-search #header-search .block-search .mst-searchautocomplete__autocomplete .title a {
    color: #231f20 !important;
    text-align: left;
    padding-top: 10px;
}
.header .ow-search #header-search .block-search .mst-searchautocomplete__autocomplete .price {
    color: #231f20;
    font-weight: 400;
}
.header .ow-search #header-search .block-search .mst-searchautocomplete__autocomplete a.title {
    color: #231f20 !important;
    text-align: left;
    padding-top: 10px;
}
.mst-searchautocomplete__autocomplete .magento_catalog_category ul li {
    text-align: center;
}
.mst-searchautocomplete__autocomplete .magento_catalog_category ul li a.title {
    font-weight: 400;
    margin-bottom: 0;
    color: #333333;
    text-decoration: none;
}
.mst-searchautocomplete__highlight {
    color: #231f20 !important;
    font-weight: 600;
    text-align: left;
}
.header .ow-search #header-search .block-search .mst-searchautocomplete__autocomplete .mst-searchautocomplete__show-all a {
    color: #231f20 !important;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

/* LAYERED NAVIGATION */

.filter-options .am-labels-folding .item a.amshopby-filter-parent,
.filter-options .am-category-view .item a.amshopby-filter-parent {
    padding-left: 30px;
}
.filter-options-item .filter-options-content .am-filter-items-attr_category_ids .count:after {
    margin-left: 0px;
}
.filter-options-item .filter-options-content .am-filter-items-attr_category_ids .am-collapse-icon,
.filter-options-item .filter-options-content .am-filter-items-attr_category_ids input {
    display: none;
}

/* OPTIWEB BADGES */
.ow-badge.ow-badge--with-title .ow-badge__title {
    letter-spacing: 0px;
    white-space: initial;
}

/* IG-859: the VIDEO tab holds an iframe pasted into PIM with hardcoded width="560"
   height="315", so it sat in the corner of a much wider panel. Fill the panel and keep 16:9
   from the ratio rather than the attributes. Done in CSS on purpose: the markup comes from a
   calculated PIM value, so wrapping it would mean regenerating and re-syncing the attribute
   for every product. */
.product.attribute.product_video iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* PRODUCT PAGE LAYOUT */
/* IG-859: the thumbnail carousel stays hidden until a colour swatch is selected.
   Unselected, the gallery holds one image per colour and picking a swatch swaps the whole
   set, so a carousel on load points at thumbnails that are about to vanish - the client
   read that as broken. .ow-color-selected is put on .product-img-column by
   swatch-renderer-mixin.js the moment a colour is chosen. */
.product-img-column .fotorama__nav-wrap {
    /* !important is load-bearing: fotorama sets display inline from js on every gallery
       update, so a plain rule never wins. The .ow-color-selected rule below outranks this
       one on specificity, so it still takes over once a colour is chosen. */
    display: none !important;
}
.product-img-column.ow-color-selected .fotorama__nav-wrap {
    display: block !important;
}

/* IG-859: this badge is pinned to the bottom of .product-img-column. With the carousel
   visible (90px thumb + 2px frame padding top and bottom = 94px) the old 10px offset
   dropped it on top of the carousel, so it has to clear it - but only then, otherwise it
   floats above empty space where the carousel would have been. */
.ow_custom_link {
    bottom: 14px;
    top: auto;
    right: 40px;
}
.product-img-column.ow-color-selected .ow_custom_link {
    bottom: calc(94px + 14px);
}
.product-info-main .amshopby-option-link img {
    max-height: 200px !important;
}

/* PRODUCT PAGE GALLERY */
.ow-vertical-gallery .slick-vertical{
    max-width:126px;
}
.ow-vertical-gallery .slick-vertical .slick-slide.image {
    border: 1px solid #e6dee0;
    max-width: calc(100% - 2px);
}
.ow-vertical-gallery .slick-vertical .image.active {
    border-color: #231f20;
}
.ow-vertical-gallery .not-in-stock {
    position: relative;
    text-align: center;
}
.ow-vertical-gallery .not-in-stock > img {
    opacity: 0.5;
}
.ow-vertical-gallery .not-in-stock > div {
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* POPUP */
.ow_flex_wrapper {
    display         : flex;
    align-items     : center;
    justify-content : center;
    text-align      : left;
}
.ow_flex {
    max-width: 500px;
}
.ow_flex:last-child {
    padding : 0 50px;
}
.mfp-content .popup-content {
    padding: 0;
}
.mfp-content .popup-content img {
    margin-bottom: -1px;
}
.mfp-content .popup-content p {
    color      : #6E5F63;
    font-size  : 18px;
    text-align : left;
}
.mfp-content .popup-content strong {
    display        : block;
    color          : #231F20;
    font-size      : 36px;
    font-weight    : bold;
    margin-bottom  : 20px;
    text-transform : uppercase;
}

/* CHECKOUT COUPON */

.checkout-cart-index #discount-coupon-form .fieldset > .field:not(.choice) > .label {
    margin-right: 0px;
    padding-top: 12px;
    width: 200px;
}

.checkout-payment-method .payment-option._collapsible .payment-option-title {
    display: none;
}
.checkout-payment-method .payment-option._collapsible .payment-option-content {
    border-top: 1px solid #e6dee0;
    display: block !important;
}
.checkout-index-index #discount-form {
    margin-top: 40px;
}

/* MINICART */

.header-container .header-primary-container .header .user-menu .mini-cart .dropdown-content .block-content .minicart-items-wrapper li .product-item-details {
    padding-left: 140px;
}

/* CATALOGSEARCH RESULTS */

.catalogsearch-result-index .suggested {
    font-weight: bold;
}

.catalogsearch-result-index .suggested > a {
    font-weight: normal;
}

.catalogsearch-result-index .mst-search__result-index {
    background: #f6f6f6;
    padding: 1rem;
}

.catalogsearch-result-index .mst-search__result-index .mst-search__result-index-title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.catalogsearch-result-index .mst-search__result-index .blog__post-list {
    margin-bottom: 0;
}

.catalogsearch-result-index .mst-search__result-index .blog__post-list > li {
    margin: 1rem;
}

/* RESPONSIVE BANNER SLIDER */
body.cms-home .slideshow-wrapper-additional .owl-carousel {
    display: block;
    opacity: 0;
    min-height: 36vw;
    overflow: hidden;
}

body.cms-home .slideshow-wrapper-additional .owl-carousel > div{
    display:none;
}
body.cms-home .slideshow-wrapper-additional .owl-carousel.owl-theme > div{
    display:block;
}

@media (max-width: 991px) {
    .ow_flex:last-child {
        padding: 0 25px;
    }
}

@media (max-width: 767px) {
    body.cms-home .slideshow-wrapper-additional .owl-item img {
        max-width: 150%;
        width: auto;
    }
    .caption > *, .caption .heading {
        display: block !important;
        float: none;
    }
    .slideshow-wrapper-additional .caption {
        left: 0%;
        margin: 1%;
        text-align: center;
    }
    .slideshow-wrapper-additional .caption a {
        margin: 10px auto;
        max-width: 250px;
    }
    .slideshow-wrapper-outer .owl-pagination,
    .slideshow-wrapper-outer .owl-buttons {
        display: block;
    }
    .product-info-main .product-reviews-summary {
        clear: both;
    }
    /* IG-859: with the variant picker gone this column is just the photo plus the thumbnail
       strip, and the old flat 100px landed on the strip. Same conditional as desktop: clear the
       strip when it is showing, sit low when it is not. */
    .ow_custom_link {
        bottom: 14px;
        right: auto;
    }
    .product-img-column.ow-color-selected .ow_custom_link {
        bottom: calc(94px + 14px);
    }
    .ow_flex {
        display : none;
    }
    .ow_flex:last-child {
        padding : 40px;
        display : block;
    }
}

@media (max-width: 560px) {
    body.cms-home .slideshow-wrapper-additional .owl-item img {
        max-width: 180%;
    }
}

@media (max-width: 480px) {
    body.cms-home .slideshow-wrapper-additional .owl-item img {
        max-width: 220%;
    }
    .slideshow-wrapper-additional .caption .heading {
        font-size: 30px;
        margin-bottom: 0px;
    }
    .slideshow-wrapper-additional .caption p {
        font-size: 16px;
    }
    .slideshow-wrapper-additional .caption a {
        max-width: 200px;
    }
}

/* category image */
.ow-categories-grid .category-item .lazy{
    width:100%;
}

.category-grid-oblacila .category-item .image-wrapper .lazy{
    height:100%;
}

/*footer socials*/
.page-footer .ow-footer-left img.lazy{
  width:34px;
  height:34px;
}

/* ow help */
.ow-help .ow-help-bullets ul li img.lazy{
    height: 20px;
    width: 24px;
}

/* footer map */
@media (max-width: 1200px) {
    .footer-container .ow-footer-content .image-map-img {
        margin-top:-60px;
    }
}

/* PAYMENT METHODS  */

.opc .payment-methods .payment-method .payment-method-title [type="radio"]:not(:checked) + label {
	padding-left: 175px;
}
.opc .payment-methods .payment-method .payment-method-title [type="radio"]:checked + label {
	padding-left: 175px;
}

/* IG-859: colour swatches read as a selector, not as small photos.
   Rounded-square tiles, and the selected one carries an explicit tick as well as the theme's
   yellow ring - the ring alone was easy to miss against a photo background. The badge sits
   inside the tile because .swatch-option is overflow:hidden, so a corner-overlapping badge
   would be clipped. Scoped to ow_option1: the size swatches below use a different selected
   treatment and are left alone. */
/* .product-view .swatch-attribute prefix needed: product.css pins these to 4px at that
   specificity */
.product-view .swatch-attribute[data-attribute-code="ow_option1"] .swatch-option {
    border-radius: 8px;
}

[data-attribute-code="ow_option1"] .swatch-option.selected::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ffe136;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.2' fill='none' stroke='%23231f20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    box-shadow: 0 0 0 1px rgba(35, 31, 32, 0.15);
}

/* product.css pads .swatch-option.image asymmetrically (5px vertical, 13-26px horizontal
   depending on breakpoint) so the text size swatches line up. On the colour tiles that turns
   a 67x67 image into a 109x79 box, which no longer reads as square. Equal padding instead -
   the swatch renderer writes width/height inline and box-sizing is content-box, so the image
   keeps its size and the tile becomes 85x85. Higher specificity than the media-query rules it
   overrides, so no breakpoint copies are needed. */
.product-view .swatch-attribute[data-attribute-code="ow_option1"] .swatch-option.image {
    padding: 8px;
}

/* IG-859: gallery thumbnails show the whole picture, not a crop of it.
   Fotorama's nav CSS leaves the thumbnail at its natural size and centres it in the frame
   (.fotorama_vertical_ratio pins width:100%, .fotorama_horizontal_ratio pins width:auto),
   so anything that is not the frame's own aspect gets its edges cut off - effectively
   object-fit: cover. A 160x110 thumb in a 90x90 frame lost both sides. Contain it instead:
   the frame is overflow:hidden either way, and a product photo has to be recognisable at
   thumbnail size. The .fotorama__nav__frame step is there only to outweigh the core rule
   whichever order the two stylesheets end up in. */
.fotorama__nav-wrap .fotorama__nav__frame .fotorama_horizontal_ratio .fotorama__img,
.fotorama__nav-wrap .fotorama__nav__frame .fotorama_vertical_ratio .fotorama__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* .fotorama__thumb's grey fill was never visible while the image covered the frame; with
   contain it shows up as bars around the photo. */
.fotorama__nav-wrap .fotorama__nav__frame .fotorama__thumb {
    background-color: transparent;
}