/**
 * Artiviq PLP — "Daha fazla göster" control.
 *
 * Why this is its own file and not another section of artiviq-tokens.css: tokens.css is
 * 75 KB and loads on every page of the site; this loads on product archives that have a
 * second page, which on the 2026-09-21 catalogue is two categories out of seven. The
 * card grid this sits under IS in tokens.css §2 — the two are read together.
 *
 * The vocabulary is deliberately the loop card's own: 1px --av-gray-light border, the
 * --av-radius corner, transparent → ink on hover. The button under the grid must look
 * like it belongs to the grid, not like a plugin dropped a widget there.
 */

/*
 * The server keeps rendering WooCommerce's numbered pagination and keeps its real
 * `<a href="…/page/N/">` links in the DOM — see inc/plp-load-more.php for why that is
 * not negotiable on this store. Only the pixels go away.
 *
 * ⚠️ The body class is written by PHP, and ONLY on a page that also rendered a control
 * with a working next link. Hiding the nav from CSS alone would strand a no-JS visitor
 * on the last page of a multi-page archive, where no control renders and the numbered
 * links are the only way back.
 */
body.av-plp-loadmore-on .woocommerce-pagination {
	display: none !important;
}

/*
 * ⚠️ `woocommerce_after_shop_loop` output lands INSIDE Shoptimizer's
 * `div.shoptimizer-sorting.sorting-end`, which is a CSS GRID, not a block. Measured at
 * 390px before this rule: the control came out 264px wide inside a 343px column and sat
 * left-aligned, because a grid item takes a track, not the row. `grid-column: 1 / -1`
 * makes it span whatever track count that wrapper happens to declare at this breakpoint,
 * and is inert if the wrapper is ever changed back to a block.
 */
.av-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	grid-column: 1 / -1;
	justify-self: stretch;
	width: 100%;
	margin: 40px 0 8px;
	text-align: center;
}

.av-loadmore .av-loadmore__count {
	margin: 0;
	padding: 0;
	color: var(--av-gray-mid);
	font-family: var(--av-font-body);
	font-size: .82rem;
	line-height: 1.35;
	letter-spacing: .01em;
}

/* The status line is a programmatic focus target when the button is removed; it must
   not draw a focus ring for that, only for a real keyboard visit. */
.av-loadmore .av-loadmore__count:focus {
	outline: none;
}

.av-loadmore .av-loadmore__rail {
	display: block;
	width: 176px;
	max-width: 60%;
	height: 2px;
	border-radius: 2px;
	background: var(--av-gray-light);
	overflow: hidden;
}

.av-loadmore .av-loadmore__fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--av-accent);
	transition: width .35s ease;
}

.av-loadmore .av-loadmore__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 228px;
	min-height: 46px;
	margin-top: 6px;
	padding: 0 28px;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius);
	background: transparent;
	color: var(--av-black);
	font-family: var(--av-font-body);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Two class levels on purpose. tokens.css line 222 declares `a:hover { color:
   var(--av-accent-text) }` site-wide, and a single class would tie on specificity with
   a rule that loads later — memory feedback_scoped_link_rule_beats_button_color. */
.av-loadmore .av-loadmore__btn:hover,
.av-loadmore .av-loadmore__btn:focus-visible {
	background: var(--av-black);
	border-color: var(--av-black);
	color: var(--av-white);
}

.av-loadmore.is-loading .av-loadmore__btn {
	opacity: .5;
	pointer-events: none;
}

.av-loadmore.has-error .av-loadmore__btn {
	border-color: var(--av-accent);
	color: var(--av-accent-text);
}

.av-loadmore.is-complete .av-loadmore__fill {
	background: var(--av-gray-mid);
}

@media (max-width: 600px) {
	.av-loadmore {
		gap: 8px;
		margin-top: 28px;
	}
	.av-loadmore .av-loadmore__btn {
		width: 100%;
		min-width: 0;
		max-width: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-loadmore .av-loadmore__fill,
	.av-loadmore .av-loadmore__btn {
		transition: none;
	}
}