/*
 * Divi DigiMart: Shared layer.
 *
 * Theme.css section 2 (shared primitives) and the Button, Form and Table panes. Every
 * shop sheet depends on this one, so it loads wherever any of them does; its element rules
 * apply only under the body flags the theme prints (qndm-btn-ui, qndm-field-ui, qndm-table-ui).
 *
 * Ported from the QuikNexa child theme's theme.css (Phase 2b, Task 3): qn- became qndm-,
 * its tokens read the panel's (QNDM_Tokens), and the 1280 / 980 / 767 / 480 queries are
 * rewritten by QNDM_Tokens_Compile when the Breakpoint pane differs from Divi's.
 * Generated by tools/theme-css: edit the additions there, not this file.
 */

/* Every inline SVG in this theme is a stroked 24-box icon. */

#et-boc .qndm-btn svg,
#et-boc .qndm-preview svg,
#et-boc .qndm-wish svg,
#et-boc .qndm-new-filter svg,
#et-boc .qndm-search-field > svg,
#et-boc .qndm-search-clear svg,
#et-boc .qndm-stat svg,
#et-boc .qndm-wish-count svg,
.qndm-account-icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#et-boc .qndm-var-hidden,
#et-boc .qndm-var-tabs.is-single,
#et-boc .qndm-var-cards .qndm-var-option input,
#et-boc .qndm-account.is-enhanced #customer_login h2,
#et-boc .qndm-account .clear,
#et-boc .qndm-wish--remove svg,
body.qndm-account-ui #et-boc .woocommerce-MyAccount-navigation li:not([class*="link--"]) a::before {
	display: none;
}

#et-boc .qndm-var-tab:disabled,
#et-boc .qndm-var-option.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}

#et-boc .qndm-order:first-child,
#et-boc .qndm-link:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Surfaces */

#et-boc .qndm-account-card,
body.qndm-account-ui #et-boc .woocommerce-MyAccount-content,
body.qndm-account-ui #et-boc .woocommerce-MyAccount-navigation {
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-lg);
	background: var(--qndm-surface);
	box-shadow: var(--qndm-sh-md);
}

#et-boc .qndm-stat,
#et-boc .qndm-panel,
#et-boc .qndm-wishlist-item,
body.qndm-account-ui #et-boc .woocommerce-Address,
body.qndm-account-ui #et-boc .woocommerce-order-overview li {
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-md);
	min-width: 0;
}

#et-boc .qndm-stat:hover,
#et-boc .qndm-wishlist-item:hover,
body.qndm-account-ui #et-boc .woocommerce-Address:hover {
	border-color: var(--qndm-primary);
}

/* Keyboard focus */

#et-boc .qndm-wish:focus-visible,
#et-boc .qndm-stat:focus-visible,
body.qndm-account-ui #et-boc .woocommerce-MyAccount-navigation a:focus-visible,
body.qndm-account-ui #et-boc .woocommerce-MyAccount-content .button:focus-visible,
body.qndm-account-ui #et-boc .woocommerce-MyAccount-content .woocommerce-Button:focus-visible {
	outline: 2px solid var(--qndm-primary);
	outline-offset: 2px;
}

/* Muted secondary text */

#et-boc .qndm-var-label + *,
#et-boc .qndm-stat-label,
#et-boc .qndm-order-date,
#et-boc .qndm-link em,
#et-boc .qndm-search-price,
#et-boc .qndm-wishlist-price,
#et-boc .qndm-account-head p,
#et-boc .qndm-support span {
	color: var(--qndm-body);
}

/* ==========================================================================
   Buttons: the Button pane (body.qndm-btn-ui)
   A primary button is WooCommerce's .alt (Add to cart, Checkout, Place order);
   every other shop button is secondary. A Divi button keeps a design set in its
   module: the :where() rule below carries no more weight than Divi's own default.
   ========================================================================== */

body.qndm-btn-ui #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button).alt,
body.qndm-btn-ui.qndm-btn2-match #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button),
body.qndm-btn-ui :where(.et_pb_button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--qndm-sp-2);
	min-height: var(--qndm-btn-h);
	padding: var(--qndm-btn-pad);
	border-radius: var(--qndm-btn-r);
	line-height: var(--qndm-lh-tight);
}

body.qndm-btn-ui #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button),
body.qndm-btn-ui :where(.et_pb_button) {
	border: var(--qndm-btn-bw) solid var(--qndm-primary);
	background: var(--qndm-primary);
	color: var(--qndm-surface);
	font-family: var(--qndm-font-body);
	font-size: var(--qndm-btn-fs);
	font-weight: var(--qndm-btn-fw);
	letter-spacing: var(--qndm-btn-ls);
	text-transform: var(--qndm-btn-tt);
	transition: background var(--qndm-dur-fast) var(--qndm-ease), color var(--qndm-dur-fast) var(--qndm-ease), border-color var(--qndm-dur-fast) var(--qndm-ease), box-shadow var(--qndm-dur-fast) var(--qndm-ease), transform var(--qndm-dur-fast) var(--qndm-ease), filter var(--qndm-dur-fast) var(--qndm-ease);
}

/* Secondary: Outline, Solid or Text only */
body.qndm-btn2-outline #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):not(.alt) {
	border: max(1px, var(--qndm-btn-bw)) solid var(--qndm-primary);
	background: transparent;
	color: var(--qndm-primary);
}

body.qndm-btn2-solid #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):not(.alt) {
	border-color: var(--qndm-secondary);
	background: var(--qndm-secondary);
	color: var(--qndm-surface);
}

body.qndm-btn2-text #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):not(.alt) {
	border-color: transparent;
	background: transparent;
	color: var(--qndm-primary);
}

/* Hover effect */
body.qndm-btn-hover-darken #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):hover,
body.qndm-btn-hover-darken :where(.et_pb_button):hover {
	opacity: 1;
	filter: brightness(.92);
}

body.qndm-btn-hover-lift #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):hover,
body.qndm-btn-hover-lift :where(.et_pb_button):hover {
	opacity: 1;
	box-shadow: var(--qndm-sh-sm);
	transform: translateY(-1px);
}

body.qndm-btn-hover-outline #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):hover,
body.qndm-btn-hover-outline :where(.et_pb_button):hover {
	opacity: 1;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--qndm-primary);
	color: var(--qndm-primary);
}

/* Divi's arrow glyph on shop buttons */
body.qndm-no-arrow #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button)::after {
	display: none;
}

body.qndm-btn-ui:not(.qndm-no-arrow) #et-boc :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):hover {
	padding-right: 2em;
}

/* ==========================================================================
   Form fields: the Form pane (body.qndm-field-ui)
   ========================================================================== */

body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page, .qndm-search) :is(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea),
body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page) .select2-container .select2-selection--single {
	height: var(--qndm-input-h);
	padding: var(--qndm-input-pad);
	border: var(--qndm-input-bw) solid var(--qndm-border);
	border-radius: var(--qndm-input-r);
	background-color: var(--qndm-surface);
	color: var(--qndm-heading);
	font-family: var(--qndm-font-body);
	font-size: var(--qndm-fs-md);
	line-height: var(--qndm-lh-tight);
	box-shadow: none;
	transition: border-color var(--qndm-dur-fast) var(--qndm-ease), box-shadow var(--qndm-dur-fast) var(--qndm-ease);
}

body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page) .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: calc(var(--qndm-input-h) - 2 * var(--qndm-input-bw));
}

body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page) textarea {
	height: auto;
	min-height: 110px;
	padding-top: var(--qndm-sp-3);
	padding-bottom: var(--qndm-sp-3);
}

body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page, .qndm-search) :is(input, select, textarea):hover {
	border-color: var(--qndm-border-hover);
}

body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page, .qndm-search) :is(input, select, textarea)::placeholder {
	color: var(--qndm-placeholder);
}

/* Focus style: Ring, Border only or Both */
body.qndm-focus-ring #et-boc :is(.woocommerce, .woocommerce-page, .qndm-search) :is(input, select, textarea):focus {
	border-color: var(--qndm-border);
	box-shadow: 0 0 0 var(--qndm-ring-w) var(--qndm-ring);
	outline: 0;
}

body.qndm-focus-border #et-boc :is(.woocommerce, .woocommerce-page, .qndm-search) :is(input, select, textarea):focus {
	border-color: var(--qndm-primary);
	box-shadow: none;
	outline: 0;
}

body.qndm-focus-both #et-boc :is(.woocommerce, .woocommerce-page, .qndm-search) :is(input, select, textarea):focus {
	border-color: var(--qndm-primary);
	box-shadow: 0 0 0 var(--qndm-ring-w) var(--qndm-ring);
	outline: 0;
}

body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page) :is(input, select, textarea):disabled {
	background-color: var(--qndm-disabled-field);
	color: var(--qndm-disabled-text);
	cursor: not-allowed;
}

/* Labels and the required marker */
body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page) form .form-row label {
	color: var(--qndm-label);
	font-size: var(--qndm-label-fs);
	font-weight: var(--qndm-label-fw);
}

body.qndm-req #et-boc :is(.woocommerce, .woocommerce-page) .required {
	border: 0;
	color: var(--qndm-danger);
	text-decoration: none;
}

body.qndm-field-ui:not(.qndm-req) #et-boc :is(.woocommerce, .woocommerce-page) form .required {
	display: none;
}

/* Validation */
body.qndm-field-ui #et-boc :is(.woocommerce, .woocommerce-page) .woocommerce-invalid :is(input.input-text, select, .select2-selection) {
	border-color: var(--qndm-invalid-border);
}

body.qndm-tint-invalid #et-boc :is(.woocommerce, .woocommerce-page) .woocommerce-invalid :is(input.input-text, select, .select2-selection) {
	background-color: var(--qndm-danger-bg);
}

body.qndm-inline-err #et-boc .checkout-inline-error-message {
	margin: var(--qndm-sp-1) 0 0;
	color: var(--qndm-danger);
	font-size: var(--qndm-fs-sm);
}

body.qndm-field-ui:not(.qndm-inline-err) #et-boc .checkout-inline-error-message {
	display: none;
}

/* Password strength meter: the minimum strength still applies when it is hidden. */
body.qndm-no-meter #et-boc :is(.qndm-account, .woocommerce) :is(.woocommerce-password-strength, .woocommerce-password-hint) {
	display: none;
}

/* ==========================================================================
   Tables: the Table pane (body.qndm-table-ui)
   ========================================================================== */

body.qndm-table-ui #et-boc table.shop_table th,
body.qndm-table-ui #et-boc table.shop_table td {
	padding: var(--qndm-cell-pad);
}

body.qndm-table-ui #et-boc table.shop_table th {
	color: var(--qndm-body);
	font-size: var(--qndm-th-fs);
	font-weight: var(--qndm-fw-semibold);
}

body.qndm-th-upper #et-boc table.shop_table thead th {
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.qndm-th-plain #et-boc table.shop_table thead th {
	letter-spacing: 0;
	text-transform: none;
}

/* Head style: Muted background, Line only or None */
body.qndm-th-muted #et-boc table.shop_table thead th {
	border-bottom: 0;
	background: var(--qndm-muted-bg);
}

body.qndm-th-line #et-boc table.shop_table thead th {
	border-bottom: 1px solid var(--qndm-border);
	background: transparent;
}

body.qndm-th-none #et-boc table.shop_table thead th {
	border-bottom: 0;
	background: transparent;
}

/* Row dividers: Lines, Zebra or None */
body.qndm-rows-lines #et-boc table.shop_table tbody td {
	border-top: 1px solid var(--qndm-border);
}

body.qndm-rows-zebra #et-boc table.shop_table tbody td,
body.qndm-rows-none #et-boc table.shop_table tbody td {
	border-top: 0;
}

body.qndm-rows-zebra #et-boc table.shop_table tbody tr:nth-child(even) td {
	background: var(--qndm-wash);
}

/* Narrow layout: Scroll sideways keeps WooCommerce's rows as rows on a phone. */
@media (max-width: 767px) {
	body.qndm-narrow-scroll #et-boc table.shop_table_responsive {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	body.qndm-narrow-scroll #et-boc table.shop_table_responsive thead {
		display: table-header-group;
	}

	body.qndm-narrow-scroll #et-boc table.shop_table_responsive tbody th {
		display: table-cell;
	}

	body.qndm-narrow-scroll #et-boc table.shop_table_responsive tr {
		display: table-row;
	}

	body.qndm-narrow-scroll #et-boc table.shop_table_responsive tr td {
		display: table-cell;
		text-align: left;
	}

	body.qndm-narrow-scroll #et-boc table.shop_table_responsive tr td::before {
		content: none;
	}
}