/**
 * Fishing Pro frontend stylesheet entry point.
 *
 * Layer order is explicit for predictable CSS output and future code splitting.
 */
/**
 * Third-party Sass imports.
 *
 * Keep vendor code isolated. No vendor CSS is included.
 */
/**
 * Public design-system abstract API.
 *
 * Consumers should import this barrel instead of reaching into token files.
 */
/**
 * Foundation and accessibility token values.
 *
 * These values describe global layout capabilities rather than components.
 * Runtime CSS custom properties are emitted from base/_root.scss.
 */
/**
 * Neutral placeholder and semantic color tokens.
 *
 * Primary, secondary, and accent values are deliberately neutral. They are
 * integration points for a future brand palette, not final brand colors.
 */
/**
 * Fluid 8-point spacing scale.
 *
 * Each minimum value advances in 0.5rem steps. Larger steps gain bounded
 * viewport fluidity while retaining predictable minimum and maximum values.
 */
/**
 * Responsive type scale and variable-font preparation.
 *
 * Every named text role receives size, line-height, weight, and tracking
 * tokens so components never need to invent typography values.
 */
/**
 * Mobile-first breakpoint map.
 *
 * CSS custom properties are emitted for documentation and script parity.
 * Sass mixins consume the map because custom properties cannot drive media
 * query conditions.
 */
/**
 * Border-radius scale.
 *
 * Values cover compact controls, cards, large surfaces, pills, and circles.
 */
/**
 * Elevation and interaction shadow tokens.
 *
 * Component aliases reference the elevation scale to avoid copied values.
 */
/**
 * Named layer scale.
 *
 * Components consume semantic layer tokens instead of local magic numbers.
 */
/**
 * Motion duration, delay, easing, distance, and scale tokens.
 *
 * Component motion consumes semantic tokens so reduced-motion behavior and
 * interaction intensity can be governed from one foundation layer.
 */
/**
 * Side-effect-free design token helper functions.
 *
 * Functions return CSS custom property references or compile-time breakpoint
 * values; they never emit selectors.
 */
/**
 * Mobile-first responsive and accessibility mixins.
 *
 * Mixins centralize media queries, token emission, focus treatment, touch
 * targets, reduced motion, high contrast, and container behavior.
 */
/**
 * Opt-in placeholder selectors for common design-system patterns.
 *
 * They emit no CSS until a future component explicitly extends them.
 */
/**
 * Public base layer.
 *
 * Order is deliberate: tokens, normalization, document defaults, accessibility
 * behavior, and print handling.
 */
/**
 * Public design-system abstract API.
 *
 * Consumers should import this barrel instead of reaching into token files.
 */
/**
 * Runtime CSS custom property registry.
 *
 * Every design token is emitted once at the document root. Components and
 * utilities consume these properties instead of Sass values or literals.
 */
:root {
  color-scheme: light;
  --container-max: 80rem;
  --container-wide: 96rem;
  --container-fluid: 100%;
  --container-gutter: clamp(var(--space-2), 2vw, var(--space-5));
  --section-space: clamp(var(--space-6), 6vw, var(--space-12));
  --grid-columns: 12;
  --grid-gap: var(--space-3);
  --grid-item-min: 16rem;
  --border-width: 0.0625rem;
  --control-height: 2.75rem;
  --touch-target-min: 2.75rem;
  --readable-line-height: 1.6;
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.1875rem;
  --scrollbar-size: 0.75rem;
  --color-primary: hsl(220, 15%, 20%);
  --color-secondary: hsl(220, 10%, 40%);
  --color-accent: hsl(220, 8%, 58%);
  --color-success: hsl(145, 55%, 32%);
  --color-warning: hsl(38, 92%, 42%);
  --color-danger: hsl(4, 68%, 46%);
  --color-info: hsl(205, 72%, 40%);
  --color-surface: hsl(0, 0%, 98%);
  --color-background: hsl(0, 0%, 100%);
  --color-card: hsl(0, 0%, 100%);
  --color-border: hsl(220, 13%, 84%);
  --color-overlay: hsla(220, 24%, 10%, 0.72);
  --color-text-primary: hsl(220, 25%, 12%);
  --color-text-secondary: hsl(220, 15%, 30%);
  --color-muted: hsl(220, 9%, 44%);
  --color-link: hsl(215, 70%, 36%);
  --color-visited: hsl(270, 42%, 38%);
  --color-hover: color-mix(in srgb, var(--color-primary) 84%, white);
  --color-active: color-mix(in srgb, var(--color-primary) 82%, black);
  --color-disabled: hsl(220, 8%, 68%);
  --color-on-primary: hsl(0, 0%, 100%);
  --color-on-dark: hsl(0, 0%, 100%);
  --color-high-contrast: CanvasText;
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: clamp(2.5rem, 2.25rem + 0.5vw, 3rem);
  --space-6: clamp(3rem, 2.75rem + 0.75vw, 4rem);
  --space-7: clamp(3.5rem, 3rem + 1vw, 5rem);
  --space-8: clamp(4rem, 3.5rem + 1.5vw, 6rem);
  --space-9: clamp(4.5rem, 4rem + 2vw, 7rem);
  --space-10: clamp(5rem, 4.5rem + 2.5vw, 8rem);
  --space-11: clamp(5.5rem, 5rem + 3vw, 9rem);
  --space-12: clamp(6rem, 5.5rem + 3.5vw, 10rem);
  --space-13: clamp(6.5rem, 6rem + 4vw, 11rem);
  --space-14: clamp(7rem, 6.5rem + 4.5vw, 12rem);
  --space-15: clamp(7.5rem, 7rem + 5vw, 13rem);
  --space-16: clamp(8rem, 7.5rem + 5.5vw, 14rem);
  --space-17: clamp(8.5rem, 8rem + 6vw, 15rem);
  --space-18: clamp(9rem, 8.5rem + 6.5vw, 16rem);
  --space-19: clamp(9.5rem, 9rem + 7vw, 17rem);
  --space-20: clamp(10rem, 9.5rem + 7.5vw, 18rem);
  --font-family-sans: "Inter Variable", "Segoe UI Variable", system-ui, sans-serif;
  --font-family-serif: ui-serif, Georgia, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-optical-sizing: auto;
  --font-variation-settings: normal;
  --font-stretch-normal: 100%;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display-xl: clamp(3rem, 2rem + 5vw, 6rem);
  --line-height-display-xl: 1;
  --font-weight-display-xl: 700;
  --letter-spacing-display-xl: -0.035em;
  --font-size-display-l: clamp(2.5rem, 1.75rem + 4vw, 5rem);
  --line-height-display-l: 1.05;
  --font-weight-display-l: 700;
  --letter-spacing-display-l: -0.03em;
  --font-size-display-m: clamp(2.25rem, 1.75rem + 3vw, 4rem);
  --line-height-display-m: 1.08;
  --font-weight-display-m: 700;
  --letter-spacing-display-m: -0.025em;
  --font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --line-height-h1: 1.1;
  --font-weight-h1: 700;
  --letter-spacing-h1: -0.025em;
  --font-size-h2: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  --line-height-h2: 1.15;
  --font-weight-h2: 700;
  --letter-spacing-h2: -0.02em;
  --font-size-h3: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  --line-height-h3: 1.2;
  --font-weight-h3: 700;
  --letter-spacing-h3: -0.015em;
  --font-size-h4: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --line-height-h4: 1.25;
  --font-weight-h4: 600;
  --letter-spacing-h4: -0.01em;
  --font-size-h5: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --line-height-h5: 1.3;
  --font-weight-h5: 600;
  --letter-spacing-h5: -0.005em;
  --font-size-h6: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --line-height-h6: 1.35;
  --font-weight-h6: 600;
  --letter-spacing-h6: 0;
  --font-size-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --line-height-lead: 1.55;
  --font-weight-lead: 400;
  --letter-spacing-lead: 0;
  --font-size-body-large: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --line-height-body-large: 1.65;
  --font-weight-body-large: 400;
  --letter-spacing-body-large: 0;
  --font-size-body: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  --line-height-body: 1.6;
  --font-weight-body: 400;
  --letter-spacing-body: 0;
  --font-size-small: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --line-height-small: 1.55;
  --font-weight-small: 400;
  --letter-spacing-small: 0.005em;
  --font-size-caption: clamp(0.75rem, 0.725rem + 0.12vw, 0.8125rem);
  --line-height-caption: 1.45;
  --font-weight-caption: 400;
  --letter-spacing-caption: 0.01em;
  --font-size-label: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --line-height-label: 1.25;
  --font-weight-label: 600;
  --letter-spacing-label: 0.04em;
  --font-size-button: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
  --line-height-button: 1.2;
  --font-weight-button: 600;
  --letter-spacing-button: 0.02em;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-round: 9999rem;
  --radius-circle: 50%;
  --shadow-xs: 0 0.0625rem 0.125rem hsla(220, 24%, 10%, 0.08);
  --shadow-sm: 0 0.125rem 0.25rem hsla(220, 24%, 10%, 0.1);
  --shadow-md: 0 0.375rem 1rem hsla(220, 24%, 10%, 0.12);
  --shadow-lg: 0 0.75rem 2rem hsla(220, 24%, 10%, 0.14);
  --shadow-xl: 0 1.5rem 4rem hsla(220, 24%, 10%, 0.18);
  --shadow-focus: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--color-info) 55%, transparent);
  --shadow-card: var(--shadow-sm);
  --shadow-dropdown: var(--shadow-md);
  --shadow-modal: var(--shadow-xl);
  --shadow-hover: var(--shadow-lg);
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-overlay: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-maximum: 9999;
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 500ms;
  --delay-none: 0ms;
  --delay-short: 80ms;
  --delay-medium: 160ms;
  --ease-linear: linear;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-distance-sm: 0.25rem;
  --motion-distance-md: 0.5rem;
  --motion-distance-lg: 1rem;
  --motion-scale-hidden: 0;
  --motion-scale-rest: 1;
  --motion-scale-hover: 1.03;
  --breakpoint-mobile: 0rem;
  --breakpoint-tablet: 48rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
  --breakpoint-wide-desktop: 96rem;
  --breakpoint-ultra-wide: 120rem;
  --focus-ring-color: var(--color-info);
  --motion-duration-scale: 1;
  --motion-distance-scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-scale: 0;
    --motion-distance-scale: 0;
  }
}
/**
 * Low-specificity modern reset.
 *
 * The reset normalizes sizing, margins, responsive media, inherited form
 * typography, and safe text wrapping without imposing component design.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  padding: 0;
  margin: 0;
  list-style: none;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

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

button,
[type=button],
[type=submit],
[type=reset] {
  touch-action: manipulation;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(p, li, dd, figcaption) {
  overflow-wrap: break-word;
}

/**
 * Local WOFF2 and variable-font declarations.
 *
 * Future @font-face rules must use font-display: swap.
 * Placeholder only; no font files are shipped.
 */
/**
 * Document body defaults.
 *
 * Body styling establishes readable typography and semantic foreground and
 * background tokens without defining any page-specific layout.
 */
body {
  min-block-size: 100vh;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--readable-line-height);
  letter-spacing: var(--letter-spacing-body);
  background-color: var(--color-background);
  font-optical-sizing: var(--font-optical-sizing);
  font-variation-settings: var(--font-variation-settings);
  text-rendering: optimizeLegibility;
}

/**
 * Semantic typography defaults.
 *
 * Elements map directly to the role-based type tokens. Future components
 * should consume the same role tokens instead of creating local type scales.
 */
:where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}

h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
}

p {
  text-wrap: pretty;
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

a {
  color: var(--color-link);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.18em;
}

a:visited {
  color: var(--color-visited);
}

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

a:active {
  color: var(--color-active);
}

/**
 * Text selection treatment.
 *
 * Selection colors use semantic tokens so future themes can override them.
 */
::selection {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

/**
 * Lightweight scrollbar token integration.
 *
 * Scrollbars remain native and accessible while adopting semantic colors.
 */
html {
  scrollbar-color: var(--color-muted) var(--color-surface);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  inline-size: var(--scrollbar-size);
  block-size: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background-color: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-muted);
  border: var(--border-width) solid var(--color-surface);
  border-radius: var(--radius-round);
}

/**
 * Keyboard focus, touch target, and high-contrast defaults.
 *
 * Focus is intentionally visible only for keyboard-style navigation through
 * :focus-visible. Interactive controls receive the minimum touch target token.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-focus);
}

:where(button, [type=button], [type=submit], [type=reset], select) {
  min-block-size: var(--touch-target-min);
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    color: var(--color-high-contrast);
    outline-color: var(--color-high-contrast);
    box-shadow: none;
  }
}
/**
 * Accessibility helpers required by the foundational templates.
 *
 * These selectors support screen-reader content and the existing skip link;
 * no general-purpose utility catalogue is emitted here.
 */
.screen-reader-text {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
  z-index: var(--z-maximum);
  inline-size: auto;
  block-size: auto;
  padding: var(--space-1) var(--space-2);
  margin: var(--space-1);
  clip-path: none;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}

[hidden] {
  display: none !important;
}

/**
 * Print-safe baseline.
 *
 * Print output removes decorative effects and preserves readable URLs without
 * introducing a separate print design.
 */
@media print {
  *,
  *::before,
  *::after {
    color: currentColor !important;
    text-shadow: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
}
/**
 * Reusable component library barrel.
 *
 * Page-specific components such as the Homepage Hero are intentionally omitted
 * and compiled through their dedicated split bundle.
 */
/**
 * Shared component primitives.
 *
 * Repeated control and form-field declarations live here so individual
 * components add structure and variants without duplicating foundation CSS.
 */
:where(.c-button,
.c-pagination__link,
.c-pagination__button,
.c-load-more,
.c-quantity__button) {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  min-block-size: var(--touch-target-min);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  color: var(--control-color, var(--color-text-primary));
  font-family: var(--font-family-sans);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--control-background, transparent);
  border: var(--border-width) solid var(--control-border, transparent);
  border-radius: var(--control-radius, var(--radius-md));
  transition: color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), background-color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), border-color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), box-shadow calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard);
}

:where(.c-button,
.c-pagination__link,
.c-pagination__button,
.c-load-more,
.c-quantity__button):is(:disabled, [aria-disabled=true], .is-disabled) {
  color: var(--color-disabled);
  cursor: not-allowed;
  background-color: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
  pointer-events: none;
}

:where(.c-input,
.c-textarea,
.c-select,
.c-search-input,
.c-quantity__input) {
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  color: var(--field-color, var(--color-text-primary));
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  background-color: var(--field-background, var(--color-card));
  border: var(--border-width) solid var(--field-border, var(--color-border));
  border-radius: var(--field-radius, var(--radius-md));
  transition: border-color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), box-shadow calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard);
}

:where(.c-input,
.c-textarea,
.c-select,
.c-search-input,
.c-quantity__input)::placeholder {
  color: var(--color-muted);
}

:where(.c-input,
.c-textarea,
.c-select,
.c-search-input,
.c-quantity__input):is(:disabled, [aria-disabled=true]) {
  color: var(--color-disabled);
  cursor: not-allowed;
  background-color: var(--color-surface);
}

:where(.c-input,
.c-textarea,
.c-select,
.c-search-input,
.c-quantity__input):read-only {
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
}

/**
 * Button component API.
 */
/**
 * Reusable button family.
 *
 * Variants expose semantic color roles, tokenized sizes, icon/floating shells,
 * loading state, disabled state, and block width without brand decisions.
 */
.c-button {
  --control-color: var(--color-on-primary);
  --control-background: var(--color-primary);
  --control-border: var(--color-primary);
  --control-radius: var(--radius-md);
  --button-spinner-color: var(--color-on-primary);
  --button-spinner-track: var(--color-border);
  position: relative;
}

.c-button:hover {
  --control-background: var(--color-hover);
  --control-border: var(--color-hover);
}

.c-button:active,
.c-button[aria-pressed=true] {
  --control-background: var(--color-active);
  --control-border: var(--color-active);
}

.c-button--secondary {
  --control-color: var(--color-on-dark);
  --control-background: var(--color-secondary);
  --control-border: var(--color-secondary);
}

.c-button--outline {
  --control-color: var(--color-primary);
  --control-background: transparent;
  --control-border: var(--color-primary);
  --button-spinner-color: var(--color-primary);
}

.c-button--ghost {
  --control-color: var(--color-text-primary);
  --control-background: transparent;
  --control-border: transparent;
  --button-spinner-color: var(--color-text-primary);
}

.c-button--ghost:hover {
  --control-background: var(--color-surface);
  --control-border: var(--color-border);
}

.c-button--text {
  --control-color: var(--color-link);
  --control-background: transparent;
  --control-border: transparent;
  --button-spinner-color: var(--color-link);
  padding-inline: var(--space-1);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.18em;
}

.c-button--icon {
  inline-size: var(--control-height);
  padding: var(--space-1);
  aspect-ratio: 1;
}

.c-button--floating {
  inline-size: calc(var(--touch-target-min) + var(--space-1));
  block-size: calc(var(--touch-target-min) + var(--space-1));
  padding: var(--space-1);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1;
}

.c-button--sm {
  min-block-size: var(--touch-target-min);
  padding-block: var(--space-1);
  padding-inline: var(--space-1);
  font-size: var(--font-size-small);
}

.c-button--md {
  min-block-size: var(--control-height);
}

.c-button--lg {
  min-block-size: calc(var(--control-height) + var(--space-1));
  padding-inline: var(--space-3);
  font-size: var(--font-size-body-large);
}

.c-button--xl {
  min-block-size: calc(var(--control-height) + var(--space-2));
  padding-inline: var(--space-4);
  font-size: var(--font-size-lead);
}

.c-button--block {
  inline-size: 100%;
}

.c-button:is(.is-loading, [aria-busy=true]) {
  color: transparent;
  cursor: progress;
  pointer-events: none;
}

.c-button:is(.is-loading, [aria-busy=true])::after {
  position: absolute;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  content: "";
  border: var(--focus-ring-width) solid var(--button-spinner-track);
  border-block-start-color: var(--button-spinner-color);
  border-radius: var(--radius-circle);
  animation: fp-component-spin var(--duration-slower) var(--ease-linear) infinite;
}

@keyframes fp-component-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-button:is(.is-loading, [aria-busy=true])::after {
    animation-duration: var(--duration-instant);
  }
}
/**
 * Form component API.
 */
/**
 * Text input, textarea, select, label, help text, and field shell.
 *
 * Native semantics remain intact. State colors are supplied through a local
 * custom property controlled by the validation module.
 */
.c-field {
  --field-state-color: var(--color-border);
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-primary);
}

.c-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
}

.c-label__required {
  color: var(--color-danger);
}

.c-field__help {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.c-textarea {
  min-block-size: calc(var(--control-height) + var(--space-4));
  resize: vertical;
}

.c-select {
  cursor: pointer;
}

.c-field :where(.c-input, .c-textarea, .c-select) {
  --field-border: var(--field-state-color);
}

.c-field__message {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  color: var(--field-state-color);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/**
 * Native checkbox and radio component shells.
 *
 * The native input remains operable and receives a full touch target through
 * its label wrapper. Accent color follows the semantic primary token.
 */
.c-choice {
  display: inline-grid;
  grid-template-columns: var(--touch-target-min) minmax(0, 1fr);
  gap: var(--space-1);
  align-items: center;
  min-block-size: var(--touch-target-min);
  color: var(--color-text-primary);
  cursor: pointer;
}

.c-choice__input {
  inline-size: var(--space-3);
  block-size: var(--space-3);
  margin: 0;
  accent-color: var(--color-primary);
  cursor: inherit;
  justify-self: center;
}

.c-choice__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.c-choice:has(.c-choice__input:disabled) {
  color: var(--color-disabled);
  cursor: not-allowed;
}

/**
 * Accessible toggle and switch shells.
 *
 * Use a native checkbox with the c-toggle__input class and expose its state
 * through checked and disabled selectors. RTL receives an explicit transform.
 */
.c-toggle,
.c-switch {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-block-size: var(--touch-target-min);
  color: var(--color-text-primary);
  cursor: pointer;
}

.c-toggle__control,
.c-switch__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  inline-size: calc(var(--control-height) + var(--space-2));
  block-size: var(--control-height);
  padding: var(--border-width);
  background-color: var(--color-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  transition: background-color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), border-color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard);
}

.c-toggle__control::after,
.c-switch__control::after {
  inline-size: calc(var(--control-height) - var(--space-1));
  block-size: calc(var(--control-height) - var(--space-1));
  content: "";
  background-color: var(--color-card);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-xs);
  transition: translate calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard);
}

.c-toggle__input,
.c-switch__input {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
}

.c-toggle__input:checked + .c-toggle__control,
.c-switch__input:checked + .c-switch__control {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.c-toggle__input:checked + .c-toggle__control::after,
.c-switch__input:checked + .c-switch__control::after {
  translate: var(--space-2) 0;
}

[dir=rtl] .c-toggle__input:checked + .c-toggle__control::after,
[dir=rtl] .c-switch__input:checked + .c-switch__control::after {
  translate: calc(var(--space-2) * -1) 0;
}

.c-toggle__input:focus-visible + .c-toggle__control,
.c-switch__input:focus-visible + .c-switch__control {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-focus);
}

.c-toggle:has(.c-toggle__input:disabled),
.c-switch:has(.c-switch__input:disabled) {
  color: var(--color-disabled);
  cursor: not-allowed;
}

/**
 * Native range control shell.
 *
 * Browser-native interaction and keyboard support are preserved.
 */
.c-range {
  display: grid;
  gap: var(--space-1);
}

.c-range__input {
  inline-size: 100%;
  min-block-size: var(--touch-target-min);
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.c-range__input:disabled {
  accent-color: var(--color-disabled);
  cursor: not-allowed;
}

.c-range__values {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

/**
 * Quantity input component.
 *
 * The shell is suitable for future WooCommerce quantity controls while
 * retaining a native number input and separate accessible decrement/increment
 * buttons.
 */
.c-quantity {
  display: inline-grid;
  grid-template-columns: var(--touch-target-min) minmax(var(--touch-target-min), auto) var(--touch-target-min);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-quantity__button {
  --control-background: var(--color-surface);
  --control-border: transparent;
  --control-radius: 0;
  padding: var(--space-1);
}

.c-quantity__input {
  min-inline-size: var(--touch-target-min);
  padding-inline: var(--space-1);
  text-align: center;
  border-block: 0;
  border-radius: 0;
  appearance: textfield;
}

.c-quantity__input::-webkit-inner-spin-button,
.c-quantity__input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

/**
 * Search field shell.
 *
 * The component supports leading icons and trailing controls without assuming
 * a header, modal, or results implementation.
 */
.c-search {
  position: relative;
  display: flex;
  align-items: center;
}

.c-search__icon {
  position: absolute;
  inset-inline-start: var(--space-2);
  z-index: var(--z-base);
  inline-size: var(--space-2);
  block-size: var(--space-2);
  color: var(--color-muted);
  pointer-events: none;
}

.c-search-input {
  padding-inline-start: var(--space-5);
  padding-inline-end: calc(var(--touch-target-min) + var(--space-1));
}

.c-search__action {
  position: absolute;
  inset-inline-end: var(--space-1);
}

/**
 * CSS-only floating label shell.
 *
 * Markup should place the control before its label and use a single-space
 * placeholder so :placeholder-shown remains available without hiding a label.
 */
.c-floating-field {
  position: relative;
}

.c-floating-field :where(.c-input, .c-textarea) {
  padding-block-start: var(--space-2);
}

.c-floating-field .c-label {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  color: var(--color-muted);
  pointer-events: none;
  transform-origin: inline-start center;
  transition: color calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), translate calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard), scale calc(var(--duration-fast) * var(--motion-duration-scale)) var(--ease-standard);
}

.c-floating-field :where(.c-input, .c-textarea):not(:placeholder-shown) + .c-label,
.c-floating-field :where(.c-input, .c-textarea):focus + .c-label {
  color: var(--color-text-secondary);
  translate: 0 calc(var(--space-1) * -1);
  scale: 0.86;
}

/**
 * Form validation, required, disabled, and readonly states.
 *
 * State modifiers update one shared field-state token, preventing repeated
 * border and message rules.
 */
.c-field:is(.is-success, [data-state=success]) {
  --field-state-color: var(--color-success);
}

.c-field:is(.is-error, [data-state=error], :has([aria-invalid=true])) {
  --field-state-color: var(--color-danger);
}

.c-field:is(.is-warning, [data-state=warning]) {
  --field-state-color: var(--color-warning);
}

.c-field:is(.is-info, [data-state=info]) {
  --field-state-color: var(--color-info);
}

.c-field:is(.is-disabled, :has(:disabled)) {
  color: var(--color-disabled);
}

.c-field:is(.is-readonly, :has(:read-only)) .c-label {
  color: var(--color-text-secondary);
}

.c-field:is(.is-required, :has([required])) .c-label {
  font-weight: var(--font-weight-semibold);
}

/**
 * Card component API.
 */
/**
 * Base card shell and reusable content slots.
 *
 * All specialized cards depend on this class and change only local custom
 * properties. No card assumes real content or a specific template.
 */
.c-card {
  --card-color: var(--color-text-primary);
  --card-background: var(--color-card);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-card);
  --card-padding: var(--space-3);
  --card-gap: var(--space-2);
  --card-title-size: var(--font-size-h4);
  --card-text-align: start;
  --card-media-background: var(--color-surface);
  --card-media-ratio: auto;
  position: relative;
  display: grid;
  color: var(--card-color);
  text-align: var(--card-text-align);
  background-color: var(--card-background);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: clip;
}

.c-card__media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--card-media-background);
  aspect-ratio: var(--card-media-ratio);
}

.c-card__media :where(img, picture, video) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--card-media-fit, cover);
}

.c-card__body {
  display: grid;
  gap: var(--card-gap);
  padding: var(--card-padding);
}

.c-card__header,
.c-card__footer,
.c-card__actions,
.c-card__meta {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.c-card__header,
.c-card__footer {
  justify-content: space-between;
}

.c-card__title {
  color: inherit;
  font-size: var(--card-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h4);
}

.c-card__meta {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.c-card--interactive {
  transition: border-color calc(var(--duration-normal) * var(--motion-duration-scale)) var(--ease-standard), box-shadow calc(var(--duration-normal) * var(--motion-duration-scale)) var(--ease-standard), translate calc(var(--duration-normal) * var(--motion-duration-scale)) var(--ease-standard);
}

.c-card--interactive:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  translate: 0 calc(var(--motion-distance-sm) * -1);
}

@media (prefers-reduced-motion: reduce) {
  .c-card--interactive:hover {
    translate: none;
  }
}
/**
 * Product card placeholder shell.
 *
 * Suitable for a future WooCommerce loop without targeting WooCommerce markup.
 */
.c-card--product {
  --card-title-size: var(--font-size-body-large);
  --card-media-background: var(--color-surface);
  --card-media-fit: contain;
}

/**
 * Article card placeholder shell.
 *
 * Semantic article markup can use this modifier without changing the base card.
 */
.c-card--article {
  --card-title-size: var(--font-size-h4);
  --card-gap: var(--space-2);
}

/**
 * Category card placeholder shell.
 */
.c-card--category {
  --card-text-align: center;
  --card-title-size: var(--font-size-h5);
}

/**
 * Brand card placeholder shell.
 *
 * Flexible media dimensions support future SVG and retina brand marks.
 */
.c-card--brand {
  --card-text-align: center;
  --card-media-fit: contain;
  --card-shadow: var(--shadow-xs);
}

.c-card--brand .c-card__media {
  padding: var(--space-3);
}

/**
 * Review card placeholder shell.
 */
.c-card--review {
  --card-background: var(--color-surface);
  --card-border: var(--color-border);
}

/**
 * Feature card shell.
 */
.c-card--feature {
  --card-background: var(--color-surface);
  --card-title-size: var(--font-size-h4);
}

/**
 * Statistic card shell.
 */
.c-card--stat {
  --card-title-size: var(--font-size-h2);
  --card-text-align: center;
}

/**
 * Team card placeholder shell.
 */
.c-card--team {
  --card-text-align: center;
  --card-media-fit: cover;
}

.c-card--team .c-card__media {
  border-radius: var(--radius-circle);
}

/**
 * Image card shell with an optional tokenized overlay surface.
 */
.c-card--image {
  --card-color: var(--color-on-dark);
  --card-background: var(--color-overlay);
  --card-border: transparent;
  --card-media-fit: cover;
}

/**
 * Navigation-adjacent component API.
 *
 * This layer does not define a site header or footer navigation layout.
 */
/**
 * Pagination, rounded/minimal variants, load-more, and infinite status shells.
 *
 * Use nav with an accessible label and aria-current=page for the active item.
 */
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
}

.c-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-pagination__link,
.c-pagination__button,
.c-load-more {
  --control-color: var(--color-text-primary);
  --control-background: var(--color-card);
  --control-border: var(--color-border);
}

.c-pagination__link:is(:hover, [aria-current=page]),
.c-pagination__button:is(:hover, [aria-current=page]) {
  --control-color: var(--color-on-primary);
  --control-background: var(--color-primary);
  --control-border: var(--color-primary);
}

.c-pagination--rounded :where(.c-pagination__link, .c-pagination__button) {
  --control-radius: var(--radius-circle);
  inline-size: var(--touch-target-min);
  padding: var(--space-1);
  aspect-ratio: 1;
}

.c-pagination--minimal :where(.c-pagination__link, .c-pagination__button) {
  --control-background: transparent;
  --control-border: transparent;
}

.c-load-more {
  inline-size: min(100%, var(--grid-item-min));
}

.c-infinite-scroll {
  display: grid;
  gap: var(--space-2);
  place-items: center;
  min-block-size: var(--touch-target-min);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/**
 * Accessible, schema-ready breadcrumb presentation.
 *
 * Recommended markup is nav > ol > li with aria-label, aria-current, and
 * Schema.org BreadcrumbList item properties supplied by the future template.
 */
.c-breadcrumb {
  --breadcrumb-separator: "/";
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-breadcrumb__item {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-inline-size: 0;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  color: var(--color-muted);
  content: var(--breadcrumb-separator);
}

.c-breadcrumb__link {
  color: var(--color-link);
  text-decoration: none;
}

.c-breadcrumb__item[aria-current=page] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/**
 * Keyboard- and ARIA-ready dropdown shell.
 *
 * JavaScript may later control aria-expanded and data-state. No interaction is
 * implemented in this component stylesheet.
 */
.c-dropdown {
  position: relative;
}

.c-dropdown__trigger {
  position: relative;
}

.c-dropdown__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  display: none;
  min-inline-size: var(--grid-item-min);
  padding: var(--space-1);
  color: var(--color-text-primary);
  background-color: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
}

.c-dropdown:is([data-state=open], :has(.c-dropdown__trigger[aria-expanded=true])) > .c-dropdown__menu {
  display: grid;
  gap: var(--space-1);
}

.c-dropdown__item {
  min-block-size: var(--touch-target-min);
  padding: var(--space-1);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.c-dropdown__item:is(:hover, :focus-visible, [aria-current=true]) {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

/**
 * Accessible accordion shell.
 *
 * Native details/summary markup works without JavaScript. ARIA button/panel
 * markup may use the same trigger and panel classes in future FAQ components.
 */
.c-accordion {
  display: grid;
  gap: var(--space-1);
}

.c-accordion__item {
  color: var(--color-text-primary);
  background-color: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-accordion__trigger {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  min-block-size: var(--touch-target-min);
  padding: var(--space-2);
  color: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  background: transparent;
  border: 0;
  list-style: none;
}

.c-accordion__trigger::-webkit-details-marker {
  display: none;
}

.c-accordion__panel {
  padding: 0 var(--space-2) var(--space-2);
  color: var(--color-text-secondary);
}

.c-accordion__panel[hidden] {
  display: none;
}

.c-accordion__trigger[aria-expanded=true],
.c-accordion__item[open] > .c-accordion__trigger {
  color: var(--color-link);
}

/**
 * Horizontal, vertical, and responsive tab shell.
 *
 * Use role=tablist, role=tab, role=tabpanel, aria-selected, aria-controls, and
 * tabindex state management in the future JavaScript integration.
 */
.c-tabs {
  display: grid;
  gap: var(--space-2);
}

.c-tabs__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-block-end: var(--border-width) solid var(--color-border);
}

.c-tabs__tab {
  min-block-size: var(--touch-target-min);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-block-end: var(--focus-ring-width) solid transparent;
}

.c-tabs__tab:is([aria-selected=true], .is-active) {
  color: var(--color-link);
  border-block-end-color: var(--color-primary);
}

.c-tabs__panel {
  min-inline-size: 0;
}

.c-tabs__panel[hidden] {
  display: none;
}

@media (min-width: 48rem) {
  .c-tabs--vertical {
    grid-template-columns: minmax(var(--grid-item-min), auto) minmax(0, 1fr);
  }
  .c-tabs--vertical .c-tabs__list {
    flex-direction: column;
    overflow-x: visible;
    border-block-end: 0;
    border-inline-end: var(--border-width) solid var(--color-border);
  }
  .c-tabs--vertical .c-tabs__tab {
    justify-content: flex-start;
    text-align: start;
    border-block-end: 0;
    border-inline-end: var(--focus-ring-width) solid transparent;
  }
  .c-tabs--vertical .c-tabs__tab:is([aria-selected=true], .is-active) {
    border-inline-end-color: var(--color-primary);
  }
}
/**
 * Feedback component API.
 */
/**
 * Semantic badge system.
 *
 * Commerce-ready states map to existing semantic colors and remain neutral
 * until the brand palette replaces the placeholder tokens.
 */
.c-badge {
  --badge-color: var(--color-on-dark);
  --badge-background: var(--color-secondary);
  display: inline-flex;
  gap: calc(var(--space-1) / 2);
  align-items: center;
  min-block-size: var(--space-3);
  padding-block: calc(var(--space-1) / 2);
  padding-inline: var(--space-1);
  color: var(--badge-color);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-label);
  background-color: var(--badge-background);
  border-radius: var(--radius-round);
}

.c-badge--sale,
.c-badge--discount {
  --badge-background: var(--color-danger);
}

.c-badge--new {
  --badge-background: var(--color-success);
}

.c-badge--hot,
.c-badge--limited,
.c-badge--low-stock {
  --badge-color: var(--color-text-primary);
  --badge-background: var(--color-warning);
}

.c-badge--best-seller {
  --badge-background: var(--color-info);
}

.c-badge--out-of-stock {
  --badge-color: var(--color-text-secondary);
  --badge-background: var(--color-disabled);
}

.c-badge--featured {
  --badge-background: var(--color-primary);
}

.c-badge--coming-soon {
  --badge-background: var(--color-secondary);
}

/**
 * Reusable tag, category, filter, and status chips.
 */
.c-tag {
  --tag-color: var(--color-text-secondary);
  --tag-background: var(--color-surface);
  --tag-border: var(--color-border);
  --tag-radius: var(--radius-md);
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-block-size: var(--touch-target-min);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  color: var(--tag-color);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  text-decoration: none;
  background-color: var(--tag-background);
  border: var(--border-width) solid var(--tag-border);
  border-radius: var(--tag-radius);
}

.c-tag--category {
  --tag-color: var(--color-link);
}

.c-tag--filter {
  cursor: pointer;
}

.c-tag--status {
  --tag-color: var(--color-on-dark);
  --tag-background: var(--color-info);
  --tag-border: var(--color-info);
}

.c-tag--rounded {
  --tag-radius: var(--radius-round);
}

.c-tag--sm {
  min-block-size: var(--space-4);
  padding-inline: var(--space-1);
  font-size: var(--font-size-caption);
}

.c-tag--md {
  min-block-size: var(--touch-target-min);
}

.c-tag--lg {
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  font-size: var(--font-size-body);
}

.c-tag:is([aria-pressed=true], .is-active) {
  --tag-color: var(--color-on-primary);
  --tag-background: var(--color-primary);
  --tag-border: var(--color-primary);
}

/**
 * Alerts, toast, and notification shells.
 *
 * Use role=status for passive updates and role=alert for urgent errors.
 */
.c-alert {
  --feedback-color: var(--color-info);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--feedback-color);
  border-inline-start-width: var(--focus-ring-width);
  border-radius: var(--radius-md);
}

.c-alert__icon {
  color: var(--feedback-color);
}

.c-alert__content {
  display: grid;
  gap: var(--space-1);
}

.c-alert__title {
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-large);
}

.c-alert--success {
  --feedback-color: var(--color-success);
}

.c-alert--error {
  --feedback-color: var(--color-danger);
}

.c-alert--warning {
  --feedback-color: var(--color-warning);
}

.c-alert--info {
  --feedback-color: var(--color-info);
}

.c-alert--toast {
  max-inline-size: min(100%, var(--grid-item-min));
  box-shadow: var(--shadow-lg);
}

.c-alert--notification {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/**
 * Spinner, skeleton, progress, circular progress, and content placeholders.
 *
 * Animations use global motion tokens and are disabled for reduced motion.
 */
.c-spinner {
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border: var(--focus-ring-width) solid var(--color-border);
  border-block-start-color: var(--color-primary);
  border-radius: var(--radius-circle);
  animation: fp-component-spin var(--duration-slower) var(--ease-linear) infinite;
}

.c-skeleton {
  min-block-size: var(--space-3);
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-surface), var(--color-border), var(--color-surface));
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: fp-component-skeleton var(--duration-slower) var(--ease-linear) infinite;
}

.c-progress {
  --progress-value: 0%;
  overflow: hidden;
  background-color: var(--color-surface);
  border-radius: var(--radius-round);
}

.c-progress__bar {
  inline-size: var(--progress-value);
  min-inline-size: var(--border-width);
  block-size: var(--space-1);
  background-color: var(--color-primary);
  border-radius: inherit;
  transition: inline-size calc(var(--duration-normal) * var(--motion-duration-scale)) var(--ease-standard);
}

.c-progress-circular {
  --progress-value: 0%;
  display: grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  background: conic-gradient(var(--color-primary) var(--progress-value), var(--color-surface) 0);
  border-radius: var(--radius-circle);
}

.c-content-placeholder {
  display: grid;
  gap: var(--space-2);
}

@keyframes fp-component-skeleton {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-spinner,
  .c-skeleton {
    animation: none;
  }
}
/**
 * Search, wishlist, cart, 404, blog, and product empty-state shell.
 *
 * Modifier classes change only the semantic icon color; content and actions
 * remain template responsibilities.
 */
.c-empty-state {
  --empty-state-color: var(--color-muted);
  display: grid;
  gap: var(--space-2);
  place-items: center;
  max-inline-size: var(--container-max);
  padding: var(--space-4);
  margin-inline: auto;
  color: var(--color-text-secondary);
  text-align: center;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.c-empty-state__icon {
  inline-size: var(--space-6);
  block-size: var(--space-6);
  color: var(--empty-state-color);
}

.c-empty-state__title {
  color: var(--color-text-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h3);
}

.c-empty-state--search,
.c-empty-state--blog {
  --empty-state-color: var(--color-info);
}

.c-empty-state--wishlist {
  --empty-state-color: var(--color-danger);
}

.c-empty-state--cart,
.c-empty-state--product {
  --empty-state-color: var(--color-primary);
}

.c-empty-state--404 {
  --empty-state-color: var(--color-warning);
}

/**
 * Media component API.
 */
/**
 * Responsive image wrapper.
 *
 * Native width and height attributes remain required to reserve aspect ratio
 * and prevent cumulative layout shift.
 */
.c-media {
  position: relative;
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  background-color: var(--color-surface);
}

.c-media__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position, center);
}

/**
 * Consumer-configurable ratio box.
 *
 * Set --media-ratio through a component modifier or template context. The
 * fallback preserves the intrinsic ratio of width/height media attributes.
 */
.c-ratio {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, auto);
}

.c-ratio > :where(img, picture, video, iframe) {
  inline-size: 100%;
  block-size: 100%;
}

/**
 * Responsive video and iframe wrapper.
 */
.c-video {
  position: relative;
  overflow: hidden;
  background-color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  aspect-ratio: var(--media-ratio, auto);
}

.c-video :where(video, iframe) {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: contain;
}

/**
 * Avatar shell with tokenized sizes.
 */
.c-avatar {
  display: inline-grid;
  place-items: center;
  inline-size: var(--avatar-size, var(--touch-target-min));
  block-size: var(--avatar-size, var(--touch-target-min));
  overflow: hidden;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-circle);
}

.c-avatar :where(img, svg) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.c-avatar--sm {
  --avatar-size: var(--space-4);
}

.c-avatar--md {
  --avatar-size: var(--touch-target-min);
}

.c-avatar--lg {
  --avatar-size: var(--space-6);
}

/**
 * Decorative or labelled icon wrapper.
 *
 * Decorative icons should use aria-hidden=true. Standalone meaningful icons
 * require an accessible name on their interactive parent.
 */
.c-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--icon-size, var(--space-2));
  block-size: var(--icon-size, var(--space-2));
  color: currentColor;
}

.c-icon > :where(svg, img) {
  inline-size: 100%;
  block-size: 100%;
}

.c-icon--sm {
  --icon-size: var(--space-1);
}

.c-icon--md {
  --icon-size: var(--space-2);
}

.c-icon--lg {
  --icon-size: var(--space-3);
}

/**
 * Semantic figure and caption shell.
 */
.c-figure {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.c-figure__caption {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/**
 * Lazy-image placeholder shell.
 *
 * Native loading=lazy remains the primary loading mechanism. Data-state lets a
 * future observer module reveal secondary images without changing dimensions.
 */
.c-lazy-media {
  position: relative;
  min-block-size: var(--touch-target-min);
  overflow: hidden;
  background-color: var(--color-surface);
}

.c-lazy-media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  background-color: var(--color-surface);
}

.c-lazy-media[data-state=loaded] .c-lazy-media__placeholder {
  display: none;
}

/**
 * Overlay component API.
 */
/**
 * Accessible modal shell.
 *
 * Future controllers must manage role=dialog, aria-modal, labelledby,
 * describedby, focus trapping, focus return, Escape, and background inertness.
 */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: var(--space-2);
}

.c-modal:is([data-state=open], .is-open):not([hidden]) {
  display: grid;
}

.c-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

.c-modal__dialog {
  --modal-max: var(--container-max);
  position: relative;
  z-index: var(--z-base);
  inline-size: min(100%, var(--modal-max));
  max-block-size: calc(100dvh - var(--space-4));
  overflow: auto;
  color: var(--color-text-primary);
  background-color: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
}

.c-modal__header,
.c-modal__body,
.c-modal__footer {
  padding: var(--space-3);
}

.c-modal__header,
.c-modal__footer {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.c-modal__header {
  border-block-end: var(--border-width) solid var(--color-border);
}

.c-modal__footer {
  border-block-start: var(--border-width) solid var(--color-border);
}

:where(.c-modal--login,
.c-modal--register,
.c-modal--newsletter,
.c-modal--age-verification) .c-modal__dialog {
  --modal-max: calc(var(--grid-item-min) + var(--space-6));
}

:where(.c-modal--quick-view,
.c-modal--video,
.c-modal--image,
.c-modal--search,
.c-modal--cookie) .c-modal__dialog {
  --modal-max: var(--container-wide);
}

/**
 * Mobile, cart, wishlist, filter, and menu drawer shell.
 *
 * Future JavaScript must manage focus, Escape, aria-expanded, inert content,
 * and scroll locking. Logical inset properties provide RTL placement.
 */
.c-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
}

.c-drawer:is([data-state=open], .is-open):not([hidden]) {
  display: block;
}

.c-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

.c-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  inline-size: min(100%, var(--grid-item-min) + var(--space-8));
  color: var(--color-text-primary);
  background-color: var(--color-card);
  box-shadow: var(--shadow-xl);
  translate: 100% 0;
  transition: translate calc(var(--duration-slow) * var(--motion-duration-scale)) var(--ease-standard);
}

[dir=rtl] .c-drawer__panel {
  translate: -100% 0;
}

.c-drawer:is([data-state=open], .is-open) .c-drawer__panel {
  translate: none;
}

.c-drawer__header,
.c-drawer__body,
.c-drawer__footer {
  padding: var(--space-3);
}

.c-drawer__body {
  overflow-y: auto;
}

.c-drawer__header {
  border-block-end: var(--border-width) solid var(--color-border);
}

.c-drawer__footer {
  border-block-start: var(--border-width) solid var(--color-border);
}

:where(.c-drawer--mobile,
.c-drawer--cart,
.c-drawer--wishlist,
.c-drawer--filter,
.c-drawer--menu) .c-drawer__panel {
  border-inline-start: var(--border-width) solid var(--color-border);
}

/**
 * Accessible tooltip shell.
 *
 * The triggering element must reference the tooltip ID through
 * aria-describedby. Tooltips must never contain interactive content.
 */
.c-tooltip {
  z-index: var(--z-tooltip);
  display: none;
  max-inline-size: var(--grid-item-min);
  padding: var(--space-1) var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  text-align: start;
  pointer-events: none;
  background-color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.c-tooltip:is([data-state=open], .is-open):not([hidden]) {
  display: block;
}

/**
 * Table component API.
 */
/**
 * Responsive semantic table shell.
 *
 * Wrap tables in c-table-wrap with tabindex=0 and an accessible label when
 * horizontal scrolling may be required on small screens.
 */
.c-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overscroll-behavior-inline: contain;
}

.c-table {
  inline-size: 100%;
  min-inline-size: var(--grid-item-min);
  color: var(--color-text-primary);
  background-color: var(--color-card);
  border-collapse: collapse;
}

.c-table caption {
  padding: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-align: start;
}

.c-table :where(th, td) {
  padding: var(--space-2);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--border-width) solid var(--color-border);
}

.c-table th {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  background-color: var(--color-surface);
}

.c-table tbody tr:last-child > * {
  border-block-end: 0;
}

/**
 * Product comparison table placeholder shell.
 */
.c-table--comparison :where(th, td):first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: var(--z-base);
  background-color: var(--color-card);
  box-shadow: var(--shadow-xs);
}

.c-table--comparison [data-state=highlighted] {
  background-color: var(--color-surface);
}

/**
 * Product specification table placeholder shell.
 */
.c-table--specification th {
  inline-size: var(--grid-item-min);
  color: var(--color-text-secondary);
}

.c-table--specification tbody tr:nth-child(even) > * {
  background-color: var(--color-surface);
}

/**
 * Typography component API.
 */
/**
 * Long-form prose component.
 *
 * Useful for Gutenberg content, editorial pages, and future product
 * descriptions without targeting Core block classes.
 */
.c-prose {
  max-inline-size: var(--container-max);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--readable-line-height);
}

.c-prose > * + * {
  margin-block-start: var(--space-2);
}

.c-prose :where(ul, ol) {
  padding-inline-start: var(--space-3);
}

.c-prose :where(blockquote, pre) {
  padding: var(--space-2);
  background-color: var(--color-surface);
  border-inline-start: var(--focus-ring-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.c-prose pre {
  overflow-x: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small);
}

.c-lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
}

.c-caption {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.c-label-text {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
}

/**
 * Component layout pattern API.
 */
/**
 * Tokenized stack, cluster, centered, and sidebar layout patterns.
 */
.c-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-2));
}

.c-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-2));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}

.c-center {
  inline-size: min(100% - var(--container-gutter) - var(--container-gutter), var(--center-max, var(--container-max)));
  margin-inline: auto;
}

.c-sidebar-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-item-min)), 1fr));
  gap: var(--grid-gap);
}

/**
 * Component state utility API.
 */
/**
 * Shared component state hooks.
 *
 * State classes supplement, but never replace, native disabled, hidden,
 * aria-busy, aria-current, aria-selected, and data-state attributes.
 */
.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.is-loading,
[aria-busy=true] {
  cursor: progress;
}

.is-visually-hidden {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/**
 * Layout layer barrel.
 */
/**
 * Mobile-first layout primitives.
 *
 * CSS Grid is the default row system. Flexbox is available as an explicit
 * secondary modifier. Public selectors use the fp- prefix to avoid collisions
 * with Gutenberg, WooCommerce, and third-party plugins.
 */
.fp-container {
  inline-size: min(100% - var(--container-gutter) - var(--container-gutter), var(--container-max));
  margin-inline: auto;
}

.fp-container--wide {
  inline-size: min(100% - var(--container-gutter) - var(--container-gutter), var(--container-wide));
  margin-inline: auto;
}

.fp-container-fluid {
  inline-size: var(--container-fluid);
  padding-inline: var(--container-gutter);
}

.fp-section {
  padding-block: var(--section-space);
}

.fp-row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.fp-column {
  min-inline-size: 0;
  grid-column: span var(--column-span, var(--grid-columns));
}

.fp-grid {
  display: grid;
  gap: var(--grid-gap);
}

.fp-grid--responsive {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-item-min)), 1fr));
}

.fp-row--flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.fp-row--flex > .fp-column {
  flex: 1 1 var(--grid-item-min);
}

/**
 * Future semantic header layout.
 *
 * Placeholder only.
 */
/**
 * Future semantic footer layout.
 *
 * Placeholder only.
 */
/**
 * Page-level composition barrel.
 */
/**
 * Future homepage composition.
 *
 * Placeholder only; no homepage UI is included.
 */
/**
 * Future product-page composition.
 *
 * Placeholder only; no WooCommerce UI is included.
 */
/**
 * Future blog composition.
 *
 * Placeholder only.
 */
/**
 * Public utility-generation API.
 *
 * Forwarded mixins emit nothing until explicitly included by a build entry.
 */
/**
 * Opt-in spacing utility generator.
 *
 * Every generated margin and padding value references the runtime spacing
 * scale. The mixin is not included by default.
 */
/**
 * Opt-in display utility generator.
 *
 * Display utilities express layout modes only and contain no visual styling.
 */
/**
 * Opt-in logical position utility generator.
 *
 * Z-index values reference the semantic layer scale.
 */
/**
 * Opt-in overflow utility generator.
 *
 * Logical-axis helpers avoid coupling utilities to writing direction.
 */
/**
 * Opt-in visibility utility generator.
 *
 * Hidden state and visual-only hiding are kept distinct for accessibility.
 */
/**
 * Opt-in Flexbox utility generator.
 *
 * Flexbox supports one-dimensional alignment after CSS Grid primitives.
 */
/**
 * Opt-in CSS Grid utility generator.
 *
 * Column helpers use the shared twelve-column grid capability.
 */
/**
 * Opt-in alignment utility generator.
 *
 * Utilities apply to both Grid and Flexbox alignment contexts.
 */
/**
 * Opt-in text utility generator.
 *
 * Color and size utilities reference semantic design tokens.
 */
/**
 * Opt-in background utility generator.
 *
 * Background colors use semantic surface tokens rather than palette literals.
 */
/**
 * Opt-in border utility generator.
 *
 * Width and color are sourced from the global foundation tokens.
 */
/**
 * Opt-in radius utility generator.
 *
 * Every class maps directly to the shared radius scale.
 */
/**
 * Opt-in elevation utility generator.
 *
 * Utilities expose the named elevation scale without copying shadow values.
 */
/**
 * Opt-in opacity utility generator.
 *
 * The consumer supplies --utility-opacity so arbitrary opacity scales are not
 * baked into the global token system.
 */
/**
 * Public utility-generation API.
 *
 * Forwarded mixins emit nothing until explicitly included by a build entry.
 */
/**
 * Master opt-in utility generator.
 *
 * Include generate-utilities() in a future utility build entry only when the
 * project has committed to shipping the full utility catalogue.
 */
/**
 * WooCommerce layer barrel.
 */
/**
 * Future WooCommerce archive styles.
 *
 * Placeholder only.
 */
/**
 * Future WooCommerce single-product styles.
 *
 * Placeholder only.
 */