/* ============ Announcement bar (marquee) ============ */
.cb-announce {
	background: var(--cb-color-primary);
	padding: var(--cb-space-xs) 0;
	overflow: hidden;
}
.cb-announce__track {
	display: flex; width: max-content;
	animation: cb-marquee var(--cb-marquee-duration, 28s) linear infinite;
}
.cb-announce__item {
	display: inline-flex; align-items: center; flex-shrink: 0;
	padding-right: 3rem; white-space: nowrap;
	color: var(--cb-white);
}
.cb-announce__track:hover { animation-play-state: paused; }
@keyframes cb-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cb-announce__track { animation: none; }
	.cb-announce { overflow-x: auto; }
}

/* ============ Header ============ */
.cb-header { position: sticky; top: 0; z-index: 50; background: var(--cb-white); box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.cb-header__bar { max-width: var(--cb-container-max); margin-inline: auto; padding: 0 var(--cb-gutter-mobile); height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--cb-space-md); }
@media (min-width: 1024px) {
	.cb-header__bar {
		padding: 0 var(--cb-margin);
		display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}
	.cb-header__logo { order: 1; justify-self: start; }
	.cb-header__nav-group { order: 2; justify-self: center; }
	.cb-header__icons { order: 3; justify-self: end; }
}

.cb-header__nav-group { display: flex; align-items: center; gap: var(--cb-space-xs); }
@media (min-width: 1024px) { .cb-header__nav-group { gap: var(--cb-space-lg); } }
.cb-header__logo { display: flex; align-items: center; gap: var(--cb-space-sm); min-width: 0; }
.cb-header__logo-img { max-height: 2.5rem; width: auto; flex-shrink: 0; }
.cb-header__wordmark { font-family: var(--cb-font-heading); font-size: 1.4rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
	.cb-header__wordmark { display: none; }
	.cb-header__logo svg { width: 26px; height: 26px; }
	.cb-header__logo-img { max-height: 2rem; }
}

.cb-nav { display: none; }
@media (min-width: 1024px) { .cb-nav { display: block; } }
/* The primary menu is always a real <ul> now (see dandelion_primary_nav()) —
   whether it's an admin-configured WordPress menu (which can have
   sub-menus) or the built-in fallback links. */
.cb-nav > ul { display: flex; align-items: center; gap: var(--cb-space-lg); list-style: none; margin: 0; padding: 0; }
.cb-nav li { position: relative; }
.cb-nav a {
	display: block;
	font-family: var(--cb-font-body); font-size: var(--cb-text-label-md); letter-spacing: var(--cb-tracking-label-md);
	text-transform: uppercase; color: var(--cb-color-text-muted); padding: 0.25rem 0;
	border-bottom: 1px solid transparent; transition: color var(--cb-transition-fast), border-color var(--cb-transition-fast);
	white-space: nowrap;
}
.cb-nav a:hover, .cb-nav a.is-current { color: var(--cb-color-text); border-color: var(--cb-color-dusty-rose); }

/* Dropdown for menu items with children (e.g. a "Collections" item holding
   individual collection links) — hidden until the item is hovered/focused. */
.cb-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; margin-left: 0.35rem; vertical-align: 2px;
	width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.cb-nav .sub-menu {
	display: flex; flex-direction: column; gap: 0;
	position: absolute; top: 100%; left: 0; margin-top: var(--cb-space-sm);
	min-width: 12rem; background: var(--cb-color-surface); border-radius: var(--cb-radius);
	box-shadow: var(--cb-shadow-md); padding: 0.5rem 0; z-index: 60;
	/* Hidden but kept in layout so it can fade, and so it lingers a moment
	   (the visibility delay) if the cursor drifts off while moving down. */
	visibility: hidden; opacity: 0; pointer-events: none;
	transition: opacity var(--cb-transition-fast), visibility 0s linear 300ms;
}
/* Invisible bridge over the gap between the menu item and its dropdown, so the
   cursor never leaves the hover area on the way down. */
.cb-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1.25rem; height: 1.25rem; }
.cb-nav .menu-item-has-children:hover > .sub-menu,
.cb-nav .menu-item-has-children:focus-within > .sub-menu {
	visibility: visible; opacity: 1; pointer-events: auto;
	transition-delay: 0s;
}
.cb-nav .sub-menu a {
	padding: 0.6rem var(--cb-space-md); border-bottom: 0;
	text-transform: none; letter-spacing: normal; font-size: var(--cb-text-body-md);
}
.cb-nav .sub-menu a:hover { background: var(--cb-color-surface-alt); color: var(--cb-color-text); }

.cb-header__icons { display: flex; align-items: center; gap: var(--cb-space-xs); }
.cb-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--cb-color-text-muted); transition: color var(--cb-transition-fast); }
.cb-icon-btn:hover { color: var(--cb-color-text); }
.cb-icon-btn--search-desktop { display: none; }
.cb-icon-btn--search-mobile { display: inline-flex; }
@media (min-width: 1024px) { .cb-icon-btn--search-mobile { display: none; } }
@media (min-width: 1024px) { .cb-icon-btn--search-desktop { display: inline-flex; } }
.cb-icon-btn__count {
	position: absolute; top: -2px; right: -4px; width: 1rem; height: 1rem; border-radius: 50%;
	background: var(--cb-color-dusty-rose); color: var(--cb-white);
	font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.cb-menu-toggle { display: inline-flex; }
@media (min-width: 1024px) { .cb-menu-toggle { display: none; } }

.cb-search-bar { position: relative; display: none; border-top: 1px solid var(--cb-color-border); background: var(--cb-color-surface); }
.cb-search-bar.is-open { display: block; }

/* ---- Mobile nav drawer ---- */
.cb-mobile-nav {
	position: fixed; inset: 0; z-index: 100;
	visibility: hidden; pointer-events: none;
}
.cb-mobile-nav.is-open { visibility: visible; pointer-events: auto; }
.cb-mobile-nav__scrim {
	position: absolute; inset: 0; background: rgba(45,41,38,0.4);
	opacity: 0; transition: opacity var(--cb-transition);
}
.cb-mobile-nav.is-open .cb-mobile-nav__scrim { opacity: 1; }
.cb-mobile-nav__panel {
	position: absolute; top: 0; left: 0; bottom: 0; width: 85%; max-width: 360px;
	background: var(--cb-color-background); padding: var(--cb-space-lg);
	transform: translateX(-100%); transition: transform var(--cb-transition);
	display: flex; flex-direction: column; gap: var(--cb-space-lg); overflow-y: auto;
}
.cb-mobile-nav.is-open .cb-mobile-nav__panel { transform: translateX(0); }
.cb-mobile-nav__close { align-self: flex-end; }
.cb-mobile-nav nav ul { list-style: none; margin: 0; padding: 0; }
.cb-mobile-nav nav a { display: block; padding: 0.75rem 0; font-size: var(--cb-text-headline-sm); font-family: var(--cb-font-heading); border-bottom: 1px solid var(--cb-color-border); }
/* A menu item's children (e.g. individual collections under "Collections")
   render as a plain indented sub-list, always expanded — simplest option
   for a slide-out drawer, no extra accordion JS needed. */
.cb-mobile-nav nav .sub-menu a { padding: 0.6rem 0 0.6rem 1.25rem; font-size: var(--cb-text-body-md); font-family: var(--cb-font-body); color: var(--cb-color-text-muted); border-bottom: 0; }
.cb-mobile-nav nav .sub-menu li:last-child a { border-bottom: 1px solid var(--cb-color-border); }
.cb-mobile-nav__search {
	display: flex; align-items: center; gap: var(--cb-space-sm);
	border: 1px solid var(--cb-color-border); border-radius: var(--cb-radius-full);
	padding: 0.6rem 1rem; color: var(--cb-color-text-muted); flex-shrink: 0;
}
.cb-mobile-nav__search input {
	flex: 1; border: 0; background: transparent; color: var(--cb-color-text);
	font-family: var(--cb-font-body); font-size: var(--cb-text-body-md);
}
.cb-mobile-nav__search input:focus { outline: none; }
.cb-mobile-nav__search svg { flex-shrink: 0; }

/* ============ Footer ============ */
/* The trailing padding-bottom equal to the sticky header's height (measured
   by JS into this custom property, see main.js) reserves scroll room past
   the footer's real content — without it, the browser's max scroll position
   on shorter pages lands the footer's own logo directly underneath the
   sticky header, hidden behind it. Kept as part of the footer's own
   background rather than body's, so it reads as a touch of bottom padding,
   not a mismatched blank gap. */
.cb-footer { background: var(--cb-color-surface-alt); border-top: 1px solid var(--cb-color-border); margin-top: 30px; padding-bottom: var(--cb-header-height, 90px); }
.cb-footer__top { max-width: var(--cb-container-max); margin-inline: auto; padding: 4rem var(--cb-gutter-mobile) 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cb-space-xl); }
@media (min-width: 1024px) { .cb-footer__top { padding: 4rem var(--cb-margin) 2.5rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.cb-footer__brand p { color: var(--cb-color-text-muted); margin-top: var(--cb-space-sm); max-width: 26ch; }
.cb-footer__heading { font-family: var(--cb-font-heading); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; margin-bottom: var(--cb-space-md); color: var(--cb-color-text); }
.cb-footer__links { display: flex; flex-direction: column; gap: 0.7rem; }
.cb-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.cb-footer__menu li { margin: 0; padding: 0; }
.cb-footer__links a { font-size: var(--cb-text-body-md); color: var(--cb-color-text-muted); transition: color var(--cb-transition-fast); }
.cb-footer__links a:hover { color: var(--cb-color-dusty-rose); }
.cb-footer__newsletter-form { display: flex; align-items: center; margin-top: var(--cb-space-lg); background: var(--cb-white); border: 1px solid var(--cb-color-border); border-radius: var(--cb-radius-full); padding: 0.4rem 0.4rem 0.4rem 1.5rem; gap: 0.75rem; }
.cb-footer__newsletter-form input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0.75rem 0; font-size: var(--cb-text-body-md); color: var(--cb-color-text); }
.cb-footer__newsletter-form input:focus { outline: none; }
.cb-footer__newsletter-form input::placeholder { color: var(--cb-color-text-faint); }
.cb-footer__newsletter-form button {
	display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
	background: var(--cb-color-primary); color: var(--cb-white);
	border-radius: var(--cb-radius-full); padding: 0.8rem 1.5rem;
	font-size: var(--cb-text-label-caps); letter-spacing: var(--cb-tracking-label-caps); text-transform: uppercase; font-weight: 600;
	transition: background var(--cb-transition-fast);
}
.cb-footer__newsletter-form button:hover { background: var(--cb-color-dusty-rose); }
/* Narrow phones and the slim desktop footer column: stack the field and the button
   instead of squeezing both onto one line. */
.cb-footer__brand + div > p, .cb-footer__top > div:last-child > p { line-height: 1.6; }
@media (max-width: 479px), (min-width: 1024px) {
	.cb-footer__newsletter-form { flex-direction: column; align-items: stretch; background: transparent; border: 0; padding: 0; gap: 0.75rem; }
	.cb-footer__newsletter-form input { flex: none; background: var(--cb-white); border: 1px solid var(--cb-color-border); border-radius: var(--cb-radius-full); padding: 0.9rem 1.5rem; text-align: left; }
	.cb-footer__newsletter-form button { justify-content: center; padding: 0.9rem 1.5rem; }
}
.cb-footer__social { display: flex; gap: var(--cb-space-md); margin-top: var(--cb-space-lg); }
.cb-footer__social a { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cb-color-border); border-radius: 50%; transition: background var(--cb-transition-fast), color var(--cb-transition-fast); }
.cb-footer__social a:hover { background: var(--cb-color-primary); }
.cb-footer__bottom { border-top: 1px solid var(--cb-color-border); padding: var(--cb-space-md) var(--cb-gutter-mobile); display: flex; flex-direction: column; gap: var(--cb-space-sm); align-items: center; text-align: center; }
@media (min-width: 768px) { .cb-footer__bottom { flex-direction: row; justify-content: space-between; padding: var(--cb-space-md) var(--cb-margin); text-align: left; } }
.cb-footer__bottom, .cb-footer__bottom a { font-size: var(--cb-text-body-sm); color: var(--cb-color-text-faint); }
.cb-footer__legal { display: flex; gap: var(--cb-space-md); }

/* Below the 4-column breakpoint, the stacked single column reads better
   centered than left-ragged with a wall of blank space on the right. */
@media (max-width: 1023px) {
	.cb-footer__top { text-align: center; justify-items: center; }
	.cb-footer__brand { display: flex; flex-direction: column; align-items: center; }
	.cb-footer__brand .cb-header__logo { justify-content: center; }
	.cb-footer__links { align-items: center; }
	.cb-footer__social { justify-content: center; }
}

/* ---- Phones: a lighter, less crowded header ---- */
@media (max-width: 767px) {
	.cb-header__nav-group, .cb-header__icons { gap: 0; }
	.cb-header__bar { gap: var(--cb-space-sm); }
	.cb-icon-btn { width: 1.75rem; height: 1.75rem; padding: 0; }
	.cb-icon-btn svg { width: 18px; height: 18px; }
	.cb-menu-toggle svg { width: 20px; height: 20px; }
	.cb-icon-btn__count { top: -3px; right: -5px; width: 0.9rem; height: 0.9rem; font-size: 8px; }
}

/* Newsletter sign-up result message (footer + home page). */
.cb-newsletter-msg { margin: 0.6rem 0 0; font-size: var(--cb-text-body-md); line-height: var(--cb-leading-body-md); }
.cb-newsletter-msg[hidden] { display: none; }
.cb-newsletter-msg--success { color: #2e7d4f; }
.cb-newsletter-msg--error { color: var(--cb-color-error); }


/* 404 page */
.cb-404 { max-width: 38rem; margin: 0 auto; padding: var(--cb-space-xl) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-md); }
.cb-404__code { font-family: var(--cb-font-heading); font-size: clamp(5rem, 18vw, 9rem); line-height: 1; font-weight: 500; letter-spacing: 0.04em; color: var(--cb-color-primary); }
.cb-404__text { color: var(--cb-color-text-muted); margin: 0; }
.cb-404__search { display: flex; width: 100%; gap: var(--cb-space-sm); margin-top: var(--cb-space-md); }
.cb-404__search input[type="search"] { flex: 1; min-width: 0; padding: 0.85rem 1.1rem; font-size: var(--cb-text-body-lg); background: var(--cb-white); border: 1px solid var(--cb-color-border); border-radius: var(--cb-radius); color: var(--cb-color-text); font-family: var(--cb-font-body); }
.cb-404__search input[type="search"]:focus { outline: none; border-color: var(--cb-color-dusty-rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-color-dusty-rose) 22%, transparent); }
.cb-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cb-space-md); margin-top: var(--cb-space-sm); }
@media (max-width: 479px) { .cb-404__search { flex-direction: column; } .cb-404__search .cb-btn { width: 100%; } }

/* The PayZy "or up to 4 X …" line belongs on the product page only, not on product cards or lists. */
.payzy-item-loop-display { display: none !important; }