/* LUCX Wholesale — storefront styles */

:root {
	--lucx-shadow: 0 1px 2px rgba(20,24,28,.06), 0 2px 8px rgba(20,24,28,.05);
	--lucx-radius: 10px;
}

/* Never allow horizontal overflow */
html, body { overflow-x: clip; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Constrain full-width cover inner content so it never exceeds the viewport */
.wp-block-cover__inner-container {
	width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto;
	padding-left: 1.25rem; padding-right: 1.25rem;
}

/* Header */
.lucx-header { position: relative; }
.lucx-header a { color: #fff; text-decoration: none; }

/* Top bar */
.lucx-header__top { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.lucx-header__row { gap: 2rem; }

/* Logo: source art is a black wordmark — invert to white on the dark header */
.lucx-logo { flex: 0 0 auto; line-height: 0; }
.lucx-logo img, .lucx-header .custom-logo {
	filter: brightness(0) invert(1);
	height: auto; width: 150px; max-width: 150px;
}

/* Search: takes the middle, comfortable max width */
.lucx-header__search { flex: 1 1 auto; max-width: 520px; }
.lucx-header__search .wp-block-search { width: 100%; margin: 0; }
.lucx-header__search .wp-block-search__inside-wrapper {
	border-radius: 999px; overflow: hidden; background: #fff; border: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.lucx-header__search .wp-block-search__input {
	border: 0; color: var(--wp--preset--color--ink); padding: .62rem 1rem; font-size: .9rem; background: transparent;
}
.lucx-header__search .wp-block-search__input:focus { outline: none; box-shadow: none; }
.lucx-header__search .wp-block-search__button {
	background: var(--wp--preset--color--brand); color: var(--wp--preset--color--accent);
	margin: .28rem .28rem .28rem 0; border: 0; border-radius: 999px; font-weight: 600; padding: .4rem 1.1rem;
	transition: background .15s ease;
}
.lucx-header__search .wp-block-search__button:hover { background: #e6a800; }

/* Account cluster */
.lucx-header__acct { gap: 1.4rem; white-space: nowrap; align-items: center; flex: 0 0 auto; }
.lucx-header__acct .wp-block-loginout a { font-size: .875rem; font-weight: 600; }
.lucx-header__acct .wp-block-loginout a:hover { color: var(--wp--preset--color--brand); }
.lucx-cart-link { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-size: .875rem; font-weight: 600; }
.lucx-cart-link:hover { color: var(--wp--preset--color--brand); }
.lucx-cart-count { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--accent); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; line-height: 1.5; }

/* Nav bar — separated from the top bar with a hairline */
.lucx-header__navbar { border-top: 1px solid rgba(255,255,255,.12); padding-top: .35rem; padding-bottom: .35rem; }

/* Belt-and-suspenders: never let any off-canvas WooCommerce drawer widen the page */
.wc-block-mini-cart__drawer { display: none !important; }
/* Mega nav */
.lucx-mega { margin-top: 0; }
.lucx-mega__toggle { display: none; }
.lucx-mega__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: center; }
.lucx-mega__item { position: relative; }
.lucx-mega__top {
	color: #fff; font-size: .875rem; font-weight: 600; cursor: pointer;
	display: inline-block; padding: .35rem 0; list-style: none;
}
.lucx-mega__top::-webkit-details-marker { display: none; }
.lucx-mega__item.has-panel > details > summary::after { content: " ▾"; color: var(--wp--preset--color--brand); }
.lucx-mega__top:hover, .lucx-mega__top:focus-visible { color: var(--wp--preset--color--brand); }
.lucx-mega__panel {
	position: absolute; top: 100%; left: 0; z-index: 40; margin-top: .4rem;
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px; box-shadow: var(--lucx-shadow); padding: .75rem;
	min-width: 240px;
}
.lucx-mega__panel ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.lucx-mega__panel li a {
	display: flex; justify-content: space-between; gap: 1rem; align-items: center;
	padding: .4rem .6rem; border-radius: 6px; color: var(--wp--preset--color--ink); font-size: .875rem;
}
.lucx-mega__panel li a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--brand-dark); }
.lucx-mega__count { color: var(--wp--preset--color--ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* Desktop: open panel on hover; keep <details> semantics for keyboard/mobile */
@media (min-width: 783px) {
	.lucx-mega__item.has-panel > details > summary { pointer-events: auto; }
	.lucx-mega__item.has-panel:hover .lucx-mega__panel,
	.lucx-mega__item.has-panel > details[open] .lucx-mega__panel,
	.lucx-mega__item.has-panel:focus-within .lucx-mega__panel { display: block; }
	.lucx-mega__panel { display: none; }
}

/* Mobile: collapse to a toggle, groups become accordions */
@media (max-width: 782px) {
	.lucx-header__row { flex-wrap: wrap; row-gap: .7rem; }
	.lucx-logo { order: 1; flex: 1 1 auto; }
	.lucx-header__acct { order: 2; flex: 0 0 auto; }
	.lucx-header__search { order: 3; flex: 1 1 100%; max-width: none; }
	.lucx-header__navbar { border-top: 0; padding-top: 0; }
	.lucx-mega__toggle {
		display: inline-flex; align-items: center; gap: .5rem; background: transparent;
		border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px;
		padding: .55rem .8rem; font-size: .875rem; font-weight: 600; cursor: pointer;
	}
	.lucx-mega__bars { width: 18px; height: 2px; background: #fff; box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff; display: inline-block; }
	.lucx-mega__list { display: none; flex-direction: column; gap: .25rem; margin-top: .6rem; width: 100%; }
	.lucx-mega.is-open .lucx-mega__list { display: flex; }
	.lucx-mega__item { width: 100%; }
	.lucx-mega__panel { position: static; box-shadow: none; border: 0; padding: .25rem 0 .5rem 1rem; min-width: 0; }
	.lucx-mega__item.has-panel > details[open] .lucx-mega__panel { display: block; }
	.lucx-mega__panel { display: none; }
	.lucx-mega__panel li a { color: #fff; }
	.lucx-mega__panel li a:hover { background: rgba(255,255,255,.1); color: var(--wp--preset--color--brand); }
	.lucx-mega__count { color: rgba(255,255,255,.7); }
}

/* Category sidebar */
.lucx-shop__sidebar .wp-block-categories { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .875rem; }
.lucx-shop__sidebar .wp-block-categories li { padding: .3rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.lucx-shop__sidebar .wp-block-categories .children { margin-left: .75rem; border-left: 2px solid var(--wp--preset--color--surface); padding-left: .6rem; }
.lucx-shop__sidebar a { color: var(--wp--preset--color--ink); }
.lucx-shop__sidebar a:hover { color: var(--wp--preset--color--brand-dark); }

/* Product cards (archive) */
.lucx-card {
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lucx-radius); padding: .85rem; height: 100%;
	transition: box-shadow .18s ease, transform .18s ease;
}
.lucx-card:hover { box-shadow: var(--lucx-shadow); transform: translateY(-2px); }
.lucx-card img { border-radius: 6px; background: var(--wp--preset--color--surface); }
.lucx-card .wp-block-post-title { margin: .6rem 0 .35rem; line-height: 1.35; }
.lucx-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.lucx-card .wp-block-post-title a:hover { color: var(--wp--preset--color--brand-dark); }
.lucx-card .price { font-weight: 700; color: var(--wp--preset--color--ink); display: block; margin-bottom: .5rem; }
.lucx-card .lucx-login-to-view { font-size: .8rem; margin: .2rem 0 .6rem; }
.lucx-card .wp-block-button__link, .lucx-card .button { width: 100%; text-align: center; }

/* Login-to-view prompt anywhere */
.lucx-login-to-view a { color: var(--wp--preset--color--brand-dark); }

/* Dense grid tightening */
.lucx-loop .wp-block-post-template.is-layout-grid { gap: 1rem; }

/* Responsive grids */
@media (max-width: 1024px) {
	.lucx-loop .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
	/* Category sidebar is redundant with the mega-menu on mobile — hide it,
	   give products the full width. */
	.lucx-shop { display: block; }
	.lucx-shop__sidebar { display: none; }
	.lucx-shop__main { width: 100%; max-width: 100%; }
	.lucx-loop .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Custom category grid — uniform square images, full markup control */
.lucx-cat-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.25rem;
}
.lucx-cat-card {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--wp--preset--color--border); border-radius: var(--lucx-radius);
	overflow: hidden; color: var(--wp--preset--color--ink);
	transition: box-shadow .18s ease, transform .18s ease;
}
.lucx-cat-card:hover { box-shadow: var(--lucx-shadow); transform: translateY(-2px); }
.lucx-cat-card__img { display: block; aspect-ratio: 1 / 1; background: var(--wp--preset--color--surface); overflow: hidden; }
.lucx-cat-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lucx-cat-card__name { font-weight: 600; font-size: .95rem; padding: .75rem .85rem .1rem; }
.lucx-cat-card__count { font-size: .78rem; color: var(--wp--preset--color--ink-soft); padding: 0 .85rem .85rem; }

/* Product grid (homepage new arrivals) — same card language as categories */
.lucx-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.lucx-prod-card {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--wp--preset--color--border); border-radius: var(--lucx-radius);
	overflow: hidden; color: var(--wp--preset--color--ink);
	transition: box-shadow .18s ease, transform .18s ease;
}
.lucx-prod-card:hover { box-shadow: var(--lucx-shadow); transform: translateY(-2px); }
.lucx-prod-card__img { display: block; aspect-ratio: 1 / 1; background: var(--wp--preset--color--surface); overflow: hidden; }
.lucx-prod-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lucx-prod-card__name { font-weight: 600; font-size: .875rem; line-height: 1.35; padding: .75rem .85rem .25rem; flex: 1; }
.lucx-prod-card__price { padding: 0 .85rem .85rem; font-weight: 700; }
.lucx-prod-card__gate { font-size: .8rem; font-weight: 600; color: var(--wp--preset--color--brand-dark); }
.lucx-prod-card__price .amount, .lucx-prod-card__price bdi { font-weight: 700; }
@media (max-width: 1024px) { .lucx-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .lucx-prod-grid { grid-template-columns: repeat(2, 1fr); } }

/* Classic WooCommerce product loops (homepage new arrivals, New Arrivals/Sale
   pages). High-specificity + !important to beat WooCommerce's float layout. */
.woocommerce ul.products,
ul.products.columns-4, ul.products.columns-3, ul.products {
	list-style: none !important; margin: 1.25rem 0 0 !important; padding: 0 !important;
	display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important;
}
/* WooCommerce's clearfix ::before/::after become stray grid cells — kill them */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lucx-radius); padding: 0; overflow: hidden; text-align: left;
	display: flex; flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover, ul.products li.product:hover { box-shadow: var(--lucx-shadow); transform: translateY(-2px); }
.woocommerce ul.products li.product > a, ul.products li.product > a { color: inherit; display: block; }
.woocommerce ul.products li.product a img, ul.products li.product a img {
	width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 .6rem !important;
	background: var(--wp--preset--color--surface); border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
ul.products li.product .woocommerce-loop-product__title {
	font-size: .9rem !important; font-weight: 600 !important; line-height: 1.35; padding: 0 .85rem !important; color: var(--wp--preset--color--ink);
}
.woocommerce ul.products li.product .price, ul.products li.product .price {
	font-weight: 700; color: var(--wp--preset--color--ink); display: block; margin: .4rem 0 !important; padding: 0 .85rem; font-size: .95rem;
}
.woocommerce ul.products li.product .lucx-login-to-view, ul.products li.product .lucx-login-to-view { font-size: .8rem; margin: .3rem 0; padding: 0 .85rem; }
.woocommerce ul.products li.product .button, ul.products li.product .button { margin: .3rem .85rem .85rem !important; }
.woocommerce ul.products li.product .added_to_cart { margin: 0 .85rem .85rem; }

@media (max-width: 1024px) {
	.lucx-cat-grid, .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
	.lucx-cat-grid, .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Classic shop toolbar (legacy template): title, result count, ordering */
.woocommerce-products-header, .lucx-shop__main .woocommerce > h1,
.lucx-shop__main .page-title { margin: 0 0 .25rem; }
.woocommerce .woocommerce-result-count { color: var(--wp--preset--color--ink-soft); font-size: .85rem; margin: 0; float: none; }
.woocommerce .woocommerce-ordering { margin: 0 0 1rem; float: none; }
.woocommerce .woocommerce-ordering select {
	padding: .5rem .7rem; border: 1px solid var(--wp--preset--color--border); border-radius: 8px;
	background: #fff; font-size: .85rem;
}
.lucx-shop__main { min-width: 0; }
.lucx-shop__main .woocommerce { display: flex; flex-direction: column; }
.lucx-shop__main .woocommerce-result-count { order: -1; }
/* keep the top toolbar tidy on one row where space allows */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce nav.woocommerce-pagination { margin-top: 2rem; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .25rem; border: 0; max-width: 100%; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: .4rem .75rem; min-width: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wp--preset--color--accent); color: #fff; border-color: var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------------------
   Account forms — login (My Account) and registration, as clean centred cards
   --------------------------------------------------------------------------- */
.lucx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.woocommerce-account .woocommerce,
.lucx-register {
	max-width: 460px; margin-left: auto; margin-right: auto;
}
form.woocommerce-form-login,
form.lucx-register {
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lucx-radius); box-shadow: var(--lucx-shadow);
	padding: 1.75rem; margin-top: 1rem;
}
form.woocommerce-form-login .form-row,
form.lucx-register .form-row { margin: 0 0 1rem; padding: 0; }
form.woocommerce-form-login label,
form.lucx-register label {
	display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; color: var(--wp--preset--color--ink);
}
form.woocommerce-form-login .input-text,
form.woocommerce-form-login input[type="text"],
form.woocommerce-form-login input[type="password"],
form.lucx-register .input-text,
form.lucx-register input[type="text"],
form.lucx-register input[type="email"],
form.lucx-register input[type="password"] {
	display: block; width: 100%; box-sizing: border-box;
	padding: .6rem .75rem; font-size: .95rem;
	border: 1px solid var(--wp--preset--color--border); border-radius: 8px; background: #fff;
}
form.woocommerce-form-login .input-text:focus,
form.lucx-register input:focus {
	outline: none; border-color: var(--wp--preset--color--brand); box-shadow: 0 0 0 3px rgba(211,154,0,.15);
}
form.woocommerce-form-login button[type="submit"],
form.woocommerce-form-login .woocommerce-form-login__submit,
form.lucx-register button[type="submit"] {
	width: 100%; margin-top: .25rem; padding: .7rem 1rem;
	background: var(--wp--preset--color--accent) !important; color: #fff !important;
	border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .95rem;
}
form.woocommerce-form-login button[type="submit"]:hover, form.lucx-register button[type="submit"]:hover { background: #000 !important; }
/* WooCommerce password show/hide toggle — keep it a small icon, not a big black button */
.woocommerce form .password-input, .woocommerce-password-hint { position: relative; }
.woocommerce form .password-input .show-password-input,
form.woocommerce-form-login .show-password-input {
	position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
	width: auto !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
	cursor: pointer;
}
form.woocommerce-form-login .password-input input { padding-right: 2.2rem; }
/* WooCommerce shows password toggle + remember on one row — tidy it */
.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .4rem; margin: .5rem 0; font-size: .85rem; }
.woocommerce-LostPassword { margin-top: .75rem; font-size: .85rem; }
.woocommerce-form-register__submit { width: 100%; }
/* cross-link between login and register */
.lucx-form-alt { text-align: center; margin-top: 1rem; font-size: .875rem; color: var(--wp--preset--color--ink-soft); }
.lucx-register-done { max-width: 480px; margin: 1rem auto; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--lucx-radius); padding: 1.5rem; text-align: center; }
.lucx-register-done h3 { margin-top: 0; }

/* WooCommerce buttons inherit theme button styling */
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button {
	background: var(--wp--preset--color--accent); color: #fff; border-radius: 8px; font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #000; }
.single-product .price { color: var(--wp--preset--color--ink); font-weight: 700; }