/*
 * Shop (Shop, step 3). Blocksy draws the cards, badges and product page (Customizer → WooCommerce:
 * boxed cards on white with the border token, like the program cards). This adds the pieces Blocksy
 * doesn't have: the currency switch, the maker line, availability wording and "what it supports".
 * Tokens only (R6). Loaded on shop screens only (R8).
 */

/* Currency switch: two links, the current one filled. */
.rmhn-currency-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	font: 400 15px/1.4 var(--rmhn-font-body);
	color: var(--rmhn-muted);
}

.woocommerce-products-header + .rmhn-currency-switch,
.woo-listing-top + .rmhn-currency-switch {
	margin-top: 8px;
}

.rmhn-currency-switch__label {
	margin-right: 4px;
}

.rmhn-currency-switch__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-button);
	background: var(--rmhn-white);
	color: var(--rmhn-ink);
	font-weight: 600;
	text-decoration: none;
}

.rmhn-currency-switch__option:hover {
	background: var(--rmhn-sand);
	color: var(--rmhn-ink);
}

.rmhn-currency-switch__option[aria-current="true"] {
	border-color: var(--rmhn-ink);
	background: var(--rmhn-ink);
	color: var(--rmhn-white);
}

.rmhn-currency-switch__option:focus-visible {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

.product .rmhn-currency-switch {
	margin: 12px 0 20px;
}

/* Who made it: quiet, under the title. */
.rmhn-made-by {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--rmhn-muted);
}

/* Availability: nothing when there's plenty; a short line otherwise. */
.ct-woo-card-stock:empty {
	display: none;
}

.stock.rmhn-low-stock {
	color: var(--rmhn-red);
	font-weight: 600;
}

.stock.rmhn-made-to-order,
.stock.out-of-stock {
	color: var(--rmhn-muted);
}

.out-of-stock-badge {
	background: var(--rmhn-ink);
	color: var(--rmhn-white);
}

.rmhn-price-unavailable {
	font-size: 14px;
	font-weight: 400;
	color: var(--rmhn-muted);
}

.rmhn-price-unavailable a {
	color: var(--rmhn-ink);
	text-decoration: underline;
}

/* Product page: who made it and what it supports. */
.rmhn-shop-about {
	display: grid;
	gap: 12px;
	margin: 20px 0;
}

.rmhn-shop-about .rmhn-made-by {
	margin: 0;
	font-size: 16px;
}

.rmhn-shop-supports {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--rmhn-radius-callout);
	background: var(--rmhn-blush);
	color: var(--rmhn-ink);
	line-height: 1.5;
}

.rmhn-shop-supports svg {
	flex: none;
	margin-top: 2px;
	color: var(--rmhn-success);
}

/* Small screens: two narrow cards per row, so keep card text compact. */
@media (max-width: 689px) {
	.products .woocommerce-loop-product__title {
		font-size: 15px;
		line-height: 1.35;
	}

	.products .rmhn-made-by,
	.products .stock {
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------- shop checkout (step 4) */
/* Method cards and checkboxes come from donate.css (the Donate page's components). */
.rmhn-shop-payment__woo {
	display: none !important;
}

.rmhn-shop-payment__title {
	margin: 0 0 16px;
	font: 600 20px/1.3 var(--rmhn-font-heading);
}

.rmhn-shop-payment .place-order {
	margin-top: 24px;
}

.rmhn-shop-payment__submit {
	width: 100%;
	margin-top: 16px;
}

.rmhn-shop-optins {
	margin: 24px 0;
}

.rmhn-shop-terms,
.rmhn-pickup-where {
	color: var(--rmhn-muted);
	font-size: 15px;
}

.rmhn-pickup-where {
	display: block;
	margin: 4px 0 0 28px;
}

.rmhn-shop-terms a {
	color: var(--rmhn-ink);
}

/* Picking up: no address needed. !important because WooCommerce's address script shows each row
   with an inline display:block whenever the country changes. */
form.checkout.rmhn-is-pickup .form-row.rmhn-address-field {
	display: none !important;
}

/* ---------------------------------------------------------------- header mini-cart (step 6) */
/* Blocksy's dropdown, in the site's button style: normal case and 44px targets (R7). */
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button {
	min-height: 44px;
	border-radius: var(--rmhn-radius-button);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total {
	text-transform: none;
	letter-spacing: 0;
}