/*
Theme Name: DON POSEI
Description: Child theme for the DON POSEI bespoke jewelry website.
Author: DON POSEI
Template: neve
Version: 1.0.95
Text Domain: don-posei
*/

/* DON POSEI design tokens. Keep all project-specific styling in this child theme. */
:root {
	--dp-color-ink: #080808;
	--dp-color-ink-soft: #191919;
	--dp-color-paper: #f5f3ef;
	--dp-color-white: #ffffff;
	--dp-color-red: #8e0a1c;
	--dp-color-red-hover: #b1112a;
	--dp-color-muted: #737373;
	--dp-color-line: rgba(8, 8, 8, 0.16);
	--dp-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--dp-font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
	/* Retarget Neve's own typography variables so header, footer, menus and
	 * WooCommerce templates follow the same two families. */
	--bodyfontfamily: var(--dp-font-body);
	--headingfontfamily: var(--dp-font-display);
	--dp-container: 1280px;
	--dp-wide-container: 1440px;
	--dp-section-space: clamp(3.5rem, 8vw, 7.5rem);
	--dp-content-space: clamp(1.25rem, 3vw, 3rem);
	--dp-radius: 0;
	--dp-focus-ring: 0 0 0 3px rgba(142, 10, 28, 0.35);
}

.dp-eyebrow {
		margin-block: 0 0.75rem;
		color: var(--dp-color-red);
		font-family: var(--dp-font-body);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		line-height: 1.3;
		text-transform: uppercase;
}

.dp-button-group {
		gap: 0.75rem;
}

.dp-button-group .wp-block-button__link,
.wp-block-button__link.dp-button {
		border: 1px solid var(--dp-color-red);
		border-radius: var(--dp-radius);
		background: var(--dp-color-red);
		color: var(--dp-color-white);
		font-family: var(--dp-font-body);
		font-size: 0.76rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		line-height: 1.2;
		padding: 0.9rem 1.35rem;
		text-transform: uppercase;
		transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
	}

.dp-button-group .wp-block-button__link:hover,
.dp-button-group .wp-block-button__link:focus-visible,
.wp-block-button__link.dp-button:hover,
.wp-block-button__link.dp-button:focus-visible {
		border-color: var(--dp-color-red-hover);
		background: var(--dp-color-red-hover);
		color: var(--dp-color-white);
	}

.dp-button-group .wp-block-button__link:focus-visible,
.wp-block-button__link.dp-button:focus-visible {
		box-shadow: var(--dp-focus-ring);
		outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.dp-button-group .wp-block-button__link,
	.wp-block-button__link.dp-button {
		transition: none;
	}
}

/* Task 06: Hero For Kings and Discover the Icons. */
body.page-id-469 .dp-hero-for-kings {
	position: relative;
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	min-height: clamp(25rem, 44vw, 40rem);
	margin-inline: auto;
	background-color: var(--dp-color-ink);
	color: var(--dp-color-white);
	overflow: hidden;
}

body.page-id-469 .dp-hero-for-kings .innerblocks-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: inherit;
	width: min(100%, var(--dp-container));
	margin-inline: auto;
}

body.page-id-469 .dp-hero-for-kings__column {
	width: 100%;
}

body.page-id-469 .dp-hero-for-kings__content {
	box-sizing: border-box;
	max-width: 34rem;
	margin: 0 auto 0 0;
	padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 5rem);
	color: var(--dp-color-white);
}

body.page-id-469 .dp-hero-for-kings__content .dp-eyebrow {
	margin-bottom: 1.25rem;
	color: rgba(245, 243, 239, 0.86);
}

body.page-id-469 .dp-hero-for-kings__title {
	margin: 0 0 0.75rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-display);
	font-size: clamp(3rem, 5.3vw, 5.6rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 0.94;
}

body.page-id-469 .dp-hero-for-kings__tagline {
	max-width: 22rem;
	margin: 0 0 2rem;
	color: rgba(245, 243, 239, 0.94);
	font-family: var(--dp-font-display);
	font-size: clamp(1.25rem, 2.2vw, 2rem);
	font-style: italic;
	line-height: 1.2;
}

body.page-id-469 .dp-hero-for-kings .dp-button-group {
	margin: 0;
}

body.page-id-469 .dp-hero-for-kings .dp-button-group .wp-block-button__link {
	min-width: 8.5rem;
	text-align: center;
}

.dp-discover-icons {
	margin: 0;
	padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
	background: var(--dp-color-white);
	color: var(--dp-color-ink);
}

.dp-discover-icons .innerblocks-wrap {
	width: min(100%, var(--dp-container));
	margin-inline: auto;
}

.dp-discover-icons__column {
	width: 100%;
}

.dp-discover-icons__heading {
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	color: var(--dp-color-red);
	font-family: var(--dp-font-body);
	font-size: clamp(1.1rem, 1.8vw, 1.30rem);
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-hero-for-kings {
		width: calc(100% - 1.5rem);
		min-height: 30rem;
	}

	body.page-id-469 .dp-hero-for-kings__content {
		padding: 5rem 1.25rem 4.5rem;
	}

	body.page-id-469 .dp-hero-for-kings__title {
		font-size: clamp(3.3rem, 16vw, 5.5rem);
	}
}

/* Task 08: East Meets West and Symbols in Life. */
.dp-east-meets-west,
.dp-symbols-in-life {
	margin: 0;
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	background: var(--dp-color-white);
}

.dp-east-meets-west__heading,
.dp-symbols-in-life__heading {
	box-sizing: border-box;
	width: min(calc(100% - 2rem), var(--dp-container));
	margin: 0 auto clamp(1.5rem, 3vw, 2.75rem);
	color: var(--dp-color-red);
	font-family: var(--dp-font-body);
	font-size: clamp(1.1rem, 1.8vw, 1.30rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.dp-east-meets-west-banner {
	position: relative;
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	min-height: clamp(25rem, 39vw, 34rem);
	margin-inline: auto;
	background-color: var(--dp-color-ink);
	color: var(--dp-color-white);
	overflow: hidden;
}

.dp-east-meets-west-banner .innerblocks-wrap,
.dp-east-meets-west-banner__column {
	position: relative;
	z-index: 1;
	min-height: inherit;
	width: 100%;
}

.dp-east-meets-west__pillars {
	box-sizing: border-box;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	min-height: inherit;
	margin: 0;
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem);
	text-align: center;
}

.dp-east-meets-west__pillar {
	min-width: 0;
	margin: 0;
	color: var(--dp-color-white);
}

.dp-east-meets-west__pillar-title {
	margin: 0 0 0.65rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-display);
	font-size: clamp(1.35rem, 2.6vw, 2.15rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1;
}

.dp-east-meets-west__pillar-text {
	max-width: 19rem;
	margin: 0 auto;
	color: rgba(245, 243, 239, 0.94);
	font-family: var(--dp-font-display);
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	font-style: italic;
	line-height: 1.25;
}

.dp-symbols-in-life {
	padding-top: clamp(2.75rem, 6vw, 5rem);
}

.dp-symbols-in-life__heading {
	width: min(calc(100% - 2rem), var(--dp-container));
	margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
	text-align: left;
}

.dp-symbols-in-life__frame {
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	margin-inline: auto;
}

.dp-symbols-in-life__column {
	min-width: 0;
	width: 100%;
}

.dp-symbols-in-life__frame .innerblocks-wrap {
	min-width: 0;
	width: 100%;
}

@media (max-width: 767px) {
	.dp-east-meets-west__heading,
	.dp-symbols-in-life__heading {
		width: calc(100% - 1.5rem);
	}

	.dp-east-meets-west-banner,
	.dp-symbols-in-life__frame {
		width: calc(100% - 1.5rem);
	}

	.dp-east-meets-west-banner {
		min-height: auto;
	}

	.dp-east-meets-west__pillars {
		align-items: stretch;
		gap: 2rem;
		padding: 3rem 1.25rem;
	}

	.dp-east-meets-west__pillar-text {
		max-width: none;
	}
}

/* Task 09: Founder Story, House Journal and final collection CTA. */
.dp-founders-story,
.dp-house-journal,
.dp-final-collection-cta {
	margin: 0;
	background: var(--dp-color-white);
}

.dp-founders-story {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.dp-founders-story__banner {
	position: relative;
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	min-height: clamp(20rem, 38vw, 31rem);
	margin-inline: auto;
	background-color: var(--dp-color-ink);
	color: var(--dp-color-white);
	overflow: hidden;
}

.dp-founders-story__banner > .wp-block-themeisle-blocks-advanced-columns-overlay {
	opacity: 0.66;
}

.dp-founders-story__banner .innerblocks-wrap,
.dp-founders-story__column {
	position: relative;
	z-index: 1;
	min-height: inherit;
	width: 100%;
}

.dp-founders-story__column {
	display: flex;
	align-items: center;
}

.dp-founders-story__content {
	box-sizing: border-box;
	width: min(100%, 34rem);
	margin: 0;
	padding: clamp(2rem, 6vw, 5.5rem);
	color: var(--dp-color-white);
}

.dp-founders-story__title {
	margin: 0 0 1.1rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-display);
	font-size: clamp(2.3rem, 5vw, 4.6rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 0.98;
}

.dp-founders-story__text {
	max-width: 27rem;
	margin: 0 0 1.75rem;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--dp-font-display);
	font-size: clamp(1rem, 1.65vw, 1.35rem);
	font-style: italic;
	line-height: 1.45;
}

.dp-founders-story__actions {
	margin: 0;
}

.dp-house-journal {
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.dp-house-journal__heading {
	box-sizing: border-box;
	width: min(calc(100% - 2rem), var(--dp-container));
	margin: 0 auto clamp(1.5rem, 3vw, 2.75rem);
	color: var(--dp-color-red);
	font-family: var(--dp-font-body);
	font-size: clamp(1.1rem, 1.8vw, 1.30rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
}

.dp-house-journal__frame {
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	margin-inline: auto;
}

.dp-house-journal__column,
.dp-house-journal__frame .innerblocks-wrap {
	min-width: 0;
	width: 100%;
}

.dp-house-journal__column > .wp-block-shortcode {
	margin: 0;
}

.dp-final-collection-cta {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.dp-final-collection-cta__banner {
	position: relative;
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	min-height: clamp(23rem, 43vw, 35rem);
	margin-inline: auto;
	background-color: var(--dp-color-ink);
	color: var(--dp-color-white);
	overflow: hidden;
}

.dp-final-collection-cta__banner > .wp-block-themeisle-blocks-advanced-columns-overlay {
	opacity: 0.38;
}

.dp-final-collection-cta__banner .innerblocks-wrap,
.dp-final-collection-cta__column {
	position: relative;
	z-index: 1;
	min-height: inherit;
	width: 100%;
}

.dp-final-collection-cta__column {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dp-final-collection-cta__content {
	box-sizing: border-box;
	width: min(100%, 48rem);
	padding: clamp(2.25rem, 7vw, 6.5rem) clamp(1.5rem, 6vw, 5rem);
	color: var(--dp-color-white);
	text-align: center;
}

.dp-final-collection-cta__eyebrow {
	margin: 0 0 1.1rem;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--dp-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dp-final-collection-cta__title {
	max-width: 45rem;
	margin: 0 auto 1.7rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-display);
	font-size: clamp(2.6rem, 6vw, 5.8rem);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 0.98;
}

.dp-final-collection-cta__actions {
	justify-content: center;
	margin: 0;
}

@media (max-width: 767px) {
	.dp-founders-story__banner,
	.dp-house-journal__frame,
	.dp-final-collection-cta__banner {
		width: calc(100% - 1.5rem);
	}

	.dp-founders-story__content {
		padding: 3.5rem 1.25rem;
	}

	.dp-house-journal__heading {
		width: calc(100% - 1.5rem);
	}

	.dp-final-collection-cta__content {
		padding: 4.5rem 1.25rem;
	}
}

/* Mobile composition refinement inspired by the supplied David Yurman
 * reference: centered section labels, compact two-column category tiles and
 * horizontal product rails for collection-led sections. */
@media (max-width: 767px) {
	.dp-discover-icons__heading,
	.dp-shop-categories__heading {
		color: var(--dp-color-ink);
		font-size: clamp(1.05rem, 4.4vw, 1.35rem);
		letter-spacing: 0.1em;
		text-align: center;
	}

	body.page-id-469 .dp-category-rail {
		display: grid !important;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(0.5rem, 2.5vw, 0.75rem);
		overflow: visible;
	}

	body.page-id-469 .dp-category-rail > .dp-category-card {
		width: auto;
		flex-basis: auto;
	}

	.dp-category-card__media {
		border-color: transparent;
	}

	.dp-category-card__title {
		margin: 0.7rem 0 0.35rem;
		font-size: clamp(0.68rem, 2.7vw, 0.9rem);
		font-style: normal;
		letter-spacing: 0.06em;
		line-height: 1.2;
		text-transform: uppercase;
}

	.dp-category-card__title a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25em;
	}

	.dp-category-card__meta {
		font-size: 0.53rem;
		letter-spacing: 0.08em;
	}
}

/* Task 05: DON POSEI Header/Footer Builder styling. */
.header-main .row--wrapper,
.header-top .row--wrapper,
.header-bottom .row--wrapper {
	min-height: 4.5rem;
}

.builder-item--logo .site-logo a.brand,
.builder-item--logo_2 .site-logo a.brand {
	display: inline-flex;
	align-items: center;
	min-width: max-content;
	color: var(--dp-color-white);
	font-family: var(--dp-font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.builder-item--logo .site-logo img,
.builder-item--logo_2 .site-logo img {
	display: none;
}

/* Brand wordmark rendered from the DON POSEI logo image. It is masked and
 * painted with currentColor, so it automatically follows the header's existing
 * light/dark text-colour states (white over the hero, ink on white headers). */
.builder-item--logo .site-logo a.brand::before,
.builder-item--logo_2 .site-logo a.brand::before {
	content: "";
	display: inline-block;
	width: 220px;
	height: auto;
	aspect-ratio: 637 / 140;
	background-color: currentColor;
	-webkit-mask: url("assets/images/logo.webp") center / contain no-repeat;
	mask: url("assets/images/logo.webp") center / contain no-repeat;
}

/* Do not let Neve's logo max-width clamp the wordmark. */
.builder-item--logo .site-logo,
.builder-item--logo_2 .site-logo,
.builder-item--logo .site-logo a.brand,
.builder-item--logo_2 .site-logo a.brand {
	max-width: none !important;
}

.builder-item--logo .site-logo a.brand:hover,
.builder-item--logo .site-logo a.brand:focus-visible,
.builder-item--logo_2 .site-logo a.brand:hover,
.builder-item--logo_2 .site-logo a.brand:focus-visible {
	color: var(--dp-color-white);
	opacity: 1;
}

.header .nav-ul > li > .wrap > a,
.header .nv-icon,
.header .cart-icon-wrapper,
.header .wl-icon-wrapper,
.header .my-account-wrapper {
	transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.header .nav-ul > li > .wrap > a:hover,
.header .nav-ul > li > .wrap > a:focus-visible,
.header .nv-icon:hover,
.header .nv-icon:focus-visible,
.header .cart-icon-wrapper:hover,
.header .cart-icon-wrapper:focus-visible,
.header .wl-icon-wrapper:hover,
.header .wl-icon-wrapper:focus-visible,
.header .my-account-wrapper:hover,
.header .my-account-wrapper:focus-visible {
	color: var(--dp-color-red-hover);
	opacity: 1;
}

.header a:focus-visible,
.header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
	box-shadow: var(--dp-focus-ring);
	outline: none;
}

#site-footer .footer-top-inner,
#site-footer .footer-bottom-inner {
	border-top: 0;
	background: var(--dp-color-ink);
	color: var(--dp-color-paper);
}

#site-footer .footer-top-inner {
	padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}

#site-footer .footer-bottom-inner {
	border-top: 1px solid rgba(245, 243, 239, 0.18);
	padding-block: 1.25rem;
}

#site-footer .footer-top .widget {
	margin: 0;
}

#site-footer .footer-top .widget-title {
	margin: 0 0 1.25rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

#site-footer .footer-top .hfg-slot:first-child .widget-title {
	font-family: var(--dp-font-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 500;
	letter-spacing: 0.12em;
}

#site-footer .dp-footer-wordmark {
	margin: 0 0 1.35rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-display);
	font-size: clamp(1.8rem, 3.2vw, 2.65rem);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
}

#site-footer .dp-footer-links {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#site-footer .dp-footer-links a,
#site-footer .dp-footer-links span {
	color: rgba(245, 243, 239, 0.72);
	font-family: var(--dp-font-body);
	font-size: 0.88rem;
	line-height: 1.45;
	text-decoration: none;
}

#site-footer .dp-footer-links a:hover,
#site-footer .dp-footer-links a:focus-visible {
	color: var(--dp-color-white);
}

#site-footer .nv-social-icons-list a {
	transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

#site-footer .nv-social-icons-list a:hover,
#site-footer .nv-social-icons-list a:focus-visible {
	background: var(--dp-color-red-hover) !important;
	opacity: 1;
}

#site-footer .footer-copyright,
#site-footer .footer-copyright a,
#site-footer .builder-item--footer_copyright {
	color: rgba(245, 243, 239, 0.72);
}

@media (max-width: 1024px) {
	.header-main .row--wrapper,
	.header-top .row--wrapper,
	.header-bottom .row--wrapper {
		min-height: 4rem;
	}

	.builder-item--logo .site-logo a.brand,
	.builder-item--logo_2 .site-logo a.brand {
		font-size: 0.88rem;
	}

	.builder-item--logo .site-logo a.brand::before,
	.builder-item--logo_2 .site-logo a.brand::before {
		width: 204px;
	}

	#site-footer .footer-top-inner {
		padding-block: 1.5rem 2.5rem;
	}

	#site-footer .footer-top .hfg-slot:not(:first-child) {
		margin-top: 2rem;
	}
}

/* Task 12/18: Use the same DON POSEI desktop header on every public page.
 * Reorder the Neve slots to match the PDF header: wordmark, category nav,
 * utilities. Mobile header rules remain controlled by Neve below 960px. */
@media (min-width: 1025px) {
	.header-main.hide-on-mobile .header-main-inner .row--wrapper {
		grid-template-columns: minmax(9.5rem, auto) minmax(0, 1fr) auto;
		column-gap: clamp(1rem, 2vw, 2rem);
	}

	.header-main.hide-on-mobile .hfg-slot.center {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
	}

	.header-main.hide-on-mobile .hfg-slot.left {
		grid-column: 2;
		grid-row: 1;
		justify-content: center;
		min-width: 0;
	}

	.header-main.hide-on-mobile .hfg-slot.right {
		grid-column: 3;
		grid-row: 1;
	}

	.header-main.hide-on-mobile .hfg-slot.right .builder-item--secondary-menu {
		display: none;
	}

	.header-main.hide-on-mobile .hfg-slot.left .builder-item--primary-menu,
	.header-main.hide-on-mobile .hfg-slot.left .nv-nav-wrap {
		width: 100%;
	}

	.header-main.hide-on-mobile .hfg-slot.left .primary-menu-ul {
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		gap: clamp(1.65rem, 1.15vw, 1.2rem);
		width: 100%;
	}

	.header-main.hide-on-mobile .hfg-slot.left .primary-menu-ul > li {
		margin-inline: 0 !important;
	}

	.header-main.hide-on-mobile .hfg-slot.left .primary-menu-ul > li > .wrap > a {
		font-size: clamp(0.8rem, 1vw, 1rem);
		letter-spacing: 0.03em;
		white-space: nowrap;
	}

	.header-main.hide-on-mobile .hfg-slot.left .primary-menu-ul > li > .wrap {
		padding-inline: 0 !important;
	}

	/* Mega menu: full-width David Yurman-inspired panel under the shared nav. */
	.header-main.hide-on-mobile {
		position: relative;
		z-index: 1000;
		overflow: visible;
	}

	.header-main.hide-on-mobile .header-main-inner,
	.header-main.hide-on-mobile .header-main-inner .row--wrapper,
	.header-main.hide-on-mobile .hfg-slot.left,
	.header-main.hide-on-mobile .hfg-slot.left .builder-item--primary-menu,
	.header-main.hide-on-mobile .hfg-slot.left .nv-nav-wrap {
		overflow: visible;
	}

	/* Neve gives each builder item a relative positioning context. Remove it
	 * here so the panel is anchored to the full-width header row, not the
	 * centered navigation slot. */
	.header-main.hide-on-mobile .hfg-slot .builder-item {
		position: static;
	}

	.header-main.hide-on-mobile .hfg-slot.left .primary-menu-ul > li.dp-mega-parent {
		position: static;
	}

	.header-main.hide-on-mobile .dp-mega-menu {
		box-sizing: border-box;
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1001;
		width: 100vw;
		/* Keep the opened mega panel visually continuous with the header. */
		border-top: 0;
		background: var(--dp-color-white);
		box-shadow: none;
		color: var(--dp-color-ink);
	}

	.header-main.hide-on-mobile .dp-mega-parent:hover > .dp-mega-menu,
	.header-main.hide-on-mobile .dp-mega-parent:focus-within > .dp-mega-menu,
	.header-main.hide-on-mobile .dp-mega-parent.is-open > .dp-mega-menu {
		display: block;
	}

	.dp-mega-menu__inner {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 5rem);
		max-width: 1500px;
		margin: 0 auto;
		/* Top padding tightened so the first panel row (SHOP BY CATEGORY /
		 * MATERIAL / FEATURED) starts just under the logo row instead of
		 * sitting ~56px below it. Sides and bottom keep the original rhythm. */
		padding: 1.25rem clamp(1.5rem, 4vw, 4.5rem) clamp(2rem, 3.5vw, 3.5rem);
	}

	/* Reserve the right-hand illustration rail only when the menu has images. */
	.dp-mega-menu--has-featured .dp-mega-menu__inner {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
	}

	.dp-mega-menu__columns {
		display: flex;
		gap: clamp(1.5rem, 3vw, 3rem);
		min-width: 0;
	}

	.dp-mega-menu__column {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Space between stacked parent-category groups inside a column. */
	.dp-mega-menu__group + .dp-mega-menu__group {
		margin-top: 1.6rem;
	}

	.dp-mega-menu__column-title,
	.dp-mega-menu__group-title {
		margin: 0 0 1.45rem;
		color: var(--dp-color-ink);
		font-family: var(--dp-font-body);
		font-size: clamp(0.72rem, 0.85vw, 0.9rem);
		font-weight: 600;
		letter-spacing: 0.11em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	/* Parent category heading (e.g. Bracelets, Earrings): bold, title-case,
	 * clickable - the David Yurman sub-column style. */
	.dp-mega-menu__group-title {
		display: block;
		margin: 0 0 0.7rem;
		color: var(--dp-color-ink);
		font-family: var(--dp-font-body);
		font-size: clamp(0.9rem, 1vw, 1.02rem);
		font-weight: 600;
		letter-spacing: 0.01em;
		line-height: 1.3;
		text-transform: none;
		text-decoration: none;
	}

	.header-main.hide-on-mobile .dp-mega-menu__group-title {
		color: var(--dp-color-ink) !important;
	}

	.dp-mega-menu__group-title:hover,
	.dp-mega-menu__group-title:focus-visible {
		color: var(--dp-color-red-hover);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.dp-mega-menu__links {
		display: grid;
		gap: 0.55rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dp-mega-menu__links a {
		color: rgba(8, 8, 8, 0.92);
		font-family: var(--dp-font-body);
		font-size: clamp(0.82rem, 1vw, 1rem);
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.35;
		text-decoration: none;
		transition: color 180ms ease, text-decoration-color 180ms ease;
	}

	.header-main.hide-on-mobile .dp-mega-menu__links a {
		color: var(--dp-color-ink) !important;
	}

	.dp-mega-menu__links a.is-emphasis {
		font-weight: 600;
	}

	.dp-mega-menu__links a:hover,
	.dp-mega-menu__links a:focus-visible {
		color: var(--dp-color-red-hover);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.dp-mega-menu__featured {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		min-width: 0;
	}

	.dp-mega-menu__card {
		position: relative;
		min-height: 17rem;
		overflow: hidden;
		background: var(--dp-color-white);
		color: var(--dp-color-ink);
		text-decoration: none;
	}

	/* The illustration images have transparent/white backgrounds, so no dark
	 * overlay - keep them on their original light background. */
	.dp-mega-menu__card::after {
		content: none;
	}

	.dp-mega-menu__card img {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 17rem;
		object-fit: cover;
		transition: transform 350ms ease;
	}

	.dp-mega-menu__card span {
		position: absolute;
		bottom: 1.2rem;
		left: 1.2rem;
		z-index: 1;
		color: var(--dp-color-ink);
		font-family: var(--dp-font-body);
		font-size: clamp(0.72rem, 0.9vw, 0.9rem);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.header-main.hide-on-mobile .dp-mega-menu__card span {
		color: var(--dp-color-ink) !important;
	}

	.dp-mega-menu__card:hover img,
	.dp-mega-menu__card:focus-visible img {
		transform: scale(1.04);
	}
}

/* Task 19 follow-up: native Neve Pro Mega Menu styling.
 * The panel is rendered from Appearance > Menus, not injected by theme JS.
 * Keeping it as a submenu of its root item ensures the hover state persists
 * while the pointer travels from the top label into a menu column. */
@media (min-width: 1025px) {
	.header-main.hide-on-mobile {
		position: relative;
		z-index: 1000;
		overflow: visible;
	}

	.header-main.hide-on-mobile .hfg-slot.left {
		position: static;
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu.full-width > .sub-menu {
		box-sizing: border-box;
		width: 100vw;
		max-width: none;
		min-height: 18rem;
		padding: clamp(1.75rem, 3vw, 3rem) max(1.5rem, calc((100vw - 1400px) / 2));
		/* Neve's own mega-menu panel also needs no divider at its top edge. */
		border-top: 0;
		background: var(--dp-color-white);
		box-shadow: none;
		color: var(--dp-color-ink);
		/* Neve's dynamic menu styles expose the panel colours as variables.
		 * Override those values here so heading spans cannot inherit the
		 * header's light text colour on the white mega-menu panel. */
		--color: var(--dp-color-ink) !important;
		--headingcolor: var(--dp-color-ink) !important;
		--hovercolor: var(--dp-color-red-hover) !important;
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-col {
		padding-inline: clamp(1rem, 2vw, 2.5rem);
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-col > .sub-menu {
		gap: 0.1rem;
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-heading > .wrap > span,
	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-heading > span,
	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-col > .sub-menu a {
		color: var(--dp-color-ink) !important;
		opacity: 1 !important;
		filter: none;
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-heading > .wrap > span,
	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-heading > span {
		padding: 0.25rem 0 0.8rem;
		font-family: var(--dp-font-body);
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		line-height: 1.3;
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-col > .sub-menu a {
		padding: 0.4rem 0;
		font-family: var(--dp-font-body);
		font-size: clamp(0.82rem, 0.9vw, 0.98rem);
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.35;
	}

	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-col > .sub-menu a:hover,
	.header-main.hide-on-mobile .primary-menu-ul > .neve-mega-menu .neve-mm-col > .sub-menu a:focus-visible {
		color: var(--dp-color-red-hover) !important;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header .nav-ul > li > .wrap > a,
	.header .nv-icon,
	.header .cart-icon-wrapper,
	.header .wl-icon-wrapper,
	.header .my-account-wrapper,
	#site-footer .nv-social-icons-list a {
		transition: none;
	}

	.dp-mega-menu__card img,
	.dp-mega-menu__links a {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.header-main.hide-on-desktop .dp-mega-menu,
	.header-menu-sidebar .dp-mega-menu {
		box-sizing: border-box;
		display: none;
		position: static;
		width: 100%;
		margin: 0;
		border-top: 1px solid rgba(8, 8, 8, 0.12);
		background: var(--dp-color-white);
		box-shadow: none;
	}

	.header-main.hide-on-desktop .dp-mega-parent.is-open > .dp-mega-menu,
	.header-menu-sidebar .dp-mega-parent.is-open > .dp-mega-menu {
		display: block;
	}

	.dp-mega-menu__inner,
	.dp-mega-menu__columns {
		display: block;
	}

	.dp-mega-menu__inner {
		padding: 0.75rem 1rem 1.25rem;
	}

	.dp-mega-menu__column {
		padding-block: 0.85rem;
		border-bottom: 1px solid rgba(8, 8, 8, 0.1);
	}

	.dp-mega-menu__column-title {
		margin-bottom: 0.8rem;
		font-size: 0.72rem;
	}

	.dp-mega-menu__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 1rem;
	}

	.dp-mega-menu__links a {
		font-size: 0.78rem;
	}

	.dp-mega-menu__featured {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 1rem;
	}

	.dp-mega-menu__card,
	.dp-mega-menu__card img {
		min-height: 10rem;
	}

	.dp-mega-menu__card span {
		bottom: 0.75rem;
		left: 0.75rem;
		font-size: 0.62rem;
	}
}

/* Task 07: The Philosophy and Shop by Category. */
.dp-philosophy,
.dp-shop-categories {
	margin: 0;
	/*padding-block: clamp(3.5rem, 7vw, 6.5rem); */
	background: var(--dp-color-white);
}

.dp-philosophy__heading,
.dp-shop-categories__heading {
	box-sizing: border-box;
	width: min(calc(100% - 2rem), var(--dp-container));
	margin: 0 auto clamp(1.5rem, 3vw, 2.75rem);
	color: var(--dp-color-red);
	font-family: var(--dp-font-body);
	font-size: clamp(1.1rem, 1.8vw, 1.30rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* The campaign heading and its Otter background use the same compact rhythm
 * as the Discover the Icons heading and product rail. */
body.page-id-469 .dp-philosophy__heading {
	margin-bottom: 13px;
}

body.page-id-469 .dp-philosophy-banner {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	min-height: clamp(28rem, 45vw, 39rem);
	margin-inline: 0 !important;
	background-color: var(--dp-color-ink);
	color: var(--dp-color-white);
	overflow: hidden;
}

body.page-id-469 .dp-philosophy-banner .innerblocks-wrap,
body.page-id-469 .dp-philosophy-banner__column {
	min-height: inherit;
	width: 100%;
}

body.page-id-469 .dp-philosophy__pillars {
	box-sizing: border-box;
	align-items: flex-end;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	min-height: inherit;
	margin: 0;
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

body.page-id-469 .dp-philosophy__pillar {
	min-width: 0;
	margin: 0;
	color: var(--dp-color-white);
}

body.page-id-469 .dp-philosophy__pillar-title {
	margin: 0 0 0.75rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-display);
	font-size: clamp(1.55rem, 2.8vw, 2.6rem);
	font-weight: 600;
	line-height: 1;
}

body.page-id-469 .dp-philosophy__pillar-text {
	max-width: 18rem;
	margin: 0;
	color: rgba(245, 243, 239, 0.92);
	font-family: var(--dp-font-body);
	font-size: clamp(0.82rem, 1.15vw, 1rem);
	line-height: 1.55;
}

.dp-shop-categories {
	padding-top: clamp(2.75rem, 6vw, 5rem);
}

.dp-shop-categories__heading {
	margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
}

.dp-shop-categories__frame {
	width: min(1180px, calc(100% - clamp(3rem, 12vw, 9rem)));
	margin-inline: auto;
}

.dp-shop-categories__column {
	width: 100%;
}

.dp-category-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2.75rem);
	margin: 0;
	padding-block: 0.25rem 1rem;
}

.dp-category-card {
	min-width: 0;
	text-align: center;
}

.dp-category-card__media {
	margin: 0;
	background: var(--dp-color-white);
	border: 1px solid rgba(8, 8, 8, 0.06);
	overflow: hidden;
}

.dp-category-card__media a {
	display: block;
}

.dp-category-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 300ms ease;
}

.dp-category-card:hover .dp-category-card__media img,
.dp-category-card:focus-within .dp-category-card__media img {
	transform: scale(1.035);
}

.dp-category-card__title {
	margin: 1rem 0 0.35rem;
	font-family: var(--dp-font-body);
	font-size: clamp(1.15rem, 2vw, 1.65rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
}

.dp-category-card__title a {
	color: var(--dp-color-ink);
	text-decoration: none;
}

.dp-category-card__title a:hover,
.dp-category-card__title a:focus-visible {
	color: var(--dp-color-red);
}

.dp-category-card__meta {
	margin: 0;
	color: var(--dp-color-red);
	font-family: var(--dp-font-body);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dp-category-card a:focus-visible {
	box-shadow: var(--dp-focus-ring);
	outline: none;
}

@media (max-width: 767px) {
	.dp-philosophy__heading,
	.dp-shop-categories__heading {
		width: calc(100% - 1.5rem);
	}

	.dp-shop-categories__frame {
		width: calc(100% - 1.5rem);
	}

	body.page-id-469 .dp-philosophy-banner {
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	body.page-id-469 .dp-philosophy-banner {
		min-height: auto;
	}

	.dp-philosophy__pillars {
		align-items: stretch;
		gap: 2rem;
		padding: 3rem 1.25rem;
	}

	.dp-philosophy__pillar-text {
		max-width: none;
	}

	.dp-category-rail {
		grid-auto-columns: minmax(12.5rem, 74vw);
	}
}

/* Final mobile category overrides: this block intentionally lives after the
 * Neve/WooCommerce category rules so the two-column composition wins over
 * their default single-column flex layout. */
@media (max-width: 767px) {
	body.page-id-469 .dp-discover-icons__heading,
	body.page-id-469 .dp-shop-categories__heading {
		color: var(--dp-color-ink);
		font-size: clamp(1.05rem, 4.4vw, 1.35rem);
		letter-spacing: 0.1em;
		text-align: center;
	}

	body.page-id-469 .dp-category-rail.is-layout-flex {
		display: grid !important;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(0.5rem, 2.5vw, 0.75rem);
		overflow: visible;
	}

	body.page-id-469 .dp-category-rail.is-layout-flex > .dp-category-card {
		width: auto;
		flex-basis: auto;
	}

	body.page-id-469 .dp-category-card__title {
		margin: 0.7rem 0 0.35rem;
		font-size: clamp(0.68rem, 2.7vw, 0.9rem);
		font-style: normal;
		letter-spacing: 0.06em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	body.page-id-469 .dp-category-card__title a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25em;
	}

	body.page-id-469 .dp-category-card__meta {
		font-size: 0.53rem;
		letter-spacing: 0.08em;
	}

	
}

/* Task 10: WooCommerce-backed editorial product rails. The shortcode keeps
 * product data editable in Dashboard while preserving the Home V2 rail UI. */
.dp-product-collection {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.dp-product-collection__heading {
	margin: 0 0 0.65rem;
	font-family: var(--dp-font-display);
	font-size: clamp(1.75rem, 4vw, 3.2rem);
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.dp-product-collection__intro {
	max-width: 46rem;
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
	color: var(--dp-color-muted);
	font-size: 0.92rem;
	text-align: center;
}

/* Task 10b: desktop full-bleed composition. David Yurman keeps campaign
 * media edge-to-edge while the editorial copy and product cards retain a
 * measured gutter. Mobile rules above remain unchanged. */
@media (min-width: 768px) {
	body.page-id-469 .dp-hero-for-kings,
	body.page-id-469 .dp-east-meets-west-banner,
	body.page-id-469 .dp-founders-story__banner,
	body.page-id-469 .dp-final-collection-cta__banner {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	body.page-id-469 .dp-discover-icons {
		padding-inline: 0 !important;
	}

	body.page-id-469 .dp-discover-icons__column,
	body.page-id-469 .dp-shop-categories__column,
	body.page-id-469 .dp-symbols-in-life__column,
	body.page-id-469 .dp-house-journal__column {
		width: 100% !important;
		max-width: none !important;
	}

	body.page-id-469 .dp-shop-categories__frame,
	body.page-id-469 .dp-symbols-in-life__frame,
	body.page-id-469 .dp-house-journal__frame {
		padding-inline: 0 !important;
	}

	body.page-id-469 .dp-discover-icons .innerblocks-wrap {
		width: 100% !important;
		max-width: none !important;
	}

	body.page-id-469 .dp-shop-categories__frame .innerblocks-wrap,
	body.page-id-469 .dp-symbols-in-life__frame .innerblocks-wrap,
	body.page-id-469 .dp-house-journal__frame .innerblocks-wrap {
		width: 100% !important;
		max-width: none !important;
	}

	body.page-id-469 .dp-discover-icons__heading {
		box-sizing: border-box;
		width: min(calc(100% - clamp(3rem, 10vw, 7.5rem)), var(--dp-container));
		margin-inline: auto;
	}

	body.page-id-469 .dp-symbols-in-life__frame,
	body.page-id-469 .dp-shop-categories__frame,
	body.page-id-469 .dp-house-journal__frame {
		width: calc(100% - 1.5rem);
		max-width: none;
		margin-inline: auto;
	}

}

@media (max-width: 767px) {
	/* Campaign media stays edge-to-edge on small screens too; product rails
	 * and category tiles keep their intentional 12px content gutter. */
	body.page-id-469 .dp-hero-for-kings,
	body.page-id-469 .dp-east-meets-west-banner,
	body.page-id-469 .dp-founders-story__banner,
	body.page-id-469 .dp-final-collection-cta__banner {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	body.page-id-469 .dp-shop-categories__frame,
	body.page-id-469 .dp-symbols-in-life__frame,
	body.page-id-469 .dp-house-journal__frame {
		padding-inline: 0 !important;
	}
}

/* Campaign artwork and overlays are configured in the corresponding Otter
 * Advanced Columns blocks on page 469. CSS only owns responsive framing. */
@media (min-width: 768px) {
	body.page-id-469 .dp-founders-story {
		padding-block: 0;
	}

	body.page-id-469 .dp-founders-story__banner {
		aspect-ratio: 16 / 9;
		min-height: 56.25vw !important;
	}
}

body.page-id-469 .dp-final-collection-cta {
	padding-bottom: 0;
}

body.page-id-469 .dp-final-collection-cta__banner {
	margin-bottom: 0;
}

/* Otter left two empty paragraph blocks after the CTA. Remove those spacer
 * nodes so the supplied final image meets the footer cleanly. */
body.page-id-469 .dp-final-collection-cta + p,
body.page-id-469 .dp-final-collection-cta + p + p {
	display: none !important;
	margin: 0 !important;
}

/* Home V2 contains an empty paragraph inserted before the first Otter block.
 * Hide it so the hero starts immediately after the header. Give Discover a
 * measured white lead-in so its heading sits between hero and product rail. */
body.page-id-469 .nv-content-wrap > p:first-child {
	display: none !important;
	margin: 0 !important;
}

body.page-id-469 .dp-discover-icons {
	padding-top: clamp(2.25rem, 4vw, 4rem) !important;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-discover-icons {
		padding-top: clamp(1.5rem, 6vw, 2.5rem) !important;
	}
}

body.page-id-469 .dp-philosophy-banner .innerblocks-wrap,
body.page-id-469 .dp-philosophy-banner__column {
	width: 100%;
	max-width: none;
}

/* The feedback rail is a slide, while each image has a deliberate zoom
 * interaction on hover, focus and click-to-open lightbox. */
.dp-testimonial-slider {
	grid-auto-columns: minmax(15rem, 24vw);
}

/* R04: House Journal is an editable Otter Image Slider. Keep the rail image-
 * only, preserve the previous portrait composition, and let the native Glide
 * controls handle navigation instead of rebuilding the rail in PHP. */
.dp-house-journal__slider {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	--arrows-color: var(--dp-color-red);
	--arrows-background-color: var(--dp-color-white);
}

.dp-house-journal__slider .glide__track,
.dp-house-journal__slider .glide__slides {
	height: auto !important;
}

.dp-house-journal__slider .glide__track {
	overflow: hidden;
}

.dp-house-journal__slider .glide__slides {
	align-items: stretch;
}

.dp-house-journal__slider .glide__slide {
	height: auto;
	min-width: 0;
}

.dp-house-journal__slider .glide__slide figure {
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--dp-color-paper);
}

.dp-house-journal__slider .glide__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 350ms cubic-bezier(0.2, 0.65, 0.25, 1), filter 350ms ease;
}

.dp-house-journal__slider .glide__slide:hover img,
.dp-house-journal__slider .glide__slide:focus-within img {
	filter: saturate(1.08);
	transform: scale(1.08);
}

.dp-house-journal__slider .glide__arrows {
	z-index: 2;
}

/* R05 fix: the legacy testimonial rail class is also used on the editable
 * Otter slider root. Its grid-auto-columns rule was sizing the Glide track
 * to a narrow implicit column, leaving the five images bunched at the left
 * while the controls remained at the outer edges. Keep the class for legacy
 * rails, but make the Otter root a single full-width grid track. */
body .wp-block-themeisle-blocks-slider.dp-house-journal__slider.dp-testimonial-slider {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	grid-auto-columns: auto !important;
	width: 100% !important;
	max-width: none;
}

body .wp-block-themeisle-blocks-slider.dp-house-journal__slider.dp-testimonial-slider > .glide__track {
	width: 100%;
	min-width: 0;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-testimonial-slider {
		grid-auto-columns: minmax(17rem, 82vw);
	}
}

/* R08: responsive banner heights now come from the Otter Section settings.
 * Semantic CSS only propagates that height through the complex inner layout. */
body.page-id-469 .dp-philosophy-banner .innerblocks-wrap,
body.page-id-469 .dp-east-meets-west-banner .innerblocks-wrap,
body.page-id-469 .dp-east-meets-west-banner .dp-east-meets-west-banner__column,
body.page-id-469 .dp-east-meets-west-banner .dp-east-meets-west__pillars {
	min-height: inherit;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-philosophy-banner .dp-philosophy-banner__column,
	body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillars {
		min-height: inherit;
	}
}

/* Task 10f: center the copy evenly inside both full-bleed editorial
 * banners. The section headings outside the image keep their existing
 * composition; only the three pillar groups are centered. */
body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillars,
body.page-id-469 .dp-east-meets-west-banner .dp-east-meets-west__pillars {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillar,
body.page-id-469 .dp-east-meets-west-banner .dp-east-meets-west__pillar {
	align-self: center !important;
	text-align: center !important;
}

body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillar-text,
body.page-id-469 .dp-east-meets-west-banner .dp-east-meets-west__pillar-text {
	margin-inline: auto;
}

/* The Philosophy inner column was still capped at 1180px inside a 1225px
 * padded wrapper, shifting the three centered pillars to the left. */
body.page-id-469 .dp-philosophy-banner .dp-philosophy-banner__column {
	width: 100% !important;
	max-width: none !important;
}

body.page-id-469 .dp-philosophy__heading {
	text-align: center;
}

/* Task 13: editorial section headings pair the title with commerce links.
 * Keep the links aligned to the right on desktop and let them wrap cleanly on
 * narrow screens without changing the existing card rails. */
.dp-section-heading-row {
	box-sizing: border-box;
	width: min(calc(100% - 2rem), var(--dp-container));
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
	column-gap: clamp(1rem, 3vw, 3rem);
	row-gap: 0.75rem;
}

.dp-section-heading-row .dp-discover-icons__heading,
.dp-section-heading-row .dp-shop-categories__heading {
	box-sizing: border-box;
	width: auto;
	flex: 1 1 auto;
	margin: 0;
	/* Shop by Category sits directly on top of its tiles, so all 20px of slack
	 * belongs below the text to keep it centred in the white band. */
	padding-bottom: 20px;
}

.dp-section-heading-row .dp-section-heading-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.75rem clamp(1rem, 2vw, 2rem);
	margin: 0;
	color: var(--dp-color-ink);
	font-family: var(--dp-font-body);
	font-size: clamp(0.7rem, 0.95vw, 0.9rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	padding-bottom: 20px;
}

/* The Discover rail adds its own 13px top margin, so that row needs the slack
 * split evenly to read as centred inside its band. */
.dp-discover-icons__heading-row .dp-discover-icons__heading,
.dp-discover-icons__heading-row .dp-section-heading-actions {
	padding-block: 10px;
}

.dp-section-heading-row .dp-section-heading-actions a {
	color: var(--dp-color-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.28em;
	white-space: nowrap;
}

.dp-section-heading-row .dp-section-heading-actions a:hover,
.dp-section-heading-row .dp-section-heading-actions a:focus-visible {
	color: var(--dp-color-red);
}

.dp-section-heading-row .dp-section-heading-actions a:focus-visible {
	box-shadow: var(--dp-focus-ring);
	outline: none;
}

/* R08: Discover vertical rhythm is owned by its Otter Section padding.
 * No transform-based text positioning is required. */

@media (max-width: 767px) {
	.dp-section-heading-row {
		width: calc(100% - 1.5rem);
		align-items: baseline;
	}

	.dp-section-heading-row .dp-section-heading-actions {
		font-size: 0.68rem;
	}

	.dp-shop-categories__heading-row .dp-section-heading-actions {
		flex-basis: 100%;
		justify-content: flex-end;
	}
}

/* Task 14: tighten Home V2 section rhythm and make the category rail behave
 * like a campaign carousel on desktop while preserving the two-column mobile
 * grid. The David Yurman reference uses compact white inter-section bands and
 * generous, readable navigation spacing. */
@media (min-width: 768px) {
	/* The Discover heading row is 13px taller than a plain section heading
	 * because it also carries the "Shop all" action. Subtract that difference
	 * from the section's top padding so the white band between the hero and the
	 * product rail matches the band between the rail and The Philosophy. */
	body.page-id-469 .dp-discover-icons {
		padding-block: calc(clamp(1.5rem, 2.0vw, 2.5rem) - 13px) clamp(1.75rem, 2.75vw, 2.75rem) !important;
	}

	body.page-id-469 .dp-philosophy,
	body.page-id-469 .dp-shop-categories,
	body.page-id-469 .dp-east-meets-west,
	body.page-id-469 .dp-symbols-in-life,
	body.page-id-469 .dp-house-journal {
		padding-block: clamp(0.5rem, 0.5vw, 1.5rem) !important;
	}

	body.page-id-469 .dp-shop-categories {
		padding-top: clamp(1.25rem, 1vw, 2rem) !important;
	}

	body.page-id-469 .dp-founders-story {
		padding-block: clamp(1.25rem, 2vw, 2rem) !important;
	}

	body.page-id-469 .dp-final-collection-cta {
		padding-block: clamp(1.25rem, 2vw, 2rem) 0 !important;
	}

	body.page-id-469 .dp-category-rail {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(13.5rem, 18vw);
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	body.page-id-469 .dp-category-card {
		scroll-snap-align: start;
	}
}

@media (max-width: 767px) {
	/* Same 13px heading-row compensation as desktop (12.5px at phone sizes). */
	body.page-id-469 .dp-discover-icons {
		padding-block: calc(1.25rem - 12.5px) 1.75rem !important;
	}

	body.page-id-469 .dp-philosophy,
	body.page-id-469 .dp-shop-categories,
	body.page-id-469 .dp-east-meets-west,
	body.page-id-469 .dp-symbols-in-life,
	body.page-id-469 .dp-house-journal {
		padding-block: 1.5rem !important;
	}

	body.page-id-469 .dp-shop-categories {
		padding-top: 1.25rem !important;
	}

	body.page-id-469 .dp-founders-story {
		padding-block: 1rem !important;
	}

	body.page-id-469 .dp-final-collection-cta {
		padding-block: 1rem 0 !important;
	}
}

/* Task R05: the Shop by Category rail is a native Otter Slider.  Images and
 * captions remain editable from its Gutenberg block settings; CSS supplies
 * only the shared 2:3 presentation. */
body.page-id-469 .dp-category-slider {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

body.page-id-469 .dp-category-slider .glide__track {
	border: 0;
	border-radius: 0;
	overflow: hidden;
}

body.page-id-469 .dp-category-slider .glide__slides {
	height: auto !important;
	align-items: stretch;
}

body.page-id-469 .dp-category-slider .glide__slide {
	height: auto;
	min-width: 0;
}

body.page-id-469 .dp-category-slider .wp-block-themeisle-blocks-slider-item-wrapper figure {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	margin: 0;
	overflow: hidden;
	background: #f7f5f1;
}

body.page-id-469 .dp-category-slider .wp-block-themeisle-blocks-slider-item-wrapper figure img {
	display: block;
	width: 100%;
	height: 100% !important;
	aspect-ratio: 2 / 3;
	object-fit: scale-down;
	mix-blend-mode: normal;
	transition: transform 300ms ease;
}

body.page-id-469 .dp-category-slider .wp-block-themeisle-blocks-slider-item-wrapper:hover figure img,
body.page-id-469 .dp-category-slider .wp-block-themeisle-blocks-slider-item-wrapper:focus-within figure img {
	transform: scale(1.035);
}

body.page-id-469 .dp-category-slider .wp-block-themeisle-blocks-slider-item-wrapper figcaption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.7rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 2.5rem 0.6rem 0.95rem;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.92));
	color: var(--dp-color-ink);
	font-family: var(--dp-font-body);
	font-size: clamp(0.68rem, 0.7vw, 0.9rem);
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.055em;
}

body.page-id-469 .dp-category-slider figcaption > a {
	color: inherit;
	font-style: normal;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

body.page-id-469 .dp-category-slider figcaption > a:hover,
body.page-id-469 .dp-category-slider figcaption > a:focus-visible {
	color: var(--dp-color-red);
}

body.page-id-469 .dp-category-slider .glide__arrows {
	position: absolute;
	top: 43%;
	right: 0.35rem;
	left: 0.35rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

body.page-id-469 .dp-category-slider .glide__arrows .glide__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border: 1px solid rgba(8, 8, 8, 0.18);
	border-radius: 999px;
	background: var(--dp-color-white);
	color: var(--dp-color-red);
	opacity: 0.96;
	box-shadow: 0 0.2rem 0.8rem rgba(8, 8, 8, 0.12);
	pointer-events: auto;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.page-id-469 .dp-category-slider .glide__arrows .glide__arrow:hover,
body.page-id-469 .dp-category-slider .glide__arrows .glide__arrow:focus-visible {
	background: var(--dp-color-red);
	color: var(--dp-color-white);
	transform: scale(1.06);
}

body.page-id-469 .dp-category-slider .glide__arrows .glide__arrow svg {
	fill: currentColor;
}

body.page-id-469 .dp-category-slider .glide__bullets {
	display: none !important;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-category-slider .wp-block-themeisle-blocks-slider-item-wrapper figcaption {
		font-size: 0.72rem;
		letter-spacing: 0.045em;
	}
}

/* Task 16: portrait House Journal imagery and a compact four-column footer.
 * The reference footer keeps one clear heading per column; the inherited
 * Neve rule made the first widget title oversized and visually unbalanced. */

#site-footer .footer-top .hfg-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	column-gap: clamp(1.25rem, 3.5vw, 4rem);
	row-gap: 0;
	align-items: start;
}

#site-footer .footer-top .hfg-slot {
	min-width: 0;
	align-items: flex-start;
}

#site-footer .footer-top .widget-title,
#site-footer .footer-top .hfg-slot:first-child .widget-title {
	margin: 0 0 1.25rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-body);
	font-size: clamp(0.78rem, 0.95vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

#site-footer .dp-footer-wordmark {
	margin: 1.75rem 0 1.5rem;
	font-size: clamp(1.65rem, 2.6vw, 2.35rem);
	letter-spacing: 0.08em;
	line-height: 0.95;
	white-space: nowrap;
}

#site-footer .dp-footer-links {
	gap: 0.7rem;
}

#site-footer .dp-footer-links a,
#site-footer .dp-footer-links span {
	font-size: clamp(0.78rem, 0.9vw, 0.92rem);
}

#site-footer .footer-bottom-inner {
	padding-block: 1.25rem;
}

@media (max-width: 959px) {
	#site-footer .footer-top .hfg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: 2.5rem;
	}
}

@media (max-width: 767px) {
	#site-footer .footer-top .hfg-grid {
		grid-template-columns: 1fr !important;
		row-gap: 2rem;
	}

	#site-footer .dp-footer-wordmark {
		font-size: 2rem;
	}
}

/* Task 17: keep the Founder’s Story campaign image composed as a portrait on
 * mobile. Otter leaves the advanced-column background size at auto there,
 * which crops the supplied artwork before the subject enters the frame. */
@media (max-width: 767px) {
	body.page-id-469 .dp-founders-story__banner {
		min-height: clamp(31rem, 135vw, 36rem) !important;
	}

	body.page-id-469 .dp-founders-story__column {
		align-items: flex-end !important;
	}

	body.page-id-469 .dp-founders-story__content {
		width: 100% !important;
		max-width: none !important;
		padding: 3.5rem 1.25rem 2.5rem !important;
	}

	body.page-id-469 .dp-founders-story .wp-block-button__link {
		border-color: var(--dp-color-red) !important;
		background: var(--dp-color-red) !important;
		color: var(--dp-color-white) !important;
	}
}

/* Task 22: balance editorial copy without obscuring the supplied campaign
 * artwork.  These refinements are scoped to Home V2 so other pages keep the
 * parent theme's typography and spacing. */
@media (min-width: 768px) {
	body.page-id-469 .dp-hero-for-kings__content {
		max-width: 36rem;
	}

	body.page-id-469 .dp-hero-for-kings__tagline {
		max-width: 24rem;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.page-id-469 .dp-founders-story__content {
		align-self: center !important;
		width: min(100%, 44rem) !important;
		height: auto !important;
		max-width: none !important;
		padding: clamp(2.5rem, 5vw, 4.75rem) clamp(2rem, 5vw, 5rem) !important;
	}

	body.page-id-469 .dp-founders-story__title {
		max-width: 100%;
		white-space: nowrap;
	}

	body.page-id-469 .dp-founders-story__text {
		max-width: 38rem;
	}
}

body.page-id-469 .dp-philosophy-banner__column {
	position: relative;
}

body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillars {
		align-items: stretch !important;
		padding-bottom: clamp(5rem, 8vw, 7rem) !important;
}

body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillar {
		display: grid;
		grid-template-rows: auto minmax(7.25rem, auto);
		align-content: end;
	}

body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillar-text {
		align-self: start;
	}

body.page-id-469 .dp-philosophy__audience {
		position: absolute;
		bottom: clamp(1.25rem, 3vw, 2.5rem);
		left: 50%;
		z-index: 2;
		margin: 0;
		color: var(--dp-color-white);
		font-family: var(--dp-font-body);
		font-size: clamp(1rem, 1.8vw, 1.45rem);
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: 1.2;
		text-align: center;
		transform: translateX(-50%);
		white-space: nowrap;
}

body.page-id-469 .dp-final-collection-cta .wp-block-button__link,
body.page-id-469 .dp-final-collection-cta .wp-block-button__link.dp-button {
		border-color: #8e0a1c !important;
		background-color: #8e0a1c !important;
		color: var(--dp-color-white) !important;
}

body.page-id-469 .dp-final-collection-cta .wp-block-button__link:hover,
body.page-id-469 .dp-final-collection-cta .wp-block-button__link:focus-visible {
	border-color: var(--dp-color-red-hover) !important;
	background-color: var(--dp-color-red-hover) !important;
	color: var(--dp-color-white) !important;
}

/* Task 24: keep Vietnamese editorial copy on the body stack. The display
 * face's glyph fallback was splitting accented words (for example “bắt đầu”)
 * at desktop sizes; the body stack renders each word as one consistent run. */
body.page-id-469 .dp-east-meets-west-banner .dp-east-meets-west__pillar-text,
body.page-id-469 .dp-founders-story__text {
	font-family: var(--dp-font-body);
	font-kerning: normal;
	font-variant-ligatures: normal;
	text-rendering: optimizeLegibility;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillars {
		padding-bottom: 5.25rem !important;
	}

	body.page-id-469 .dp-philosophy__audience {
		bottom: 1.25rem;
		font-size: 0.9rem;
	}

	body.page-id-469 .dp-founders-story__title {
		white-space: normal;
	}
}

/* R08: the Philosophy banner uses Otter's bottom vertical alignment instead
 * of translating the complete pillar group out of normal layout. */

/* Keep the Founder's Story CTA aligned with the site's red action buttons. */
body.page-id-469 .dp-founders-story .wp-block-button__link,
body.page-id-469 .dp-founders-story .wp-block-button__link.dp-button {
	border-color: #8e0a1c !important;
	background-color: #8e0a1c !important;
	color: var(--dp-color-white) !important;
}

body.page-id-469 .dp-founders-story .wp-block-button__link:hover,
body.page-id-469 .dp-founders-story .wp-block-button__link:focus-visible {
	border-color: var(--dp-color-red-hover) !important;
	background-color: var(--dp-color-red-hover) !important;
	color: var(--dp-color-white) !important;
}

/* Task 30 follow-up: this needs to follow the earlier spacing pass, which
 * deliberately adds white bands to most homepage sections. The Founder
 * campaign itself is full-bleed on desktop, as supplied in the 16:9 artwork. */
@media (min-width: 768px) {
	body.page-id-469 .dp-founders-story {
		padding-block: 0 !important;
	}
}

/* Task 31: the Philosophy copy stacks on phones. The desktop-only visual
 * offset was also moving the stack past its audience line, which caused the
 * last pillar and "Men's Love Women's" to overlap. Keep that line in normal
 * document flow on mobile, after the three pillars. */
@media (max-width: 767px) {
	body.page-id-469 .wp-block-columns.dp-philosophy__pillars {
		padding: 2.5rem 1.25rem 1.5rem !important;
	}

	body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillar {
		grid-template-rows: none;
		align-content: initial;
	}

	body.page-id-469 .dp-philosophy__audience {
		position: static !important;
		bottom: auto;
		left: auto;
		margin: 0 auto 2rem !important;
		text-align: center;
	}
}

/* Keep the four existing footer groups as a compact two-column grid on
 * phones. The wordmark is placed below the grid, as in the supplied layout. */
@media (max-width: 767px) {
	#site-footer .footer-top .hfg-grid {
		position: relative;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: clamp(1.5rem, 7vw, 3rem);
		row-gap: 2.5rem;
		padding-bottom: 4.5rem;
	}

	#site-footer .footer-top .hfg-slot:not(:first-child) {
		margin-top: 0;
	}

	#site-footer .dp-footer-wordmark {
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0;
		font-size: clamp(1.75rem, 9vw, 2.25rem);
	}
}

/* Task 32: preserve the Philosophy campaign composition on phones with two
 * readable pillars per view. The third pillar remains available by a natural
 * horizontal swipe, while the audience line stays anchored at the image base. */
@media (max-width: 767px) {
	body.page-id-469 .wp-block-columns.dp-philosophy__pillars {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 0.875rem) / 2);
		grid-template-columns: none;
		align-items: center !important;
		justify-content: start !important;
		gap: 0.875rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		touch-action: pan-x;
		padding: 2.25rem 1.25rem 5.25rem !important;
	}

	body.page-id-469 .wp-block-columns.dp-philosophy__pillars::-webkit-scrollbar {
		display: none;
	}

	body.page-id-469 .dp-philosophy-banner .dp-philosophy__pillar {
		min-width: 0;
		scroll-snap-align: start;
	}

	body.page-id-469 .dp-philosophy__audience {
		position: absolute !important;
		bottom: 1.25rem;
		left: 50%;
		z-index: 3;
		margin: 0 !important;
		transform: translateX(-50%);
		white-space: nowrap;
	}
}

/* Make the DON POSEI wordmark a dedicated final footer row, independent of
 * the four navigation groups above it. */
@media (min-width: 768px) {
	#site-footer .footer-top .hfg-grid {
		position: relative;
		padding-bottom: clamp(5rem, 8vw, 8rem);
	}

	#site-footer .dp-footer-wordmark {
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0;
		color: rgba(245, 243, 239, 0.72);
		font-size: clamp(3.25rem, 5vw, 5.75rem);
		line-height: 0.9;
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	#site-footer .footer-top .hfg-grid {
		padding-bottom: 5.25rem;
	}

	#site-footer .dp-footer-wordmark {
		color: rgba(245, 243, 239, 0.72);
		font-size: clamp(3rem, 10vw, 4rem);
		line-height: 0.9;
		white-space: nowrap;
	}
}

/* Neve positions the first widget wrapper, which would otherwise make the
 * wordmark absolute only within the Need Help column. Let the footer grid be
 * its containing block so it occupies the dedicated bottom row. */
#site-footer .footer-top .hfg-slot:first-child > .builder-item,
#site-footer .footer-top .hfg-slot:first-child .item--inner {
	position: static;
}

/* Home end-cap: the editable Otter page can sit inside Neve's constrained
 * content wrapper. Make only its closing CTA escape that wrapper, then reset
 * every trailing edge so the campaign image meets the footer without a white
 * band. This preserves all preceding Gutenberg/Otter sections. */
body.page-id-469 .nv-content-wrap {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body.page-id-469 .dp-final-collection-cta {
	box-sizing: border-box;
	width: 100vw;
	margin: 0 calc(50% - 50vw) !important;
	padding: 0 !important;
}

body.page-id-469 .dp-final-collection-cta__banner {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

#site-footer {
	margin-top: 0 !important;
	border-top: 0;
}

/* Home header: Header Builder remains the content source. On the campaign
 * page it floats over the Hero at rest, then the same menu becomes a solid
 * navigation bar once the visitor scrolls. */
@media (min-width: 1025px) {
	body.page-id-469 .header {
		position: relative;
		z-index: 1600;
	}

	body.page-id-469 #header-grid {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1600;
		width: 100%;
	}

	.header-top {
		position: relative;
		z-index: 2;
		background: #f9f9f9 !important;
		color: var(--dp-color-ink);
	}

	.header-top .header--row-inner {
		background: #f9f9f9 !important;
	}

	.header-top .container,
	body.page-id-469 .header-main .container {
		max-width: none;
		padding-inline: clamp(1.25rem, 3vw, 3.75rem);
	}

	/* The utility bar follows a three-zone layout: locator left, consultation
	 * truly centered in the viewport, and the two actions aligned right. */
	.header-top .container {
		padding-inline: 2.5rem;
	}

	.header-top .row--wrapper {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.header-top .hfg-slot.left {
		grid-column: 1 !important;
	}

	.header-top .row--wrapper {
		min-height: 3.2rem;
	}

	.header-top .hfg-slot.left,
	.header-top .nv-top-bar,
	.header-top .menu-content {
		width: 100%;
	}

	.header-top .hfg-slot.left > .builder-item,
	.header-top .hfg-slot.left .item--inner {
		width: 100%;
	}

	.header-top .menu-content {
		display: block;
	}

	.header-top .nav-ul {
		display: flex;
		align-items: center;
		gap: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		position: relative;
	}

	.header-top .nav-ul > li:first-child {
		margin-right: auto;
	}

	.header-top .nav-ul > li:nth-child(2) {
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
	}

	.header-top .nav-ul > li:nth-child(4) {
		margin-left: 2rem;
	}

	.header-top .nav-ul > li > .wrap > a {
		color: var(--dp-color-ink);
		font-family: var(--dp-font-body);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.07em;
		text-transform: uppercase;
	}

	.header-top .nav-ul > li:nth-child(3) > .wrap > a::before,
	.header-top .nav-ul > li:nth-child(4) > .wrap > a::before {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		height: 1rem;
		margin-right: 0.45rem;
		vertical-align: -0.15rem;
		width: 1rem;
	}

	.header-top .nav-ul > li:nth-child(3) > .wrap > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17h18M5 17c1.4-4.8 3.7-7.2 7-7.2s5.6 2.4 7 7.2M9 9.8h6'/%3E%3C/svg%3E");
	}

	.header-top .nav-ul > li:nth-child(4) > .wrap > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H9l-5 3v-14z'/%3E%3C/svg%3E");
	}

	body.page-id-469 .header-main {
		position: absolute;
		top: 3.2rem;
		left: 0;
		z-index: 1;
		width: 100%;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	body.page-id-469 .header-main .header-main-inner,
	body.page-id-469 .header-main .row--wrapper {
		background: transparent !important;
		border-bottom: 0 !important;
	}

	body.page-id-469 .header-main .row--wrapper {
		min-height: 4.7rem;
	}

	/* At the top of the Hero the nav is transparent; hovering it brings up the
	 * white David Yurman-style navigation surface and keeps that state while a
	 * visitor moves into its mega-menu. */
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within {
		background: var(--dp-color-white) !important;
		box-shadow: none !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .header-main-inner,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .row--wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .header-main-inner,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .row--wrapper {
		background: var(--dp-color-white) !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .nav-ul > li > .wrap > a,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .nv-icon,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .cart-icon-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .wl-icon-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .my-account-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .builder-item--logo .site-logo a.brand,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .nav-ul > li > .wrap > a,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .nv-icon,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .cart-icon-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .wl-icon-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .my-account-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .builder-item--logo .site-logo a.brand {
		color: var(--dp-color-ink) !important;
	}

	/* Keep the top-of-page hover treatment clean: no underline on root menu
	 * labels and no separator rule beneath the navigation row. */
	body.page-id-469:not(.dp-header-is-scrolled) .header-main .primary-menu-ul > li > .wrap > a:hover,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main .primary-menu-ul > li > .wrap > a:focus-visible {
		text-decoration: none !important;
		text-decoration-line: none !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .header-main-inner,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:hover .row--wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .header-main-inner,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main:focus-within .row--wrapper {
		border-bottom: 0 !important;
	}

	body.page-id-469 .header-main .nav-ul > li > .wrap > a,
	body.page-id-469 .header-main .nv-icon,
	body.page-id-469 .header-main .cart-icon-wrapper,
	body.page-id-469 .header-main .wl-icon-wrapper,
	body.page-id-469 .header-main .my-account-wrapper,
	body.page-id-469 .header-main .builder-item--logo .site-logo a.brand {
		color: var(--dp-color-white) !important;
	}

	body.page-id-469 .dp-hero-for-kings {
		width: 100vw;
		max-width: none;
		margin: 0 calc(50% - 50vw) !important;
	}

	body.page-id-469 .nv-content-wrap {
		padding-top: 0 !important;
	}

	body.page-id-469.dp-header-is-scrolled #header-grid {
		position: fixed;
	}

	body.page-id-469.dp-header-is-scrolled .header-top {
		display: none;
	}

	body.page-id-469.dp-header-is-scrolled .header-main {
		position: relative;
		top: 0;
		background: var(--dp-color-white) !important;
		border-bottom: 1px solid rgba(8, 8, 8, 0.1) !important;
		box-shadow: 0 0.35rem 1.15rem rgba(8, 8, 8, 0.08) !important;
	}

	body.page-id-469.dp-header-is-scrolled .header-main .header-main-inner,
	body.page-id-469.dp-header-is-scrolled .header-main .row--wrapper {
		background: var(--dp-color-white) !important;
	}

	body.page-id-469.dp-header-is-scrolled .header-main .nav-ul > li > .wrap > a,
	body.page-id-469.dp-header-is-scrolled .header-main .nv-icon,
	body.page-id-469.dp-header-is-scrolled .header-main .cart-icon-wrapper,
	body.page-id-469.dp-header-is-scrolled .header-main .wl-icon-wrapper,
	body.page-id-469.dp-header-is-scrolled .header-main .my-account-wrapper,
	body.page-id-469.dp-header-is-scrolled .header-main .builder-item--logo .site-logo a.brand {
		color: var(--dp-color-ink) !important;
	}
}

/* R05: editable Otter image sliders for the draft homepage. The source
 * artwork remains intact while the cards use the requested portrait ratios. */
body.page-id-469 .dp-symbols-in-life__slider,
body.page-id-469 .dp-house-journal__slider {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

body.page-id-469 .dp-symbols-in-life__slider .glide__track,
body.page-id-469 .dp-symbols-in-life__slider .glide__slides,
body.page-id-469 .dp-house-journal__slider .glide__track,
body.page-id-469 .dp-house-journal__slider .glide__slides {
	height: auto !important;
}

body.page-id-469 .dp-symbols-in-life__slider .glide__slides,
body.page-id-469 .dp-house-journal__slider .glide__slides {
	align-items: stretch;
}

body.page-id-469 .dp-symbols-in-life__slider .glide__slide,
body.page-id-469 .dp-house-journal__slider .glide__slide {
	height: auto;
	min-width: 0;
}

body.page-id-469 .dp-symbols-in-life__slider .glide__slide figure,
body.page-id-469 .dp-house-journal__slider .glide__slide figure {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--dp-color-paper);
}

body.page-id-469 .dp-symbols-in-life__slider .glide__slide img,
body.page-id-469 .dp-house-journal__slider .glide__slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 350ms cubic-bezier(0.2, 0.65, 0.25, 1), filter 350ms ease;
}

/* Symbols in Life: 273 x 341 at the reference card size. */
body.page-id-469 .dp-symbols-in-life__slider .glide__slide img {
	aspect-ratio: 273 / 341;
}

body.page-id-469 .dp-symbols-in-life__slider .glide__slide figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 3.25rem 1rem 1rem;
	background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 8, 0.68) 100%);
	color: var(--dp-color-white);
	font-family: var(--dp-font-body);
	font-size: clamp(0.85rem, 1.1vw, 1rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
}

body.page-id-469 .dp-symbols-in-life__slider .glide__slide:hover img,
body.page-id-469 .dp-symbols-in-life__slider .glide__slide:focus-within img,
body.page-id-469 .dp-house-journal__slider .glide__slide:hover img,
body.page-id-469 .dp-house-journal__slider .glide__slide:focus-within img {
	filter: saturate(1.08);
	transform: scale(1.06);
}

/* House Journal: requested portrait ratio 347 x 462, kept fluid so the
 * five-up desktop rail and the one-up mobile slide remain responsive. */
body.page-id-469 .dp-house-journal__slider .glide__slide img {
	aspect-ratio: 347 / 462;
	cursor: zoom-in;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-symbols-in-life__slider .glide__slide figcaption {
		padding: 2.75rem 0.85rem 0.85rem;
		font-size: 0.92rem;
	}
}

/* The Discover rail is a native WooCommerce Product Collection on page 469.
 * No product price or custom markup is used: its editable children are the
 * Product Image and Gutenberg Post Title blocks inside the collection. */
body.page-id-469 .dp-discover-products {
	box-sizing: border-box;
	width: 100%;
	margin: 13px 0 0;
	padding-inline: 5px;
}

body.page-id-469 .dp-discover-products .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
}

body.page-id-469 .dp-discover-products .wc-block-product {
	width: 100% !important;
	min-width: 0;
	margin: 0 !important;
	list-style: none;
}

body.page-id-469 .dp-discover-products .dp-discover-product-card {
	display: block !important;
	position: relative;
	width: 100%;
	overflow: hidden;
}

body.page-id-469 .dp-discover-products .wc-block-components-product-image {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: transparent;
}

body.page-id-469 .dp-discover-products .wc-block-components-product-image > a,
body.page-id-469 .dp-discover-products .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: 100%;
}

body.page-id-469 .dp-discover-products .wc-block-components-product-image img {
	/* Crop the source proportionally so every card is filled edge to edge. */
	object-fit: cover !important;
	object-position: center;
	mix-blend-mode: normal;
	transition: transform 280ms ease;
}

body.page-id-469 .dp-discover-products .wc-block-product:hover .wc-block-components-product-image img,
body.page-id-469 .dp-discover-products .wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale(1.035);
}

body.page-id-469 .dp-discover-products .wc-block-components-product-sale-badge {
	display: none;
}

body.page-id-469 .dp-discover-products .wp-block-post-title {
	position: absolute !important;
	inset-inline: 0;
	bottom: 10px;
	z-index: 3;
	margin: 0 !important;
	padding-inline: 0.75rem;
	font-family: var(--dp-font-body);
	font-size: clamp(0.72rem, 0.85vw, 0.9rem);
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
   /* text-shadow: 0 1px 0.4rem rgba(0, 0, 0, 0.45); */
}

body.page-id-469 .dp-discover-products .wp-block-post-title a {
	color: black !important;
	text-decoration: none;
}

body.page-id-469 .dp-discover-products .wp-block-post-title a:hover,
body.page-id-469 .dp-discover-products .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 767px) {
	/* Mobile: turn the 5-up grid into a swipeable slider that shows one card
	 * plus a peek of the next, with the product title below the image. */
	body.page-id-469 .dp-discover-products .wc-block-product-template {
		display: grid !important;
		grid-auto-flow: column;
		grid-template-columns: none !important;
		grid-auto-columns: 78%;
		gap: 14px;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 0 0.25rem;
	}

	body.page-id-469 .dp-discover-products .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}

	body.page-id-469 .dp-discover-products .wc-block-product {
		scroll-snap-align: start;
	}

	/* Keep the product title overlaid at the bottom edge of the image, exactly
	 * like desktop (Discover the Icons and Symbols in Life share this rule).
	 * The card stays overflow:hidden (base rule) so the title sits inside the
	 * image rather than below it. */
	body.page-id-469 .dp-discover-products .wp-block-post-title {
		font-size: 0.82rem;
	}
}

/* The image source files are square, but this native Product Collection is a
 * portrait 4:5 rail. The image link is deliberately pinned to the media frame
 * so no intrinsic-image space can appear above or below the crop. */
body.page-id-469 .dp-discover-products .wc-block-components-product-image {
	display: block !important;
	inline-size: 100% !important;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
}

body.page-id-469 .dp-discover-products .wc-block-components-product-image > a {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	overflow: hidden !important;
}

body.page-id-469 .dp-discover-products .wc-block-components-product-image > a > img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	inline-size: 100% !important;
	block-size: 100% !important;
	max-inline-size: none !important;
	max-block-size: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* This is an editable core Product Button block. Its add-to-cart link is
 * hidden in this visual rail; the installed Sparks wishlist action appended
 * to it is the usable, keyboard-focusable corner control. */
body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist {
	position: absolute !important;
	inset: 0 !important;
	z-index: 4 !important;
	margin: 0 !important;
	pointer-events: none !important;
}

body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist > .wp-block-button__link,
body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .wc-block-components-product-button__view-cart {
	display: none !important;
}

body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap,
body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap {
	position: absolute !important;
	/* Anchor to the card itself, including the final item in the five-card rail. */
	inset: 0.75rem 1rem auto auto !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	float: none !important;
	display: block !important;
	margin: 0 !important;
	pointer-events: auto !important;
}

body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap .add-to-wl,
body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap .add-to-wl {
	display: grid !important;
	place-items: center;
	box-sizing: border-box;
	min-inline-size: 2rem;
	min-block-size: 2rem;
	padding: 0.35rem !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.88) !important;
	color: var(--dp-color-ink) !important;
	box-shadow: 0 0.1rem 0.45rem rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap .add-to-wl:hover,
body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap .add-to-wl:focus-visible,
body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap .add-to-wl:hover,
body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap .add-to-wl:focus-visible {
	background: var(--dp-color-red) !important;
	color: var(--dp-color-white) !important;
	outline: 2px solid var(--dp-color-white);
	outline-offset: 2px;
}

body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap svg,
body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap svg {
	inline-size: 1.1rem !important;
	block-size: 1.1rem !important;
}

@media (hover: hover) and (pointer: fine) {
	body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap,
	body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap {
		opacity: 0;
		transition: opacity 180ms ease;
	}

	body.page-id-469 .dp-discover-products .wc-block-product:hover .dp-discover-product-card__wishlist .sp-wl-wrap,
	body.page-id-469 .dp-discover-products .wc-block-product:focus-within .dp-discover-product-card__wishlist .sp-wl-wrap,
	body.page-id-469 .dp-discover-products .dp-discover-product-card__wishlist .sp-wl-wrap:focus-within,
	body.page-id-469 .dp-discover-products .wc-block-product:hover .dp-discover-product-card > .sp-wl-wrap,
	body.page-id-469 .dp-discover-products .wc-block-product:focus-within .dp-discover-product-card > .sp-wl-wrap,
	body.page-id-469 .dp-discover-products .dp-discover-product-card > .sp-wl-wrap:focus-within {
		opacity: 1;
	}
}

/* Keep the Discover the Icons rail directly connected to The Philosophy.
 * The product rail supplies its own visual endpoint, so an additional
 * section-level spacer only creates an empty band between the two sections. */
body.page-id-469 .dp-discover-icons {
	padding-bottom: 0 !important;
}

body.page-id-469 .dp-philosophy {
	padding-top: 12px !important;
}

/* Page 469: align the editorial section-title bands with Discover the Icons.
 * Keep the Otter sections, their background media and their inner rails intact;
 * this only normalizes the white heading band above each section. */
@media (min-width: 768px) {
	body.page-id-469 .dp-philosophy,
	body.page-id-469 .dp-east-meets-west,
	body.page-id-469 .dp-symbols-in-life,
	body.page-id-469 .dp-house-journal {
		margin: 0;
		padding-top: clamp(1.5rem, 2vw, 2.5rem) !important;
		padding-bottom: 0 !important;
	}

	body.page-id-469 .dp-philosophy__heading,
	body.page-id-469 .dp-east-meets-west__heading,
	body.page-id-469 .dp-symbols-in-life__heading,
	body.page-id-469 .dp-house-journal__heading {
		box-sizing: border-box;
		width: min(calc(100% - 2rem), var(--dp-container));
		margin: 0 auto 20px !important;
		text-align: center !important;
	}
}

@media (max-width: 767px) {
	body.page-id-469 .dp-philosophy,
	body.page-id-469 .dp-east-meets-west,
	body.page-id-469 .dp-symbols-in-life,
	body.page-id-469 .dp-house-journal {
		margin: 0;
		padding-top: 1.25rem !important;
		padding-bottom: 0 !important;
	}

	body.page-id-469 .dp-philosophy__heading,
	body.page-id-469 .dp-east-meets-west__heading,
	body.page-id-469 .dp-symbols-in-life__heading,
	body.page-id-469 .dp-house-journal__heading {
		margin: 0 auto 20px !important;
		text-align: center !important;
	}
}

/* ============================================================
 * Symbols in Life product rail — match Discover the Icons 100%.
 * The Symbols in Life products now use a WooCommerce Product Collection that
 * carries the same `.dp-discover-products` class as Discover the Icons, so it
 * inherits the identical 5-column grid, 10px gap, 4:5 image crop, absolute
 * product title and Sparks wishlist styling. The only extra work needed is to
 * give the Symbols Otter Section the same full-bleed container as Discover so
 * the rail width — and therefore the card size and the spacing between the
 * product images — is pixel-identical.
 * ============================================================ */

/* Symbols in Life sits in a full-width section (same as The Philosophy and
 * East Meets West), so its Otter frame fills that section edge to edge. Using
 * width:100% (not 100vw) avoids the scrollbar-width horizontal overflow that a
 * 100vw break-out would introduce. Matches the .dp-east-meets-west-banner and
 * .dp-founders-story__banner full-bleed rule. */
body.page-id-469 .dp-symbols-in-life__frame {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Constrain the inner content to the shared DON POSEI container and centre it,
 * exactly like `.dp-discover-icons .innerblocks-wrap`. Mobile keeps the
 * existing full-width behaviour handled elsewhere in this stylesheet. */
@media (min-width: 768px) {
	body.page-id-469 .dp-symbols-in-life__frame .innerblocks-wrap {
		box-sizing: border-box;
		width: min(100%, var(--dp-container)) !important;
		max-width: none !important;
		margin-inline: auto !important;
	}
}

/* The Symbols rail supplies its own visual endpoint just like Discover, so it
 * should sit flush against the following section rather than adding an empty
 * band below the products. */
body.page-id-469 .dp-symbols-in-life .dp-discover-products {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
 * Founder's Story spacing + CTA sizing follow-up.
 * ------------------------------------------------------------ */

/* Add a white gap above the Founder's Story banner so it no longer butts
 * directly against the Symbols in Life product rail. The 16:9 banner stays
 * full-bleed; only a top band is added. padding-bottom stays 0 so the section
 * still meets The House Journal exactly as before. */
@media (min-width: 768px) {
	body.page-id-469 .dp-founders-story {
		padding-top: clamp(2rem, 4vw, 1.5rem) !important;
	}
}

/* Make the "Our Story" CTA box a little more compact than the default rail
 * button (was 0.9rem 1.35rem). */
body.page-id-469 .dp-founders-story .wp-block-button__link,
body.page-id-469 .dp-founders-story .wp-block-button__link.dp-button {
	padding: 0.62rem 1.1rem !important;
	font-size: 0.72rem !important;
}

/* Add a white gap above the Final Collection CTA ("Find the one that speaks to
 * you") so it no longer butts directly against The House Journal images.
 * Only padding-top is added; padding-bottom stays 0 so the CTA banner still
 * meets the footer flush. */
body.page-id-469 .dp-final-collection-cta {
	padding-top: clamp(2rem, 4vw, 3rem) !important;
}

/* ============================================================
 * At Your Service / Join the World of DON POSEI
 * A light utility band placed after The House Journal, before the Final CTA.
 * ============================================================ */
body.page-id-469 .dp-service-join {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
	background: #f9f9f9;
	color: var(--dp-color-ink);
}

body.page-id-469 .dp-service-join__heading {
	margin: 0 auto;
	color: var(--dp-color-ink);
	font-family: var(--dp-font-body);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

/* Row of five service promises with line icons. */
body.page-id-469 .dp-service-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	width: min(100%, 1100px);
	margin: clamp(2rem, 4vw, 3.25rem) auto 0;
}

body.page-id-469 .dp-service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	width: 9rem;
	text-align: center;
}

body.page-id-469 .dp-service-item__icon {
	display: inline-flex;
	margin: 0;
	color: var(--dp-color-ink);
}

body.page-id-469 .dp-service-item__icon img {
	display: block;
	width: 42px;
	height: 42px;
}

body.page-id-469 .dp-service-item__label {
	margin: 0;
	font-family: var(--dp-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--dp-color-ink);
}

body.page-id-469 .dp-service-join__heading--join {
	margin-top: clamp(3rem, 6vw, 5rem);
}

/* Newsletter signup rebuilt with native Otter Form blocks. */
body.page-id-469 .dp-join-form {
	width: min(100%, 30rem);
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
}

body.page-id-469 .dp-join-form .otter-form__container {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
}

body.page-id-469 .dp-join-form__field {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

body.page-id-469 .dp-join-form .otter-form-input-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.page-id-469 .dp-join-form .otter-form__container .wp-block-themeisle-blocks-form-input .otter-form-input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	height: 3rem;
	padding: 0 1rem;
	border: 1px solid rgba(8, 8, 8, 0.35);
	border-right: 0;
	border-radius: 0;
	background: #fff;
	color: var(--dp-color-ink);
	font-family: var(--dp-font-body);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.page-id-469 .dp-join-form .otter-form__container .wp-block-themeisle-blocks-form-input .otter-form-input::placeholder {
	color: rgba(8, 8, 8, 0.5);
}

body.page-id-469 .dp-join-form .otter-form__container .wp-block-themeisle-blocks-form-input .otter-form-input:focus-visible {
	outline: none;
	border-color: var(--dp-color-ink);
	box-shadow: var(--dp-focus-ring);
}

body.page-id-469 .dp-join-form .wp-block-button {
	flex: 0 0 auto;
	margin: 0;
}

body.page-id-469 .dp-join-form .otter-form__container .wp-block-button .wp-block-button__link {
	height: 3rem;
	padding: 0 1.85rem;
	border: 1px solid var(--dp-color-ink);
	border-radius: 0;
	background: var(--dp-color-ink);
	color: #fff;
	font-family: var(--dp-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

body.page-id-469 .dp-join-form .otter-form__container .wp-block-button .wp-block-button__link:hover,
body.page-id-469 .dp-join-form .otter-form__container .wp-block-button .wp-block-button__link:focus-visible {
	border-color: var(--dp-color-red);
	background: var(--dp-color-red);
}

body.page-id-469 .dp-join-form__note {
	max-width: 40rem;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
	color: var(--dp-color-muted);
	font-family: var(--dp-font-body);
	font-size: 0.72rem;
	line-height: 1.6;
	text-align: center;
}

/* Requested 5px gap between this section and the Final Collection CTA.
 * (Supersedes the earlier House Journal -> CTA spacing, now that this section
 * sits directly above the CTA.) padding-bottom stays 0 for the footer flush. */
body.page-id-469 .dp-final-collection-cta {
	padding-top: 5px !important;
}

@media (max-width: 767px) {
	body.page-id-469 .dp-service-join {
		padding: clamp(2.25rem, 8vw, 3rem) 1.25rem;
	}

	body.page-id-469 .dp-service-grid {
		gap: 1.75rem 1.25rem;
	}

	body.page-id-469 .dp-service-item {
		width: 7.5rem;
	}

	body.page-id-469 .dp-join-form {
		width: 100%;
	}
}

/* ============================================================
 * Footer follow-up: tighter link spacing + bottom-right legal links.
 * ============================================================ */

/* Tighten the vertical gap between footer navigation links (~5px). The list
 * items carry a default 10px top margin from the theme, so zero it and let the
 * 5px grid gap alone control the spacing. */
#site-footer .dp-footer-links {
	gap: 5px;
}

#site-footer .dp-footer-links li {
	margin: 0;
	padding: 0;
}

/* Legal links pinned to the bottom-right of the footer grid, opposite the
 * DON POSEI wordmark (which sits bottom-left), like davidyurman.com. The last
 * footer slot's wrappers are made static so the list positions against the
 * grid rather than its own slot. */
#site-footer .footer-top .hfg-slot:last-child > .builder-item,
#site-footer .footer-top .hfg-slot:last-child .item--inner {
	position: static;
}

#site-footer .dp-footer-legal {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
}

#site-footer .dp-footer-legal__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.4rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#site-footer .dp-footer-legal__row li {
	margin: 0;
}

#site-footer .dp-footer-legal a {
	color: rgba(245, 243, 239, 0.72);
	font-family: var(--dp-font-body);
	font-size: clamp(0.62rem, 0.72vw, 0.72rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

#site-footer .dp-footer-legal a:hover,
#site-footer .dp-footer-legal a:focus-visible {
	color: var(--dp-color-white);
}

/* On phones the grid stacks, so let the legal links flow normally instead of
 * pinning them to a corner. */
@media (max-width: 767px) {
	#site-footer .dp-footer-legal {
		position: static;
		align-items: flex-start;
		width: 100%;
		margin-top: 1.75rem;
	}

	#site-footer .dp-footer-legal__row {
		justify-content: flex-start;
	}
}

/* ============================================================
 * Footer: social icons moved under Follow Us; bottom bar retired.
 * ============================================================ */

/* Retire the separate footer bottom row. Its social icons now live under the
 * Follow Us column and its copyright is relocated into the legal block. */
#site-footer .footer-bottom {
	display: none !important;
}

/* Social icons directly under the Follow Us links. */
#site-footer .footer-top .dp-follow-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 1.15rem 0 0;
	padding: 0;
	list-style: none;
}

#site-footer .footer-top .dp-follow-social li {
	margin: 0;
	padding: 0;
}

#site-footer .footer-top .dp-follow-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 4px;
	/* fill (#fff) and background (#8E0A1C) come from the inline style. */
}

#site-footer .footer-top .dp-follow-social svg {
	width: 0.95rem !important;
	height: 0.95rem !important;
}

/* Copyright relocated below the legal links (bottom-right). */
#site-footer .dp-footer-copyright {
	margin-top: 0.4rem;
	color: rgba(245, 243, 239, 0.55);
	font-family: var(--dp-font-body);
	font-size: clamp(0.6rem, 0.7vw, 0.7rem);
	letter-spacing: 0.06em;
	text-align: right;
}

@media (max-width: 767px) {
	#site-footer .dp-footer-copyright {
		text-align: left;
	}
}

/* ============================================================
 * Footer mobile accordions (davidyurman.com style).
 * Desktop/tablet keep the static expanded columns; phones collapse each menu
 * into a tap-to-open row. Built with native <details>/<summary> so no
 * JavaScript is needed.
 * ============================================================ */

/* Summary headings inherit the footer column heading look. */
#site-footer .dp-footer-acc__title {
	margin: 0 0 1.25rem;
	color: var(--dp-color-white);
	font-family: var(--dp-font-body);
	font-size: clamp(0.78rem, 0.95vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	list-style: none;
}

#site-footer .dp-footer-acc__title::-webkit-details-marker { display: none; }
#site-footer .dp-footer-acc__title::marker { content: ""; }
#site-footer .dp-footer-acc { margin: 0; }

/* --- Desktop / tablet: always expanded, no chevron, non-interactive --- */
@media (min-width: 768px) {
	/* Older engines (Firefox/Safari/older Chrome) hide closed <details>
	 * content by setting display:none on the children. */
	#site-footer .dp-footer-acc > .dp-footer-links {
		display: grid !important;
        font-size: 12px;
	}
	/* Chrome 128+ hides it via the ::details-content pseudo-element instead. */
	#site-footer .dp-footer-acc::details-content {
		content-visibility: visible !important;
	}
	#site-footer .dp-footer-acc__title {
		cursor: default;
		pointer-events: none;
	}
	#site-footer .dp-footer-acc__title::after {
		display: none;
	}
}

/* --- Mobile: single-column tap-to-open accordions --- */
@media (max-width: 767px) {
	#site-footer .footer-top .hfg-grid {
		grid-template-columns: 1fr !important;
		row-gap: 0 !important;
		padding-bottom: 2.5rem !important;
	}

	#site-footer .footer-top .hfg-slot {
		align-items: stretch;
	}

	/* Accordion rows separated by thin dividers. */
	#site-footer .dp-footer-acc {
		border-top: 1px solid rgba(245, 243, 239, 0.14);
	}

	#site-footer .footer-top .hfg-slot:first-child .dp-footer-acc {
		border-top: 0;
	}

	#site-footer .dp-footer-acc__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 1.15rem 0.25rem;
		cursor: pointer;
	}

	/* Down chevron that flips up when the row is open. */
	#site-footer .dp-footer-acc__title::after {
		content: "";
		flex: 0 0 auto;
		width: 0.55rem;
		height: 0.55rem;
		margin-right: 0.35rem;
		border-right: 1.5px solid rgba(245, 243, 239, 0.85);
		border-bottom: 1.5px solid rgba(245, 243, 239, 0.85);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 220ms ease;
	}
	#site-footer .dp-footer-acc[open] .dp-footer-acc__title::after {
		transform: translateY(2px) rotate(-135deg);
	}

	#site-footer .dp-footer-acc > .dp-footer-links {
		padding: 0 0.25rem 1.2rem;
	}

	/* Follow Us: centered block, not an accordion (icons stay visible). */
	#site-footer .footer-top .hfg-slot:last-child .widget-area {
		border-top: 1px solid rgba(245, 243, 239, 0.14);
		margin-top: 0;
		padding-top: 1.75rem;
		text-align: center;
	}

	#site-footer .footer-top .hfg-slot:last-child .widget-title {
		margin-bottom: 1.1rem;
		text-align: center;
	}

	#site-footer .footer-top .hfg-slot:last-child .dp-footer-links {
		justify-items: center;
	}

	#site-footer .footer-top .dp-follow-social {
		justify-content: center;
	}

	/* Legal links + copyright centered under Follow Us. */
	#site-footer .dp-footer-legal {
		position: static;
		align-items: center;
		width: 100%;
		margin-top: 1.75rem;
	}

	#site-footer .dp-footer-legal__row {
		justify-content: center;
	}

	#site-footer .dp-footer-copyright {
		text-align: center;
	}

	/* The oversized wordmark does not fit a phone column; hide it here. */
	#site-footer .dp-footer-wordmark {
		display: none !important;
	}
}

/* ============================================================
 * Shop by Category — mobile: 2-column grid instead of the slider,
 * and hide the "Shop Women's / Shop Men's" heading links.
 * ============================================================ */
@media (max-width: 767px) {
	/* Neutralise the Glide slider and lay the six category tiles out as a
	 * static 2-up grid (Glide's inline transform/width are overridden). */
	body.page-id-469 .dp-category-slider .glide__track {
		overflow: visible !important;
	}

	body.page-id-469 .dp-category-slider .glide__slides {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		width: 100% !important;
		transform: none !important;
		transition: none !important;
	}

	body.page-id-469 .dp-category-slider .glide__slide {
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	/* Glide clones the slides for its desktop loop; hide the clones so the
	 * mobile grid shows only the six real categories (Rings, Bracelets,
	 * Talismans, Chains, Wedding, Earrings) with no duplicates. */
	body.page-id-469 .dp-category-slider .glide__slide--clone {
		display: none !important;
	}

	/* No arrows in grid mode. */
	body.page-id-469 .dp-category-slider .glide__arrows {
		display: none !important;
	}

	/* Hide the Shop Women's / Shop Men's shortcuts on phones. */
	body.page-id-469 .dp-shop-categories__heading-row .dp-section-heading-actions {
		display: none !important;
	}
}

/* ============================================================
 * Mobile refinements: At Your Service + The House Journal.
 * ============================================================ */

/* At Your Service: drop the fifth promise ("Complimentary Gift Boxes") on
 * phones so the remaining four sit as a tidy 2x2. Desktop keeps all five. */
@media (max-width: 767px) {
	body.page-id-469 .dp-service-grid .dp-service-item:nth-child(5) {
		display: none;
	}
}

/* The House Journal: on phones present the images as a swipeable slider
 * (one image plus a peek of the next), matching the Symbols in Life / Discover
 * mobile rails. Desktop keeps the five-up Otter slider untouched. */
@media (max-width: 767px) {
	body.page-id-469 .dp-house-journal__slider .glide__track {
		overflow: visible !important;
	}

	body.page-id-469 .dp-house-journal__slider .glide__slides {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-template-columns: none !important;
		grid-auto-columns: 78% !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		transform: none !important;
		transition: none !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		/* Glide core CSS forces touch-action: pan-y, which blocks horizontal
		 * swiping. Restore normal touch handling so the rail can be swiped. */
		touch-action: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}

	body.page-id-469 .dp-house-journal__slider .glide__slides::-webkit-scrollbar {
		display: none;
	}

	body.page-id-469 .dp-house-journal__slider .glide__slide {
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	/* Hide Glide loop clones and arrows in the scroll layout. */
	body.page-id-469 .dp-house-journal__slider .glide__slide--clone {
		display: none !important;
	}

	body.page-id-469 .dp-house-journal__slider .glide__arrows {
		display: none !important;
	}
}

/* ============================================================
 * Founder's Story — mobile portrait artwork + centered copy.
 * Desktop keeps the 16:9 campaign banner untouched.
 * ============================================================ */
@media (max-width: 767px) {
	/* Dedicated mobile image (1201x1501 source, rendered ~430x538) so the
	 * face reads clearly and stays sharp. Overrides the Otter block background
	 * on phones only. */
	body.page-id-469 .dp-founders-story__banner {
		aspect-ratio: 430 / 538 !important;
		min-height: 0 !important;
		height: auto !important;
		background-image: url("assets/images/section-dp-founders-story-mb.webp") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	/* Replace the flat 66% overlay with a bottom-only gradient: the portrait
	 * stays clear while the copy remains readable. */
	body.page-id-469 .dp-founders-story__banner > .wp-block-themeisle-blocks-advanced-columns-overlay {
		opacity: 1 !important;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.25) 66%, rgba(0, 0, 0, 0.66) 100%) !important;
	}

	/* Fill the aspect-ratio banner so the copy can anchor to the bottom. */
	body.page-id-469 .dp-founders-story__banner > .innerblocks-wrap {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
		min-height: 0 !important;
		display: flex !important;
	}

	body.page-id-469 .dp-founders-story__column {
		height: 100% !important;
		min-height: 0 !important;
		align-items: flex-end !important;
	}

	body.page-id-469 .dp-founders-story__content {
		width: 100% !important;
		max-width: none !important;
		margin: 0 auto !important;
		padding: 0 1.25rem 10px !important;
		text-align: center !important;
	}

	body.page-id-469 .dp-founders-story__text {
		max-width: 26rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.page-id-469 .dp-founders-story__actions {
		justify-content: center !important;
		text-align: center !important;
		padding-bottom: 10px;
	}
}

/* ============================================================
 * Final CTA button: make it compact like the Founder's Story button
 * across mobile, tablet and desktop.
 * ============================================================ */
body.page-id-469 .dp-final-collection-cta .wp-block-button__link,
body.page-id-469 .dp-final-collection-cta .wp-block-button__link.dp-button {
	padding: 0.62rem 1.1rem !important;
	font-size: 0.72rem !important;
}
@media (max-width: 768px) {
	body.page-id-469 .dp-hero-for-kings {
		background-position: 70% 50% !important;
	}
}

/* ============================================================
 * Hero (For Kings) refresh: no eyebrow, brighter artwork, capped heights,
 * mobile copy centered at the bottom.
 * ============================================================ */

/* Remove the "The House of DON POSEI" eyebrow on every viewport. */
body.page-id-469 .dp-hero-for-kings__content .dp-eyebrow {
	display: none !important;
}

/* Keep the artwork bright: replace the flat ~58% dark overlay with a light
 * gradient that only shades the area behind the copy (left band on desktop). */
body.page-id-469 .dp-hero-for-kings > .wp-block-themeisle-blocks-advanced-columns-overlay {
	opacity: 1 !important;
	background: linear-gradient(to right, rgba(8, 8, 8, 0.52) 0%, rgba(8, 8, 8, 0.2) 42%, rgba(8, 8, 8, 0) 66%) !important;
}

@media (min-width: 768px) {
	/* Desktop: show the FULL original banner image with no cropping. The box
	 * takes the image's native 2881x1201 ratio, so the height follows the
	 * full-bleed 100vw width (~600px at 1440px) and cover == the whole image. */
	body.page-id-469 .dp-hero-for-kings {
		aspect-ratio: 2881 / 1201 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
}

@media (max-width: 767px) {
	/* Mobile: taller framing between 350px and 756px. */
	body.page-id-469 .dp-hero-for-kings {
		min-height: 350px !important;
		height: min(84vh, 756px) !important;
		max-height: 756px !important;
	}

	/* Bottom gradient for the centered copy; keeps the top of the image bright. */
	body.page-id-469 .dp-hero-for-kings > .wp-block-themeisle-blocks-advanced-columns-overlay {
		background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 45%, rgba(8, 8, 8, 0.18) 68%, rgba(8, 8, 8, 0.6) 100%) !important;
	}

	/* Copy centered along the bottom, like the illustration. */
	body.page-id-469 .dp-hero-for-kings .innerblocks-wrap {
		align-items: flex-end !important;
	}

	body.page-id-469 .dp-hero-for-kings__content {
		width: 100% !important;
		max-width: none !important;
		margin: 0 auto !important;
		padding: 0 1.25rem 2.25rem !important;
		text-align: center !important;
	}

	body.page-id-469 .dp-hero-for-kings__tagline {
		max-width: 26rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.page-id-469 .dp-hero-for-kings .dp-button-group {
		justify-content: center !important;
	}
}

/* ------------------------------------------------------------------ *
 * Turn fixes 2026-08-29 (v1.0.66)
 * ------------------------------------------------------------------ */

/* Founder's Story: remove the flat dark wash on desktop so the portrait shows
 * at the source brightness. Keep only a soft left-side gradient behind the
 * left-aligned copy for legibility; the right side (the face) stays clear. */
@media (min-width: 768px) {
	body.page-id-469 .dp-founders-story__banner > .wp-block-themeisle-blocks-advanced-columns-overlay {
		opacity: 1 !important;
		background: linear-gradient(to right, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.2) 40%, rgba(8, 8, 8, 0) 65%) !important;
	}
}

/* ================================================================== *
 * DON POSEI mega menu - David Yurman layout (v1.0.67)
 * Collection featured-image variant, mobile accordion toggle.
 * ================================================================== */

/* Caret button - hidden on desktop (hover/focus opens the panel via CSS). */
.dp-mega-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.dp-mega-toggle__icon {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

@media (min-width: 1025px) {
	/* ---- Collection layout: centered FEATURED COLLECTIONS row. ---- */
	.header-main.hide-on-mobile .dp-mega-menu--collection .dp-mega-menu__inner {
		display: block;
		text-align: center;
		max-width: 1400px;
	}

	.dp-mega-menu__collection-title {
		margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem);
		color: var(--dp-color-ink);
		font-family: var(--dp-font-body);
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.header-main.hide-on-mobile .dp-mega-menu__collection-title {
		color: var(--dp-color-ink) !important;
	}

	.dp-mega-menu__collection-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(0.75rem, 1.4vw, 1.35rem);
	}

	.dp-mega-menu__ccard {
		position: relative;
		display: block;
		overflow: hidden;
		background: var(--dp-color-ink);
		text-decoration: none;
	}

	.dp-mega-menu__ccard img {
		display: block;
		width: 100%;
		height: clamp(14rem, 20vw, 21rem);
		object-fit: cover;
		transition: transform 400ms ease;
	}

	.dp-mega-menu__ccard::after {
		content: "";
		position: absolute;
		inset: 45% 0 0;
		background: linear-gradient(transparent, rgba(8, 8, 8, 0.72));
	}

	.dp-mega-menu__ccard:hover img,
	.dp-mega-menu__ccard:focus-visible img {
		transform: scale(1.04);
	}

	.dp-mega-menu__ccard-body {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1.15rem;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.3rem;
	}

	.dp-mega-menu__ccard-title,
	.header-main.hide-on-mobile .dp-mega-menu__ccard-title {
		color: var(--dp-color-white) !important;
		font-family: var(--dp-font-body);
		font-size: clamp(0.78rem, 0.95vw, 0.95rem);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.dp-mega-menu__ccard-cta,
	.header-main.hide-on-mobile .dp-mega-menu__ccard-cta {
		color: var(--dp-color-white) !important;
		font-family: var(--dp-font-body);
		font-size: 0.66rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-decoration: underline;
		text-underline-offset: 0.28em;
	}

	.dp-mega-menu__collection-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: clamp(1.5rem, 3vw, 3rem);
		margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
	}

	.dp-mega-menu__collection-link,
	.header-main.hide-on-mobile .dp-mega-menu__collection-link {
		flex: 0 0 auto !important;
		width: auto !important;
		color: var(--dp-color-ink) !important;
		font-family: var(--dp-font-body);
		font-size: 0.74rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.dp-mega-menu__collection-link:hover,
	.dp-mega-menu__collection-link:focus-visible {
		color: var(--dp-color-red-hover) !important;
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

@media (max-width: 1024px) {
	/* Row header: label on the left, caret button on the right. */
	.dp-mega-parent > .wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dp-mega-parent > .wrap > a {
		flex: 1 1 auto;
	}

	.dp-mega-toggle {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.dp-mega-parent.is-open > .wrap .dp-mega-toggle__icon {
		transform: rotate(-135deg);
	}

	/* Collapsed panels animate open via the existing .is-open rule. */
	.dp-mega-menu__collection-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
		padding: 0.5rem 1rem 0.75rem;
	}

	.dp-mega-menu__ccard {
		position: relative;
		display: block;
		overflow: hidden;
	}

	.dp-mega-menu__ccard img {
		display: block;
		width: 100%;
		height: 9rem;
		object-fit: cover;
	}

	.dp-mega-menu__ccard::after {
		content: "";
		position: absolute;
		inset: 45% 0 0;
		background: linear-gradient(transparent, rgba(8, 8, 8, 0.72));
	}

	.dp-mega-menu__ccard-body {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.55rem;
		z-index: 1;
		text-align: center;
	}

	.dp-mega-menu__ccard-title {
		display: block;
		color: var(--dp-color-white);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.dp-mega-menu__ccard-cta {
		display: block;
		margin-top: 0.15rem;
		color: var(--dp-color-white);
		font-size: 0.58rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: underline;
	}

	.dp-mega-menu__collection-title {
		margin: 0;
		padding: 0.85rem 1rem 0.2rem;
		color: var(--dp-color-red);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.dp-mega-menu__collection-links {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		padding: 0.4rem 1rem 1rem;
	}

	.dp-mega-menu__collection-link {
		color: var(--dp-color-ink);
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.dp-mega-menu__featured {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		padding: 0.5rem 1rem 1rem;
	}

	.dp-mega-menu__group + .dp-mega-menu__group {
		margin-top: 1.1rem;
	}

	.dp-mega-menu__group-title {
		display: block;
		margin: 0 0 0.4rem;
		color: var(--dp-color-ink);
		font-size: 0.86rem;
		font-weight: 600;
		text-transform: none;
	}
}

/* Mobile mega panels sit on a white background inside the dark off-canvas
 * sidebar, so force readable ink text (Neve's sidebar sets light link colours
 * that would otherwise wash the panel out). Featured card captions stay white. */
@media (max-width: 1024px) {
	.header-menu-sidebar .dp-mega-menu,
	.header-main.hide-on-desktop .dp-mega-menu,
	.header-menu-sidebar-inner .dp-mega-menu {
		color: var(--dp-color-ink);
	}

	.header-menu-sidebar .dp-mega-menu__links a,
	.header-menu-sidebar .dp-mega-menu__group-title,
	.header-menu-sidebar .dp-mega-menu__collection-link,
	.header-main.hide-on-desktop .dp-mega-menu__links a,
	.header-main.hide-on-desktop .dp-mega-menu__group-title,
	.header-main.hide-on-desktop .dp-mega-menu__collection-link,
	.header-menu-sidebar-inner .dp-mega-menu__links a,
	.header-menu-sidebar-inner .dp-mega-menu__group-title,
	.header-menu-sidebar-inner .dp-mega-menu__collection-link {
		color: var(--dp-color-ink) !important;
		opacity: 1 !important;
		filter: none !important;
	}

	.header-menu-sidebar .dp-mega-menu__column-title,
	.header-main.hide-on-desktop .dp-mega-menu__column-title,
	.header-menu-sidebar-inner .dp-mega-menu__column-title {
		color: rgba(8, 8, 8, 0.55) !important;
		opacity: 1 !important;
	}

	.header-menu-sidebar .dp-mega-menu__ccard-title,
	.header-menu-sidebar .dp-mega-menu__ccard-cta,
	.header-main.hide-on-desktop .dp-mega-menu__ccard-title,
	.header-main.hide-on-desktop .dp-mega-menu__ccard-cta,
	.header-menu-sidebar-inner .dp-mega-menu__ccard-title,
	.header-menu-sidebar-inner .dp-mega-menu__ccard-cta {
		color: var(--dp-color-white) !important;
		opacity: 1 !important;
	}
}

/* ================================================================== *
 * DON POSEI mega menu - illustration render sizes (v1.0.69)
 * All cards render at a 4:5 aspect ratio; World of DP uses one 300x500.
 * ================================================================== */
@media (min-width: 1025px) {
	/* Featured rail hugs its cards (each a 4:5 portrait). */
	.dp-mega-menu--has-featured .dp-mega-menu__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.header-main.hide-on-mobile .dp-mega-menu__featured {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.header-main.hide-on-mobile .dp-mega-menu__card {
		flex: 0 0 auto;
		width: 251px;
		height: auto;
		min-height: 0;
	}

	.header-main.hide-on-mobile .dp-mega-menu__card img {
		width: 251px;
		height: auto;
		aspect-ratio: 4 / 5;
		min-height: 0;
		object-fit: cover;
	}

	/* Collection cards share the same 4:5 render size, centered. */
	.header-main.hide-on-mobile .dp-mega-menu__collection-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: clamp(0.85rem, 1.4vw, 1.35rem);
	}

	.header-main.hide-on-mobile .dp-mega-menu__ccard {
		flex: 0 0 auto;
		width: 251px;
	}

	.header-main.hide-on-mobile .dp-mega-menu__ccard img {
		width: 251px;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}

	/* ---- World of DP: single large portrait image (300x500). ---- */
	.header-main.hide-on-mobile .dp-mega-menu--featured-wide .dp-mega-menu__featured {
		display: block;
	}

	.header-main.hide-on-mobile .dp-mega-menu--featured-wide .dp-mega-menu__card,
	.header-main.hide-on-mobile .dp-mega-menu--featured-wide .dp-mega-menu__card img {
		width: 500px;
		height: 300px;
		max-width: none;
		min-height: 0;
	}

	.header-main.hide-on-mobile .dp-mega-menu--featured-wide .dp-mega-menu__card img {
		aspect-ratio: auto;
		object-fit: cover;
	}
}

@media (max-width: 1024px) {
	/* World of DP thumbnail keeps a 3:5 portrait in the mobile accordion. */
	.dp-mega-menu--featured-wide .dp-mega-menu__card img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 5;
		object-fit: cover;
	}
}

/* ================================================================== *
 * DON POSEI mobile header + off-canvas menu (v1.0.71)
 * Sticky white header bar; white David Yurman-style slide-out menu.
 * ================================================================== */
@media (max-width: 1024px) {
	/* ---- Sticky mobile header ----
	 * A .wrapper ancestor uses overflow:hidden which disables position:sticky,
	 * so the bar is fixed to the viewport and its parent reserves the space. */
	#header-grid {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 99999 !important;
	}

	header.header {
		min-height: 64px;
	}

	/* ---- White header bar with dark logo + icons ---- */
	.header-main.hide-on-desktop,
	.header-main.hide-on-desktop .header-main-inner,
	.header-main.hide-on-desktop .row--wrapper {
		background: var(--dp-color-white) !important;
		border: 0 !important;
	}

	.header-main.hide-on-desktop {
		box-shadow: 0 1px 0 rgba(8, 8, 8, 0.1) !important;
	}

	.header-main.hide-on-desktop .builder-item--logo .site-logo a.brand,
	.header-main.hide-on-desktop .nv-icon,
	.header-main.hide-on-desktop .cart-icon-wrapper,
	.header-main.hide-on-desktop .wl-icon-wrapper,
	.header-main.hide-on-desktop .my-account-wrapper,
	.header-main.hide-on-desktop .header_search,
	.header-main.hide-on-desktop .header_search a,
	.header-main.hide-on-desktop .nv-search-icon-wrap,
	.header-main.hide-on-desktop .navbar-toggle-wrapper {
		color: var(--dp-color-ink) !important;
	}

	.header-main.hide-on-desktop .nv-icon svg,
	.header-main.hide-on-desktop .header_search svg,
	.header-main.hide-on-desktop .nv-search-icon-wrap svg,
	.header-main.hide-on-desktop .cart-icon-wrapper svg {
		fill: currentColor !important;
		stroke: currentColor;
	}
    .navbar-toggle {
    color: white;
    }
	/* Hamburger bars dark on the white bar. */
	.header-main.hide-on-desktop .hamburger-inner,
	.header-main.hide-on-desktop .hamburger-inner::before,
	.header-main.hide-on-desktop .hamburger-inner::after {
		background-color: var(--dp-color-ink) !important;
	}

	/* ---- Off-canvas slide-out: white background ---- */
	.header-menu-sidebar-bg {
		background: var(--dp-color-white) !important;
	}

	.header-menu-sidebar,
	.header-menu-sidebar .header-menu-sidebar-inner {
		background: transparent !important;
		color: var(--dp-color-ink) !important;
	}

	.header-menu-sidebar .header-menu-sidebar-inner {
		padding-left: 10px !important;
		padding-right: 1.25rem !important;
	}

	/* Close (X) button dark. */
	.header-menu-sidebar .hamburger-inner,
	.header-menu-sidebar .hamburger-inner::before,
	.header-menu-sidebar .hamburger-inner::after {
		background-color: var(--dp-color-ink) !important;
	}

	/* Generic link colour inside the panel. */
	.header-menu-sidebar a,
	.header-menu-sidebar .primary-menu-ul > li > .wrap > a {
		color: var(--dp-color-ink) !important;
	}

	/* ---- Primary menu rows (David Yurman list) ---- */
	.header-menu-sidebar .primary-menu-ul > li.dp-mega-parent > .wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.1rem 0.10rem;
		border-bottom: 0;
	}

	.header-menu-sidebar .primary-menu-ul > li.dp-mega-parent > .wrap > a {
		flex: 1 1 auto;
		font-family: var(--dp-font-body);
		font-size: 0.95rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--dp-color-ink) !important;
	}

	.header-menu-sidebar .dp-mega-toggle {
		color: var(--dp-color-ink) !important;
		width: 2rem;
		height: 2rem;
	}

	/* Chevron points right (>) when closed, down when open. */
	.header-menu-sidebar .dp-mega-toggle__icon {
		transform: rotate(-45deg);
	}

	.header-menu-sidebar .dp-mega-parent.is-open > .wrap .dp-mega-toggle__icon {
		transform: rotate(45deg);
	}

	/* ---- Utility links (Store Locator, etc.): no stray top borders ---- */
	.header-menu-sidebar .builder-item.desktop-left,
	.header-menu-sidebar .builder-item--secondary-menu {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* A single divider sits below the menu list, above the utility links. */
	.header-menu-sidebar .builder-item.has-nav {
		border-top: 1px solid rgba(8, 8, 8, 0.14);
		border-bottom: 1px solid rgba(8, 8, 8, 0.14);
		margin: 0.35rem 0 0.65rem;
		padding: 0.4rem 0;
	}

	.header-menu-sidebar .nav-menu-secondary {
		display: block;
	}

	.header-menu-sidebar .nav-menu-secondary li {
		margin: 0;
		list-style: none;
	}

	.header-menu-sidebar .nav-menu-secondary a {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		padding: 0.7rem 0.15rem;
		font-family: var(--dp-font-body);
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--dp-color-ink) !important;
	}

	/* Utility icons before each secondary item (pin / chat / calendar / mail). */
	.header-menu-sidebar .nav-menu-secondary li > .wrap > a::before,
	.header-menu-sidebar .nav-menu-secondary li > a::before {
		content: "";
		display: inline-block;
		width: 1.05rem;
		height: 1.05rem;
		flex: 0 0 auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0116 0z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
	}

	.header-menu-sidebar .nav-menu-secondary li:nth-child(2) > .wrap > a::before,
	.header-menu-sidebar .nav-menu-secondary li:nth-child(2) > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 01-11.5 8L3 21l1.5-6.5A8.5 8.5 0 1121 11.5z'/%3E%3C/svg%3E");
	}

	.header-menu-sidebar .nav-menu-secondary li:nth-child(3) > .wrap > a::before,
	.header-menu-sidebar .nav-menu-secondary li:nth-child(3) > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v3M16 3v3'/%3E%3C/svg%3E");
	}

	.header-menu-sidebar .nav-menu-secondary li:nth-child(4) > .wrap > a::before,
	.header-menu-sidebar .nav-menu-secondary li:nth-child(4) > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 6l8 6 8-6'/%3E%3C/svg%3E");
	}
}

/* ================================================================== *
 * DON POSEI mobile header topbar + transparent-over-hero (v1.0.74)
 * ================================================================== */
@media (max-width: 1024px) {
	/* ---- Mobile promo topbar: light strip, only the shipping message ----
	 * Only the mobile topbar row (.hide-on-desktop) should show; do not force
	 * the desktop topbar (.hide-on-mobile) visible here. */
	.header-top.hide-on-desktop .header--row-inner {
		background: #f9f9f9 !important;
	}

	.header-top .row--wrapper {
		min-height: 2.6rem !important;
	}

	.header-top .hfg-slot,
	.header-top .menu-content,
	.header-top .nav-menu-secondary,
	.header-top .nav-ul {
		width: 100%;
	}

	.header-top .nav-ul {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	.header-top .nav-ul > li {
		display: none !important;
	}

	.header-top .nav-ul > li.dp-ship-promo {
		display: flex !important;
		margin: 0 !important;
		position: static !important;
	}

	.header-top .nav-ul > li.dp-ship-promo > .wrap > a {
		color: var(--dp-color-ink) !important;
		font-family: var(--dp-font-body);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.03em;
		text-transform: none;
	}
@media (max-width: 767px) {
    .builder-item {
        padding-right: 0;
    	padding-left: 0;
    }
}
	/* ---- Fixed header + spacer (topbar + bar) for non-home pages ---- */
	header.header {
		min-height: 6.6rem;
	}

	/* ---- Home page: header overlays the hero at the top like desktop ---- */
	body.page-id-469 header.header {
		min-height: 0;
	}

	body.page-id-469:not(.dp-header-is-scrolled) #header-grid {
		position: relative !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop {
		position: absolute !important;
		top: 2.6rem;
		left: 0;
		width: 100%;
		background: transparent !important;
		box-shadow: none !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .header-main-inner,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .row--wrapper {
		background: transparent !important;
	}

	/* White logo + icons while transparent over the hero. */
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .builder-item--logo .site-logo a.brand,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .nv-icon,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .cart-icon-wrapper,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .header_search,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .header_search a,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .nv-search-icon-wrap,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .navbar-toggle-wrapper {
		color: var(--dp-color-white) !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .hamburger-inner,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .hamburger-inner::before,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .hamburger-inner::after {
		background-color: var(--dp-color-white) !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .nv-icon svg,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .header_search svg,
	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .cart-icon-wrapper svg {
		fill: var(--dp-color-white) !important;
		stroke: var(--dp-color-white) !important;
	}

	/* Hero sits behind the transparent header. */
	body.page-id-469 .nv-content-wrap {
		padding-top: 0 !important;
	}

	/* Scrolled: solid white fixed header, promo topbar hidden. */
	body.page-id-469.dp-header-is-scrolled #header-grid {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
	}

	body.page-id-469.dp-header-is-scrolled .header-top {
		display: none !important;
	}

	body.page-id-469.dp-header-is-scrolled .header-main.hide-on-desktop {
		position: relative !important;
		top: 0 !important;
		background: var(--dp-color-white) !important;
		box-shadow: 0 1px 0 rgba(8, 8, 8, 0.1) !important;
	}

	/* ---- Off-canvas: full width; the promo belongs to the topbar, not here ---- */
	.header-menu-sidebar {
		width: 100vw !important;
		max-width: 100vw !important;
	}

	.header-menu-sidebar-bg {
		width: 100vw !important;
	}

	.header-menu-sidebar .dp-ship-promo {
		display: none !important;
	}
}

/* ================================================================== *
 * DON POSEI off-canvas header row: logo + search + cart (v1.0.75)
 * ================================================================== */
@media (max-width: 1024px) {
	.header-menu-sidebar .header-menu-sidebar-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 0.4rem;
	}

	/* Row 1: logo (left, grows) + search + cart (right). */
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo) {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-start !important;
	}

	/* Logo hugs the left edge (not centered). */
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo) .item--inner,
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo) .site-logo,
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo) .site-logo a.brand {
		justify-content: flex-start !important;
		margin-left: 0 !important;
		text-align: left !important;
	}

	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--header_search_responsive) {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
	}

	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--header_cart_icon) {
		order: 3;
		flex: 0 0 auto;
		margin-left: 0.9rem; /* gap from the search icon */
		margin-right: 4rem; /* leave room for the close (X) button */
	}

	/* Menu + utilities stack full-width below the header row. */
	.header-menu-sidebar-inner > .builder-item.has-nav {
		order: 4;
		flex: 0 0 100%;
		width: 100%;
	}

	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--secondary-menu) {
		order: 5;
		flex: 0 0 100%;
		width: 100%;
	}

	/* Sidebar logo: dark wordmark, sized to sit beside the icons. */
	.header-menu-sidebar .site-logo a.brand {
		color: var(--dp-color-ink) !important;
	}

	.header-menu-sidebar .site-logo a.brand::before {
		width: 172px;
	}

	.header-menu-sidebar .site-logo img {
		display: none;
	}

	/* Sidebar search + cart icons: dark. */
	.header-menu-sidebar .nv-icon,
	.header-menu-sidebar .header_search,
	.header-menu-sidebar .header_search a,
	.header-menu-sidebar .nv-search-icon-wrap,
	.header-menu-sidebar .cart-icon-wrapper {
		color: var(--dp-color-ink) !important;
	}

	.header-menu-sidebar .nv-icon svg,
	.header-menu-sidebar .header_search svg,
	.header-menu-sidebar .cart-icon-wrapper svg {
		fill: currentColor !important;
		stroke: currentColor;
	}

	/* Close (X) button pinned to the top-right of the header row. */
	.header-menu-sidebar .close-sidebar-panel {
		position: absolute !important;
		top: 0.7rem !important;
		right: 1rem !important;
		z-index: 5;
	}
}

/* ================================================================== *
 * DON POSEI off-canvas header row refinements (v1.0.76)
 * ================================================================== */
@media (max-width: 1024px) {
	/* Hamburger / close (X) bars use .icon-bar: dark on white surfaces,
	 * white while the header is transparent over the hero. */
	.header-menu-sidebar .icon-bar,
	.header-main.hide-on-desktop .icon-bar {
		background-color: var(--dp-color-ink) !important;
	}

	body.page-id-469:not(.dp-header-is-scrolled) .header-main.hide-on-desktop .icon-bar {
		background-color: var(--dp-color-white) !important;
	}

	/* Header row sits at the top, items vertically centered, no stray gaps.
	 * align-content:flex-start stops the wrapped flex lines from spreading
	 * vertically inside the tall panel. */
	.header-menu-sidebar .header-menu-sidebar-inner {
		padding-top: 0.5rem;
		align-content: flex-start;
	}

	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo),
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--header_search_responsive),
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--header_cart_icon) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: 2.75rem;
		display: flex;
		align-items: center;
	}

	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo) .item--inner,
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--logo) .site-logo,
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--header_search_responsive) .item--inner,
	.header-menu-sidebar-inner > .builder-item:has(> .item--inner.builder-item--header_cart_icon) .item--inner {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Close (X) aligned with the header row. */
	.header-menu-sidebar .close-sidebar-panel {
		top: 0.55rem !important;
		right: 1rem !important;
	}
}

/* ================================================================== *
 * DON POSEI mobile footer accordions (v1.0.79)
 * 10px side padding; no divider line under each menu.
 * ================================================================== */
@media (max-width: 767px) {
	#site-footer .footer-top .container,
	#site-footer .footer-top-inner {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Neutralize Neve's grid gutter negative margins so content honours the
	 * 10px container padding on both edges. */
	#site-footer .footer-top .hfg-grid {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Remove the horizontal divider under each footer menu. */
	#site-footer .dp-footer-acc,
	#site-footer .footer-top .hfg-slot:first-child .dp-footer-acc,
	#site-footer .footer-top .hfg-slot:last-child .widget-area {
		border-top: 0 !important;
	}

	/* Titles + links flush to the 10px container edges. */
	#site-footer .dp-footer-acc__title,
	#site-footer .dp-footer-acc > .dp-footer-links {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#site-footer .dp-footer-acc__title::after {
		margin-right: 0 !important;
	}
}

/* ================================================================== *
 * DON POSEI - solid white desktop header on non-home pages (v1.0.82)
 * The homepage keeps its transparent-over-hero treatment; every other
 * page gets the same solid white header + light topbar as the scrolled home.
 * ================================================================== */
@media (min-width: 1025px) {
	body:not(.page-id-469) .header-main,
	body:not(.page-id-469) .header-main .header-main-inner,
	body:not(.page-id-469) .header-main .row--wrapper {
		background: var(--dp-color-white) !important;
		border-bottom: 0 !important;
	}

	body:not(.page-id-469) .header-main {
		box-shadow: 0 1px 0 rgba(8, 8, 8, 0.08);
	}

	body:not(.page-id-469) .header-main .container {
		max-width: none;
		padding-inline: clamp(1.25rem, 3vw, 3.75rem);
	}

	body:not(.page-id-469) .header-main .primary-menu-ul > li > .wrap > a,
	body:not(.page-id-469) .header-main .nav-ul > li > .wrap > a,
	body:not(.page-id-469) .header-main .nv-icon,
	body:not(.page-id-469) .header-main .header_search,
	body:not(.page-id-469) .header-main .header_search a,
	body:not(.page-id-469) .header-main .cart-icon-wrapper,
	body:not(.page-id-469) .header-main .wl-icon-wrapper,
	body:not(.page-id-469) .header-main .my-account-wrapper,
	body:not(.page-id-469) .header-main .builder-item--logo .site-logo a.brand {
		color: var(--dp-color-ink) !important;
	}

	body:not(.page-id-469) .header-main .nv-icon svg,
	body:not(.page-id-469) .header-main .header_search svg,
	body:not(.page-id-469) .header-main .cart-icon-wrapper svg,
	body:not(.page-id-469) .header-main .wl-icon-wrapper svg,
	body:not(.page-id-469) .header-main .my-account-wrapper svg {
		fill: currentColor;
		stroke: currentColor;
	}
}

/* ================================================================== *
 * DON POSEI mobile mega menu featured cards (v1.0.83)
 * Caption sits BELOW the image (David Yurman style), not beside it.
 * ================================================================== */
@media (max-width: 1024px) {
	.dp-mega-menu__featured {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
		padding: 0.85rem 1rem 1rem;
	}

	.dp-mega-menu__card {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch;
		min-height: 0 !important;
		background: transparent !important;
	}

	.dp-mega-menu__card img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 5;
		min-height: 0 !important;
		object-fit: contain !important;
	}

	/* No dark overlay on the image. */
	.dp-mega-menu__card::after {
		content: none !important;
	}

	/* Caption below the image, left-aligned, dark. */
	.dp-mega-menu__card span {
		position: static !important;
		inset: auto !important;
		display: block;
		margin: 0.45rem 0 0 !important;
		color: var(--dp-color-ink) !important;
		text-align: left;
		font-family: var(--dp-font-body);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
}

/* ================================================================== *
 * DON POSEI mobile Collection mega cards (v1.0.84)
 * Image on top, title + SHOP NOW centered BELOW the image (DY style).
 * ================================================================== */
@media (max-width: 1024px) {
.dp-mega-menu__collection-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 0.85rem;
padding: 0.85rem 1rem 1rem;
}

.dp-mega-menu__ccard {
display: flex !important;
flex-direction: column !important;
align-items: stretch;
background: transparent !important;
overflow: visible !important;
}

.dp-mega-menu__ccard img {
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5;
object-fit: cover !important;
}

.dp-mega-menu__ccard::after {
content: none !important;
}

.dp-mega-menu__ccard-body {
position: static !important;
inset: auto !important;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.15rem;
margin-top: 0.5rem;
}

.header-menu-sidebar .dp-mega-menu__ccard-title,
.header-menu-sidebar .dp-mega-menu__ccard-cta,
.header-main.hide-on-desktop .dp-mega-menu__ccard-title,
.header-main.hide-on-desktop .dp-mega-menu__ccard-cta,
.dp-mega-menu__ccard-title,
.dp-mega-menu__ccard-cta {
color: var(--dp-color-ink) !important;
}

.dp-mega-menu__ccard-title {
display: block;
font-family: var(--dp-font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.dp-mega-menu__ccard-cta {
display: block;
margin-top: 0.1rem;
font-size: 0.6rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 0.2em;
}
}

/* ================================================================== *
 * DON POSEI mobile drill-down menu (v1.0.85)
 * David Yurman-style push navigation: tapping a top-level category slides
 * into a panel showing only that category's sub-menu, with a back arrow to
 * return to the main list. Desktop (>= 960px) hover behaviour is untouched.
 * ================================================================== */
@media (max-width: 1024px) {
	/* While drilled in, hide the other top-level rows... */
	.primary-menu-ul.dp-mm-drilled > li:not(.is-open) {
		display: none !important;
	}

	/* ...and the active row's own label (the back header replaces it). */
	.primary-menu-ul.dp-mm-drilled > li.dp-mega-parent.is-open > .wrap {
		display: none !important;
	}

	/* Hide the utility (secondary) menu while a category is open. */
	.header-menu-sidebar-inner:has(.primary-menu-ul.dp-mm-drilled) > .builder-item:has(> .item--inner.builder-item--secondary-menu) {
		display: none !important;
	}

	/* Drop the primary-menu divider frame while drilled for a clean panel. */
	.header-menu-sidebar .builder-item.has-nav:has(.primary-menu-ul.dp-mm-drilled) {
		border-top: 0 !important;
		border-bottom: 0 !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* ---- Back header: centered underlined title, back arrow on the left ---- */
	.dp-mm-back {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		margin: 0 0 0.4rem;
		padding: 0.35rem 2.75rem;
		border-bottom: 1px solid rgba(8, 8, 8, 0.12);
	}

	.dp-mm-back__btn {
		position: absolute;
		left: -0.35rem;
		top: 50%;
		transform: translateY(-50%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--dp-color-ink);
		cursor: pointer;
	}

	.dp-mm-back__icon {
		display: block;
		width: 0.62rem;
		height: 0.62rem;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	.dp-mm-back__title,
	.header-menu-sidebar .dp-mm-back__title {
		font-family: var(--dp-font-body);
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--dp-color-ink) !important;
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}

	/* Slide the opened panel in from the right for a native drill feel. */
	.primary-menu-ul.dp-mm-drilled > li.dp-mega-parent.is-open > .dp-mega-menu {
		animation: dp-mm-slide-in 260ms ease both;
	}

	@keyframes dp-mm-slide-in {
		from {
			opacity: 0;
			transform: translateX(14%);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
}

/* ================================================================== *
 * DON POSEI header breakpoint fix (v1.0.86)
 * The centered desktop nav (7 long categories) needs ~1200px to sit
 * clear of the wordmark and the utility icons; below that it overlapped
 * both. So the David Yurman-style hamburger / drill-down header now
 * covers the whole tablet range (960-1199px), and the full horizontal
 * nav only shows from 1200px up. The rest of the mobile header, off-canvas
 * and mega-menu CSS uses the matching max-width:1199 / min-width:1200
 * boundaries. This block just flips which Neve header row is displayed in
 * the 960-1199 window (Neve's own switch is hard-coded at 960px).
 * ================================================================== */
@media (min-width: 960px) and (max-width: 1024px) {
	.header-main.hide-on-mobile,
	.header-top.hide-on-mobile {
		display: none !important;
	}

	.header-main.hide-on-desktop,
	.header-top.hide-on-desktop {
		display: block !important;
	}
}

/* ================================================================== *
 * DON POSEI two-row desktop header for the 1025-1199px range (v1.0.87)
 * At >=1200px the centered inline nav has room beside the wordmark and the
 * utility icons. Between 1025 and 1199 there isn't, so - David Yurman style -
 * the wordmark and icons sit on the top row and the horizontal category nav
 * drops to a full-width row directly beneath, left-aligned under the logo.
 * Below 1025 the hamburger / drill-down header takes over. Overrides the
 * inline grid (min-width:1025) only within this window, so >=1200 is unchanged.
 * ================================================================== */
@media (min-width: 1025px) and (max-width: 1199px) {
	.header-main.hide-on-mobile .header-main-inner .row--wrapper {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		column-gap: clamp(1rem, 2vw, 2rem);
		row-gap: 0.35rem;
		align-items: center;
		min-height: 0 !important;
	}

	/* Trim Neve's default vertical padding/margins so the two rows sit tight
	 * and the nav tucks directly under the wordmark (not floating below it). */
	.header-main.hide-on-mobile .hfg-slot.center .builder-item,
	.header-main.hide-on-mobile .hfg-slot.right .builder-item {
		margin-top: 0.45rem !important;
		margin-bottom: 0 !important;
	}

	.header-main.hide-on-mobile .hfg-slot.center .item--inner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* The logo.webp wordmark has ~26px of transparent padding baked into its
	 * left edge, so its glyphs sit ~26px inside the logo box. Pull it back so
	 * the visible "DON POSEI" lines up flush-left with the nav below it. */
	.header-main.hide-on-mobile .hfg-slot.center .site-logo a.brand {
		margin-left: -26px;
	}

	.header-main.hide-on-mobile .hfg-slot.left .builder-item.has-nav {
		margin-top: 0 !important;
		margin-bottom: 0.5rem !important;
	}

	/* Wordmark: top row, left. */
	.header-main.hide-on-mobile .hfg-slot.center {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
	}

	/* Utilities (search / account / wishlist / cart): top row, right. */
	.header-main.hide-on-mobile .hfg-slot.right {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-end;
	}

	/* Category nav: full-width second row, left-aligned under the wordmark. */
	.header-main.hide-on-mobile .hfg-slot.left {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		min-width: 0;
	}

	/* Neve tags the nav builder item .hfg-end (margin-left:auto) so it hugs the
	 * right in the inline layout; on the second row we want it flush left. */
	.header-main.hide-on-mobile .hfg-slot.left .builder-item.has-nav {
		margin-left: 0 !important;
		margin-right: auto !important;
		width: 100%;
	}

	.header-main.hide-on-mobile .hfg-slot.left .primary-menu-ul {
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: clamp(1.25rem, 2.4vw, 2rem);
		width: 100%;
		margin-left: 0;
	}

	/* Homepage only: the transparent header overlays the hero and now carries a
	 * second (nav) row that ends at a constant ~183px down the viewport. Top-
	 * anchor the hero copy and use a FIXED offset (not vw-based, not centered)
	 * so it clears the nav consistently at every width in this range. */
	body.page-id-469 .dp-hero-for-kings .innerblocks-wrap {
		align-items: flex-start !important;
	}

	body.page-id-469 .dp-hero-for-kings__content {
		padding-top: 10rem !important;
	}
}

/* R08 visual-parity follow-up after replacing ID-based layout overrides.
 * Otter owns Philosophy's flex-end alignment and Service/Join's responsive
 * section padding. Semantic CSS remains only for the complex inner layout. */
@media (max-width: 767px) {
	body.page-id-469 .dp-hero-for-kings {
		max-height: 500px !important;
	}
}

/* The previous inherited 42rem heights made Otter's flex-end alignment a
 * no-op. Let the desktop wrappers size to their content so the block setting
 * can position the copy without a transform or hard-coded offset. */
@media (min-width: 768px) {
	body.page-id-469 .dp-philosophy-banner .innerblocks-wrap,
	body.page-id-469 .dp-philosophy-banner__column,
	body.page-id-469 .dp-philosophy__pillars {
		min-height: 0;
	}
}

body.page-id-469 .dp-join-form .otter-form__container {
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
}

body.page-id-469 .dp-join-form .otter-form__container > .dp-join-form__field {
	flex: 1 1 auto;
	width: auto;
	height: 3rem;
}

body.page-id-469 .dp-join-form .otter-form__container > .wp-block-button {
	flex: 0 0 auto;
	width: auto;
}

/* Otter's response node adds one line of cross-axis height before submission.
 * Keep the approved 3rem row while it is empty, then let success/error content
 * expand the wrapper and move the privacy note down naturally. */
body.page-id-469 .dp-join-form .otter-form__container > .wp-block-button.has-submit-msg:has(> .o-form-server-response:empty) {
	height: 3rem;
}

body.page-id-469 .dp-join-form .o-form-server-response:empty {
	display: none;
	padding: 0;
}

/* Otter's tablet breakpoint is 960px while the approved mobile composition
 * begins below 768px. Bridge only that interval; primary values remain in the
 * corresponding Otter block controls. */
@media (min-width: 601px) and (max-width: 767px) {
	body.page-id-469 .dp-service-join {
		padding: clamp(2.25rem, 8vw, 3rem) 1.25rem !important;
	}
}

/* Match the East meets West and Symbols in Life heading rhythm to Shop by
 * Category: 20px of white above the heading and 20px below it before the
 * content frame, so the three bands read as one system. The headings are
 * larger, so the total band stays slightly taller by design. */
@media (min-width: 768px) {
	body.page-id-469 .dp-east-meets-west,
	body.page-id-469 .dp-symbols-in-life {
		padding-top: 20px !important;
	}

	body.page-id-469 .dp-east-meets-west__heading,
	body.page-id-469 .dp-symbols-in-life__heading {
		margin-bottom: 20px !important;
	}
}

/* Mobile footer: close the empty band between the Final CTA banner and the
 * first accordion row. Scoped to phones only; desktop rhythm is untouched. */
@media (max-width: 767px) {
	#site-footer .footer-top-inner {
		padding-top: 0.5rem !important;
	}

	#site-footer .footer-top .hfg-grid {
		padding-top: 0 !important;
	}

	#site-footer .footer-top .hfg-slot:first-child .widget-area > .widget-title {
		display: none;
	}

	#site-footer .footer-top .hfg-slot:first-child .dp-footer-acc__title {
		padding-top: 0.5rem;
	}
	 #site-footer .footer-top .container, #site-footer .footer-top-inner {
        margin-top: -20px;
    }
}


/* ==================================================================
 * Mega menu: Material + Featured columns (Men's / Women's)
 * Depth-1 menu items with url "#" render as label columns, so these two
 * only need the vertical rule that separates them from Shop by Category,
 * matching the reference layout.
 * ================================================================== */
@media (min-width: 768px) {
	.header-main.hide-on-mobile .dp-mega-menu__column.dp-mm-group--material {
		padding-left: clamp(1.25rem, 2.5vw, 2.75rem);
		border-left: 1px solid var(--dp-color-line);
	}

	.header-main.hide-on-mobile .dp-mega-menu__column.dp-mm-group--featured {
		padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
	}
}

/* Mobile: the three groups become tap-to-open rows, first one expanded.
 * Reuses the footer accordion rhythm so the touch targets match. */
@media (max-width: 767px) {
	.header-main.hide-on-desktop .dp-mega-menu__column.dp-mm-group--material,
	.header-main.hide-on-desktop .dp-mega-menu__column.dp-mm-group--featured,
	.header-menu-sidebar .dp-mega-menu__column.dp-mm-group--material,
	.header-menu-sidebar .dp-mega-menu__column.dp-mm-group--featured {
		border-top: 1px solid var(--dp-color-line);
		padding-top: 0.5rem;
	}
}

/* Mega menu: put SHOP BY CATEGORY, MATERIAL and FEATURED on one shared label
 * row, with each column's content starting on the row beneath it. Columns that
 * intentionally carry no title (they let SHOP BY CATEGORY span several columns)
 * reserve the same label height so nothing rides up into that row. */
@media (min-width: 768px) {
	.header-main.hide-on-mobile .dp-mega-menu__columns {
		align-items: start;
	}

	.header-main.hide-on-mobile .dp-mega-menu__column:not(:has(> .dp-mega-menu__column-title))::before {
		content: "";
		display: block;
		height: calc(clamp(0.72rem, 0.85vw, 0.9rem) * 1.2 + 1.45rem);
	}

	.header-main.hide-on-mobile .dp-mega-menu__column > .dp-mega-menu__column-title {
		margin-bottom: 1.45rem;
	}

	.header-main.hide-on-mobile .dp-mega-menu__column > .dp-mega-menu__group:first-of-type,
	.header-main.hide-on-mobile .dp-mega-menu__column > .dp-mega-menu__links:first-of-type {
		margin-top: 0;
	}
}

/* Mega menu: with MATERIAL and FEATURED added there are five label columns, so
 * equal-fraction tracks (flex: 1 1 0) squeezed long labels like "Om Mani Padme
 * Hum" and "Explore Collections" onto two lines. Size each column to its
 * content instead and keep single-line labels. */
@media (min-width: 768px) {
	.header-main.hide-on-mobile .dp-mega-menu__columns {
		gap: clamp(1.25rem, 2vw, 2.5rem);
	}

	.header-main.hide-on-mobile .dp-mega-menu__column {
		flex: 0 1 auto;
		min-width: max-content;
	}

	.header-main.hide-on-mobile .dp-mega-menu__column-title,
	.header-main.hide-on-mobile .dp-mega-menu__group-title,
	.header-main.hide-on-mobile .dp-mega-menu__links a {
		white-space: nowrap;
	}
}

/* Mega menu: run the MATERIAL divider the full height of the panel's tallest
 * column (down past "Shop All Bracelets") instead of stopping at the end of its
 * own links. The label row stays aligned via the reserved-height spacer. */
@media (min-width: 768px) {
	.header-main.hide-on-mobile .dp-mega-menu__column.dp-mm-group--material {
		align-self: stretch;
	}
}

/* The columns area was on a 1fr track, so once labels became nowrap the last
 * column ("Chains + Charms", "Explore Collections") was clipped by the image
 * rail. Let the columns take the width they need and give the rail the rest. */
@media (min-width: 1025px) {
	.header-main.hide-on-mobile .dp-mega-menu--has-featured .dp-mega-menu__inner {
		grid-template-columns: max-content minmax(0, 1fr);
	}
}

/* ================================================================== *
 * DON POSEI mobile mega-menu accordion groups
 * The accordion is a mobile projection of the existing menu columns. It is
 * hidden by default so desktop and Collection layouts keep their established
 * rendering paths; the capability class enables it only for valid groups.
 * ================================================================== */
.header-main .dp-mega-menu__mobile-groups,
.header-menu-sidebar .dp-mega-menu__mobile-groups {
	display: none;
}

@media (max-width: 1024px) {
	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mega-menu--has-mobile-groups .dp-mega-menu__columns {
		display: none;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mega-menu--has-mobile-groups .dp-mega-menu__mobile-groups {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion {
		box-sizing: border-box;
		min-width: 0;
		border-bottom: 1px solid var(--dp-color-line);
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion:first-child {
		border-top: 1px solid var(--dp-color-line);
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__heading {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 2.75rem;
		align-items: center;
		min-height: 3rem;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__label {
		display: block;
		min-width: 0;
		padding: 0.75rem 0;
		color: var(--dp-color-ink);
		font-family: var(--dp-font-body);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.35;
		text-transform: uppercase;
		overflow-wrap: anywhere;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__label-link {
		display: block;
		color: inherit;
		text-decoration: none;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__label-link:hover,
	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__label-link:focus-visible {
		color: var(--dp-color-red-hover);
		text-decoration: underline;
		text-underline-offset: 0.22em;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__toggle {
		display: grid;
		place-items: center;
		box-sizing: border-box;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--dp-color-ink);
		cursor: pointer;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -4px;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__icon {
		display: grid;
		place-items: center;
		width: 0.875rem;
		height: 0.875rem;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__icon::before,
	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__icon::after {
		content: "";
		grid-area: 1 / 1;
		background: currentColor;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__icon::before {
		width: 0.875rem;
		height: 1px;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__icon::after {
		width: 1px;
		height: 0.875rem;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__toggle[aria-expanded="true"] .dp-mm-accordion__icon::after {
		display: none;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__content {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		padding: 0 0 1rem;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__content[hidden] {
		display: none;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__segment,
	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__segment .dp-mega-menu__column {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__segment .dp-mega-menu__column {
		padding: 0;
		border: 0;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__segment + .dp-mm-accordion__segment {
		margin-top: 0.75rem;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__content .dp-mega-menu__links {
		width: 100%;
		min-width: 0;
		margin: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 0.75rem;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__content .dp-mega-menu__links a,
	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion__content .dp-mega-menu__group-title {
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Mobile mega menu: remove divider lines beneath parent and child rows. */
@media (max-width: 1024px) {
	.header-main.hide-on-desktop .dp-mega-menu,
	.header-menu-sidebar .dp-mega-menu {
		border-top: 0;
	}

	.header-main.hide-on-desktop .dp-mega-menu__column,
	.header-menu-sidebar .dp-mega-menu__column {
		border-bottom: 0;
	}

	.header-main.hide-on-desktop .dp-mm-back,
	.header-menu-sidebar .dp-mm-back {
		border-bottom: 0;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion {
		border-bottom: 0;
	}

	:is(.header-main.hide-on-desktop, .header-menu-sidebar) .dp-mm-accordion:first-child {
		border-top: 0;
	}
}

@media (max-width: 767px) {
	.header-main.hide-on-desktop .dp-mega-menu__column.dp-mm-group--material,
	.header-main.hide-on-desktop .dp-mega-menu__column.dp-mm-group--featured,
	.header-menu-sidebar .dp-mega-menu__column.dp-mm-group--material,
	.header-menu-sidebar .dp-mega-menu__column.dp-mm-group--featured {
		border-top: 0;
	}
}