/* ==========================================================================
   ASTYLIO DESIGN SYSTEM — tokens, primitives, components
   Step 1 (showcase-only). Spec: ASTYLIO_DESIGN_SYSTEM_SPEC.md

   Every rule is scoped under `.astylio-ds` (a wrapper div rendered by the
   "Design System" page template) and every token is `--astylio-*` /
   semantic `--color-*`, so the live storefront is completely unaffected:
   nothing here applies unless `.astylio-ds` is present in the DOM.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.astylio-ds {
	/* Raw palette (spec §3) */
	--astylio-burgundy:        #5A1F2B;
	--astylio-burgundy-dark:   #42151F;
	--astylio-burgundy-light:  #7D3243;
	--astylio-ivory-warm:      #F7F3EE;
	--astylio-ivory-soft:      #FCFAF7;
	--astylio-gold:            #C8A97A;
	--astylio-charcoal:        #252525;
	--astylio-text-secondary:  #6B625D;
	--astylio-taupe:           #A89B91;
	--astylio-border:          #DED6CE;

	/* Semantic colour tokens (spec §4) — components consume these */
	--color-bg-page:          var(--astylio-ivory-warm);
	--color-bg-surface:       var(--astylio-ivory-soft);
	--color-bg-surface-soft:  #F1EAE2;
	--color-bg-dark:          var(--astylio-burgundy-dark);

	--color-brand-primary:        var(--astylio-burgundy);
	--color-brand-primary-hover:  var(--astylio-burgundy-dark);
	--color-brand-primary-light:  var(--astylio-burgundy-light);
	--color-brand-primary-active: #471925;

	--color-accent-gold:          var(--astylio-gold);

	--color-text-primary:   var(--astylio-charcoal);
	--color-text-secondary: var(--astylio-text-secondary);
	--color-text-muted:     var(--astylio-taupe);
	--color-text-disabled:  #C9C2BA;
	--color-text-inverse:   #FDFBF8;

	--color-border-subtle:  #E8E2DA;
	--color-border-default: var(--astylio-border);
	--color-border-strong:  #C4B9AD;
	--color-border-focus:   var(--astylio-burgundy);

	--color-success: #4E7A4F;
	--color-warning: #A87B34;
	--color-error:   #A03B3B;
	--color-info:    #4A6D8C;

	/* Typography (spec §6–§9) */
	--astylio-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--astylio-font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--astylio-fs-display-xl: 60px;
	--astylio-fs-display-lg: 50px;
	--astylio-fs-display-md: 42px;
	--astylio-fs-heading-xl: 38px;
	--astylio-fs-heading-lg: 31px;
	--astylio-fs-heading-md: 25px;
	--astylio-fs-heading-sm: 19px;
	--astylio-fs-body-lg: 18px;
	--astylio-fs-body-md: 15px;
	--astylio-fs-body-sm: 13px;
	--astylio-fs-label-lg: 14px;
	--astylio-fs-label-md: 12px;
	--astylio-fs-label-sm: 11px;
	--astylio-fs-caption: 13px;
	--astylio-fs-overline: 11px;
	--astylio-fs-price: 15px;
	--astylio-fs-button: 13px;
	--astylio-fs-nav: 13px;

	--astylio-lh-display: 1.08;
	--astylio-lh-heading: 1.2;
	--astylio-lh-body: 1.65;
	--astylio-ls-nav: 0.14em;

	/* Spacing scale (spec §10) — 1..14 => 4..120 */
	--astylio-space-1: 4px;   --astylio-space-2: 8px;  --astylio-space-3: 12px;
	--astylio-space-4: 16px;  --astylio-space-5: 20px; --astylio-space-6: 24px;
	--astylio-space-7: 32px;  --astylio-space-8: 40px; --astylio-space-9: 48px;
	--astylio-space-10: 56px; --astylio-space-11: 64px; --astylio-space-12: 80px;
	--astylio-space-13: 96px; --astylio-space-14: 120px;

	/* Containers (spec §12) */
	--astylio-container-sm: 640px;
	--astylio-container-md: 880px;
	--astylio-container-lg: 1080px;
	--astylio-container-xl: 1320px;
	--astylio-container-full: 100%;

	/* Border (spec §14) */
	--astylio-border-width: 1px;
	--astylio-border-style: solid;

	/* Radius (spec §15) */
	--astylio-radius-sm: 4px;
	--astylio-radius-md: 6px;
	--astylio-radius-lg: 10px;
	--astylio-radius-pill: 9999px;

	/* Shadows (spec §16) */
	--astylio-shadow-none: none;
	--astylio-shadow-subtle: 0 1px 3px rgba(37, 37, 37, 0.05);
	--astylio-shadow-card: 0 4px 18px rgba(37, 37, 37, 0.06);
	--astylio-shadow-floating: 0 12px 40px rgba(37, 37, 37, 0.12);

	/* Motion (spec §43) */
	--astylio-duration-fast: 150ms;
	--astylio-duration-normal: 250ms;
	--astylio-duration-slow: 400ms;
	--astylio-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
	--astylio-ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
	--astylio-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--astylio-ease-exit: cubic-bezier(0.4, 0, 1, 1);

	/* Icons (spec §27) */
	--astylio-icon-xs: 12px; --astylio-icon-sm: 16px; --astylio-icon-md: 20px;
	--astylio-icon-lg: 24px; --astylio-icon-xl: 32px;

	/* Layout defaults for the showcase surface */
	background-color: var(--color-bg-page);
	color: var(--color-text-primary);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	line-height: var(--astylio-lh-body);
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. BASE (scoped to the showcase surface only)
   -------------------------------------------------------------------------- */
.astylio-ds *,
.astylio-ds *::before,
.astylio-ds *::after { box-sizing: border-box; }

.astylio-ds h1, .astylio-ds h2, .astylio-ds h3, .astylio-ds h4 {
	font-family: var(--astylio-font-display);
	font-weight: 500;
	color: var(--color-text-primary);
	line-height: var(--astylio-lh-heading);
	margin: 0 0 var(--astylio-space-4);
}

.astylio-ds p { margin: 0 0 var(--astylio-space-4); }

.astylio-ds a {
	color: var(--color-brand-primary);
	text-decoration: none;
	transition: color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-ds a:hover { color: var(--color-brand-primary-hover); }

.astylio-ds :focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
	border-radius: var(--astylio-radius-sm);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.astylio-display-xl { font-size: var(--astylio-fs-display-xl); line-height: var(--astylio-lh-display); font-weight: 500; letter-spacing: -0.01em; }
.astylio-display-lg { font-size: var(--astylio-fs-display-lg); line-height: var(--astylio-lh-display); font-weight: 500; letter-spacing: -0.01em; }
.astylio-display-md { font-size: var(--astylio-fs-display-md); line-height: var(--astylio-lh-display); font-weight: 500; }

.astylio-heading-xl { font-size: var(--astylio-fs-heading-xl); }
.astylio-heading-lg { font-size: var(--astylio-fs-heading-lg); }
.astylio-heading-md { font-size: var(--astylio-fs-heading-md); }
.astylio-heading-sm { font-size: var(--astylio-fs-heading-sm); }

.astylio-body-lg { font-size: var(--astylio-fs-body-lg); }
.astylio-body-md { font-size: var(--astylio-fs-body-md); }
.astylio-body-sm { font-size: var(--astylio-fs-body-sm); color: var(--color-text-secondary); }

.astylio-label-lg { font-size: var(--astylio-fs-label-lg); font-weight: 500; letter-spacing: 0.03em; }
.astylio-label-md { font-size: var(--astylio-fs-label-md); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.astylio-label-sm { font-size: var(--astylio-fs-label-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

.astylio-caption { font-size: var(--astylio-fs-caption); color: var(--color-text-secondary); }
.astylio-overline { font-size: var(--astylio-fs-overline); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-brand-primary); }
.astylio-price { font-size: var(--astylio-fs-price); font-weight: 500; color: var(--color-text-primary); }
.astylio-button-text { font-size: var(--astylio-fs-button); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.astylio-nav-text { font-size: var(--astylio-fs-nav); font-weight: 400; letter-spacing: var(--astylio-ls-nav); text-transform: uppercase; }

.astylio-text-secondary { color: var(--color-text-secondary); }
.astylio-text-muted { color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   4. LAYOUT — containers, grid, section
   -------------------------------------------------------------------------- */
.astylio-container { width: 100%; margin: 0 auto; padding: 0 var(--astylio-space-6); }
.astylio-container-sm  { max-width: var(--astylio-container-sm); }
.astylio-container-md  { max-width: var(--astylio-container-md); }
.astylio-container-lg  { max-width: var(--astylio-container-lg); }
.astylio-container-xl  { max-width: var(--astylio-container-xl); }
.astylio-container-full{ max-width: var(--astylio-container-full); }

.astylio-section { padding: var(--astylio-space-11) 0; }
.astylio-section--alt { background: var(--color-bg-surface); }
.astylio-section__header { margin-bottom: var(--astylio-space-8); }
.astylio-section__title { font-size: var(--astylio-fs-heading-lg); }

.astylio-grid { display: grid; gap: var(--astylio-space-6); }
.astylio-grid--2 { grid-template-columns: repeat(2, 1fr); }
.astylio-grid--3 { grid-template-columns: repeat(3, 1fr); }
.astylio-grid--4 { grid-template-columns: repeat(4, 1fr); }
.astylio-grid--products { grid-template-columns: repeat(4, 1fr); gap: var(--astylio-space-7); }
.astylio-grid--spacing { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--astylio-space-4); align-items: end; }

.astylio-stack { display: flex; flex-direction: column; }
.astylio-stack > * + * { margin-top: var(--astylio-space-4); }
.astylio-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--astylio-space-4); }

/* --------------------------------------------------------------------------
   5. BUTTONS (spec §17–§21)
   -------------------------------------------------------------------------- */
.astylio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--astylio-space-2);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-button);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--astylio-radius-md);
	cursor: pointer;
	min-height: 44px;
	padding: 0 var(--astylio-space-6);
	background: transparent;
	text-decoration: none;
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            transform var(--astylio-duration-fast) var(--astylio-ease-standard);
}

.astylio-btn--sm { min-height: 38px; padding: 0 var(--astylio-space-4); font-size: 12px; }
.astylio-btn--md { min-height: 44px; padding: 0 var(--astylio-space-6); }
.astylio-btn--lg { min-height: 52px; padding: 0 var(--astylio-space-8); font-size: 14px; }

.astylio-btn--primary { background: var(--color-brand-primary); color: var(--color-text-inverse); }
.astylio-btn--primary:hover { background: var(--color-brand-primary-hover); }
.astylio-btn--primary:active { background: var(--color-brand-primary-active); transform: translateY(1px); }

.astylio-btn--secondary { background: transparent; border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.astylio-btn--secondary:hover { background: var(--color-brand-primary); color: var(--color-text-inverse); }

.astylio-btn--ghost { background: transparent; color: var(--color-text-primary); }
.astylio-btn--ghost:hover { background: var(--color-bg-surface-soft); }

.astylio-btn--text { background: transparent; color: var(--color-brand-primary); padding: 0; min-height: auto; text-transform: none; letter-spacing: 0.02em; }
.astylio-btn--text:hover { color: var(--color-brand-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

.astylio-btn--icon { padding: 0; width: 44px; min-width: 44px; color: var(--color-text-primary); }
.astylio-btn--icon:hover { background: var(--color-bg-surface-soft); color: var(--color-brand-primary); }

.astylio-btn[disabled], .astylio-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.astylio-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.astylio-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px; height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: astylio-spin 0.7s linear infinite;
}
.astylio-btn--primary.is-loading::after { border-color: rgba(253, 251, 248, 0.9); border-right-color: transparent; }
.astylio-btn--secondary.is-loading::after { border-color: var(--color-brand-primary); border-right-color: transparent; }
@keyframes astylio-spin { to { transform: rotate(360deg); } }

/* Icon button (spec §28) — 44px touch target, visible icon smaller */
.astylio-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: var(--astylio-radius-md);
	background: transparent;
	color: var(--color-text-primary);
	cursor: pointer;
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-icon-btn:hover { background: var(--color-bg-surface-soft); color: var(--color-brand-primary); }
.astylio-icon-btn:active { background: var(--color-border-subtle); }

/* --------------------------------------------------------------------------
   6. ICONS (spec §25–§27)
   -------------------------------------------------------------------------- */
.astylio-icon { width: var(--astylio-icon-md); height: var(--astylio-icon-md); flex: none; }
.astylio-icon--xs { width: var(--astylio-icon-xs); height: var(--astylio-icon-xs); }
.astylio-icon--sm { width: var(--astylio-icon-sm); height: var(--astylio-icon-sm); }
.astylio-icon--md { width: var(--astylio-icon-md); height: var(--astylio-icon-md); }
.astylio-icon--lg { width: var(--astylio-icon-lg); height: var(--astylio-icon-lg); }
.astylio-icon--xl { width: var(--astylio-icon-xl); height: var(--astylio-icon-xl); }

/* --------------------------------------------------------------------------
   7. INPUTS (spec §22–§24)
   -------------------------------------------------------------------------- */
.astylio-field { display: flex; flex-direction: column; gap: var(--astylio-space-2); margin-bottom: var(--astylio-space-4); }
.astylio-field__label { font-size: var(--astylio-fs-label-md); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }
.astylio-field__hint { font-size: var(--astylio-fs-caption); color: var(--color-text-muted); }
.astylio-field__error { display: none; font-size: var(--astylio-fs-caption); color: var(--color-error); align-items: center; gap: 6px; }
.astylio-field--error .astylio-field__error { display: inline-flex; }
.astylio-field--error .astylio-input { border-color: var(--color-error); }
.astylio-field--success .astylio-input { border-color: var(--color-success); }

.astylio-input,
.astylio-select,
.astylio-textarea {
	width: 100%;
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: var(--astylio-border-width) var(--astylio-border-style) var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	padding: 0.65em 0.9em;
	min-height: 46px;
	transition: border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            box-shadow var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-textarea { min-height: 110px; resize: vertical; }
.astylio-input::placeholder, .astylio-textarea::placeholder { color: var(--color-text-muted); }
.astylio-input:hover, .astylio-select:hover, .astylio-textarea:hover { border-color: var(--color-border-strong); }
.astylio-input:focus, .astylio-select:focus, .astylio-textarea:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgba(90, 31, 43, 0.12);
}
.astylio-input[disabled], .astylio-select[disabled], .astylio-textarea[disabled],
.astylio-input.is-disabled { background: var(--color-bg-page); color: var(--color-text-disabled); cursor: not-allowed; }
.astylio-input[readonly] { background: var(--color-bg-page); }
.astylio-input.is-filled { background: #FBF8F3; }

.astylio-search { position: relative; display: flex; align-items: center; }
.astylio-search .astylio-input { padding-right: 44px; }
.astylio-search__btn {
	position: absolute; right: 4px;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer;
	border-radius: var(--astylio-radius-md);
}
.astylio-search__btn:hover { color: var(--color-brand-primary); background: var(--color-bg-surface-soft); }

/* Checkbox / radio — custom, accessible (input visually-hidden) */
.astylio-check, .astylio-radio {
	display: inline-flex; align-items: center; gap: var(--astylio-space-2);
	font-size: var(--astylio-fs-body-md); color: var(--color-text-primary);
	cursor: pointer; min-height: 44px;
}
.astylio-check input, .astylio-radio input {
	position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}
.astylio-check__box, .astylio-radio__dot {
	flex: none; width: 20px; height: 20px;
	border: 1px solid var(--color-border-strong);
	background: var(--color-bg-surface);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard), border-color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-check__box { border-radius: var(--astylio-radius-sm); }
.astylio-radio__dot { border-radius: 50%; }
.astylio-check input:checked + .astylio-check__box,
.astylio-radio input:checked + .astylio-radio__dot {
	background: var(--color-brand-primary); border-color: var(--color-brand-primary);
}
.astylio-check input:checked + .astylio-check__box::after {
	content: ""; width: 10px; height: 6px;
	border-left: 2px solid var(--color-text-inverse);
	border-bottom: 2px solid var(--color-text-inverse);
	transform: rotate(-45deg) translateY(-1px);
}
.astylio-radio input:checked + .astylio-radio__dot::after {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-inverse);
}
.astylio-check input:focus-visible + .astylio-check__box,
.astylio-radio input:focus-visible + .astylio-radio__dot { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.astylio-check input:disabled + .astylio-check__box,
.astylio-radio input:disabled + .astylio-radio__dot { opacity: 0.5; }
.astylio-check input:disabled ~ span:last-child,
.astylio-radio input:disabled ~ span:last-child { color: var(--color-text-disabled); }

/* Toggle */
.astylio-toggle { display: inline-flex; align-items: center; gap: var(--astylio-space-3); cursor: pointer; min-height: 44px; }
.astylio-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.astylio-toggle__track {
	position: relative; width: 46px; height: 26px; flex: none;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--astylio-radius-pill);
	background: var(--color-bg-surface);
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard), border-color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-toggle__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--color-text-muted);
	transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis), background-color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-toggle input:checked + .astylio-toggle__track { background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.astylio-toggle input:checked + .astylio-toggle__track::after { transform: translateX(20px); background: var(--color-text-inverse); }
.astylio-toggle input:focus-visible + .astylio-toggle__track { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.astylio-toggle input:disabled + .astylio-toggle__track { opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. BADGES (spec §35–§36)
   -------------------------------------------------------------------------- */
.astylio-badge {
	display: inline-flex; align-items: center;
	font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 4px 10px; border-radius: var(--astylio-radius-pill);
	line-height: 1.4; white-space: nowrap;
}
.astylio-badge--new { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.astylio-badge--bestseller { background: var(--color-brand-primary); color: var(--color-text-inverse); }
.astylio-badge--sale { background: var(--astylio-gold); color: var(--color-bg-dark); }
.astylio-badge--low-stock { background: #F3E4D6; color: var(--color-warning); }
.astylio-badge--featured { background: transparent; border: 1px solid var(--color-brand-primary); color: var(--color-brand-primary); }

/* --------------------------------------------------------------------------
   9. PRODUCT CARD (spec §29–§34)
   -------------------------------------------------------------------------- */
.astylio-product-card {
	display: flex; flex-direction: column; gap: var(--astylio-space-3);
	background: transparent;
}
.astylio-product-card__media {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, #F1EAE2 0%, #E5DBD0 100%);
	border-radius: var(--astylio-radius-lg);
}
.astylio-product-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis);
}
.astylio-product-card__media .astylio-product-card__img-secondary {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity var(--astylio-duration-normal) var(--astylio-ease-standard);
}
.astylio-product-card:hover .astylio-product-card__media img { transform: scale(1.03); }
.astylio-product-card:hover .astylio-product-card__img-secondary { opacity: 1; }

.astylio-product-card__badge { position: absolute; top: var(--astylio-space-3); left: var(--astylio-space-3); z-index: 2; }
.astylio-product-card__wishlist {
	position: absolute; top: var(--astylio-space-2); right: var(--astylio-space-2); z-index: 2;
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(252, 250, 247, 0.9); border: 0; border-radius: 50%;
	color: var(--color-text-primary); cursor: pointer;
	transition: color var(--astylio-duration-fast) var(--astylio-ease-standard), transform var(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-product-card__wishlist:hover { color: var(--color-brand-primary); transform: scale(1.06); }

.astylio-product-card__body { display: flex; flex-direction: column; gap: 4px; }
.astylio-product-card__name { font-size: var(--astylio-fs-body-md); font-weight: 500; color: var(--color-text-primary); margin: 0; font-family: var(--astylio-font-ui); }
.astylio-product-card__price-row { display: flex; align-items: baseline; gap: var(--astylio-space-2); }
.astylio-product-card__price { font-size: var(--astylio-fs-price); font-weight: 500; color: var(--color-text-primary); }
.astylio-product-card__compare { font-size: var(--astylio-fs-body-sm); color: var(--color-text-muted); text-decoration: line-through; }

.astylio-swatches { display: flex; gap: 6px; }
.astylio-swatch {
	width: 18px; height: 18px; border-radius: 50%;
	border: 1px solid var(--color-border-default);
	background: var(--color-bg-surface);
}
.astylio-swatch--burgundy { background: var(--astylio-burgundy); }
.astylio-swatch--charcoal { background: var(--astylio-charcoal); }
.astylio-swatch--ivory { background: #E7DED2; }
.astylio-swatch--gold { background: var(--astylio-gold); }

.astylio-product-card--compact .astylio-product-card__body { flex-direction: row; justify-content: space-between; align-items: center; }
.astylio-product-card--featured .astylio-product-card__media { box-shadow: var(--astylio-shadow-card); }

/* --------------------------------------------------------------------------
   10. MODAL (spec §37–§40)
   -------------------------------------------------------------------------- */
.astylio-modal {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: var(--astylio-space-4);
	visibility: hidden; opacity: 0;
	transition: opacity var(--astylio-duration-normal) var(--astylio-ease-standard),
	            visibility 0s linear var(--astylio-duration-normal);
}
.astylio-modal.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.astylio-modal__overlay { position: absolute; inset: 0; background: rgba(37, 37, 37, 0.45); }
.astylio-modal__dialog {
	position: relative; z-index: 1;
	width: 100%;
	max-height: calc(100vh - 2 * var(--astylio-space-4));
	overflow-y: auto;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--astylio-radius-lg);
	box-shadow: var(--astylio-shadow-floating);
	transform: translateY(12px);
	transition: transform var(--astylio-duration-normal) var(--astylio-ease-enter);
}
.astylio-modal.is-open .astylio-modal__dialog { transform: translateY(0); }
.astylio-modal__dialog--sm { max-width: 420px; }
.astylio-modal__dialog--md { max-width: 560px; }
.astylio-modal__dialog--lg { max-width: 720px; }
.astylio-modal__dialog--xl { max-width: 900px; }
.astylio-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--astylio-space-4); padding: var(--astylio-space-5) var(--astylio-space-6); border-bottom: 1px solid var(--color-border-subtle); }
.astylio-modal__title { font-size: var(--astylio-fs-heading-md); margin: 0; }
.astylio-modal__content { padding: var(--astylio-space-6); }
.astylio-modal__footer { display: flex; justify-content: flex-end; gap: var(--astylio-space-3); padding: var(--astylio-space-4) var(--astylio-space-6); border-top: 1px solid var(--color-border-subtle); }

/* --------------------------------------------------------------------------
   11. DRAWER (spec §41–§42)
   -------------------------------------------------------------------------- */
.astylio-drawer { position: fixed; z-index: 200; background: var(--color-bg-surface); box-shadow: var(--astylio-shadow-floating); visibility: hidden; transition: transform var(--astylio-duration-normal) var(--astylio-ease-enter), visibility 0s linear var(--astylio-duration-normal); }
.astylio-drawer.is-open { visibility: visible; transition-delay: 0s; }
.astylio-drawer--right { top: 0; right: 0; height: 100%; width: min(420px, 92vw); transform: translateX(100%); }
.astylio-drawer--right.is-open { transform: translateX(0); }
.astylio-drawer--left { top: 0; left: 0; height: 100%; width: min(380px, 92vw); transform: translateX(-100%); }
.astylio-drawer--left.is-open { transform: translateX(0); }
.astylio-drawer--bottom { left: 0; right: 0; bottom: 0; width: 100%; max-height: 70vh; overflow-y: auto; transform: translateY(100%); border-radius: var(--astylio-radius-lg) var(--astylio-radius-lg) 0 0; }
.astylio-drawer--bottom.is-open { transform: translateY(0); }
.astylio-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--astylio-space-5) var(--astylio-space-6); border-bottom: 1px solid var(--color-border-subtle); }
.astylio-drawer__title { font-size: var(--astylio-fs-heading-sm); margin: 0; font-family: var(--astylio-font-ui); font-weight: 500; }
.astylio-drawer__content { padding: var(--astylio-space-6); }
.astylio-drawer__footer { padding: var(--astylio-space-4) var(--astylio-space-6); border-top: 1px solid var(--color-border-subtle); }
.astylio-drawer__list { list-style: none; margin: 0; padding: 0; }
.astylio-drawer__list li { padding: var(--astylio-space-4) 0; border-bottom: 1px solid var(--color-border-subtle); }
.astylio-drawer__list li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   12. MOTION (spec §43–§46)
   -------------------------------------------------------------------------- */
.astylio-anim-fade { animation: astylio-fade var(--astylio-duration-normal) var(--astylio-ease-standard) both; }
.astylio-anim-slide-up { animation: astylio-slide-up var(--astylio-duration-normal) var(--astylio-ease-enter) both; }
.astylio-anim-fade--slow { animation: astylio-fade var(--astylio-duration-slow) var(--astylio-ease-standard) both; }
.astylio-anim-slide-up--slow { animation: astylio-slide-up var(--astylio-duration-slow) var(--astylio-ease-enter) both; }

@keyframes astylio-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes astylio-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.astylio-hover-lift { transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis), box-shadow var(--astylio-duration-normal) var(--astylio-ease-standard); }
.astylio-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--astylio-shadow-card); }

.astylio-zoom-hover { overflow: hidden; }
.astylio-zoom-hover img, .astylio-zoom-hover .astylio-zoom-hover__media { transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis); }
.astylio-zoom-hover:hover img, .astylio-zoom-hover:hover .astylio-zoom-hover__media { transform: scale(1.04); }

/* Demo blocks for motion section */
.astylio-motion-demo {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--astylio-space-5);
}
.astylio-motion-box {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--astylio-space-3);
	min-height: 180px; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
	border-radius: var(--astylio-radius-lg); padding: var(--astylio-space-5); text-align: center;
}
.astylio-motion-box__stage { width: 90px; height: 110px; display: flex; align-items: center; justify-content: center; }
.astylio-motion-box__tile { width: 74px; height: 92px; background: var(--color-brand-primary); border-radius: var(--astylio-radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   13. SHOWCASE SURFACE HELPERS
   -------------------------------------------------------------------------- */
.astylio-showcase-header { padding: var(--astylio-space-13) 0 var(--astylio-space-11); text-align: center; background: linear-gradient(180deg, #F2EAE0 0%, var(--color-bg-page) 100%); }
.astylio-showcase-header .astylio-brand-mark { font-size: clamp(40px, 7vw, 72px); }
.astylio-showcase-header .astylio-overline { letter-spacing: 0.34em; }
.astylio-showcase-header .astylio-tagline { font-family: var(--astylio-font-display); font-style: italic; font-size: var(--astylio-fs-heading-md); color: var(--color-text-secondary); }

.astylio-demo-surface { border: 1px dashed var(--color-border-default); border-radius: var(--astylio-radius-lg); padding: var(--astylio-space-6); background: var(--color-bg-surface); }

.astylio-color-swatch {
	display: flex; flex-direction: column; gap: 6px;
	border: 1px solid var(--color-border-subtle); border-radius: var(--astylio-radius-lg); overflow: hidden;
	background: var(--color-bg-surface);
}
.astylio-color-swatch__chip { height: 72px; }
.astylio-color-swatch__meta { padding: var(--astylio-space-3); font-size: var(--astylio-fs-caption); }
.astylio-color-swatch__meta strong { display: block; font-size: var(--astylio-fs-body-sm); font-weight: 500; }
.astylio-color-swatch__meta code { font-size: 11px; color: var(--color-text-muted); }

.astylio-space-demo { display: flex; align-items: center; gap: var(--astylio-space-3); }
.astylio-space-demo__bar { height: 22px; background: var(--color-accent-gold); border-radius: 3px; opacity: 0.85; }
.astylio-space-demo__label { font-size: var(--astylio-fs-caption); color: var(--color-text-muted); min-width: 120px; }

/* --------------------------------------------------------------------------
   14. REDUCED MOTION (spec §46)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.astylio-ds *,
	.astylio-ds *::before,
	.astylio-ds *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.astylio-product-card:hover .astylio-product-card__media img { transform: none; }
	.astylio-zoom-hover:hover img, .astylio-zoom-hover:hover .astylio-zoom-hover__media { transform: none; }
	.astylio-hover-lift:hover { transform: none; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE (spec §9, §50)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.astylio-ds { --astylio-fs-display-xl: 48px; --astylio-fs-display-lg: 42px; --astylio-fs-display-md: 36px; }
	.astylio-grid--products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.astylio-ds { --astylio-fs-display-xl: 38px; --astylio-fs-display-lg: 33px; --astylio-fs-display-md: 30px; --astylio-fs-heading-xl: 30px; --astylio-fs-heading-lg: 26px; }
	.astylio-grid--products, .astylio-grid--4, .astylio-grid--3, .astylio-grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--astylio-space-4); }
	.astylio-section { padding: var(--astylio-space-8) 0; }
	.astylio-modal { align-items: flex-end; padding: 0; }
	.astylio-modal__dialog { max-height: 92vh; border-radius: var(--astylio-radius-lg) var(--astylio-radius-lg) 0 0; transform: translateY(24px); }
	.astylio-modal.is-open .astylio-modal__dialog { transform: translateY(0); }
	.astylio-showcase-header { padding: var(--astylio-space-9) 0 var(--astylio-space-8); }
}