/**
 * Halden: tokens and the look of the apothecary shop.
 *
 * Warm cream pages, charcoal text, dark editorial sections, a humanist
 * display face for headings and a neutral grotesque for everything else.
 * Sentence case throughout, generous space, hairline rules. Structure
 * shared with the theme family is in base.css and shop.css. Colours and
 * fonts are theme.json presets, changed in Theme Options.
 */

/* Tokens
   ------------------------------------------------------------------------- */

body {
	--wide: 1600px;
	--gutter: clamp(1.25rem, 3.6vw, 3.75rem);
	--header-height: 72px;
	--transition: 300ms ease;
	--font-heading: var(--wp--preset--font-family--heading);
	--font-body: var(--wp--preset--font-family--body);
	--c-accent: var(--wp--preset--color--contrast);
	--c-accent-dark: #000;
	--c-dark-bg: var(--wp--preset--color--dark);
	--eyebrow-color: var(--wp--preset--color--contrast);
	--eyebrow-size: 0.8125rem;
	--eyebrow-track: 0;
	--button-size: 0.875rem;
	--button-track: 0.01em;
	--button-transform: none;
	--button-pad: 1.15rem 1.75rem;
	--button-bg: var(--wp--preset--color--contrast);
	--button-color: var(--wp--preset--color--base);
	--button-hover-bg: #000;
	--button-hover-color: var(--wp--preset--color--base);
	--heading-weight: 400;
	--heading-line: 1.2;
	--heading-track: 0;
	--heading-1: clamp(2.25rem, 4vw, 3.5rem);
	--heading-2: clamp(1.75rem, 2.8vw, 2.5rem);
	--heading-3: clamp(1.125rem, 1.4vw, 1.375rem);
	--heading-hero: clamp(2.5rem, 4.8vw, 4.25rem);
	--field-border: #9f9e94;

	--shop-media-bg: var(--wp--preset--color--base-alt);
	--shop-media-ratio: 4 / 5;
	--shop-title-font: var(--wp--preset--font-family--body);
	--shop-title-size: 0.9375rem;
	--shop-title-transform: none;
	--shop-title-track: 0;
	--shop-gap: 1.5rem;
	--shop-row-gap: 3.5rem;
	--shop-price-size: 0.875rem;

	font-size: var(--wp--preset--font-size--medium);
}

h1,
h2,
h3,
h4,
.halden-title__heading {
	font-weight: var(--heading-weight, 400);
}

.halden-title__heading em {
	font-style: normal;
}

.halden-title__eyebrow {
	text-transform: none;
}

.halden-title__text {
	max-width: 34rem;
	color: var(--c-text);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.halden-title.is-small .halden-title__heading {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0;
}

.halden-title.is-hero .halden-title__text {
	font-family: var(--font-body);
	font-size: 1rem;
}

/* Text links read as "Explore the story" with an arrow. */

.is-link .elementor-button .elementor-button-text::after,
.button.is-link::after {
	content: " \2192";
}

.is-link .elementor-button,
.button.is-link {
	padding: 0;
	font-size: 0.9375rem;
	letter-spacing: 0;
}

.is-link .elementor-button::after {
	display: none;
}

.is-link .elementor-button:hover {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Header
   ------------------------------------------------------------------------- */

.announcement {
	padding-block: 0.7rem;
	background: var(--wp--preset--color--stone);
	color: var(--c-text);
	font-size: 0.8125rem;
	letter-spacing: 0;
}

.site-header {
	background: var(--c-bg);
}

.site-header__inner {
	max-width: none;
	gap: 2rem;
}

.site-header__start {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	min-width: 0;
}

.site-header__brand {
	flex: 0 0 auto;
}

.site-logo__text {
	font-family: var(--font-heading);
	font-size: 1.875rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

.site-nav__menu {
	justify-content: flex-start;
	gap: 0.5rem 1.6rem;
}

.site-nav__menu a,
.site-header .header-link,
.menu-panel__close {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.site-nav__menu > li > a::after {
	bottom: 0.15rem;
}

.site-nav__menu .sub-menu {
	background: var(--c-bg);
}

.site-header__actions {
	gap: 1.5rem;
}

.site-header .header-link {
	padding: 0;
}

.header-search {
	display: flex;
	align-items: center;
}

.header-search summary {
	cursor: pointer;
}

.header-search__panel {
	right: 0;
	left: auto;
	background: var(--c-bg);
}

.header-cart__count,
.header-cart__count[data-count="0"] {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}

.header-cart__count::before {
	content: "(";
}

.header-cart__count::after {
	content: ")";
}

/* Centred header: wordmark in the middle, menu on its own line underneath. */

.site-header--centred .site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		"start brand actions"
		"nav nav nav";
	align-items: center;
	column-gap: 2rem;
	row-gap: 0;
}

.site-header--centred .site-header__start {
	grid-area: start;
	gap: 1.5rem;
}

.site-header--centred .site-header__brand {
	grid-area: brand;
	justify-content: center;
}

.site-header--centred .site-logo__text {
	font-size: 2.375rem;
	letter-spacing: 0.02em;
}

.site-header--centred .site-header__actions {
	grid-area: actions;
	justify-content: flex-end;
	margin-left: 0;
}

.site-header--centred .site-nav {
	grid-area: nav;
	display: flex;
	justify-content: center;
	padding-bottom: 1.1rem;
}

.site-header--centred .site-nav__menu {
	justify-content: center;
	gap: 0.5rem 2.25rem;
}

.site-header--centred .header-search__panel {
	right: auto;
	left: 0;
}

/* The menu line adds to the sticky header, so sticky product details sit lower. */
.has-sticky-header:has(.site-header--centred) {
	--header-stack: calc(var(--header-height) + 2.75rem);
}

.has-sticky-header:has(.site-header--centred) div.product .summary {
	top: calc(var(--header-stack) + 2rem);
}

@media (max-width: 1180px) {
	.site-nav__menu {
		gap: 0.5rem 1.1rem;
	}

	.site-header__button {
		display: none;
	}
}

@media (max-width: 1024px) {
	.site-header__start {
		gap: 1rem;
	}

	.site-header--centred .site-nav {
		display: none;
	}

	.site-header--centred .site-logo__text {
		font-size: 1.75rem;
	}

	.has-sticky-header:has(.site-header--centred) {
		--header-stack: var(--header-height);
	}

	.header-link--account,
	.header-search {
		display: none;
	}

	.site-logo__text {
		font-size: 1.5rem;
	}
}

.menu-panel__menu a {
	font-family: var(--font-heading);
}

/* Sections
   ------------------------------------------------------------------------- */

.halden-hero .halden-title__heading {
	max-width: 11em;
}

.halden-section--dark,
.halden-section--dark .halden-title__heading,
.halden-section--dark .halden-title__text,
.halden-section--dark .halden-title__eyebrow,
.halden-section--dark .elementor-widget-text-editor {
	color: var(--wp--preset--color--base);
}

.halden-section--dark .halden-title__text {
	opacity: 1;
}

.halden-section--dark .elementor-button {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}

.halden-section--dark .is-link .elementor-button,
.halden-section--dark .is-outline .elementor-button {
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--base);
}

.halden-split .elementor-widget-image img {
	width: 100%;
}

.halden-intro-column .halden-title__heading {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
}

.halden-tile .elementor-widget-image {
	overflow: hidden;
	background: var(--shop-media-bg);
}

.halden-tile .elementor-widget-image img {
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.halden-tile:hover .elementor-widget-image img {
	transform: scale(1.03);
}

.halden-tile .is-link .elementor-button {
	font-size: 0.9375rem;
}

.halden-quote p {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	line-height: 1.35;
}

.halden-quote cite {
	display: block;
	margin-top: 1.5rem;
	color: var(--c-soft);
	font-size: 0.875rem;
	font-style: normal;
}

.halden-feature {
	padding-top: 1.25rem;
	border-top-color: var(--wp--preset--color--line);
}

.halden-feature__title.elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
}

.halden-feature p {
	font-size: 0.9375rem;
}

.halden-prose h2 {
	font-size: clamp(1.25rem, 2vw, 1.625rem);
}

.halden-form-panel.e-con {
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--wp--preset--color--base-alt);
}

.halden-faq__question {
	font-family: var(--font-body);
	font-size: 1rem;
}

.halden-faq__question::after {
	color: var(--c-text);
}

.halden-prices__name {
	font-family: var(--font-body);
	font-size: 1rem;
}

.halden-stores .halden-contact {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Product cards
   ------------------------------------------------------------------------- */

.product-card__badge {
	color: var(--c-soft);
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 500;
}

.product-card__excerpt {
	font-size: 0.875rem;
}

.woocommerce ul.products li.product .price {
	font-weight: 400;
}

.woocommerce-products-header__title {
	font-family: var(--font-heading);
}

.shop-toolbar {
	border-color: var(--wp--preset--color--line);
}

.woocommerce-ordering select {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.875rem;
}

/* Product page */

.woocommerce div.product .product_title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3vw, 2.75rem);
}

.woocommerce div.product .summary .price {
	font-size: 1rem;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	padding-block: 1.25rem;
	font-size: 0.9375rem;
}

.product-details {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.product-details__row {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.875rem;
}

.product-details dt {
	font-weight: 500;
}

.product-details dd {
	margin: 0;
	color: var(--c-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 0.875rem;
	letter-spacing: 0;
	text-transform: none;
}

.product-perks {
	border-top: 0;
	padding-top: 0;
}

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

.site-footer {
	padding: clamp(4rem, 8vw, 6.5rem) 0 1.5rem;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
}

.site-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
	gap: 3rem;
	padding-bottom: 3.5rem;
}

.site-footer__heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.site-footer__text {
	max-width: 28rem;
	margin: 0 0 1.5rem;
	color: #c9c8bb;
}

.site-footer__title {
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.site-footer__menu li,
.site-footer .halden-social li {
	margin-bottom: 0.55rem;
}

.site-footer .halden-social {
	gap: 0;
}

.site-footer__statement {
	max-width: 46rem;
	margin: 0 0 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid #4a4a46;
	color: #c9c8bb;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	color: #a9a89c;
	font-size: 0.8125rem;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer .halden-form {
	--field-border: #a9a89c;
}

.site-footer .halden-form input[type="email"] {
	color: var(--wp--preset--color--base);
}

.site-footer .halden-form ::placeholder {
	color: #a9a89c;
}

.site-footer .halden-form .wpcf7-submit {
	border-color: var(--wp--preset--color--base);
	background: transparent;
	color: var(--wp--preset--color--base);
}

.site-footer .halden-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}

.site-footer .halden-form .wpcf7-acceptance label {
	color: #c9c8bb;
	font-size: 0.8125rem;
}

@media (max-width: 1024px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__about {
		grid-column: 1 / -1;
	}
}

/* Size buttons (assets/js/sizes.js) */

.woocommerce div.product form.cart table.variations select.halden-size-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.halden-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.6rem 0 0.5rem;
	padding: 0;
	list-style: none;
}

.halden-sizes button {
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

.halden-sizes button[aria-pressed="true"] {
	border-color: var(--c-text);
}

.halden-sizes button:disabled {
	color: var(--c-soft);
	text-decoration: line-through;
	cursor: not-allowed;
}

.woocommerce div.product form.cart .reset_variations {
	display: none !important;
}

.halden-cover.halden-hero,
.halden-hero .halden-title__heading,
.halden-hero .halden-title__text,
.halden-hero .halden-title__eyebrow {
	color: var(--c-text);
}

.halden-quote p {
	font-style: normal;
}

.halden-quote cite {
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce div.product form.cart table.variations th label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce div.product .product_meta .sku_wrapper {
	display: none;
}

/* Product page (inc/product-page.php)
   ------------------------------------------------------------------------- */

/* Layouts that show every photo: editorial, grid and stacked. */

.halden-gallery-open div.product .product-top {
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.halden-gallery-open div.product div.images .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	background: none;
}

.halden-gallery-open div.product .woocommerce-product-gallery__image {
	background: var(--shop-media-bg);
}

.halden-gallery-open div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.halden-gallery-open div.product .summary {
	padding-top: 1rem;
}

/* Editorial: first photo across both columns, then pairs; an unpaired last photo spans too. */
.halden-gallery-editorial div.product .woocommerce-product-gallery__image:first-child,
.halden-gallery-editorial div.product .woocommerce-product-gallery__image:last-child:nth-child(even) {
	grid-column: 1 / -1;
}

.halden-gallery-editorial div.product .woocommerce-product-gallery__image:first-child img,
.halden-gallery-editorial div.product .woocommerce-product-gallery__image:last-child:nth-child(even) img {
	aspect-ratio: auto;
	max-height: 92vh;
}

/* Grid: every photo in pairs; an unpaired last photo spans both columns. */
.halden-gallery-grid div.product .woocommerce-product-gallery__image:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Stacked: one photo under another, each at its own proportions. */
.halden-gallery-stacked div.product div.images .woocommerce-product-gallery__wrapper {
	grid-template-columns: minmax(0, 1fr);
}

.halden-gallery-stacked div.product .woocommerce-product-gallery__image img {
	aspect-ratio: auto;
}

/* Slider with thumbnails on the left. */
@media (min-width: 861px) {
	.halden-gallery-slider-side div.product div.images {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 0.75rem;
		align-items: start;
	}

	.halden-gallery-slider-side div.product div.images .flex-viewport,
	.halden-gallery-slider-side div.product div.images > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
	}

	.halden-gallery-slider-side div.product div.images .flex-control-thumbs {
		display: flex;
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		gap: 0.5rem;
		margin: 0;
	}
}

/* Story section: a wide photo beside the description, edge to edge.
   overflow-x: clip hides the scrollbar's width without breaking the sticky details. */

.halden-pdp-story .site-content {
	overflow-x: clip;
}

.product-story {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	width: 100vw;
	margin: clamp(3rem, 7vw, 6rem) calc(50% - 50vw) 0;
	background: var(--wp--preset--color--stone);
}

.product-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 90vh;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.product-story__text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 34rem;
	padding: clamp(2.5rem, 6vw, 6rem);
}

.product-story__title {
	margin: 0;
	font-size: var(--heading-2);
	line-height: 1.1;
}

.product-story__body {
	color: var(--c-text);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.product-story__body p {
	margin: 0 0 1em;
}

.product-story__body p:last-child {
	margin-bottom: 0;
}

.single-product div.product .upsells,
.single-product div.product .related {
	margin-top: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 860px) {
	.halden-gallery-open div.product .product-top {
		grid-template-columns: minmax(0, 1fr);
	}

	/* On phones the photos become a swipeable row, each one nearly full width. */
	.halden-gallery-open div.product div.images {
		margin-inline: calc(-1 * var(--gutter));
	}

	.halden-gallery-open div.product div.images .woocommerce-product-gallery__wrapper {
		display: flex;
		gap: 0.375rem;
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.halden-gallery-open div.product div.images .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.halden-gallery-open div.product .woocommerce-product-gallery__image {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}

	.halden-gallery-open div.product .woocommerce-product-gallery__image:only-child {
		flex-basis: 100%;
	}

	.halden-gallery-open div.product .woocommerce-product-gallery__image img,
	.halden-gallery-editorial div.product .woocommerce-product-gallery__image:first-child img,
	.halden-gallery-editorial div.product .woocommerce-product-gallery__image:last-child:nth-child(even) img {
		aspect-ratio: 4 / 5;
		max-height: none;
	}

	.product-story {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-story__text {
		padding: 2.5rem var(--gutter) 3rem;
	}
}

/* Reviews panel (story section on) */

.product-reviews {
	grid-column: 1 / -1;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-block: 1px solid var(--c-line);
}

.product-reviews__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.4rem 0;
	cursor: pointer;
	font-size: 1rem;
	list-style: none;
}

.product-reviews__summary::-webkit-details-marker {
	display: none;
}

.product-reviews__summary::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
}

.product-reviews[open] .product-reviews__summary::after {
	content: "\2212";
}

.product-reviews__body {
	max-width: 48rem;
	padding-bottom: 2.5rem;
}

/* Film grain (inc/grain.php)
   ------------------------------------------------------------------------- */

/* On photos: every place the theme shows a photograph. */
.has-grain--photos .halden-cover,
.has-grain--photos .elementor-widget-image .elementor-widget-container,
.has-grain--photos .product-card__media,
.has-grain--photos .woocommerce-product-gallery__image,
.has-grain--photos .product-story__media,
.has-grain--photos .post-card__media,
.has-grain--photos .entry-image {
	position: relative;
}

.has-grain--photos .halden-cover::after,
.has-grain--photos .elementor-widget-image .elementor-widget-container::after,
.has-grain--photos .product-card__media::after,
.has-grain--photos .woocommerce-product-gallery__image::after,
.has-grain--photos .product-story__media::after,
.has-grain--photos .post-card__media::after,
.has-grain--photos .entry-image::after,
.has-grain--page::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--grain-image);
	background-size: 256px 256px;
	mix-blend-mode: overlay;
	opacity: var(--grain-opacity, 0.35);
	pointer-events: none;
}

/* Over the whole page: one fixed layer, so it costs the same on any page. */
.has-grain--page::after {
	position: fixed;
	z-index: 9999;
}

@media print {
	.has-grain::after,
	.has-grain *::after {
		background-image: none;
	}
}