/* VWE CSS */


/* home index */
.vwe-home {min-height: 500px;}
.home-header { display: table; width: 100%; }
.home-header:before,
.home-header:after { content: ""; display: block; position: relative; top: 15px; border-top: #dde0e2 1px solid; }
.home-header i { font-size: 25px; margin: 10px; display: table-cell; padding: 0 15px; width: 1px; white-space: nowrap; vertical-align: middle; }
.home .content {text-align:center;}
.home .content .box .center {margin:auto;}
.home .content p {text-align: center;}
.more-info-slider-button p {text-align: center; padding-top: 2em;}
.home .login-info {background-color: #f9f9f9; padding: 10px; border: 1px solid #ddd;}

.price-currency-symbol {color: #3399cc;font-size: 15px;position: relative; top: -10px;}
.price-cent {color: #3399cc;font-size: 15px;position: relative; top: -7px;}

/* category landing pages */
#category-landing-page .category-more-info {padding-top: 30px;}
#category-landing-page .filterproduct-title {margin-top: 30px;margin-bottom:25px;}
#category-landing-page .center {text-align: center;}
#category-landing-page .seo-footer {padding-top:50px;}

/* Footer link styling */
footer ul.links li a {
    display: inline-block;
    padding: 6px 4px;
    min-height: 24px;
    line-height: 1.5;
    font-size: 1.4rem; /* ensures readable text size (~16px) */
    text-decoration: none;
}

/* Optional hover/focus state for better UX */
footer ul.links li a:hover,
footer ul.links li a:focus {
    text-decoration: underline;
}

/* Language switcher flag links */
footer a[aria-label*="Shop-Version"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out;
}

/* Optional hover highlight */
footer a[aria-label*="Shop-Version"]:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Flag images inside links */
footer .flag-small {
    max-width: 24px;
    height: auto;
    display: block;
}

/* hidden for screen readers */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* login form lanuage info */
.block-content.language-info {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
}

.block-content.language-info .flag {
    width: 50px;
}

.flag-small {
    width: 25px;
    margin-right: 10px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* small_list.phtml ensure product element 100% width */
.product.small-list.product-item
{
	width: 100% !important;
}
/* trends index page */
.trend-item-row .trend-image img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;

	width: 100%;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}
.trend-item-row .trend-image:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.trend-item-row
{
	padding-top: 25px;
}

.trend-item-row .trend-item
{
	max-width: 300px;
}

.trend-item-row .trend-item .title
{
	text-align:center;
}

/* Product Info / Label Icons */
.product.info.labels {
    padding-bottom: 10px;
}

.product.info.infoicon img {
    position: relative;
    bottom: 5px;
    float: right;
    width: 20%;
}

.product-label.sale-label {
    text-align: center;
}

.product-label.new-label {
    text-align: center;
}

.product-label.sale-label.wide {
    text-align: center;
    width: 25%;
}

.product-label.new-label.wide {
    text-align: center;
    width: 25%;
}

/* SWATCH Info Icons */

.swatch-option {
    position: relative;
    overflow: hidden;
}

.swatch-option.newproduct::after,
.swatch-option.specialoffer::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: inline-block;
    max-width: 90%;
    padding: 4px 8px;

    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px #000;

    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    pointer-events: none;
    white-space: normal;
}



/* SWATCH Magnifier styling */
/* Common styles for both positions */
.swatch-magnifier {
    position: absolute;
    right: 8px;    /* pull it a little left */
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.95);
    cursor: zoom-in;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}


/* Top-right position */
.swatch-magnifier--top {
    top: 7px;
    border-radius: 0 0 0 14px;
}

/* Bottom-right position */
.swatch-magnifier--bottom {
    bottom: 7px;
    border-radius: 14px 0 0 0;
}

/* Common icon styles */
.swatch-magnifier::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
}

/* Hover states */
.swatch-magnifier:hover {
    background-color: #fff;
}

.swatch-magnifier:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231979c3'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    transform: scale(1.1);
}

/* Modal adjustments */
.swatch-image-modal .modal-inner-wrap {
    max-width: 90%;
    width: auto !important;
    border-radius: 8px;
    overflow: hidden;
}

.swatch-image-modal .modal-content {
    padding: 20px;
    text-align: center;
}

.swatch-popup-image {
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.swatch-popup-image {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}

.swatch-option.image {
    position: relative;
    overflow: hidden;
}

/* Loading state */
.loading-indicator {
    padding: 2rem;
    text-align: center;
}

/* Footer Top Custom Block */
.homepage-bar {
    background-color: #f4f4f4; /* Light gray for better contrast */
    color: #333; /* Darker text color for accessibility */
    padding: 15px 0;
    border: none;
}

/* Large icons within .homepage-bar */
.homepage-bar .icon-large {
    font-size: 36px;
    color: #333; /* Darker icon color for better visibility */
}

/* Text Area Styling inside .homepage-bar */
.homepage-bar .text-area h3 {
    color: #222; /* Slightly darker for better contrast */
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.homepage-bar .text-area p {
    font-size: 14px;
    color: #444; /* Darker for readability */
    line-height: 1.5;
}


/* base price customer info */
.base-customerinfo-notloggedin
{
    font-size: larger;
    margin-bottom: 5px;
    font-weight: bold;
    color: black;
}
.base-customerinfo
{
    font-size: larger;
    margin-bottom: 5px;
}
.base-price
{
    margin-bottom: 10px;
}

/* responsive iframes */
.vwe-iframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch;
border: solid black 1px;
}
.vwe-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* responsive yt video */
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 25px;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* responsive iframe embed container */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* registration submit button */
.vwe-submit-button {
    color: red !important;
	background-color: #fff !important;
    border: 4px solid #ff0000 !important;
	border-radius: 12px;
	font-size: 24px !important;
	padding-bottom: 35px !important;
	height: 70px !important;
}

.vwe-submit-button:hover {
    background-color: #ff0000 !important;
    color: white !important;
}

/* responsive > 1025px desktops */
@media only screen and (min-width : 1025px) {

	.page-header.type16 .block-search {
		margin-left: 35px !important;
	}
}

/* responsive > 1024 portait mode for tablets */
@media (max-width: 1024px) and (min-width: 768px) {
    .page-header.type16 .block-search {
        max-width: 350px;
    }
}

 /* responsive < 768px iPad Portrait */
@media only screen and (max-width : 768px) {

	.vwe-home-side-menu {
	    display:none !important;
	}
	.sidebar-filterproducts {
	    display:none !important;
	}
	 /* side column header text smaller */
	.block-category-list .block-title,.filter-options-title,.filter .filter-current-subtitle {
	    font-size: small !important;
	}

	.page-header.type16 .custom-block .header-vwe {
		max-width: 215px !important;
	}

	.page-header.type16 .custom-block .header-vwe .text-top {
		font-size: medium !important;
	}
}

/* responsive iPhone Portrait */
/* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

	  .logo {
  	    border: none !important;
  	}
}

/* PORTO HEADER TYPE 16 CSS */

.page-header.type16 .logo {
    margin: 28px 0;
}
.page-header.type16 .minicart-wrapper {
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -20px;
    width: 58px;
}
.page-header.type16 .minicart-wrapper .action.showcart {
    position: relative;
    padding: 0 25px 0 0;
    line-height: 37px;
    color: #606669;
}
.page-header.type16 .minicart-wrapper .action.showcart:before,
.page-header.type16 .minicart-wrapper .action.showcart.active:before {
    font-size: 33px;
    line-height: 40px;
}
.page-header.type16 .minicart-wrapper .action.showcart .counter.qty {
    font-size: 10px;
    color: #fff;
    background-color: #ed5348;
    right: -12px;
    margin-top: -27px;
    line-height: 17px;
    width: 35px;
}
.page-header.type16 .minicart-wrapper .block-minicart {
    right: -15px;
}
.page-header.type16 .minicart-wrapper .block-minicart:before {
    right: 49px;
}
.page-header.type16 .minicart-wrapper .block-minicart:after {
    right: 48px;
}
.page-header.type16.sticky-header .minicart-wrapper .block-minicart:before {
    right: 36px;
}
.page-header.type16.sticky-header .minicart-wrapper .block-minicart:after {
    right: 35px;
}
.page-header.type16.sticky-header .minicart-wrapper .action.showcart {
    padding-right: 12px;
}
.page-header.type16.sticky-header .minicart-wrapper .action.showcart:after {
    display: none;
}
.page-header.type16.sticky-header .minicart-wrapper .action.showcart .counter.qty {
    right: 8px;
}
.page-header.type16.sticky-header .minicart-wrapper {
    width: auto;
}
.page-header.type16 .nav-toggle {
    float: right;
    line-height: 62px;
}

@media (min-width: 768px) {
    .page-header.type16 {
        background-color: #fff;
        color: #595959;
    }
    .page-header.type16 > .panel.wrapper {
        background-color: #f0f0ed;
        color: #595959;
    }
    .page-header.type16 .header.panel {
        padding-bottom: 9px;
        padding-top: 8px;
    }
    .page-header.type16 .panel.header .switcher {
        padding: 0 15px;
        color: #595959;
        text-transform: uppercase;
    }
    .page-header.type16 .panel.header .switcher.switcher-currency {
        padding-left: 0;
    }
    .page-header.type16 .header.panel > .header.links {
        color: #595959;
        float: none;
        text-align: right;
        display: block;
    }
    .page-header.type16 .header.panel > .header.links > li.compare {
        float: left;
    }
    .page-header.type16 .header.panel > .header.links > li.compare > a {
        padding-left: 0;
    }
    .page-header.type16 .header.panel > .header.links > li > a {
        border: none;
        letter-spacing: 0.025em;
        color: #595959 !important;
    }
    .page-header.type16 .block-search {
        margin-left: 5px;
    }
    .page-header.type16 .block-search input {
        background-color: #fff;
        color: #595959;
        border-color: #dbe0e2;
    }
    .page-header.type16 .block-search .action.search {
        padding: 0 13px;
    }
    .page-header.type16 .block-search .action.search:before {
        content: '\e884';
        color: #595959;
    }
    .page-header.type16 .custom-block {
        height: 80px;
        line-height: 1;
        position: absolute;
        top: 40%;
        right: 100px;
        margin-top: -20px;
        font-size: 11px;
        color: #595959;
        border-right: solid 1px #dde0e2;
        padding-right: 20px;
    }

	.page-header.type16 .custom-block .header-vwe {
		max-width: 350px;
		top: -20px;
		position: relative;
	}

	.page-header.type16 .custom-block .header-vwe .text-top {
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
		color: black;
		display: block;
		text-align:center;
	}

	.page-header.type16 .custom-block .header-vwe .vector {
		width: 100%;
		position: relative;
		margin-top: 3px;
		margin-left: 13px;
	}

	.page-header.type16 .custom-block .header-vwe .text-bottom {
		font-size: medium;
		color: black;
		display: block;
		margin-left: 25px;
	}

	.page-header.type16 .custom-block .header-vwe .text-tel {
		display: block;
		float: right;
		margin: 3px;
		color: #606669;
		font-size: 18px;
		font-weight: 600;
		display: block;
		line-height: 27px;
	}

    .page-header.type16 .custom-block > * {
        display: inline-block;
        vertical-align: middle;
    }
    .page-header.type16 .custom-block > a {
        font-size: 12px;
    }
    .page-header.type16 .nav-sections {
        background-color: transparent;
        color: #595959;
        margin-bottom: 10px;
    }
    header.page-header.sticky-header.type16 .nav-sections {
        background-color: #fff;
    }
    .page-header.type16 .navigation {
        background-color: transparent;
        padding: 0 15px;
    }
    .page-header.type16 .navigation > ul {
        padding: 0;
        background-color: #f0f0ed;
    }
    .page-header.type16 .navigation li.level0 {
        color: #08c;
    }
    .page-header.type16 .navigation li.level0 > .level-top {
        color: inherit;
        padding: 0 20px;
        line-height: 42px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: inherit;
    }
    .page-header.type16 .navigation li.level0.active, .page-header.type16 .navigation li.level0:hover {
        color: #fff;
        background-color: #08c;
    }
}

@media (max-width: 991px) {

    header.page-header.type16.sticky-header .navigation li.level0 > .level-top {
        padding: 0 10px;
	}

	.page-header.type16 .block-search {
		max-width: 280px !important;
		top: 70px !important;
	}
}

@media (max-width: 767px) {
    .page-header.type16 .logo {
        height: 40px;
        float: left;
        margin: 10px 0;
		border: none !important;
    }
    .page-header.type16 .minicart-wrapper .action.showcart {
        padding-right: 0;
    }
    .page-header.type16 .minicart-wrapper .action.showcart:before, .page-header.type16 .minicart-wrapper .action.showcart.active:before {
        font-size: 25px;
    }
    .page-header.type16 .minicart-wrapper .action.showcart:after {
        display: none;
    }
    .page-header.type16 .minicart-wrapper .action.showcart .counter.qty {
        right: -6px;
        margin-top: -20px;
    }
    .page-header.type16 .minicart-wrapper .block-minicart {
        right: 0;
        min-width: 300px;
    }
    .page-header.type16 .minicart-wrapper .block-minicart:before {
        right: 20px;
    }
    .page-header.type16 .minicart-wrapper .block-minicart:after {
        right: 19px;
    }
    .page-header.type16 .block-search .label:before {
        font-size: 18px;
    }
    .page-header.type16 .nav-toggle:before {
        font-size: 18px;
    }
    .page-header.type16 .minicart-wrapper {
        margin: 11px 0;
        position: static;
        width: auto;
    }
    .page-header.type16 .block-search {
        float: none;
        margin-bottom: 0;
		max-width: 280px !important;
		top: 70px;
    }
    .page-header.type16 .block-search .label {
        float: right;
        margin: 10px 0;
        line-height: 40px;
        margin-right: 10px;
    }
    .page-header.type16 .custom-block {
        display: none;
    }
}
.page-header.type16.sticky-header .minicart-wrapper .action.showcart:before, .page-header.type16.sticky-header .minicart-wrapper .action.showcart.active:before {
    font-size: 25px;
}
