/* safilo.css (US) */

@font-face {
	font-family: "Futura";
	/* online converters do not return Futura.ttf, but included Futura-Medium.ttf which is default Futura */
	src: url("../fonts/Futura-Medium.ttf");
	/* DNU auto, fallback, optional, swap */
	/*font-display: block; */
}
@font-face {
	font-family: "FuturaBold";
	src: url("../fonts/Futura-Bold-03.ttf");
	font-display: block;
}
@font-face {
	font-family: "FuturaCondensedBold";
	src: url("../fonts/Futura-CondensedExtraBold-05.ttf");
	font-display: block;
}
@font-face {
	font-family: "FuturaCondensedMedium";
	src: url("../fonts/Futura-CondensedMedium-04.ttf");
	font-display: block;
}
@font-face {
	font-family: "FuturaMediumItalic";
	src: url("../fonts/Futura-MediumItalic-02.ttf");
	font-display: block;
}
@font-face {
	font-family: "MinionPro";
	src: url("../fonts/MinionPro-Regular.otf");
	font-display: block;
}
/*
dark blue in logo: #003768
	color: #05244c; // darkest blue
	color: #003b65; // dark blue ***
	color: #375070; // medium-dark slate blue
	color: #86acca; // medium blue
	color: #bad2e5; // light blue (grey-blue)
*/
:root {
	/* ======================== THEME COLORS ======================== */
	/* monochrome */
	--COLOR-1: #000;
	--COLOR-1-LIGHTER: #666;
	--COLOR-1-LIGHT: #999;
	--link-color: var(--safilo-blue-1);
	/* TODO: to implement --link-color-dark, find all uses of --link-color; */
	--link-color-dark: var(--safilo-blue-1);
	/* TODO: --link-color-light ? which blue? */
	--link-color-light: #fff;
	--link-hover-color: var(--safilo-blue-2);
	/* ============ *** Safilo LOGO DARK BLUE *** ============ */
	--safilo-blue-1: #003768;
	--theme-color-1: #003768;
	/* ============ *** Safilo MEDIUM BLUE (sr) *** ============ */
	--safilo-blue-2: #0066bf;
	--theme-color-2: #0066bf;
	/* ============ *** Safilo LOGO LIGHT BLUE *** ============ */
	--safilo-blue-5: #87b2d8;
	/* Safilo light grey-blue ... kinda washed out, but in use? */
	--safilo-blue-6: #bad2e5;
	/* ============ *** Safilo LIGHTEST BLUE *** --safilo-blue-6 (corp) not light enough ============ */
	--safilo-blue-7: #cce7fc;
	--link-color-1: var(--safilo-blue-1);
	/*
	.
	.
	.
	*/
	/* ======================== FONTS ======================== */
	/* --BODY-FONT: 'Noto Sans Mono', monospace; */
	--BODY-FONT: 'Futura', sans-serif;
	--HEADING-FONT: 'Futura', sans-serif;
	--site-max-width: 1350px;
	--currency-symbol: "$";
	/*
	.
	.
	.
	*/
	/* ======================== THE HEADER BOSS! THE HEADER! ======================== */
	/* ======================== THE HEADER BOSS! THE HEADER! ======================== */
	/* ======================== THE HEADER BOSS! THE HEADER! ======================== */
	--header-height: 4.5rem;
	--header-padding: 0 0 0 .9rem;
	--header-align-items: flex-start;
	--header-justify-content: flex-start;
	--header-bg-color: #fff;
	--header-border: 0 solid transparent;
	--header-border-width: 0 0;
	--header-box-shadow: 0 6px 6px rgba(0,0,0,.3);

	/* set min-width, max-width @ ~300px */
	--logo-wrapper-min-width: 90px;
	/* logo files should be 600px wide but v. unlikely any > 300px */
	--logo-wrapper-max-width: 111px;
	--logo-wrapper-max-height: calc(var(--header-height) * .78);
	--logo-wrapper-align-items: center;
	/*
		horizontal logo => height: auto;
		vertical logo => height: 100%;
	*/
	--logo-wrapper-a-height: auto;
	--logo-image-width: 450px; /* NYIS */


	/*
		ELEMENTS NOT REQUIRING LANDSCAPE RULES (AND/OR TENANT VARS);
		- MAIN NAV + SEARCH COMPONENT WRAPPER
	*/
	--main-nav-and-search-wrapper-bg-color: #fff;
	/* --main-nav-and-search-wrapper-border: 1px solid #000; */
	--main-nav-padding: 3ch 3ch 9ch; /* @ .landscape: 0 for all */
	--main-nav-color: var(--safilo-blue-1);
	--main-nav-bg-color: inherit;
	--main-nav-border: inherit;
	/*
		CUSTOM TRANSITIONS? ELSE RETURN TO main-nav.css;
		--main-nav-transition: .6s all ease-in-out;
	*/

	/* ============ TOP LEVEL ============ */
	/*
		re: design: prob zero padding on parent (.main-nav-and search-wrapper)
		and pad this (.main-nav) instead
	*/
	--ul-level-0-padding: 0;
	--ul-level-0-font: var(--HEADING-FONT);
	--font-size-main-nav-level-0: .99rem;
	--color-main-nav-level-0: var(--main-nav-color);
	--ul-level-0-font-weight: bold;
	--ul-level-0-text-transform: uppercase;
	/* .nav-ul-level-0 > .nav-li */
	--ul-level-0-li-margin: 0 0 1.5ch; /* @ .landscape: 0 for all */
	--ul-level-0-li-padding: 0 0 1.5ch; /* @ .landscape: 0 for all */
	/*
		prevent the <li> from extending beyond the <ul>;
		== sum of left + right values of --ul-level-0-li-padding
	*/
	--ul-level-0-li-horizontal-padding: .9ch;
	--ul-level-0-li-align-items: center;
	--ul-level-0-li-text-align: left;
	--ul-level-0-li-bg-color: inherit;
	--ul-level-0-li-border-bottom: 1px dotted #ccc;

	
	/* ============ SUB-LEVEL ============ */
	--ul-level-1-margin: .9rem 0 0 1.5rem; /* ~indent sub-nav els */
	--ul-level-1-padding: 0 3ch 0 0;
	--ul-level-1-padding-right: 3ch; /* we can't have nice things */
	--ul-level-1-a-padding: .3rem 0;

	--ul-level-1-font: inherit;
	--ul-level-1-font-weight: normal;
	--ul-level-1-text-transform: uppercase;
	--ul-level-1-justify-content: flex-start;
	--li-brand-justify-content: var(--li-brand-justify-content);

	/* .nav-ul-level-1 > .nav-li a */
	--font-size-main-nav-level-1: .9rem;
	--color-main-nav-level-1: #666;

	/* ============ BRANDS NAV (.nav-li-brands > .nav-ul-brands) ============ */
	--ul-brands-display: grid;
	/* display flex?: */
	--ul-brands-flex-flow: column nowrap;
	/*
		display grid?:
		- if auto-flow: row => grid-template-columns;
		- if auto-flow: column => grid-template-rows;
	*/
	--ul-brands-grid-auto-flow: row;
	--ul-brands-grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
	--ul-brands-grid-template-rows: unset;
	--ul-brands-grid-gap: .9ch 3ch;
	/*
		responsive columns, alphabetical by column:
		- column-count: 6; ... ~= max # of columns
		- column-width: 15ch; ... ~= min-width of columns
	*/
	--ul-brands-column-count: unset;
	--ul-brands-column-width: unset;
	--ul-brands-column-gap: unset;
	--ul-brands-border: 0 dashed blue;


	/* 'About Our Brands' */
	--nav-li-about-our-brands-display: none;
	--nav-li-about-our-brands-text-transform: uppercase;
	--nav-li-about-our-brands-justify-content: center;
	--nav-li-about-our-brands-color: transparent;
	--nav-li-about-our-brands-bg-color: black;
	--nav-li-about-our-brands-border: 1px dashed transparent;
	--nav-li-about-our-brands-border-width: 0 0 1px;


	/* SEARCH COMPONENT */
	--search-component-bg-color: #fff;
	--search-results-wrapper-bg-color: #000;
	--search-results-bg-color: #fff;
	--search-messaging-bg-color: #fff;
	--search-component-font-size: .99rem;



	/* ======================== LANDSCAPE ('-alt') ======================== */
	/* ======================== LANDSCAPE ('-alt') ======================== */
	/* ======================== LANDSCAPE ('-alt') ======================== */

	/* ============ MAIN NAV - TOP LEVEL ============ */
	/* --ul-level-0-padding-alt: 0; */ /* PROB !required */
	--font-size-main-nav-level-0-alt: var(--font-size-main-nav-level-0);

	--color-main-nav-level-0-alt: var(--color-main-nav-level-0);
	--hover-color-main-nav-level-0-alt: #fff;
	--ul-level-0-font-weight-alt: bold;
	--ul-level-0-text-transform-alt: uppercase;
	--ul-level-0-bg-color-alt: #fff;
	/* .nav-ul-level-0 > .nav-li */
	/* --ul-level-0-li-margin-alt: 0; */ /* @ .landscape: 0 for all */
	/* --ul-level-0-li-padding-alt: 0; */ /* @ .landscape: 0 for all */
	/* --ul-level-0-li-align-items-alt: center; */
	/* --ul-level-0-li-text-align-alt: left; */
	--ul-level-0-li-height-alt: calc(var(--header-height) * 1);
	--ul-level-0-li-justify-content-alt: center;
	--ul-level-0-li-align-self-alt: center;
	--ul-level-0-li-bg-color-alt: inherit;
	--ul-level-0-li-hover-bg-color-alt: var(--theme-color-1);
	--ul-level-0-li-border-alt: 1px solid #fff; /* 0px solid #... */
	--ul-level-0-li-border-width-alt: 0 0;

	--ul-level-0-li-hover-border-bottom-alt: 0 solid var(--theme-color-1);
	--ul-level-0-li-a-hover-color-alt: #fff;
	--ul-level-0-li-a-justify-content-alt: center;
	--ul-level-0-li-a-align-items-alt: center;

	/* ============ SUB-LEVEL ============ */
	--ul-level-1-top-alt: calc(var(--header-height) - 0px);
	--ul-level-1-margin-alt: .9rem 0 0 1.5rem; /* ~indent sub-nav els */
	/*
		PROB DNU --ul-level-1-li-padding-alt;
		PROB USE --ul-level-1-a-padding-alt;
	*/
	--ul-level-1-li-padding-alt: 0;
	--ul-level-1-a-padding-alt: 1.8ch;
	--ul-level-1-font-weight-alt: normal;
	--ul-level-1-text-transform-alt: capitalize;
	--ul-level-1-justify-content-alt: flex-end;
	--ul-level-1-bg-color-alt: #fff;
	--ul-level-1-border-alt: 3px solid var(--safilo-blue-1);
	--ul-level-1-border-width-alt: 3px 3px;
	--ul-level-1-border-radius-alt: 0 0 .9ch .9ch;
	--li-brand-justify-content-alt: flex-start;

	/* .nav-ul-level-1 > .nav-li */
	--ul-level-1-li-border-bottom-alt: 0 dotted transparent;

	/* .nav-ul-level-1 > .nav-li a */
	--font-size-main-nav-level-1-alt: .81rem;
	--color-main-nav-level-1-alt: var(--safilo-blue-1);
	--hover-color-main-nav-level-1-alt: #fff;
	--hover-bg-color-main-nav-level-1-alt: var(--safilo-blue-1);

	/* ============ BRANDS NAV (.nav-li-brands > .nav-ul-brands) ============ */
	--ul-brands-display-alt: grid; /* block (columns), flex, grid */
	--ul-brands-min-width-alt: 48ch;
	/* display flex?: */
	--ul-brands-flex-flow-alt: column nowrap;
	/*
		display grid?:
		- if auto-flow: row => grid-template-columns;
		- if auto-flow: column => grid-template-rows;
	*/
	--ul-brands-grid-auto-flow-alt: row;
	--ul-brands-grid-template-columns-alt: repeat(auto-fit, minmax(15ch, 1fr));
	--ul-brands-grid-template-rows-alt: unset;
	--ul-brands-grid-gap-alt: 0 .9ch;
	/*
		responsive columns, alphabetical by column:
		- column-count: 6; ... ~= max # of columns
		- column-width: 15ch; ... ~= min-width of columns
	*/
	--ul-brands-column-count-alt: unset;
	--ul-brands-column-width-alt: unset;
	--ul-brands-bg-color-alt: #fff;
	--ul-brands-border-alt: var(--ul-level-1-border-alt);
	--ul-brands-li-border-bottom-alt: 0;


	/* 'About Our Brands' */
	--nav-li-about-our-brands-justify-content-alt: center;
	--nav-li-about-our-brands-color-alt: gold;
	--nav-li-about-our-brands-bg-color-alt: black;
	--nav-li-about-our-brands-border-alt: 1px dashed gold;
	--nav-li-about-our-brands-border-width-alt: 0 0 1px;


	/* SEARCH ICON */
	--search-icon-wrapper-bg-color: var(--ul-level-0-li-bg-color-alt);
	--search-icon-wrapper-hover-bg-color: var(--ul-level-0-li-hover-bg-color-alt);
	--search-icon-wrapper-border-alt: var(--ul-level-0-li-border-alt);
	--search-icon-wrapper-border-width-alt: var(--ul-level-0-li-border-width-alt);
	--search-icon-wrapper-hover-border-alt: var(--ul-level-0-li-hover-border-bottom-alt);
	--search-icon-wrapper-hover-border-width-alt: 0;

	--search-icon-color: var(--color-main-nav-level-0-alt);
	--search-icon-hover-color: var(--ul-level-0-li-a-hover-color-alt);
	--search-icon-font-size: 1.5rem;

	/* SEARCH COMPONENT */
	--search-component-bg-color-alt: #fff;
	--search-results-wrapper-bg-color-alt: #000;
	--search-results-bg-color-alt: #fff;
	--search-messaging-bg-color-alt: #fff;
	--search-component-font-size-alt: .99rem;
	/*
	.
	.
	.
	*/
	/*
	.
	.
	.
	*/
	/* ======================== THE FOOTER ======================== */
	--footer-bg-color: var(--safilo-blue-1);
	--footer-color: #fff;
	--footer-link-color: var(--footer-color);
	--footer-link-hover-color: var(--footer-link-color);
	--footer-link-border: 1px solid transparent; /* 1px dotted var(--footer-link-color) */
	--footer-link-hover-border: 1px solid var(--footer-link-color);
	/*
	.
	.
	.
	*/
} /* :root */


h1, h2, h3 {
	font-family: "Futura", sans-serif;
	color: var(--safilo-blue-1);
}

.site { max-width: var(--site-max-width); }

.container a.simple {
	color: var(--safilo-blue-2);
	background: #fff;
	border-bottom: 1px dotted var(--safilo-blue-2);
}

.container a.simple:hover,
.container a.simple:focus {
	color: var(--safilo-blue-2);
	border-bottom: 2px solid var(--safilo-blue-2);
	outline: none;
}



/* ============ HEADER LOGO ============ */
.logo-wrapper {}
.logo-wrapper a {}
.logo-wrapper .tenant-logo { /* aspect-ratio: 2.54 / 1; */ }



/* ============ NAV TRIGGER/SWITCH (skipping past .main-nav for clarity) ============ */
.mobile-nav-switch {}
.mobile-nav-switch span { background: var(--safilo-blue-1); }



/* ======================== LOGO WALL ======================== */
/* see logo-wall.css for all available custom properties */
.logo-wall-section {
	--logo-wall-section-width: 100%;
	--logo-wall-heading-display: none;
	--logo-wall-grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));

	--logo-wall-li-bg-color: #f6f6f6;
	--logo-wall-li-hover-bg-color: var(--safilo-blue-6);
	--logo-wall-li-border: 1px solid transparent;
	--logo-wall-li-hover-border: 1px solid  var(--safilo-blue-5);

	--logo-wall-img-max-width: 120px;
}

.landscape .logo-wall-section .nav-li-brand,
.landscape .logo-wall-section .nav-li-brand:last-child { border: var(--logo-wall-li-border); }

.landscape .logo-wall-section .nav-li-brand:hover,
.landscape .logo-wall-section .nav-li-brand:last-child:hover { border: var(--logo-wall-li-hover-border); }

.landscape .logo-wall-section .nav-li-brand > a:hover { background: transparent; }

.logo-wall .brand-safilo_ppe { display: none; }


/* ======================== BRAND HEADERS ========================*/
/*
.brand-hdr.brand-hdr-[brandClass] {
	.brand-deco-wrapper.brand-deco-[brandClass] {
		img.brand-deco {}
	}
	.brand-logo-wrapper.brand-logo-[brandClass] {
		img.brand-logo {}
	}
}
*/

.brand-hdr {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	margin-bottom: 1.5rem;
	font-size: .81rem;
}
/* @catalog ix */
.brand-hdr.brand-hdr- { display: none; }

.brand-deco-wrapper,
.brand-logo-wrapper { width: 100%; }

.brand-deco-wrapper {
	display: block;
	margin: 0 0 .9rem;
}
/* .brand-deco-[brandClass] all have .brand-deco-wrapper */
.brand-deco-claiborne,
.brand-deco-denim,
.brand-deco-moschino-love,
.brand-deco-rebecca-minkoff,
.brand-deco-safilo-kids,
.brand-deco-safilo-ppe,
.brand-deco-emozioni { display: none; }







.brand-hdr .brand-logo-wrapper {
	display: flex;
	/* min-height in case a very short logo appears w/out brand eye-candy */
	/*	min-height: 120px;*/
	justify-content: center;
}

/* scale the img, not the wrapper */
.brand-hdr .brand-logo {
	max-width: 60%;
	/*	margin: auto; */
	margin: 1.5rem 0;
}

.brand-hdr .brand-copy-wrapper { display: none; }

/* ======================== MQ re: BRAND HEADERS ======================== */
@media screen and (min-width: 600px) {
	.brand-hdr { flex-flow: row nowrap; }

	.brand-hdr .brand-deco-wrapper {
		width: 50%;
		margin: 0 3vw 0 0;
	}

	.brand-deco-wrapper,
	.brand-logo-wrapper { width: 50%; }

	/* .brand-deco-[brandClass] all have .brand-deco-wrapper */
	.brand-hdr-claiborne .brand-logo-wrapper,
	.brand-hdr-denim .brand-logo-wrapper,
	/*.brand-hdr-elasta .brand-logo-wrapper,
	.brand-hdr-emozioni .brand-logo-wrapper,*/
/*	.brand-hdr-jimmy-choo .brand-logo-wrapper,*/
	.brand-hdr-moschino-love .brand-logo-wrapper,
	.brand-hdr-rebecca-minkoff .brand-logo-wrapper,
	.brand-hdr-safilo-kids .brand-logo-wrapper,
	.brand-hdr-safilo-ppe .brand-logo-wrapper { width: 100%; }

	.brand-hdr .brand-logo { max-width: 66%; }
	.brand-hdr .brand-deco + .brand-logo-wrapper .brand-logo { max-width: 60%; border: 3px dashed red; }

} /* MQ */


.btn-show-filters:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus { box-shadow: inset 0 3rem 0 0 var(--safilo-blue-1) !important; }



.cart-panel .cart-header { background: var(--safilo-blue-1); }
.cart-items h2 {
	background: var(--safilo-blue-7);
	color: var(--safilo-blue-1);
}



/* TODO: load safilo.css after B2B css to lose the !important ? */
.price { color: var(--safilo-blue-1) !important; }


.container-contact .view-header { visibility: hidden; }

.contact-form legend {
	display: inline-block;
	padding: 0 1.8rem;
	background: var(--COLOR-1);
	color: #999;
	font-size: 1.11rem;
	line-height: 2.4rem;
	text-transform: uppercase;
	background: #fff;
	border-top: 3px double #ccc;
	border-bottom: 3px double #ccc;
	border-radius: .9rem;
	border: 3px double #ccc;
	border-radius: .3rem;
	letter-spacing: 0.15rem;
	word-spacing: 0.3rem;
	background: var(--safilo-blue-1);
	color: #fff;
}


.has-overlay #chat-widget-container,
.has-overlay #livechat-eye-catcher {
	/*
		.filters-on #chat-widget-container,
		.filters-on #livechat-eye-catcher
	*/
	z-index: -1 !important;
}

#livechat-eye-catcher > div:nth-child(2) img {
	max-width: 213px !important;
	max-height: 90px !important;
}


/* TODO: someday earn forgiveness for this sin */
.file-upload .drop-zone {
	background: repeating-linear-gradient(45deg, #fff, #fff 20px, var(--safilo-blue-7) 20px, var(--safilo-blue-7) 40px) !important;
}

.select-wrapper.one-color .select,
.select-wrapper.one-size .select { letter-spacing: .087rem; }


.dialog-content {
	display: block;
	/*
		- re: 'Required to Place Order';
		- overriding problematic display: flex in layout.css until all other usages can be tested
	*/
}
.terms-policy-wrapper {
	display: none;
}

/* 1.Safilo terms and condition CSS*/
.terms-meta p {
  margin-bottom: 10px;
}

.terms-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terms-download, .contact-us {
  display: inline-block;
  margin: 0;
}

.terms-meta {
	display: block;
}

.terms-download,
.contact-us {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}

.terms-meta a {
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--theme-color-1);
	color: #fff !important;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.2s;
	white-space: nowrap;
}

.terms-meta a:hover {
	background-color: #0056b3;
	color: #fff !important;
}