/*
 * IRA Studio — Store Fixes
 * Scoped deliberately tightly: every rule targets WooCommerce default markup
 * that the theme does not already style, so nothing the theme designed is
 * overridden.
 */

:root {
	--ira-fx-ink: var(--ira-ink, #171714);
	--ira-fx-paper: #f7f4ee;
	--ira-fx-line: rgba(23, 23, 20, .16);
	--ira-fx-muted: rgba(23, 23, 20, .62);
}

/* -------------------------------------------------------------------------
 * 1. WooCommerce's default purple buttons → the site's pill buttons
 * ---------------------------------------------------------------------- */

.ira-fixes-active {
	/* WooCommerce block components read these. */
	--wc-primary: var(--ira-fx-ink);
	--wc-primary-text: #ffffff;
	--wp--preset--color--primary: var(--ira-fx-ink);
}

.ira-fixes-active .woocommerce a.button,
.ira-fixes-active .woocommerce button.button,
.ira-fixes-active .woocommerce input.button,
.ira-fixes-active .woocommerce #respond input#submit,
.ira-fixes-active .woocommerce a.button.alt,
.ira-fixes-active .woocommerce button.button.alt,
.ira-fixes-active .woocommerce input.button.alt,
.ira-fixes-active .woocommerce #respond input#submit.alt,
.ira-fixes-active .wc-block-components-button,
.ira-fixes-active #place_order {
	background-color: var(--ira-fx-ink);
	color: #fff;
	border: 1px solid var(--ira-fx-ink);
	border-radius: 999px;
	padding: .7rem 1.4rem;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.ira-fixes-active .woocommerce a.button:hover,
.ira-fixes-active .woocommerce button.button:hover,
.ira-fixes-active .woocommerce input.button:hover,
.ira-fixes-active .woocommerce #respond input#submit:hover,
.ira-fixes-active .woocommerce a.button.alt:hover,
.ira-fixes-active .woocommerce button.button.alt:hover,
.ira-fixes-active .woocommerce input.button.alt:hover,
.ira-fixes-active .wc-block-components-button:hover,
.ira-fixes-active #place_order:hover {
	background-color: transparent;
	color: var(--ira-fx-ink);
}

.ira-fixes-active .woocommerce a.button:focus-visible,
.ira-fixes-active .woocommerce button.button:focus-visible,
.ira-fixes-active #place_order:focus-visible {
	outline: 2px solid var(--ira-fx-ink);
	outline-offset: 3px;
}

/* Secondary / quieter actions keep an outline treatment. */
.ira-fixes-active .woocommerce button[name="update_cart"],
.ira-fixes-active .woocommerce .actions .button:disabled {
	background-color: transparent;
	color: var(--ira-fx-ink);
	opacity: 1;
}

.ira-fixes-active .woocommerce .actions .button:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * 2. Belt-and-braces for the duplicate "Proceed to checkout"
 *    (PHP already unhooks it; this covers themes/plugins that re-add it.)
 * ---------------------------------------------------------------------- */

.woocommerce-cart:has(.ira-cart-checkout) .wc-proceed-to-checkout {
	display: none;
}

/* -------------------------------------------------------------------------
 * 3. Empty cart: give the two links room and make them read as actions
 * ---------------------------------------------------------------------- */

.ira-fixes-active .cart-empty,
.ira-fixes-active .wc-empty-cart-message {
	margin-bottom: 1.25rem;
	font-size: 1.05rem;
}

.ira-fixes-active .woocommerce .return-to-shop {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1rem;
}

/* -------------------------------------------------------------------------
 * 4. Price note under the single-product price
 * ---------------------------------------------------------------------- */

.ira-fixes-price-note {
	margin: -.35rem 0 1.25rem;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--ira-fx-muted);
}

.ira-fixes-price-note .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 5. Duplicate "Shop" pill in the header (the nav already links to Shop)
 * ---------------------------------------------------------------------- */

.ira-fixes-hide-shop-pill header .ira-store-link:not(.ira-store-link--icon),
.ira-fixes-hide-shop-pill .site-header .ira-store-link:not(.ira-store-link--icon) {
	display: none;
}

/* -------------------------------------------------------------------------
 * 6. The keychain customiser
 * ---------------------------------------------------------------------- */

.ira-customiser {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.35rem 1.1rem;
	border: 1px solid var(--ira-fx-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, .55);
}

.ira-customiser__title {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.ira-customiser__intro {
	margin: 0 0 1.1rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--ira-fx-muted);
}

.ira-customiser__field {
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.ira-customiser__field > label {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ira-customiser__hint {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ira-fx-muted);
}

.ira-customiser select,
.ira-customiser textarea,
.ira-customiser input[type="file"] {
	width: 100%;
	max-width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--ira-fx-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ira-fx-ink);
	font: inherit;
	font-size: .92rem;
}

.ira-customiser textarea {
	resize: vertical;
	min-height: 3.2em;
}

.ira-customiser select:focus-visible,
.ira-customiser textarea:focus-visible,
.ira-customiser input[type="file"]:focus-visible {
	outline: 2px solid var(--ira-fx-ink);
	outline-offset: 2px;
}

.ira-customiser__counter {
	font-size: .78rem;
	color: var(--ira-fx-muted);
}

.ira-customiser__counter.is-limit {
	color: #a1341c;
	font-weight: 600;
}

.ira-customiser__preview:empty {
	display: none;
}

.ira-customiser__preview {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-top: .5rem;
	font-size: .82rem;
	color: var(--ira-fx-muted);
}

.ira-customiser__preview img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--ira-fx-line);
}

.ira-customiser__error {
	margin: .4rem 0 0;
	font-size: .82rem;
	font-weight: 600;
	color: #a1341c;
}

.ira-customiser[data-hide-photo] [data-ira-photo-field] {
	display: none;
}

@media (prefers-color-scheme: dark) {
	.ira-customiser {
		background: rgba(255, 255, 255, .04);
	}
}