/*
 * Ravello Child — header.css
 * Announcement bar, sticky header, drawers, overlays, modal, iconbtn.
 */

/* ---------- Utility visibility ---------- */
.rv-hide-mobile { display: none !important; }
.rv-show-desktop { display: none !important; }
@media (min-width: 1024px) {
	.rv-hide-desktop { display: none !important; }
	.rv-hide-mobile { display: inline-flex !important; }
	.rv-show-desktop { display: flex !important; }
}

/* ---------- Icon buttons ---------- */
.rv-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	color: inherit;
	position: relative;
	transition: background-color var(--dur-standard) var(--ease-default), opacity var(--dur-standard) var(--ease-default);
}
.rv-iconbtn:hover { background: var(--rv-border); }
.is-dark .rv-iconbtn:hover,
.rv-dark .rv-iconbtn:hover { background: rgba(250, 247, 242, 0.08); }
.rv-iconbtn svg { display: block; }

/* ---------- Announcement bar ---------- */
.rv-announcement {
	background: var(--rv-black);
	color: var(--rv-paper);
	font-size: var(--fs-micro);
	letter-spacing: var(--tracking-editorial);
	text-transform: uppercase;
	padding-block: 0.7rem;
	position: relative;
	z-index: 1;
}
.rv-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 22px;
}
.rv-announcement__track {
	position: relative;
	min-height: 18px;
	display: flex;
	align-items: center;
	text-align: center;
	flex: 1;
}
.rv-announcement__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--dur-standard) var(--ease-default);
	pointer-events: none;
	color: inherit;
}
.rv-announcement__msg.is-active { opacity: 1; pointer-events: auto; }
.rv-announcement__close {
	position: absolute;
	right: var(--container-gutter);
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rv-mist);
	transition: color var(--dur-standard) var(--ease-default);
}
.rv-announcement__close:hover { color: var(--rv-paper); }
.rv-announcement.is-hidden { display: none; }

/* ---------- Sticky header ---------- */
.rv-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--rv-paper);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--dur-standard) var(--ease-default),
		border-color var(--dur-standard) var(--ease-default),
		box-shadow var(--dur-standard) var(--ease-default),
		transform var(--dur-standard) var(--ease-default);
	will-change: transform, background-color;
}
.rv-header.is-stuck {
	background: rgba(250, 247, 242, 0.92);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border-bottom-color: var(--rv-border);
	box-shadow: 0 1px 0 rgba(14, 14, 14, 0.04);
}
.rv-header.is-hidden {
	transform: translateY(-100%);
}

.rv-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: 96px;
	padding-block: var(--space-xs);
}
.rv-header__left,
.rv-header__right {
	display: flex;
	align-items: center;
	gap: var(--space-3xs);
	flex: 1;
	min-width: 0;
}
.rv-header__right { justify-content: flex-end; }

.rv-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	color: var(--rv-ink);
}
.rv-header__logo svg,
.rv-header__logo img {
	display: block;
	height: 64px;
	width: auto;
	max-width: 280px;
}
@media (min-width: 1024px) {
	.rv-header__logo svg,
	.rv-header__logo img { height: 80px; max-width: 360px; }
}
.is-dark .rv-header__logo img,
.rv-dark .rv-header__logo img { filter: invert(1) brightness(1.15); }

/* ---------- Primary nav ---------- */
.rv-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rv-nav__item > a,
.rv-nav__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) 0;
	font-size: var(--fs-small);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--rv-ink);
	position: relative;
}
.rv-nav__item > a::after,
.rv-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--rv-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-standard) var(--ease-default);
}
.rv-nav__item:hover > a::after,
.rv-nav__link:hover::after { transform: scaleX(1); }
.rv-nav__item.is-active > a::after,
.rv-nav__link.is-active::after,
.rv-nav__item.current-menu-item > a::after,
.rv-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Nav dropdown (Type subcategories) ---------- */
.rv-nav__item--has-dropdown { position: relative; }
.rv-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 200px;
	margin: 0;
	padding: var(--space-2xs) 0;
	list-style: none;
	background: var(--rv-paper);
	border: 1px solid var(--rv-border);
	box-shadow: 0 18px 38px rgba(14,14,14,0.10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms var(--ease-default), transform 180ms var(--ease-default), visibility 0s linear 180ms;
	z-index: var(--z-header, 50);
}
.rv-nav__item--has-dropdown:hover > .rv-nav__dropdown,
.rv-nav__item--has-dropdown:focus-within > .rv-nav__dropdown,
.rv-nav__item--has-dropdown.is-open > .rv-nav__dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity 180ms var(--ease-default), transform 180ms var(--ease-default), visibility 0s;
}
.rv-nav__droplink {
	display: block;
	padding: 10px var(--space-md);
	font-size: var(--fs-small);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--rv-ink);
	white-space: nowrap;
	text-decoration: none;
}
.rv-nav__droplink:hover,
.rv-nav__droplink:focus-visible { background: var(--rv-cream); }

/* ---------- Sub-chip row (Collection type) ---------- */
.rv-chips.rv-chips--sub {
	margin-top: var(--space-2xs);
	padding-top: var(--space-2xs);
	border-top: 1px solid var(--rv-border);
}
.rv-chips.rv-chips--sub .rv-chip {
	font-size: var(--fs-micro);
	letter-spacing: var(--tracking-editorial);
}

/* Cart badge */
.rv-iconbtn--cart { position: relative; }
.rv-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--rv-ink);
	color: var(--rv-paper);
	font-size: var(--fs-micro);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	line-height: 1;
}

/* ---------- Drawer (mobile + mini-cart) ---------- */
.rv-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	visibility: hidden;
	pointer-events: none;
}
.rv-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.rv-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 14, 14, 0.4);
	opacity: 0;
	transition: opacity var(--dur-standard) var(--ease-default);
}
.rv-drawer.is-open .rv-drawer__overlay { opacity: 1; }
.rv-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(420px, 92vw);
	background: var(--rv-paper);
	display: flex;
	flex-direction: column;
	transition: transform var(--dur-editorial) var(--ease-editorial);
	box-shadow: var(--shadow-deep);
	overflow-y: auto;
}
.rv-drawer--left .rv-drawer__panel {
	left: 0;
	transform: translateX(-100%);
}
.rv-drawer--right .rv-drawer__panel {
	right: 0;
	transform: translateX(100%);
}
.rv-drawer.is-open .rv-drawer__panel { transform: translateX(0); }

.rv-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--rv-border);
}
.rv-drawer__list {
	list-style: none;
	padding: var(--space-sm) 0;
	margin: 0;
}
.rv-drawer__item { list-style: none; }
.rv-drawer__row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid var(--rv-border);
}
.rv-drawer__link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 14px var(--space-md);
	font-family: var(--rv-font-display);
	font-size: 1.4rem;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-tight);
	color: var(--rv-ink);
	text-decoration: none;
	border-bottom: 0;
}
.rv-drawer__link:hover { background: var(--rv-cream); }

/* Chevron / plus toggle for parents with children. */
.rv-drawer__toggle {
	flex: 0 0 auto;
	width: 56px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--rv-border);
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rv-ink);
}
.rv-drawer__toggle:hover { background: var(--rv-cream); }
.rv-drawer__toggle-icon {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
}
.rv-drawer__toggle-icon::before,
.rv-drawer__toggle-icon::after {
	content: "";
	position: absolute;
	background: var(--rv-ink);
	transition: transform 200ms var(--ease-default), opacity 200ms;
}
.rv-drawer__toggle-icon::before {
	left: 0; right: 0; top: 50%;
	height: 1.5px;
	transform: translateY(-50%);
}
.rv-drawer__toggle-icon::after {
	top: 0; bottom: 0; left: 50%;
	width: 1.5px;
	transform: translateX(-50%);
}
.rv-drawer__item.is-open .rv-drawer__toggle-icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

/* Collapsed by default; reveal when parent .is-open. JS toggles + hidden attr. */
.rv-drawer__sublist {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--rv-cream);
	max-height: 0;
	overflow: hidden;
	transition: max-height 260ms var(--ease-default);
}
.rv-drawer__item.is-open > .rv-drawer__sublist { max-height: 600px; }
.rv-drawer__sublist:empty { display: none; }
.rv-drawer__sublink {
	display: block;
	padding: 11px var(--space-md) 11px var(--space-lg);
	font-family: var(--rv-font-body);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rv-ink);
	border-bottom: 1px solid var(--rv-border);
	text-decoration: none;
}
.rv-drawer__sublist li:last-child .rv-drawer__sublink { border-bottom: 0; }
.rv-drawer__sublink:hover,
.rv-drawer__sublink:focus-visible { background: var(--rv-paper); }

.rv-drawer__meta {
	display: flex;
	flex-direction: column;
	padding: var(--space-sm) var(--space-md);
	border-top: 1px solid var(--rv-border);
	gap: var(--space-2xs);
}
.rv-drawer__metalink {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-2xs) 0;
	font-size: var(--fs-small);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}
.rv-drawer__newsletter { padding: var(--space-md) var(--space-md) var(--space-sm); }
.rv-drawer__social {
	display: flex;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md) var(--space-lg);
	list-style: none;
}

/* ---------- Mini-cart specifics ----------
 * Legacy mini-cart styling removed — the cart drawer line item, qty stepper,
 * remove control, recommendations and footer are now owned entirely by
 * assets/css/site.css (".cart-drawer …"). Keeping these rules here caused
 * specificity collisions (e.g. .rv-minicart__body .mini_cart_item a:first-of-type
 * forcing the 18px serif name). Intentionally left blank.
 */

/* ---------- Search overlay ---------- */
.rv-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	background: var(--rv-paper);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-standard) var(--ease-default), visibility var(--dur-standard) step-end;
}
.rv-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur-standard) var(--ease-default), visibility 0s;
}
.rv-overlay__close {
	position: absolute;
	top: var(--space-md);
	right: var(--container-gutter);
}
.rv-overlay__inner {
	max-width: 960px;
	margin: clamp(10vh, 18vh, 22vh) auto 0;
	padding-inline: var(--container-gutter);
}
.rv-search__input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rv-border-strong);
	padding: var(--space-sm) 0;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	outline: 0;
}
.rv-search__input::placeholder { color: var(--rv-stone); }
.rv-search__results {
	margin-top: var(--space-lg);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-md);
}
.rv-search__suggest {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	list-style: none;
	margin-top: var(--space-lg);
	padding: 0;
}
.rv-search__suggest a {
	font-size: var(--fs-small);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* ---------- Quick view modal ---------- */
.rv-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	visibility: hidden;
}
.rv-modal.is-open { visibility: visible; }
.rv-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 14, 14, 0.55);
	opacity: 0;
	transition: opacity var(--dur-standard) var(--ease-default);
}
.rv-modal.is-open .rv-modal__overlay { opacity: 1; }
.rv-modal__panel {
	position: relative;
	margin: 5vh auto;
	width: min(960px, 94vw);
	max-height: 90vh;
	background: var(--rv-paper);
	box-shadow: var(--shadow-deep);
	padding: var(--space-lg);
	overflow-y: auto;
	transform: translateY(16px);
	opacity: 0;
	transition: transform var(--dur-editorial) var(--ease-editorial), opacity var(--dur-editorial) var(--ease-editorial);
}
.rv-modal.is-open .rv-modal__panel { transform: translateY(0); opacity: 1; }
.rv-modal__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
}

/* ---------- Body locks ----------
 * iOS-safe scroll lock paired with chrome.js lockScroll() which fixes
 * the body and preserves scrollY. Plain overflow:hidden alone leaks
 * touch scroll on iOS Safari. */
html.rv-scroll-locked,
html.rv-scroll-locked body {
	overflow: hidden !important;
	overscroll-behavior: contain;
	touch-action: none;
}
body.rv-no-scroll { overflow: hidden; }
/* Re-enable touch inside the drawers themselves. */
html.rv-scroll-locked .rv-drawer__panel,
html.rv-scroll-locked .cart-drawer,
html.rv-scroll-locked .cart-drawer__body,
html.rv-scroll-locked .rv-minicart__body,
html.rv-scroll-locked .coll-aside.rv-filters,
html.rv-scroll-locked .coll-aside.rv-filters .rv-filters__form,
html.rv-scroll-locked .rv-overlay__inner {
	touch-action: auto;
	overscroll-behavior: contain;
}

/* ===== Cart drawer empty state (Vercel parity) ===== */
.cart-drawer .rv-bag-drawer-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 4rem 2rem;
	min-height: 60vh;
	text-align: center;
}
.cart-drawer .rv-bag-drawer-empty__mark {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.04);
	color: var(--rv-ink);
}
.cart-drawer .rv-bag-drawer-empty__title {
	font-family: var(--rv-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 500;
	margin: 0;
	color: var(--rv-ink);
}
.cart-drawer .rv-bag-drawer-empty__ctas {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	max-width: 320px;
	margin-top: 0.5rem;
}
.cart-drawer .rv-bag-drawer-empty__ctas .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.95rem 1.5rem;
	font-family: var(--rv-font-body);
	font-size: 12.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 2px;
	border: 1px solid var(--rv-ink);
	text-decoration: none;
	transition: background 200ms, color 200ms;
}
.cart-drawer .rv-bag-drawer-empty__ctas .btn-primary {
	background: var(--rv-ink);
	color: var(--rv-paper);
}
.cart-drawer .rv-bag-drawer-empty__ctas .btn-primary:hover {
	background: var(--rv-gold, #c8a55b);
	border-color: var(--rv-gold, #c8a55b);
	color: var(--rv-ink);
}
.cart-drawer .rv-bag-drawer-empty__ctas .btn-ghost {
	background: transparent;
	color: var(--rv-ink);
}
.cart-drawer .rv-bag-drawer-empty__ctas .btn-ghost:hover {
	background: var(--rv-ink);
	color: var(--rv-paper);
}
.cart-drawer__foot.is-hidden { display: none !important; }