/*
Theme Name: Tillander
Theme URI: https://github.com/WP-SEO-AI-Agency/agency-theme-gutenberg
Author: WP SEO AI Web Agency
Author URI: https://github.com/WP-SEO-AI-Agency
Description: Tillander — client child theme of Agency Theme Gutenberg. Brand values live in theme.json tokens; sections come from the parent's pattern library.
Template: agency-theme-gutenberg
Version: 0.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tillander
Tags: block-theme, full-site-editing, block-patterns
*/

/* Brand tokens are defined in theme.json. */

/* The source's base theme renders all text with grayscale anti-aliasing. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Product-search dialog (inc/site-chrome.php), measured on the source's popup: a
 * 640x350 white box 115px from the top over an 80% black backdrop, a 20px close cross
 * 20px in from its top right. JetSearch's results drop below the box, as on the source.
 */
.tillander-search-dialog {
	box-sizing: border-box;
	width: 640px;
	max-width: calc(100vw - 32px);
	min-height: 350px;
	margin: 115px auto auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 2px 8px 23px 3px rgb(0 0 0 / 20%);
}

.tillander-search-dialog::backdrop {
	background: rgb(0 0 0 / 80%);
}

.tillander-search-dialog__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.tillander-search-dialog__close svg {
	display: block;
}

/*
 * The dialog title's rule runs from the title to the box's right padding.
 */
.tillander-search-dialog hr.wp-block-separator {
	flex: 1 1 auto;
	width: auto;
	height: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--contrast);
}

.tillander-search-dialog .jet-ajax-search-block {
	margin-top: 32px;
}

/*
 * JetSearch inside the dialog, skinned with the source widget's style settings: a
 * #e9e9e9-bordered field row with a soft shadow, a 200px uppercase category column,
 * and results of 150px thumbnails with uppercase titles, a type label, a small
 * justified excerpt and the price, divided by #dedede rules. Scoped one level deeper
 * than JetSearch's own stylesheet, which loads after the theme's.
 */
.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__fields-holder {
	border: 1px solid #e9e9e9;
	box-shadow: 0 0 12px -2px rgb(0 0 0 / 18%);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__field[type="search"] {
	height: 49px;
	padding: 15px;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	color: #707070;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 100;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__field[type="search"]::placeholder {
	font-size: 13px;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__field[type="search"]::-webkit-search-cancel-button {
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 2l16 16M18 2L2 18' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
	appearance: none;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search .jet-ajax-search__categories .chosen-container-single .chosen-single {
	height: 49px;
	padding: 16px;
	border: 0;
	border-left: 1px solid #e1e5eb;
	border-radius: 0;
	box-shadow: none;
	color: #333;
	font-size: 0.8rem;
	line-height: 17px;
	text-transform: uppercase;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-area {
	border-radius: 0;
	box-shadow: 0 0 16px -4px rgb(0 0 0 / 50%);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-header {
	padding: 5px;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-count {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__arrow-button {
	color: var(--wp--preset--color--contrast);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__arrow-button:hover {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-list {
	max-height: 500px;
	overflow-y: auto;
	scrollbar-color: var(--wp--preset--color--contrast) var(--wp--preset--color--base);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-item {
	border-bottom: 1px solid #dedede;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-item:hover {
	background-color: rgb(249 249 249 / 69%);
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__item-link {
	padding: 10px;
	color: #333;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__item-thumbnail {
	width: 150px;
	max-width: 150px;
	flex: 0 0 150px;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__item-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 200;
	line-height: 1.5;
	text-transform: uppercase;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__results-item:hover .jet-ajax-search__item-title {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.tillander-search-dialog .jet-ajax-search-block .jet-search-title-fields__item {
	color: #4f4f4f;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6rem;
	font-weight: 100;
	line-height: 24px;
	text-transform: uppercase;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__item-content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6rem;
	line-height: 1.5;
	text-align: justify;
}

.tillander-search-dialog .jet-ajax-search-block .jet-ajax-search__item-price {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
}

/* The floating back-to-top button shows once the page is scrolled (site-chrome.js). */
.is-style-fixed-quick-links > .wp-block-image:last-child {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.tillander-is-scrolled .is-style-fixed-quick-links > .wp-block-image:last-child {
	visibility: visible;
	opacity: 1;
}

/*
 * Product carousel (the product-collection block's Carousel style; arrows from
 * site-chrome.js): the source's loop carousel, boxed at 1400px — the track 40px in
 * from the box with three 550px-tall cards in view 30px apart, the arrows at the
 * box's edges, scrolled one card per arrow press.
 */
.wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	width: calc(min(100%, 1400px) - 80px);
	margin: 0 auto;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
	flex: 0 0 calc((100% - 60px) / 3);
	width: auto;
	max-width: none;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child {
	height: 550px;
	aspect-ratio: auto;
}

/* The source's swiper shows three cards from 1024px, two from 767px and one below
   that; the cards are 440px tall up to 1024px and 4:5 on phones. */
@media (width < 1024px) {
	.wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
		flex-basis: calc((100% - 30px) / 2);
	}
}

@media (width < 767px) {
	.wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
		flex-basis: 100%;
	}
}

@media (width <= 1024px) {
	.wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child {
		height: 440px;
	}
}

@media (width <= 767px) {
	.wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child {
		height: auto;
		aspect-ratio: 4 / 5;
	}
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow {
	position: absolute;
	z-index: 2;
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow img {
	display: block;
	width: 25px;
	height: 25px;
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* The card title is inline text on its 24px line, as in the source. */
.wp-block-woocommerce-product-collection.is-style-carousel .wp-block-post-title a {
	display: inline;
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow--prev {
	left: max(0px, (100% - 1400px) / 2);
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow--next {
	right: max(0px, (100% - 1400px) / 2);
}

/* The source sizes the card photo `100% auto`, centred: full card width, cropped or
   banded vertically by the photo's own ratio (taken from its width/height attributes). */
.wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child .wc-block-components-product-image {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	margin: 0;
	overflow: hidden;
}

.wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child img {
	width: 100%;
	height: auto;
	object-fit: fill;
}

/* Instagram's embed script sizes its iframe to the column including its 1px border. */
.wp-block-embed-instagram iframe.instagram-media {
	box-sizing: border-box;
}

/* The Fixed background style holds the photo still while the page scrolls — on
   desktops only: the source scrolls it below 1025px and on landscape screens up to
   1366px wide (tablets and small laptops). */
@media (width <= 1024px), (width <= 1366px) and (orientation: landscape) {
	.wp-block-group.is-style-fixed-background {
		background-attachment: scroll;
	}
}

/* Complianz's "Manage consent" tab carries the source's button type (its Elementor
   kit styles every button). */
.cmplz-btn.cmplz-manage-consent {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* The consent banner's buttons take the page's type, as the source's kit gives
   every button; the browser would otherwise set them in its own sans. */
.cmplz-cookiebanner .cmplz-btn {
	font-family: inherit;
}

/*
 * Header mega panel — structural plumbing for core/navigation.
 *
 * The approved design (tillander.com, measured at 1440px) opens ATELIER and JEWELRY as
 * a full-width panel under the header: white, 32px side padding, a 1px rule inset 32px
 * along its top and a #cfcfcf rule under it. Each menu group is a column whose heading
 * sits above its links (16px type on a 24px rhythm, 9px below the heading); text starts
 * 80px into its column. ATELIER's six groups fill two rows of columns 501/374/501;
 * JEWELRY's three sit in one row of equal columns, and a group longer than nine links
 * (COLLECTION) flows into two equal columns 21px apart (200px apart at 1440px).
 *
 * The markup is core's navigation block, so the panel geometry lives here; the links,
 * labels and grouping stay editable in the Navigation block. Below 1025px the desktop
 * navigation is hidden (block visibility) and the menu button's overlay takes over, so
 * every rule is desktop-only — which also keeps them off the overlay's accordions.
 */

/* The header is its own layer above the page (the source's header container is
 * position: relative; z-index: 100), so content pulled up under it stays beneath. */
header.wp-block-template-part {
	position: relative;
	z-index: 100;
}

@media (width >= 1025px) {
	/* Anchor the panel to the header rather than to the menu item: every positioned
	 * wrapper core puts between them (outranking core's desktop container rule). */
	header.wp-block-template-part .wp-block-navigation,
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open),
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item {
		position: static;
	}

	/* Equal slots for the two triggers, so the wordmark between them is page-centred. */
	header.wp-block-template-part > .wp-block-group > .wp-block-group:nth-child(2) > .wp-block-navigation {
		flex: 0 0 120px;
	}

	/* A group: its heading, then its links. */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
		padding-left: 80px;
		min-width: 0;
	}

	header.wp-block-template-part .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: inline-block;
		padding: 0;
		font: inherit;
		line-height: 24px;
		letter-spacing: inherit;
		text-transform: none;
		color: inherit;
	}

	/* A group's links: always shown inside the open panel (no flyouts). */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		display: block;
		visibility: inherit;
		opacity: 1;
		width: auto;
		min-width: 0;
		height: auto;
		overflow: visible;
		margin-top: 9px;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
	}

	/* A group's links slide 15px right on hover with a 10px line drawn in before them
	   (the source's menu-hover-line, 0.25s ease). */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		position: relative;
		display: block;
		padding-left: 0;
		transition: transform 0.25s ease;
		backface-visibility: hidden;
	}

	/* The links are light futura-pt; the group headings stay Futura Medium. */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--futura-pt);
		font-weight: 300;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 0;
		height: 0;
		border-top: 1.5px solid currentcolor;
		opacity: 0;
		transform: translate3d(0, -50%, 0);
		transition: width 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover,
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within {
		transform: translateX(15px);
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover::before,
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within::before {
		width: 10px;
		opacity: 1;
		transform: translate3d(-21px, -50%, 0);
	}

	/* A linked group heading draws a 1.5px underline from the left (0.25s ease-out). */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content {
		position: relative;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1.5px;
		background: currentcolor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.25s ease-out;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content:hover::after {
		transform: scaleX(1);
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		position: absolute;
		top: calc(100% - 4px);
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 33px 32px 32px;
		background-color: var(--wp--preset--color--base);
		background-image: linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast));
		background-size: calc(100% - 64px) 1px;
		background-position: 32px 0;
		background-repeat: no-repeat;
		border: 0;
		border-bottom: 1px solid #cfcfcf;
		box-shadow: none;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 27px 0;
		font-family: var(--wp--preset--font-family--body);
		font-size: 16px;
		font-weight: 200;
		line-height: 24px;
		letter-spacing: 0.4px;
		color: var(--wp--preset--color--contrast);

		/* The panel fades in over 0.1s each time it opens. */
		transition: opacity 0.1s ease;
	}

	/* COLLECTION: a group longer than nine links flows into two equal columns. */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:has(> li:nth-child(10)) {
		columns: 2;
		column-gap: 21px;
		width: 100%;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
		width: auto;
		min-width: 0;
		height: auto;
	}

	/* ATELIER's groups fade in over 0.75s the first time its panel opens (the source's
	   entrance animation on that panel), until site-chrome.js marks the trigger seen. */
	header.wp-block-template-part > .wp-block-group > .wp-block-group:nth-child(2) > .wp-block-navigation:first-child .wp-block-navigation__container > .has-child:not(.tillander-panel-seen):hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		animation: tillander-fade-in 0.75s ease both;
	}

	/* Keep the panel open while the pointer crosses from the trigger down to it. */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 48px;
	}

	/* ATELIER: more than three groups fill two rows, columns 501/374/501. */
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> li:nth-child(4)) {
		grid-template-columns: 501fr 374fr 501fr;
		grid-template-rows: auto auto;
		grid-auto-flow: column;
	}
}

/*
 * Tablets and phones: the source's mobile header (measured 360–1024px) — the logo mark
 * left, the wordmark centred, the menu button right. The side slots share the leftover
 * width equally so the wordmark stays page-centred; the insets are the source's: the
 * logo 9.82vw − 22.6px in (78px at 1024) at 99px wide on tablets, 5.5vw in at 14vw
 * wide on phones; the button 42px from the right on tablets, 5vw + 10px on phones; the
 * wordmark 200px, narrowing to 50vw − 40px below 480px.
 */
@media (width <= 1024px) {
	header.wp-block-template-part > .wp-block-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Equal side slots without padding (padding would sit outside the shared space
	   and push the wordmark off centre); the insets are their contents' margins. */
	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child,
	header.wp-block-template-part > .wp-block-group > .wp-block-group:last-child {
		flex: 1 1 0;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child > figure {
		margin-left: calc(9.82vw - 22.6px);
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:last-child > .wp-block-navigation {
		margin-right: 42px;
		margin-bottom: 5px;
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child img {
		width: 99px !important;
		height: auto;
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:nth-child(2) > figure img {
		width: min(200px, 50vw - 40px) !important;
		height: auto;
	}
}

@media (width <= 767px) {
	/* The source centres the phone logo in the whole 140px bar; here the bar's 1px
	   bottom rule sits inside it, so a 1px top margin puts the logo back on the
	   source's centre line. */
	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child > figure {
		margin-top: 1px;
		margin-left: 5.5vw;
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:last-child > .wp-block-navigation {
		margin-right: calc(5vw + 10px);
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child img {
		width: 14vw !important;
	}
}

/* The overlay's close button: the source's thin 30px cross. */
.wp-block-navigation-overlay-close {
	width: 30px;
	height: 30px;
	background: url("assets/icons/close.svg") center / 30px no-repeat;
}

.wp-block-navigation-overlay-close svg {
	display: none;
}

/* The menu button: the source's 27px three-line icon. */
.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-container-open {
	width: 27px;
	height: 27px;
	padding: 0;
	background: url("assets/icons/menu.svg") center / 27px no-repeat;
}

.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/*
 * Its overlay: the part's white column over an 80% black scrim, as the source's
 * off-canvas — the scrim shows at once and the column slides in from the right fading
 * up over 0.3s (Elementor's fadeInRight, ease), then plays that backwards on close
 * while the scrim stays. The container keeps its fixed full-screen box while closed so
 * the exit can run (display is held for the 0.3s by the transition).
 */
.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-container {
	position: fixed;
	inset: 0;
	z-index: 100000;
	padding: 0;
	background-color: rgb(0 0 0 / 80%);
	transition: display 0.3s allow-discrete;
}

.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-container.is-menu-open {
	animation: none;
}

/* Core blanks a closed container's background (!important); the scrim stays for the
   exit, and the container is display:none once it ends. */
.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-container:not(.is-menu-open) {
	background-color: rgb(0 0 0 / 80%) !important;
}

.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-dialog,
.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__responsive-container-content,
.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__overlay-container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.wp-block-navigation.is-style-menu-toggle .wp-block-navigation__overlay-container {
	opacity: 0;
	transform: translate3d(100%, 0, 0);
	transition: opacity 0.3s cubic-bezier(0.75, 0, 0.75, 0.9), transform 0.3s cubic-bezier(0.75, 0, 0.75, 0.9), display 0.3s allow-discrete;
}

.wp-block-navigation.is-style-menu-toggle .is-menu-open .wp-block-navigation__overlay-container {
	opacity: 1;
	transform: none;
	transition-timing-function: ease;
}

@starting-style {
	.wp-block-navigation.is-style-menu-toggle .is-menu-open .wp-block-navigation__overlay-container {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
}

/*
 * The overlay accordions (Details blocks in the Overlay accordion style): each group a
 * 45px row ruled #d5d8dc underneath, its label in Futura Medium with a 15x8 chevron
 * 10px after it; open, its links in light futura-pt 19.2px 21px under the label, the
 * group's own page first and 20px clear of the rest, then 34px apart.
 */
.wp-block-details.is-style-overlay-accordion {
	margin: 0;
	interpolate-size: allow-keywords;
}

.wp-block-details.is-style-overlay-accordion > summary {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: #1f2124;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 24px;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.wp-block-details.is-style-overlay-accordion > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-overlay-accordion > summary::after {
	content: "";
	width: 15px;
	height: 8px;
	background: url("assets/icons/chevron-down.svg") center / 15px 8px no-repeat;
}

.wp-block-details.is-style-overlay-accordion[open] > summary::after {
	transform: rotate(180deg);
}

.wp-block-details.is-style-overlay-accordion > .wp-block-navigation {
	display: block;
	margin-top: 21px;
}

.wp-block-details.is-style-overlay-accordion > .wp-block-navigation .wp-block-navigation__container {
	display: block;
}

.wp-block-details.is-style-overlay-accordion > .wp-block-navigation .wp-block-navigation-item {
	display: block;
}

.wp-block-details.is-style-overlay-accordion > .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item {
	margin-top: 5px;
}

.wp-block-details.is-style-overlay-accordion > .wp-block-navigation .wp-block-navigation-item:first-child {
	margin-bottom: 20px;
}

.wp-block-details.is-style-overlay-accordion > .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--futura-pt);
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.4px;
	line-height: 1.5;
	text-transform: none;
}

/* The overlay's social icons: 35px black discs 47px apart, as the source's. */
.wp-block-social-links.is-style-overlay-social {
	padding-left: 4px;
}

.wp-block-social-links.is-style-overlay-social .wp-social-link {
	padding: 7.5px;
}

.wp-block-social-links.is-style-overlay-social .wp-social-link a {
	padding: 0;
}

/*
 * Desktop widths scale as on the source (measured 1025–1920px): side margins
 * 5.06vw − 6px (46px at 1025, 67px at 1440, 91px at 1920), the logo mark 60→99px with
 * its left edge at 98px, 123px and 168px, and the wordmark 187px at 1025px, 200px from
 * 1100px. At 1440px every value equals the block's own setting.
 */
@media (width >= 1025px) {
	header.wp-block-template-part > .wp-block-group {
		padding-left: calc(5.06vw - 6px) !important;
		padding-right: calc(5.06vw - 6px) !important;
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child {
		padding-left: max(0.96vw + 42px, 4.34vw - 6px) !important;
	}

	/* Side slots narrow with the viewport (160px at 1025, 220px from 1410) and never
	 * shrink unevenly, so the middle row stays page-centred. */
	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child,
	header.wp-block-template-part > .wp-block-group > .wp-block-group:last-child {
		flex: 0 0 min(220px, 15.6vw);
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:first-child img {
		width: clamp(60px, 8vw - 22px, 99px) !important;
		height: auto;
	}

	header.wp-block-template-part > .wp-block-group > .wp-block-group:nth-child(2) > figure img {
		width: min(200px, 18.25vw) !important;
		height: auto;
	}
}

/*
 * Motion, matched to the source's (Elementor kit, page and loop-template CSS).
 *
 * Entrance: the section hairlines slide in from their side and fade up over 2s and the
 * section titles fade in over 1.25s when they first scroll into view (the Fade in and
 * Slide in styles; site-chrome.js adds .is-revealed). Until then they are hidden only
 * when scripts run (html.tillander-motion, set in the head).
 */
@keyframes tillander-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes tillander-fade-in-left {
	from {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--tillander-slide, 100%)), 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes tillander-fade-in-right {
	from {
		opacity: 0;
		transform: translate3d(var(--tillander-slide, 100%), 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.wp-site-blocks {
	overflow-x: clip;
}

.tillander-motion .is-style-fade-in:not(.is-revealed),
.tillander-motion .is-style-slide-in-left:not(.is-revealed),
.tillander-motion .is-style-slide-in-right:not(.is-revealed) {
	visibility: hidden;
}

.is-style-fade-in.is-revealed {
	animation: tillander-fade-in 1.25s ease both;
}

.is-style-slide-in-left.is-revealed {
	animation: tillander-fade-in-left 2s ease both;
}

.is-style-slide-in-right.is-revealed {
	animation: tillander-fade-in-right 2s ease both;
}

/* SHOP, READ MORE, BOOK YOURS: a 1.5px underline drawn from the left (0.25s ease-out). */
p.is-style-action-link a::after,
p.is-style-booking-link a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease-out;
}

p.is-style-action-link a:hover::after,
p.is-style-action-link a:focus-visible::after,
p.is-style-booking-link a:hover::after,
p.is-style-booking-link a:focus-visible::after {
	transform: scaleX(1);
}

/* Catalogue tiles (Hover outline): on desktops a 4px white inset frame (0.25s) and a
   hairline white line under the label 4px down (0.35s) — the source's 0.5px line,
   which paints as one device pixel. The whole tile is the link. */
@media (width >= 1025px) {
	.wp-block-group.is-style-hover-outline {
		--tillander-hairline: 1px;

		transition: box-shadow 0.25s;
	}

	.wp-block-group.is-style-hover-outline:hover {
		box-shadow: inset 0 0 0 4px #fff;
	}

	.wp-block-group.is-style-hover-outline a {
		padding-bottom: 4px;
		background: linear-gradient(#fff, #fff) 0 100% / 0 var(--tillander-hairline) no-repeat;
		transition: background-size 0.35s;
	}

	.wp-block-group.is-style-hover-outline:hover a {
		background-size: 100% var(--tillander-hairline);
	}
}

@media (width >= 1025px) and (resolution >= 2dppx) {
	.wp-block-group.is-style-hover-outline {
		--tillander-hairline: 0.5px;
	}
}

/* Footer social icons grow to 110% (0.3s) and dim to 90%. */
.wp-block-social-links.is-style-social-bar .wp-social-link {
	transition: transform 0.3s;
}

.wp-block-social-links.is-style-social-bar .wp-social-link:hover {
	opacity: 0.9;
	transform: scale(1.1);
}

/* Buttons ease every change over 0.3s, as the source's Elementor buttons do. */
.wp-block-button__link {
	transition: all 0.3s;
}

/* BOOK A SESSION lightens to light grey over 1s, linear. */
.wp-block-group.is-style-fixed-book-cta .wp-block-button__link {
	transition: background-color 1s linear;
}

.wp-block-group.is-style-fixed-book-cta .wp-block-button__link:hover {
	color: #fff;
	background-color: lightgray;
}

/* The floating search and back-to-top buttons rise 6px on hover (0.4s / 0.3s). */
.wp-block-group.is-style-fixed-quick-links > .wp-block-image:first-child {
	transition: transform 0.4s;
}

.wp-block-group.is-style-fixed-quick-links > .wp-block-image:hover {
	transform: translateY(-6px);
}

/* The overlay accordions open and close over 0.2s. */

.wp-block-details.is-style-overlay-accordion::details-content {
	height: 0;
	overflow: clip;
	transition: height 0.2s linear, content-visibility 0.2s allow-discrete;
}

.wp-block-details.is-style-overlay-accordion[open]::details-content {
	height: auto;
}

/* The product-search popup fades in over 0.3s; its backdrop shows at once. */
.tillander-search-dialog[open] {
	animation: tillander-fade-in 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.tillander-motion .is-style-fade-in:not(.is-revealed),
	.tillander-motion .is-style-slide-in-left:not(.is-revealed),
	.tillander-motion .is-style-slide-in-right:not(.is-revealed) {
		visibility: visible;
	}

	.is-style-fade-in.is-revealed,
	.is-style-slide-in-left.is-revealed,
	.is-style-slide-in-right.is-revealed,
	.tillander-search-dialog[open] {
		animation: none;
	}
}

/*
 * Tablet and phone layouts the block-support states cannot express (core/image has
 * no per-viewport size, flex order is not a block support), keyed to the sections'
 * registered styles.
 */

/* A hairline that follows a title fills what the title leaves (core gives
   separators a 100px width, which would make the title wrap early). */
.wp-block-heading + .wp-block-separator {
	flex-basis: 0;
	min-width: 0;
}

@media (767px < width <= 1024px) {
	/* Hero split: the framed product photo is 200px tall at the copy's width. */
	.wp-block-group.is-style-hero-split .wp-block-image,
	.wp-block-group.is-style-hero-split .wp-block-image a {
		display: block;
		width: 100%;
	}

	.wp-block-group.is-style-hero-split .wp-block-image img {
		width: 100%;
		height: 200px;
		aspect-ratio: auto !important;
	}
}

@media (width <= 767px) {
	/* About split: the copy comes first, the photographs under it. */
	.wp-block-group.is-style-about-split {
		flex-direction: column-reverse;
	}

	/* Collection banner: the phone label first, then the photograph, then the copy. */
	.wp-block-group.is-style-collection-banner > .has-background {
		order: 2;
	}

	.wp-block-group.is-style-collection-banner > :not(.has-background) {
		order: 3;
	}

	.wp-block-group.is-style-collection-banner > .wp-block-hidden-desktop {
		order: 1;
	}

	/* Photo tile grid: the caption and VIEW laid over the tile's foot paint above
	   it (the Hover reveal tile is positioned). */
	.wp-block-group.is-style-hover-reveal ~ * {
		position: relative;
	}

	/* Catalogue mosaic: EARRINGS before NECKLACES, then the block of five as a 60/40
	   grid — MEN | CHILDREN over BRACELETS | PEARLS left, RINGS / WEDDING / SIGNET
	   stacked right. */
	.wp-block-group.is-style-catalogue-mosaic > :nth-child(1) {
		order: 2;
	}

	.wp-block-group.is-style-catalogue-mosaic > :nth-child(2) {
		order: 1;
	}

	.wp-block-group.is-style-catalogue-mosaic > :nth-child(3) {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: 187.5px 187.5px;
		order: 3;
	}

	.wp-block-group.is-style-catalogue-mosaic > :nth-child(3) > :nth-child(1) {
		grid-column: 2;
		grid-row: 1 / 3;
		flex-flow: column nowrap;
		align-items: stretch;
		margin: 0;
	}

	.wp-block-group.is-style-catalogue-mosaic > :nth-child(3) > :nth-child(2) {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.wp-block-group.is-style-catalogue-mosaic > :nth-child(3) > :nth-child(3) {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	/* Every action link (SHOP, READ MORE) is a full-width button framed in dark
	   grey, as the source's kit makes them on phones. */
	p.is-style-action-link a {
		display: block;
		padding: 10px 20px;
		border: 1px solid darkgray;
		background: #fff;
		text-align: center;
	}

	/* BOOK YOURS spans the column on phones, on the source's 16px / 24px line (the
	   paragraph's phone state) at its own 0.9rem; framed in black from 700px down,
	   padded below 700px. */
	p.is-style-booking-link a {
		box-sizing: border-box;
		display: inline-flex;
		justify-content: center;
		width: 100%;
		font-size: 0.9rem;
		line-height: 1.5;
		letter-spacing: 0.025em;
	}

	/* The floating buttons sit 10px from the edge on phones: search 38px and back to
	   top 40px, 10px apart, 66px up; BOOK A SESSION 19px up. The figure sets the
	   size, the image's own width giving way to it. */
	.wp-block-group.is-style-fixed-quick-links {
		right: 10px;
		bottom: 66px;
		gap: 10px;
	}

	.wp-block-group.is-style-fixed-quick-links > .wp-block-image:first-child {
		width: 38px;
	}

	.wp-block-group.is-style-fixed-quick-links > .wp-block-image:last-child {
		width: 40px;
	}

	.wp-block-group.is-style-fixed-book-cta {
		right: 10px;
		bottom: 19px;
	}
}

@media (width <= 700px) {
	p.is-style-booking-link a {
		border: 1px solid currentcolor;
	}
}

@media (width < 700px) {
	p.is-style-booking-link a {
		padding: 12px 24px;
	}
}