/* =========================================================================
 * Curvita — Components
 * -------------------------------------------------------------------------
 * All reusable UI components live here. Keep this file modular with
 * clear section banners so specific components are easy to find.
 *
 * Sections:
 *   1. Skip link (a11y)
 *   2. Top promo bar
 *   3. Site header (sticky, pink)
 *   4. Primary navigation
 *   5. Mini cart
 *   6. Mobile drawer
 *   7. Site footer
 *   8. Widget baseline
 * =========================================================================
 */


/* ─── 1. Skip link ────────────────────────────────────────────────── */

.skip-link {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: var(--z-modal);
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-navy);
	color: var(--c-white);
	font-weight: var(--fw-bold);
}
.skip-link:focus {
	color: var(--c-white);
	outline: 2px solid var(--c-coral);
}


/* ─── 2. Top promo bar ────────────────────────────────────────────── */
/* Pool of 12 messages in the DOM, all hidden by default. JS in main.js
 * picks 3 (desktop) or 1 (mobile) at a time, swaps them every ~5s in
 * a shuffled-bag order so no message repeats until all 12 have shown.
 */

.top-bar {
	background: #0B8A4A;           /* Greenish accent — matches source site */
	color: var(--c-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	min-height: var(--top-bar-height);
	display: flex;
	align-items: center;
	text-align: center;
	overflow: hidden;
}

.top-bar__inner {
	width: 100%;
}

/* The pool of all 12 messages. JS picks the visible subset
 * (3 on desktop, 1 on mobile) and shows them via the
 * .top-bar__message--visible class. Hidden messages stay in
 * the DOM (display:none via [hidden]) — JS toggles. */
.top-bar__carousel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: var(--top-bar-height);
	align-items: center;
}

.top-bar__message {
	font-size: var(--fs-xs);
	padding-block: var(--sp-2);
	padding-inline: var(--sp-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity 0.4s ease;
	opacity: 0;
}

.top-bar__message--visible {
	opacity: 1;
}

/* hidden attribute — DOM-level hide, takes no slot in the grid */
.top-bar__message[hidden] {
	display: none;
}

/* Mobile: single column, only 1 message visible at a time */
@media (max-width: 767px) {
	.top-bar__carousel {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.top-bar__message {
		padding-inline: var(--sp-3);
	}
}

/* Respect reduced motion — show 3 (or 1) without fade transition */
@media (prefers-reduced-motion: reduce) {
	.top-bar__message {
		transition: none;
	}
}


/* ─── 3. Site header (sticky, pink) ───────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header-sticky);
	background: transparent;
}

.main-header {
	background: var(--c-brand);
	color: var(--c-white);
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	/* Anchor for the absolutely-positioned search panel (v0.17.0) */
	position: relative;
}
@media (max-width: 767px) {
	.main-header {
		min-height: var(--header-height-mobile);
	}
}

.main-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	width: 100%;
}

.main-header__wordmark {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-white);
	white-space: nowrap;
	flex: 0 0 auto;
}
.main-header__wordmark:hover,
.main-header__wordmark:focus-visible {
	color: var(--c-white);
	opacity: 0.85;
}

/* Desktop: center nav; push actions to the right */
@media (min-width: 768px) {
	.main-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
	.main-header__actions { flex: 0 0 auto; margin-left: auto; }
}

/* Mobile: wordmark between toggle and actions, all centered */
@media (max-width: 767px) {
	.main-header__wordmark { flex: 1 1 auto; text-align: center; font-size: var(--fs-base); }
}

.main-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.main-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	padding: var(--sp-2);
	transition: opacity var(--transition-fast);
}
.main-header__icon-btn:hover,
.main-header__icon-btn:focus-visible {
	opacity: 0.8;
}


/* Mobile hamburger toggle (3 bars) */
.main-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
}
.main-header__toggle-bar {
	display: block;
	height: 2px;
	background: var(--c-white);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}


/* ─── 4. Primary navigation ───────────────────────────────────────── */

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu > li > a {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white);
	padding-block: var(--sp-2);
	transition: color var(--transition-fast);
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus-visible,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-parent > a {
	color: var(--c-coral);
}


/* ─── 5. Mini cart ────────────────────────────────────────────────── */

.mini-cart {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-decoration: none;
}
.mini-cart:hover,
.mini-cart:focus-visible {
	color: var(--c-white);
	opacity: 0.85;
}

.mini-cart__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-1);
}

.mini-cart__count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	background: var(--c-navy);
	color: var(--c-white);
	font-size: 10px;
	font-weight: var(--fw-bold);
	line-height: 18px;
	text-align: center;
	border-radius: var(--radius-pill);
}

.mini-cart__total {
	white-space: nowrap;
}
@media (max-width: 599px) {
	.mini-cart__total { display: none; }   /* Icon + count only on small phones */
}


/* ─── 6. Mobile drawer ────────────────────────────────────────────── */

.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	pointer-events: none;       /* Ignored until opened */
	visibility: hidden;
	transition: visibility 0s linear var(--transition-base);
}

.mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0%);
	transition: background var(--transition-base);
	cursor: pointer;
}

.mobile-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--c-white);
	color: var(--c-text);
	transform: translateX(100%);
	transition: transform var(--transition-base);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* Open state — body gets the class on click */
.has-mobile-drawer-open .mobile-drawer {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}
.has-mobile-drawer-open .mobile-drawer__backdrop {
	background: rgb(0 0 0 / 45%);
}
.has-mobile-drawer-open .mobile-drawer__panel {
	transform: translateX(0);
}
.has-mobile-drawer-open {
	overflow: hidden;           /* Lock page scroll while drawer open */
}


.mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-5);
	border-bottom: var(--border-width-thin) solid var(--c-border);
}

.mobile-drawer__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.mobile-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-2);
	color: var(--c-text);
	cursor: pointer;
}
.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
	color: var(--c-coral);
}

.mobile-drawer__nav {
	padding: var(--sp-4) var(--sp-5);
}

.mobile-menu,
.mobile-drawer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu > li > a,
.mobile-drawer__nav a {
	display: block;
	padding-block: var(--sp-3);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text);
	border-bottom: var(--border-width-thin) solid var(--c-border);
	transition: color var(--transition-fast);
}
.mobile-menu > li > a:hover,
.mobile-menu > li > a:focus-visible,
.mobile-menu > li.current-menu-item > a {
	color: var(--c-coral);
}

/* Submenus inside the drawer — indent, lighter weight */
.mobile-menu .sub-menu {
	padding-left: var(--sp-4);
}
.mobile-menu .sub-menu > li > a {
	font-weight: var(--fw-regular);
	text-transform: none;
}


/* ─── 7. Site footer ──────────────────────────────────────────────── */

.site-footer {
	background: var(--c-surface);
	color: var(--c-text);
	padding-block-start: var(--sp-12);
	margin-block-start: var(--sp-16);
}

.site-footer__widgets {
	padding-block-end: var(--sp-10);
}

.site-footer__grid {
	gap: var(--sp-8);
}

.site-footer__column {
	min-width: 0;    /* Prevent grid children overflowing on long content */
}

.site-footer__info {
	border-top: var(--border-width-thin) solid var(--c-border);
	padding-block: var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.site-footer__info .container {
	gap: var(--sp-3);
}

.site-footer__copyright,
.site-footer__credit {
	margin: 0;
}

@media (max-width: 599px) {
	.site-footer__info .container {
		flex-direction: column;
		text-align: center;
	}
}


/* ─── 8. Widget baseline (used in footer columns + any sidebar) ────── */

.widget {
	margin-block-end: var(--sp-6);
}
.widget:last-child {
	margin-block-end: 0;
}

.widget__title,
.widget-title {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-text);
	margin-block-end: var(--sp-4);
}

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

.widget li {
	padding-block: var(--sp-1);
}

.widget a {
	color: var(--c-text-dark);
	transition: color var(--transition-fast);
}
.widget a:hover,
.widget a:focus-visible {
	color: var(--c-coral);
}


/* =========================================================================
 * Product card — shared core (image frame, hover zoom, sale badge).
 * Moved here from home.css in v0.15.3: the card template
 * (template-parts/product-card.php) renders on the homepage
 * carousels AND the shop archive, but home.css only loads on the
 * front page — sale badges rendered as unstyled flow text on /shop/
 * and pushed sale cards out of alignment. components.css is global,
 * so every surface that renders the card now gets the same core.
 * Page-specific tweaks stay in home.css / woocommerce.css.
 * ========================================================================= */

.product-card__image-link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--product-aspect-ratio);
	background: var(--c-surface);
}

.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 9:16 shots in a 3:4 frame: a centered crop trims ~25% off the
	 * top and bottom and decapitates the models. Faces live in the
	 * top of the shot — anchor the crop there, like the category
	 * tiles (v0.20.0). */
	object-position: 50% 15%;
	display: block;
	transition: transform var(--transition-slow);
}
.product-card:hover .product-card__image {
	transform: scale(1.04);
}

.product-card__image--placeholder {
	width: 100%;
	height: 100%;
	background: var(--c-border);
}

.product-card__badge {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
	padding: var(--sp-1) var(--sp-3);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-white);
}
.product-card__badge--sale {
	background: var(--c-sale);
}


/* =========================================================================
 * Header search panel (v0.17.0)
 * The header search icon shipped in v0.3.0 pointing at #site-search,
 * but the panel + JS were never built — the icon did nothing. The
 * panel drops below the sticky pink bar; product-scoped search form.
 * Flat per design system: no radius, no shadow, navy borders.
 * ========================================================================= */

.site-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--c-white);
	color: var(--c-text);
	border-bottom: 2px solid var(--c-navy);
	padding-block: var(--sp-4);
}

.site-search__form {
	display: flex;
	gap: var(--sp-2);
	max-width: 640px;
	margin-inline: auto;
}

.site-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 2px solid var(--c-navy);
	border-radius: 0;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--c-text);
	background: var(--c-white);
	-webkit-appearance: none;
	appearance: none;
}
.site-search__input:focus {
	outline: 2px solid var(--c-brand);
	outline-offset: 0;
}

.site-search__submit {
	flex: 0 0 auto;
	background: var(--c-navy);
	color: var(--c-surface);
	border: 2px solid var(--c-navy);
	border-radius: 0;
	padding: 8px 24px;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	cursor: pointer;
}
.site-search__submit:hover {
	background: var(--c-white);
	color: var(--c-navy);
}

@media (max-width: 767px) {
	.site-search__form {
		flex-direction: column;
	}
	.site-search__submit {
		width: 100%;
		padding-block: 12px;
	}
}


/* ─── Header search: live suggestions (v0.18.0) ─────────────────── */

.site-search__form {
	position: relative;
}

.site-search__suggest {
	position: absolute;
	top: calc(100% + var(--sp-2));
	left: 0;
	right: 0;
	z-index: 95;
	background: var(--c-white);
	border: 2px solid var(--c-navy);
	max-height: min(60vh, 480px);
	overflow-y: auto;
}

.site-search__option {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	color: var(--c-text);
	text-decoration: none;
	cursor: pointer;
}
.site-search__option:hover,
.site-search__option.is-active,
.site-search__all:hover,
.site-search__all.is-active {
	background: var(--c-surface);
}

.site-search__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 58px;
	object-fit: cover;
	background: var(--c-surface);
}

.site-search__name {
	flex: 1 1 auto;
	font-size: var(--fs-sm);
	line-height: 1.3;
}

.site-search__price {
	flex: 0 0 auto;
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	white-space: nowrap;
}
.site-search__price del {
	color: var(--c-text-muted);
	font-weight: 400;
	margin-inline-end: 4px;
}
.site-search__price ins {
	color: var(--c-sale);
	text-decoration: none;
}

.site-search__all {
	display: block;
	width: 100%;
	padding: var(--sp-3);
	background: var(--c-white);
	border: 0;
	border-top: 1px solid var(--c-border);
	color: var(--c-navy);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.site-search__empty {
	padding: var(--sp-4);
	text-align: center;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}