/* Custom fonts */
@font-face { /* → Labil Grotesk (sans-serif) */
	src: url("https://cdn.shopify.com/s/files/1/0965/9138/0812/files/webfont_LabilGrotesk-Variable.woff2") format("woff2-variations");
	font-family: "Labil Grotesk Variable";
	font-style: normal;
	font-weight: 0 100;
	font-stretch: normal;
	font-display: auto;
	font-variation-settings: "wght" 50, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}
@font-face { /* → Moret (serif) */
	/* https://use.typekit.net/kfa7ceq.css */
	src: url("https://cdn.shopify.com/s/files/1/0965/9138/0812/files/webfont_Moret-Variable.woff2") format("woff2-variations");
	font-family: "moret-variable";
	font-style: normal;
	font-weight: 300 800;
	font-stretch: normal;
	font-display: auto;
	font-variation-settings: "wght" 300, "ital" 0; /* WGHT 300-800, ITAL 0-1 */
}
@font-face { /* → iA Writer Duo (mono) */
	src: url("https://cdn.shopify.com/s/files/1/0965/9138/0812/files/webfont_iAWriterDuoV.woff2") format('woff2-variations');
	font-family: "iA Writer Duo";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: normal;
	font-display: auto;
	font-variation-settings: "wght" 400, "SPCG" 0; /* WGHT 400-700, SPCG 0-150 */
}
@font-face { /* → iA Writer Duo (mono) */
	src: url("https://cdn.shopify.com/s/files/1/0965/9138/0812/files/webfont_iAWriterDuoV-Italic.woff2") format('woff2-variations');
	font-family: "iA Writer Duo";
	font-style: italic;
	font-weight: 400 700;
	font-stretch: normal;
	font-display: auto;
	font-variation-settings: "wght" 400, "SPCG" 0; /* WGHT 400-700, SPCG 0-150 */
}

/* Variables */
:root {
	--uac-font-family-sans: "Labil Grotesk Variable", -apple-system,
    BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--uac-font-family-serif: "moret-variable", "New York", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--uac-font-family-mono: "iA Writer Duo", "SF Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Rewriting Shopify CSS */
:root {
	/* CMS Theme settings
	Body 		→ Sans-serif
	Subheading 	→ Mono
	Heading 	→ Sans-serif
	Accent 		→ Serif
	*/
	
	--font-body--family: var(--uac-font-family-sans);
	--font-body--style: normal;
	--font-body--weight: 500;
	
	--font-subheading--family: var(--uac-font-family-mono);
	--font-subheading--style: normal;
	--font-subheading--weight: 400;
	
	--font-heading--family: var(--uac-font-family-sans);
	--font-heading--style: normal;
	--font-heading--weight: 500;
	
	--font-accent--family: var(--uac-font-family-serif);
	--font-accent--style: normal;
	--font-accent--weight: 600;
	
	/*
    --line-height--display-tight: 1;
    --line-height--display-normal: 1.1;
    --line-height--display-loose: 1.2;

    --line-height--heading-tight: 1.15;
    --line-height--heading-normal: 1.25;
    --line-height--heading-loose: 1.35;

    --line-height--body-tight: 1.2;
    --line-height--body-normal: 1.4;
    --line-height--body-loose: 1.6;
	
	--font-paragraph--spacing: 0.5em;
	--font-h1--spacing: 0.25em;
    --font-h2--spacing: 0.25em;
    --font-h3--spacing: 0.25em;
    --font-h4--spacing: 0.25em;
    --font-h5--spacing: 0.25em;
    --font-h6--spacing: 0.25em;
	*/
}

/* CMS Theme settings
P 	font 	→ body 			→ Sans-serif
H1 	font 	→ heading 		→ Sans-serif
H2 	font 	→ heading 		→ Sans-serif
H3 	font 	→ heading 		→ Sans-serif
H4 	font 	→ accent	 	→ Serif
H5 	font 	→ body 			→ Sans-serif
H6 	font 	→ subheading 	→ Mono
*/

* {
	font-variation-settings: "wght" 50, "stbl" 100, "ital" 0, "SPCG" 0; /* Reset of variable fonts at all levels, unless overidden below */
}

/* FROM SHOPIFY BASE.CSS */
h1, .h1, .h1.h1, .text-block.h1>* {
	font-variation-settings: "wght" 30, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
	
	animation-timeline:scroll(root); /* where the animation ends measured from the top of the scrollport ; where the animation starts measured from the bottom of the scrollport */
	animation-range:0 125px;
	animation-name:dance;
	animation-duration:1ms; /* Required in Firefox */
}
@keyframes dance {
	0% { font-variation-settings:"wght" 40, "stbl" 40; }
	100% { }
}


h2, .h2, .h2.h2, .text-block.h2>* {
	font-variation-settings: "wght" 50, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}

h3, .h3, .h3.h3, .text-block.h3>* {
	font-variation-settings: "wght" 60, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}

h4, .h4, .h4.h4, .text-block.h4>* {
	/*font-variation-settings: "wght" 600, "ital" 0; /* WGHT 300-800, ITAL 0-1 *!/*/
	font-variation-settings: "wght" 55, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}

h5, .h5, .h5.h5, .text-block.h5>* {
	font-variation-settings: "wght" 60, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}

h6, .h6, .h6.h6, .text-block.h6>* {
	font-variation-settings: "wght" 700, "SPCG" 30; /* WGHT 400-700, SPCG 0-150 */
}

jumbo-text {
	font-variation-settings: "wght" 40, "stbl" 0; /* WGHT 0-100, STBL 0-100 */
}

.button * {
	letter-spacing:0.03em;
	font-variation-settings: "wght" 60, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}

*::selection {
  background: #B1C7DF;
  color: #ffffff;
}

/*
When a snippet returns nothing, a div is still created by Shopify and takes visual space
When outputing the empty snippet with <span class="_flo-snippetIsEmpty"></span>, the code below removes the visual space of the parent div
 */
.shopify-section:has(> .section > .custom-section-content > .section-content-wrapper > div > ._flo-snippetIsEmpty._flo-hideParentSection),
div:has(> ._flo-snippetIsEmpty) {
	display:none;
}

/* Apply the animation of Product Title on product pages */
.product-details .view-product-title + rte-formatter h3 {
	transform-origin:0 50%;
	animation-timeline:scroll(root); /* where the animation ends measured from the top of the scrollport ; where the animation starts measured from the bottom of the scrollport */
	animation-range:0 25%;
	animation-name:dance2;
	animation-duration:1ms; /* Required in Firefox */
}
@media screen and (width < 750px) {
	.product-details .view-product-title + rte-formatter h3 { animation-range:0 75vh; }
}
@keyframes dance2 {
	0% { font-variation-settings:"wght" 60, "stbl" 50; transform:scale(1.1); 	}
	100% { }
}



.page-width-wide, .page-width-normal, .page-width-narrow, .page-width-content { --page-margin: 16px; /* Default value: 16px */ }
@media screen and (width >= 750px) {
	.page-width-wide, .page-width-normal, .page-width-narrow, .page-width-content { --page-margin: 24px; /* Default value: 40px */ }
}

/* Apply correct margins/paddings to footer
footer.shopify-section-group-footer-group > .section--page-width > .section-content-wrapper {
	--uac-page-margin:max(var(--page-margin), calc(var(--spacing-scale) * 24px), calc((100vw - 2400px) / 2));
	
	--padding-block-start:var(--uac-page-margin) !important;
	--padding-block-end:var(--uac-page-margin) !important;
}
footer.shopify-section-group-footer-group > .section--page-width > .section-content-wrapper > .group-block {
	--padding-block-start:var(--uac-page-margin) !important;
	--padding-block-end:var(--uac-page-margin) !important;
	--padding-inline-start:var(--uac-page-margin) !important;
	--padding-inline-end:var(--uac-page-margin) !important;
}
*/


/* Apply background image to footer */
footer { background-color:#b1c7df; }
footer .section-background {
	background:url('https://cdn.shopify.com/s/files/1/0965/9138/0812/files/Footer.jpg') no-repeat 34% 15%;
	background-color:transparent;
	background-size:100%;
	transform-origin:top center;
	z-index:0 !important;
	
	animation-timeline:view(97% 0); /* where the animation ends measured from the top of the scrollport ; where the animation starts measured from the bottom of the scrollport */
	animation-name:footer;
	animation-duration:1ms; /* Required in Firefox */
}
/* In case the screen ratio is below the image ratio, the background size is cover to make sure the images fills the container */
@media (max-aspect-ratio: 3360/2700) { footer .section-background { background-size:cover; } }

@keyframes footer {
	from {
		opacity:0;
		background-position-y:80%;
		background-size:115%;
	}
	to { }
}

.footer-content .group-block.color-scheme-1 {
  background-color: rgb(255 255 255 / 80%);
  backdrop-filter: blur(20px);
}

/* Hiding the menu title forced in Atelier 3.5 */
footer .menu__heading { display:none; }


/* Change font-size of page title on policy pages (because we can't change the template) */
.shopify-policy__title > h1 {
	font-size: calc((var(--font-size--h1) - var(--font-size--h2)) / 3 + var(--font-size--h2));
	font-variation-settings: "wght" 40, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}

.shopify-policy__container {
	margin-top:calc(var(--spacing-scale-default) * 32px);
	margin-bottom:calc(var(--spacing-scale-default) * 80px);
}

.shopify-policy__title {
	margin-bottom:calc(var(--spacing-scale-default) * 64px);
}

.shopify-policy__body h2 {
	font-size: calc((var(--font-size--h2) - var(--font-size--h3)) / 3 + var(--font-size--h3));
	font-variation-settings: "wght" 55, "stbl" 100; /* WGHT 0-100, STBL 0-100 */
}



.rte hr {
  border:none;
  border-top:1px solid #d2d2d2;
  margin-top:40px;
  color:transparent;
}

.link { text-decoration: underline; text-decoration-color: inherit !important; }





.flo_productVariant {
  border:var(--variant-picker-button-border-width) solid var(--color-variant-border);
  border-radius: var(--variant-picker-button-radius);
  display:block;
  overflow:hidden;
}

.flo_productVariant label {
  padding:var(--padding-md);
  display:flex !important;
  column-gap:var(--padding-md) !important;
  align-items:center;
  border-bottom:var(--variant-picker-button-border-width) solid var(--color-variant-border);
  cursor: pointer;
}
.flo_productVariant label:last-of-type { border-bottom:none; }

.flo_productVariant label > .image {
  --flo-variant-image: 2rem;
  width:var(--flo-variant-image);
  height:calc(var(--flo-variant-image) * 1.25);
  flex:0 0 auto;
  background:#f2f2f2;
}

.flo_productVariant label > .info { flex:1 1 auto; }
.flo_productVariant label > .info > * { margin:0; }

.flo_productVariant label > .price {
  flex:0 0 auto;
  color:#fff;
  background:#000;
  border-radius:calc(var(--variant-picker-button-radius) + 2px);
  padding:0rem 0.5rem 0.05rem 0.5rem;
  font-variation-settings: "wght" 60, "stbl" 100;
}

.flo_productVariant label:has(input[type="radio"]:checked) { background: #f2f2f2; }
.flo_productVariant label:has(input[type="radio"]:checked) > .image { background: #ffffff; }



.flo_photoGrid { }
.flo_inspirationBlock {
	width:100%;
	display:flex;
	flex-flow:column nowrap;
	gap:calc(var(--spacing-scale) * 48px);
	--flo-inspiration-overlap: var(--page-margin);
}
.custom-section-content .layout-panel-flex--column:has(.flo_photoGrid),
.custom-section-content .layout-panel-flex--column:has(.flo_inspirationBlock) { align-items:stretch; } /* This is to fix a bug where .flo_inspirationBlock is not going full width when the content isn't full enough (e.g. no text). The parent .layout-panel-flex--column is not stretching the content because of default Shopify styling, so this line fixes that. */

@media screen and (width >= 750px) { /* Desktop */
	.flo_inspirationBlock_richText { width:50%; }
	
	/* Code for when only 2 images are set, the layout is different */
	.count_1,
	.count_2,
	.count_3 { flex-direction:row; }
	
	.count_1 .flo_inspirationBlock_richText { flex:0 0 66%; }
	.count_2 .flo_inspirationBlock_richText { flex:0 0 33%; }
	.count_3 .flo_inspirationBlock_richText { flex:0 0 33%; }
	/* --------------------------- */
}
/* Hide the description of images when the screen becomes too small */
@media screen and (width < 400px) { .count_2 .flo_inspirationBlock_medias_alt { display:none; } }
@media screen and (width < 650px) { .count_3 .flo_inspirationBlock_medias_alt { display:none; } }
@media screen and (width < 750px) { .count_4 .flo_inspirationBlock_medias_alt { display:none; } }
@media screen and (width < 1000px) { .count_5 .flo_inspirationBlock_medias_alt { display:none; } }

.flo_photoGrid_medias {
	display:grid;
	align-items:start;
	flex-grow:1;
}
.flo_inspirationBlock_medias {
	display:grid;
	gap:0;
	align-items:end;
	flex-grow:1;
}
.flo_photoGrid_medias img,
.flo_inspirationBlock_medias img,
.flo_photoGrid_medias video,
.flo_inspirationBlock_medias video { width:100%; height:auto; }

.flo_photoGrid_medias_media.fullWidth {
	grid-column: 1 / -1;
}

/* When only 2 medias, adapt the amount of columns to 2 */
.count_2 .flo_photoGrid_medias:not([style*="columns:repeat(1"]) { grid-template-columns:repeat(2, 1fr) !important; }


/* Definition of grids */
.count_2 .flo_inspirationBlock_medias {
	grid-template-columns:0.9fr var(--flo-inspiration-overlap) 1.1fr !important; /* 2 columns + 1 overlaps */
}
.count_3 .flo_inspirationBlock_medias {
	grid-template-columns:0.8fr var(--flo-inspiration-overlap) 1.2fr var(--flo-inspiration-overlap) 1.0fr !important; /* 3 columns + 2 overlaps */
}
.count_4 .flo_inspirationBlock_medias {
	grid-template-columns:0.8fr var(--flo-inspiration-overlap) 0.9fr var(--flo-inspiration-overlap) 1.1fr var(--flo-inspiration-overlap) 1fr !important; /* 4 columns + 3 overlaps */
}
.count_5 .flo_inspirationBlock_medias {
	grid-template-columns:0.8fr var(--flo-inspiration-overlap) 0.7fr var(--flo-inspiration-overlap) 1.1fr var(--flo-inspiration-overlap) 1.3fr var(--flo-inspiration-overlap) 1fr !important;
}

/* Force elements on 1 row so they can overlap */
.flo_inspirationBlock_medias_media { grid-row:1 / 2; }
.flo_inspirationBlock_medias_alt { grid-row:2 / 3; align-self:start; }

/* Define columns so medias can overlap */
.flo_inspirationBlock_medias > :nth-child(1 of .flo_inspirationBlock_medias_media),
.flo_inspirationBlock_medias > :nth-child(1 of .flo_inspirationBlock_medias_alt) { grid-column:1 / 3; }
.flo_inspirationBlock_medias > :nth-child(2 of .flo_inspirationBlock_medias_media),
.flo_inspirationBlock_medias > :nth-child(2 of .flo_inspirationBlock_medias_alt) { grid-column:2 / 5; }
.flo_inspirationBlock_medias > :nth-child(3 of .flo_inspirationBlock_medias_media),
.flo_inspirationBlock_medias > :nth-child(3 of .flo_inspirationBlock_medias_alt) { grid-column:4 / 7; }
.flo_inspirationBlock_medias > :nth-child(4 of .flo_inspirationBlock_medias_media),
.flo_inspirationBlock_medias > :nth-child(4 of .flo_inspirationBlock_medias_alt) { grid-column:6 / 9; }
.flo_inspirationBlock_medias > :nth-child(5 of .flo_inspirationBlock_medias_media),
.flo_inspirationBlock_medias > :nth-child(5 of .flo_inspirationBlock_medias_alt) { grid-column:8 / 11; }

/* Send medias to the front or to the back for beautiful overlaping */
.flo_inspirationBlock_medias_media:first-child { z-index:1; }
.flo_inspirationBlock_medias_media:last-child { z-index:0; }
.count_4 .flo_inspirationBlock_medias_media:nth-child(3) { z-index:-1; }
.count_5 .flo_inspirationBlock_medias_media:nth-child(2) { z-index:3; }
.count_5 .flo_inspirationBlock_medias_media:nth-child(3) { z-index:2; }

/* Add or remove padding to align texts under medias */
.flo_inspirationBlock_medias > :nth-child(2 of .flo_inspirationBlock_medias_alt),
.count_4 .flo_inspirationBlock_medias > :nth-child(3 of .flo_inspirationBlock_medias_alt),
.count_5 .flo_inspirationBlock_medias > :nth-child(3 of .flo_inspirationBlock_medias_alt),
.count_5 .flo_inspirationBlock_medias > :nth-child(4 of .flo_inspirationBlock_medias_alt) { padding-left:var(--flo-inspiration-overlap); }
.count_5 .flo_inspirationBlock_medias > :nth-child(2 of .flo_inspirationBlock_medias_alt) { padding-left:inherit; }


main[data-template*="product"] .marquee__repeated-items h6 { /* "Meet the Artist" text on product pages when using marquee */
	opacity:0.15;	
}

/* For product lists, when the page is full width, add padding on the left of the screen for the text */
.product-card__content > .group-block {
	--flo-product-padding:max(var(--page-margin), var(--padding-inline-start)); /* The minimum value will be the page margin if padding is sets at zero */
}
/* For page sections, carousel type */
.section-resource-list.section--full-width .resource-list__carousel slideshow-slide:first-child .product-card__content > .group-block {
	padding-inline-start:var(--flo-product-padding);
}
@media screen and (width >= 750px) { /* Desktop */
	/* For page sections, grid type */
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(1"] > .resource-list__item .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(2"] > .resource-list__item:nth-child(2n + 1) .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(3"] > .resource-list__item:nth-child(3n + 1) .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(4"] > .resource-list__item:nth-child(4n + 1) .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(5"] > .resource-list__item:nth-child(5n + 1) .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(6"] > .resource-list__item:nth-child(6n + 1) .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(7"] > .resource-list__item:nth-child(7n + 1) .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns: repeat(8"] > .resource-list__item:nth-child(8n + 1) .product-card__content > .group-block {
		padding-inline-start:var(--flo-product-padding);
	}
	
	/* For Collection pages
	For now it's not possible to apply the margin only for the first item in row because the amount of columns is set in a <style> container in the DOM and none of CSS selectors can detect that
	*/
	.collection-wrapper--full-width[style*="--padding-inline-start: 0"] .product-grid--grid .product-grid__item .product-card__content > .group-block {
		padding-inline-start:var(--flo-product-padding);
	}
}
@media screen and (width < 750px) { /* Mobile */
	/* For page sections, grid type */
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns-mobile: repeat(1"] > .resource-list__item .product-card__content > .group-block,
	.section-resource-list.section--full-width .resource-list--grid[style*="--resource-list-columns-mobile: repeat(2"] > .resource-list__item:nth-child(2n + 1) .product-card__content > .group-block {
		padding-inline-start:var(--flo-product-padding);
	}
	
	/* To avoid added padding by the theme on the cards */
	.collection-wrapper--full-width-on-mobile [product-grid-view=default] .product-grid__card { padding-inline-start:0; padding-inline-end:0; }
	.collection-wrapper--full-width-on-mobile .product-grid--grid[style*="--mobile-columns: 1"] .product-grid__item .product-card__content > .group-block,
	.collection-wrapper--full-width-on-mobile .product-grid--grid[style*="--mobile-columns: 2"] .product-grid__item:nth-child(2n + 1) .product-card__content > .group-block {
		padding-inline-start:var(--flo-product-padding);
	}
}