/**
 * Sunny base layer: reset, document defaults, layout primitives, a11y.
 *
 * Values come from tokens.css only. If you find yourself typing a hex code or a
 * px value that is not a one-off, it belongs in tokens.css instead - that is
 * what keeps the Customizer palette switch working.
 */

/* ---------------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--fg-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body-md);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-wrap: pretty;
}



p {
	margin: 0 0 var(--space-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--fg-link);
	text-decoration: none;
}

a:hover {
	color: var(--fg-link-hover);
}

/* Body copy links keep an underline - colour alone is not an accessible
   distinction for people who cannot separate the hues. Navigation, buttons and
   cards opt out via .sunny-plain-link. */
.entry-content a:not(.sunny-plain-link),
.sunny-prose a:not(.sunny-plain-link) {
	text-decoration: none;
	text-underline-offset: 0.2em;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	/* Same reason as the image rule above. A control's intrinsic width is set
	   by the browser, not by its content - a file input in particular is wide
	   enough to push a narrow column past the viewport on a phone. */
	max-width: 100%;
}

button {
	cursor: pointer;
}

ul, ol {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: var(--border-w) solid var(--border-default);
	margin: var(--space-8) 0;
}

/* ---------------------------------------------------------------------------
 * Focus
 *
 * --shadow-focus is a design system token, so the ring follows the brand
 * colour automatically when the palette changes.
 * ------------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Only suppress the ring for pointer users, never for keyboard users. */
:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Accessibility helpers
 * ------------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 999;
	padding: var(--space-3) var(--space-5);
	border-radius: 0 0 var(--radius-md) 0;
	background: var(--surface-brand);
	color: var(--fg-on-brand);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
}

.skip-link:focus {
	left: 0;
	color: var(--fg-on-brand);
}

/* ---------------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------------ */

.sunny-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.sunny-section {
	padding-block: var(--rhythm-section-y);
}

.sunny-section--tight {
	padding-block: var(--rhythm-section-y-tight);
}

/* Auto-fitting grids. The minimum column width comes from the rhythm preset,
   which is how the Airy/Balanced/Dense switch changes density everywhere at
   once - matching the prototypes' `rhythm` prop. */
.sunny-grid {
	display: grid;
	gap: var(--rhythm-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rhythm-card-min)), 1fr));
}

.sunny-grid--tiles {
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rhythm-tile-min)), 1fr));
}

.sunny-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.sunny-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* Section heading + "see all" link, repeated across the home page. */
.sunny-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

.sunny-section-head__link {
	flex: none;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
}

/* ---------------------------------------------------------------------------
 * Shared atoms
 * ------------------------------------------------------------------------ */

.sunny-icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sunny-kicker {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-caption);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.sunny-card {
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.sunny-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: var(--border-w) solid transparent;
	border-radius: var(--radius-pill);
	background: var(--surface-brand);
	color: var(--fg-on-brand);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	line-height: 1;
	text-align: center;
	transition:
		background var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.sunny-btn:hover {
	background: var(--surface-brand-hover);
	color: var(--fg-on-brand);
}

.sunny-btn:active {
	transform: scale(0.97);
	background: var(--surface-brand-press);
}

.sunny-btn--accent {
	background: var(--surface-accent);
	color: var(--fg-on-accent);
}

.sunny-btn--accent:hover {
	background: var(--surface-accent-hover);
	color: var(--fg-on-accent);
}

.sunny-btn--secondary {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--fg-primary);
}

.sunny-btn--secondary:hover {
	background: var(--surface-sunken);
	color: var(--fg-primary);
}

.sunny-btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--fs-body-lg);
}

.sunny-btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-body-sm);
}

.sunny-btn--block {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Media
 *
 * Images always declare width/height in markup; this keeps them fluid without
 * giving up the reserved space that prevents layout shift.
 * ------------------------------------------------------------------------ */

.sunny-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--surface-sunken);
}

.sunny-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sunny-media--square { aspect-ratio: 1; }
.sunny-media--tile { aspect-ratio: 3 / 4; }
.sunny-media--wide { aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------------------
 * Singular: posts and pages
 * ------------------------------------------------------------------------ */

.sunny-singular {
	padding-block: var(--rhythm-section-y-tight);
}

.sunny-singular__header {
	margin-bottom: var(--space-8);
}

.sunny-singular__title {
	max-width: 20ch;
}

.sunny-singular__meta {
	margin-top: var(--space-3);
	color: var(--fg-muted);
	font-size: var(--fs-body-sm);
}

.sunny-singular__body {
	max-width: calc(720px + (var(--container-pad) * 2));
	margin-inline: auto;
}

/* Prose rhythm. Reading measure is capped in ch rather than px so it tracks
   the font size instead of drifting when someone changes the type scale. */
.sunny-prose {
	line-height: var(--lh-relaxed);
	color: var(--fg-secondary);
}

.sunny-prose > * + * {
	margin-top: var(--space-5);
}

.sunny-prose h2,
.sunny-prose h3,
.sunny-prose h4 {
	margin-top: var(--space-12);
	color: var(--fg-primary);
}

.sunny-prose h2 + *,
.sunny-prose h3 + *,
.sunny-prose h4 + * {
	margin-top: var(--space-3);
}

.sunny-prose ul,
.sunny-prose ol {
	padding-left: var(--space-6);
}

.sunny-prose li + li {
	margin-top: var(--space-2);
}

.sunny-prose img {
	border-radius: var(--radius-lg);
}

.sunny-prose blockquote {
	margin: 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--surface-brand);
	color: var(--fg-primary);
	font-size: var(--fs-body-lg);
}

/* ---------------------------------------------------------------------------
 * Announcement bar
 *
 * Rendered hidden and revealed by script, so a previously dismissed bar never
 * flashes. Height is published to --announcement-h by header.js.
 * ------------------------------------------------------------------------ */

.sunny-announcement {
	background: var(--surface-inverse);
	color: var(--neutral-100);
	font-size: var(--fs-caption);
	letter-spacing: var(--ls-wide);
}

.sunny-announcement[hidden] {
	display: none;
}

.sunny-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding-block: var(--space-2);
	text-align: center;
}

.sunny-announcement__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sunny-announcement__link:hover {
	color: var(--brand-200);
}

.sunny-announcement__countdown {
	flex: none;
	padding: 2px var(--space-3);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.sunny-announcement__close {
	position: absolute;
	right: var(--container-pad);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: inherit;
	opacity: 0.7;
}

.sunny-announcement__close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.sunny-announcement.is-dismissible .sunny-announcement__inner {
	position: relative;
	padding-right: var(--space-10);
}

/* ---------------------------------------------------------------------------
 * Newsletter signup
 *
 * In base.css rather than blog.css because the footer copy appears on every
 * page, and blog.css only loads on blog templates. The band at the foot of the
 * blog keeps its own surrounding styles there; these are the parts both copies
 * of the form need wherever it is rendered.
 * ------------------------------------------------------------------------ */

.sunny-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	max-width: 24rem;
}

.sunny-newsletter-form .sunny-newsletter__input {
	flex: 1 1 12rem;
	min-width: 0;
	height: 46px;
	padding: 0 var(--space-4);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--fg-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body-md);
}

.sunny-newsletter-form .sunny-newsletter__input:focus {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.sunny-newsletter-form .sunny-btn--accent {
	height: 46px;
	padding: 0 var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-accent);
	color: var(--fg-on-accent);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	cursor: pointer;
}

.sunny-newsletter-form .sunny-btn--accent:hover {
	background: var(--surface-accent-hover);
}

.sunny-footer__signup .sunny-footer__col-title {
	margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
 * Site footer
 *
 * Written from design theme/project/SiteFooter.dc.html. The markup has existed
 * since P0 and the stylesheet never did, so until now every page ended in a
 * vertical stack of unstyled blocks where the design has a four-item trust row,
 * four columns and a legal bar. Nothing caught it: the end-to-end suite checks
 * for horizontal overflow, one h1 and a clean console, and an unstyled footer
 * passes all three.
 *
 * The footer is the one component that renders on every template, so it lives
 * in base.css rather than a per-template sheet.
 * ------------------------------------------------------------------------ */

.sunny-footer {
	margin-top: var(--rhythm-section-y);
	background: var(--neutral-900);
	color: var(--neutral-300);
	font-family: var(--font-body);
}

/* --- Trust row -------------------------------------------------------- */

.sunny-footer__trust {
	border-bottom: var(--border-w) solid var(--neutral-800);
}

.sunny-footer__trust-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5) var(--space-6);
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

@media (max-width: 1040px) {
	.sunny-footer__trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.sunny-footer__trust-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sunny-footer__trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.sunny-footer__trust-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md);

	/* The brand at low opacity, so the badge follows a rebrand without a
	   second colour to keep in step. */
	background: color-mix(in srgb, var(--brand-500) 14%, transparent);
	color: var(--brand-400);
}

.sunny-footer__trust-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sunny-footer__trust-copy strong {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-sm);
	color: var(--neutral-0);
}

.sunny-footer__trust-copy span {
	font-size: var(--fs-body-sm);
	color: var(--neutral-500);
}

/* --- Columns ---------------------------------------------------------- */

.sunny-footer__main {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8) var(--space-10);
	padding-top: var(--space-12);
}

.sunny-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 280px;
}

.sunny-footer__brand .sunny-site-title,
.sunny-footer__brand .custom-logo-link {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-md);
	letter-spacing: var(--ls-tight);
	color: var(--brand-400);
}

.sunny-footer__tagline {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-relaxed);
	color: var(--neutral-400);
}

.sunny-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-body-sm);
	color: var(--neutral-400);
}

.sunny-footer__contact-item {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
}

.sunny-footer__contact-item svg {
	flex: none;
	margin-top: 3px;
}

.sunny-footer__contact a {
	color: inherit;
}

.sunny-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.sunny-footer__socials a {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: var(--border-w) solid var(--neutral-700);
	border-radius: var(--radius-pill);
	color: var(--neutral-300);
	transition:
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.sunny-footer__socials a:hover,
.sunny-footer__socials a:focus-visible {
	color: var(--brand-300);
	border-color: var(--brand-500);
	background: color-mix(in srgb, var(--brand-500) 14%, transparent);
	transform: translateY(-2px);
}

.sunny-footer__col-title {
	margin: 0;
	color: var(--neutral-0);
}

.sunny-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sunny-footer__links a {
	font-size: var(--fs-body-sm);
	color: var(--neutral-400);
}

.sunny-footer__links a:hover {
	color: var(--neutral-0);
}

/* --- Signup ----------------------------------------------------------- */

.sunny-footer__signup {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	grid-column: 4;
	grid-row: 1;
	min-width: 0;
	margin-top: 0;
}

/*
 * On the dark footer the field and its button share one pill, which is what
 * SiteFooter.dc.html draws - unlike the blog band, where they sit side by side
 * as separate controls. Same markup either way; only this wrapper differs.
 */
.sunny-footer__signup-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	max-width: none;
	padding: 4px 4px 4px var(--space-4);
	border: var(--border-w) solid var(--neutral-700);
	border-radius: var(--radius-pill);
	background: var(--neutral-800);
}

.sunny-footer__signup-form .sunny-newsletter__input {
	flex: 1 1 auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--neutral-0);
	font-size: var(--fs-body-sm);
}

.sunny-footer__signup-form .sunny-newsletter__input::placeholder {
	color: var(--neutral-500);
}

.sunny-footer__signup-form .sunny-newsletter__input:focus {
	box-shadow: none;
	outline: none;
}

/* The ring moves to the pill, so keyboard focus stays visible once the field
   itself has no border of its own. */
.sunny-footer__signup-form:focus-within {
	border-color: var(--brand-400);
}

.sunny-footer__signup-form .sunny-btn--accent {
	flex: none;
	height: 38px;
	padding: 0 var(--space-5);
	background: var(--surface-brand);
	color: var(--fg-on-brand);
	font-size: var(--fs-body-sm);
}

.sunny-footer__signup-form .sunny-btn--accent:hover {
	background: var(--surface-brand-hover);
}

.sunny-footer__signup-note {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-relaxed);
	color: var(--neutral-500);
}

.sunny-footer__signup-note a {
	color: var(--neutral-400);
	text-decoration: underline;
}

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

	.sunny-footer__signup {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 640px) {
	.sunny-footer__main {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Commerce and legal bars ----------------------------------------- */

.sunny-footer__commerce {
	margin-top: var(--space-10);
	border-top: var(--border-w) solid var(--neutral-800);
}

.sunny-footer__commerce-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-8);
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}

.sunny-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.sunny-footer__payments-label {
	color: var(--neutral-500);
	font-size: var(--fs-body-sm);
}

.sunny-footer__payment-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.sunny-footer__payment-list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: var(--space-1) var(--space-3);
	border: var(--border-w) solid var(--neutral-700);
	border-radius: var(--radius-sm);
	color: var(--neutral-200);
	background: color-mix(in srgb, var(--neutral-800) 72%, transparent);
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.sunny-footer__security {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--neutral-500);
	font-size: var(--fs-body-sm);
}

.sunny-footer__security svg {
	color: var(--brand-400);
}

.sunny-footer__legal {
	margin-top: var(--space-10);
	border-top: var(--border-w) solid var(--neutral-800);
}

.sunny-footer__commerce + .sunny-footer__legal {
	margin-top: 0;
}

.sunny-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}

.sunny-footer__copyright {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--neutral-500);
}

.sunny-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sunny-footer__legal-links a {
	font-size: var(--fs-body-sm);
	color: var(--neutral-500);
}

.sunny-footer__legal-links a:hover {
	color: var(--neutral-300);
}

@media (max-width: 640px) {
	.sunny-footer__commerce-inner,
	.sunny-footer__legal-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.sunny-footer__payments {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sunny-footer__socials a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Site chrome: wrapper, header, navigation, breadcrumb, pagination
 *
 * Written from design theme/project/SiteHeader.dc.html, after an audit found
 * that six class families used in the markup had no CSS at all. The footer was
 * the first one found and was treated as a one-off; it was not. The content
 * areas - product, shop, blog, reviews - were styled all along, and the chrome
 * around them never was.
 *
 * Nothing caught it because nothing looks: the end-to-end suite asserts no
 * horizontal overflow, one h1 per page and a clean console, and an unstyled
 * header satisfies all three while rendering the navigation as a bulleted list.
 * ------------------------------------------------------------------------ */

.sunny-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sunny-main {
	flex: 1 0 auto;
}

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

.sunny-header {
	position: relative;
	z-index: 50;
	background: var(--surface-card);
	border-bottom: var(--border-w) solid var(--border-default);
	font-family: var(--font-body);
}

/*
 * Only when the shop asks for it. Left sticky for thirteen phases without ever
 * being a decision: it costs a band of every screen, and on a product page that
 * band is taken out of the photograph.
 */
.sunny-sticky-header .sunny-header {
	position: sticky;
	top: 0;
}

/*
 * Both bars, because the announcement rides inside the header and sticks with
 * it. --announcement-h is published by header.js and falls back to 0px, which
 * is also the right answer when the bar is switched off or dismissed.
 */
.sunny-sticky-header {
	--sticky-offset: calc(var(--header-h) + var(--announcement-h) + var(--space-4));
}

.sunny-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-4);
	min-height: 76px;
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}

.sunny-header__brand {
	display: flex;
	flex: none;
	align-items: center;
}

.sunny-header__brand img,
.sunny-header__brand .custom-logo {
	display: block;
	width: auto;
	height: 30px;
}

.sunny-header__brand .sunny-site-title {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-sm);
	letter-spacing: var(--ls-tight);
	color: var(--brand-600);
}

/*
 * The nav scrolls sideways rather than wrapping. A shop with eight categories
 * would otherwise push the cart icon onto a second row, and the design keeps
 * the bar to one line at every width.
 */
.sunny-header__nav {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.sunny-header__nav::-webkit-scrollbar {
	display: none;
}

.sunny-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	letter-spacing: -0.01em;
}

.sunny-nav a {
	color: var(--fg-primary);
}

.sunny-nav a:hover,
.sunny-nav .current-menu-item > a,
.sunny-nav .current-menu-parent > a {
	color: var(--brand-600);
}

/* Sub-menus are flattened to a hover panel rather than a second bar. */
.sunny-nav .sub-menu {
	display: none;
	position: absolute;
	z-index: 60;
	min-width: 200px;
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	box-shadow: var(--shadow-md);
	list-style: none;
}

.sunny-nav > li {
	position: relative;
}

.sunny-nav > li:hover > .sub-menu,
.sunny-nav > li:focus-within > .sub-menu {
	display: block;
}

.sunny-nav .sub-menu li + li {
	margin-top: var(--space-2);
}

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

.sunny-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
}

.sunny-header__action {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--fg-primary);
	cursor: pointer;
}

.sunny-header__action:hover {
	background: var(--surface-sunken);
	color: var(--fg-primary);
}

.sunny-header__cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--surface-accent);
	color: var(--fg-on-accent);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 11px;
	line-height: 1;
}

.sunny-header__cart-count.is-empty {
	display: none;
}

/* --- Mobile menu button and panel -------------------------------------- */

/*
 * Hidden on desktop, where the nav itself is visible. Shown below 900px, which
 * is where the horizontal nav starts costing more than it gives.
 */
.sunny-header__toggle {
	display: none;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--fg-primary);
	cursor: pointer;
}

.sunny-header__toggle:hover {
	background: var(--surface-sunken);
	border-radius: var(--radius-md);
}

.sunny-header__toggle-label {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 10px;
	letter-spacing: 0.02em;
}

.sunny-mobile-nav {
	border-top: var(--border-w) solid var(--border-default);
	background: var(--surface-card);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.sunny-mobile-nav[hidden] {
	display: none;
}

.sunny-nav--mobile {
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--space-4);
	white-space: normal;
}

.sunny-nav--mobile .sub-menu {
	display: block;
	position: static;
	min-width: 0;
	margin: var(--space-3) 0 0 var(--space-4);
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-weight: var(--fw-semibold);
}

@media (max-width: 900px) {
	.sunny-header__toggle {
		display: flex;
	}

	.sunny-header__nav {
		display: none;
	}

	.sunny-header__bar {
		gap: var(--space-2);
		justify-content: space-between;
	}

	.sunny-header__brand {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* --- Breadcrumb -------------------------------------------------------- */

.sunny-breadcrumb {
	font-size: var(--fs-body-sm);
	color: var(--fg-muted);
	    background: #ffffff;
		padding: 10px;
		    border-bottom: 1px solid #2222;
}

.sunny-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The separator is drawn rather than written, so it is never read aloud. */
.sunny-breadcrumb__list li + li::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--border-strong);
}

.sunny-breadcrumb a {
	color: var(--fg-secondary);
}

.sunny-breadcrumb a:hover {
	color: var(--fg-primary);
}

.sunny-breadcrumb [aria-current="page"] {
	color: var(--fg-primary);
}

/* --- Paginated posts --------------------------------------------------- */

.sunny-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
	font-size: var(--fs-body-sm);
}

.sunny-page-links a,
.sunny-page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--space-2);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--fg-secondary);
}

.sunny-page-links > span {
	border-color: var(--surface-brand);
	background: var(--surface-brand);
	color: var(--fg-on-brand);
}

/* ---------------------------------------------------------------------------
 * Header mini-cart
 *
 * The mini-cart is part of the global site header, so its styles live in the
 * global base bundle instead of requiring a separate stylesheet request.
 * ------------------------------------------------------------------------ */

.sunny-header__cart-wrap {
	position: relative;
	display: flex;
	align-self: stretch;
	align-items: center;
}

.sunny-header__cart-wrap.is-mini-cart-open > .sunny-header__cart,
.sunny-header__cart-wrap:hover > .sunny-header__cart,
.sunny-header__cart-wrap:focus-within > .sunny-header__cart {
	color: var(--brand-700);
	background: var(--brand-50);
}

.sunny-mini-cart {
	position: absolute;
	top: calc(100% - 1px);
	right: 0;
	z-index: 85;
	width: min(390px, calc(100vw - (var(--container-pad) * 2)));
	color: var(--fg-primary);
	background: var(--surface-card);
	border: var(--border-w) solid var(--border-default);
	border-top: 3px solid var(--brand-500);
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
	transition:
		opacity var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard),
		visibility 0s linear var(--duration-fast);
}

.sunny-mini-cart::before,
.sunny-mini-cart::after {
	position: absolute;
	right: 20px;
	width: 0;
	height: 0;
	content: "";
	transform: translateY(-100%);
	pointer-events: none;
}

.sunny-mini-cart::before {
	top: 0;
	border-right: 11px solid transparent;
	border-bottom: 11px solid var(--brand-500);
	border-left: 11px solid transparent;
}

.sunny-mini-cart::after {
	top: 2px;
	right: 23px;
	border-right: 8px solid transparent;
	border-bottom: 8px solid var(--surface-card);
	border-left: 8px solid transparent;
}

.sunny-header__cart-wrap:hover > .sunny-mini-cart,
.sunny-header__cart-wrap:focus-within > .sunny-mini-cart,
.sunny-header__cart-wrap.is-mini-cart-open > .sunny-mini-cart {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

.sunny-mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-5) var(--space-4);
	border-bottom: var(--border-w) solid var(--border-default);
}

.sunny-mini-cart__title {
	font-family: var(--font-display);
	font-size: var(--fs-heading-sm);
	font-weight: var(--fw-extrabold);
}

.sunny-mini-cart__count {
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-pill);
	color: var(--brand-800);
	background: var(--brand-50);
	font-size: var(--fs-caption);
	font-weight: var(--fw-bold);
}

.sunny-mini-cart__items {
	display: flex;
	flex-direction: column;
	max-height: min(360px, 48vh);
	margin: 0;
	padding: var(--space-2) var(--space-5);
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.sunny-mini-cart__item {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) 28px;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3) 0;
	border-bottom: var(--border-w) solid var(--border-default);
}

.sunny-mini-cart__item:last-child {
	border-bottom: 0;
}

.sunny-mini-cart__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--radius-md);
	background: var(--surface-sunken);
}

.sunny-mini-cart__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-base) var(--ease-standard);
}

.sunny-mini-cart__media:hover img {
	transform: scale(1.04);
}

.sunny-mini-cart__details {
	min-width: 0;
}

.sunny-mini-cart__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--fg-primary);
	font-family: var(--font-display);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.sunny-mini-cart__name:hover {
	color: var(--brand-700);
}

.sunny-mini-cart__details .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	margin: var(--space-1) 0 0;
	color: var(--fg-muted);
	font-size: var(--fs-caption);
}

.sunny-mini-cart__details .variation dt,
.sunny-mini-cart__details .variation dd,
.sunny-mini-cart__details .variation p {
	margin: 0;
}

/* Woo Custom Product Addons prints this metadata in the mini-cart on every
 * page, and reuses the same markup in cart, checkout and account views. This
 * shared file is already loaded wherever the header mini-cart exists, so the
 * read-back styles belong here without requiring another stylesheet request. */
.wcpa_cart_meta.wcpa_cart_meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	color: var(--fg-secondary);
}

.wcpa_cart_meta.wcpa_cart_meta .wcpa_cart_meta_item {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-1);
	margin: 0;
}

.wcpa_cart_meta.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-label {
	margin: 0;
	font-weight: var(--fw-semibold);
	color: var(--fg-muted);
}

.wcpa_cart_meta.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-value,
.wcpa_cart_meta.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-value p {
	margin: 0;
	color: var(--fg-primary);
}

.wcpa_cart_meta.wcpa_cart_meta .wcpa_cart_price {
	color: var(--fg-secondary);
	font-variant-numeric: tabular-nums;
}

.wcpa_cart_meta.wcpa_cart_meta .wcpa_img img {
	border-radius: var(--radius-sm);
}

.sunny-mini-cart__quantity {
	display: block;
	margin-top: var(--space-2);
	color: var(--fg-secondary);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
}

.sunny-mini-cart__remove {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: var(--radius-pill);
	color: var(--fg-muted);
	font-size: 20px;
	line-height: 1;
}

.sunny-mini-cart__remove:hover,
.sunny-mini-cart__remove:focus-visible {
	color: var(--color-danger);
	background: var(--color-danger-bg);
}

.sunny-mini-cart__foot {
	padding: var(--space-4) var(--space-5) var(--space-5);
	border-top: var(--border-w) solid var(--border-default);
	background: color-mix(in srgb, var(--brand-50) 35%, var(--surface-card));
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.sunny-mini-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin: 0;
	font-size: var(--fs-body-md);
}

.sunny-mini-cart__subtotal strong {
	color: var(--brand-800);
	font-family: var(--font-display);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-extrabold);
}

.sunny-mini-cart__note {
	margin: var(--space-1) 0 var(--space-4);
	color: var(--fg-muted);
	font-size: var(--fs-caption);
}

.sunny-mini-cart__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
}

.sunny-mini-cart__actions .sunny-btn {
	justify-content: center;
	white-space: nowrap;
}

.sunny-mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-8) var(--space-6);
	text-align: center;
}

.sunny-mini-cart__empty-icon {
	display: grid;
	width: 52px;
	height: 52px;
	margin-bottom: var(--space-3);
	place-items: center;
	border-radius: var(--radius-pill);
	color: var(--brand-700);
	background: var(--brand-50);
}

.sunny-mini-cart__empty strong {
	font-family: var(--font-display);
	font-size: var(--fs-body-lg);
}

.sunny-mini-cart__empty p {
	margin: var(--space-1) 0 var(--space-4);
	color: var(--fg-muted);
	font-size: var(--fs-body-sm);
}

@media (max-width: 900px) {
	.sunny-mini-cart {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sunny-mini-cart,
	.sunny-mini-cart img {
		transition: none;
	}
}