/* Journal templates. Header, footer, and homepage chrome come from veylo-base. */

/* Solid promo bar: drop parent linear-gradient + radial ::before overlay. */
.site-banner {
	background: var(--banner-gradient);
	background-image: none;
	/* Parent uses --color-on-primary (white) on message parts. */
	--color-on-primary: var(--banner-text);
	color: var(--banner-text);
}

.site-banner::before,
.site-banner::after {
	content: none;
	display: none;
	background: none;
	background-image: none;
}

/* Persistent promo: min-height + wrapping type, matching Sephora’s banner. */
.site-banner,
.site-banner .veylo-br,
.site-banner__rotator-host .veylo-br {
	height: auto;
	min-height: var(--banner-height-mobile);
	max-height: none;
	overflow: visible;
}

.site-banner__inner,
.site-banner__ssr,
.site-banner__rotator-host {
	height: auto;
	min-height: inherit;
	max-height: none;
	overflow: visible;
}

.site-banner .veylo-br__slide {
	flex-wrap: wrap;
	align-items: center;
	height: auto;
	max-height: none;
	padding: 4px 16px;
}

.site-banner .veylo-br,
.site-banner__rotator-host .veylo-br,
.site-banner .veylo-br__message,
.site-banner__ssr .veylo-br__message,
.site-banner__rotator-host .veylo-br__message,
.site-banner .veylo-br__part--body,
.site-banner .veylo-br__part--strong,
.site-banner__ssr .veylo-br__part--body,
.site-banner__ssr .veylo-br__part--strong,
.site-banner__rotator-host .veylo-br__part--body,
.site-banner__rotator-host .veylo-br__part--strong {
	color: var(--banner-text);
}

.site-banner .veylo-br__message {
	display: block;
	flex-wrap: unset;
	white-space: normal;
	max-width: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: normal;
}

.site-banner .veylo-br__part {
	display: inline;
	white-space: normal;
}

.site-banner .veylo-br__part + .veylo-br__part {
	margin-inline-start: 0;
}

.site-banner .veylo-br__part + .veylo-br__part::before {
	content: ' ';
}

.site-banner .veylo-br__part--body {
	font-weight: 400;
}

.site-banner .veylo-br__part--strong {
	font-weight: 700;
}

@media (min-width: 768px) {
	.site-banner,
	.site-banner .veylo-br,
	.site-banner__rotator-host .veylo-br {
		min-height: var(--banner-height);
	}

	.site-banner .veylo-br__message {
		font-size: 14px;
		line-height: 21px;
	}
}

.site-header__inner {
	/* Bar height + brand/nav padding. Action hit targets must leave ≥ icon
	   size after padding (Sephora: 48×62, pad 16×12; Vailo icons 28px). */
	--header-pad-block: 16px;
	--header-action-width: 36px;
	--header-action-height: 48px;
	--header-action-pad-block: 10px;
	--header-action-pad-inline: 4px;
	--header-action-icon: 28px;
	height: var(--header-height-mobile);
	min-height: var(--header-height-mobile);
	margin-block: 0;
	box-sizing: border-box;
	padding-block: 0;
	align-items: stretch;
}

.site-header__actions,
.site-header__actions-search,
.site-header__actions-cluster,
.site-header__actions-tools,
.site-header__actions-ssr,
.site-header__actions-islands,
.site-header__actions-mini-cart,
.site-header__drawer {
	display: flex;
	align-items: center;
	min-height: 0;
	height: 100%;
	align-self: stretch;
}

.site-header__brand {
	box-sizing: border-box;
	display: block;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	height: auto;
	align-self: center;
	padding-block: var(--header-pad-block);
	line-height: 0;
}

.site-header__drawer {
	flex: 0 0 auto;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.site-header__drawer {
		display: none;
	}
}

.site-header__actions {
	/* Preferred/max search width; field shrinks when the bar is tight. */
	--header-search-width: 148px;
	--header-search-min-width: 96px;
	flex-shrink: 1;
	min-width: 0;
	max-width: 100%;
	/* Pull cluster so the menu toggle sits flush with the content edge. */
	margin-right: calc(-1 * var(--header-action-pad-inline));
}

.site-header__actions-search,
.site-header__actions-tools {
	position: relative;
}

.site-header__actions-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.site-header__actions-cluster {
	flex: 0 0 auto;
	flex-shrink: 0;
	gap: 0;
}

.site-header__actions-tools {
	flex: 0 0 auto;
}

.site-header__actions-islands,
.site-header__actions-ssr {
	gap: var(--space-4);
}

.site-header__actions-ssr--tools,
.site-header__actions-islands--tools {
	gap: 0;
}

.site-header__actions-mini-cart {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
}

.site-header__inner .site-header__action--mini-cart,
.site-header__inner .site-header__mini-cart {
	width: auto;
	min-width: 0;
	padding: 0;
}

.site-header__actions--mini-cart .site-header__actions-ssr,
.site-header__actions--mini-cart .site-header__actions-islands {
	padding-right: 0;
}

@media (max-width: 1023px) {
	.site-header__inner {
		gap: var(--space-6);
	}

	.site-header__actions {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		justify-content: flex-start;
		gap: 0;
	}

	.site-header__actions-search,
	.site-header__actions-islands--search,
	.site-header__actions-ssr--search {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		max-width: 100%;
		justify-content: flex-start;
	}

	.site-header__actions-search {
		margin-right: var(--space-3);
	}

	.site-header__actions-islands,
	.site-header__actions-ssr {
		gap: var(--space-2);
	}

	.site-header__actions-ssr--tools,
	.site-header__actions-islands--tools {
		gap: 0;
	}

	html.veylo-header-enhanced .site-header__actions-islands {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
	}

	.site-header__inner .site-header__island-host--search {
		flex: 1 1 auto;
		width: auto;
		min-width: var(--header-search-min-width);
		max-width: none;
	}

	.site-header__inner .site-header__island-host--account {
		flex: 0 0 auto;
	}
}

.site-header__logo-image {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--header-height-mobile) - 2 * var(--header-pad-block));
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.site-header__menu {
	height: 100%;
	align-items: center;
}

.site-header__menu li {
	display: flex;
	align-items: center;
	margin: 0;
	height: 100%;
}

.site-header__menu a {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	box-sizing: border-box;
	height: var(--header-action-height);
	max-height: var(--header-action-height);
	padding-block: calc(var(--header-action-pad-block) + 4px) calc(var(--header-action-pad-block) - 4px);
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
}

/* Keep full hit target; sit the underline under the label, not the box edge. */
.site-header__menu a::after {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	flex-shrink: 0;
	margin-top: 4px;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
	color: var(--color-text);
}

.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a,
.site-header__menu a.is-active {
	color: var(--color-text);
}

.site-header__menu a:hover::after,
.site-header__menu a:focus-visible::after {
	background: var(--color-primary);
}

.site-header__inner .site-header__action,
.site-header__inner .site-header__menu-toggle,
.site-header__inner .veylo-mini-cart__button,
.site-header__inner .veylo-acct,
.site-header__inner .veylo-cart {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--header-action-width);
	min-width: var(--header-action-width);
	max-width: var(--header-action-width);
	height: var(--header-action-height);
	min-height: var(--header-action-height);
	max-height: var(--header-action-height);
	padding: var(--header-action-pad-block) var(--header-action-pad-inline);
}

.site-header__inner .site-header__menu-toggle {
	border: none;
	background: transparent;
	color: var(--color-text);
}

.site-header__inner .site-header__menu-toggle:hover {
	border: none;
	background: transparent;
	color: var(--color-primary);
}

.site-header__inner .site-header__menu-toggle[aria-expanded="true"] {
	border: none;
	background: transparent;
	color: var(--color-primary);
}

.site-header__inner .site-header__island-host {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	max-height: none;
	padding: 0;
}

.site-header__inner .site-header__island-host--search {
	flex: 1 1 auto;
	justify-content: stretch;
	min-width: var(--header-search-min-width);
	width: auto;
}

.site-header__inner .site-header__action svg,
.site-header__inner .site-header__action .material-symbols-outlined,
.site-header__inner .site-header__menu-toggle svg,
.site-header__inner .veylo-mini-cart__button svg,
.site-header__inner .veylo-mini-cart__button .material-symbols-outlined,
.site-header__inner .veylo-acct svg,
.site-header__inner .veylo-acct .material-symbols-outlined,
.site-header__inner .veylo-cart svg,
.site-header__inner .veylo-cart .material-symbols-outlined {
	display: block;
	flex-shrink: 0;
	width: var(--header-action-icon);
	height: var(--header-action-icon);
	min-width: var(--header-action-icon);
	min-height: var(--header-action-icon);
	font-size: var(--header-action-icon);
	line-height: 1;
}

.site-header__inner .veylo-acct:hover,
.site-header__inner .veylo-cart:hover,
.site-header__inner .veylo-mini-cart__button:hover {
	background: transparent;
	color: var(--color-primary);
}

/* Sephora-style pill search (replaces icon trigger). */
.vailo-search {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0;
	background: #f6f6f8;
	border: 1px solid var(--color-text);
	border-radius: 9999px;
	color: var(--color-text);
}

.vailo-search__label {
	position: absolute;
	left: 12px;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--color-text);
}

.vailo-search__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vailo-search__icon {
	display: block;
	width: 16px;
	height: 16px;
}

.vailo-search__input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 12px 0 34px;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--color-text);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.vailo-search__input::placeholder {
	color: var(--color-text-secondary);
	opacity: 1;
}

.vailo-search__input::-webkit-search-decoration,
.vailo-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.vailo-search:focus-within {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

@media (min-width: 768px) {
	.site-header__inner {
		--header-pad-block: 28px;
		--header-action-width: 52px;
		--header-action-height: 62px;
		--header-action-pad-block: 17px;
		--header-action-pad-inline: 12px;
		--header-action-icon: 28px;
		height: var(--header-height);
		min-height: var(--header-height);
		margin-block: 0;
		padding-block: 0;
	}

	.site-header__actions {
		--header-search-width: 180px;
	}

	.site-header__logo-image {
		max-height: calc(var(--header-height) - 2 * var(--header-pad-block));
	}
}

@media (min-width: 1024px) {
	.site-header__inner {
		/* Brand | nav (left) | actions — not centered equal tracks. */
		grid-template-columns: auto auto minmax(0, 1fr);
		column-gap: 0;
	}

	.site-header__nav {
		display: flex;
		align-items: center;
		align-self: stretch;
		justify-self: start;
		min-height: 0;
		height: 100%;
		margin-left: 64px;
	}

	.site-header__menu {
		justify-content: flex-start;
	}

	.site-header__actions {
		--header-search-width: 280px;
		min-width: 0;
		width: 100%;
		justify-self: stretch;
		justify-content: flex-end;
		gap: var(--space-2);
	}

	.site-header__actions-search {
		flex: 0 1 var(--header-search-width);
		width: auto;
		max-width: var(--header-search-width);
		margin-left: auto;
	}

	.site-header__actions-islands--search,
	.site-header__actions-ssr--search {
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

	.site-header__actions-islands--tools,
	.site-header__actions-ssr--tools {
		min-width: 0;
		width: auto;
		max-width: none;
		margin-left: 0;
	}

	.site-header__inner .site-header__island-host--search {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}
}

@media (min-width: 1024px) {
	.site-header__actions--mini-cart .site-header__actions-ssr,
	.site-header__actions--mini-cart .site-header__actions-islands {
		padding-right: 0;
	}
}

/* Homepage hero: Sephora-style promo card slider. */
.site-main--home .home-hero-band {
	overflow: visible;
}

.site-main--home .home-hero-band .home-hero__bg {
	display: none;
}

.site-main--home .home-shell--hero {
	max-width: none;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
	padding-inline: 0;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.site-main--home .home-shell--hero {
		padding-top: 0;
		padding-inline: 0;
	}
}

/* Home sections: no top padding on first child; tighten the rest. */
.site-main--home .home-shell > *:first-child {
	padding-top: 0;
	padding-bottom: var(--space-12);
}

.site-main--home .home-shell > *:not(:first-child) {
	padding-top: 0;
	padding-bottom: var(--space-12);
}

/* Featured products / Top sellers / Deals: drop parent first-section top pad / pull-up. */
.site-main--home .home-shell > .home-top-sellers:first-child,
.site-main--home .home-shell > .home-featured-products:first-child,
.site-main--home .home-shell > .home-deals:first-child {
	margin-top: 0;
	padding-top: 0;
}

.site-main--home .home-top-sellers__header .home-top-sellers__eyebrow,
.site-main--home .home-featured-products__header .home-featured-products__eyebrow {
	display: none;
}

.site-main--home .home-top-sellers__header,
.site-main--home .home-featured-products__header,
.site-main--home .home-deals__header {
	margin-bottom: var(--space-4);
}

.site-main--home .home-top-sellers__title,
.site-main--home .home-featured-products__title,
.site-main--home .home-deals__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0;
	color: #000;
}

/* Plain text link instead of accent button; premium arrow via ::after. */
.site-main--home .home-top-sellers__shop-all,
.site-main--home .home-featured-products__shop-all {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-decoration: none;
}

.site-main--home .home-top-sellers__shop-all::after,
.site-main--home .home-featured-products__shop-all::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 1.15em;
	height: 0.55em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none'%3E%3Cpath d='M1 5h18.5M15.2 1.6 19.5 5l-4.3 3.4' stroke='%23000' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none'%3E%3Cpath d='M1 5h18.5M15.2 1.6 19.5 5l-4.3 3.4' stroke='%23000' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-main--home .home-top-sellers__shop-all:hover,
.site-main--home .home-featured-products__shop-all:hover {
	background: transparent;
	box-shadow: none;
	color: var(--color-accent-fill);
	text-decoration: none;
}

.site-main--home .home-top-sellers__shop-all:hover::after,
.site-main--home .home-featured-products__shop-all:hover::after {
	transform: translateX(0.2em);
}

@media (min-width: 768px) {
	.site-main--home .home-top-sellers__header,
	.site-main--home .home-featured-products__header,
	.site-main--home .home-deals__header {
		margin-bottom: var(--space-4);
	}

	.site-main--home .home-top-sellers__title,
	.site-main--home .home-featured-products__title,
	.site-main--home .home-deals__title {
		font-size: 20px;
	}

	.site-main--home .home-top-sellers__shop-all,
	.site-main--home .home-featured-products__shop-all {
		min-height: 0;
		padding: 0;
		font-size: 13px;
	}

	.site-main--home .home-shell > *:first-child {
		padding-top: 0;
		padding-bottom: var(--space-20);
	}
}

/* Show full product art instead of cropping with cover. */
.home-featured-product-card__media img,
.home-featured-product-card__img {
	object-fit: contain;
}

/*
 * Standard product card widths from Ulta RecommendationProductRail:
 * mobile 390/1.5-up = 244px, tablet 768/3-up = 229px, desktop 1360/4-up = 328px.
 */
:root {
	--vailo-product-card-width: 244px;
	--vailo-product-card-gap: 16px;
}

@media (min-width: 768px) {
	:root {
		--vailo-product-card-width: 229px;
	}
}

@media (min-width: 1024px) {
	:root {
		--vailo-product-card-width: 328px;
	}
}

.veylo-product-card--standard {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vailo-product-card-width);
	border: none;
	border-radius: 0;
	overflow: visible;
	/* Ulta ProductCard imgGap/contentGap --sm */
	gap: var(--space-2);
}

@media (hover: hover) {
	.veylo-product-card--standard:hover {
		border-color: transparent;
		box-shadow: none;
	}
}

.veylo-product-card--standard .home-featured-product-card__media-link:focus-visible {
	border-radius: var(--radius-md);
}

/*
 * Image well — Ulta ProductCardHeader__imageContainer + Image top inset:
 * 8px sides/bottom, 8+24 top, muted surface, square photo inside.
 * Size labels sit under the image (Ulta ProductCardHeader__variant).
 */
.veylo-product-card--standard .home-featured-product-card__media {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
	aspect-ratio: auto;
	padding: var(--space-2);
	padding-top: calc(var(--space-2) + var(--space-6));
	border-radius: var(--radius-md);
	background: var(--color-background-muted);
}

/*
 * Ulta ProductCardHeader__badge — left-aligned Sale tag in the reserved
 * header strip above the image (not a corner overlay pill).
 */
.veylo-product-card--standard .home-featured-product-card__badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	right: auto;
	z-index: 1;
	display: block;
	max-width: calc(100% - (var(--space-2) * 2));
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: 0;
	text-transform: none;
	border-radius: 0;
	background: transparent;
	color: var(--color-accent-fill);
	box-shadow: none;
}

.veylo-product-card--standard .home-featured-product-card__media img,
.veylo-product-card--standard .home-featured-product-card__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--radius-md);
}

.veylo-product-card--standard .home-featured-product-card__sizes {
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
	font-family: var(--font-body);
	/* 14px floor — meets common WCAG AA readable UI text size. */
	font-size: var(--text-md);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-snug);
	letter-spacing: 0;
	color: var(--color-text-secondary);
}

/* Content — Ulta ProductCard--content: 4px 8px 0, gap 8px */
.veylo-product-card--standard .home-featured-product-card__body {
	padding: var(--space-1) var(--space-2) 0;
	gap: var(--space-2);
}

.veylo-product-card--standard .home-featured-product-card__actions {
	gap: var(--space-2);
}

.veylo-product-card--standard .home-featured-product-card__category {
	margin: 0 0 var(--space-1);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.veylo-product-card--standard .home-featured-product-card__title {
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-base);
	letter-spacing: 0;
	color: #000;
}

@media (min-width: 768px) {
	.veylo-product-card--standard .home-featured-product-card__title {
		font-size: var(--text-base);
	}
}

.veylo-product-card--standard .home-featured-product-card__title-link:hover {
	color: var(--color-text-secondary);
}

.veylo-product-card--standard .home-featured-product-card__price {
	font-size: var(--text-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-accent-fill);
}

.veylo-product-card--standard .home-featured-product-card__price del,
.veylo-product-card--standard .home-featured-product-card__price del .woocommerce-Price-amount,
.veylo-product-card--standard .home-featured-product-card__price del .amount,
.veylo-product-card--standard .home-featured-product-card__price del bdi {
	/* One step under main price (--text-md); still ≥ AA --text-sm floor. */
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.veylo-product-card--standard .home-featured-product-card__actions {
	align-items: flex-start;
}

.veylo-product-card--standard.home-featured-product-card .add_to_cart_button,
.veylo-product-card--standard.home-featured-product-card .single_add_to_cart_button {
	width: fit-content;
	max-width: 100%;
	min-height: 0;
	padding: 0.6875rem 1.5rem;
	border-radius: var(--radius-full);
}

/*
 * Defend Vailo standard card title/price inside WooCommerce loops
 * (parent featured-product-card.css uses highly specific shop selectors).
 */
body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__title,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__title,
body.woocommerce ul.products li.product .veylo-product-card--standard .home-featured-product-card__title,
body.woocommerce-page ul.products li.product .veylo-product-card--standard .home-featured-product-card__title {
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-base);
	letter-spacing: 0;
	color: #000;
}

@media (min-width: 768px) {
	body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__title,
	body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__title,
	body.woocommerce ul.products li.product .veylo-product-card--standard .home-featured-product-card__title,
	body.woocommerce-page ul.products li.product .veylo-product-card--standard .home-featured-product-card__title {
		font-size: var(--text-base);
	}
}

body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__title-link:hover,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__title-link:hover {
	color: var(--color-text-secondary);
}

body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price {
	font-size: var(--text-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-accent-fill);
}

body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del,
body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del .woocommerce-Price-amount,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del .woocommerce-Price-amount,
body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del .amount,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del .amount,
body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del bdi,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard .home-featured-product-card__price del bdi {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard.home-featured-product-card .add_to_cart_button.button,
body.woocommerce :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard.home-featured-product-card .single_add_to_cart_button.button,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard.home-featured-product-card .add_to_cart_button.button,
body.woocommerce-page :is(.veylo-shop, .cross-sells.veylo-shop) .veylo-product-card--standard.home-featured-product-card .single_add_to_cart_button.button,
body.woocommerce ul.products li.product .veylo-product-card--standard.home-featured-product-card .add_to_cart_button.button,
body.woocommerce-page ul.products li.product .veylo-product-card--standard.home-featured-product-card .add_to_cart_button.button {
	width: fit-content;
	max-width: 100%;
	min-height: 0;
	padding: 0.6875rem 1.5rem;
	border-radius: var(--radius-full);
}

.site-main--home .home-deals .veylo-carousel,
.site-main--home .home-top-sellers .veylo-carousel,
.site-main--home .home-featured-products .veylo-carousel {
	--veylo-carousel-gap: var(--vailo-product-card-gap);
}

.site-main--home .home-deals .veylo-carousel__slide,
.site-main--home .home-top-sellers .veylo-carousel__slide,
.site-main--home .home-featured-products .veylo-carousel__slide {
	flex: 0 0 var(--vailo-product-card-width);
	width: var(--vailo-product-card-width);
}

/*
 * Below --layout-outer (1360 + 2×24 pad): cancel right section padding so a
 * peeking card is clipped by the page edge, not the padded container.
 * Media queries cannot use custom properties; keep in sync with tokens.
 */
@media (max-width: 1407px) {
	.site-main--home .home-deals .veylo-carousel,
	.site-main--home .home-top-sellers .veylo-carousel,
	.site-main--home .home-featured-products .veylo-carousel {
		margin-right: calc(-1 * var(--layout-pad));
	}
}

.vailo-hero {
	--vailo-hero-gap: 0px;
	--vailo-hero-card-width: 340px;
	--vailo-hero-card-count: 4;
	--vailo-hero-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--veylo-carousel-gap: var(--vailo-hero-gap);
}

.vailo-hero__card {
	box-sizing: border-box;
	flex: 0 0 var(--vailo-hero-card-width);
	width: var(--vailo-hero-card-width);
	height: 420px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0;
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

@media (min-width: 768px) {
	.vailo-hero {
		--vailo-hero-card-width: 545px;
		width: 100%;
		max-width: calc(
			(var(--vailo-hero-card-width) * var(--vailo-hero-card-count))
			+ (var(--vailo-hero-gap) * (var(--vailo-hero-card-count) - 1))
		);
		margin-inline: auto;
	}

	.vailo-hero__card {
		height: 560px;
		scroll-snap-align: unset;
		scroll-snap-stop: normal;
	}
}

.vailo-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 100%;
	padding: 20px 16px 24px;
	font-family: var(--vailo-hero-font);
}

@media (min-width: 768px) {
	.vailo-hero__copy {
		padding: 28px 32px 36px;
	}
}

.vailo-hero__title {
	margin: 0 0 8px;
	font-family: var(--vailo-hero-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: inherit;
}

@media (min-width: 768px) {
	.vailo-hero__title {
		margin-bottom: 12px;
		font-size: 28px;
	}
}

.vailo-hero__lede {
	margin: 0 0 16px;
	font-family: var(--vailo-hero-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-secondary);
}

.vailo-hero__lede:has(+ .vailo-hero__disclaimer) {
	margin-bottom: 6px;
}

@media (min-width: 768px) {
	.vailo-hero__lede {
		margin-bottom: 24px;
		font-size: 16px;
	}

	.vailo-hero__lede:has(+ .vailo-hero__disclaimer) {
		margin-bottom: 8px;
	}
}

.vailo-hero__disclaimer {
	margin: 0 0 16px;
	font-family: var(--vailo-hero-font);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--color-text-secondary);
	opacity: 0.85;
}

@media (min-width: 768px) {
	.vailo-hero__disclaimer {
		margin-bottom: 24px;
		font-size: 12px;
	}
}

.vailo-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--vailo-hero-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
}

.vailo-hero__cta-icon {
	display: block;
	flex-shrink: 0;
}

.vailo-hero__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	overflow: hidden;
}

.vailo-hero__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.vailo-hero__card--shop .vailo-hero__media {
	background: var(--color-primary);
}

.vailo-hero__card--coa {
	overflow: visible;
}

.vailo-hero__card--coa .vailo-hero__media {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 24px;
	background: var(--color-highlight-muted);
	overflow: visible;
}

.vailo-hero__card--coa .vailo-hero__media-img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 48px;
	box-shadow:
		0 2px 6px rgba(45, 24, 34, 0.14),
		0 10px 24px rgba(45, 24, 34, 0.16),
		0 22px 44px rgba(45, 24, 34, 0.12);
}

@media (min-width: 768px) {
	.vailo-hero__card--coa .vailo-hero__media {
		padding: 36px 32px;
	}

	.vailo-hero__card--coa .vailo-hero__media-img {
		border-radius: 64px;
		box-shadow:
			0 3px 8px rgba(45, 24, 34, 0.12),
			0 14px 32px rgba(45, 24, 34, 0.18),
			0 28px 56px rgba(45, 24, 34, 0.14);
	}
}

.vailo-hero__card--journal .vailo-hero__media {
	background: var(--color-mint);
}

.vailo-hero__card--account .vailo-hero__media {
	background: var(--color-accent);
}

.vailo-hero__card--shop .vailo-hero__copy {
	background: color-mix(in srgb, var(--color-primary-dark) 88%, var(--color-mint));
	color: var(--color-surface);
}

.vailo-hero__card--coa .vailo-hero__copy {
	background: color-mix(in srgb, var(--color-secondary) 70%, var(--color-text));
	color: var(--color-surface);
}

.vailo-hero__card--journal .vailo-hero__copy {
	background: color-mix(in srgb, var(--color-mint) 62%, var(--color-text));
	color: var(--color-surface);
}

.vailo-hero__card--account .vailo-hero__copy {
	background: color-mix(in srgb, var(--color-accent-fill) 88%, var(--color-mint));
	color: var(--color-surface);
}

.vailo-hero__card--shop .vailo-hero__lede,
.vailo-hero__card--coa .vailo-hero__lede,
.vailo-hero__card--journal .vailo-hero__lede,
.vailo-hero__card--account .vailo-hero__lede,
.vailo-hero__card--shop .vailo-hero__disclaimer,
.vailo-hero__card--coa .vailo-hero__disclaimer,
.vailo-hero__card--journal .vailo-hero__disclaimer,
.vailo-hero__card--account .vailo-hero__disclaimer {
	color: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

.vailo-journal {
	max-width: 68rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

.vailo-journal__header .vailo-lead__eyebrow,
.vailo-entry .vailo-lead__eyebrow {
	margin: 0 0 0.5rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.72rem;
	font-family: var(--font-body);
	color: var(--color-secondary);
}

.vailo-journal__header h1,
.vailo-entry h1 {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.08;
}

.vailo-journal__header p {
	max-width: 40rem;
	font-size: 1.15rem;
	line-height: 1.5;
}

.vailo-journal-list {
	display: grid;
	gap: 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.vailo-journal-list h2,
.vailo-journal-list h3 {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
}

.vailo-journal-list a {
	color: inherit;
}

.vailo-entry__content {
	max-width: 40rem;
	font-size: 1.15rem;
	line-height: 1.6;
}