/*
Theme Name:   Aroma
Theme URI:    https://example.com/aroma
Description:  Perfume storefront child theme for Storefront. Serif display type, square corners, hairline borders, and a rose palette spent sparingly - the visual language of an actual perfume house rather than a web template. Built for a Malaysian fragrance shop, mobile first, readable on a slow connection.
Author:       EcomCore
Template:     storefront
Version:      3.0.1
License:      GNU General Public License v2 or later
Text Domain:  aroma
Tags:         e-commerce, two-columns, custom-colors, translation-ready
*/

/* ---------------------------------------------------------------------
 * Design tokens
 *
 * The whole look comes from these. The ink carries a red undertone so the
 * type belongs to the same family as the rose instead of looking borrowed
 * from another design. Rose at three depths: deep claret on small confident
 * things, a blush tint over large quiet ones, and never a flat panel of
 * bright red. White on --a-rose measures 7.0:1, white on --a-rose-deep
 * 10.1:1, so both carry text comfortably.
 *
 * No border-radius anywhere in this file. Square is the design.
 * ------------------------------------------------------------------- */

:root {
	--a-ink: #241419;
	--a-ink-soft: #6b555c;
	--a-ink-faint: #927c82;
	--a-paper: #ffffff;
	--a-band: #faf0f2;
	--a-line: #ecd9de;
	--a-line-soft: #f4e7ea;

	--a-rose: #a32b45;
	--a-rose-deep: #7d1c33;
	--a-rose-tint: #f7e3e8;

	--a-shell: 1180px;

	--a-gap-xs: .5rem;
	--a-gap-s: 1rem;
	--a-gap-m: 2rem;
	--a-gap-l: 4rem;
	--a-gap-xl: 6rem;

	/* Didot on Mac, Bodoni on Windows with Office, Georgia everywhere else.
	 * All three carry the same high-contrast fashion voice and none needs a
	 * network request. */
	--a-serif: Didot, "Bodoni MT", "Bodoni 72", Georgia, "Times New Roman", serif;
	--a-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--a-ease: cubic-bezier(.28, .11, .32, 1);
}

/* ---------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: var(--a-font);
}

body {
	background: var(--a-paper);
	color: var(--a-ink);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;

	/* Full-bleed homepage bands use 100vw, which overhangs by a scrollbar
	 * width. This stops that becoming a horizontal scroll on the page. */
	overflow-x: hidden;
}

h1, h2, h3,
.site-title {
	font-family: var(--a-serif);
	font-weight: 500;
	letter-spacing: .005em;
	color: var(--a-ink);
}

h4, h5, h6 { color: var(--a-ink); }

a { color: var(--a-ink); }
a:hover { color: var(--a-rose-deep); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--a-rose);
	outline-offset: 3px;
}

::selection { background: var(--a-rose-tint); }

/* ---------------------------------------------------------------------
 * Buttons - square, uppercase, letterspaced. Every button context that
 * Storefront and WooCommerce render, classic and block alike.
 * ------------------------------------------------------------------- */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.added_to_cart,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.7rem;
	font-family: var(--a-font);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.1;
	color: #fff;
	background: var(--a-rose);
	border: 1px solid var(--a-rose);
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--a-ease), border-color .18s var(--a-ease), color .18s var(--a-ease);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.added_to_cart:hover,
.wc-block-components-button:hover {
	color: #fff;
	background: var(--a-rose-deep);
	border-color: var(--a-rose-deep);
	box-shadow: none;
}

/* Storefront paints .button.alt as its accent; keep it in the same rose so
 * "primary" and "alternate" cannot drift into two different brands. */
.button.alt,
.button.checkout,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	color: #fff;
	background: var(--a-rose);
	border-color: var(--a-rose);
}

.button.alt:hover,
.button.checkout:hover {
	background: var(--a-rose-deep);
	border-color: var(--a-rose-deep);
}

/* Hollow variant. */
.aroma-ghost,
.button.aroma-ghost {
	color: var(--a-ink);
	background: transparent;
	border-color: var(--a-ink);
}

.aroma-ghost:hover,
.button.aroma-ghost:hover {
	color: var(--a-rose-deep);
	background: transparent;
	border-color: var(--a-rose-deep);
}

.button:disabled,
.button.disabled,
button:disabled {
	color: #fff;
	background: var(--a-ink-faint);
	border-color: var(--a-ink-faint);
	opacity: 1;
}

.aroma-textlink {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-rose-deep);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------
 * Inputs - square, 16px on the fields a phone focuses, or iOS Safari zooms
 * the whole page in and the customer has to pinch back out to pay.
 * ------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.input-text,
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input {
	font-size: 16px;
	color: var(--a-ink);
	background: var(--a-paper);
	border: 1px solid var(--a-line);
	border-radius: 0;
	box-shadow: none;
	padding: .72rem .9rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.input-text:focus {
	border-color: var(--a-ink);
	background: var(--a-paper);
	outline: none;
	box-shadow: none;
}

label { color: var(--a-ink); font-weight: 600; font-size: .8125rem; }

.required { color: var(--a-rose); border-bottom: 0; }

fieldset { border: 1px solid var(--a-line-soft); }

/* ---------------------------------------------------------------------
 * Header - one line: brand, links, search, cart. Storefront splits those
 * across two stacked wrappers, each with its own centred .col-full, which
 * is what made the old header three rows deep. display:contents dissolves
 * both wrappers so their children become flex children of the header
 * itself. The wrappers keep existing for anything that looks for them;
 * they just stop generating boxes.
 *
 * The bar is white at half opacity over a blur. A browser that cannot
 * blur gets an opaque bar instead of navigation text sitting on whatever
 * product photo happens to scroll beneath it.
 * ------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, .5);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--a-line-soft);
	padding-top: .8rem;
	padding-bottom: .8rem;
	transition: box-shadow .25s var(--a-ease);
}

@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.site-header {
		background: rgba(255, 255, 255, .97);
	}
}

.site-header.is-scrolled { box-shadow: 0 1px 0 var(--a-line); }

.site-header .site-branding,
.site-header .site-logo-anchor {
	margin-bottom: 0;
}

.site-header .custom-logo-link img {
	max-height: 40px;
	width: auto;
}

/* The wordmark: serif, spaced caps, like a label on a bottle. */
.site-title { margin: 0; }

/* Sized for the worst case: until the client renames the site, the title is
 * the whole domain name, and at display size it would starve the menu of the
 * room it needs to stay on one line. */
.site-title a,
.site-title a:hover {
	color: var(--a-ink);
	font-family: var(--a-serif);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.site-description { display: none; }

@media ( min-width: 768px ) {
	.site-header {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: clamp( .5rem, 1.8vw, 2rem );

		/* The header gets a wider shell than the page. Until the client renames
		 * the site, the wordmark is the whole domain name, and on the 1180px
		 * shell that starves the menu into wrapping. 1400px keeps brand, four
		 * links, search and cart on one line even with the long title. */
		padding-inline: max( 1.5rem, ( 100% - 1400px ) / 2 );
	}

	.site-header > .col-full,
	.site-header .storefront-primary-navigation,
	.site-header .storefront-primary-navigation > .col-full {
		display: contents;
	}

	/*
	 * Storefront clearfixes the header and its wrappers with ::before/::after
	 * boxes. Once the wrappers are display:contents, every one of those pseudo
	 * boxes surfaces on the header's flex line as a zero-width item - invisible
	 * on screen, but each one drags a full column gap along with it, and they
	 * all sort to the front because generated boxes keep order 0. Together they
	 * stole roughly a third of the header's width, which is what squeezed the
	 * navigation to nothing and stacked the menu into a one-word column.
	 * Clearfixes exist to manage floats, and a flex line has none to manage.
	 */
	.site-header::before,
	.site-header::after,
	.site-header .col-full::before,
	.site-header .col-full::after,
	.site-header .storefront-primary-navigation::before,
	.site-header .storefront-primary-navigation::after {
		content: none;
	}

	/* Storefront lays these out with percentage widths and floats, and it
	 * scopes them as ".woocommerce-active .site-header ..." - one class more
	 * specific than anything here, so a plain width:auto reset quietly loses.
	 * The float does not matter (floats are ignored on flex items), but the
	 * width does: flex-basis:auto reads it, Storefront's 73.9% blew the line
	 * up to nearly twice the header, and the shrink fell on the navigation,
	 * which collapsed to zero and stacked its items into a one-word column.
	 *
	 * The fix is to stop consulting width at all: every flex child gets an
	 * explicit basis, so whatever width the parent theme wins with is simply
	 * never read. */
	/* The selector list repeats every scoping Storefront uses, because the
	 * margins must WIN, not just exist: Storefront's 4.35% margin-right on the
	 * branding and the navigation is declared under ".woocommerce-active", one
	 * class more specific than a plain ".site-header" reset, and each phantom
	 * margin re-opens a 50px hole in the flex line. */
	.site-header .site-branding,
	.site-header .site-search,
	.site-header .main-navigation,
	.site-header .site-header-cart,
	.woocommerce-active .site-header .site-branding,
	.woocommerce-active .site-header .main-navigation,
	.storefront-secondary-navigation .site-header .site-branding,
	.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
		float: none;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		clear: none;
	}

	.site-header .site-branding { order: 1; flex: 0 0 auto; max-width: 30%; }

	.site-header .main-navigation { order: 2; flex: 1 1 0%; min-width: 0; }

	.site-header .site-search { order: 3; flex: 0 1 13rem; min-width: 6rem; }

	.site-header .site-header-cart { order: 4; flex: 0 0 auto; }

	.site-header .site-title a { white-space: nowrap; }

	/* The handheld copy of the menu, and the second page-list fallback if a
	 * menu is ever unassigned again - either on a wide screen is a duplicate
	 * row of links. */
	.site-header .main-navigation .handheld-navigation,
	.site-header .main-navigation > div.menu ~ div.menu {
		display: none;
	}
}

/* The links: small spaced capitals with an underline, no pills. */
.main-navigation ul.menu,
.main-navigation ul.nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( .7rem, 1.2vw, 1.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li {
	position: relative;
	margin: 0;
	padding: 0;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	display: flex;
	align-items: center;
	gap: .38em;
	padding: .4rem 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--a-ink);
	white-space: nowrap;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-ancestor > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation ul.nav-menu > li > a:hover {
	color: var(--a-rose-deep);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	opacity: 1;
}

/* A chevron on parents, drawn from two borders so it centres on the label. */
.main-navigation li.menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: .34em;
	height: .34em;
	margin-top: -.2em;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	transition: opacity .18s var(--a-ease);
}

.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.menu-item-has-children:focus-within > a::after { opacity: .9; }

@media ( min-width: 768px ) {
	/* The dropdown panel. Storefront parks sub-menus at left:-9999px and
	 * slides them back on hover; these selectors carry .site-header so they
	 * outrank that without !important. */
	.site-header .main-navigation ul.menu ul.sub-menu,
	.site-header .main-navigation ul.nav-menu ul.sub-menu {
		position: absolute;
		top: calc( 100% + .5rem );
		left: -1rem;
		display: block;
		min-width: 13rem;
		margin: 0;
		padding: .5rem 0;
		list-style: none;
		background: var(--a-paper);
		border: 1px solid var(--a-line);
		border-radius: 0;
		box-shadow: 0 12px 30px rgba(36, 20, 25, .1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .16s var(--a-ease), transform .16s var(--a-ease), visibility .16s;
		z-index: 600;
	}

	/* focus-within, so the panel opens for a keyboard, not only a mouse. */
	.site-header .main-navigation li:hover > ul.sub-menu,
	.site-header .main-navigation li:focus-within > ul.sub-menu {
		left: -1rem;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-header .main-navigation ul.menu > li:last-child ul.sub-menu {
		left: auto;
		right: 0;
	}

	.site-header .main-navigation ul.sub-menu li {
		position: relative;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.site-header .main-navigation ul.sub-menu a {
		display: block;
		padding: .55rem 1.1rem;
		font-size: .875rem;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		color: var(--a-ink-soft);
		white-space: nowrap;
	}

	.site-header .main-navigation ul.sub-menu a:hover {
		color: var(--a-rose-deep);
		background: var(--a-band);
		text-decoration: none;
	}

	/* An invisible bridge over the gap, so the panel does not close while the
	 * pointer travels from the label down to it. */
	.site-header .main-navigation li.menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: .6rem;
	}
}

/* Search: field and button joined, the way a checkout form does it. */
.site-header .site-search,
.site-header .site-search .widget { margin-bottom: 0; }

.site-header .site-search form {
	position: relative;
	margin: 0;
	display: flex;
}

.site-header .site-search .search-field {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: .55rem .8rem;
	font-size: .875rem;
	color: var(--a-ink);
	background: rgba(255, 255, 255, .75);
	border: 1px solid var(--a-line);
	border-right: 0;
	border-radius: 0;
}

.site-header .site-search .search-field:focus {
	background: var(--a-paper);
	border-color: var(--a-ink);
	outline: none;
}

.site-header .site-search form button {
	position: static;
	flex: 0 0 auto;
	padding: .55rem .95rem;
	font-size: .6875rem;
	color: #fff;
	background: var(--a-ink);
	border-color: var(--a-ink);
}

.site-header .site-search form button:hover {
	background: var(--a-rose-deep);
	border-color: var(--a-rose-deep);
}

/* Cart corner. */
.site-header-cart {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header-cart > li { margin: 0; padding: 0; list-style: none; }

.site-header-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem 0;
	color: var(--a-ink);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	background: none;
}

.site-header-cart .cart-contents:hover { color: var(--a-rose-deep); }

.site-header-cart .cart-contents .count {
	color: var(--a-ink-faint);
	font-size: .8125rem;
	font-weight: 400;
	background: none;
	padding: 0;
}

.site-header-cart .widget_shopping_cart { border: 1px solid var(--a-line); border-radius: 0; }

/* ---------------------------------------------------------------------
 * Homepage sections
 *
 * Every section bleeds to the full window and centres its own content on
 * the shared 1180px shell, so the hairlines all line up regardless of what
 * container Storefront wraps the page in.
 * ------------------------------------------------------------------- */

.aroma-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.aroma-shell {
	max-width: var(--a-shell);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* The homepage's own page block is removed in PHP (see aroma_homepage_layout),
 * because its hidden title still carried margins that opened a large white gap
 * above the hero. These rules are the belt to that braces: if any plugin
 * prints the post block anyway, it takes no space. */
.page-template-template-homepage .hentry,
.page-template-template-homepage .entry-header,
.page-template-template-homepage .entry-title,
.home.page .entry-header > .entry-title { display: none; }

.page-template-template-homepage .entry-content:empty { margin: 0; padding: 0; }

/* Hero */

.aroma-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #fdf7f8 0%, #f7e7ea 100%);
	border-bottom: 1px solid var(--a-line-soft);
}

.aroma-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	align-items: center;
	gap: var(--a-gap-m);
	min-height: 56vh;
	padding-top: var(--a-gap-l);
	padding-bottom: var(--a-gap-l);
}

/* Both lines stay on one line each. The size is viewport-driven so they
 * shrink to fit rather than break; an over-long custom headline trims at
 * the section edge instead of scrolling the page sideways. */
.aroma-hero h1 {
	font-size: clamp(1.4rem, 3.2vw, 3.05rem);
	line-height: 1.08;
	margin: 0;
	white-space: nowrap;
}

.aroma-hero__copy > p {
	margin: 1rem 0 var(--a-gap-m);
	font-size: clamp(.9rem, 1.5vw, 1.125rem);
	letter-spacing: .01em;
	color: var(--a-ink-soft);
	white-space: nowrap;
}

.aroma-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	align-items: center;
}

.aroma-hero__art {
	position: relative;
	display: grid;
	justify-items: end;
}

.aroma-hero__photo {
	position: relative;
	z-index: 1;
	width: min(600px, 100%);
	box-shadow: 0 26px 60px rgba(125, 28, 51, .22);
}

.aroma-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* No photo set and none bundled: centre the words instead of leaving an
 * empty right-hand column. */
.aroma-hero--plain .aroma-hero__grid { grid-template-columns: 1fr; text-align: center; }
.aroma-hero--plain .aroma-hero__actions { justify-content: center; }

/* The line-drawn roses. Stroke inherits through <use>, so each instance is
 * coloured and weighted from here. */
.aroma-rose {
	position: absolute;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	pointer-events: none;
}

.aroma-rose--big {
	width: clamp(240px, 26vw, 380px);
	right: -70px;
	top: -80px;
	color: #eac3cd;
	transform: rotate(18deg);
}

.aroma-rose--copy {
	width: 130px;
	left: -46px;
	top: 6%;
	color: #f2dbe1;
	transform: rotate(-10deg);
}

/* Trust card - one bordered box, 1px gaps as dividers. A border per column
 * looks right until the grid wraps on a tablet and the first item of the
 * second row carries a stray line; the gap trick cannot get that wrong. */

.aroma-trust { padding: var(--a-gap-l) 0 0; }

.aroma-trust__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--a-line-soft);
	border: 1px solid var(--a-line-soft);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 14px 30px rgba(0, 0, 0, .05);
}

.aroma-trust__inner > div {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	column-gap: .9rem;
	align-items: start;
	padding: 1.4rem 1.45rem;
	background: var(--a-paper);
}

.aroma-trust__inner svg {
	grid-row: span 2;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: .15rem;
}

.aroma-trust strong {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.aroma-trust span { font-size: .875rem; color: var(--a-ink-soft); }

/* Section heads - catalogue style: serif left, quiet link right, hairline. */

.aroma-section { padding: var(--a-gap-l) 0; }
.aroma-section--band { background: var(--a-band); }

.aroma-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--a-gap-s);
	padding-bottom: var(--a-gap-s);
	margin-bottom: var(--a-gap-m);
	border-bottom: 1px solid var(--a-line);
}

.aroma-section__head h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	margin: 0;
}

.aroma-section__head p {
	margin: .35rem 0 0;
	font-size: .9375rem;
	color: var(--a-ink-soft);
}

/* Scent families */

.aroma-families {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--a-gap-s);
}

.aroma-families a {
	display: block;
	padding: 1.3rem 1.2rem 1.2rem;
	background: var(--a-paper);
	border: 1px solid var(--a-line);
	text-decoration: none;
	transition: border-color .18s var(--a-ease);
}

.aroma-families a:hover { border-color: var(--a-rose); }

.aroma-families strong {
	display: block;
	font-family: var(--a-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--a-ink);
}

.aroma-families span { font-size: .8125rem; color: var(--a-ink-faint); }

.aroma-families em {
	display: block;
	margin-top: .55rem;
	font-style: normal;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a-rose);
}

/* The authenticity split */

.aroma-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--a-gap-l);
	align-items: center;
}

.aroma-split h2 {
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	line-height: 1.15;
	margin: 0;
}

.aroma-split > div > p {
	margin: 1rem 0 0;
	color: var(--a-ink-soft);
	max-width: 34em;
}

.aroma-split ul { margin: var(--a-gap-s) 0 0; padding: 0; list-style: none; }

.aroma-split li {
	position: relative;
	padding: .55rem 0 .55rem 1.5rem;
	margin: 0;
	font-size: .9375rem;
	border-bottom: 1px solid var(--a-line-soft);
}

.aroma-split li:first-child { border-top: 1px solid var(--a-line-soft); }

.aroma-split li::before {
	content: "";
	position: absolute;
	left: .1rem;
	top: 1.05em;
	width: .7rem;
	height: .4rem;
	border-left: 1.6px solid var(--a-rose);
	border-bottom: 1.6px solid var(--a-rose);
	transform: rotate(-45deg);
}

.aroma-split__art {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background: var(--a-rose-tint);
	overflow: hidden;
}

.aroma-split__art > svg:last-child { width: 40%; position: relative; }

.aroma-split__art .aroma-rose {
	width: 70%;
	right: -18%;
	bottom: -18%;
	color: #ecc7d1;
	transform: rotate(15deg);
}

/* Newsletter band - the one bold moment on the page. Only rendered when
 * the shop has connected a real list, so it never collects into a void. */

.aroma-signup-band {
	background: var(--a-rose-deep);
	color: #fff;
	padding: var(--a-gap-l) 0;
}

.aroma-signup-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 var(--a-gap-s); }
.aroma-signup-band .aroma-shell { max-width: 44rem; text-align: center; }
.aroma-signup-band input { border-color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------------------
 * Product loop - shop page, category pages, homepage rows.
 * ------------------------------------------------------------------- */

ul.products li.product { position: relative; text-align: left; }

ul.products li.product img {
	display: block;
	width: 100%;
	border: 1px solid var(--a-line-soft);
	border-radius: 0;
	margin-bottom: .9rem;
}

.aroma-section--band ul.products li.product img { border-color: var(--a-line); }

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--a-serif);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--a-ink);
	padding: 0;
	margin: 0 0 .15rem;
}

ul.products li.product .price {
	color: var(--a-ink);
	font-size: .9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-bottom: .55rem;
}

ul.products li.product .price del {
	color: var(--a-ink-faint);
	font-weight: 400;
	opacity: 1;
}

ul.products li.product .price ins { text-decoration: none; font-weight: 600; }

ul.products li.product .button {
	width: 100%;
	padding: .8rem 1rem;
	color: var(--a-ink);
	background: transparent;
	border-color: var(--a-ink);
}

ul.products li.product .button:hover {
	color: #fff;
	background: var(--a-rose);
	border-color: var(--a-rose);
}

ul.products li.product .added_to_cart { width: 100%; margin-top: .5rem; }

/* Sale flag: a square label pinned to the image corner. */
.onsale,
ul.products li.product .onsale,
.single-product span.onsale {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: .3rem .6rem;
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--a-rose-deep);
	border-radius: 0;
	z-index: 1;
}

/* Ratings in the brand rose. */
.star-rating span,
.star-rating::before,
p.stars a { color: var(--a-rose); }

/* Shop toolbar: result count and sort on one quiet line. */
.storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-gap-s);
	margin-bottom: var(--a-gap-m);
	font-size: .875rem;
	color: var(--a-ink-soft);
}

.storefront-sorting .woocommerce-result-count { margin: 0; }
.storefront-sorting form { margin: 0; }
.storefront-sorting select { padding: .55rem 2rem .55rem .8rem; font-size: .875rem; }

/* Breadcrumb. */
.woocommerce-breadcrumb {
	margin-bottom: var(--a-gap-s);
	padding: 0;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
	border-bottom: 0;
}

.woocommerce-breadcrumb a { color: var(--a-ink-faint); }
.woocommerce-breadcrumb a:hover { color: var(--a-rose-deep); }

/* Page titles across archive and static pages. */
.woocommerce-products-header__title.page-title,
.page .entry-header .entry-title,
.archive .page-title {
	font-family: var(--a-serif);
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	line-height: 1.12;
}

/* Pagination: numbered squares. */
.woocommerce-pagination { border: 0; margin-top: var(--a-gap-m); }

.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: .4rem;
	border: 0;
	margin: 0;
}

.woocommerce-pagination span.page-numbers,
.woocommerce-pagination a.page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 .5rem;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: var(--a-ink);
	background: var(--a-paper);
	border: 1px solid var(--a-line);
}

.woocommerce-pagination a.page-numbers:hover { border-color: var(--a-ink); background: var(--a-paper); }

.woocommerce-pagination span.page-numbers.current {
	color: #fff;
	background: var(--a-rose);
	border-color: var(--a-rose);
}

/* ---------------------------------------------------------------------
 * Single product
 * ------------------------------------------------------------------- */

.single-product div.product .woocommerce-product-gallery img {
	border: 1px solid var(--a-line-soft);
	border-radius: 0;
}

.single-product div.product .woocommerce-product-gallery { box-shadow: 0 20px 50px rgba(125, 28, 51, .1); }

.single-product div.product .product_title {
	font-family: var(--a-serif);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.1;
}

.single-product div.product p.price {
	color: var(--a-ink);
	font-size: 1.35rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.single-product div.product p.price del { color: var(--a-ink-faint); font-weight: 400; opacity: 1; }
.single-product div.product p.price ins { text-decoration: none; }

.woocommerce-product-details__short-description { color: var(--a-ink-soft); }

.single-product div.product form.cart {
	padding: var(--a-gap-s) 0;
	border-top: 1px solid var(--a-line-soft);
	border-bottom: 1px solid var(--a-line-soft);
}

.single-product div.product form.cart .quantity .qty {
	width: 5.2rem;
	padding: .72rem .5rem;
	text-align: center;
}

.single-product div.product form.cart table.variations td,
.single-product div.product form.cart table.variations th {
	border: 0;
	padding: .3rem 0;
}

.single-product div.product form.cart table.variations label {
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--a-ink-faint);
}

.reset_variations { font-size: .8125rem; color: var(--a-ink-faint); }

.product_meta {
	font-size: .8125rem;
	color: var(--a-ink-soft);
	padding-top: var(--a-gap-s);
}

.product_meta a { color: var(--a-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.product_meta a:hover { color: var(--a-rose-deep); }

/* Tabs: a hairline with the active tab underlined, not folder tabs. */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a-gap-m);
	margin: 0 0 var(--a-gap-s);
	padding: 0;
	border-bottom: 1px solid var(--a-line);
	list-style: none;
}

.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .7rem 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--a-rose-deep);
	box-shadow: inset 0 -2px 0 var(--a-rose-deep);
}

.woocommerce-tabs .panel h2:first-of-type {
	font-size: 1.2rem;
	padding-bottom: .6rem;
	margin-bottom: .9rem;
	border-bottom: 1px solid var(--a-line);
}

/* Related and upsells share the catalogue head. */
.related.products > h2,
.up-sells.products > h2 {
	font-family: var(--a-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	padding-bottom: var(--a-gap-s);
	margin-bottom: var(--a-gap-m);
	border-bottom: 1px solid var(--a-line);
}

/* The scent profile panel: Top / Heart / Base as hairline cells. */
.aroma-notes { margin: var(--a-gap-s) 0; }

.aroma-notes h3 {
	font-size: 1.2rem;
	padding-bottom: .6rem;
	margin: 0 0 .9rem;
	border-bottom: 1px solid var(--a-line);
}

.aroma-notes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	background: var(--a-line-soft);
	border: 1px solid var(--a-line-soft);
}

.aroma-notes__grid > div { padding: 1rem 1.1rem; background: var(--a-paper); }

.aroma-notes__grid h4 {
	margin: 0 0 .3rem;
	font-family: var(--a-font);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
}

.aroma-notes__grid p {
	margin: 0;
	font-family: var(--a-serif);
	font-size: 1rem;
	color: var(--a-ink);
}

.aroma-notes__meta { margin: .7rem 0 0; font-size: .8125rem; color: var(--a-ink-soft); }
.aroma-notes__meta b { color: var(--a-ink); }

/* ---------------------------------------------------------------------
 * Cart and checkout - classic templates and the block versions both, so
 * the design holds whichever WooCommerce renders.
 * ------------------------------------------------------------------- */

table.shop_table {
	border: 0;
	border-radius: 0;
	margin-bottom: var(--a-gap-m);
}

table.shop_table th {
	padding: .6rem .8rem .6rem 0;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
	background: none;
	border-bottom: 1px solid var(--a-line);
}

table.shop_table td {
	padding: .9rem .8rem .9rem 0;
	background: none;
	border-bottom: 1px solid var(--a-line-soft);
}

table.shop_table td.product-name a { font-family: var(--a-serif); font-size: 1.0625rem; }

.cart_totals h2,
#order_review_heading {
	font-size: 1.3rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--a-line);
}

.woocommerce-checkout #payment {
	background: var(--a-paper);
	border: 1px solid var(--a-line);
	border-radius: 0;
}

.woocommerce-checkout #payment .payment_methods li {
	background: none;
	border-bottom: 1px solid var(--a-line-soft);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--a-band);
	border-radius: 0;
	font-size: .875rem;
	color: var(--a-ink-soft);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* The block components WooCommerce 10+ renders cart and checkout with. */
.wc-block-components-button,
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-totals-coupon__input input {
	border-radius: 0 !important;
}

.wc-block-components-button:not(.is-link) {
	background: var(--a-rose);
	color: #fff;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--a-rose-deep);
	color: #fff;
}

.wc-block-components-product-name {
	font-family: var(--a-serif);
	font-size: 1.0625rem;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 600;
}

.wc-block-components-radio-control__option,
.wc-block-components-checkbox { font-size: .9375rem; }

/* Notices - square, hairline, tinted. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: var(--a-band);
	color: var(--a-ink);
	border: 1px solid var(--a-line);
	border-top: 2px solid var(--a-rose);
	border-radius: 0;
}

.woocommerce-error { border-top-color: #b3261e; }

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	padding: .55rem 1rem;
	font-size: .6875rem;
}

/* ---------------------------------------------------------------------
 * My account
 * ------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--a-line);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--a-line-soft);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: .75rem .2rem;
	font-size: .875rem;
	color: var(--a-ink-soft);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { color: var(--a-rose-deep); }

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--a-rose-deep);
	font-weight: 600;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: 1.3rem;
	padding-bottom: .7rem;
	margin-bottom: var(--a-gap-s);
	border-bottom: 1px solid var(--a-line);
}

/* ---------------------------------------------------------------------
 * About / Contact / FAQ pages
 * ------------------------------------------------------------------- */

.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol {
	max-width: 34em;
}

.page .entry-content > h2 {
	margin-top: var(--a-gap-m);
	font-size: 1.5rem;
}

.aroma-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--a-line-soft);
	border: 1px solid var(--a-line-soft);
	margin: 0 0 var(--a-gap-l);
}

.aroma-contact-card {
	padding: 1.3rem 1.4rem;
	background: var(--a-paper);
	border-radius: 0;
}

.aroma-contact-card h3 {
	margin: 0 0 .35rem;
	font-family: var(--a-font);
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--a-ink-faint);
}

.aroma-contact-card p { margin: 0; max-width: none; font-size: .9375rem; }

.aroma-contact-card .button { margin-top: .8rem; padding: .7rem 1.2rem; font-size: .75rem; }

.aroma-contact-form { max-width: 34em; }

.aroma-contact-form h2 {
	font-size: 1.3rem;
	padding-bottom: .7rem;
	margin-bottom: var(--a-gap-s);
	border-bottom: 1px solid var(--a-line);
}

.aroma-contact-form label {
	display: block;
	margin-bottom: .4rem;
	font-size: .8125rem;
	font-weight: 600;
}

.aroma-contact-form input,
.aroma-contact-form textarea { width: 100%; }

/* The honeypot. Off-screen rather than display:none - some bots skip
 * anything a browser would not render at all. */
.aroma-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aroma-note {
	padding: .8rem 1rem;
	border: 1px solid var(--a-line);
	background: var(--a-band);
	font-size: .9375rem;
}

.aroma-note-ok { border-color: #1d6b38; color: #14522a; background: #eef8f1; }
.aroma-note-error { border-color: #b3261e; color: #8c1d18; background: #fdeeed; }

.aroma-faq {
	max-width: 44rem;
	border-top: 1px solid var(--a-line);
}

.aroma-faq details { border-bottom: 1px solid var(--a-line); }

.aroma-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-gap-s);
	padding: 1.1rem 0;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.aroma-faq summary::-webkit-details-marker { display: none; }

.aroma-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	color: var(--a-ink-faint);
}

.aroma-faq details[open] summary::after { content: "\2013"; }

.aroma-faq-answer { padding: 0 0 1.2rem; }

.aroma-faq-answer p {
	margin: 0;
	max-width: 60ch;
	color: var(--a-ink-soft);
	font-size: .9375rem;
}

/* ---------------------------------------------------------------------
 * The platform's agent pages, styled to match.
 * ------------------------------------------------------------------- */

.ecc-agent-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1px;
	background: var(--a-line-soft);
	border: 1px solid var(--a-line-soft);
	margin: var(--a-gap-s) 0 var(--a-gap-m);
}

.ecc-agent-tiles > div { padding: 1.2rem 1.3rem; background: var(--a-paper); }

/* The number wears ink, not the brand color - color in a figure is for
 * identity and state, and a lone total has neither. */
.ecc-agent-tiles span {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--a-ink);
}

.ecc-agent-tiles em {
	display: block;
	margin-top: .3rem;
	font-style: normal;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
}

.ecc-agent-table { width: 100%; border-collapse: collapse; }

.ecc-agent-table th {
	padding: .6rem .8rem .6rem 0;
	text-align: left;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
	border-bottom: 1px solid var(--a-line);
}

.ecc-agent-table td {
	padding: .9rem .8rem .9rem 0;
	font-size: .9375rem;
	border-bottom: 1px solid var(--a-line-soft);
}

.ecc-agent-code strong { font-family: var(--a-serif); font-size: 1.1rem; }

.ecc-agent-form { max-width: 34em; }

.ecc-notice {
	padding: .8rem 1rem;
	border: 1px solid var(--a-line);
	background: var(--a-band);
	font-size: .9375rem;
}

.ecc-notice--ok { border-color: #1d6b38; color: #14522a; background: #eef8f1; }
.ecc-notice--error { border-color: #b3261e; color: #8c1d18; background: #fdeeed; }

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.site-footer {
	background: var(--a-paper);
	color: var(--a-ink-soft);
	border-top: 1px solid var(--a-line-soft);
}

.site-footer a:not(.button) { color: var(--a-ink-soft); }
.site-footer a:not(.button):hover { color: var(--a-rose-deep); }

.footer-widgets { border-bottom: 0; }

.site-footer .widget .widget-title,
.site-footer .widget .wp-block-heading {
	font-family: var(--a-font);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--a-ink-faint);
}

.aroma-footer-links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem 1.6rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.aroma-footer-links a {
	font-size: .875rem;
	color: var(--a-ink-soft);
	text-decoration: none;
}

.aroma-footer-links a:hover {
	color: var(--a-rose-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.aroma-footer-note {
	text-align: center;
	font-size: .8125rem;
	color: var(--a-ink-faint);
}

/* ---------------------------------------------------------------------
 * WhatsApp - square, like everything else on the page.
 * ------------------------------------------------------------------- */

.aroma-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	background: #25d366;
	color: var(--a-ink);
	box-shadow: 0 8px 22px rgba(36, 20, 25, .2);
	text-decoration: none;
}

.aroma-whatsapp:hover { color: var(--a-ink); }

.aroma-whatsapp svg { width: 1.6rem; height: 1.6rem; }

/* ---------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------- */

@media (max-width: 900px) {
	.aroma-hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: var(--a-gap-m);
	}

	.aroma-hero__art { justify-items: stretch; order: 2; }
	.aroma-hero__photo { width: 100%; }

	.aroma-split { grid-template-columns: 1fr; gap: var(--a-gap-m); }
	.aroma-split__art { order: -1; aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
	:root { --a-gap-l: 3rem; --a-gap-xl: 3.5rem; }

	.aroma-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: .4rem;
	}

	/* Storefront pins its handheld footer bar (account, search, cart) to the
	 * bottom of the viewport at these widths. Left at 20px the WhatsApp button
	 * sits in that strip: either it disappears behind the bar or it covers the
	 * cart link. Lift it clear of both. */
	.aroma-whatsapp {
		bottom: calc(4.75em + env(safe-area-inset-bottom, 0px));
	}

	.storefront-handheld-footer-bar { border-top: 1px solid var(--a-line); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;

		/* Without capping the count, a looping animation does not stop - it
		 * strobes at the frame rate. WooCommerce's checkout spinner loops for
		 * the length of every AJAX call, which is exactly the person who asked
		 * for less motion getting far more of it. */
		animation-iteration-count: 1 !important;

		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.aroma-whatsapp,
	.aroma-trust,
	.aroma-signup-band {
		display: none;
	}
}