/* LumGem shared components: neutralizes WooCommerce's default table/button
   styling under .lumgem-scope so we're not fighting core CSS rule-by-rule. */

.lumgem-scope .button,
.lumgem-scope button,
.lumgem-scope input[type="submit"] {
	font-family: var(--lumgem-font-body);
	font-size: 14px;
	border-radius: var(--lumgem-radius);
	border: 1px solid var(--lumgem-color-ink);
	background: var(--lumgem-color-ink);
	color: #fff;
	padding: 12px 20px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.lumgem-scope .button:hover,
.lumgem-scope button:hover {
	background: var(--lumgem-color-accent-dark);
	border-color: var(--lumgem-color-accent-dark);
}

/**
 * WooCommerce's own default notice styling — light lavender-gray
 * background (#f6f5f8) with an olive-green top border/icon — never matched
 * this site's warm ink/cream palette anywhere it appears (Cart, Checkout,
 * My Account, Shop all render the exact same three notice types). Site
 * owner flagged this directly on a real "item removed. Undo?" notice.
 * Restyled sitewide here rather than per-page so it's consistent
 * everywhere, not just Cart. Only background/border/text colors change —
 * spacing, icon, and the real "Undo?" link/functionality are untouched.
 */
.lumgem-scope .woocommerce-message,
.lumgem-scope .woocommerce-error,
.lumgem-scope .woocommerce-info {
	background: var(--lumgem-color-surface);
	border-top-color: var(--lumgem-color-success);
	color: var(--lumgem-color-ink);
	box-shadow: 0 1px 4px rgba(28, 26, 23, 0.08);
}

.lumgem-scope .woocommerce-message::before {
	color: var(--lumgem-color-success);
}

.lumgem-scope .woocommerce-error {
	border-top-color: var(--lumgem-color-danger);
}

.lumgem-scope .woocommerce-error::before {
	color: var(--lumgem-color-danger);
}

.lumgem-scope .woocommerce-info {
	border-top-color: var(--lumgem-color-accent);
}

.lumgem-scope .woocommerce-info::before {
	color: var(--lumgem-color-accent);
}

.lumgem-scope .woocommerce-message a,
.lumgem-scope .woocommerce-error a,
.lumgem-scope .woocommerce-info a {
	color: var(--lumgem-color-ink);
	text-decoration: underline;
}

.lumgem-scope input[type="text"],
.lumgem-scope input[type="email"],
.lumgem-scope input[type="tel"],
.lumgem-scope input[type="number"],
.lumgem-scope select,
.lumgem-scope textarea {
	max-width: 100%;
	width: 100%;
	font-family: var(--lumgem-font-body);
	font-size: 14px;
	padding: 10px 12px;
	border: 1px solid var(--lumgem-color-line);
	border-radius: var(--lumgem-radius);
	background: #fff;
	color: var(--lumgem-color-ink);
}

.lumgem-scope input:focus,
.lumgem-scope select:focus,
.lumgem-scope textarea:focus {
	outline: 2px solid var(--lumgem-color-accent);
	outline-offset: 1px;
}

/* Shared standalone button (404 page, homepage hero CTA, newsletter). */
.lumgem-button {
	display: inline-block;
	background: var(--lumgem-color-ink);
	color: #fff;
	text-decoration: none;
	padding: 12px 24px;
	border: none;
	border-radius: var(--lumgem-radius);
	font-size: 14px;
	cursor: pointer;
}

.lumgem-button:hover {
	background: var(--lumgem-color-accent-dark);
}

/* Accordion toggle (Order Items / Gift Card / Store Credit, and the
   shipping/returns/warranty rows on the product page). justify-content is
   flex-start (not space-between) so an optional leading icon + label stay
   grouped together on the left; the trailing caret gets margin-left:auto to
   push itself to the far right regardless of how many items precede it.
   Selector is `.lumgem-scope .lumgem-accordion-toggle` (not just
   `.lumgem-accordion-toggle`) — most of these are themselves a <button>, so
   the generic `.lumgem-scope button` reset above (1 class + 1 element,
   specificity (0,0,1,1)) was silently winning over a bare single-class
   `.lumgem-accordion-toggle` (0,0,1,0) regardless of source order, leaving
   every accordion toggle sitewide with that rule's dark background + white
   text instead of this one's surface-alt/ink — invisible on the product
   page's trust list, which additionally sets background:none there and so
   had genuinely unreadable white-on-white text. Prefixing with `.lumgem-scope`
   makes this 2 classes (0,0,2,0), which beats a 1-class+1-element selector
   at the class-count comparison alone, regardless of element type — so this
   same rule also correctly styles the plain, non-interactive <div> variant
   used for trust-list rows that have no real expandable detail (see
   lumgem_single_product_trust_accordion() in single-product-hooks.php). */
.lumgem-scope .lumgem-accordion-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--lumgem-space-2);
	background: var(--lumgem-color-surface-alt);
	border: 1px solid var(--lumgem-color-line);
	color: var(--lumgem-color-ink);
	font-size: 14px;
	padding: 12px 16px;
	text-align: left;
}

.lumgem-accordion-toggle::after {
	content: '\25BE';
	margin-left: auto;
	transition: transform 0.15s ease;
}

.lumgem-accordion-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* Non-interactive variant — used when there's no confirmed detail to
   expand into (see lumgem_single_product_trust_accordion()): same row
   layout/icon/label styling, but no chevron and no pointer cursor, since
   there is genuinely nothing to reveal on click. */
.lumgem-accordion-toggle--static {
	cursor: default;
}

.lumgem-accordion-toggle--static::after {
	content: none;
}

.lumgem-accordion-panel {
	display: none;
	padding: var(--lumgem-space-3) var(--lumgem-space-4);
	border: 1px solid var(--lumgem-color-line);
	border-top: none;
}

.lumgem-accordion-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--lumgem-color-accent-dark);
}

.lumgem-accordion-icon svg {
	width: 100%;
	height: 100%;
}

/* Carousel (Free Gifts / Special Offers / You May Also Like) */
.lumgem-carousel {
	position: relative;
	margin: var(--lumgem-space-6) 0;
	min-width: 0;
	/* Belt-and-suspenders: some browsers still let a flex row's intrinsic
	   content width bleed into an ancestor's scrollWidth even though
	   .lumgem-carousel__track itself has overflow-x:auto and visually clips/
	   scrolls correctly — overflow:hidden here stops that from ever causing
	   page-level horizontal scroll. The arrow buttons are positioned at 8px
	   (inside the box) rather than -16px (outside) specifically so this
	   overflow:hidden doesn't clip them. */
	overflow: hidden;
}

.lumgem-carousel__title {
	font-size: 18px;
	margin-bottom: var(--lumgem-space-3);
}

.lumgem-carousel__track {
	display: flex;
	width: 100%;
	gap: var(--lumgem-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--lumgem-space-2);
}

.lumgem-carousel__track::-webkit-scrollbar {
	display: none;
}

.lumgem-carousel__item {
	flex: 0 0 200px;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
}

.lumgem-carousel__name {
	display: block;
	font-size: 13px;
	margin-top: var(--lumgem-space-2);
}

.lumgem-carousel__price {
	display: block;
	font-size: 13px;
	color: var(--lumgem-color-accent-dark);
}

/* `.lumgem-scope` prefix (2 classes) needed so this reliably beats the
   generic `.lumgem-scope button` reset above (1 class + 1 element,
   specificity 0,0,1,1) — a bare 1-class `.lumgem-carousel__arrow` selector
   tied on class-count and lost on source order, which is why these were
   silently rendering as the reset's dark-ink-filled square instead of this
   rule's intended white circle (same root cause/fix pattern as the
   accordion-toggle and search-toggle--desktop specificity fixes elsewhere in
   this project). */
/* Hidden by default (no `display` here) until initCarouselArrows()
   (single-product.js) confirms the track actually overflows (scrollWidth >
   clientWidth) and adds `.is-scrollable` to the wrapper — with a card width
   fixed per breakpoint, that only happens once there are more items than
   fit in one row, so a short row (e.g. 2 items in a 4-up desktop layout)
   never shows arrows with nothing to scroll to. `display` itself lives
   solely in the `.is-scrollable` rule below so there is only ever one
   `display` declaration in play, not two of equal specificity fighting on
   source order. Applies to every .lumgem-carousel (Cart/Home too — this is
   a correctness fix, not a redesign: arrows presented for a non-scrollable
   track were always a bug). */
.lumgem-scope .lumgem-carousel__arrow {
	position: absolute;
	top: 90px;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid var(--lumgem-color-line);
	background: #fff;
	color: var(--lumgem-color-ink);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.lumgem-carousel.is-scrollable .lumgem-carousel__arrow {
	display: flex;
}

.lumgem-carousel__arrow svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.lumgem-carousel__arrow--prev {
	left: 8px;
}

.lumgem-carousel__arrow--next {
	right: 8px;
}

@media (max-width: 599px) {
	.lumgem-carousel__item {
		flex-basis: 47%;
	}
	.lumgem-carousel.is-scrollable .lumgem-carousel__arrow {
		display: none;
	}
}

.lumgem-payment-badge {
	display: inline-block;
	border: 1px solid var(--lumgem-color-line);
	border-radius: var(--lumgem-radius);
	padding: 2px 8px;
	font-size: 11px;
	margin: 2px;
}

/* Sitewide trust/USP bar under the header — shares data with Checkout's
   Worry-Free block (lumgem_get_trust_badges()), rendered horizontally here. */
.lumgem-trust-bar {
	border-bottom: 1px solid var(--lumgem-color-line);
	background: var(--lumgem-color-surface-alt);
}

.lumgem-trust-bar__list {
	max-width: var(--lumgem-container-max);
	margin: 0 auto;
	/* Kept intentionally compact (small vertical padding, one-line-first
	   design) so this never competes with the first-screen buy-box for
	   vertical space — see the acceptance note on not over-consuming the
	   first screen. */
	padding: var(--lumgem-space-2) var(--lumgem-space-5);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--lumgem-space-4);
	overflow-x: auto;
}

.lumgem-trust-bar__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--lumgem-space-2);
	text-align: left;
	flex: 1 1 0;
	white-space: nowrap;
	font-size: 11px;
}

.lumgem-trust-bar__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--lumgem-color-accent-dark);
}

.lumgem-trust-bar__icon svg {
	width: 100%;
	height: 100%;
}

.lumgem-trust-bar__copy {
	display: flex;
	flex-direction: column;
}

.lumgem-trust-bar__label {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--lumgem-color-accent-dark);
}

.lumgem-trust-bar__text {
	display: block;
	color: var(--lumgem-color-ink);
	font-weight: 500;
	font-size: 11px;
	white-space: normal;
}

/* WooCommerce native breadcrumb — shared sitewide component (appears on
   both single-product and archive-product pages). */
/* Core woocommerce.css targets `.woocommerce .woocommerce-breadcrumb`
   (specificity 0,2,0, since body carries the "woocommerce" class on every
   WC page) — matching that exact compound selector here (rather than a
   plain `.woocommerce-breadcrumb`, specificity 0,1,0) is what makes ours
   actually win instead of being silently overridden by core's margin/padding. */
.woocommerce .woocommerce-breadcrumb {
	max-width: var(--lumgem-container-max);
	margin: 0 auto;
	padding: var(--lumgem-space-3) var(--lumgem-space-5);
	font-size: 12px;
	color: var(--lumgem-color-muted);
}

.woocommerce .woocommerce-breadcrumb a {
	text-decoration: none;
	color: var(--lumgem-color-muted);
}

/* Mobile: single line, horizontally scrollable (safe overflow contained to
   the breadcrumb itself) rather than wrapping into a tall multi-line block
   that pushes the gallery/buy-box down. */
@media (max-width: 1023px) {
	.woocommerce .woocommerce-breadcrumb {
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}