/*
 * SECTION:  WooCommerce shared bits (breadcrumb, chips, badges, notices)
 * File:     assets/css/pages/sol-woo-common.css
 * Used by:  product page and shop page
 * To remove: delete this file and its line in inc/assets.php (handle "sol-woo-common").
 */

/* ==========================================================================
   Shared bits
   ========================================================================== */
.woocommerce-breadcrumb {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	color: var(--sol-muted);
	overflow-wrap: anywhere;
}

.woocommerce-breadcrumb a {
	color: inherit;
}

.sol-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-pill);
	background: var(--sol-surface);
	color: var(--sol-text);
	font-size: var(--sol-text-sm);
	text-decoration: none;
	white-space: nowrap;
}

.sol-chip:hover {
	border-color: var(--sol-gold-text);
	color: var(--sol-text);
}

.sol-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sol-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
	font-size: 0.75rem;
	font-weight: 600;
}

.sol-badge--sale {
	background: var(--sol-danger);
	color: var(--sol-bg);
}

/* Stars: WooCommerce prints a span whose width is the rating. The icon font
   is not loaded, so the glyphs are drawn here. The text label is pushed out
   of the box and clipped. */
.star-rating {
	position: relative;
	display: inline-block;
	height: 1em;
	overflow: hidden;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.1em;
	white-space: nowrap;
	vertical-align: middle;
}

.star-rating::before,
.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
}

.star-rating::before {
	color: var(--sol-line);
}

.star-rating span {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	padding-top: 1.5em;
	color: var(--sol-gold-text);
}

.star-rating span::before {
	position: absolute;
	top: 0;
	left: 0;
}

/* WooCommerce notices ("Cart updated", errors, info).
   The doubled class beats the colors WooCommerce and Elementor give them. */
.woocommerce-message.woocommerce-message,
.woocommerce-info.woocommerce-info,
.woocommerce-error.woocommerce-error {
	--sol-notice: var(--sol-gold-text);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 20px;
	padding: 14px 18px;
	list-style: none;
	border: 1px solid color-mix(in srgb, var(--sol-notice) 45%, var(--sol-line));
	border-radius: var(--sol-radius-md);
	background: color-mix(in srgb, var(--sol-notice) 12%, var(--sol-surface));
	color: var(--sol-text);
	font-size: var(--sol-text-sm);
}

.woocommerce-message.woocommerce-message {
	--sol-notice: var(--sol-success);
}

.woocommerce-error.woocommerce-error {
	--sol-notice: var(--sol-danger);
	display: grid;
	grid-template-columns: 22px 1fr;
}

/* Icon: check, info or warning, drawn in the notice color. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--sol-notice);
	-webkit-mask: var(--sol-notice-icon) center / contain no-repeat;
	mask: var(--sol-notice-icon) center / contain no-repeat;
}

.woocommerce-message {
	--sol-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E");
}

.woocommerce-info {
	--sol-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}

.woocommerce-error {
	--sol-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E");
}

.woocommerce-error li {
	grid-column: 2;
	margin: 0;
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.woocommerce-message .button {
	order: 2;
	margin-inline-start: auto;
	padding: 8px 16px;
	border: 1.5px solid var(--sol-line);
	border-radius: 8px;
	background: var(--sol-surface);
	color: var(--sol-text);
	font-size: var(--sol-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-message .button:hover {
	border-color: var(--sol-gold-text);
}


@media (prefers-reduced-motion: reduce) {
	.sol-filters,
	.sol-stickybar {
		transition: none;
	}
}

/* ==========================================================================
   Select boxes (country and state pickers use select2, which is light only)
   The dropdown is printed at the end of the page, so these are not scoped.
   ========================================================================== */
.select2-container--default .select2-selection--single {
	height: 46px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-inline: 14px 34px;
	color: var(--sol-text);
	line-height: 43px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--sol-text) transparent transparent;
}

.select2-dropdown {
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	color: var(--sol-text);
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1.5px solid var(--sol-line);
	border-radius: 8px;
	background: var(--sol-bg);
	color: var(--sol-text);
}

.select2-container--default .select2-results__option {
	color: var(--sol-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
}