/**
 * components.css - buttons, cards, navigation, forms, social.
 * Depends on layout.css.
 */

/* ==========================================================================
   Buttons - design system
   Four scalloped "Order Now" variants (maroon/navy x filled/outline) plus two
   plain text link styles ("View All Products", with and without a wavy rule).
   Button labels use the heading font, matching the design.
   ========================================================================== */
.button {
	--mb-btn-fg: #fff;
	--mb-btn-bg: var(--mb-color-accent);
	--mb-btn-bg-hover: var(--mb-color-accent-dark);
	--mb-scallop: 12px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mb-space-xs);
	padding: 0.8rem 2rem;
	border: 0;
	background: var(--mb-btn-bg);
	color: var(--mb-btn-fg);
	font-family: var(--mb-font-heading);
	font-size: var(--mb-h6);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover,
.button:focus {
	background: var(--mb-btn-bg-hover);
	color: var(--mb-btn-fg);
}

/*
 * Scalloped edge.
 *
 * Two mask layers combine: tiled circles across the box (which read as bumps
 * once the middle is covered) plus a solid rectangle inset by one scallop.
 * Their union is the stamp silhouette.
 *
 * This is a CSS approximation of the design's scallop. If an exact SVG comes
 * from the design file, swap the mask for a border-image and delete this note.
 */
@supports (mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000)) {
	.button--scallop {
		border-radius: 0;
		-webkit-mask:
			radial-gradient(circle closest-side, #000 98%, #0000) 0 0 / var(--mb-scallop) var(--mb-scallop) round,
			linear-gradient(#000 0 0) 50% / calc(100% - var(--mb-scallop)) calc(100% - var(--mb-scallop)) no-repeat;
		mask:
			radial-gradient(circle closest-side, #000 98%, #0000) 0 0 / var(--mb-scallop) var(--mb-scallop) round,
			linear-gradient(#000 0 0) 50% / calc(100% - var(--mb-scallop)) calc(100% - var(--mb-scallop)) no-repeat;
	}
}

/* Fallback for browsers without mask support: a pill. */
.button--scallop { border-radius: 999px; }

/* Filled variants */
.button--primary {
	--mb-btn-bg: var(--mb-color-accent);
	--mb-btn-bg-hover: var(--mb-color-accent-dark);
	--mb-btn-fg: #fff;
}

.button--secondary {
	--mb-btn-bg: var(--mb-color-accent-alt);
	--mb-btn-bg-hover: var(--mb-color-accent-alt-dark);
	--mb-btn-fg: #fff;
}

/*
 * Outline variants.
 *
 * The scallop is a mask, so a real border would be clipped away. Instead the
 * element's background provides the outline colour and an inset pseudo-element
 * punches out the middle in the page colour.
 */
.button--outline {
	position: relative;
	--mb-btn-bg: var(--mb-color-accent);
	--mb-btn-bg-hover: var(--mb-color-accent);
	color: var(--mb-color-accent);
}

.button--outline::before {
	position: absolute;
	inset: 2px;
	z-index: 0;
	background: var(--mb-color-bg);
	border-radius: inherit;
	content: "";
	-webkit-mask: inherit;
	mask: inherit;
}

.button--outline > * ,
.button--outline { z-index: 0; }

.button--outline::after {
	position: relative;
	z-index: 1;
	content: "";
}

/* Keep the label above the punched-out middle. */
.button--outline {
	isolation: isolate;
}

.button--outline:hover {
	color: var(--mb-color-accent-dark);
}

.button--outline-secondary {
	--mb-btn-bg: var(--mb-color-accent-alt);
	--mb-btn-bg-hover: var(--mb-color-accent-alt);
	color: var(--mb-color-accent-alt);
}

.button--outline-secondary:hover { color: var(--mb-color-accent-alt-dark); }

/* Legacy alias kept so existing templates keep working. */
.button--ghost {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--mb-color-text);
}

/* ==========================================================================
   Text links - "View All Products"
   ========================================================================== */
.link-cta {
	display: inline-block;
	color: var(--mb-color-accent-alt);
	font-family: var(--mb-font-body);
	font-weight: 500;
	text-decoration: none;
}

.link-cta:hover { color: var(--mb-color-accent-alt-dark); }

/* Wavy-underlined variant, straight from the design system sheet. */
.link-cta--wavy {
	text-decoration: underline wavy;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

/* ==========================================================================
   Header actions - profile, wishlist, cart
   ========================================================================== */
.icon {
	width: var(--mb-header-icon);
	height: var(--mb-header-icon);
	display: block;
}

.header-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mb-black);
	text-decoration: none;
	transition: color 0.15s ease;
}

.header-action:hover,
.header-action:focus { color: var(--mb-color-accent); }

.header-action__count {
	position: absolute;
	top: -6px;
	right: -8px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	background: var(--mb-color-accent);
	border-radius: 999px;
	color: #fff;
	font-family: var(--mb-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Navigation */
.menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__list a {
	color: var(--mb-black);
	font-family: var(--mb-font-body);
	font-size: var(--mb-nav-size);
	font-weight: 500;
	text-decoration: none;
}

.menu__list a:hover,
.menu__list .current-menu-item > a { color: var(--mb-color-accent); }

/*
 * Footer menu layout and colour live in layout.css with the rest of the
 * footer. The dark-footer overrides that used to sit here were left over from
 * the previous design and were washing the links out to #d9d6cf.
 */

/*
 * Hamburger and search - mobile only, revealed at 1023.98 in responsive.css.
 * Both are borderless to match the header artwork.
 */
.nav-toggle,
.search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mb-black);
	cursor: pointer;
}

.nav-toggle:hover,
.search-toggle:hover { color: var(--mb-color-accent); }

/*
 * Three bars: the element is the middle one, the pseudo-elements are the
 * outer two. The bottom bar is deliberately short, per the design.
 */
.nav-toggle__bars {
	position: relative;
	display: block;
	width: var(--mb-burger-width);
	height: var(--mb-burger-bar);
	background: currentColor;
	border-radius: 2px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	position: absolute;
	left: 0;
	height: var(--mb-burger-bar);
	background: currentColor;
	border-radius: 2px;
	content: "";
}

.nav-toggle__bars::before {
	top: calc(var(--mb-burger-gap) * -1);
	width: 100%;
}

.nav-toggle__bars::after {
	top: var(--mb-burger-gap);
	width: 62%;
}

/* Search panel revealed by the search toggle. */
.header-search {
	display: none;
	padding-block: var(--mb-space-md);
	background: var(--mb-header-bg);
	border-top: 1px solid var(--mb-color-border);
}

.header-search.is-open { display: block; }

/* Mobile nav visibility is handled in responsive.css. */

/* Cards */
.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mb-color-bg);
	border: 1px solid var(--mb-color-border);
	border-radius: var(--mb-radius);
}

.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__body { padding: var(--mb-space-md); }
.card__title { font-size: var(--mb-h5); margin-bottom: var(--mb-space-xs); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--mb-color-accent); }
.card__meta { margin: 0 0 var(--mb-space-xs); color: var(--mb-color-muted); font-size: 0.875rem; }
.card__excerpt { margin: 0; color: var(--mb-color-muted); }

/* Forms */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: var(--mb-color-bg);
	border: 1px solid var(--mb-color-border);
	border-radius: var(--mb-radius);
	font: inherit;
	color: inherit;
}

.search-form { display: flex; gap: var(--mb-space-xs); }

/*
 * Social tiles.
 *
 * The supplied SVGs already contain the pink tile and the navy glyph, so the
 * link only sizes them - no border, radius or background here, or it would
 * double up on the artwork.
 */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-footer-social-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social__link {
	display: block;
	line-height: 0;
	transition: opacity 0.15s ease;
}

.social__link:hover,
.social__link:focus { opacity: 0.8; }

.social__link .icon {
	width: var(--mb-footer-social);
	height: var(--mb-footer-social);
}

/* Contact */
.contact { font-style: normal; }
.contact p { margin-bottom: var(--mb-space-xs); }

/* Map */
.map { border-radius: var(--mb-radius); overflow: hidden; }

/* 404 */
.error-404__inner { text-align: center; padding-block: var(--mb-space-xl); }
.error-404__code { font-size: 5rem; font-weight: 700; line-height: 1; color: var(--mb-color-accent); margin: 0; }
.error-404__actions { display: flex; justify-content: center; gap: var(--mb-space-sm); flex-wrap: wrap; }

/* Pagination */
.pagination { margin-top: var(--mb-space-xl); }
.pagination .page-numbers { padding: 0.4rem 0.7rem; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius); text-decoration: none; }
.pagination .current { background: var(--mb-color-accent); border-color: var(--mb-color-accent); color: #fff; }