/*!
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Author: benmoussa
Description: Child theme of Blocksy for custom WooCommerce templates and styling without Elementor.
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* ==========================================================================
   Intemporel — Design tokens
   ========================================================================== */
:root {
	--ith-black: #0e0d0c;
	--ith-ink: #1a1712;
	--ith-cream: #f8f5f0;
	--ith-cream-dark: #efe9e0;
	--ith-blush: #f1e7da;
	--ith-gold: #b8945a;
	--ith-gold-light: #d4b678;
	--ith-muted: #7a7468;
	--ith-announce-bg: #0e0d0c;
	--ith-footer-bg: #221a12;
	--ith-serif: 'Fraunces', Georgia, serif;
	--ith-sans: 'Jost', Helvetica, Arial, sans-serif;
	--ith-container: 1280px;
	--ith-section-pad: clamp(64px, 8vw, 140px);
}

/* ==========================================================================
   Header — fixes Blocksy's white-on-white bug (dropdown/hover menu colors
   were set to #ffffff against a near-white header background in the
   Customizer) and restyles the bar to match the Intemporel identity.
   ========================================================================== */
/* Blocksy renders the header's row content with position:absolute and
   normally sizes #header itself via its own JS (measuring that content).
   That JS isn't reliably setting the height here, so #header collapses to
   0 and its content overlaps whatever comes right after it in the page.
   Fixing it directly with the same row heights configured in the
   Customizer (Appearance > Customize > Header) — matches the desktop/
   tablet/mobile breakpoints below. */
#header.ct-header {
	position: sticky;
	top: 0;
	z-index: 30;
	min-height: 120px;
	background: var(--ith-cream) !important;
	border-bottom: 1px solid var(--ith-cream-dark);
	transition: transform 0.35s ease, background 0.3s ease;
}

@media (max-width: 999.98px) {
	#header.ct-header {
		min-height: 100px;
	}
}

@media (max-width: 689.98px) {
	#header.ct-header {
		min-height: 90px;
	}
}

/* Hides on scroll-down, reappears on scroll-up (assets/js/main.js) — every page */
#header.ct-header.is-hidden {
	transform: translateY(-100%);
}

#header .header-menu-1 > .menu > li > a,
#header .ct-header-account,
#header .ct-header-search,
#header .ct-header-cart {
	color: var(--ith-ink) !important;
}

#header .header-menu-1 > .menu > li > a {
	font-family: var(--ith-sans);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

#header .header-menu-1 > .menu > li > a:hover,
#header .header-menu-1 > .menu > li.current-menu-item > a {
	color: var(--ith-gold) !important;
}

/* Dropdown submenus: force a solid light background with dark, readable text */
#header .header-menu-1 .sub-menu,
#header .header-menu-1 .ct-mega-menu {
	background: #fff !important;
	border: 1px solid var(--ith-cream-dark);
	box-shadow: 0 12px 30px rgba(14,13,12,0.08);
}

#header .header-menu-1 .sub-menu a {
	color: var(--ith-ink) !important;
	font-family: var(--ith-sans);
}

#header .header-menu-1 .sub-menu a:hover {
	color: var(--ith-gold) !important;
}

#header .ct-header-cart svg,
#header .ct-header-search svg,
#header .ct-header-account svg {
	stroke: var(--ith-ink);
	fill: none;
}

#header .ct-icon path {
	fill: var(--ith-ink);
}

/* On the homepage the header overlays the hero slideshow (transparent, light
   text) instead of sitting in a solid bar — matches the immersive reference
   look. Every other page keeps the solid/dark header above for readability. */
body.home #header.ct-header {
	position: absolute;
	top: 29px; /* height of the (now smaller) .ith-announcement floating above it */
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent !important;
	border-bottom: none;
}

body.home #header .header-menu-1 > .menu > li > a,
body.home #header .ct-header-account,
body.home #header .ct-header-search,
body.home #header .ct-header-cart {
	color: #fff !important;
}

body.home #header .header-menu-1 > .menu > li > a:hover {
	color: var(--ith-gold-light) !important;
}

body.home #header .ct-header-cart svg,
body.home #header .ct-header-search svg,
body.home #header .ct-header-account svg {
	stroke: #fff;
}

body.home #header .ct-icon path {
	fill: #fff;
}

/* Dropdowns on the homepage stay solid/dark-on-light regardless (inherited
   from the base rules above) since they open over arbitrary content below. */

/* Once scrolled past the hero, the homepage header switches to a fixed,
   solid bar (same look as every other page) instead of staying transparent. */
body.home #header.ct-header.is-scrolled {
	position: fixed;
	top: 0;
	background: var(--ith-cream) !important;
	border-bottom: 1px solid var(--ith-cream-dark);
}

body.home #header.ct-header.is-scrolled .header-menu-1 > .menu > li > a,
body.home #header.ct-header.is-scrolled .ct-header-account,
body.home #header.ct-header.is-scrolled .ct-header-search,
body.home #header.ct-header.is-scrolled .ct-header-cart {
	color: var(--ith-ink) !important;
}

body.home #header.ct-header.is-scrolled .ct-header-cart svg,
body.home #header.ct-header.is-scrolled .ct-header-search svg,
body.home #header.ct-header.is-scrolled .ct-header-account svg {
	stroke: var(--ith-ink);
}

body.home #header.ct-header.is-scrolled .ct-icon path {
	fill: var(--ith-ink);
}

/* ---- Legal links row (under the footer) ---- */
.ith-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	padding: 18px 24px;
	background: var(--ith-black);
	border-top: 1px solid rgba(255,255,255,0.08);
}

.ith-legal-links a {
	font-family: var(--ith-sans);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

.ith-legal-links a:hover {
	color: var(--ith-gold-light);
}

/* ---- Announcement bar (block 1): deliberately small/discreet ---- */
.ith-announcement {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ith-announce-bg);
	color: #fff;
	text-align: center;
	font-family: var(--ith-sans);
	font-size: 9px;
	line-height: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 20px;
}

.ith-announcement a {
	color: var(--ith-gold-light);
	margin-left: 10px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ith-announcement__track {
	flex: 1;
	min-width: 0;
	position: relative;
}

.ith-announcement__side {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ith-announcement__side--left a {
	margin-left: 0;
}

.ith-announcement__side--right {
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.12em;
}

@media (max-width: 560px) {
	.ith-announcement__side--left {
		display: none;
	}
}

/* On the homepage it floats over the hero image with a frosted/blurred
   background instead of pushing the hero down. */
body.home .ith-announcement {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 21;
	background: rgba(14, 13, 12, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

#intemporel-home {
	background: var(--ith-cream);
	overflow: hidden;
}

#intemporel-home h1,
#intemporel-home h2,
#intemporel-home h3 {
	font-family: var(--ith-serif);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--ith-ink);
	margin: 0;
}

#intemporel-home p {
	font-family: var(--ith-sans);
	font-weight: 300;
	color: var(--ith-muted);
	line-height: 1.7;
}

#intemporel-home .ith-eyebrow {
	display: inline-block;
	font-family: var(--ith-sans);
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--ith-gold);
	margin-bottom: 18px;
}

/* ---- Buttons ---- */
.ith-btn {
	display: inline-block;
	font-family: var(--ith-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ith-ink);
	background: transparent;
	border: 1px solid var(--ith-ink);
	border-radius: 0;
	padding: 14px 36px;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ith-btn:hover {
	background: var(--ith-ink);
	color: var(--ith-cream);
}

.ith-btn--solid {
	background: var(--ith-ink);
	color: var(--ith-cream);
	border-color: var(--ith-ink);
}

.ith-btn--solid:hover {
	background: transparent;
	color: var(--ith-ink);
}

.ith-hero .ith-btn {
	color: #fff;
	border-color: var(--ith-gold);
}

.ith-hero .ith-btn:hover {
	background: var(--ith-gold);
	color: var(--ith-black);
	border-color: var(--ith-gold);
}

/* ---- Hero: fills the entire viewport, edge to edge (breaks out of any
   parent container width/padding, like Baobab's full-height hero) ---- */
.ith-hero-slider {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ith-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1c1a17, #0e0d0c) center / cover no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
	padding: 0 24px;
}

.ith-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
}

.ith-hero__content {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding-top: 90px; /* clears the announcement bar + transparent header floating above */
}

#intemporel-home .ith-hero__content .ith-eyebrow {
	color: var(--ith-gold-light);
}

#intemporel-home .ith-hero__content h1 {
	color: #fff;
	font-size: clamp(1.8rem, 3.4vw, 3.25rem);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Client asked for the default hero line ("L'art du parfum et de la
   lumière") to stay on a single line — the container just needs a bit
   more room than the generic 720px cap for that to happen at desktop
   widths, on top of the smaller font-size above. */
@media (min-width: 600px) {
	.ith-hero__content {
		max-width: 860px;
	}

	#intemporel-home .ith-hero__content h1 {
		white-space: nowrap;
	}
}

#intemporel-home .ith-hero__content p {
	color: rgba(255,255,255,0.85);
	font-size: 1.05rem;
	max-width: 480px;
	margin: 20px auto 34px;
}

/* ---- Hero slideshow: stack slides, show only .is-active ---- */
.ith-hero-slider {
	position: relative;
}

.ith-hero-slider__track {
	position: relative;
}

.ith-hero-slider .ith-hero {
	display: none;
}

.ith-hero-slider .ith-hero.is-active {
	display: flex;
}

.ith-hero-slider__dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 10px;
}

.ith-hero-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.3s ease;
}

.ith-hero-slider__dot.is-active {
	background: var(--ith-gold-light);
}

/* ---- Announcement bar: stack slides, show only .is-active ---- */
.ith-announcement {
	position: relative;
}

.ith-announcement__slide {
	display: none;
}

.ith-announcement__slide.is-active {
	display: block;
}

/* ---- USP / reassurance strip (block 12) ---- */
.ith-usp {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: var(--ith-section-pad) 24px;
	text-align: center;
}

a.ith-usp__item {
	text-decoration: none;
	display: block;
}

.ith-usp__item svg {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: var(--ith-gold);
	stroke-width: 1.3;
	margin-bottom: 18px;
}

.ith-usp__item h3 {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	margin-bottom: 8px;
}

.ith-usp__item p {
	font-size: 0.92rem;
	margin: 0;
}

/* ---- Categories (block 7) ---- */
.ith-categories {
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: 40px 24px var(--ith-section-pad);
	text-align: center;
}

.ith-categories h2 {
	font-size: clamp(1.8rem, 3vw, 2.75rem);
	margin-bottom: 50px;
}

.ith-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ith-cat-card {
	display: block;
	text-decoration: none;
	position: relative;
}

.ith-cat-card__image {
	aspect-ratio: 3 / 4;
	background: var(--ith-cream-dark) center / cover no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
	transition: transform 0.5s ease;
}

.ith-cat-card__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
}

.ith-cat-card:hover .ith-cat-card__image {
	transform: scale(1.04);
}

.ith-cat-card span {
	display: block;
	font-family: var(--ith-serif);
	font-size: 1.15rem;
	color: var(--ith-ink);
	margin-top: 18px;
}

/* ---- Products (block 4) ---- */
.ith-products {
	background: var(--ith-cream-dark);
	padding: var(--ith-section-pad) 24px;
	text-align: center;
}

.ith-products h2 {
	font-size: clamp(1.8rem, 3vw, 2.75rem);
	margin-bottom: 50px;
}

.ith-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: var(--ith-container);
	margin: 0 auto 50px;
}

.ith-product-card a {
	text-decoration: none;
	display: block;
}

.ith-product-card__image {
	position: relative;
	overflow: hidden;
}

/* !important needed for the same reason as the shop grid below: WP core
   injects an inline aspect-ratio computed from each photo's own native
   dimensions, which otherwise wins over this rule and misaligns the row. */
.ith-product-card img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1.1 !important;
	object-fit: cover !important;
	background: #fff;
	transition: transform 0.4s ease;
}

.ith-product-card:hover img {
	transform: scale(1.03);
}

.ith-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background: var(--ith-ink);
	color: var(--ith-cream);
	font-family: var(--ith-sans);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
}

.ith-product-card h3 {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 18px 0 6px;
}

.ith-price {
	font-family: var(--ith-sans);
	color: var(--ith-gold);
	font-size: 0.95rem;
}

.ith-variations {
	display: block;
	font-family: var(--ith-sans);
	font-size: 0.78rem;
	color: var(--ith-muted);
	margin-top: 4px;
}

/* Hover reveal: "Ajouter au panier" overlay on the homepage product cards
   (custom markup, nested inside .ith-product-card__image so it sits over
   the photo). The shop/category grid keeps its own always-visible button
   below the price — see ".woocommerce ul.products li.product .button" —
   since WooCommerce's default markup doesn't nest it inside the image. */
.ith-product-card__cart {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ith-product-card:hover .ith-product-card__cart {
	opacity: 1;
	transform: translateY(0);
}

.ith-product-card__cart a.button,
.ith-product-card__cart a.add_to_cart_button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--ith-ink) !important;
	color: var(--ith-cream) !important;
	border: none !important;
	font-family: var(--ith-sans);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 10px !important;
	border-radius: 0;
	margin: 0 !important;
}

.ith-product-card__cart a.button:hover {
	background: var(--ith-gold) !important;
	color: var(--ith-black) !important;
}

.ith-product-card__cart a.added_to_cart {
	display: none;
}

/* Touch devices have no hover state — keep the button reachable there */
@media (hover: none) {
	.ith-product-card__cart {
		opacity: 1;
		transform: none;
		position: static;
		margin-top: 14px !important;
	}
}

/* ---- About / storytelling (block 5) ---- */
.ith-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: var(--ith-section-pad) 24px;
	gap: 70px;
	align-items: center;
}

.ith-about__image {
	aspect-ratio: 4 / 5;
	background: var(--ith-cream-dark) center / cover no-repeat;
	background-size: cover;
}

.ith-about__content p {
	font-size: 1.05rem;
	max-width: 460px;
}

.ith-about__stat {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--ith-cream-dark);
}

.ith-about__stat strong {
	display: block;
	font-family: var(--ith-serif);
	font-size: clamp(1.6rem, 2vw, 2rem);
	color: var(--ith-ink);
}

.ith-about__stat span {
	font-family: var(--ith-sans);
	font-size: 0.85rem;
	color: var(--ith-muted);
	letter-spacing: 0.05em;
}

.ith-about__content .ith-btn {
	margin-top: 30px;
}

/* ---- Product page: olfactory notes pyramid ---- */
.ith-notes {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--ith-cream-dark);
	max-width: 480px;
}

.ith-notes__title {
	font-family: var(--ith-serif);
	font-size: 1.2rem;
	color: var(--ith-ink);
	margin: 0 0 16px;
}

.ith-notes__row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ith-cream-dark);
}

.ith-notes__row:last-child {
	border-bottom: none;
}

.ith-notes__label {
	font-family: var(--ith-sans);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ith-gold);
}

.ith-notes__value {
	font-family: var(--ith-sans);
	font-weight: 300;
	font-size: 0.95rem;
	color: var(--ith-muted);
}

/* Blocksy's own archive title ("Products", plain, unstyled) duplicates the
   custom .ith-page-hero title on the shop/category pages — hide it there. */
body.woocommerce .entry-header.ct-container-narrow,
body.tax-product_cat .entry-header.ct-container-narrow {
	display: none;
}

/* ---- Reusable page header: also full-bleed, breaks out of the
   WooCommerce/Blocksy content wrapper's padding on the shop page ---- */
.ith-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 46vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(135deg, #1c1a17, #0e0d0c) center / cover no-repeat;
	background-size: cover;
	padding: 60px 24px 40px;
}

.ith-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
}

.ith-page-hero__content {
	position: relative;
	z-index: 1;
}

.ith-page-hero__content h1 {
	color: #fff;
	font-family: var(--ith-serif);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}

.ith-page-hero__content p {
	color: rgba(255,255,255,0.85);
	font-family: var(--ith-sans);
	font-size: 1.05rem;
	max-width: 520px;
	margin: 16px auto 0;
}

/* Shared by every content page (Senteurs, Notre histoire, À propos,
   Contact) — 46vh plus a 2.2rem title is a lot of banner on a phone. */
@media (max-width: 689.98px) {
	.ith-page-hero {
		min-height: 32vh;
		padding: 44px 20px 32px;
	}

	.ith-page-hero__content h1 {
		font-size: 1.85rem;
		line-height: 1.15;
	}

	.ith-page-hero__content p {
		font-size: 0.95rem;
		margin-top: 12px;
	}
}

/* ---- Senteurs editorial page ---- */
#intemporel-senteurs {
	background: var(--ith-cream);
}

.ith-senteurs {
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: var(--ith-section-pad) 24px;
}

/* ---- Senteurs: editorial index on the left (numbered, sticky), one
   detail panel (image + olfactory pyramid) on the right, crossfaded on
   click — no page navigation, no product query. ---- */
.ith-senteurs__layout {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: clamp(48px, 7vw, 110px);
	align-items: start;
}

.ith-senteurs__nav {
	position: sticky;
	top: 150px;
}

.ith-senteurs__nav-label {
	display: block;
	font-family: var(--ith-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ith-gold);
	padding-bottom: 22px;
}

.ith-senteurs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ith-cream-dark);
}

.ith-senteurs__list li {
	border-bottom: 1px solid var(--ith-cream-dark);
}

.ith-senteurs__list-item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-radius: 0;
	padding: 17px 0 17px 2px;
	cursor: pointer;
	transition: padding-left 0.35s ease;
}

/* Thin gold rule that grows in under the active scent. */
.ith-senteurs__list-item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 1px;
	background: var(--ith-gold);
	transition: width 0.45s ease;
}

.ith-senteurs__list-item.is-active::after {
	width: 100%;
}

.ith-senteurs__num {
	font-family: var(--ith-sans);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.18em;
	color: var(--ith-muted);
	opacity: 0.7;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.ith-senteurs__name {
	font-family: var(--ith-serif);
	font-size: 1.12rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ith-muted);
	transition: color 0.3s ease;
}

.ith-senteurs__list-item:hover {
	padding-left: 8px;
}

.ith-senteurs__list-item:hover .ith-senteurs__name,
.ith-senteurs__list-item:hover .ith-senteurs__num {
	color: var(--ith-ink);
	opacity: 1;
}

.ith-senteurs__list-item.is-active .ith-senteurs__name,
.ith-senteurs__list-item.is-active .ith-senteurs__num {
	color: var(--ith-gold);
	opacity: 1;
}

/* ---- Detail panel ---- */
.ith-senteurs__panel {
	display: none;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.ith-senteurs__panel.is-active {
	display: grid;
	animation: ith-scent-reveal 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ith-scent-reveal {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.ith-senteurs__panel-image {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ith-cream-dark);
}

.ith-senteurs__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ith-senteurs__panel.is-active .ith-senteurs__panel-image img {
	animation: ith-scent-zoom 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ith-scent-zoom {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

.ith-senteurs__panel-num {
	display: block;
	font-family: var(--ith-sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ith-gold);
	margin-bottom: 14px;
}

.ith-senteurs__panel-text h2 {
	font-family: var(--ith-serif);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--ith-ink);
	margin: 0;
}

.ith-senteurs__rule {
	display: block;
	width: 54px;
	height: 1px;
	background: var(--ith-gold);
	margin: 26px 0 30px;
}

.ith-senteurs__notes {
	margin: 0;
}

.ith-senteurs__notes > div {
	padding: 16px 0;
	border-top: 1px solid var(--ith-cream-dark);
}

.ith-senteurs__notes > div:last-child {
	border-bottom: 1px solid var(--ith-cream-dark);
}

.ith-senteurs__notes dt {
	font-family: var(--ith-sans);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ith-gold);
	margin-bottom: 7px;
}

.ith-senteurs__notes dd {
	margin: 0;
	font-family: var(--ith-sans);
	font-weight: 300;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--ith-ink);
}

@media (max-width: 860px) {
	.ith-senteurs {
		padding: clamp(40px, 9vw, 72px) 20px;
	}

	.ith-senteurs__layout {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.ith-senteurs__nav {
		position: static;
	}

	.ith-senteurs__nav-label {
		padding-bottom: 14px;
	}

	/* A 9-item vertical list would push the detail panel far below the
	   fold on a phone — lay the index out in two compact columns so the
	   whole library stays visible and the detail is reachable at a glance. */
	.ith-senteurs__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 22px;
	}

	.ith-senteurs__list-item {
		padding: 13px 0;
		gap: 10px;
	}

	/* Tap target: the hover indent is meaningless on touch, and the gold
	   underline is the only affordance that matters here. */
	.ith-senteurs__list-item:hover {
		padding-left: 0;
	}

	.ith-senteurs__name {
		font-size: 1rem;
	}

	.ith-senteurs__panel.is-active {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* main.js scrolls the panel into view on tap; without this the sticky
	   header (90–100px here) would sit on top of the image. */
	.ith-senteurs__panel {
		scroll-margin-top: 112px;
	}

	.ith-senteurs__panel-image {
		aspect-ratio: 1 / 1;
	}

	.ith-senteurs__rule {
		margin: 18px 0 22px;
	}

	.ith-senteurs__notes > div {
		padding: 14px 0;
	}
}

@media (max-width: 480px) {
	.ith-senteurs__list {
		column-gap: 16px;
	}

	.ith-senteurs__list-item {
		padding: 12px 0;
		gap: 8px;
	}

	.ith-senteurs__num {
		font-size: 8.5px;
	}

	.ith-senteurs__name {
		font-size: 0.94rem;
		/* "Wild Narcissus" / "Mystic Orient" would otherwise wrap awkwardly
		   inside a half-width column at this size. */
		hyphens: auto;
	}

	.ith-senteurs__notes dd {
		font-size: 0.9rem;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ith-senteurs__panel.is-active,
	.ith-senteurs__panel.is-active .ith-senteurs__panel-image img {
		animation: none;
	}

	.ith-senteurs__list-item,
	.ith-senteurs__list-item::after {
		transition: none;
	}
}

.ith-scent-card__notes p {
	font-family: var(--ith-sans);
	font-size: 0.85rem;
	color: var(--ith-muted);
	margin: 0 0 6px;
	line-height: 1.5;
}

.ith-scent-card__notes span {
	display: inline-block;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ith-gold);
	margin-right: 8px;
}

/* ---- Generic content page ---- */
#intemporel-page {
	background: var(--ith-cream);
}

.ith-page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--ith-section-pad) 24px;
}

.ith-page-content p {
	font-family: var(--ith-sans);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--ith-muted);
	margin: 0 0 24px;
}

.ith-page-content strong {
	color: var(--ith-ink);
	font-weight: 500;
}

/* ---- Compact title (cart, checkout, my account) ---- */
.ith-page-title-compact {
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: 70px 24px 0;
}

.ith-page-title-compact h1 {
	font-family: var(--ith-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	color: var(--ith-ink);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}

.ith-page-content--wide {
	max-width: var(--ith-container) !important;
}

/* ==========================================================================
   WooCommerce: cart, checkout, single product — restyled to match the
   rest of the site instead of the WooCommerce/Blocksy defaults.
   ========================================================================== */

/* ---- Cart ---- */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	border: none;
	border-collapse: collapse;
	width: 100%;
	font-family: var(--ith-sans);
}

.woocommerce-cart table.shop_table th {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ith-muted);
	border: none;
	border-bottom: 1px solid var(--ith-cream-dark);
	padding: 14px 12px;
	text-align: left;
}

.woocommerce-cart table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--ith-cream-dark);
	padding: 20px 12px;
	vertical-align: middle;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 90px;
	height: auto;
}

.woocommerce-cart table.shop_table td.product-name a {
	color: var(--ith-ink);
	text-decoration: none;
	font-size: 1rem;
}

.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal,
.woocommerce-cart table.shop_table .amount {
	color: var(--ith-gold);
}

.woocommerce-cart .quantity .qty {
	width: 64px;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	padding: 8px;
	font-family: var(--ith-sans);
	text-align: center;
}

.woocommerce-cart td.product-remove a.remove {
	color: var(--ith-muted) !important;
	background: transparent !important;
	font-size: 1.3rem;
}

.woocommerce-cart td.product-remove a.remove:hover {
	color: #b5504a !important;
	background: transparent !important;
}

.woocommerce-cart .coupon {
	display: flex;
	gap: 10px;
}

.woocommerce-cart #coupon_code {
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--ith-sans);
}

.woocommerce-cart .cart_totals {
	border: 1px solid var(--ith-cream-dark);
	padding: 30px;
	max-width: 420px;
	margin-left: auto;
}

.woocommerce-cart .cart_totals h2 {
	font-family: var(--ith-serif);
	font-size: 1.4rem;
	margin: 0 0 20px;
}

.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th {
	padding: 12px 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--ith-ink) !important;
	color: var(--ith-cream) !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--ith-sans);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 16px 24px !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
	background: var(--ith-gold) !important;
	color: var(--ith-black) !important;
}

/* Generic buttons used across cart/checkout (update cart, apply coupon...) */
.woocommerce #content input.button,
.woocommerce input.button,
.woocommerce button.button {
	background: transparent;
	border: 1px solid var(--ith-ink);
	border-radius: 0;
	color: var(--ith-ink);
	font-family: var(--ith-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 24px;
	transition: background 0.3s ease, color 0.3s ease;
}

.woocommerce #content input.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover {
	background: var(--ith-ink);
	color: var(--ith-cream);
}

/* ---- Checkout ---- */
.woocommerce-checkout #customer_details {
	max-width: 640px;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--ith-serif);
	font-size: 1.3rem;
	color: var(--ith-ink);
	margin: 0 0 20px;
}

.woocommerce-checkout .form-row label {
	font-family: var(--ith-sans);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ith-muted);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--ith-sans);
	background: #fff;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus {
	outline: none;
	border-color: var(--ith-gold);
}

.woocommerce-checkout #order_review {
	background: var(--ith-cream-dark);
	padding: 30px;
}

.woocommerce-checkout .payment_methods {
	border-top: 1px solid var(--ith-cream);
}

/* ---- Single product page ---- */
.single-product .product .summary .product_title {
	font-family: var(--ith-serif);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	color: var(--ith-ink);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 14px;
}

.single-product .product .summary .price {
	font-family: var(--ith-sans);
	color: var(--ith-gold);
	font-size: 1.2rem;
}

.single-product .product .summary .woocommerce-product-details__short-description p {
	font-family: var(--ith-sans);
	font-weight: 300;
	color: var(--ith-muted);
	line-height: 1.7;
}

.single-product .product .summary form.cart {
	margin: 24px 0;
}

/* Simple products: quantity + button sit directly in the form, in a row. */
.single-product .product .summary form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Variable products (e.g. Alexandria): attribute table stacks above the
   quantity/button row, which only appears once a full variation is picked. */
.single-product .product .summary table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 22px;
}

.single-product .product .summary table.variations tr {
	display: block;
}

.single-product .product .summary table.variations tr + tr {
	margin-top: 18px;
}

.single-product .product .summary table.variations th {
	display: block;
	text-align: left;
	font-family: var(--ith-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ith-muted);
	padding: 0 0 10px;
}

.single-product .product .summary table.variations td {
	display: block;
	padding: 0;
}

.single-product .product .summary table.variations select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	font-family: var(--ith-sans);
	background: #fff;
}

.single-product .product .summary .woocommerce-variation {
	margin-bottom: 18px;
	font-family: var(--ith-sans);
	color: var(--ith-muted);
}

.single-product .product .summary .woocommerce-variation-add-to-cart,
.single-product .product .summary .woocommerce-variation-add-to-cart-disabled {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* ---- Quantity: a plain, minimal number field — no +/- stepper buttons
   (client found the segmented pill busy/unrefined; typing a number is
   enough and reads as calmer/more premium next to a large CTA button). ---- */
.single-product .product .summary .quantity {
	flex-shrink: 0;
}

.single-product .product .summary .quantity .ct-decrease,
.single-product .product .summary .quantity .ct-increase {
	display: none !important;
}

.single-product .product .summary .quantity .qty {
	width: 64px;
	height: 54px;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	padding: 0;
	text-align: center;
	font-family: var(--ith-sans);
	font-size: 0.95rem;
	color: var(--ith-ink);
	background: #fff;
	transition: border-color 0.25s ease;
	-moz-appearance: textfield;
}

.single-product .product .summary .quantity .qty:focus {
	outline: none;
	border-color: var(--ith-ink);
}

.single-product .product .summary .quantity .qty::-webkit-inner-spin-button,
.single-product .product .summary .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- Add to cart: the main purchase decision on the page — sized and
   spaced to feel like a considered CTA, not a default form button. ---- */
.single-product .product .summary button.single_add_to_cart_button {
	height: 54px;
	white-space: nowrap;
	flex: 1 1 auto;
	font-size: 12.5px !important;
	letter-spacing: 0.16em !important;
	padding: 0 36px !important;
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.single-product .product .summary button.single_add_to_cart_button:hover {
	box-shadow: 0 8px 22px rgba(14, 13, 12, 0.16);
}

@media (max-width: 560px) {
	.single-product .product .summary .woocommerce-variation-add-to-cart,
	.single-product .product .summary .woocommerce-variation-add-to-cart-disabled,
	.single-product .product .summary form.cart:not(.variations_form) {
		flex-wrap: wrap;
	}

	.single-product .product .summary .quantity {
		width: 100%;
	}

	.single-product .product .summary .quantity .qty {
		width: 100%;
	}

	.single-product .product .summary button.single_add_to_cart_button {
		width: 100%;
		flex: 1 1 100%;
	}
}

/* Custom clickable size swatches, replacing the native <select> for the
   "Taille" attribute (assets/js/main.js builds these, hides the select). */
.ith-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ith-swatch {
	font-family: var(--ith-sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ith-ink);
	background: transparent;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	padding: 11px 20px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ith-swatch:hover {
	border-color: var(--ith-ink);
}

/* Color swatches (Couleur): round chips filled with the actual color,
   instead of text buttons — replaces the native <select> the same way. */
.ith-color-swatches {
	display: flex;
	gap: 12px;
}

.ith-color-swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ith-cream-dark);
	padding: 0;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ith-color-swatch:hover {
	transform: scale(1.08);
}

.ith-color-swatch.is-active {
	box-shadow: 0 0 0 2px var(--ith-cream), 0 0 0 3px var(--ith-ink);
}

.ith-color-swatch[data-color="noir"] {
	background: var(--ith-ink);
}

.ith-color-swatch[data-color="blanc"] {
	background: #ffffff;
}

.ith-swatch.is-active {
	background: var(--ith-ink);
	border-color: var(--ith-ink);
	color: var(--ith-cream);
}

.ith-visually-hidden {
	display: none !important;
}

.single-product .product .summary button.single_add_to_cart_button {
	background: var(--ith-ink) !important;
	color: var(--ith-cream) !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--ith-sans);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 16px 32px !important;
}

.single-product .product .summary button.single_add_to_cart_button:hover {
	background: var(--ith-gold) !important;
	color: var(--ith-black) !important;
}

/* ---- Trust badges under Add to Cart ---- */
.ith-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0 0 28px;
	padding: 18px 0 0;
	border-top: 1px solid var(--ith-cream-dark);
}

.ith-trust-badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ith-sans);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--ith-muted);
}

.ith-trust-badges svg {
	width: 20px;
	height: 20px;
	stroke: var(--ith-gold);
	flex-shrink: 0;
}

/* ---- Sticky mobile "Add to cart" bar ---- */
.ith-sticky-cart {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--ith-cream);
	border-top: 1px solid var(--ith-cream-dark);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
	padding: 10px 16px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.ith-sticky-cart.is-visible {
	transform: translateY(0);
}

.ith-sticky-cart__info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ith-sticky-cart__info img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	flex-shrink: 0;
}

.ith-sticky-cart__info div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ith-sticky-cart__info strong {
	font-family: var(--ith-sans);
	font-size: 12px;
	color: var(--ith-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ith-sticky-cart__price {
	font-family: var(--ith-sans);
	font-size: 12px;
	color: var(--ith-gold);
}

.ith-sticky-cart__cta {
	flex-shrink: 0;
	padding: 12px 22px !important;
	font-size: 11px !important;
}

@media (max-width: 690px) {
	.ith-sticky-cart {
		display: flex;
	}
}

.single-product .woocommerce-tabs ul.tabs li a {
	font-family: var(--ith-sans);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ith-muted);
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ith-ink);
}

.single-product .woocommerce-tabs .panel {
	font-family: var(--ith-sans);
	font-weight: 300;
	color: var(--ith-muted);
	line-height: 1.8;
}

.single-product .related.products h2 {
	font-family: var(--ith-serif);
	font-size: clamp(1.6rem, 2.5vw, 2.2rem);
	color: var(--ith-ink);
}

/* ---- Contact page ---- */
#intemporel-contact {
	background: var(--ith-cream);
}

.ith-contact {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 70px;
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: var(--ith-section-pad) 24px;
}

.ith-contact__info h2 {
	font-size: clamp(1.6rem, 2.5vw, 2.2rem);
	margin: 6px 0 14px;
}

.ith-contact__info > p {
	font-size: 1rem;
	max-width: 340px;
}

.ith-contact__details {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

.ith-contact__details li {
	padding: 16px 0;
	border-top: 1px solid var(--ith-cream-dark);
	font-family: var(--ith-sans);
	font-size: 0.95rem;
	color: var(--ith-ink);
}

.ith-contact__details li:last-child {
	border-bottom: 1px solid var(--ith-cream-dark);
}

.ith-contact__details span {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ith-gold);
	margin-bottom: 4px;
}

.ith-contact__details a {
	color: var(--ith-ink);
	text-decoration: none;
}

.ith-contact__details a:hover {
	color: var(--ith-gold);
}

.ith-contact__form form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ith-contact__form label {
	font-family: var(--ith-sans);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ith-muted);
	margin-top: 14px;
}

.ith-contact__form input[type="text"],
.ith-contact__form input[type="email"],
.ith-contact__form textarea {
	font-family: var(--ith-sans);
	font-size: 0.95rem;
	color: var(--ith-ink);
	background: #fff;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	padding: 12px 14px;
	resize: vertical;
}

.ith-contact__form input:focus,
.ith-contact__form textarea:focus {
	outline: none;
	border-color: var(--ith-gold);
}

.ith-contact__form button {
	margin-top: 26px;
	align-self: flex-start;
	cursor: pointer;
}

.ith-form-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ith-form-notice {
	font-family: var(--ith-sans);
	font-size: 0.9rem;
	padding: 14px 18px;
	margin-bottom: 24px;
	border-left: 3px solid;
}

.ith-form-notice--success {
	background: #f0f5ec;
	border-color: #6a8a4f;
	color: #3c5228;
}

.ith-form-notice--error {
	background: #fbeeee;
	border-color: #b5504a;
	color: #7a332f;
}

/* ==========================================================================
   Shop archive (shop page + category archives) — restyles WooCommerce's
   default markup to match the rest of the site instead of overriding the
   archive-product.php template (safer: keeps Blocksy/Woo's own behavior —
   sorting, pagination, AJAX — intact).
   ========================================================================== */
.woocommerce ul.products {
	max-width: var(--ith-container);
	margin: 0 auto !important;
	padding: 0 24px;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 30px !important;
}

.woocommerce ul.products li.product {
	position: relative;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	text-align: center;
	float: none !important;
}

/* Blocksy wraps price+button in a flex row (.ct-woo-card-actions) — that's
   what was squeezing "AJOUTER AU PANIER" and clipping it on narrower
   desktops. Stack them instead, button gets the full card width. */
.woocommerce ul.products li.product .ct-woo-card-actions {
	display: block !important;
}

/* WordPress core auto-injects an inline style="aspect-ratio: WxH" on
   these <img> tags, computed from each attachment's own native pixel
   dimensions (wp_filter_content_tags). Since every product photo was
   shot/cropped slightly differently, that inline ratio differs card to
   card and — because inline styles beat any stylesheet rule without
   !important — silently overrode the aspect-ratio below, which is why
   the grid looked misaligned. !important forces every card back to the
   same ratio regardless of what the source photo's own proportions are. */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0; /* kills the few px of whitespace inline/inline-block images get from their default line-height/baseline alignment — the gap the client saw */
	overflow: hidden;
}

.woocommerce ul.products li.product img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1.1 !important;
	object-fit: cover !important;
	transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	min-height: 0;
	min-width: 0;
	border-radius: 0;
	background: var(--ith-ink);
	color: var(--ith-cream);
	font-family: var(--ith-sans);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
	line-height: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ith-sans);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ith-ink);
	margin: 18px 0 6px;
}

.woocommerce ul.products li.product .price {
	display: block;
	font-family: var(--ith-sans);
	color: var(--ith-gold);
	font-size: 0.95rem;
	margin-bottom: 14px;
}

.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ith-sans);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ith-ink);
	background: transparent;
	border: 1px solid var(--ith-ink);
	border-radius: 0;
	padding: 14px 16px;
	white-space: nowrap;
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--ith-ink);
	color: var(--ith-cream);
	box-shadow: 0 8px 20px rgba(14, 13, 12, 0.14);
}

/* Category filter bar — pill tabs. Desktop: centered, wraps if needed.
   Mobile: single horizontal scrolling row (no wrap) so 5 categories never
   break into a cramped multi-line block. */
.ith-shop-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: var(--ith-container);
	margin: 0 auto;
	padding: 40px 24px 36px;
}

.ith-shop-filters a {
	display: inline-block;
	font-family: var(--ith-sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ith-muted);
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 20px;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 999px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ith-shop-filters a:hover {
	border-color: var(--ith-ink);
	color: var(--ith-ink);
}

.ith-shop-filters a.is-active {
	background: var(--ith-ink);
	border-color: var(--ith-ink);
	color: var(--ith-cream);
}

@media (max-width: 690px) {
	.ith-shop-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		gap: 10px;
		padding: 28px 24px;
		scrollbar-width: none;
	}

	.ith-shop-filters::-webkit-scrollbar {
		display: none;
	}

	.ith-shop-filters a {
		font-size: 11px;
		padding: 9px 16px;
	}
}

/* Result count + sort row */
.woocommerce-result-count,
.woocommerce-ordering {
	font-family: var(--ith-sans);
	font-size: 0.85rem;
	color: var(--ith-muted);
}

.woocommerce-ordering select.orderby {
	font-family: var(--ith-sans);
	font-size: 0.85rem;
	border: 1px solid var(--ith-cream-dark);
	border-radius: 0;
	background: #fff;
	padding: 8px 12px;
}

.woocommerce .woocommerce-notices-wrapper,
.woocommerce-result-count,
.woocommerce-ordering {
	max-width: var(--ith-container);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 24px;
}

.woocommerce-pagination {
	max-width: var(--ith-container);
	margin: 40px auto 0 !important;
	padding: 0 24px 60px;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 6px;
	list-style: none;
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	font-family: var(--ith-sans);
	font-size: 0.85rem;
	color: var(--ith-ink);
	border: 1px solid var(--ith-cream-dark);
	padding: 8px 14px;
	display: inline-block;
}

.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
	background: var(--ith-ink);
	color: var(--ith-cream);
	border-color: var(--ith-ink);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.ith-categories__grid,
	.ith-products__grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.ith-about,
	.ith-contact {
		grid-template-columns: 1fr;
	}

	.ith-about__image {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 560px) {
	.ith-categories__grid,
	.ith-products__grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}

	.woocommerce ul.products li.product .button {
		font-size: 10px;
		padding: 10px 8px;
		white-space: normal; /* two lines is fine at this width, clipping isn't */
	}

	.ith-hero {
		min-height: 100vh;
	}
}

/* ==========================================================================
   Quick View eye icon — sits bottom-left of the card image, above the
   full-width add-to-cart overlay. Shared by the WooCommerce shop loop
   (inc/quick-view.php hooks it in) and the homepage "Nos Nouveautés" cards.
   ========================================================================== */
.ith-quick-view-btn {
	position: absolute;
	left: 12px;
	bottom: 62px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--ith-cream);
	color: var(--ith-ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px) scale(0.9);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease;
	box-shadow: 0 4px 14px rgba(14, 13, 12, 0.18);
}

.ith-quick-view-btn svg {
	width: 18px;
	height: 18px;
}

.ith-quick-view-btn:hover {
	background: var(--ith-ink);
	color: var(--ith-cream);
}

li.product:hover .ith-quick-view-btn,
.ith-product-card:hover .ith-quick-view-btn {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* On the WooCommerce loop, the button/price sit in normal flow below the
   image (not an absolute overlay like the homepage cards), and the image's
   rendered height isn't a fixed value — it depends on the column width at
   the current breakpoint. A fixed `bottom` here would float relative to
   the whole card and land on top of the "Choix des options" button
   instead of the image. main.js measures the real image height and sets
   `top` in pixels instead — this is just the pre-JS fallback position. */
.woocommerce ul.products li.product .ith-quick-view-btn {
	top: 12px;
	bottom: auto;
}

@media (hover: none) {
	.ith-quick-view-btn {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Shared modal plumbing — newsletter popup + Quick View both use this
   backdrop/card/close-button pattern.
   ========================================================================== */
.ith-modal-open {
	overflow: hidden;
}

.ith-newsletter-popup,
.ith-quick-view {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ith-newsletter-popup.is-open,
.ith-quick-view.is-open {
	display: flex;
}

.ith-newsletter-popup__backdrop,
.ith-quick-view__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 13, 12, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	animation: ith-fade-in 0.4s ease forwards;
}

.ith-newsletter-popup__close,
.ith-quick-view__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--ith-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.ith-newsletter-popup__close:hover,
.ith-quick-view__close:hover {
	background: var(--ith-ink);
	color: var(--ith-cream);
	transform: rotate(90deg);
}

@keyframes ith-fade-in {
	to { opacity: 1; }
}

@keyframes ith-modal-rise {
	from { opacity: 0; transform: translateY(24px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* ---- Newsletter popup ---- */
.ith-newsletter-popup__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 780px;
	max-height: 90vh;
	overflow: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ith-cream);
	box-shadow: 0 30px 80px rgba(14, 13, 12, 0.35);
	animation: ith-modal-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}

.ith-newsletter-popup__image {
	position: relative;
	min-height: 260px;
}

.ith-newsletter-popup__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ith-newsletter-popup__content {
	padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ith-newsletter-popup__badge {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--ith-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--ith-gold);
	border: 1px solid var(--ith-gold);
	padding: 6px 14px;
	margin-bottom: 18px;
}

.ith-newsletter-popup__content h2 {
	font-family: var(--ith-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	color: var(--ith-ink);
	margin: 0 0 14px;
	line-height: 1.15;
}

.ith-newsletter-popup__content p {
	font-family: var(--ith-sans);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--ith-muted);
	margin: 0 0 26px;
}

.ith-newsletter-popup__form {
	display: flex;
	border: 1px solid var(--ith-ink);
}

.ith-newsletter-popup__form input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 14px 16px;
	font-family: var(--ith-sans);
	font-size: 0.9rem;
	color: var(--ith-ink);
}

.ith-newsletter-popup__form input:focus {
	outline: none;
}

.ith-newsletter-popup__form button {
	flex-shrink: 0;
	width: 52px;
	border: none;
	border-left: 1px solid var(--ith-ink);
	background: var(--ith-ink);
	color: var(--ith-cream);
	cursor: pointer;
	transition: background 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ith-newsletter-popup__form button:hover {
	background: var(--ith-gold);
}

.ith-newsletter-popup__form button svg {
	width: 18px;
	height: 18px;
}

.ith-newsletter-popup__form button:disabled {
	opacity: 0.6;
	cursor: default;
}

.ith-newsletter-popup__notice {
	margin: 12px 0 0;
	font-family: var(--ith-sans);
	font-size: 0.82rem;
	color: var(--ith-gold);
	min-height: 1.2em;
}

.ith-newsletter-popup__notice.is-error {
	color: #b5504a;
}

@media (max-width: 640px) {
	.ith-newsletter-popup__card {
		grid-template-columns: 1fr;
	}

	.ith-newsletter-popup__image {
		min-height: 180px;
	}
}

/* ---- Quick View modal ---- */
.ith-quick-view__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
	max-height: 88vh;
	overflow: auto;
	background: var(--ith-cream);
	box-shadow: 0 30px 80px rgba(14, 13, 12, 0.35);
	animation: ith-modal-rise 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}

.ith-quick-view__body {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 0;
	min-height: 420px;
}

.ith-quick-view__loading {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
}

.ith-quick-view__loading span {
	width: 34px;
	height: 34px;
	border: 2px solid var(--ith-cream-dark);
	border-top-color: var(--ith-gold);
	border-radius: 50%;
	animation: ith-spin 0.8s linear infinite;
}

@keyframes ith-spin {
	to { transform: rotate(360deg); }
}

.ith-quick-view__gallery {
	padding: 32px;
	background: var(--ith-cream-dark);
}

.ith-quick-view__main-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #fff;
}

.ith-quick-view__main-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: ith-fade-in 0.35s ease both;
}

.ith-quick-view__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.ith-quick-view__thumb {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	overflow: hidden;
	opacity: 0.6;
	transition: opacity 0.25s ease, border-color 0.25s ease;
}

.ith-quick-view__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ith-quick-view__thumb:hover,
.ith-quick-view__thumb.is-active {
	opacity: 1;
	border-color: var(--ith-gold);
}

.ith-quick-view__info {
	padding: clamp(32px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	animation: ith-fade-in 0.45s ease 0.1s both;
}

.ith-quick-view__eyebrow {
	font-family: var(--ith-sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ith-gold);
	margin-bottom: 10px;
}

.ith-quick-view__info h2 {
	font-family: var(--ith-serif);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--ith-ink);
	margin: 0 0 14px;
	line-height: 1.15;
}

.ith-quick-view__price {
	font-family: var(--ith-sans);
	color: var(--ith-gold);
	font-size: 1.1rem;
	margin-bottom: 18px;
}

.ith-quick-view__excerpt {
	font-family: var(--ith-sans);
	font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ith-muted);
	margin-bottom: 24px;
}

.ith-quick-view__excerpt p {
	margin: 0 0 10px;
}

/* Quick View reuses the real WooCommerce add-to-cart form (simple or
   variable) — these rules mirror the single-product styling so it looks
   native inside the modal instead of like an unstyled fallback. */
.ith-quick-view__cart-form .quantity {
	margin-bottom: 16px;
}

/* No +/- stepper here either — matches the single-product page. */
.ith-quick-view__cart-form .ct-decrease,
.ith-quick-view__cart-form .ct-increase {
	display: none !important;
}

.ith-quick-view__cart-form .qty {
	width: 64px;
	height: 50px;
	border: 1px solid var(--ith-cream-dark);
	padding: 0;
	text-align: center;
	font-family: var(--ith-sans);
	font-size: 0.95rem;
	color: var(--ith-ink);
	background: #fff;
	transition: border-color 0.25s ease;
	-moz-appearance: textfield;
}

.ith-quick-view__cart-form .qty:focus {
	outline: none;
	border-color: var(--ith-ink);
}

.ith-quick-view__cart-form .qty::-webkit-inner-spin-button,
.ith-quick-view__cart-form .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ith-quick-view__cart-form table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}

.ith-quick-view__cart-form table.variations tr {
	display: block;
}

.ith-quick-view__cart-form table.variations tr + tr {
	margin-top: 14px;
}

.ith-quick-view__cart-form table.variations th {
	display: block;
	text-align: left;
	font-family: var(--ith-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ith-muted);
	padding: 0 0 8px;
}

.ith-quick-view__cart-form table.variations select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ith-cream-dark);
	font-family: var(--ith-sans);
	background: #fff;
}

.ith-quick-view__cart-form .woocommerce-variation-add-to-cart,
.ith-quick-view__cart-form .woocommerce-variation-add-to-cart-disabled {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.ith-quick-view__cart-form button.single_add_to_cart_button {
	background: var(--ith-ink) !important;
	color: var(--ith-cream) !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--ith-sans);
	font-size: 12.5px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	height: 50px;
	padding: 0 32px !important;
	white-space: nowrap;
	cursor: pointer;
	flex: 1 1 auto;
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.ith-quick-view__cart-form button.single_add_to_cart_button:hover {
	background: var(--ith-gold) !important;
	color: var(--ith-black) !important;
	box-shadow: 0 8px 22px rgba(14, 13, 12, 0.16);
}

@media (max-width: 480px) {
	.ith-quick-view__cart-form .woocommerce-variation-add-to-cart,
	.ith-quick-view__cart-form .woocommerce-variation-add-to-cart-disabled {
		flex-wrap: wrap;
	}

	.ith-quick-view__cart-form .quantity,
	.ith-quick-view__cart-form .qty,
	.ith-quick-view__cart-form button.single_add_to_cart_button {
		width: 100%;
	}
}

.ith-quick-view__full-link {
	margin-top: 22px;
	font-family: var(--ith-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ith-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ith-quick-view__full-link:hover {
	color: var(--ith-ink);
}

.ith-quick-view__error {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	font-family: var(--ith-sans);
	color: var(--ith-muted);
}

@media (max-width: 720px) {
	.ith-quick-view__body {
		grid-template-columns: 1fr;
	}

	.ith-quick-view__gallery {
		padding: 20px;
	}

	.ith-quick-view__main-image {
		aspect-ratio: 4 / 3;
	}
}