/**
 * Luxico Layout Hotfix 1.0.0
 *
 * Defensive layout hardening for live WordPress + WooCommerce rendering.
 * Loaded after all theme/WooCommerce styles. Grouped by defect class; every
 * rule is a no-op where the layout is already correct. !important is used
 * only where WooCommerce legacy CSS (floats, clearfix pseudo-elements,
 * fixed percentage widths) must be neutralised to stop overlapping.
 */

/* ── 1 · Foundations: nothing may escape its box ─────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img {
	height: auto;
}

body {
	overflow-x: clip; /* clip, not hidden: keeps position:sticky working */
}

main,
.wp-block-post-content,
.wp-block-group,
.wp-block-column,
.wp-block-columns > * {
	min-width: 0;
}

h1,
h2,
h3,
h4,
p,
a,
li,
td,
th {
	overflow-wrap: break-word;
}

input,
select,
textarea,
button {
	max-width: 100%;
}

/* ── 2 · Text that must never render visibly (missing rules make
        assistive text pile on top of the page = "overlapping text") ── */

.screen-reader-text,
.sr-only,
.says {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed !important;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px) !important;
	left: 8px !important;
	z-index: 100001 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.75rem 1.25rem !important;
	clip-path: none !important;
	white-space: normal !important;
	background: var(--wp--preset--color--ink, #171713);
	color: var(--wp--preset--color--ivory, #f7f3ed);
	text-decoration: none;
}

/* ── 3 · Logged-in admin bar: sticky elements slide under it ─────────── */

body.admin-bar .is-position-sticky,
body.admin-bar [data-luxico-sticky] {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (min-width: 960px) {
	body.admin-bar .luxico-product .summary.is-sticky-eligible {
		top: calc(24px + var(--wp-admin--admin-bar--height, 32px));
	}
}

/* ── 4 · Header, logo and navigation overlay ─────────────────────────── */

header.wp-block-template-part,
.site-header {
	position: relative;
	z-index: 50;
}

/* A raw uploaded logo image must never render at its native pixel size. */
.wp-block-site-logo img,
.custom-logo {
	max-height: 3.5rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

.wp-block-site-logo {
	max-width: 220px;
	min-width: 0;
}

/* Header rows wrap instead of forcing children over each other. */
header .wp-block-group.is-layout-flex,
header .is-layout-flex {
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

/* The core navigation mobile overlay must be opaque and above content —
   a transparent overlay reads as menu text overlapping the page. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ivory, #f7f3ed) !important;
	z-index: 99999 !important;
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1rem;
}

.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation a {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ── 5 · Catalogue grid: neutralise WooCommerce legacy floats ────────── */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: clamp(16px, 2.5vw, 28px);
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Card imagery: uniform 1:1 (the approved imagery standard) so text rows
   align instead of colliding with taller neighbours. */
.woocommerce ul.products li.product img,
ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Badges pin inside their own card, never a neighbour. */
.woocommerce span.onsale,
.luxico-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	bottom: auto;
	z-index: 2;
	margin: 0;
}

/* Card CTA sits at the bottom edge of every card uniformly. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
}

/* ── 6 · Single product: de-float the two-column layout ──────────────── */

.woocommerce div.product::before,
.woocommerce div.product::after {
	content: none !important;
	display: none !important;
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
	float: none !important;
	width: 100% !important;
	margin-bottom: 0 !important;
	min-width: 0;
}

@media (min-width: 900px) {
	.woocommerce div.product:has(> div.images):has(> div.summary),
	.woocommerce div.product:has(div.woocommerce-product-gallery):has(div.summary) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(24px, 4vw, 48px);
		align-items: start;
	}

	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .up-sells,
	.woocommerce div.product .luxico-product-extra,
	.woocommerce div.product > .wp-block-group {
		grid-column: 1 / -1;
	}
}

/* Gallery: visible without JS, controls inside their frame, thumbs in a row. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce-product-gallery {
	opacity: 1 !important;
	position: relative;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
}

.woocommerce-product-gallery .flex-viewport {
	max-height: none !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery ol.flex-control-thumbs li {
	float: none !important;
	width: 72px !important;
	margin: 0 !important;
}

/* ── 7 · Notices flow in-document, never floating over content ───────── */

.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	position: static !important;
	float: none !important;
	clear: both;
	min-width: 0;
	margin: 0 0 1.25rem;
}

.woocommerce-error {
	list-style-position: inside;
	padding-left: 1rem;
}

/* ── 8 · Cart/checkout/account tables scroll on narrow screens ───────── */

@media (max-width: 680px) {
	.woocommerce table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* ── 9 · Footer columns wrap cleanly ─────────────────────────────────── */

footer .wp-block-columns {
	flex-wrap: wrap !important;
}

footer .wp-block-column {
	min-width: min(240px, 100%);
	flex-basis: auto;
}

/* ── 10 · Layered UI order (announcement < header < overlay < dialog) ── */

.luxico-announcement {
	position: relative;
	z-index: 40;
}

.luxico-quickview,
dialog[open] {
	z-index: 100000;
}

dialog {
	max-width: min(680px, calc(100vw - 2rem));
	max-height: min(85vh, 100%);
}