/*
 * Essilor theme – layout & component base.
 *
 * Layout boxes are driven by CSS custom properties (--display, --padding-top, --gap, …)
 * so each page stylesheet only has to set values per element and breakpoint.
 *
 * Breakpoints (same as the original site):
 *   mobile  ≤ 767px
 *   tablet  768 – 1024px
 *   laptop  1025 – 1366px
 *   desktop ≥ 1367px
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85714285714286;
	color: #76767f;
	background: #f6f7fd;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
figure { margin: 0; }
p { margin: 0 0 1em; }
ol, ul { margin: 0 0 1.5em 3em; padding: 0; }
a { color: #26262c; }
a:hover, a:focus { color: #001fff; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; clear: both; font-family: 'Open Sans', sans-serif; font-weight: 400; color: #76767f; line-height: 1em; }
h1 { font-size: 54px; line-height: 1.4em; }
h2 { font-size: 42px; line-height: 1.3em; }
h3 { font-size: 36px; line-height: 1.3em; }
h4 { font-size: 25px; line-height: 1.2em; }
h5 { font-size: 20px; line-height: 1.2em; }
h6 { font-size: 15px; line-height: 1.25em; }
@media (max-width: 921px) {
	h1 { font-size: 45px; } h2 { font-size: 32px; } h3 { font-size: 26px; }
	h4 { font-size: 22px; } h5 { font-size: 18px; }
}
@media (max-width: 544px) {
	h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
	h4 { font-size: 20px; } h5 { font-size: 20px; }
}
/* Site-wide custom CSS carried over from the original "Additional CSS". */
.titleColor { color: #001fff; }
h3 { font-size: 1.25rem; font-family: 'Montserrat', sans-serif; line-height: 1.2em; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Visibility per device ---------- */
@media (max-width: 767px)                         { .hide-m { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-t { display: none !important; } }
@media (min-width: 1025px) and (max-width: 1366px){ .hide-l { display: none !important; } }
@media (min-width: 1367px)                        { .hide-d { display: none !important; } }

/* ---------- Layout box (.c) ---------- */
.pg {
	--container-max-width: 1200px;
	--widgets-spacing: 20px 20px;
	--widgets-spacing-row: 20px;
	--widgets-spacing-column: 20px;
}
@media (max-width: 1024px) { .pg { --container-max-width: 1024px; } }
@media (max-width: 767px) {
	.pg {
		--container-max-width: 600px;
		--container-default-padding-top: 0px;
		--container-default-padding-right: 0px;
		--container-default-padding-bottom: 0px;
		--container-default-padding-left: 0px;
	}
}

/* every element (box or widget) can be positioned inside a flex/grid parent */
.c, .w {
	--flex-direction: initial; --flex-wrap: initial; --justify-content: initial;
	--align-items: initial; --align-content: initial; --gap: initial;
	--flex-basis: initial; --flex-grow: initial; --flex-shrink: initial;
	--order: initial; --align-self: initial;
	align-self: var(--align-self);
	flex-basis: var(--flex-basis);
	flex-grow: var(--flex-grow);
	flex-shrink: var(--flex-shrink);
	order: var(--order);
}
.c--full, .w {
	align-content: var(--align-content);
	align-items: var(--align-items);
	flex-direction: var(--flex-direction);
	flex-wrap: var(--flex-wrap);
	gap: var(--row-gap) var(--column-gap);
	justify-content: var(--justify-content);
}
.c {
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--content-width: min(100%, var(--container-max-width, 1200px));
	--width: 100%;
	--min-height: initial;
	--height: auto;
	--text-align: initial;
	--margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
	--padding-top: var(--container-default-padding-top, 10px);
	--padding-right: var(--container-default-padding-right, 10px);
	--padding-bottom: var(--container-default-padding-bottom, 10px);
	--padding-left: var(--container-default-padding-left, 10px);
	--position: relative;
	--z-index: revert;
	--gap: var(--widgets-spacing, 20px);
	--row-gap: var(--widgets-spacing-row, 20px);
	--column-gap: var(--widgets-spacing-column, 20px);
	--e-con-grid-template-columns: repeat(3, 1fr);
	--e-con-grid-template-rows: repeat(2, 1fr);
	--flex-wrap-mobile: wrap;
	display: var(--display);
	position: var(--position);
	z-index: var(--z-index);
	width: var(--width);
	height: var(--height);
	min-height: var(--min-height);
	min-width: 0;
	margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
	background-repeat: no-repeat;
}
.c--top { --margin-left: auto; --margin-right: auto; max-width: min(100%, var(--width)); }
.c--flex {
	--display: flex;
	--flex-direction: column;
	--flex-basis: auto; --flex-grow: 0; --flex-shrink: 1;
	flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis);
}
.c--grid {
	--display: grid;
	--grid-justify-content: start; --grid-align-content: start; --grid-auto-flow: row;
}
.c--full { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); text-align: var(--text-align); }
.c--full.c--flex { flex-direction: var(--flex-direction); }
.c--grid, .c--grid > .c__in {
	align-content: var(--grid-align-content);
	align-items: var(--align-items);
	grid-auto-flow: var(--grid-auto-flow);
	grid-template-columns: var(--e-con-grid-template-columns);
	grid-template-rows: var(--e-con-grid-template-rows);
	justify-content: var(--grid-justify-content);
	justify-items: var(--justify-items);
}
/* boxed: the outer box spans the width, the inner box holds the content */
.c--boxed { gap: initial; text-align: initial; }
.c--boxed.c--flex { flex-direction: column; flex-wrap: nowrap; align-content: normal; align-items: normal; justify-content: normal; }
.c--boxed.c--grid { grid-template-columns: 1fr; grid-template-rows: 1fr; justify-items: legacy; }
.c > .c__in {
	display: var(--display);
	gap: var(--row-gap) var(--column-gap);
	height: 100%;
	width: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
	padding-top: var(--padding-top);
	padding-bottom: var(--padding-bottom);
	text-align: var(--text-align);
}
.c--flex > .c__in {
	flex-direction: var(--flex-direction);
	flex-wrap: var(--flex-wrap);
	align-content: var(--align-content);
	align-items: var(--align-items);
	justify-content: var(--justify-content);
	flex: 1 1 auto;
	align-self: auto;
}
@media (max-width: 767px) {
	.c--flex { --width: 100%; --flex-wrap: var(--flex-wrap-mobile); }
}

/* ---------- Classic section / column (one legacy block on the Stellest pages) ---------- */
.sec { position: relative; }
.sec > .sec__in { display: flex; margin-inline: auto; position: relative; max-width: 1200px; }
@media (max-width: 1024px) { .sec > .sec__in { flex-wrap: wrap; max-width: 1024px; } }
@media (max-width: 767px)  { .sec > .sec__in { max-width: 600px; } }
.col { position: relative; display: flex; min-height: 1px; width: 100%; }
.col > .col__wrap { display: flex; flex-wrap: wrap; align-content: flex-start; position: relative; width: 100%; padding: 10px; }
.col__wrap > .w { width: 100%; }
.col__wrap > .w:not(:last-child) { margin-block-end: 20px; }
.col__wrap > .w--wi { max-width: 100%; }
.col__wrap > .w--wi:not(:last-child) { margin-block-end: 0; } /* fixed-width widgets have no bottom spacing */

/* ---------- Widgets ---------- */
.w { position: relative; min-width: 0; max-width: 100%; }
.c > .w > .w__c, .c > .c__in > .w > .w__c { height: 100%; }
.w--video, .w--accordion { width: var(--container-widget-width); --flex-grow: var(--container-widget-flex-grow); }

/* heading */
.h-title { margin: 0; padding: 0; } /* line-height comes from the h1–h6 rules, as on the original */
.h-title > a { color: inherit; font-size: inherit; line-height: inherit; }

/* image box */
.ib { text-align: center; }
.ib__img { display: inline-block; }
.ib__img img { display: block; line-height: 0; }
.ib__body { width: 100%; }
.ib__title { margin: 0; }
.ib__desc { margin: 0; }
@media (min-width: 768px) { .ib--top .ib__img { margin: auto; } }
@media (max-width: 767px) { .ib__img { margin-inline: auto !important; margin-bottom: 15px; } }

/* video */
.w--video .w__c { overflow: hidden; transform: translateZ(0); }
.video { aspect-ratio: var(--video-aspect-ratio, 1.77777); }
.video iframe { display: flex; width: 100%; height: 100%; border: 0; background: #000; }

/* counter */
.counter { display: flex; flex-direction: column-reverse; align-items: stretch; justify-content: center; }
.counter__wrap { display: flex; flex: 1; font-size: 69px; font-weight: 600; line-height: 1; text-align: center; }
.counter__num { flex-grow: 0; }
.counter__prefix { flex-grow: 1; text-align: end; white-space: pre-wrap; }
.counter__suffix { flex-grow: 1; text-align: start; white-space: pre-wrap; }

/* divider */
.w--divider { --divider-border-style: none; --divider-border-width: 1px; --divider-color: #0c0d0e; }
.divider { display: flex; }
.divider__line {
	display: flex; margin: 0; direction: ltr;
	border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
}

/* accordion */
.acc { text-align: start; }
.acc__item { border: 1px solid #d5d8dc; }
.acc__item + .acc__item { border-block-start: none; }
.acc__head { cursor: pointer; font-weight: 700; line-height: 1; margin: 0; padding: 15px 20px; outline: none; }
.acc__head:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.acc__icon { display: inline-block; width: 1.5em; float: left; text-align: left; }
.acc__icon svg { width: 1em; height: 1em; vertical-align: -0.125em; }
.acc__icon .is-opened, .acc__head.is-open .acc__icon .is-closed { display: none; }
.acc__head.is-open .acc__icon .is-opened { display: inline; }
.acc__title { color: inherit; text-decoration: none; }
.acc__body { display: none; padding: 15px 20px; border-block-start: 1px solid #d5d8dc; }
.acc__body.is-open { display: block; }
@media (max-width: 767px) {
	.acc__head { padding: 12px 15px; }
	.acc__icon { width: 1.2em; }
	.acc__body { padding: 7px 15px; }
}

/* image */
.w--image { text-align: center; }
.w--image img { display: inline-block; vertical-align: middle; }


/* ---------- 404 ---------- */
.ey-404 { max-width: 760px; margin: 0 auto; padding: 120px 20px; text-align: center; }
.ey-404 h1 { font-size: 36px; color: #26262c; margin-bottom: 16px; }