/**
 * Seyleniya Cinnamon - components.
 *
 * Announcement bar, header, navigation, buttons, cards, forms, brand marks,
 * placeholders and the footer.
 */

/* ==================================================================
 * 1. Announcement bar (blueprint §8.1)
 * ============================================================== */

.sy-announcement {
	position: relative;
	z-index: var(--sy-z-announcement);
	background-color: var(--sy-ground-inverse);
	color: var(--sy-ground-inverse-text);
	text-align: center;
}

.sy-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sy-space-sm);
	min-height: var(--sy-announcement-height);
	padding: var(--sy-space-3xs) var(--sy-gutter);
}

.sy-announcement__text {
	margin: 0;
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-medium);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
}

.sy-announcement a {
	color: inherit;
}

/* ==================================================================
 * 2. Header (blueprint §8.2 - minimal and sticky)
 * ============================================================== */

.sy-header {
	position: sticky;
	top: var(--sy-sticky-top, 0px);
	z-index: var(--sy-z-header);
	background-color: var(--sy-ground-base);
	border-bottom: 1px solid transparent;
	transition: background-color var(--sy-duration) var(--sy-ease),
		border-color var(--sy-duration) var(--sy-ease),
		box-shadow var(--sy-duration) var(--sy-ease);
}

/*
 * The WordPress admin toolbar is fixed at the top for logged-in users, so a
 * sticky header pinned to 0 sits underneath it and the logo gets clipped.
 * Below 783px the toolbar is 46px tall and scrolls away with the page, so the
 * offset only applies while it is actually fixed.
 */
body.admin-bar {
	--sy-sticky-top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--sy-sticky-top: 0px;
	}
}

/* Applied by site.js once the page scrolls past the hero's top edge. */
.sy-header.is-stuck {
	background-color: var(--sy-ground-base);
	border-bottom-color: var(--sy-rule);
	box-shadow: var(--sy-shadow-soft);
}

.sy-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	/*
	 * A small gap on a phone. At --sy-space-md the row could not fit a 320px
	 * screen even once the CTA was hidden, and the overflow lands on the menu
	 * toggle because it is last.
	 */
	gap: var(--sy-space-xs);
	min-height: var(--sy-header-height);
}

/* --- Brand lockup ------------------------------------------------ */

/*
 * min-width: 0 because a flex item defaults to min-width: auto and would
 * rather push its siblings off the viewport than narrow itself.
 */
.sy-brand {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--sy-space-2xs);
	text-decoration: none;
	color: var(--sy-text);
}

.sy-brand:hover {
	color: var(--sy-text);
}

.sy-brand__mark {
	flex: 0 0 auto;
	width: 2rem;
	color: var(--sy-accent-strong);
}

.sy-brand__mark svg {
	width: 100%;
	height: auto;
}

.sy-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.sy-brand__name {
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-lg);
	font-weight: var(--sy-weight-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sy-brand__suffix {
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-sm);
	letter-spacing: 0.06em;
	color: var(--sy-accent-strong);
}

.sy-brand img {
	max-height: 3rem;
	width: auto;
}

/* --- Primary navigation ------------------------------------------ */

.sy-nav {
	display: none;
}

.sy-nav ul {
	display: flex;
	align-items: center;
	gap: var(--sy-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sy-nav li {
	margin: 0;
	position: relative;
}

.sy-nav a {
	position: relative;
	display: inline-block;
	padding-block: var(--sy-space-2xs);
	font-size: var(--sy-text-sm);
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* Underline drawn from the centre - the one nav flourish, kept quiet. */
.sy-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--sy-accent);
	transform: scaleX(0);
	transition: transform var(--sy-duration) var(--sy-ease);
}

.sy-nav a:hover::after,
.sy-nav .current-menu-item > a::after,
.sy-nav .current_page_item > a::after {
	transform: scaleX(1);
}

/* --- Sub-menus ---------------------------------------------------- */

/*
 * A second level exists in the markup (sy_nav_menu passes depth 2) and had no
 * styling at all, so `.sy-nav ul { display: flex }` laid a parent's children
 * out as an inline row inside the parent item.
 *
 * Hover for a mouse, focus-within for a keyboard. No JavaScript, so this
 * behaves the same with scripts disabled as the rest of the navigation does.
 */
.sy-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--sy-z-menu);

	/* Overriding the flex row inherited from `.sy-nav ul`. */
	display: block;
	min-width: 13rem;
	margin: 0;
	padding: var(--sy-space-2xs) 0;

	background-color: var(--sy-ground-raised);
	border: 1px solid var(--sy-rule);
	border-radius: var(--sy-radius-sm);
	box-shadow: var(--sy-shadow-soft);

	/*
	 * Hidden with visibility rather than display:none, so the transition can
	 * run and so focus can still reach the links when tabbing.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--sy-duration) var(--sy-ease),
		transform var(--sy-duration) var(--sy-ease),
		visibility var(--sy-duration) var(--sy-ease);
}

.sy-nav li:hover > .sub-menu,
.sy-nav li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
}

/*
 * A parent that is only a label - a Custom Link with "#" - is taken over by
 * site.js, which adds `sy-label-parent`. Click decides for those, not hover.
 *
 * Both rules are needed. Without the first, :focus-within keeps the menu open
 * after the click meant to close it, because clicking the link also focuses
 * it - the toggle then looks broken on every second press. The class is added
 * by script, so with JavaScript off hover still opens it and nothing is lost.
 */
.sy-nav li.sy-label-parent:hover > .sub-menu,
.sy-nav li.sy-label-parent:focus-within > .sub-menu {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
}

.sy-nav li.sy-label-parent.is-open > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.sy-nav .sub-menu li {
	margin: 0;
}

.sy-nav .sub-menu a {
	display: block;
	padding: var(--sy-space-2xs) var(--sy-space-md);
	font-size: var(--sy-text-sm);
	line-height: var(--sy-leading-snug);
	color: var(--sy-text);
}

/* The centre-out underline belongs to the top level; in a dropdown a plain
 * background change reads better and does not reflow the row. */
.sy-nav .sub-menu a::after {
	content: none;
}

.sy-nav .sub-menu a:hover,
.sy-nav .sub-menu a:focus-visible {
	background-color: var(--sy-ink-04);
	color: var(--sy-accent-strong);
}

/*
 * A parent needs to look like one. Drawn with borders rather than a character
 * so it inherits currentColor and needs no font support.
 */
.sy-nav .menu-item-has-children > a {
	padding-right: 0.9em;
}

.sy-nav .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	margin-top: -1px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid currentColor;
	opacity: 0.55;
	transition: transform var(--sy-duration) var(--sy-ease);
}

.sy-nav .menu-item-has-children:hover > a::before,
.sy-nav .menu-item-has-children:focus-within > a::before {
	transform: rotate(180deg);
}

/* The caret follows the same rule as the panel it describes. */
.sy-nav .menu-item-has-children.sy-label-parent:hover > a::before,
.sy-nav .menu-item-has-children.sy-label-parent:focus-within > a::before {
	transform: none;
}

.sy-nav .menu-item-has-children.sy-label-parent.is-open > a::before {
	transform: rotate(180deg);
}

/*
 * The last items sit near the right edge, and the root is `overflow-x: clip`,
 * so a dropdown opening leftwards would be cut off. These open rightwards
 * instead.
 */
.sy-nav > ul > li:last-child .sub-menu,
.sy-nav > ul > li:nth-last-child(2) .sub-menu {
	left: auto;
	right: 0;
}

/* --- Sub-menus in the drawer -------------------------------------- */

/*
 * Always open, indented. A phone has room to scroll and no room for hover, and
 * a collapsed accordion here would need JavaScript to be reachable at all.
 */
.sy-mobile-nav .sub-menu {
	margin: 0 0 var(--sy-space-sm) var(--sy-space-md);
	padding-left: var(--sy-space-md);
	border-left: 1px solid var(--sy-rule);
}

.sy-mobile-nav .sub-menu a {
	padding: var(--sy-space-2xs) 0;
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-base);
}

/*
 * Collapsed only once `.sy-js` confirms a script is running, the same
 * progressive-enhancement pattern the scroll reveal uses. With JavaScript off
 * every sub-page stays visible and reachable, which is why the collapse is
 * keyed off the class rather than applied unconditionally.
 */
.sy-js .sy-mobile-nav .menu-item-has-children > .sub-menu {
	display: none;
}

.sy-js .sy-mobile-nav .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/*
 * The parent item becomes a row: its link, then the expander. The link keeps
 * the space it needs so the parent page is still easy to tap.
 */
.sy-js .sy-mobile-nav .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.sy-js .sy-mobile-nav .menu-item-has-children > a {
	flex: 1 1 auto;
	min-width: 0;
}

.sy-js .sy-mobile-nav .menu-item-has-children > .sub-menu {
	flex: 1 0 100%;
}

.sy-submenu-toggle {
	flex: 0 0 auto;

	/* 44px, the minimum comfortable touch target. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sy-text);
	cursor: pointer;
}

.sy-submenu-toggle__icon {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--sy-duration) var(--sy-ease);
}

.sy-submenu-toggle[aria-expanded="true"] .sy-submenu-toggle__icon {
	transform: rotate(180deg);
}

.sy-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sy-space-xs);
}

/*
 * The Explore CTA is desktop-only.
 *
 * Mobile-first, matching how .sy-nav is handled: hidden here, shown from the
 * 900px breakpoint in responsive.css. On a phone it made the header row wider
 * than the screen and pushed the menu toggle off the right edge, and the drawer
 * already carries "Explore our cinnamon" - so nothing is lost by dropping it.
 */
/*
 * Scoped to .sy-header on purpose. `.sy-btn { display: inline-flex }` is
 * declared further down this same file, and at equal specificity source order
 * wins - so a bare `.sy-header__cta` selector would have been overridden and
 * the button would have kept showing. Two classes beats one.
 */
.sy-header .sy-header__cta {
	display: none;
}

/* Hidden entirely in Phase 1 - there is nothing to buy yet (§58). */
.sy-header__cart {
	display: none;
	position: relative;
	padding: var(--sy-space-2xs);
	color: var(--sy-text);
	text-decoration: none;
}

.sy-phase-2 .sy-header__cart,
.sy-phase-3 .sy-header__cart {
	display: inline-flex;
}

.sy-header__cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 1.15rem;
	padding: 0 0.25rem;
	background-color: var(--sy-accent-strong);
	color: var(--sy-text-inverse);
	border-radius: var(--sy-radius-pill);
	font-size: 0.625rem;
	font-weight: var(--sy-weight-semibold);
	line-height: 1.15rem;
	text-align: center;
}

/* --- Menu toggle -------------------------------------------------- */

.sy-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.6rem;
	background: none;
	border: 0;
	color: var(--sy-text);
}

.sy-menu-toggle__bar {
	display: block;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transition: transform var(--sy-duration) var(--sy-ease),
		opacity var(--sy-duration-fast) var(--sy-ease);
}

.sy-menu-toggle[aria-expanded="true"] .sy-menu-toggle__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.sy-menu-toggle[aria-expanded="true"] .sy-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.sy-menu-toggle[aria-expanded="true"] .sy-menu-toggle__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile drawer ------------------------------------------------ */

.sy-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--sy-z-menu);
	display: flex;
	flex-direction: column;
	padding: var(--sy-space-xl) var(--sy-gutter) var(--sy-space-2xl);
	background-color: var(--sy-ground-base);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--sy-duration) var(--sy-ease-out),
		visibility 0s linear var(--sy-duration);
}

.sy-mobile-nav.is-open {
	transform: translateY(0);
	visibility: visible;
	transition-delay: 0s;
}

/* With JS off there is no way to open the drawer, so it must not exist. */
html:not(.sy-js) .sy-mobile-nav,
html:not(.sy-js) .sy-menu-toggle {
	display: none;
}

.sy-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sy-space-xl);
}

.sy-mobile-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sy-mobile-nav li {
	margin: 0;
	border-bottom: var(--sy-border);
}

.sy-mobile-nav a {
	display: block;
	padding: var(--sy-space-md) 0;
	font-family: var(--sy-font-display);
	font-size: var(--sy-display-sm);
	text-decoration: none;
}

.sy-mobile-nav__actions {
	margin-top: var(--sy-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-xs);
}

body.sy-menu-open {
	overflow: hidden;
}

/* ==================================================================
 * 3. Buttons (blueprint §32)
 * ============================================================== */

.sy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sy-space-2xs);
	/* 48px min target - every CTA must be easy to tap (§35). */
	min-height: 3rem;
	padding: var(--sy-space-xs) var(--sy-space-lg);
	border: 1px solid transparent;
	border-radius: var(--sy-radius-sm);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-sm);
	font-weight: var(--sy-weight-medium);
	letter-spacing: var(--sy-tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--sy-duration) var(--sy-ease),
		border-color var(--sy-duration) var(--sy-ease),
		color var(--sy-duration) var(--sy-ease);
}

/*
 * Primary sits on the deepened taupe rather than raw taupe: white text on
 * #9F7F66 fails WCAG AA at body size (§45). The deepened tone keeps the
 * brand accent while clearing contrast.
 */
.sy-btn--primary {
	background-color: var(--sy-accent-strong);
	color: var(--sy-text-inverse);
}

.sy-btn--primary:hover {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-text-inverse);
}

.sy-btn--secondary {
	background-color: transparent;
	border-color: var(--sy-text);
	color: var(--sy-text);
}

.sy-btn--secondary:hover {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-ground-inverse-text);
}

.sy-btn--text {
	min-height: 2.5rem;
	padding-inline: 0;
	background: none;
	color: var(--sy-text);
	border-bottom: 1px solid var(--sy-accent);
	border-radius: 0;
}

.sy-btn--text:hover {
	color: var(--sy-accent-strong);
	border-bottom-color: currentColor;
}

.sy-btn__arrow {
	transition: transform var(--sy-duration) var(--sy-ease);
}

.sy-btn:hover .sy-btn__arrow {
	transform: translateX(3px);
}

.sy-section--ground-black .sy-btn--secondary {
	border-color: var(--sy-ground-inverse-text);
	color: var(--sy-ground-inverse-text);
}

.sy-section--ground-black .sy-btn--secondary:hover {
	background-color: var(--sy-ground-base);
	color: var(--sy-text);
}

/* --- Light islands on a dark ground -------------------------------- */

/*
 * A card paints itself light, so it is its own ground and needs its own text.
 *
 * `.sy-section--ground-black` recolours everything inside it, which is right
 * for text sitting directly on that ground and wrong for anything that paints
 * itself light. On a dark section the product cards ended up white-on-white:
 * the title from the section's `h1-h4` rule, the body from inherited colour,
 * the description from `.sy-lead`, and the button from the dark-ground
 * secondary restyle - which is why DISCOVER PRODUCT vanished completely rather
 * than merely dimming.
 *
 * Not a Golden-preset fault: black section plus white card does the same on the
 * brand palette, it had simply never been looked at.
 *
 * Specificity is the whole job here. Two classes beat the section's `h1-h4`
 * (0,1,1), and three beat its `.sy-btn--secondary` (0,2,0).
 */
.sy-section--ground-black :is(.sy-card, .sy-wholesale__path, textarea),
.sy-section--ground-black .woocommerce ul.products li.product {
	color: var(--sy-text);
}

.sy-section--ground-black :is(.sy-card, .sy-wholesale__path) :is(h1, h2, h3, h4),
.sy-section--ground-black .woocommerce ul.products li.product :is(h1, h2, h3, h4) {
	color: var(--sy-text);
}

/*
 * ink-80 rather than --sy-text-muted (0.64). Over the Golden preset's light
 * grey card the muted value measures 4.44:1 - a hair under AA - while 0.80
 * reaches 7.29:1 and still reads as secondary. Defensive: no .sy-lead sits
 * inside a card today, but one inside a wholesale path would.
 */
.sy-section--ground-black :is(.sy-card, .sy-wholesale__path) .sy-lead,
.sy-section--ground-black .woocommerce ul.products li.product .sy-lead {
	color: var(--sy-ink-80);
}

/*
 * The button goes back to being an ordinary secondary button - these are the
 * base `.sy-btn--secondary` declarations verbatim, because on a light card that
 * is exactly what it should be. A first attempt here used --sy-rule-strong for
 * the border, which is taupe at 40% and measures 1.57:1 on a white card: far
 * fainter than the site's own secondary button and under the 3:1 WCAG asks of
 * a control's boundary.
 */
.sy-section--ground-black :is(.sy-card, .sy-wholesale__path) .sy-btn--secondary,
.sy-section--ground-black .woocommerce ul.products li.product .sy-btn--secondary {
	border-color: var(--sy-text);
	color: var(--sy-text);
}

.sy-section--ground-black :is(.sy-card, .sy-wholesale__path) .sy-btn--secondary:hover,
.sy-section--ground-black .woocommerce ul.products li.product .sy-btn--secondary:hover {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-ground-inverse-text);
}

.sy-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-sm);
}

/* ==================================================================
 * 4. Cards (blueprint §33 - restrained, line-led, rarely shadowed)
 * ============================================================== */

.sy-card {
	display: flex;
	flex-direction: column;
	background-color: var(--sy-ground-raised);
	border: var(--sy-border);
	border-radius: var(--sy-radius-md);
	overflow: hidden;
	transition: border-color var(--sy-duration) var(--sy-ease),
		box-shadow var(--sy-duration) var(--sy-ease),
		transform var(--sy-duration) var(--sy-ease);
}

.sy-card:hover {
	border-color: var(--sy-rule-strong);
	box-shadow: var(--sy-shadow-lift);
	transform: translateY(-2px);
}

.sy-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--sy-ground-base);
}

.sy-card__media img,
.sy-card__media .sy-image--empty {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sy-duration-slow) var(--sy-ease-out);
}

.sy-card:hover .sy-card__media img {
	transform: scale(1.04);
}

.sy-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-2xs);
	flex: 1 1 auto;
	padding: var(--sy-space-md);
}

.sy-card__title {
	margin: 0;
	font-size: var(--sy-text-xl);
}

.sy-card__title a {
	text-decoration: none;
}

.sy-card__meta {
	font-size: var(--sy-text-xs);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

.sy-card__excerpt {
	margin: 0;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

.sy-card__foot {
	margin-top: auto;
	padding-top: var(--sy-space-sm);
}

/*
 * Feature cards (§12) carry no border or background at all - the blueprint
 * warns against over-carding the site.
 */
.sy-feature {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-xs);
	padding-top: var(--sy-space-md);
	border-top: 1px solid var(--sy-accent);
}

.sy-feature__number {
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	color: var(--sy-accent-strong);
}

.sy-feature__title {
	margin: 0;
	font-size: var(--sy-text-xl);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sy-feature__text {
	margin: 0;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

/* ==================================================================
 * 5. Brand marks and curves (blueprint §3)
 * ============================================================== */

.sy-mark {
	display: inline-block;
	line-height: 0;
	color: currentColor;
}

.sy-mark svg {
	width: 100%;
	height: auto;
	fill: none;
	stroke: currentColor;
}

/*
 * Mark sizes, chosen per section.
 *
 * TWO classes on purpose. Each section sets its mark's width with a single
 * class of its own - `.sy-hero__mark`, `.sy-story__motif` - so a one-class
 * size modifier would tie with it and be decided by source order. Two beats
 * one, which is the same reasoning as the header CTA and the card reset.
 *
 * Nothing is emitted at all unless somebody picks a size, so the sections keep
 * their own widths until then.
 */
.sy-mark.sy-mark--sm {
	width: 1.75rem;
}

.sy-mark.sy-mark--md {
	width: 2.75rem;
}

.sy-mark.sy-mark--lg {
	width: 4.5rem;
}

/* An uploaded logo is a raster image, so it needs the opposite of the rule
 * above: a real height, and no stroke to paint it with. */
.sy-mark--logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* The continuous-stroke divider between sections. Decorative only. */
.sy-curve {
	display: block;
	width: 100%;
	max-width: 22rem;
	margin-inline: auto;
	color: var(--sy-accent);
	opacity: 0.7;
}

.sy-curve--top {
	margin-bottom: var(--sy-space-lg);
}

.sy-curve--bottom {
	margin-top: var(--sy-space-lg);
}

/* ==================================================================
 * 6. Images and placeholders
 * ============================================================== */

.sy-image {
	width: 100%;
	height: auto;
	border-radius: var(--sy-radius-md);
	object-fit: cover;
}

/*
 * The shape of a picture slot belongs to the SECTION, never to the file that
 * was uploaded into it.
 *
 * Each ratio is the crop's own dimensions, from sy_image_sizes() in
 * inc/setup.php - tools/smoke/widgets.php fails if the two ever disagree. The
 * class is on both the <img> and the empty placeholder frame, so an empty slot
 * is exactly the shape of the photograph that will replace it and nothing on
 * the page moves when one is finally added.
 *
 * min-height is reset because .sy-image--empty carries a flat 16rem floor,
 * which would otherwise win over a short ratio and reintroduce the mismatch.
 */
.sy-image--sy-hero {
	aspect-ratio: 2000 / 1200;
	min-height: 0;
}

.sy-image--sy-editorial {
	aspect-ratio: 1200 / 1500;
	min-height: 0;
}

.sy-image--sy-portrait {
	aspect-ratio: 1200 / 1600;
	min-height: 0;
}

.sy-image--sy-wide {
	aspect-ratio: 1600 / 1100;
	min-height: 0;
}

.sy-image--sy-card {
	aspect-ratio: 800 / 1000;
	min-height: 0;
}

.sy-image--sy-square {
	aspect-ratio: 900 / 900;
	min-height: 0;
}

.sy-image--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sy-space-sm);
	min-height: 16rem;
	padding: var(--sy-space-lg);
	background-color: var(--sy-ground-base);
	border: 1px dashed var(--sy-rule-strong);
	text-align: center;
}

.sy-image__mark {
	width: 3rem;
	color: var(--sy-taupe-40);
}

/*
 * Placeholders are deliberately conspicuous. Blueprint §4 forbids inventing
 * business facts, so anything unverified has to be impossible to mistake for
 * finished copy - by the reader and by the business reviewing the build.
 */
.sy-placeholder {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sy-space-2xs);
	padding: 0.35em 0.7em;
	background-color: var(--sy-taupe-12);
	border: 1px dashed var(--sy-accent);
	border-radius: var(--sy-radius-sm);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-sm);
	font-style: normal;
	line-height: var(--sy-leading-snug);
	color: var(--sy-ink-80);

	/*
	 * An inline-flex box sizes to its content, so without this the chip pushes
	 * its parent wider rather than wrapping - which is how it came to widen an
	 * image frame past the edge of the screen.
	 */
	max-width: 100%;
}

.sy-placeholder__tag {
	font-size: 0.625rem;
	font-weight: var(--sy-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sy-accent-strong);
	white-space: nowrap;
}

/* ==================================================================
 * 7. Forms
 *
 * Styles both the theme's own markup and Forminator's, so the plugin
 * inherits the brand without the theme depending on it (§55 Rule 10).
 * ============================================================== */

.sy-field {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-3xs);
}

.sy-field__label,
.forminator-label {
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-ink-80);
}

.sy-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 3rem;
	padding: var(--sy-space-xs) var(--sy-space-sm);
	background-color: var(--sy-ground-raised);
	border: 1px solid var(--sy-rule-strong);
	border-radius: var(--sy-radius-sm);
	font-family: var(--sy-font-body);
	/* 16px minimum stops iOS zooming the viewport on focus. */
	font-size: 1rem;
	color: var(--sy-text);
	transition: border-color var(--sy-duration-fast) var(--sy-ease);
}

.sy-input:focus,
input:focus,
select:focus,
textarea:focus {
	border-color: var(--sy-accent-strong);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

.sy-field__hint {
	font-size: var(--sy-text-xs);
	color: var(--sy-ink-64);
}

.sy-form__note {
	margin-top: var(--sy-space-sm);
	font-size: var(--sy-text-xs);
	color: var(--sy-ink-64);
}

/*
 * A form's submit button, adopted into the brand.
 *
 * THE BUG THIS FIXES: the field rule above is an allow-list of input TYPES -
 * text, email, tel, url, search, number, password - and submit was never in
 * it. base.css then sets `button { font: inherit; color: inherit }`, which
 * takes the browser's own button look away without putting anything back. A
 * Forminator submit button therefore rendered as plain text on no background,
 * on every page that has a form.
 *
 * Restated from .sy-btn + .sy-btn--primary rather than shared with them,
 * because the plugin owns its own markup and will not wear our class. That is
 * the same thing woocommerce.css does for Woo's buttons, and like that one it
 * uses no !important - matching the plugin's own selectors is enough.
 *
 * NOT a bare `button` selector. The drawer toggle, the sub-menu carets, the
 * detail panels and the appearance switch are all <button> elements that are
 * meant to look like nothing at all; a blanket rule would turn every one of
 * them into a filled CTA. type="submit" is the line that separates them.
 *
 * Tokens only, so every palette and dark mode follow without another rule.
 */
input[type="submit"],
button[type="submit"],
.forminator-button,
.forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sy-space-2xs);
	/* 48px min target, as every other CTA (§35). */
	min-height: 3rem;
	width: auto;
	padding: var(--sy-space-xs) var(--sy-space-lg);
	background-color: var(--sy-accent-strong);
	border: 1px solid transparent;
	border-radius: var(--sy-radius-sm);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-sm);
	font-weight: var(--sy-weight-medium);
	letter-spacing: var(--sy-tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: var(--sy-text-inverse);
	cursor: pointer;
	transition: background-color var(--sy-duration) var(--sy-ease),
		border-color var(--sy-duration) var(--sy-ease),
		color var(--sy-duration) var(--sy-ease);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.forminator-button:hover,
.forminator-button-submit:hover {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-text-inverse);
}

/*
 * Shown in place of a form when its plugin is not installed. The site must
 * never present a broken or silently dead form.
 */
.sy-form-fallback {
	padding: var(--sy-space-md);
	background-color: var(--sy-taupe-12);
	border: 1px dashed var(--sy-accent);
	border-radius: var(--sy-radius-md);
	font-size: var(--sy-text-sm);
}

.sy-form-fallback p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
 * 8. Footer (blueprint §22)
 * ============================================================== */

.sy-footer {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-ground-inverse-text);
	padding-block: var(--sy-space-2xl) var(--sy-space-lg);
}

.sy-footer a {
	color: var(--sy-ground-inverse-text);
	text-decoration: none;
}

.sy-footer a:hover {
	color: var(--sy-text-inverse);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.sy-footer__grid {
	display: grid;
	gap: var(--sy-space-xl);
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: var(--sy-space-xl);
	border-bottom: 1px solid var(--sy-taupe-40);
}

.sy-footer__brand .sy-brand {
	color: var(--sy-ground-inverse-text);
	margin-bottom: var(--sy-space-sm);
}

.sy-footer__brand .sy-brand__mark {
	color: var(--sy-taupe);
	width: 2.5rem;
}

.sy-footer__tagline {
	max-width: 26ch;
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-lg);
	line-height: var(--sy-leading-snug);
	color: var(--sy-cream-56);
}

.sy-footer__title {
	margin: 0 0 var(--sy-space-sm);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-taupe);
}

.sy-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sy-footer li {
	margin: 0 0 var(--sy-space-2xs);
	font-size: var(--sy-text-sm);
}

/*
 * Social links, as icon plus name.
 *
 * Stacked one per line, which is both what was asked for and what the Explore
 * and Customer columns beside it already do - the old flex row was the odd
 * one out in the footer.
 */
.sy-social {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-2xs);
}

/* Where there is no column to fill - the contact page, the coming-soon page. */
.sy-social--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--sy-space-md);
}

.sy-social__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sy-space-2xs);
}

/*
 * .sy-mark svg is `width: 100%`, sized by its parent - correct for a hero
 * flourish, and the reason an icon needs an explicit width here rather than
 * filling the column. `flex: none` keeps it from being squeezed by a long name.
 */
.sy-social__icon {
	flex: none;
	width: 1.15rem;
}

.sy-footer__social {
	font-size: var(--sy-text-sm);
}

.sy-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sy-space-sm);
	padding-top: var(--sy-space-lg);
	font-size: var(--sy-text-xs);
	color: var(--sy-cream-56);
}

.sy-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-md);
}

.sy-footer__bottom li {
	margin: 0;
	font-size: inherit;
}

/* ==================================================================
 * 9. Pagination and misc
 * ============================================================== */

.sy-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--sy-space-xl);
}

.sy-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--sy-space-2xs);
	text-decoration: none;
	font-size: var(--sy-text-sm);
}

.sy-pagination .page-numbers.current {
	border-bottom: 1px solid var(--sy-accent);
	font-weight: var(--sy-weight-semibold);
}

/* ==================================================================
 * Currency switcher and converted prices
 *
 * Only ever visible from Phase 3, and only when live rates were fetched.
 * ============================================================== */

.sy-currency__select {
	min-height: 2.5rem;
	padding: 0 var(--sy-space-xs);
	background-color: transparent;
	border: 1px solid var(--sy-rule-strong);
	border-radius: var(--sy-radius-sm);
	font-size: var(--sy-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * The approximation is deliberately quieter than the real price. The figure
 * the customer will actually be charged should read as the primary one.
 */
.sy-price__approx {
	display: inline-block;
	margin-left: var(--sy-space-2xs);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	color: var(--sy-ink-64);
	white-space: nowrap;
}

.sy-currency-note {
	display: block;
	margin-top: var(--sy-space-2xs);
	font-size: var(--sy-text-xs);
	color: var(--sy-ink-64);
}

/* ==================================================================
 * Pull quote and fact strip
 *
 * The two editorial beats that stop a long page reading as one column.
 * ============================================================== */

.sy-pull {
	max-width: 34ch;
	margin: var(--sy-space-xl) auto;
	padding-top: var(--sy-space-md);
	border-top: 1px solid var(--sy-accent);
	text-align: center;
}

.sy-pull__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--sy-font-display);
	font-size: var(--sy-display-sm);
	line-height: var(--sy-leading-snug);
	text-wrap: balance;
}

.sy-pull__source {
	margin-top: var(--sy-space-sm);
	font-size: var(--sy-text-xs);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

.sy-facts {
	display: grid;
	gap: var(--sy-grid-gap);
	grid-template-columns: minmax(0, 1fr);
	margin: var(--sy-space-xl) 0 0;
	padding-top: var(--sy-space-lg);
	border-top: var(--sy-border);
}

.sy-facts__item {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-3xs);
}

.sy-facts__label {
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

.sy-facts__value {
	margin: 0;
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	line-height: var(--sy-leading-snug);
}

@media (min-width: 40em) {
	.sy-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56.25em) {
	.sy-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==================================================================
 * The designed empty state
 *
 * Photography arrives last. Until it does, an image slot shows the brand
 * pattern rather than a void, so the page can be reviewed and shown without
 * looking unfinished - while the chip keeps it honest about what is missing.
 * ============================================================== */

.sy-image--empty {
	position: relative;
	overflow: hidden;
	background-color: var(--sy-ground-base);
	border: 1px solid var(--sy-taupe-24);
	border-radius: var(--sy-radius-md);
}

.sy-section--ground-cream .sy-image--empty {
	background-color: var(--sy-ground-raised);
}

.sy-image__pattern {
	position: absolute;
	inset: 0;
	color: var(--sy-taupe);
	opacity: 0.16;
	pointer-events: none;
	line-height: 0;
}

.sy-image__pattern svg {
	width: 100%;
	height: 100%;
	stroke: none;
}

/*
 * The required dimensions, under the placeholder label. Quiet on purpose - it
 * is a note to whoever supplies the photograph, not part of the design.
 */
.sy-image__size {
	max-width: 100%;
	font-size: var(--sy-text-xs);
	letter-spacing: 0.04em;
	color: var(--sy-text-muted);
	text-align: center;
}

.sy-image__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sy-space-sm);
	width: 100%;
	height: 100%;
	min-height: inherit;
	padding: var(--sy-space-lg);
	text-align: center;
}

.sy-image__mark {
	width: 2.75rem;
	color: var(--sy-taupe-64);
}

/* On a dark section the pattern needs to read against black, not vanish. */
.sy-section--ground-black .sy-image--empty {
	background-color: var(--sy-ground-inverse);
	border-color: var(--sy-taupe-40);
}

.sy-section--ground-black .sy-image__pattern {
	color: var(--sy-ground-inverse-text);
	opacity: 0.1;
}