/**
 * base.css
 *
 * Design tokens (CSS custom properties) and global element resets shared
 * by every other stylesheet in the theme. Loaded first — every other CSS
 * file in assets/css/ depends on the variables defined here.
 */

:root {
	--ink: #111111;
	--ink-soft: #555555;
	--line: #dddddd;
	--bg: #ffffff;
	--bg-soft: #f7f7f7;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.55;
}
a {
	color: var(--ink);
	text-decoration: none;
}
img {
	max-width: 100%;
	display: block;
}
h1,
h2,
h3,
h4 {
	margin: 0 0 0.4em;
	letter-spacing: -0.01em;
}
button {
	font: inherit;
	cursor: pointer;
}

.wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/*
 * Breadcrumbs — used on every page that renders woocommerce_breadcrumb()
 * (shop/category archives, single product, cart, checkout, account),
 * so this belongs in base.css (loaded on every page) rather than a
 * page-specific stylesheet. Moved here after finding it duplicated
 * identically in both shop.css and account.css, and missing entirely
 * everywhere else (single-product.css, cart.css, checkout.css) — since
 * shop.css only loads on shop/category/taxonomy/search pages and
 * account.css only on account pages, single product/cart/checkout
 * breadcrumbs had no custom styling at all and fell back to the bare
 * browser default. That's what actually caused the font/padding/margin
 * mismatch reported against the single product page specifically, but
 * it affected cart and checkout too. One canonical copy here fixes all
 * of them and prevents the same gap on any future page.
 */
.breadcrumbs {
	font-size: 12.5px;
	color: #777;
	padding: 16px 0 0;
}
.breadcrumbs a {
	color: #777;
	text-decoration: underline;
}

/* Shared button styles used across multiple components (cart, checkout,
 * account, product page) — see docs/spec-review.md for each usage. */
.btn {
	display: inline-block;
	text-align: center;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	padding: 12px 20px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
}
.btn:hover {
	background: #fff;
	color: #111;
}
.btn-outline {
	background: #fff;
	color: #111;
}
.btn-outline:hover {
	background: #111;
	color: #fff;
}

/*
 * Shared modal pattern — used by the single product page's Size Chart
 * modal (single-product.css) and the cart page's Save/Share Cart
 * modals (cart.css). Common overlay/box/close-button/heading styling
 * lives here so it's not duplicated per page; each consumer sets its
 * own .modal-box max-width (and max-height/overflow, if its content
 * needs scrolling) since the two contexts want genuinely different
 * sizes — a compact form vs. a large size-chart table.
 */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal-overlay.open {
	display: flex;
}
.modal-box {
	background: #fff;
	width: 100%;
	border: 1px solid #111;
	padding: 26px;
	position: relative;
}
.modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: 0;
	font-size: 20px;
	cursor: pointer;
}
.modal-box h3 {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 2px solid #111;
	padding-bottom: 10px;
	margin-bottom: 16px;
}

/* ---------------- WooCommerce's own notice classes (success/error/info)
   — these render wherever wc_print_notices()/wc_print_notice() fire
   (cart, checkout, account, single-product "added to cart", etc.), so
   this lives in base.css rather than any one page's stylesheet.
   WooCommerce's own bundled default styles (still loaded — this theme
   has never dequeued them) give these a colored border and icon; this
   overrides that to match the monochrome black/white/grey convention
   used everywhere else in this theme (same treatment as .verify-banner
   in account.css: bordered box, no icon, no color-coding by type). ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 2px solid var(--ink, #111);
	background: var(--bg-soft, #f7f7f7);
	font-size: 13px;
}
.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none !important;
}