/**
 * AF Commerce — base layer.
 *
 * Reset, typography, layout primitives, buttons, forms and the utilities every
 * other stylesheet builds on. No colour, size or radius is written literally:
 * everything reads a --af-* custom property produced by Setup\Design_System, so
 * a preset or a single option change restyles the store with no build step.
 *
 * Load order matters. This file is the only dependency-free stylesheet; every
 * other AF stylesheet is registered with it as a dependency.
 */

/* -------------------------------------------------------------------------
 * 1. Reset
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchored headings and skip links must clear the sticky header. */
	scroll-padding-top: var(--af-scroll-offset, 96px);
}

body {
	margin: 0;
	background: var(--af-background);
	color: var(--af-text);
	font-family: var(--af-font-body);
	font-size: var(--af-fs-base);
	line-height: var(--af-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--af-space-md);
	color: var(--af-heading);
	font-family: var(--af-font-heading);
	font-weight: var(--af-fw-heading);
	line-height: var(--af-lh-heading);
	letter-spacing: var(--af-ls-heading);
	text-wrap: balance;
}

h1 { font-size: var(--af-fs-h1); }
h2 { font-size: var(--af-fs-h2); }
h3 { font-size: var(--af-fs-h3); }
h4 { font-size: var(--af-fs-h4); }
h5 { font-size: var(--af-fs-h5); }
h6 { font-size: var(--af-fs-h6); }

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0 0 var(--af-space-md);
}

:where(p, li):last-child {
	margin-bottom: 0;
}

a {
	color: var(--af-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--af-accent);
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

hr {
	border: 0;
	border-top: 1px solid var(--af-border);
	margin: var(--af-space-xl) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--af-space-sm) var(--af-space-md);
	border-bottom: 1px solid var(--af-border);
	text-align: start;
}

/* -------------------------------------------------------------------------
 * 2. Layout primitives
 * ---------------------------------------------------------------------- */

.af-container {
	width: 100%;
	max-width: var(--af-container);
	margin-inline: auto;
	padding-inline: var(--af-container-gutter);
}

.af-page,
.af-site {
	display: flow-root;
}

.af-layout {
	display: block;
}

.af-layout__main {
	min-height: 40vh;
	padding-block: var(--af-space-xl);
}

.af-layout--full .af-layout__main {
	padding-block: 0;
}

/*
 * The sidebar layout only splits once there is room for a readable main
 * column beside it; below that the aside falls under the content.
 */
@media (min-width: 992px) {
	.af-layout--sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--af-sidebar-width);
		gap: var(--af-space-xl);
		align-items: start;
	}

	.af-layout__aside {
		position: sticky;
		inset-block-start: var(--af-sticky-offset, 96px);
	}
}

.af-layout__aside {
	display: grid;
	gap: var(--af-space-lg);
	min-width: 0;
	padding-block: var(--af-space-xl);
}

/* Widget shell, shared by every registered sidebar. */
.af-widget {
	min-width: 0;
}

.af-widget + .af-widget {
	margin-top: var(--af-space-lg);
}

.af-widget__title {
	margin: 0 0 var(--af-space-sm);
	font-size: var(--af-fs-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-widget li + li {
	margin-top: 6px;
}

.af-widget a {
	color: inherit;
	text-decoration: none;
}

.af-widget a:hover {
	color: var(--af-accent);
}

.af-section {
	margin-block: var(--af-section-gap);
}

.af-section--flush {
	margin-block: 0;
}

.af-section:first-child {
	margin-block-start: var(--af-space-lg);
}

/*
 * The card grid. Columns are driven by custom properties set inline by the
 * template, which keeps every listing on one grid implementation instead of a
 * class per column count.
 */
.af-grid,
.af-products__grid,
.af-listing {
	display: grid;
	gap: var(--af-grid-gap);
	grid-template-columns: repeat(var(--af-cols-mobile, 2), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.af-grid,
	.af-products__grid,
	.af-listing {
		grid-template-columns: repeat(var(--af-cols-tablet, 3), minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.af-grid,
	.af-products__grid,
	.af-listing {
		grid-template-columns: repeat(var(--af-cols, 4), minmax(0, 1fr));
	}
}

.af-listing__item {
	min-width: 0;
}

/*
 * The list view collapses the archive to one column at every width; the card
 * itself switches to a horizontal layout in product-card.css.
 */
.af-listing--list {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 782px) {
	.af-listing--list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1100px) {
	.af-listing--list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 3. Typography helpers
 * ---------------------------------------------------------------------- */

.af-eyebrow {
	display: block;
	margin-bottom: var(--af-space-sm);
	color: var(--af-accent);
	font-size: var(--af-fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.af-muted {
	color: var(--af-muted);
}

.af-sale {
	color: var(--af-sale);
}

.af-heading {
	font-family: var(--af-font-heading);
}

.af-entry-content > * + * {
	margin-block-start: var(--af-space-md);
}

.af-entry-content :where(h2, h3, h4) {
	margin-block-start: var(--af-space-xl);
}

.af-entry-content img {
	border-radius: var(--af-radius-image);
}

.af-entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--af-space-lg);
	border-inline-start: 3px solid var(--af-accent);
	color: var(--af-secondary);
	font-size: 1.05em;
}

/* -------------------------------------------------------------------------
 * 4. Section headers
 * ---------------------------------------------------------------------- */

.af-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--af-space-md);
	margin-bottom: var(--af-space-lg);
}

.af-section-header--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.af-section-header--start {
	justify-content: flex-start;
}

.af-section-header__text {
	max-width: 62ch;
	min-width: 0;
}

.af-section-header__title {
	margin: 0;
	font-size: var(--af-fs-h3);
}

.af-section-header__subtitle {
	margin: var(--af-space-xs) 0 0;
	color: var(--af-muted);
	font-size: var(--af-fs-small);
}

.af-section-header__link {
	flex: none;
	color: var(--af-secondary);
	font-size: var(--af-fs-small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.af-section-header__link:hover {
	color: var(--af-accent);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 5. Buttons
 * ---------------------------------------------------------------------- */

.af-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--af-space-sm);
	min-height: var(--af-tap-target);
	padding: var(--af-button-py) var(--af-button-px);
	border: 1px solid transparent;
	border-radius: var(--af-radius-button);
	background: var(--af-button-bg);
	color: var(--af-button-color);
	font-family: var(--af-font-button);
	font-size: var(--af-fs-small);
	font-weight: var(--af-button-weight);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: var(--af-button-case);
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.af-btn:hover,
.af-btn:focus-visible {
	background: var(--af-button-bg-hover);
	color: var(--af-button-color-hover);
}

.af-btn[disabled],
.af-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Wrapping the text lets an icon sit beside it without shifting the label. */
.af-btn__label {
	display: inline-block;
}

.af-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--af-primary);
}

.af-btn--outline:hover,
.af-btn--outline:focus-visible {
	background: var(--af-primary);
	border-color: var(--af-primary);
	color: var(--af-background);
}

.af-btn--ghost {
	background: transparent;
	color: var(--af-primary);
}

.af-btn--ghost:hover,
.af-btn--ghost:focus-visible {
	background: var(--af-surface);
	color: var(--af-primary);
}

.af-btn--soft {
	background: var(--af-accent-soft);
	color: var(--af-primary);
}

.af-btn--soft:hover,
.af-btn--soft:focus-visible {
	background: var(--af-accent);
	color: #fff;
}

.af-btn--sm {
	min-height: 36px;
	padding: 8px 14px;
	font-size: var(--af-fs-caption);
}

/* The default size, named so callers can be explicit about it. */
.af-btn--md {
	min-height: var(--af-tap-target);
	padding: var(--af-button-py) var(--af-button-px);
	font-size: var(--af-fs-small);
}

.af-btn--lg {
	padding: calc(var(--af-button-py) + 3px) calc(var(--af-button-px) + 8px);
	font-size: var(--af-fs-base);
}

.af-btn--block {
	display: flex;
	width: 100%;
}

/* Button style variants set by the body class, so a preset can switch them. */
.af-btn-pill .af-btn {
	border-radius: 999px;
}

.af-btn-square .af-btn {
	border-radius: 0;
}

.af-btn-outline .af-btn--primary {
	background: transparent;
	border-color: var(--af-button-bg);
	color: var(--af-button-bg);
}

.af-btn-outline .af-btn--primary:hover {
	background: var(--af-button-bg);
	color: var(--af-button-color);
}

/* -------------------------------------------------------------------------
 * 6. Forms
 * ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	min-height: var(--af-tap-target);
	padding: 10px 14px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-sm);
	background: var(--af-background);
	color: var(--af-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
	min-height: 8rem;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--af-focus);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-focus) 22%, transparent);
}

label {
	display: inline-block;
	margin-bottom: var(--af-space-xs);
	font-size: var(--af-fs-small);
	font-weight: 600;
}

::placeholder {
	color: var(--af-muted);
	opacity: 1;
}

fieldset {
	margin: 0 0 var(--af-space-md);
	padding: 0;
	border: 0;
}

/* -------------------------------------------------------------------------
 * 7. Accessibility
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: var(--af-space-sm);
	inset-inline-start: var(--af-space-sm);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: var(--af-primary);
	color: #fff;
	border-radius: var(--af-radius-sm);
	text-decoration: none;
}

.af-focus-visible :focus-visible {
	outline: var(--af-focus-width) solid var(--af-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * The live region is visually hidden but must stay in the accessibility tree,
 * so it is never display:none — that would stop announcements entirely.
 */
.af-live-region,
.af-a11y-region {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.af-loading-bar {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 999;
	width: 0;
	height: 2px;
	background: var(--af-accent);
	opacity: 0;
	transition: width 0.25s ease, opacity 0.25s ease;
}

.af-loading-bar.is-active {
	width: 70%;
	opacity: 1;
}

.af-loading-bar.is-done {
	width: 100%;
	opacity: 0;
}

.af-to-top {
	position: fixed;
	inset-block-end: var(--af-space-lg);
	inset-inline-end: var(--af-space-lg);
	z-index: 40;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--af-border);
	border-radius: 50%;
	background: var(--af-card);
	box-shadow: var(--af-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.af-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* -------------------------------------------------------------------------
 * 8. Shared small components
 * ---------------------------------------------------------------------- */

.af-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.af-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: var(--af-radius-sm);
	background: var(--af-primary);
	color: #fff;
	font-size: var(--af-fs-caption);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.af-badge--sale {
	background: var(--af-sale);
}

.af-badge--new {
	background: var(--af-new);
}

.af-badge--bestseller {
	background: var(--af-accent);
}

.af-badge--stock {
	background: var(--af-warning);
}

.af-badge--out {
	background: var(--af-muted);
}

.af-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	background: var(--af-background);
	color: var(--af-text);
	font-size: var(--af-fs-caption);
	text-decoration: none;
	white-space: nowrap;
}

.af-chip:hover,
.af-chip:focus-visible {
	border-color: var(--af-primary);
	color: var(--af-primary);
}

.af-chip[aria-current="true"],
.af-chip.is-active {
	background: var(--af-primary);
	border-color: var(--af-primary);
	color: #fff;
}

.af-chip__count {
	color: var(--af-muted);
}

.af-chip--removable::after {
	content: "×";
	font-size: 1.1em;
	line-height: 1;
}

.af-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--af-fs-caption);
}

.af-rating__stars {
	position: relative;
	display: inline-block;
	color: var(--af-star);
	white-space: nowrap;
}

.af-rating__count {
	color: var(--af-muted);
}

/* Card and listing context: stars only, no count text. */
.af-rating--compact .af-rating__count {
	display: none;
}

/* Stock wording rendered next to WooCommerce's own availability string. */
.af-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--af-fs-small);
}

.af-stock.in-stock {
	color: var(--af-success);
}

.af-stock.out-of-stock {
	color: var(--af-error);
}

.af-stock.available-on-backorder {
	color: var(--af-warning);
}

.af-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--af-surface);
	overflow: hidden;
}

.af-progress__bar {
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--af-accent);
	transition: width 0.4s ease;
}

.af-empty-state {
	max-width: 52ch;
	margin-inline: auto;
	padding: var(--af-space-xxl) var(--af-space-md);
	text-align: center;
}

.af-empty-state__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--af-space-md);
	border-radius: 50%;
	background: var(--af-surface);
	color: var(--af-muted);
}

.af-empty-state__title {
	margin-bottom: var(--af-space-sm);
}

.af-empty-state__text {
	color: var(--af-muted);
}

.af-empty-state__search {
	max-width: 420px;
	margin: var(--af-space-lg) auto 0;
}

.af-empty-state__actions,
.af-empty-state__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--af-space-sm);
	margin-top: var(--af-space-lg);
}

.af-links__list,
.af-footer__list,
.af-nav__list,
.af-breadcrumbs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-links__item {
	min-width: 0;
}

/* A plain "nothing here" line, used where a full empty state would be noise. */
.af-empty {
	margin: 0;
	padding: var(--af-space-lg) 0;
	color: var(--af-muted);
	font-size: var(--af-fs-small);
}

/* -------------------------------------------------------------------------
 * 9. Breadcrumbs
 * ---------------------------------------------------------------------- */

.af-breadcrumbs,
.af-breadcrumb {
	padding-block: var(--af-space-md);
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
}

/*
 * Two element names because two sources render breadcrumbs: the theme's own
 * trail and WooCommerce or an SEO plugin filtered into the same shell.
 */
.af-breadcrumbs__list,
.af-breadcrumb__list,
.af-breadcrumb__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-breadcrumbs__item,
.af-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.af-breadcrumb__list a,
.af-breadcrumb__inner a {
	color: inherit;
	text-decoration: none;
}

.af-breadcrumb__list a:hover,
.af-breadcrumb__inner a:hover {
	color: var(--af-primary);
	text-decoration: underline;
}

.af-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.af-breadcrumbs__link:hover {
	color: var(--af-primary);
	text-decoration: underline;
}

.af-breadcrumbs__sep {
	color: var(--af-border);
}

.af-breadcrumbs__current {
	color: var(--af-text);
}

/* -------------------------------------------------------------------------
 * 10. Pagination
 * ---------------------------------------------------------------------- */

.af-pagination {
	margin-block: var(--af-space-xl);
}

.af-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--af-space-xs);
}

.af-pagination__item .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding-inline: 10px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-sm);
	color: var(--af-text);
	text-decoration: none;
}

.af-pagination__item .page-numbers:hover {
	border-color: var(--af-primary);
}

.af-pagination__item .page-numbers.current {
	background: var(--af-primary);
	border-color: var(--af-primary);
	color: #fff;
}

.af-pagination__more {
	display: flex;
	justify-content: center;
	margin-top: var(--af-space-lg);
}

/* Infinite scroll still ships the numbered list for crawlers; hide it visually. */
.af-pagination--infinite .af-pagination__list--fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* -------------------------------------------------------------------------
 * 11. Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}