/*
 * Otto: Fire plugin surfaces.
 *
 * Loads after style.css and after every Fire stylesheet, because functions.php
 * claims each registered Fire handle as a dependency of this file. That makes
 * this the last word in the cascade, which is the only reason most of the rules
 * below can be written without !important.
 *
 * Two things it has to do.
 *
 * Retint. Fire Shop reads its design tokens off :root, so pointing those at
 * Otto's palette rethemes the storefront, cart, checkout and account pages
 * without touching a line of plugin markup. That remap lives in style.css
 * next to the tokens it references, so the two cannot drift.
 *
 * Fight. A handful of plugin rules cannot be reached by retinting, either
 * because they are written at a specificity a single class cannot beat, or
 * because the plugin writes the value inline. Those are below, each with the
 * plugin behaviour it exists to counter.
 */

/* ==========================================================================
   Width. Two escape routes, two fixes.
   ========================================================================== */

/*
 * Route one: /shop/ and /product/* never reach page.php. Fire Shop's template
 * loader renders them through its own templates, so they sit outside the
 * theme's container and .fire-container is the only thing holding them in.
 *
 * The two-class selectors are deliberate and not redundant. The plugin sets
 * 1600px on the archive and 1120px on a product at .fire-shop-archive.fire-container
 * specificity (0,2,0), which a bare .fire-container (0,1,0) cannot outrank at
 * any load order. Specificity is not a tiebreak that source order can win.
 */
.fire-container {
	max-width: var( --otto-container );
	padding-inline: var( --otto-space-lg );
}

.fire-shop-archive.fire-container,
.fire-single-product.fire-container,
.fire-wishlist.fire-container {
	max-width: var( --otto-container );
	margin-inline: auto;
	padding-inline: var( --otto-space-lg );
}

/*
 * Route two: cart, checkout, thankyou and my-account are real pages, and the
 * activator bakes {"align":"full"} into the block comment it seeds them with.
 * The wrapper therefore carries .alignfull and tears out of the container on a
 * negative margin, which runs the cart table the full width of the window.
 *
 * None of these is a full-bleed design, so the breakout is cancelled and
 * page.php's container governs. The shop page's product grid is deliberately
 * not in this list: that one is allowed to be wide.
 */
.fire-block-cart.alignfull,
.fire-block-checkout.alignfull,
.fire-block-thankyou.alignfull,
.fire-my-account-block.alignfull {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

/* ==========================================================================
   Type
   ========================================================================== */

.fire-heading-display,
.fire-heading-1,
.fire-heading-2,
.fire-heading-3,
.fire-checkout-heading,
.fire-single-product__title {
	font-family: var( --otto-font-display );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
	line-height: var( --otto-leading-tight );
}

.fire-price,
.fire-data,
.fire-mono,
.fire-cart-totals,
.fire-order-review {
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.fire-single-product__price,
.fire-price {
	color: var( --otto-ink );
}

.fire-price-original {
	color: var( --otto-ink-faint );
}

/* ==========================================================================
   Controls
   ========================================================================== */

.fire-btn,
.fire-btn-primary,
.fire-btn-secondary,
.fire-btn-tertiary,
.fire-btn-ghost {
	font-family: var( --otto-font-body );
	font-weight: 600;
	border-radius: var( --otto-radius-full );
	transition: background var( --otto-duration-short ) var( --otto-ease-move ),
		border-color var( --otto-duration-short ) var( --otto-ease-move );
}

.fire-btn-primary {
	background-color: var( --otto-ink );
	color: var( --otto-paper );
	border: 1px solid var( --otto-ink );
}

.fire-btn-secondary {
	background-color: transparent;
	color: var( --otto-ink );
	border: 1px solid var( --otto-rule-strong );
}

/*
 * Every button hover in this file is gated on a pointer that can leave it.
 *
 * A finger cannot. On a touch device a tap sets :hover and nothing clears it,
 * so a shopper who pressed Add to cart and then scrolled was left looking at a
 * button still wearing its pressed colour. This file is the last word in the
 * cascade, so an ungated rule here would keep that state alive whatever the
 * plugin had already done about it.
 *
 * Card and link hovers are left alone: those decorate something the visitor is
 * on their way into, and a stuck one reads as "this is the one I tapped".
 */
@media ( hover: hover ) {
	.fire-btn-primary:hover {
		background-color: var( --otto-amber-deep );
		border-color: var( --otto-amber-deep );
	}

	.fire-btn-secondary:hover,
	.fire-btn-tertiary:hover,
	.fire-btn-ghost:hover {
		border-color: var( --otto-ink );
		background-color: var( --otto-amber-wash );
	}
}

.fire-input,
.fire-select,
.fire-textarea,
.fire-form-input,
.fire-form-select,
.fire-form-textarea {
	font-family: var( --otto-font-body );
	background-color: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule-strong );
	border-radius: var( --otto-radius-sm );
	color: var( --otto-ink );
}

.fire-input:focus,
.fire-select:focus,
.fire-textarea:focus,
.fire-form-input:focus,
.fire-form-select:focus,
.fire-form-textarea:focus {
	outline: 2px solid var( --otto-amber-deep );
	outline-offset: 1px;
	border-color: var( --otto-amber-deep );
}

.fire-form-label {
	font-size: var( --otto-size-small );
	font-weight: 600;
	color: var( --otto-ink-soft );
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.fire-card,
.fire-product-card {
	background-color: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	box-shadow: none;
}

.fire-product-card__name {
	font-family: var( --otto-font-display );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
}

.fire-order-review,
.fire-cart-totals {
	background-color: var( --otto-paper-sunk );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
}

.fire-payment-method {
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-sm );
	background-color: var( --otto-paper-raised );
}

.fire-payment-method--selected {
	border-color: var( --otto-ink );
	background-color: var( --otto-amber-wash );
}

.fire-badge {
	border-radius: var( --otto-radius-full );
	font-size: var( --otto-size-micro );
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
}

.fire-breadcrumbs {
	font-size: var( --otto-size-small );
	color: var( --otto-ink-faint );
}

.fire-breadcrumbs__link {
	color: var( --otto-ink-soft );
}

/* ==========================================================================
   Mini cart
   ========================================================================== */

/*
 * templates/partials/mini-cart.php is the one template the loader does not
 * route through locate_template(): class-fire-mini-cart.php includes it from
 * the plugin directory directly. There is no way to override that markup from
 * a theme, so the drawer is CSS only.
 */
.fire-mini-cart-drawer,
.fire-mini-cart-contents {
	background-color: var( --otto-paper );
	border-left: 1px solid var( --otto-rule );
	border-radius: 0;
	font-family: var( --otto-font-body );
}

.fire-mini-cart-drawer__title {
	font-family: var( --otto-font-display );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
}

.fire-mini-cart-fab__btn {
	background-color: var( --otto-ink );
	color: var( --otto-paper );
}

/*
 * The count badge carries .fire-cart-count because that is the class
 * fire-cart.js updates, and taking the class off would mean reimplementing the
 * plugin's fragment handling. Taking the class means taking its CSS with it.
 *
 * The plugin positions the badge as a corner pip: position:absolute at
 * top:-6px right:-6px. Otto sets the count inline beside the label instead, so
 * absolute positioning pulls it out of flow and drops it on top of whatever
 * sits to the right, which in this header is the Get a quote button. Put it
 * back in the flow and let .cart-link's own layout place it.
 *
 * The empty state needs no rule: fire-storefront.css already hides a badge
 * without .fire-cart-count--has-items, which is why otto_cart_link() prints
 * that class server side rather than waiting for fire-cart.js, whose fragment
 * update only runs after a cart action and never on a fresh page load.
 */
.cart-link {
	position: relative;
}

.cart-link .fire-cart-count {
	position: static;
	inset: auto;
}

/* ==========================================================================
   Wishlist
   ========================================================================== */

/*
 * The wishlist FAB renders on every page when wishlists are enabled and links
 * to /shop-wishlist/, a page create_default_pages() never creates. Until that
 * page exists by hand or wishlists are switched off, the button is a link to a
 * 404 sitting on every page of the site.
 *
 * Hiding it here is the theme's only reach: the FAB prints on wp_footer from
 * the plugin and takes no filter. Delete this block once the page exists.
 */
.fire-wishlist-fab {
	display: none;
}