/* ==========================================================================
   NEXR Eyewear — Header chrome, drawer, search, and WooCommerce styling.
   Loaded after main.css.
   ========================================================================== */

/* ---- Announcement bar (brand-black utility bar, above the header) -------- */
.announce-bar { background: var(--c-ink); color: var(--c-ivory); font-size: var(--step--1); text-align: center; font-weight: 500; letter-spacing: .04em; }
.announce-bar p { padding-block: .5rem; }

/* ---- Search panel + drawer head ----------------------------------------- */
/* Reset to light context (it lives inside the dark <header>). */
.search-panel { --text: var(--c-ink); --text-muted: var(--c-ink-soft); --border: var(--c-line); color: var(--c-ink); border-block-start: 1px solid rgba(255,255,255,.1); background: var(--bg); }
.search-panel .container { padding-block: var(--space-s); }
.search-panel form { display: flex; gap: .5rem; }
.search-panel input[type="search"], .search-panel input.search-field {
	flex: 1; min-height: 48px; padding: 0 1rem; border: 1.5px solid var(--border);
	border-radius: var(--radius-pill); background: var(--surface); font: inherit; color: var(--text);
}
.search-panel button[type="submit"] {
	min-height: 48px; padding-inline: 1.25rem; border-radius: var(--radius-pill);
	background: var(--c-ink); color: var(--c-cream); font-weight: 600;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-s); }

/* ---- Placeholder blocks (before real images are added) ------------------ */
.hero__placeholder {
	position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem;
	color: var(--c-clay); text-align: center; padding: 1rem;
}
.hero__placeholder span { font-size: var(--step--1); max-width: 22ch; }
.split__media .hero__placeholder { position: static; min-height: 260px; background: var(--bg-alt); }

/* ---- WooCommerce: catalog toolbar --------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woo-breadcrumb { padding-block: var(--space-m) 0; color: var(--text-muted); font-size: var(--step--1); }
.woo-breadcrumb a { color: var(--text-muted); }
.woo-breadcrumb a:hover { color: var(--c-accent-2); }
.crumb-sep { opacity: .5; margin-inline: .25rem; }

.woocommerce-products-header { margin-block-end: var(--space-l); }
.woocommerce-products-header__title.page-title { font-size: var(--step-4); font-family: var(--font-display); }
.woocommerce-result-count { color: var(--text-muted); font-size: var(--step--1); }
.woocommerce-ordering select, .woocommerce .orderby {
	min-height: 44px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
	background: var(--surface); padding: 0 2.2rem 0 1rem; font: inherit; color: var(--text);
}

/* Reuse product-grid for Woo <ul.products>.
   Higher-specificity + !important so WooCommerce core's float/% column widths
   can never override the card size on install. Identical column rules to the
   homepage .product-grid, and the shop is full-width, so cards are the SAME
   size on the homepage and inside every category/archive. */
.woocommerce ul.products,
ul.products {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
	display: grid !important; gap: var(--space-l) var(--space-m) !important;
	grid-template-columns: repeat(2, 1fr) !important;
}
/* CRITICAL: WooCommerce core ships a float-clearfix
   `.woocommerce ul.products::before/::after { content:" "; display:table }`.
   Inside a CSS GRID these pseudo-elements are placed as REAL grid items — the
   ::before takes grid cell 1 of every row, shoving all products one column to
   the right and leaving a large empty column on the left (the "oversized cards /
   empty white space" bug). Neutralise them so products fill from column 1. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
@media (min-width: 680px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1080px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
.woocommerce ul.products li.product,
ul.products li.product {
	margin: 0 !important; width: auto !important; max-width: none !important;
	float: none !important; clear: none !important;
}
/* Force loop product images to FILL the square media. WooCommerce core ships
   `.woocommerce ul.products li.product img { height:auto }` (specificity 0,3,1)
   which otherwise collapses landscape thumbnails to a short strip inside the
   card. Higher specificity + !important guarantees object-fit:cover fills. */
.woocommerce ul.products li.product .product-card__media img,
.product-card__media .product-card__imgwrap img,
.product-card__media .product-card__imghover img,
.product-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	max-width: none !important;
}
/* Neutralise WooCommerce core spacing helpers that add trailing margins. */
.woocommerce ul.products li.product.first { clear: none !important; }
.woocommerce ul.products li.product.last { margin-inline-end: 0 !important; }
/* Hide "Magni Image Flip" plugin loop leftovers — the theme has its own
   hover-swap gallery, and the plugin's injected slideshow duplicates images
   inside every card. (Its markup imbalance is repaired in PHP; this hides
   whatever visual residue remains.) */
li.product .magni-box,
li.product .productimgfade,
li.product .imgfadedots,
li.product [class*="fade-pager"] { display: none !important; }

/* ---- Single product ------------------------------------------------------ */
.single-product div.product { display: grid; gap: var(--space-l); }
@media (min-width: 900px) { .single-product div.product { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; } }
.single-product .woocommerce-product-gallery { border-radius: var(--radius-l); overflow: hidden; }
.single-product .product_title { font-size: var(--step-4); margin-block-end: var(--space-xs); }
.single-product .price { font-size: var(--step-2); }
.single-product .woocommerce-product-details__short-description { color: var(--text-muted); margin-block: var(--space-s); }
.single-product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-block: var(--space-m); }
.single-product .quantity input { min-height: 48px; width: 84px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); text-align: center; font: inherit; }
.single-product .single_add_to_cart_button { min-height: 48px; }
.single-wa { flex-basis: 100%; }
.single-wa .btn { width: 100%; justify-content: center; }
.woocommerce-tabs { grid-column: 1 / -1; margin-block-start: var(--space-l); }

/* WooCommerce buttons → theme button (square, brand-black) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	background: var(--c-ink); color: var(--c-ivory); border-radius: var(--radius-s);
	min-height: 48px; padding: 0 1.6rem; font-weight: 600; border: 0;
	text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--1);
	transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #333; color: var(--c-ivory); }
.woocommerce a.button:active, .woocommerce button.button:active { transform: scale(.98); }
.woocommerce .button.alt { background: var(--c-ink); color: var(--c-ivory); }
.woocommerce .button.alt:hover { background: #333; }

/* ---- Cart & checkout ----------------------------------------------------- */
.woocommerce table.shop_table { border-radius: var(--radius-m); border-color: var(--border); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals { border-radius: var(--radius-m); }
.wc-proceed-to-checkout .checkout-button { justify-content: center; }

/* ---- Notices ------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--radius-m); border-inline-start: 4px solid var(--c-accent); background: var(--surface);
	padding: 1rem 1.25rem; box-shadow: var(--shadow-1);
}
.woocommerce-error { border-inline-start-color: var(--c-danger); }

/* ---- Sale flash ---------------------------------------------------------- */
.woocommerce span.onsale {
	background: var(--c-danger); color: #fff; border-radius: var(--radius-pill);
	min-height: 0; padding: .25rem .6rem; font-size: 11px; font-weight: 700;
}

/* ---- Pagination ---------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul, .pagination .nav-links { border: 0; display: flex; gap: .4rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li, .page-numbers { border: 0 !important; }
.page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1.5px solid var(--border) !important; }
.page-numbers.current { background: var(--c-ink); color: var(--c-cream); }

/* ---- Prose (pages/blog) -------------------------------------------------- */
.prose { line-height: var(--lh-body); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2, .prose h3 { margin-block-start: var(--space-l); }
.prose a { color: var(--c-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius-m); }

/* ---- Footer inline legal menu ------------------------------------------- */
.footer-inline { list-style: none; display: flex; gap: var(--space-m); flex-wrap: wrap; }