/* ==================================================================
   11 - UTILITIES
   Small single-purpose helper classes.

   These exist so templates can make one-off adjustments without
   inventing a new component class or writing inline styles. If a
   utility starts appearing five times in a row on the same element,
   that is a signal it should become a proper component instead.
   ================================================================== */


/* ------------------------------------------------------------------
   DISPLAY
   ------------------------------------------------------------------ */

.wo-block        { display: block; }
.wo-inline       { display: inline; }
.wo-inline-block { display: inline-block; }
.wo-inline-flex  { display: inline-flex; }
.wo-hidden       { display: none !important; }

/* Present in the DOM and readable by screen readers, but invisible. */
.wo-invisible {
	visibility: hidden;
}


/* ------------------------------------------------------------------
   TEXT
   ------------------------------------------------------------------ */

.wo-text-left    { text-align: left; }
.wo-text-center  { text-align: center; }
.wo-text-right   { text-align: right; }

.wo-uppercase    { text-transform: uppercase; letter-spacing: var(--wo-tracking-wide); }
.wo-capitalize   { text-transform: capitalize; }
.wo-normal-case  { text-transform: none; }

.wo-nowrap       { white-space: nowrap; }
.wo-balance      { text-wrap: balance; }
.wo-pretty       { text-wrap: pretty; }

.wo-weight-normal   { font-weight: var(--wo-weight-normal); }
.wo-weight-medium   { font-weight: var(--wo-weight-medium); }
.wo-weight-semibold { font-weight: var(--wo-weight-semibold); }
.wo-weight-bold     { font-weight: var(--wo-weight-bold); }

/* Truncate to a single line with an ellipsis. */
.wo-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Clamp to N lines. */
.wo-clamp-2,
.wo-clamp-3,
.wo-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wo-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.wo-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.wo-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* Caps the measure for comfortable reading. */
.wo-measure       { max-width: 62ch; }
.wo-measure-short { max-width: 46ch; }


/* ------------------------------------------------------------------
   MARGIN
   Top and bottom only. Horizontal spacing should come from grid or
   flex gap, not from margins.
   ------------------------------------------------------------------ */

.wo-mt-0  { margin-top: 0; }
.wo-mt-2  { margin-top: var(--wo-space-2); }
.wo-mt-3  { margin-top: var(--wo-space-3); }
.wo-mt-4  { margin-top: var(--wo-space-4); }
.wo-mt-6  { margin-top: var(--wo-space-6); }
.wo-mt-8  { margin-top: var(--wo-space-8); }
.wo-mt-12 { margin-top: var(--wo-space-12); }
.wo-mt-16 { margin-top: var(--wo-space-16); }

.wo-mb-0  { margin-bottom: 0; }
.wo-mb-2  { margin-bottom: var(--wo-space-2); }
.wo-mb-3  { margin-bottom: var(--wo-space-3); }
.wo-mb-4  { margin-bottom: var(--wo-space-4); }
.wo-mb-6  { margin-bottom: var(--wo-space-6); }
.wo-mb-8  { margin-bottom: var(--wo-space-8); }
.wo-mb-12 { margin-bottom: var(--wo-space-12); }
.wo-mb-16 { margin-bottom: var(--wo-space-16); }

.wo-mx-auto { margin-inline: auto; }
.wo-my-auto { margin-block: auto; }


/* ------------------------------------------------------------------
   PADDING
   ------------------------------------------------------------------ */

.wo-p-0  { padding: 0; }
.wo-p-4  { padding: var(--wo-space-4); }
.wo-p-6  { padding: var(--wo-space-6); }
.wo-p-8  { padding: var(--wo-space-8); }

.wo-pt-0 { padding-top: 0; }
.wo-pb-0 { padding-bottom: 0; }
.wo-py-4 { padding-block: var(--wo-space-4); }
.wo-py-8 { padding-block: var(--wo-space-8); }
.wo-px-4 { padding-inline: var(--wo-space-4); }
.wo-px-6 { padding-inline: var(--wo-space-6); }


/* ------------------------------------------------------------------
   SIZE
   ------------------------------------------------------------------ */

.wo-w-full   { width: 100%; }
.wo-w-auto   { width: auto; }
.wo-h-full   { height: 100%; }
.wo-min-w-0  { min-width: 0; }   /* fixes flex/grid overflow */
.wo-max-w-none { max-width: none; }

.wo-flex-1      { flex: 1 1 auto; }
.wo-flex-none   { flex: 0 0 auto; }
.wo-shrink-0    { flex-shrink: 0; }
.wo-grow        { flex-grow: 1; }


/* ------------------------------------------------------------------
   POSITION
   ------------------------------------------------------------------ */

.wo-relative { position: relative; }
.wo-absolute { position: absolute; }
.wo-fixed    { position: fixed; }
.wo-static   { position: static; }

.wo-inset-0  { inset: 0; }

.wo-sticky-top {
	position: sticky;
	top: var(--wo-header-offset);
}

.wo-z-1 { z-index: 1; }
.wo-z-2 { z-index: 2; }


/* ------------------------------------------------------------------
   SURFACE
   ------------------------------------------------------------------ */

.wo-bg-surface { background: var(--wo-surface); }
.wo-bg-soft    { background: rgba(255, 255, 255, 0.04); }
.wo-bg-deep    { background: var(--wo-bg-deep); }
.wo-bg-none    { background: none; }

.wo-border      { border: 1px solid var(--wo-line); }
.wo-border-top  { border-top: 1px solid var(--wo-line); }
.wo-border-bottom { border-bottom: 1px solid var(--wo-line); }
.wo-border-none { border: none; }

.wo-rounded      { border-radius: var(--wo-radius); }
.wo-rounded-md   { border-radius: var(--wo-radius-md); }
.wo-rounded-lg   { border-radius: var(--wo-radius-lg); }
.wo-rounded-pill { border-radius: var(--wo-radius-pill); }
.wo-rounded-none { border-radius: 0; }

.wo-shadow    { box-shadow: var(--wo-shadow); }
.wo-shadow-lg { box-shadow: var(--wo-shadow-lg); }
.wo-shadow-none { box-shadow: none; }


/* ------------------------------------------------------------------
   OVERFLOW & MEDIA
   ------------------------------------------------------------------ */

.wo-overflow-hidden { overflow: hidden; }
.wo-overflow-auto   { overflow: auto; }
.wo-overflow-x-auto { overflow-x: auto; }

.wo-object-cover   { object-fit: cover; }
.wo-object-contain { object-fit: contain; }

/* Fills its positioned parent completely. */
.wo-cover-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ------------------------------------------------------------------
   INTERACTION
   ------------------------------------------------------------------ */

.wo-pointer      { cursor: pointer; }
.wo-no-pointer   { pointer-events: none; }
.wo-select-none  { user-select: none; }

/* Makes a whole card clickable from a single inner link, while
   keeping the link text as the accessible name. Any button inside
   needs .wo-z-2 to stay clickable above it. */
.wo-stretch-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}


/* ------------------------------------------------------------------
   DIVIDER
   ------------------------------------------------------------------ */

.wo-divider {
	height: 1px;
	background: var(--wo-line);
	border: none;
	margin-block: var(--wo-space-6);
}

.wo-divider--fade {
	background: linear-gradient(90deg, transparent, var(--wo-line-strong), transparent);
}


/* ------------------------------------------------------------------
   SKELETON
   Loading placeholder for AJAX-loaded content.
   ------------------------------------------------------------------ */

.wo-skeleton {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.04) 25%,
		rgba(255, 255, 255, 0.09) 50%,
		rgba(255, 255, 255, 0.04) 75%
	);
	background-size: 200% 100%;
	border-radius: var(--wo-radius-sm);
	animation: wo-shimmer 1.4s linear infinite;
}

@keyframes wo-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wo-skeleton {
		animation: none;
	}
}


/* ------------------------------------------------------------------
   ARIA STATE HELPERS
   ------------------------------------------------------------------ */

[hidden] {
	display: none !important;
}

[aria-busy='true'] {
	cursor: progress;
}

/* Prevents a flash of unstyled tab panels before JS initialises. */
.no-js .wo-tabs__panel {
	display: block !important;
}

/* ------------------------------------------------------------------
   DISPLAY FONT WEIGHT
   Aladin has a single weight (400). Forcing 400 everywhere the
   display font is used stops headings rendering heavier than the
   typeface was drawn.
   ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.wo-h1, .wo-h2, .wo-h3, .wo-h4,
.wo-logo__text,
.wo-hero__logotype,
.wo-hero__title,
.wo-section-head__title,
.wo-product-card__title,
.wo-post-card__title,
.wo-category-card__name,
.wo-category-card__avatar,
.wo-feature__title,
.wo-404__code,
.wo-shop__title,
.wo-product__title,
.woocommerce div.product .product_title,
.wo-entry__title,
.wo-page-head__title,
.wo-cta-strip__title,
.wo-review-form__title,
#review_form #reply-title,
.comment-reply-title,
.wo-comments__title,
.wo-related__title {
	font-weight: 400;
}