/**
 * Mood Elementor widget styles.
 * Author: plutohub
 */

/* ============================================================
   Mood Header
   ============================================================ */
.mood-header {
	background-color: #050505;
	width: 100%;
}

.mood-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 16px 20px;
}

/* Logo */
.mood-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.mood-header__logo img {
	width: 95px;
	height: auto;
	display: block;
}

/*
 * Drawer shell. On desktop it dissolves (display:contents) so the nav is a
 * direct flex child of the bar. Once collapsed it becomes a fixed, clipped
 * viewport layer (see the responsive block) that contains the off-screen panel
 * so it can't extend the page's scroll width.
 */
.mood-header__drawer {
	display: contents;
}

/* Navigation */
.mood-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.mood-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 30px;
}

.mood-header__menu li {
	margin: 0;
	position: relative;
}

.mood-header__nav a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.mood-header__nav a:hover,
.mood-header__nav .current-menu-item > a {
	color: rgba(255, 255, 255, 0.7);
}

.mood-header__notice {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	margin: 0;
}

/* Sub-menus */
.mood-header__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #141414;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 100;
}

.mood-header__menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mood-header__menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 14px;
}

/* Action icons */
.mood-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/* Each SVG is a self-contained circular button (circle + border + icon). */
.mood-header__action {
	display: inline-flex;
	line-height: 0;
	border-radius: 50%;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mood-header__action:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.mood-header__action svg {
	width: 52px;
	height: 52px;
	display: block;
}

/* Hamburger toggle — circular icon button, matches action icons (hidden on desktop) */
.mood-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mood-header__toggle:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.mood-header__toggle svg {
	width: 52px;
	height: 52px;
	display: block;
}

/* Offcanvas drawer chrome — hidden until the header collapses (see below). */
.mood-header__overlay {
	display: none;
}

.mood-header__drawer-head,
.mood-header__drawer-actions {
	display: none;
}

.mood-header__drawer-title {
	color: #C6A15B;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.mood-header__close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	line-height: 0;
	cursor: pointer;
	border-radius: 50%;
	color: #FFFFFF;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}

.mood-header__close:hover {
	color: #C6A15B;
	border-color: #C6A15B;
	transform: rotate(90deg);
}

/* The bundled close SVG carries its own translucent disc; drop it and draw a
   bare X from two bars so the button's bordered circle is the only ring and the
   glyph tints to the accent on hover. */
.mood-header__close svg {
	display: none;
}

.mood-header__close::before,
.mood-header__close::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 1.5px;
	border-radius: 2px;
	background-color: currentColor;
}

.mood-header__close::before {
	transform: rotate(45deg);
}

.mood-header__close::after {
	transform: rotate(-45deg);
}

/* Keyboard focus — a gold ring in place of the UA blue, matching the drawer. */
.mood-header__close:focus-visible,
.mood-header__toggle:focus-visible,
.mood-header__drawer-link:focus-visible,
.mood-header__nav a:focus-visible {
	outline: 2px solid #C6A15B;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Body scroll lock while the drawer is open. */
body.mood-nav-open {
	overflow: hidden;
}

/* Responsive */
/*
 * Collapse to the offcanvas drawer once the horizontal nav can no longer fit.
 * The long labels (e.g. "Unisex Fragrances") + logo + action icons need ~1260px
 * before they overflow the black bar — which caused the cut-off / white-gutter
 * header (content spilled past the 100%-width background into the scroll gutter).
 */
@media (max-width: 1260px) {
	/*
	 * Reserve the scrollbar gutter at the widths where the drawer lives. The
	 * open state locks the body with overflow:hidden; on a scrollable page that
	 * removes the vertical scrollbar and the viewport jumps ~15px wider on the
	 * exact frame the panel slides in — the intermittent entrance "glitch".
	 * Reserving the gutter up front means the lock changes nothing to reflow.
	 * Scoped here (not global) so desktop keeps its native, gutter-free layout.
	 */
	html {
		scrollbar-gutter: stable;
	}

	.mood-header__inner {
		justify-content: flex-start;
		gap: 12px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.mood-header__toggle {
		display: inline-flex;
		order: 3;
	}

	/* Logo left, action + hamburger cluster pinned right. */
	.mood-header__actions {
		order: 2;
		margin-left: auto;
	}

	/*
	 * --- Drawer panel ---
	 * A warm-black column that carries the header's palette but adds a faint
	 * top-lit gradient so the panel reads as its own surface, not a flat
	 * extension of the bar. Gold (#C6A15B) — the colour of the fragrance itself
	 * — is the single accent, spent only on the eyebrow, the active category,
	 * and the arrow that answers a tap.
	 */
	/*
	 * Clipping shell: a fixed viewport layer that hides anything past its edges.
	 * The panel lives inside it and slides in from the right, so the closed,
	 * off-screen panel is clipped here instead of stretching the page width.
	 * pointer-events:none lets backdrop taps fall through to the overlay; the
	 * panel opts back in.
	 */
	.mood-header__drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		overflow: hidden;
		pointer-events: none;
	}

	.mood-header__nav {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: min(300px, 84vw);
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, #0d0c0a 0%, #060605 55%);
		border-left: 1px solid rgba(198, 161, 91, 0.18);
		transform: translateX(100%);
		transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
		/* Promote to its own layer so the slide-in composites on the GPU —
		   without this the first open stutters as the layer is created mid-move. */
		will-change: transform;
		backface-visibility: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		pointer-events: auto;
	}

	/* Shadow only while open — a closed drawer sits off-screen right and its
	   left-casting shadow would otherwise bleed onto the page. */
	.mood-header.is-open .mood-header__nav {
		transform: translateX(0);
		box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
	}

	/*
	 * WordPress admin bar: it's fixed at z-index 99999 (above this drawer), so
	 * without an offset it hides the drawer's head. Start the panel below the
	 * bar and shrink to fit. The bar is 32px here, 46px on the phone breakpoint
	 * (overridden below); it only shows for logged-in users.
	 */
	body.admin-bar .mood-header__drawer,
	body.admin-bar .mood-header__overlay {
		top: 32px;
	}

	.mood-header__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	}

	/* --- Backdrop --- */
	.mood-header__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(4, 4, 3, 0.6);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.mood-header.is-open .mood-header__overlay {
		opacity: 1;
		visibility: visible;
	}

	/* --- Stacked menu: editorial rows, one per line --- */
	/*
	 * The Elementor "Item Gap" control injects an inline `gap` on this element
	 * (36px default) for the desktop horizontal row. In the vertical drawer that
	 * becomes dead space between every item, so the hairline dividers alone set
	 * the rhythm. !important is needed to beat Elementor's element-scoped rule.
	 */
	.mood-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0 !important;
		margin-top: 2px;
	}

	.mood-header__menu > li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	/* Top-level rows: an arrow slides in on touch/hover. */
	.mood-header__menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 15px 2px;
		font-size: 17px;
		font-weight: 500;
		letter-spacing: -0.01em;
		line-height: 1.15;
		color: #FFFFFF;
	}

	.mood-header__menu > li > a::after {
		content: "";
		width: 17px;
		height: 11px;
		flex: 0 0 auto;
		background-color: #C6A15B;
		-webkit-mask: url("../images/arrow-right.svg") right center / contain no-repeat;
		mask: url("../images/arrow-right.svg") right center / contain no-repeat;
		opacity: 0;
		transform: translateX(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.mood-header__menu > li > a:hover,
	.mood-header__menu > li.current-menu-item > a,
	.mood-header__menu > li.current-menu-parent > a {
		color: #C6A15B;
	}

	.mood-header__menu > li > a:hover::after,
	.mood-header__menu > li.current-menu-item > a::after,
	.mood-header__menu > li.current-menu-parent > a::after {
		opacity: 1;
		transform: translateX(0);
	}

	/* Staggered reveal: rows fade in sequence once the panel is open.
	   Opacity only — the panel itself already slides in on translateX, and a
	   second horizontal move on each row fought that motion and read as a
	   glitchy double-slide on entrance. */
	.mood-header__menu > li {
		opacity: 0;
	}

	.mood-header.is-open .mood-header__menu > li {
		animation: mood-nav-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}

	.mood-header.is-open .mood-header__menu > li:nth-child(1) { animation-delay: 0.08s; }
	.mood-header.is-open .mood-header__menu > li:nth-child(2) { animation-delay: 0.14s; }
	.mood-header.is-open .mood-header__menu > li:nth-child(3) { animation-delay: 0.20s; }
	.mood-header.is-open .mood-header__menu > li:nth-child(4) { animation-delay: 0.26s; }
	.mood-header.is-open .mood-header__menu > li:nth-child(5) { animation-delay: 0.32s; }
	.mood-header.is-open .mood-header__menu > li:nth-child(6) { animation-delay: 0.38s; }
	.mood-header.is-open .mood-header__menu > li:nth-child(n+7) { animation-delay: 0.44s; }

	.mood-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		padding: 0 0 6px 2px;
	}

	.mood-header__menu .sub-menu a {
		padding: 6px 4px;
		font-size: 13px;
		letter-spacing: 0;
		color: rgba(255, 255, 255, 0.62);
	}

	.mood-header__menu .sub-menu a:hover {
		color: #C6A15B;
	}

	/*
	 * --- Drawer footer: the phone action centre ---
	 * On phones the header only has room for the cart + hamburger, so wishlist
	 * and account vanish from the bar. The drawer gives them back as three
	 * tap targets, with the same live counts the bar badges carry.
	 */
	.mood-header__drawer-actions {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
		margin-top: auto;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.09);
	}

	.mood-header__drawer-link {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 10px 6px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 11px;
		color: rgba(255, 255, 255, 0.86);
		text-decoration: none;
		transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
	}

	.mood-header__drawer-link:hover {
		color: #C6A15B;
		border-color: rgba(198, 161, 91, 0.5);
		background-color: rgba(198, 161, 91, 0.06);
	}

	.mood-header__drawer-link svg {
		width: 30px;
		height: 30px;
		display: block;
	}

	/* The bundled action SVGs draw their own white disc + ring; inside the tile
	   we want just the glyph, tinted, so the tile border is the only frame. */
	.mood-header__drawer-link svg circle {
		display: none;
	}

	.mood-header__drawer-link svg path {
		stroke: currentColor;
	}

	.mood-header__drawer-link-label {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.02em;
	}

	.mood-header__drawer-link .mood-header__count {
		position: absolute;
		top: 6px;
		right: 10px;
	}

	.mood-header__drawer-link .mood-header__count.is-empty {
		display: none;
	}
}

@keyframes mood-nav-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*
 * WordPress bumps the admin bar to 46px at this width (and makes it absolute
 * below 600px, but 46px stays the right offset for the common at-top case).
 */
@media (max-width: 782px) {
	body.admin-bar .mood-header__drawer,
	body.admin-bar .mood-header__overlay {
		top: 46px;
	}
}

/* Phones: room only for the cart + hamburger (matches the header spec). */
@media (max-width: 600px) {
	.mood-header__action--wishlist,
	.mood-header__action--user {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-header__nav,
	.mood-header__overlay,
	.mood-header__close,
	.mood-header__menu > li > a::after {
		transition: none;
	}

	/* Show rows immediately — no staggered fade. */
	.mood-header__menu > li,
	.mood-header.is-open .mood-header__menu > li {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ============================================================
   Mood Hero
   ============================================================ */
.mood-hero {
	width: 100%;
}

.mood-hero__card {
	position: relative;
	width: 100%;
	background-color: #F7F7F9;
	border-radius: 24px;
	padding: 30px 40px;
	overflow: hidden;
}

.mood-hero__swiper {
	width: 100%;
}

/*
 * Two equal columns. Equal (rather than a fixed 580 image column) keeps the
 * text column from being starved at mid widths (e.g. ~840px), which caused the
 * title to wrap one word per line. At the 1320 card each column is ~587px —
 * within a few px of the 595/580 design split. Below 768 the grid stacks.
 */
.mood-hero__slide {
	box-sizing: border-box;
	height: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 65px;
}

/* Content column */
.mood-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 595px;
	padding: 26px 0;
}

.mood-hero__title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 60px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.6px;
}

.mood-hero__subtitle {
	margin: 20px 0 0;
	max-width: 579px;
	color: #050605;
	opacity: 0.7;
	font-family: "Inter", sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.7;
}

/* CTA */
.mood-hero__button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 40px;
	padding: 16px 28px;
	border-radius: 100px;
	background-color: #050605;
	color: #FFFFFF;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.mood-hero__button:hover {
	background-color: #262626;
	transform: translateY(-2px);
}

.mood-hero__arrow {
	display: block;
	transition: transform 0.25s ease;
}

.mood-hero__button:hover .mood-hero__arrow {
	transform: translateX(3px);
}

/* Media column */
.mood-hero__media {
	line-height: 0;
}

.mood-hero__image {
	display: block;
	width: 100% !important;
	height: 536px !important;
	max-width: none;
	object-fit: cover;
	border-radius: 12px !important;
}

/* Pagination (Swiper bullets) — bottom-left of the text column. */
.mood-hero .swiper-pagination.mood-hero__pagination {
	position: absolute;
	left: 0;
	bottom: 24px;
	top: auto;
	width: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 2;
	text-align: left;
}

.mood-hero .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 !important;
	padding: 0;
	border-radius: 999px;
	background-color: #D9D9D9;
	opacity: 1;
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.mood-hero .swiper-pagination-bullet-active {
	width: 29px;
	background-color: #050605;
}

/*
 * Responsive ladder.
 * Layout (gaps, paddings, image height, radii) scales through the Elementor
 * responsive controls' per-device defaults — those emit higher-specificity CSS
 * that plain rules here can't beat. So these media queries carry TYPOGRAPHY and
 * the structural bits Elementor doesn't own (column stacking, dot placement),
 * all !important so they win over the theme/kit heading styles.
 */

/* Laptop / small desktop */
@media (max-width: 1200px) {
	.mood-hero__title {
		font-size: 52px !important;
	}

	.mood-hero__subtitle {
		font-size: 20px !important;
	}
}

/* Tablet landscape */
@media (max-width: 1024px) {
	.mood-hero__title {
		font-size: 46px !important;
	}

	.mood-hero__subtitle {
		font-size: 19px !important;
	}
}

/* Tablet portrait / large phones (still two columns) */
@media (max-width: 900px) {
	.mood-hero__title {
		font-size: 40px !important;
	}

	.mood-hero__subtitle {
		font-size: 18px !important;
	}
}

/*
 * Mobile — single column, image BELOW the content (matches the Figma mobile
 * frame). Dots sit in the gap between the button and the image; Swiper's
 * pagination is absolute, so its offset tracks the image height via
 * --mood-hero-img-h (set by the image-height control) to land above the image.
 */
@media (max-width: 767px) {
	.mood-hero {
		--mood-hero-img-h: 277px; /* Fallback; the image-height control overrides. */
	}

	.mood-hero__slide {
		grid-template-columns: 1fr;
	}

	.mood-hero__content {
		max-width: 100%;
		padding: 0;
	}

	.mood-hero__title {
		font-size: 34px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		letter-spacing: 0 !important;
	}

	.mood-hero__subtitle {
		margin-top: 10px;
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	.mood-hero__button {
		margin-top: 34px;
		font-size: 14px !important;
		font-weight: 500 !important;
	}

	.mood-hero__arrow {
		width: 20px;
		height: 20px;
	}

	.mood-hero__image {
		height: var(--mood-hero-img-h) !important;
	}

	.mood-hero .swiper-pagination.mood-hero__pagination {
		left: 0;
		top: auto;
		bottom: calc(var(--mood-hero-img-h) + 34px);
	}

	.mood-hero .swiper-pagination-bullet {
		width: 6px;
		height: 6px;
	}

	.mood-hero .swiper-pagination-bullet-active {
		width: 23px;
	}
}

/* Small phones */
@media (max-width: 480px) {
	.mood-hero__title {
		font-size: 30px !important;
	}

	.mood-hero__subtitle {
		font-size: 15px !important;
	}

	.mood-hero .swiper-pagination.mood-hero__pagination {
		bottom: calc(var(--mood-hero-img-h) + 26px);
	}
}

/* Very small phones */
@media (max-width: 360px) {
	.mood-hero__title {
		font-size: 27px !important;
	}

	.mood-hero__subtitle {
		font-size: 14px !important;
	}
}

/* Landscape phones — short viewport, two columns retained; tighten vertical. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 540px) {
	.mood-hero__content {
		padding: 8px 0;
	}

	.mood-hero__title {
		font-size: 34px !important;
	}

	.mood-hero__subtitle {
		font-size: 15px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-hero__button,
	.mood-hero__arrow,
	.mood-hero .swiper-pagination-bullet {
		transition: none;
	}
}

/* ============================================================
   Mood Categories — "Who Are You Shopping For?" (node 14:2344)
   ============================================================ */
.mood-cats {
	width: 100%;
}

/* 2×2: intro card first, then the image cards. */
.mood-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

/* --- Intro card --- */
.mood-cats__intro {
	box-sizing: border-box;
	min-height: 354px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 30px;
	background-color: #F7F7F9;
	border-radius: 20px;
}

.mood-cats__intro-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mood-cats__title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

.mood-cats__text {
	margin: 0;
	max-width: 510px;
	color: #050605;
	opacity: 0.7;
	font-family: "Inter", sans-serif;
	font-size: 20px !important;
	line-height: 1.7 !important;
}

.mood-cats__button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 16px 28px;
	border-radius: 100px;
	background-color: #050605;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.mood-cats__button span {
	color: inherit !important;
}

.mood-cats__button svg {
	width: 26px;
	height: 26px;
	display: block;
	transition: transform 0.25s ease;
}

.mood-cats__button:hover {
	background-color: #262626;
	color: #FFFFFF !important;
	transform: translateY(-2px);
}

.mood-cats__button:hover svg {
	transform: translateX(3px);
}

/* --- Image cards --- */
.mood-cats__card {
	position: relative;
	display: block;
	min-height: 354px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
}

.mood-cats__card-image {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border-radius: 20px !important;
	transition: transform 0.5s ease;
}

.mood-cats__card:hover .mood-cats__card-image {
	transform: scale(1.04);
}

/* Left-to-right scrim so the copy stays legible over any photo. */
.mood-cats__card-scrim {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 58%);
}

.mood-cats__card-body {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 354px;
	padding: 24px;
}

.mood-cats__card-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 277px;
}

.mood-cats__card-title {
	color: #FFFFFF !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.34px;
}

.mood-cats__card-meta {
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.7;
}

.mood-cats__card-plus {
	display: block;
	line-height: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	transition: transform 0.25s ease;
}

.mood-cats__card-plus svg {
	display: block;
	width: 64px;
	height: 64px;
}

.mood-cats__card:hover .mood-cats__card-plus {
	transform: scale(1.08) rotate(90deg);
}

/* Categories responsive */
@media (max-width: 1024px) {
	.mood-cats__grid {
		gap: 20px;
	}

	.mood-cats__title {
		font-size: 36px !important;
	}

	.mood-cats__text {
		font-size: 17px !important;
	}

	.mood-cats__intro,
	.mood-cats__card,
	.mood-cats__card-body {
		min-height: 300px;
	}

	.mood-cats__card-title {
		font-size: 28px;
	}

	.mood-cats__card-meta {
		font-size: 17px;
	}

	.mood-cats__button {
		font-size: 17px;
		padding: 14px 24px;
	}

	.mood-cats__card-plus,
	.mood-cats__card-plus svg {
		width: 54px;
		height: 54px;
	}
}

@media (max-width: 767px) {
	.mood-cats__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.mood-cats__intro {
		min-height: 0;
		padding: 24px;
		gap: 28px;
		border-radius: 16px;
	}

	.mood-cats__title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.mood-cats__text {
		font-size: 16px !important;
	}

	.mood-cats__button {
		font-size: 14px;
		padding: 15px 26px;
	}

	.mood-cats__button svg {
		width: 20px;
		height: 20px;
	}

	.mood-cats__card,
	.mood-cats__card-body {
		min-height: 260px;
	}

	.mood-cats__card,
	.mood-cats__card-image,
	.mood-cats__card-scrim {
		border-radius: 16px !important;
	}

	.mood-cats__card-body {
		padding: 20px;
	}

	.mood-cats__card-title {
		font-size: 24px;
	}

	.mood-cats__card-meta {
		font-size: 15px;
	}

	.mood-cats__card-plus,
	.mood-cats__card-plus svg {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-cats__card-image,
	.mood-cats__card-plus,
	.mood-cats__button,
	.mood-cats__button svg {
		transition: none;
	}
}

/* ============================================================
   Mood Products (Best Selling Product — node 14:2228)
   ============================================================ */
.mood-products {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.mood-products__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mood-products__title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

.mood-products__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.mood-products__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.mood-products__nav-btn svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Prev = outlined + mirrored arrow; next = solid black. */
.mood-products__nav-btn--prev {
	background-color: #FFFFFF;
	border: 1px solid #C9D0EB;
	color: #050605 !important;
}

.mood-products__nav-btn--prev svg {
	transform: scaleX(-1);
}

.mood-products__nav-btn--next {
	background-color: #050605;
	border: 1px solid #050605;
	color: #FFFFFF !important;
}

.mood-products__nav-btn:hover {
	opacity: 0.85;
}

.mood-products__nav-btn.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* --- Card --- */
.mood-products__swiper {
	width: 100%;
}

.mood-products .swiper-slide {
	height: auto;
}

.mood-product {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	padding: 10px 10px 20px;
	background-color: #FFFFFF;
	border: 1px solid #EBEFFF;
	border-radius: 16px;
	box-shadow: 10px 20px 60px rgba(229, 233, 237, 0.4);
}

.mood-product__media {
	position: relative;
	width: 100%;
	line-height: 0;
}

.mood-product__image-link {
	display: block;
	line-height: 0;
}

.mood-product__media .mood-product__image {
	display: block;
	width: 100% !important;
	height: 340px !important;
	max-width: none;
	object-fit: cover;
	border-radius: 14px !important;
}

.mood-product__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.mood-product__wishlist svg {
	display: block;
	width: 40px;
	height: 40px;
}

.mood-product__wishlist:hover {
	transform: scale(1.06);
}

/* The heart glyph is the second path (the first is its white circle). */
.mood-product__wishlist svg path {
	transition: fill 0.2s ease, stroke 0.2s ease;
}

.mood-product__wishlist.is-active svg path {
	fill: #FF4D4D;
	stroke: #FF4D4D;
}

.mood-product__wishlist.is-busy {
	pointer-events: none;
	opacity: 0.6;
}

.mood-product__body {
	width: 100%;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;
	box-sizing: border-box;
}

.mood-product__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	flex: 1 1 auto;
}

.mood-product__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 10px;
	border-radius: 100px;
	background-color: rgba(238, 167, 54, 0.1);
	color: #FFA800;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}

.mood-product__title {
	margin: 0;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.24px !important;
}

.mood-product__title a {
	color: #090F1D !important;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mood-product__meta {
	margin: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 16px !important;
	line-height: 1.6 !important;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mood-product__divider {
	width: 100%;
	height: 1px;
	margin-top: 2px;
	background-color: #EBEFFF;
}

.mood-product__row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mood-product__price {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.mood-product__price-now,
.mood-product__price-now .amount {
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}

.mood-product__price-was,
.mood-product__price-was .amount {
	color: #969FB7;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-decoration: line-through;
}

.mood-product__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	white-space: nowrap;
}

.mood-product__rating svg {
	display: block;
	width: 22px;
	height: 20px;
}

.mood-product__rating-value {
	color: #050605;
}

.mood-product__rating-count {
	color: #969FB7;
}

/* --- Actions --- */
.mood-product__actions {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
}

.mood-product__buy {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 28px;
	border-radius: 1000px;
	background-color: #050605;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mood-product__buy span {
	color: inherit !important;
}

.mood-product__buy svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: transform 0.2s ease;
}

.mood-product__buy:hover {
	background-color: #262626;
	color: #FFFFFF !important;
}

.mood-product__buy:hover svg {
	transform: translateX(3px);
}

.mood-product__cart {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 1px solid #C9D0EB;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mood-product__cart svg {
	display: block;
	width: 28px;
	height: 28px;
}

.mood-product__cart:hover {
	background-color: #F7F7F9;
	border-color: #050605;
}

/* Woo appends a "View cart" link after ajax add — keep it out of the circle. */
.mood-product__actions .added_to_cart {
	display: none;
}

/* Products responsive */
@media (max-width: 1024px) {
	.mood-products {
		gap: 36px;
	}

	.mood-products__title {
		font-size: 38px !important;
	}

	.mood-products__nav-btn {
		width: 42px;
		height: 42px;
	}

	.mood-products__nav-btn svg {
		width: 18px;
		height: 18px;
	}

	.mood-product__media .mood-product__image {
		height: 300px !important;
	}
}

@media (max-width: 767px) {
	.mood-products {
		gap: 28px;
	}

	.mood-products__title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.mood-products__nav-btn {
		width: 36px;
		height: 36px;
	}

	.mood-products__nav-btn svg {
		width: 15px;
		height: 15px;
	}

	.mood-product__media .mood-product__image {
		height: 260px !important;
	}

	.mood-product__title {
		font-size: 20px !important;
	}

	.mood-product__meta {
		font-size: 14px !important;
	}

	.mood-product__buy {
		padding: 15px 22px;
		font-size: 14px;
	}

	.mood-product__cart {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-product__buy,
	.mood-product__buy svg,
	.mood-product__wishlist,
	.mood-products__nav-btn {
		transition: none;
	}
}

/* ============================================================
   Mood Product Grid — "Our Perfumes Collect" (node 14:2386)
   ============================================================ */
.mood-grid {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.mood-grid__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mood-grid__title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

/* Filter pill */
.mood-grid__filter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.mood-grid__filter-label {
	color: #969FB7;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	white-space: nowrap;
}

.mood-grid__select {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	background-color: #FFFFFF;
}

.mood-grid__select-input {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
	outline: none;
}

/* The arrow icon points right by default; rotate it into a caret. */
.mood-grid__select svg {
	width: 18px;
	height: 18px;
	display: block;
	transform: rotate(90deg);
	pointer-events: none;
	flex: 0 0 auto;
}

.mood-grid__items {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.mood-grid__empty {
	margin: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 16px;
}

/* Outlined "View More" */
.mood-grid__button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 16px 28px;
	border: 1px solid #969FB7;
	border-radius: 100px;
	background-color: transparent;
	color: #050605 !important;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mood-grid__button svg {
	width: 26px;
	height: 26px;
	display: block;
	transition: transform 0.25s ease;
}

.mood-grid__button:hover {
	background-color: #050605;
	border-color: #050605;
	color: #FFFFFF !important;
}

.mood-grid__button span {
	color: inherit !important;
}

.mood-grid__button:hover svg {
	transform: translateX(3px);
}

/* Product grid responsive */
@media (max-width: 1024px) {
	.mood-grid {
		gap: 36px;
	}

	.mood-grid__title {
		font-size: 38px !important;
	}

	.mood-grid__items {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.mood-grid {
		gap: 28px;
	}

	.mood-grid__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.mood-grid__title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.mood-grid__items {
		gap: 16px;
	}

	.mood-grid__select {
		padding: 11px 18px;
	}

	.mood-grid__button {
		font-size: 14px;
		padding: 15px 26px;
	}

	.mood-grid__button svg {
		width: 20px;
		height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-grid__button,
	.mood-grid__button svg {
		transition: none;
	}
}

/* ============================================================
   Mood Testimonials — "What Our Customers Say" (node 14:2610)
   ============================================================ */
.mood-quotes {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.mood-quotes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mood-quotes__title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

.mood-quotes__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.mood-quotes__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.mood-quotes__nav-btn svg {
	width: 24px;
	height: 24px;
	display: block;
}

.mood-quotes__nav-btn--prev {
	background-color: #FFFFFF;
	border: 1px solid #C9D0EB;
	color: #050605 !important;
}

.mood-quotes__nav-btn--prev svg {
	transform: scaleX(-1);
}

.mood-quotes__nav-btn--next {
	background-color: #050605;
	border: 1px solid #050605;
	color: #FFFFFF !important;
}

.mood-quotes__nav-btn:hover {
	opacity: 0.85;
}

.mood-quotes__nav-btn.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

.mood-quotes__swiper {
	width: 100%;
}

.mood-quotes .swiper-slide {
	height: auto;
}

/* --- Quote card --- */
.mood-quote {
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 80px;
	padding: 24px;
	background-color: rgba(255, 255, 255, 0.02);
	border: 1px solid #EBEFFA;
	border-radius: 16px;
}

.mood-quote__top {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mood-quote__stars {
	display: flex;
	align-items: center;
}

.mood-quote__stars svg {
	display: block;
	width: 24px;
	height: 24px;
}

.mood-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	font-style: normal;
}

.mood-quote__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mood-quote__author {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mood-quote__avatar {
	flex: 0 0 auto;
	width: 58px !important;
	height: 58px !important;
	max-width: none;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
}

.mood-quote__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mood-quote__name {
	color: #2B3244;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.mood-quote__date {
	color: #585D64;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.mood-quote__mark {
	flex: 0 0 auto;
	line-height: 0;
}

.mood-quote__mark svg {
	display: block;
	width: 50px;
	height: 50px;
}

/* Testimonials responsive */
@media (max-width: 1024px) {
	.mood-quotes {
		gap: 36px;
	}

	.mood-quotes__title {
		font-size: 38px !important;
	}

	.mood-quotes__nav-btn {
		width: 42px;
		height: 42px;
	}

	.mood-quotes__nav-btn svg {
		width: 18px;
		height: 18px;
	}

	.mood-quote {
		gap: 48px;
	}

	.mood-quote__text {
		font-size: 19px !important;
	}
}

@media (max-width: 767px) {
	.mood-quotes {
		gap: 28px;
	}

	.mood-quotes__title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.mood-quotes__nav-btn {
		width: 36px;
		height: 36px;
	}

	.mood-quotes__nav-btn svg {
		width: 15px;
		height: 15px;
	}

	.mood-quote {
		gap: 32px;
		padding: 20px;
	}

	.mood-quote__text {
		font-size: 17px !important;
	}

	.mood-quote__avatar {
		width: 48px !important;
		height: 48px !important;
	}

	.mood-quote__name {
		font-size: 17px;
	}

	.mood-quote__mark svg {
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-quotes__nav-btn {
		transition: none;
	}
}

/* ============================================================
   Mood Product Details (node 14:2796 — mobile frame; desktop derived)
   ============================================================ */
.mood-pd {
	width: 100%;
}

/*
 * Force border-box across the block. The surrounding theme leaves box-sizing at
 * content-box, so a full-width padded child (e.g. .mood-pd__notes: width:100% +
 * 16px padding) spills past its column and pushes a horizontal scrollbar on
 * mobile. border-box folds the padding back in.
 */
.mood-pd,
.mood-pd * {
	box-sizing: border-box;
}

/*
 * Desktop is derived: the mobile frame's single column splits into a sticky
 * gallery and the summary. Below 900px it returns to the mobile order.
 */
.mood-pd__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 50px;
	align-items: start;
}

/* --- Gallery --- */
.mood-pd__gallery {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mood-pd__stage {
	position: relative;
	width: 100%;
	line-height: 0;
}

.mood-pd__stage-image {
	width: 100% !important;
	height: 520px !important;
	max-width: none;
	object-fit: cover;
	border-radius: 16px !important;
	display: block;
	background-color: #F7F7F9;
	cursor: zoom-in;
}

/* Product video: same footprint as the stage image, swapped in on tap. */
.mood-pd__stage-video {
	width: 100%;
	height: 520px;
	border-radius: 16px;
	overflow: hidden;
	background-color: #050605;
}

.mood-pd__stage-iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Author-level [hidden] — a bare `hidden` attr loses to the class `display`
   rules above (author beats the UA sheet), so hide the swapped-out stage media
   explicitly. */
.mood-pd__stage-image[hidden],
.mood-pd__stage-video[hidden] {
	display: none;
}

/* No zoom affordance while the video is on the stage. */
.mood-pd.is-video .mood-pd__zoom {
	display: none;
}

/* Zoom affordance — a quiet chip that lifts on hover, bottom-left of the stage. */
.mood-pd__zoom {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(5, 6, 5, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	cursor: zoom-in;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.mood-pd__stage:hover .mood-pd__zoom,
.mood-pd__zoom:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.mood-pd__zoom:hover {
	background: #050605;
}

/* Touch devices have no hover — keep the chip visible there. */
@media (hover: none) {
	.mood-pd__zoom {
		opacity: 1;
		transform: none;
	}
}

.mood-pd__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 52px;
	height: 52px;
}

.mood-pd__wishlist svg {
	width: 52px;
	height: 52px;
}

/*
 * Thumb strip. Swiper with slidesPerView:'auto', so each slide needs a real
 * width — five across the gallery, then it scrolls rather than wrapping.
 */
.mood-pd__thumbs {
	width: 100%;
	overflow: hidden;
}

.mood-pd__thumbs .swiper-wrapper {
	align-items: stretch;
	box-sizing: content-box;
	display: flex;
}

/*
 * Specificity has to beat Swiper's own `.swiper-slide { width: 100% }` (its
 * stylesheet loads after this one). Without it each thumb goes full-width and
 * the strip stacks into a column instead of a row — with or without JS.
 */
.mood-pd__thumbs .mood-pd__thumb {
	flex: 0 0 auto;
	width: calc((100% - 4 * 7px) / 5);
	padding: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background: #F7F7F9;
	cursor: pointer;
	line-height: 0;
	aspect-ratio: 1 / 1;
	height: auto;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.mood-pd__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.mood-pd__thumb.is-active {
	border-color: #050605;
}

.mood-pd__thumb:hover {
	opacity: 0.85;
}

/* Video thumb: dimmed poster with a play disc so it reads as "watch", not view. */
.mood-pd__thumb--video {
	position: relative;
}

.mood-pd__thumb--video img {
	filter: brightness(0.78);
}

.mood-pd__thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.mood-pd__thumb-play svg {
	width: 28px;
	height: 28px;
	padding: 7px 6px 7px 8px;
	box-sizing: border-box;
	color: #050605;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
}

/* --- Summary --- */
.mood-pd__summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.mood-pd__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	flex-wrap: wrap;
}

.mood-pd__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #C9D0EB;
	display: inline-block;
}

.mood-pd__title {
	margin: 0;
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 36px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.36px !important;
}

.mood-pd__rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mood-pd__stars {
	display: inline-flex;
	align-items: center;
}

.mood-pd__stars svg {
	width: 16px;
	height: 16px;
	display: block;
}

.mood-pd__rating-text {
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	text-decoration: none;
}

.mood-pd__rating-text:hover {
	color: #050605;
}

.mood-pd__divider {
	width: 100%;
	height: 1px;
	background-color: #EBEFFF;
	margin: 4px 0;
}

.mood-pd__short {
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.mood-pd__short p {
	margin: 0;
}

/* Size pills */
.mood-pd__sizes {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mood-pd__sizes-label {
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 14px;
}

.mood-pd__size-list {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mood-pd__size {
	padding: 8px 16px;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	background-color: #FFFFFF;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mood-pd__size.is-active {
	background-color: #050605;
	border-color: #050605;
	color: #FFFFFF;
}

.mood-pd__size.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Price + quantity */
.mood-pd__buyrow {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.mood-pd__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.mood-pd__price-now,
.mood-pd__price-now .amount {
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}

.mood-pd__price-was,
.mood-pd__price-was .amount {
	color: #969FB7;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	text-decoration: line-through;
}

/* Discount badge — gold pill echoing the brand accent, aligned to the prices. */
.mood-pd__price-save {
	align-self: center;
	margin-left: 2px;
	padding: 4px 10px;
	border-radius: 100px;
	background: rgba(198, 161, 91, 0.14);
	color: #9A7A34;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

/* Woo's variation price_html arrives with its own del/ins wrappers. */
.mood-pd__price del {
	color: #969FB7;
	font-size: 18px;
}

.mood-pd__price ins {
	text-decoration: none;
}

.mood-pd__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	padding: 4px;
}

.mood-pd__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #050605 !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mood-pd__qty-btn:hover {
	background-color: #F7F7F9;
}

.mood-pd__qty-btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

.mood-pd__qty-input {
	width: 40px;
	border: 0;
	background: transparent;
	text-align: center;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
	outline: none;
}

.mood-pd__qty-input::-webkit-outer-spin-button,
.mood-pd__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Actions */
.mood-pd__actions {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
}

.mood-pd__buy {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 17px 28px;
	border-radius: 1000px;
	background-color: #050605;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mood-pd__buy span {
	color: inherit !important;
}

.mood-pd__buy svg {
	width: 18px;
	height: 18px;
	display: block;
}

.mood-pd__buy:hover {
	background-color: #262626;
	color: #FFFFFF !important;
}

.mood-pd__cart {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 1px solid #C9D0EB;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mood-pd__cart svg {
	width: 26px;
	height: 26px;
	display: block;
}

.mood-pd__cart:hover {
	background-color: #F7F7F9;
	border-color: #050605;
}

/* Stock / shipping notes */
.mood-pd__notes {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	margin-top: 8px;
	background-color: #F7F7F9;
	border-radius: 12px;
}

.mood-pd__note {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.mood-pd__note strong {
	color: #050605;
	font-weight: 600;
}

.mood-pd__note--stock {
	color: #050605;
	font-weight: 500;
}

.mood-pd__note--stock.is-out {
	color: #C0392B;
}

/* Pulsing "in stock" dot. */
.mood-pd__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2ECC71;
	box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
	animation: mood-pulse 2s infinite;
	flex: 0 0 auto;
}

@keyframes mood-pulse {
	70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Accordions */
.mood-pd__accordions {
	width: 100%;
	margin-top: 8px;
}

.mood-pd__acc {
	border-top: 1px solid #EBEFFF;
}

.mood-pd__acc:last-child {
	border-bottom: 1px solid #EBEFFF;
}

.mood-pd__acc-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.mood-pd__acc-title {
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

.mood-pd__acc-icon {
	flex: 0 0 auto;
	line-height: 0;
	color: #050605 !important;
}

.mood-pd__acc-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* The vertical bar collapses, turning "+" into "−" when open. */
.mood-pd__acc-icon .mood-acc-bar {
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.mood-pd__acc.is-open .mood-acc-bar {
	transform: scaleY(0);
	opacity: 0;
}

.mood-pd__acc-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.mood-pd__acc.is-open .mood-pd__acc-body {
	grid-template-rows: 1fr;
}

.mood-pd__acc-inner {
	overflow: hidden;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.7;
}

.mood-pd__acc.is-open .mood-pd__acc-inner {
	padding-bottom: 18px;
}

.mood-pd__acc-inner p {
	margin: 0 0 12px;
}

.mood-pd__acc-inner p:last-child {
	margin-bottom: 0;
}

/* Product details responsive — back to the mobile frame's single column. */
@media (max-width: 900px) {
	.mood-pd__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.mood-pd__gallery {
		position: static;
	}

	.mood-pd__stage-image,
	.mood-pd__stage-video {
		height: 348px !important;
	}
}

@media (max-width: 767px) {
	.mood-pd__title {
		font-size: 28px !important;
	}

	.mood-pd__price-now,
	.mood-pd__price-now .amount {
		font-size: 26px;
	}

	.mood-pd__buyrow {
		gap: 12px;
	}

	.mood-pd__buy {
		font-size: 14px;
		padding: 15px 22px;
	}

	.mood-pd__acc-title {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-pd__acc-body,
	.mood-pd__acc-icon .mood-acc-bar,
	.mood-pd__thumb,
	.mood-pd__size {
		transition: none;
	}

	.mood-pd__pulse {
		animation: none;
	}
}

/* ============================================================
   Mood Lightbox — full-size gallery viewer
   ============================================================ */
/*
 * A near-black, softly blurred stage that lets the bottle fill the screen.
 * Champagne gold (#C6A15B) — the fragrance's own colour, shared with the nav
 * drawer — marks the interactive edges: the controls tint gold on hover.
 */
.mood-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 64px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.mood-lightbox[hidden] {
	display: none;
}

.mood-lightbox.is-open {
	opacity: 1;
}

.mood-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 4, 3, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: zoom-out;
}

.mood-lightbox__frame {
	position: relative;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0.96);
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.mood-lightbox.is-open .mood-lightbox__frame {
	transform: scale(1);
}

.mood-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	background: #0a0a0a;
}

/* --- Controls --- */
.mood-lightbox__close,
.mood-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(10, 10, 9, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.mood-lightbox__close {
	top: clamp(16px, 4vw, 40px);
	right: clamp(16px, 4vw, 40px);
	width: 48px;
	height: 48px;
}

.mood-lightbox__close:hover,
.mood-lightbox__nav:hover {
	color: #C6A15B;
	border-color: #C6A15B;
	background: rgba(10, 10, 9, 0.8);
}

.mood-lightbox__close:hover {
	transform: rotate(90deg);
}

/* Close glyph: two bars, so the ring is the button's own border. */
.mood-lightbox__x {
	position: relative;
	width: 18px;
	height: 18px;
}

.mood-lightbox__x::before,
.mood-lightbox__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
}

.mood-lightbox__x::before {
	transform: rotate(45deg);
}

.mood-lightbox__x::after {
	transform: rotate(-45deg);
}

.mood-lightbox__nav {
	top: 50%;
	width: 52px;
	height: 52px;
	margin-top: -26px;
}

.mood-lightbox__nav svg {
	width: 22px;
	height: 22px;
	display: block;
}

.mood-lightbox__nav--prev {
	left: clamp(10px, 3vw, 36px);
}

.mood-lightbox__nav--prev svg {
	transform: scaleX(-1);
}

.mood-lightbox__nav--next {
	right: clamp(10px, 3vw, 36px);
}

/* A single image needs no prev/next or counter. */
.mood-lightbox:not(.has-multiple) .mood-lightbox__nav,
.mood-lightbox:not(.has-multiple) .mood-lightbox__counter {
	display: none;
}

.mood-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 4vw, 36px);
	transform: translateX(-50%);
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(10, 10, 9, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

body.mood-lightbox-open {
	overflow: hidden;
}

.mood-lightbox__close:focus-visible,
.mood-lightbox__nav:focus-visible {
	outline: 2px solid #C6A15B;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.mood-lightbox__nav {
		width: 44px;
		height: 44px;
		margin-top: -22px;
	}

	.mood-lightbox__image {
		max-height: 78vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-lightbox,
	.mood-lightbox__frame,
	.mood-lightbox__close,
	.mood-lightbox__nav {
		transition: none;
	}

	.mood-lightbox__close:hover {
		transform: none;
	}
}

/* ============================================================
   Mood Product Reviews (node 14:2796)
   ============================================================ */
.mood-rv {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mood-rv__title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 34px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.34px !important;
}

.mood-rv__divider {
	width: 100%;
	height: 1px;
	background-color: #EBEFFF;
}

.mood-rv__cols {
	display: grid;
	grid-template-columns: 366px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* --- Summary card --- */
.mood-rv__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 25px;
	border-radius: 16px;
	border: 1px solid #EBEFFA;
	box-shadow: 10px 20px 60px rgba(229, 233, 237, 0.4);
	position: sticky;
	top: 24px;
}

.mood-rv__score {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.mood-rv__score-value {
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
}

.mood-rv__score-max {
	color: #969FB7;
	font-family: "Inter", sans-serif;
	font-size: 18px;
}

.mood-rv__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.mood-rv__stars svg {
	width: var(--mood-star, 20px);
	height: var(--mood-star, 20px);
	display: block;
}

.mood-rv__based {
	margin: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 15px;
}

.mood-rv__bars {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mood-rv__bar {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mood-rv__bar-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	flex: 0 0 auto;
	width: 24px;
}

.mood-rv__bar-label svg {
	width: 12px;
	height: 12px;
	display: block;
}

.mood-rv__bar-track {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 100px;
	background-color: #EFF1F7;
	overflow: hidden;
}

.mood-rv__bar-fill {
	display: block;
	height: 100%;
	border-radius: 100px;
	background-color: #FFA800;
}

.mood-rv__bar-pct {
	flex: 0 0 auto;
	width: 40px;
	text-align: right;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 12px;
}

.mood-rv__write {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 24px;
	border-radius: 100px;
	background-color: #050605;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mood-rv__write span {
	color: inherit !important;
}

.mood-rv__write svg {
	width: 20px;
	height: 20px;
	display: block;
}

.mood-rv__write:hover {
	background-color: #262626;
	color: #FFFFFF !important;
}

/* --- List --- */
.mood-rv__list-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mood-rv__list-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.mood-rv__count {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 20px !important;
	font-weight: 500 !important;
}

.mood-rv__filters {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.mood-rv__select {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	background-color: #FFFFFF;
}

.mood-rv__filter {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	cursor: pointer;
	outline: none;
}

.mood-rv__select svg {
	width: 16px;
	height: 16px;
	display: block;
	transform: rotate(90deg);
	pointer-events: none;
	flex: 0 0 auto;
}

.mood-rv__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mood-rv__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border: 1px solid #EBEFFA;
	border-radius: 16px;
}

.mood-rv__item.is-hidden {
	display: none;
}

.mood-rv__text {
	margin: 0;
	padding: 0;
	border: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.7;
}

.mood-rv__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mood-rv__author {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mood-rv__avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover;
	flex: 0 0 auto;
}

.mood-rv__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mood-rv__name {
	color: #2B3244;
	font-family: "Inter", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.mood-rv__date {
	color: #585D64;
	font-family: "Inter", sans-serif;
	font-size: 13px;
}

.mood-rv__mark {
	flex: 0 0 auto;
	line-height: 0;
}

.mood-rv__mark svg {
	width: 44px;
	height: 44px;
	display: block;
}

.mood-rv__empty {
	margin: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
}

.mood-rv__more {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 26px;
	border: 1px solid #969FB7;
	border-radius: 100px;
	background: transparent;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mood-rv__more svg {
	width: 20px;
	height: 20px;
	display: block;
}

.mood-rv__more:hover {
	background-color: #050605;
	border-color: #050605;
	color: #FFFFFF !important;
}

.mood-rv__more span {
	color: inherit !important;
}

/* Reviews responsive */
@media (max-width: 900px) {
	.mood-rv__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.mood-rv__summary {
		position: static;
	}
}

@media (max-width: 767px) {
	.mood-rv__title {
		font-size: 26px !important;
	}

	.mood-rv__text {
		font-size: 16px;
	}

	.mood-rv__score-value {
		font-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-rv__write,
	.mood-rv__more {
		transition: none;
	}
}

/* ============================================================
   WooCommerce shop + single product
   The theme declares no Woo support, so Woo's default wrapper
   (#primary > .site-main) lands unstyled — and its stock loop CSS
   floats li.product at percentage widths, which fights our card.
   ============================================================ */
.woocommerce-page #primary.content-area,
.single-product #primary.content-area {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	box-sizing: border-box;
}

/* Shop header */
.woocommerce-products-header {
	margin: 0 0 24px;
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	margin: 0;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 15px;
}

.woocommerce .woocommerce-ordering select {
	padding: 10px 16px;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	background: #FFFFFF;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: #050605;
}

/* --- Loop grid --- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kill Woo's clearfix pseudo-elements — they create phantom grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

/* Undo Woo's float/percentage sizing so the grid controls layout. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: none !important;
}

/* Woo drops a sale badge into the loop item; the card has its own language. */
.woocommerce ul.products li.product .onsale {
	display: none !important;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 40px;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	background: #FFFFFF;
	color: #050605 !important;
	font-family: "Inter", sans-serif;
	font-size: 15px;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: #050605;
	border-color: #050605;
	color: #FFFFFF !important;
}

/* --- Single product --- */
.mood-single {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

/* Related products reuse the loop grid + our card. */
.single-product section.related.products,
.single-product section.upsells.products {
	margin: 0;
}

.single-product section.related.products > h2,
.single-product section.upsells.products > h2 {
	margin: 0 0 30px;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 34px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.34px !important;
}

/* Shop / single responsive */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.woocommerce-products-header__title,
	.woocommerce-products-header .page-title {
		font-size: 38px !important;
	}

	.mood-single {
		gap: 44px;
	}
}

@media (max-width: 767px) {
	.woocommerce-page #primary.content-area,
	.single-product #primary.content-area {
		padding: 24px 16px 56px;
	}

	/* Woo floats the ordering form right, which strands it mid-row once the
	   result count wraps onto its own line. Full width reads as deliberate. */
	.woocommerce .woocommerce-ordering,
	.woocommerce-page .woocommerce-ordering {
		float: none;
		width: 100%;
		margin: 0 0 16px;
	}

	.woocommerce .woocommerce-ordering select,
	.woocommerce-page .woocommerce-ordering select {
		width: 100%;
	}

	.woocommerce .woocommerce-result-count,
	.woocommerce-page .woocommerce-result-count {
		float: none;
		margin: 0 0 12px;
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Two-up cards are ~160px wide — the loop card's desktop rhythm has to
	   compress to fit. Scoped to the loop so the homepage carousel, which
	   shows a card at near-full width on phones, keeps its own scale. */
	.woocommerce ul.products li.product .mood-product {
		gap: 12px;
		padding: 6px 6px 14px;
		border-radius: 12px;
	}

	.woocommerce ul.products li.product .mood-product__media .mood-product__image {
		height: 160px !important;
		border-radius: 10px !important;
	}

	.woocommerce ul.products li.product .mood-product__wishlist,
	.woocommerce ul.products li.product .mood-product__wishlist svg {
		width: 32px;
		height: 32px;
	}

	.woocommerce ul.products li.product .mood-product__wishlist {
		top: 6px;
		right: 6px;
	}

	.woocommerce ul.products li.product .mood-product__body {
		padding: 0 4px;
		gap: 14px;
	}

	.woocommerce ul.products li.product .mood-product__info {
		gap: 8px;
	}

	.woocommerce ul.products li.product .mood-product__pill {
		padding: 5px 8px;
		font-size: 12px;
	}

	.woocommerce ul.products li.product .mood-product__title {
		font-size: 16px !important;
		letter-spacing: -0.16px !important;
	}

	.woocommerce ul.products li.product .mood-product__meta {
		font-size: 12px !important;
	}

	/* Price + rating side by side won't fit; stack them. */
	.woocommerce ul.products li.product .mood-product__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.woocommerce ul.products li.product .mood-product__price-now,
	.woocommerce ul.products li.product .mood-product__price-now .amount {
		font-size: 18px;
	}

	.woocommerce ul.products li.product .mood-product__price-was,
	.woocommerce ul.products li.product .mood-product__price-was .amount {
		font-size: 13px;
	}

	.woocommerce ul.products li.product .mood-product__rating {
		font-size: 13px;
		gap: 4px;
	}

	.woocommerce ul.products li.product .mood-product__rating svg {
		width: 16px;
		height: 15px;
	}

	.woocommerce ul.products li.product .mood-product__actions {
		gap: 8px;
	}

	.woocommerce ul.products li.product .mood-product__buy {
		padding: 11px 12px;
		font-size: 13px;
		gap: 4px;
	}

	.woocommerce ul.products li.product .mood-product__buy svg {
		width: 14px;
		height: 14px;
	}

	.woocommerce ul.products li.product .mood-product__cart {
		width: 40px;
		height: 40px;
	}

	.woocommerce ul.products li.product .mood-product__cart svg {
		width: 20px;
		height: 20px;
	}

	.woocommerce-products-header__title,
	.woocommerce-products-header .page-title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.single-product section.related.products > h2,
	.single-product section.upsells.products > h2 {
		font-size: 26px !important;
	}
}

/* Small phones — the loop card's action row runs out of width before the
   button label does, so drop the arrow and tighten rather than wrap. */
@media (max-width: 380px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: 10px;
	}

	.woocommerce ul.products li.product .mood-product__buy {
		padding: 11px 8px;
	}

	.woocommerce ul.products li.product .mood-product__buy svg {
		display: none;
	}

	.woocommerce ul.products li.product .mood-product__cart {
		width: 36px;
		height: 36px;
	}

	.woocommerce ul.products li.product .mood-product__cart svg {
		width: 18px;
		height: 18px;
	}
}

/* ============================================================
   WooCommerce cart / checkout / account / login
   No Figma frames for these, so they inherit the product design language:
   Inter + Inter Tight, black pills, #F7F7F9 panels, #C9D0EB hairlines.

   Cart + Checkout are Woo *blocks* (hydrated by JS, .wc-block-* classes);
   My Account is the classic shortcode. Both are covered below.
   Shop/single use Woo's #primary.content-area wrapper; cart/account/checkout
   fall through to the theme's page.php <main id="primary" class="site-main">.
   ============================================================ */
/* #primary covers both wrappers: the theme's <main id="primary" class="site-main">
   and Woo's own <div id="primary" class="content-area">. */
.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-account #primary {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	box-sizing: border-box;
}

/* The account/cart pages render through page.php, so the article wrapper
   inherits the post styling — reset it to full width inside the container. */
.woocommerce-cart #primary article,
.woocommerce-checkout #primary article,
.woocommerce-account #primary article,
.woocommerce-cart #primary .entry-content,
.woocommerce-checkout #primary .entry-content,
.woocommerce-account #primary .entry-content {
	max-width: none;
	width: 100%;
	margin: 0;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	margin: 0 0 28px;
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

/* --- Notices (shared) --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid #EBEFFF !important;
	border-left: 3px solid #050605 !important;
	border-radius: 12px !important;
	background-color: #F7F7F9 !important;
	color: #050605 !important;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	padding: 14px 18px !important;
	margin: 0 0 20px !important;
	list-style: none;
}

.woocommerce-error {
	border-left-color: #C0392B !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static !important;
	color: #050605 !important;
}

/* The notice's action ("View cart", "Undo"…) sits first in the DOM — move it to
   the right edge, message text left. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	margin-left: auto;
	flex: 0 0 auto;
}

/* --- Buttons (classic + blocks) --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 28px !important;
	border: 1px solid #050605 !important;
	border-radius: 100px !important;
	background-color: #050605 !important;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-block-components-button:not(.is-link) > .wc-block-components-button__text {
	color: inherit !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: #262626 !important;
	border-color: #262626 !important;
	color: #FFFFFF !important;
}

/* Secondary / outlined actions */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.wc-block-cart__submit-container--sticky .wc-block-components-button {
	background-color: transparent !important;
	color: #050605 !important;
	border-color: #969FB7 !important;
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover {
	background-color: #050605 !important;
	color: #FFFFFF !important;
	border-color: #050605 !important;
}

.woocommerce button.button:disabled,
.wc-block-components-button:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed;
}

/* --- Inputs (classic + blocks) --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px !important;
	border: 1px solid #C9D0EB !important;
	border-radius: 12px !important;
	background-color: #FFFFFF !important;
	color: #050605 !important;
	font-family: "Inter", sans-serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
	border-color: #050605 !important;
	box-shadow: 0 0 0 3px rgba(5, 6, 5, 0.08) !important;
	outline: none !important;
}

/*
 * Block checkout uses a floating label that lives *inside* the field and shrinks
 * to the top edge once the field is filled. The shared rule above zeroed the top
 * padding it needs, so the label landed on top of the value. Reserve top space
 * (and trim the bottom to keep the height) so the floated label clears the text.
 */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"] {
	padding: 22px 16px 6px !important;
}

.woocommerce form .form-row label,
.wc-block-components-checkout-step__title,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
	color: #050605;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 15px;
	margin-bottom: 6px;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce form.checkout_coupon,
.woocommerce-ResetPassword {
	border: 1px solid #EBEFFF !important;
	border-radius: 16px !important;
	padding: 28px !important;
	margin: 0 0 24px !important;
	background-color: #FFFFFF;
	box-shadow: 10px 20px 60px rgba(229, 233, 237, 0.4);
}

/* --- Cart (classic table fallback) --- */
.woocommerce table.shop_table {
	border: 1px solid #EBEFFF !important;
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background-color: #F7F7F9;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 16px;
}

.woocommerce table.shop_table td {
	border-top: 1px solid #EBEFFF !important;
	padding: 16px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #545A64;
}

.woocommerce table.shop_table td.product-name a {
	color: #050605 !important;
	text-decoration: none;
	font-weight: 500;
}

/* Order-details rows: product thumbnail beside the name + quantity. */
.mood-order-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mood-order-item__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: #F7F7F9;
	border: 1px solid #EBEFFF;
	line-height: 0;
}

.mood-order-item__thumb img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
}

.mood-order-item__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mood-order-item__meta .product-quantity {
	color: #545A64;
	font-weight: 500;
}

/* ============================================================
   Order received (classic thankyou template)
   Scoped with :has() to the #primary containing .woocommerce-order, so it
   applies no matter which body classes the page carries and touches no other
   page. Inner sections (details/customer/address) are also reused on the
   account order-view page — styling them there is a welcome bonus.
   ============================================================ */

#primary:has(.woocommerce-order) {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	box-sizing: border-box;
}

/* "Order received" page title. */
#primary:has(.woocommerce-order) .entry-title {
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif !important;
	font-size: 40px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.4px !important;
	margin: 0 0 16px !important;
}

/* "Thank you…" line — a plain notice, not a message box. */
#primary:has(.woocommerce-order) .woocommerce-thankyou-order-received {
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #545A64;
	font-size: 16px;
	line-height: 1.6;
}

/* Overview meta row → clean card (Order number / Date / Total / Payment). */
.woocommerce-order-overview.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	list-style: none;
	margin: 16px 0 8px;
	padding: 20px 24px;
	border: 1px solid #EBEFFF;
	border-radius: 14px;
	background: #F7F7F9;
}

.woocommerce-order-overview.woocommerce-thankyou-order-details li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #969FB7;
}

.woocommerce-order-overview.woocommerce-thankyou-order-details li strong {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #050605;
}

/* Section titles: "Order details", "Billing address". */
.woocommerce-order-details__title,
.woocommerce-column__title {
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.2px !important;
	margin: 40px 0 16px !important;
}

/* Address card. */
.woocommerce-customer-details address {
	border: 1px solid #EBEFFF;
	border-radius: 14px;
	padding: 22px 24px;
	background: #FFFFFF;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.75;
	font-style: normal;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
	margin: 12px 0 0;
	color: #050605;
}

/* ============================================================
   Toast — add-to-cart / wishlist confirmation (site-wide)
   ============================================================ */
.mood-toast-wrap {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.mood-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(90vw, 380px);
	padding: 13px 18px;
	border-radius: 100px;
	background: #050605;
	color: #FFFFFF;
	box-shadow: 0 12px 40px rgba(5, 6, 5, 0.28);
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mood-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.mood-toast__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: #C6A15B;
}

.mood-toast__icon svg {
	width: 20px;
	height: 20px;
}

.mood-toast__msg {
	min-width: 0;
}

.mood-toast--wishlist .mood-toast__icon {
	color: #FF5A5F;
}

.mood-toast--error .mood-toast__icon {
	color: #FFB020;
}

.mood-toast--remove .mood-toast__icon {
	color: rgba(255, 255, 255, 0.7);
}

/* Cart button feedback: dimmed while posting, filled on success. */
.mood-product__cart.is-busy,
.mood-pd__cart.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.mood-product__cart.is-added,
.mood-pd__cart.is-added {
	background-color: #050605 !important;
	border-color: #050605 !important;
	color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
	.mood-toast {
		transition: opacity 0.2s ease;
		transform: none;
	}

	.mood-toast.is-visible {
		transform: none;
	}
}

/* Delivery-time reassurance card, under the overview. */
.mood-order-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 8px;
	padding: 16px 20px;
	border: 1px solid rgba(198, 161, 91, 0.28);
	border-radius: 14px;
	background: rgba(198, 161, 91, 0.08);
}

.mood-order-notice__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: #9A7A34;
}

.mood-order-notice__text {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #050605;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	color: #050605;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 24px !important;
	font-weight: 500 !important;
	margin-bottom: 16px;
}

.woocommerce .cart-collaterals .cart_totals {
	border: 1px solid #EBEFFF;
	border-radius: 16px;
	padding: 24px;
	background-color: #F7F7F9;
}

/* --- Cart / Checkout blocks --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: "Inter", sans-serif;
}

.wc-block-components-product-name {
	color: #050605 !important;
	font-weight: 500;
	text-decoration: none;
}

.wc-block-cart-items__row .wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 12px !important;
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	border: 1px solid #EBEFFF;
	border-radius: 16px;
	padding: 24px;
	background-color: #F7F7F9;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item {
	color: #050605 !important;
	font-family: "Inter", sans-serif;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 600;
}

.wc-block-components-panel__button,
.wc-block-components-checkout-step__heading-content {
	color: #050605 !important;
	font-family: "Inter", sans-serif;
}

/* --- My Account --- */
/*
 * My Account layout.
 *
 * Our my-account.php wraps the nav + content in .mood-account, so the grid can
 * be stated outright instead of inferred from body classes or :has(). Woo's
 * woocommerce-layout.css floats the nav 30% / content 68%; those are reset here
 * because a float on a grid item is ignored but its width is not.
 */
.mood-account {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.mood-account > .woocommerce-MyAccount-navigation,
.mood-account > .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* Login/register screen: no nav, so it is a single centred column. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 520px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	border: 1px solid #EBEFFF;
	border-radius: 16px;
	padding: 12px;
	background-color: #F7F7F9;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: 100px;
	color: #545A64 !important;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: #FFFFFF;
	color: #050605 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: #050605;
	color: #FFFFFF !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: #050605;
}

/* Login / register columns */
.woocommerce .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

/*
 * Woo clears these columns with ::before/::after {content:" ";display:table}.
 * In a grid container those pseudo-elements become grid ITEMS — the leading one
 * took cell 1, shunting Billing into column 2 and Shipping onto the next row.
 */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-Addresses::before,
.woocommerce-Addresses::after {
	content: none !important;
	display: none !important;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* --- Addresses --- */
.woocommerce-Addresses .woocommerce-Address {
	box-sizing: border-box;
	border: 1px solid #EBEFFF;
	border-radius: 16px;
	padding: 24px;
	background-color: #FFFFFF;
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	float: none !important;
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
}

/* Woo floats this link right; the flex header already places it. */
.woocommerce-Address-title .edit {
	float: none !important;
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	color: #050605 !important;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-Address-title .edit:hover {
	background-color: #050605;
	border-color: #050605;
	color: #FFFFFF !important;
}

.woocommerce-Address address {
	margin: 0;
	font-style: normal;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

/* The intro line above the two cards. */
.woocommerce-MyAccount-content > p:first-of-type {
	margin: 0 0 20px;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 15px;
}

.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 16px;
}

.woocommerce-form-login__rememberme,
.woocommerce-form-login .lost_password {
	font-family: "Inter", sans-serif;
	font-size: 14px;
}

.woocommerce-form-login .lost_password a {
	color: #545A64;
}

/* Cart / checkout / account responsive */
@media (max-width: 1024px) {
	.woocommerce-cart .entry-title,
	.woocommerce-checkout .entry-title,
	.woocommerce-account .entry-title {
		font-size: 38px !important;
	}

	.mood-account {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.woocommerce-cart #primary,
	.woocommerce-checkout #primary,
	.woocommerce-account #primary {
		padding: 24px 16px 56px;
	}

	.woocommerce-cart .entry-title,
	.woocommerce-checkout .entry-title,
	.woocommerce-account .entry-title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.mood-account,
	.woocommerce .col2-set {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Nav becomes a horizontal, scrollable pill row above the content. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
	}

	.woocommerce form.login,
	.woocommerce form.register,
	.woocommerce-form-login,
	.woocommerce-form-register {
		padding: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		transition: none;
	}
}

/* ============================================================
   Modal + review form
   ============================================================ */
.mood-modal[hidden] {
	display: none;
}

.mood-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mood-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 6, 5, 0.55);
	animation: mood-fade 0.2s ease;
}

.mood-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: 88vh;
	overflow-y: auto;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(5, 6, 5, 0.25);
	animation: mood-pop 0.22s ease;
}

@keyframes mood-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mood-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.mood-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 24px 0;
}

.mood-modal__title {
	margin: 0;
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.mood-modal__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #C9D0EB;
	border-radius: 50%;
	background: #FFFFFF;
	color: #050605 !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mood-modal__close:hover {
	background: #050605;
	color: #FFFFFF !important;
}

.mood-modal__body {
	padding: 20px 24px 24px;
}

body.mood-modal-open {
	overflow: hidden;
}

/* --- Star rating input --- */
/* Reversed order (5→1) so CSS can paint the hovered star and all before it. */
.mood-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
	margin-bottom: 18px;
}

.mood-stars__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.mood-stars__label {
	cursor: pointer;
	line-height: 0;
	opacity: 0.3;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.mood-stars__label svg {
	width: 28px;
	height: 28px;
	display: block;
}

/* Hovered star + everything to its left (earlier in DOM = later visually). */
.mood-stars__label:hover,
.mood-stars__label:hover ~ .mood-stars__label,
.mood-stars__input:checked ~ .mood-stars__label {
	opacity: 1;
}

.mood-stars__label:hover {
	transform: scale(1.1);
}

.mood-stars__input:focus-visible + .mood-stars__label {
	outline: 2px solid #050605;
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Review form --- */
.mood-review-form p {
	margin: 0 0 16px;
}

.mood-review-form label {
	display: block;
	margin-bottom: 6px;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 500;
}

.mood-review-form .required {
	color: #C0392B;
}

.mood-review-form input[type="text"],
.mood-review-form input[type="email"],
.mood-review-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #C9D0EB;
	border-radius: 12px;
	background: #FFFFFF;
	color: #050605;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mood-review-form input:focus,
.mood-review-form textarea:focus {
	border-color: #050605;
	box-shadow: 0 0 0 3px rgba(5, 6, 5, 0.08);
	outline: none;
}

.mood-review-form textarea {
	resize: vertical;
	min-height: 120px;
}

.mood-review-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.mood-review-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: #545A64;
}

.mood-review-form .form-submit {
	margin: 4px 0 0;
}

.mood-review-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 26px;
	border: 0;
	border-radius: 100px;
	background-color: #050605;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mood-review-form input[type="submit"]:hover {
	background-color: #262626;
}

.mood-rv__write {
	border: 0;
	cursor: pointer;
}

@media (max-width: 767px) {
	.mood-modal {
		padding: 12px;
	}

	.mood-modal__dialog {
		max-height: 92vh;
	}

	.mood-modal__head {
		padding: 20px 20px 0;
	}

	.mood-modal__body {
		padding: 16px 20px 20px;
	}

	.mood-modal__title {
		font-size: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-modal__backdrop,
	.mood-modal__dialog {
		animation: none;
	}

	.mood-stars__label {
		transition: none;
	}
}

/* ============================================================
   Header counters (wishlist + cart)
   ============================================================ */
.mood-header__action {
	position: relative;
}

.mood-header__count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background-color: #FFA800;
	color: #050605 !important;
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}

/* Nothing saved / empty cart — hide rather than show a zero. */
.mood-header__count.is-empty {
	display: none;
}

/* ============================================================
   Mood Wishlist (no Figma frame — follows the product grid)
   ============================================================ */
.mood-wl {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.mood-wl__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.mood-wl__title {
	margin: 0;
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.48px !important;
}

.mood-wl__count {
	color: #969FB7;
	font-family: "Inter", sans-serif;
	font-size: 16px;
}

.mood-wl__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

/* --- Pagination (mirrors the Woo shop pager) --- */
.mood-wl__pagination {
	margin-top: 10px;
}

.mood-wl__pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.mood-wl__pagination li {
	margin: 0;
}

.mood-wl__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid #C9D0EB;
	border-radius: 100px;
	background: #FFFFFF;
	color: #050605 !important;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mood-wl__pagination .page-numbers.current,
.mood-wl__pagination a.page-numbers:hover {
	background: #050605;
	border-color: #050605;
	color: #FFFFFF !important;
}

.mood-wl__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* --- Empty state --- */
.mood-wl__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 72px 24px;
	border: 1px solid #EBEFFF;
	border-radius: 16px;
	background-color: #F7F7F9;
}

.mood-wl__empty-icon {
	line-height: 0;
	margin-bottom: 4px;
}

.mood-wl__empty-icon svg {
	width: 64px;
	height: 64px;
	display: block;
}

.mood-wl__empty-title {
	margin: 0;
	color: #050605 !important;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 26px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.mood-wl__empty-text {
	margin: 0;
	max-width: 380px;
	color: #545A64;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.mood-wl__empty-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 15px 26px;
	border-radius: 100px;
	background-color: #050605;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mood-wl__empty-button span {
	color: inherit !important;
}

.mood-wl__empty-button svg {
	width: 20px;
	height: 20px;
	display: block;
	transition: transform 0.2s ease;
}

.mood-wl__empty-button:hover {
	background-color: #262626;
	color: #FFFFFF !important;
	transform: translateY(-2px);
}

.mood-wl__empty-button:hover svg {
	transform: translateX(3px);
}

/* Wishlist responsive */
@media (max-width: 1024px) {
	.mood-wl__title {
		font-size: 38px !important;
	}

	.mood-wl__items {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.mood-wl {
		gap: 20px;
	}

	.mood-wl__title {
		font-size: 30px !important;
		letter-spacing: -0.3px !important;
	}

	.mood-wl__items {
		gap: 16px;
	}

	.mood-wl__empty {
		padding: 48px 20px;
	}

	.mood-wl__empty-icon svg {
		width: 52px;
		height: 52px;
	}

	.mood-wl__empty-title {
		font-size: 22px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mood-wl__empty-button,
	.mood-wl__empty-button svg {
		transition: none;
	}
}

/* ============================================================
   Mood Footer
   ============================================================ */
.mood-footer {
	width: 100%;
	background-color: #050605;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 24px;
	padding: 100px 60px 40px;
}

.mood-footer__inner {
	max-width: 1220px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* Columns row */
.mood-footer__cols {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 30px;
}

.mood-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
	max-width: 320px;
}

.mood-footer__logo {
	display: inline-flex;
	line-height: 0;
}

.mood-footer__logo img {
	width: 169px;
	height: auto;
	display: block;
}

.mood-footer__tagline {
	margin: 0;
	max-width: 289px;
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: -0.08px;
}

/* Link / contact columns share the vertical divider treatment. */
.mood-footer__col {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-left: 40px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.mood-footer__col--contact {
	flex: 0 0 auto;
	max-width: 307px;
}

.mood-footer__heading {
	margin: 0;
	color: #FFFFFF !important;
	font-family: "Inter", sans-serif;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.7 !important;
	letter-spacing: 0 !important;
}

.mood-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mood-footer__links li {
	margin: 0;
}

.mood-footer__link {
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: -0.08px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.mood-footer__link:hover {
	color: #FFFFFF !important;
}

/* Contact list */
.mood-footer__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mood-footer__contact {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mood-footer__contact:last-child {
	align-items: flex-start;
}

.mood-footer__contact-icon {
	flex: 0 0 auto;
	line-height: 0;
}

.mood-footer__contact-icon svg {
	display: block;
	width: 44px;
	height: 44px;
}

.mood-footer__contact-text {
	display: flex;
	flex-direction: column;
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.08px;
}

.mood-footer__contact-text a,
.mood-footer__contact-text span {
	color: inherit !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mood-footer__contact-text a:hover {
	color: #FFFFFF;
}

/* Bottom bar */
.mood-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.mood-footer__divider {
	height: 1px;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.12);
}

.mood-footer__bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.mood-footer__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: -0.08px;
}

.mood-footer__socials {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mood-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	color: #FFFFFF !important;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mood-footer__social:hover {
	background-color: #FFFFFF;
	color: #050605 !important;
	transform: translateY(-2px);
}

/* Footer responsive */
@media (max-width: 1024px) {
	.mood-footer {
		padding: 72px 40px 32px;
	}

	.mood-footer__cols {
		flex-wrap: wrap;
		gap: 48px 30px;
	}

	.mood-footer__brand {
		flex: 1 1 100%;
		max-width: 420px;
	}

	/* First wrapped column loses its divider to avoid a dangling line. */
	.mood-footer__cols > .mood-footer__col:nth-child(2) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 767px) {
	.mood-footer {
		padding: 56px 24px 28px;
		border-radius: 20px;
	}

	.mood-footer__cols {
		flex-direction: column;
		gap: 40px;
	}

	.mood-footer__col {
		padding-left: 0;
		border-left: 0;
	}

	.mood-footer__col--contact {
		max-width: 100%;
	}

	.mood-footer__link {
		white-space: normal;
	}

	.mood-footer__bottom-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}