/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Design System: Buttons v2
   Usage: Bricks builder + Blade templates via <x-button> component
   Naming: xbtn (block) + xbtn--variant (modifier)
   ========================================================================== */

/* Base */
.xbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  gap: var(--spacing-sm);
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  border: none;
  line-height: var(--leading-normal);
  border-radius: var(--radius-full);
}

/* Sizes */
.xbtn--lg {
  height: 56px;
  padding: 0 var(--spacing-lg);
  font-size: var(--text-base);
  width: 100%;
}

.xbtn--md {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--text-sm);
}

.xbtn--sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--text-sm);
}

/* Primary (near-black filled) */
.xbtn--primary {
  background-color: var(--color-neutral);
  color: var(--color-surface);
}

.xbtn--primary:hover,
.xbtn--primary.force-hover {
  background-color: var(--color-neutral-light-1);
}

.xbtn--primary:focus-visible,
.xbtn--primary.force-focus {
  outline: 2px solid var(--color-neutral);
  outline-offset: 2px;
}

.xbtn--primary.is-inactive {
  background-color: var(--color-neutral-light-4);
  color: var(--color-neutral-light-3);
  cursor: default;
}

.xbtn--primary.is-inactive:hover {
  background-color: var(--color-neutral-light-4);
}

/* Secondary (grey outline) */
.xbtn--secondary {
  background-color: transparent;
  color: var(--color-neutral-light-2);
  border: 1px solid var(--color-neutral-light-4);
}

.xbtn--secondary:hover,
.xbtn--secondary.force-hover {
  background-color: var(--color-neutral-light-6);
  border-color: var(--color-neutral-light-2);
}

.xbtn--secondary:focus-visible,
.xbtn--secondary.force-focus {
  outline: 2px solid var(--color-neutral);
  outline-offset: 2px;
}

.xbtn--secondary.is-inactive {
  border-color: var(--color-neutral-light-5);
  color: var(--color-neutral-light-3);
  cursor: default;
}

/* Subtle (DEPRECATED — use xbtn--secondary instead) */
.xbtn--subtle {
  background-color: transparent;
  color: var(--color-neutral-light-2);
  border: 1px solid var(--color-neutral-light-4);
  border-radius: var(--radius-md);
}

.xbtn--subtle:hover,
.xbtn--subtle.force-hover {
  background-color: var(--color-neutral-light-6);
  border-color: var(--color-primary);
}

.xbtn--subtle:focus-visible,
.xbtn--subtle.force-focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.xbtn--subtle.is-inactive {
  color: var(--color-neutral-light-3);
  border-color: var(--color-neutral-light-5);
  cursor: default;
}

/* Brand (filled green — merkkleur CTA) */
.xbtn--brand {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.xbtn--brand:hover,
.xbtn--brand.force-hover {
  background-color: var(--color-primary-dark-1);
}

.xbtn--brand:focus-visible,
.xbtn--brand.force-focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.xbtn--brand.is-inactive {
  background-color: var(--color-primary-light-5);
  color: var(--color-neutral-light-3);
  cursor: default;
}

.xbtn--brand.is-inactive:hover {
  background-color: var(--color-primary-light-5);
}

/* Brand Outline (green outline — merkkleur secundair) */
.xbtn--brand-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.xbtn--brand-outline:hover,
.xbtn--brand-outline.force-hover {
  background-color: var(--color-primary-light-6);
}

.xbtn--brand-outline:focus-visible,
.xbtn--brand-outline.force-focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.xbtn--brand-outline.is-inactive {
  border-color: var(--color-primary-light-5);
  color: var(--color-neutral-light-3);
  cursor: default;
}

/* Brand Light (bright green filled — accent CTA) */
.xbtn--brand-light {
  background-color: var(--color-secondary);
  color: var(--color-neutral);
}

.xbtn--brand-light:hover,
.xbtn--brand-light.force-hover {
  background-color: var(--color-secondary-dark-1);
}

.xbtn--brand-light:focus-visible,
.xbtn--brand-light.force-focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.xbtn--brand-light.is-inactive {
  background-color: var(--color-secondary-light-5);
  color: var(--color-neutral-light-3);
  cursor: default;
}

.xbtn--brand-light.is-inactive:hover {
  background-color: var(--color-secondary-light-5);
}

/* Brand Light Outline (bright green outline) */
.xbtn--brand-light-outline {
  background-color: transparent;
  color: var(--color-secondary-dark-3);
  border: 1px solid var(--color-secondary);
}

.xbtn--brand-light-outline:hover,
.xbtn--brand-light-outline.force-hover {
  background-color: var(--color-secondary-light-6);
}

.xbtn--brand-light-outline:focus-visible,
.xbtn--brand-light-outline.force-focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.xbtn--brand-light-outline.is-inactive {
  border-color: var(--color-secondary-light-5);
  color: var(--color-neutral-light-3);
  cursor: default;
}

/* Danger (red) */
.xbtn--danger {
  background-color: var(--color-error);
  color: var(--color-surface);
}

.xbtn--danger:hover,
.xbtn--danger.force-hover {
  background-color: var(--color-error-strong);
}

.xbtn--danger:focus-visible,
.xbtn--danger.force-focus {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.xbtn--danger.is-inactive {
  background-color: var(--color-error-soft);
  color: var(--color-text-subtle);
  cursor: default;
}

/* Link (transparent, text-only) */
.xbtn--link {
  background-color: transparent;
  color: var(--color-primary);
  padding: 0;
  border: none;
}

.xbtn--link:hover,
.xbtn--link.force-hover {
  text-decoration: underline;
}

.xbtn--link:focus-visible,
.xbtn--link.force-focus {
  outline: 2px solid var(--color-neutral);
  outline-offset: 2px;
}

.xbtn--link.is-inactive {
  color: var(--color-text-subtle);
  cursor: default;
}

/* Card-mobile: card look on mobile, inherits parent on desktop */
.xbtn--card-mobile {
  white-space: nowrap;
}

@media (max-width: 639px) {
  .xbtn--link.xbtn--card-mobile {
    padding: var(--spacing-sm);
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-md);
  }
}

/* Icon (circular, minimum hit area) */
.xbtn--icon {
  border-radius: var(--radius-full);
  padding: var(--spacing-xs);
  min-width: 40px;
  min-height: 40px;
  background-color: transparent;
  color: var(--color-text-muted);
}

.xbtn--icon:hover,
.xbtn--icon.force-hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

.xbtn--icon:focus-visible,
.xbtn--icon.force-focus {
  outline: 2px solid var(--color-neutral);
  outline-offset: 2px;
}

.xbtn--icon.is-inactive {
  color: var(--color-border-muted);
  cursor: default;
}

/* Social (icon-only — login providers) */
.xbtn--social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.xbtn--social:hover,
.xbtn--social.force-hover {
  background-color: var(--color-surface-alt);
}

.xbtn--social:focus-visible,
.xbtn--social.force-focus {
  outline: 2px solid var(--color-neutral);
  outline-offset: 2px;
}

.xbtn--social:disabled,
.xbtn--social.is-inactive {
  opacity: 0.5;
  cursor: default;
}

/* Loading state */
.xbtn.is-loading {
  cursor: wait;
  pointer-events: none;
}

/* ==========================================================================
   Design System: Form Controls
   Usage: x-input, x-select, x-textarea, x-checkbox, x-radio-group, x-file-input
   ========================================================================== */

/* Base form control (shared by input, select, textarea) */
.form-control {
  width: 100%;
  height: 3.25rem;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.form-control::placeholder {
  color: var(--color-text-subtle);
}

body.bricks-is-frontend .form-control:focus,
body.bricks-is-frontend .form-control:focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: none;
}

/* Error state */
.form-control--error {
  border-color: var(--color-error);
}

.form-control--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px oklch(0.676 0.217 11.9 / 0.15);
}

/* Valid / success state (green border for confirmed fields) */
.form-control--valid {
  border-color: var(--color-primary);
}

/* Disabled / readonly state */
.form-control--disabled {
  background-color: var(--color-neutral-t-6);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

/* Textarea override (not pill, auto height) */
textarea.form-control {
  height: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  resize: vertical;
}

/* File input override */
input[type="file"].form-control {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px var(--spacing-xs);
}

/* Select chevron (replaces inline style SVG) */
.form-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%23757270' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

/* Form text elements */
.form-label {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-light-1);
}

.form-error {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-error);
}

.form-hint {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-subtle);
}

/* Checkbox & radio accent color */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

/* ==========================================================================
   Design System: Typography
   ========================================================================== */

/* Headings */
.heading-1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.heading-2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.heading-3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.heading-4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.heading-5 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.heading-6 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

/* Body Text */
.body-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.body-text-lg {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.body-text-sm {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Labels */
.label {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-light-1);
}

.label-required::after {
  content: ' *';
  color: var(--color-error);
}

.label-optional::after {
  content: ' (optioneel)';
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-normal);
}

/* Utilities */
.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-subtle);
}

/* ==========================================================================
   Design System: Layout & Containers
   ========================================================================== */

/* Cards */
.card {
  padding: var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.card-border {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.card-bordered {
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.card-elevated {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

/* Sections */
.section {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.section-padded {
  padding: var(--spacing-3xl) var(--spacing-md);
}

/* Dividers */
.divider {
  border-top: 1px solid var(--color-border);
}

.divider-vertical {
  border-left: 1px solid var(--color-border);
}

/* Containers */
.container-narrow {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.container-wide {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Design System: Icons
   ========================================================================== */

/* Base Icon */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Size Variants */
.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

/* Color Variants */
.icon-primary {
  color: var(--color-primary);
}

.icon-secondary {
  color: var(--color-secondary);
}

.icon-neutral {
  color: var(--color-text-muted);
}

.icon-error {
  color: var(--color-error);
}

.icon-success {
  color: var(--color-success);
}

/* ==========================================================================
   Design System: Links
   ========================================================================== */

.link {
  color: var(--color-link);
  transition: color var(--duration-fast);
}

.link:hover {
  color: var(--color-link-hover);
}

.link-primary {
  color: var(--color-link);
  text-decoration: underline;
  transition: color var(--duration-fast);
}

.link-primary:hover {
  color: var(--color-link-hover);
}

.link-secondary {
  color: var(--color-secondary);
  transition: color var(--duration-fast);
}

.link-secondary:hover {
  color: var(--color-secondary-dark-1);
}

.link-underline {
  text-decoration: underline;
}

.link-underline:hover {
  text-decoration: none;
}

.link-no-underline {
  text-decoration: none;
}

.link-no-underline:hover {
  text-decoration: underline;
}

.link-muted {
  color: var(--color-text-subtle);
  transition: color var(--duration-fast);
}

.link-muted:hover {
  color: var(--color-text-muted);
}

.link-danger {
  color: var(--color-error);
  text-decoration: underline;
  transition: color var(--duration-fast);
}

.link-danger:hover {
  color: var(--color-error-strong);
}

/* ==========================================================================
   Design System: Alerts & Notifications
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid;
}

.alert-success {
  padding: var(--spacing-md);
  background-color: var(--color-success-soft);
  border: 1px solid var(--color-success);
  color: var(--color-success-strong);
  border-radius: var(--radius-md);
}

.alert-error {
  padding: var(--spacing-md);
  background-color: var(--color-error-soft);
  border: 1px solid var(--color-error);
  color: var(--color-error-strong);
  border-radius: var(--radius-md);
}

.alert-warning {
  padding: var(--spacing-md);
  background-color: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  color: var(--color-warning-strong);
  border-radius: var(--radius-md);
}

.alert-info {
  padding: var(--spacing-md);
  background-color: var(--color-info-soft);
  border: 1px solid var(--color-info);
  color: var(--color-info-strong);
  border-radius: var(--radius-md);
}

.alert-caution {
  padding: var(--spacing-md);
  background-color: var(--color-caution-soft);
  border: 1px solid var(--color-caution);
  color: var(--color-caution-strong);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Design System: Interactive States
   ========================================================================== */

/* Loading state (extended from buttons) */
.is-loading {
  cursor: wait;
  opacity: 0.75;
}

/* Disabled state */
.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inactive state (extended from buttons) */
.is-inactive {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Active state (voor tabs, links, menu items) */
.is-active {
  background-color: var(--color-primary-light-6);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* Spin animation (loading spinners) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Selected state */
.is-selected {
  background-color: var(--color-primary-light-6);
  border-color: var(--color-primary);
}

/* Expanded/Collapsed states (voor accordions, dropdowns) */
.is-expanded {
  display: block;
}

.is-collapsed {
  display: none;
}

/* Hidden state (met aria support) */
.is-hidden {
  display: none;
}

/* Visible state */
.is-visible {
  display: block;
}

/* ==========================================================================
   Design System: Badges & Tags
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-weight-medium);
}

.badge-primary {
  background-color: var(--color-primary-light-6);
  color: var(--color-primary);
}

.badge-secondary {
  background-color: var(--color-secondary-light-6);
  color: var(--color-success-strong);
}

.badge-success {
  background-color: var(--color-success-soft);
  color: var(--color-success-strong);
}

.badge-error {
  background-color: var(--color-error-soft);
  color: var(--color-error-strong);
}

.badge-warning {
  background-color: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.badge-info {
  background-color: var(--color-info-soft);
  color: var(--color-info-strong);
}

.badge-neutral {
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* Tags (removable badges) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

.tag-removable {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

/* ==========================================================================
   Design System: Modals & Overlays
   ========================================================================== */

/* Modal backdrop/overlay */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: oklch(0.222 0.011 60.8 / 0.5);
  z-index: var(--z-overlay);
}

/* Modal container */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

/* Modal content box */
.modal-content {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Modal header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

/* Modal body */
.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
}

/* Modal footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* Modal sizes */
.modal-sm .modal-content {
  max-width: 24rem;
}

.modal-lg .modal-content {
  max-width: 42rem;
}

.modal-xl .modal-content {
  max-width: 56rem;
}

.modal-full .modal-content {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}

/* ==========================================================================
   Design System: Navigation & Menus
   ========================================================================== */

/* Base Navigation Link */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-muted);
  transition: color var(--duration-fast), background-color var(--duration-fast);
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

/* Mobile Slide Menu */
.slide-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  visibility: hidden;
}

.slide-menu-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: oklch(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity var(--duration-slow);
}

.slide-menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 24rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-2xl);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) ease-out;
  display: flex;
  flex-direction: column;
}

.slide-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-surface-alt);
}

.slide-menu-footer {
  border-top: 1px solid var(--color-surface-alt);
  padding: var(--spacing-md);
}

.slide-menu-footer > * + * {
  margin-top: var(--spacing-xs);
}

.slide-menu--open {
  visibility: visible;
}

.slide-menu-overlay--open {
  opacity: 1;
}

.slide-menu-panel--open {
  transform: translateX(0);
}

.slide-menu-close {
  padding: var(--spacing-xs);
  margin-right: calc(-1 * var(--spacing-xs));
  color: var(--color-text-subtle);
  transition: color var(--duration-fast);
}

.slide-menu-close:hover {
  color: var(--color-text);
}

.slide-menu-back {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.slide-menu-back:hover {
  color: var(--color-primary);
}

.slide-menu-section {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-surface-alt);
}

.slide-menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide-menu-items > li + li {
  border-top: 1px solid var(--color-surface-alt);
}

/* Menu Item (herbruikbaar voor slide-menu en dropdowns) */
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  transition: background-color var(--duration-fast);
}

.menu-item:hover {
  background-color: var(--color-surface-alt);
}

.menu-item-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.menu-item-thumbnail {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background-color: var(--color-surface-alt);
}

.menu-item-thumbnail-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
}

.menu-item-title {
  display: block;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.menu-item-subtitle {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-subtle);
}

.menu-item-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-text-subtle);
}

/* Area Tabs (Binnen/Buiten Toggle) */
.area-tabs {
  display: inline-flex;
  gap: var(--spacing-2xs);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  padding: var(--spacing-2xs);
}

.area-tab {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-normal);
}

.area-tab-active {
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.area-tab-inactive {
  color: var(--color-text-muted);
}

.area-tab-inactive:hover {
  color: var(--color-text);
  background-color: oklch(1 0 0 / 0.5);
}

/* Dropdown (Account, etc.) */
.dropdown {
  position: relative;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--duration-normal), background-color var(--duration-normal);
}

.dropdown-trigger:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.dropdown-panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--spacing-xs);
  width: 288px;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-surface-alt);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--duration-normal);
  z-index: var(--z-modal);
}

.dropdown-panel-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-surface-alt);
}

.dropdown-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-surface-alt);
  background-color: var(--color-surface-alt);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dropdown-label {
  display: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 1024px) {
  .dropdown-label {
    display: inline-block;
  }
}

.dropdown-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-normal);
}

.dropdown-logout {
  display: block;
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.dropdown-logout:hover {
  color: var(--color-error);
}

.dropdown-login-button {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background-color: var(--color-success);
  color: white;
  text-align: center;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-normal);
}

.dropdown-login-button:hover {
  opacity: 0.9;
}

.dropdown-register-link {
  color: var(--color-primary);
  transition: text-decoration var(--duration-fast);
}

.dropdown-register-link:hover {
  text-decoration: underline;
}

/* Account Dropdown specifiek */
.account-indicator {
  position: relative;
}

.account-indicator-active {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background-color: var(--color-success);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
}

.account-indicator-inactive {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background-color: var(--color-warning);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Account Page Layout */
.vd-account-page {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: var(--spacing-xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

@media (max-width: 768px) {
  .vd-account-page {
    grid-template-columns: 1fr;
  }
}

.vd-account-page__nav {
  position: sticky;
  top: var(--spacing-lg);
  align-self: start;
}

@media (max-width: 768px) {
  .vd-account-page__nav {
    position: static;
  }
}

.vd-account-page__content {
  min-width: 0;
}

/* Account Navigation Menu */
.vd-account-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.vd-account-nav__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.vd-account-nav__item:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}

.vd-account-nav__item--active {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.vd-account-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.vd-account-nav__children {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding-left: var(--spacing-xl);
  margin-top: var(--spacing-2xs);
}

.vd-account-nav__children .vd-account-nav__children {
  padding-left: var(--spacing-lg);
}

.vd-account-nav__section {
  margin-bottom: var(--spacing-xs);
}

.vd-account-nav__logout {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-subtle);
}

/* Social Accounts */
.vd-social-accounts {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.vd-social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-border-muted);
  transition: color var(--duration-normal);
}

.vd-social-icon--linked {
  color: var(--color-text);
}

/* Search Flyout */
.search-flyout {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: var(--z-modal);
  background-color: var(--color-surface);
  transform: translateY(-100%);
  transition: transform var(--duration-slow) ease-out;
}

.search-flyout-open {
  transform: translateY(0);
}

.search-input {
  width: 100%;
  height: 48px;
  padding: 0 80px 0 var(--spacing-md);
  font-size: var(--text-lg);
  color: var(--color-text);
  border: 0;
  border-bottom: 2px solid var(--color-border);
  background-color: transparent;
  outline: none;
  transition: border-color var(--duration-normal);
}

.search-input::placeholder {
  color: var(--color-text-subtle);
}

.search-input:focus {
  border-color: var(--color-neutral);
}

@media (min-width: 1024px) {
  .search-input {
    height: 56px;
    font-size: var(--text-xl);
  }
}

.search-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: oklch(0 0 0 / 0.3);
  z-index: var(--z-overlay);
  transition: opacity var(--duration-slow);
  opacity: 0;
  pointer-events: none;
}

.search-backdrop-open {
  opacity: 1;
  pointer-events: auto;
}

.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--duration-normal);
}

.search-trigger:hover {
  color: var(--color-error);
}

.search-mobile-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
}

@media (min-width: 1024px) {
  .search-mobile-header {
    display: none;
  }
}

.search-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

@media (min-width: 1024px) {
  .search-result-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
  }
}

.search-result-image {
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-alt);
  margin-bottom: var(--spacing-sm);
}

.search-result-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: color var(--duration-fast);
}

.search-result-card:hover .search-result-title {
  color: var(--color-primary);
}

.search-result-subtitle {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-top: 2px;
}

.search-result-price {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-top: var(--spacing-2xs);
}

/* Category Browser (IKEA-style horizontal scroll) */
.category-browser {
  position: relative;
}

.category-browser-scroll {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-md);
  margin: 0 -16px;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-browser-scroll::-webkit-scrollbar {
  display: none;
}

.category-card {
  flex-shrink: 0;
  width: 128px;
  scroll-snap-align: start;
}

.category-card-thumbnail {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-alt);
  transition: all var(--duration-normal);
}

.category-card:hover .category-card-thumbnail {
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-surface);
}

.category-card-title {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-text);
  transition: color var(--duration-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-card:hover .category-card-title {
  color: var(--color-primary);
}

.category-back-card {
  flex-shrink: 0;
  width: 128px;
  scroll-snap-align: start;
  cursor: pointer;
}

.category-back-content {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border: 2px dashed var(--color-text-subtle);
  transition: border-color var(--duration-normal), background-color var(--duration-normal);
}

.category-back-card:hover .category-back-content {
  border-color: var(--color-primary);
  background-color: oklch(0.366 0.087 149.7 / 0.05);
}

.browser-nav {
  display: none;
  align-items: center;
  gap: var(--spacing-xs);
}

@media (min-width: 768px) {
  .browser-nav {
    display: flex;
  }
}

/* Browser Navigation Buttons */
.browser-nav-button {
  padding: var(--spacing-xs);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.browser-nav-button:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.browser-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Design System: Product Components
   ========================================================================== */

/* Product Grid */
.product-grid {
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .product-grid {
    gap: var(--spacing-lg);
  }
}

.product-grid--cols-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .product-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-grid--cols-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .product-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-grid--cols-4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .product-grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-grid--cols-5 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .product-grid--cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid--cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .product-grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.product-grid--cols-6 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .product-grid--cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid--cols-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .product-grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Product Slider */
.product-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.product-slider-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .product-slider-title {
    font-size: var(--text-3xl);
  }
}

.product-slider-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.product-slider-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-subtle);
  transition: color var(--duration-normal), border-color var(--duration-normal);
}

.product-slider-button:hover {
  color: var(--color-text);
  border-color: var(--color-text-subtle);
}

.product-slider-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.product-slider-track-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 -16px;
  padding: 0 16px;
}

.product-slider-track {
  display: flex;
  gap: var(--spacing-md);
  transition: transform var(--duration-extra-slow, 500ms) ease-out;
}

.product-slider-item {
  flex-shrink: 0;
  width: 280px;
}

@media (min-width: 768px) {
  .product-slider-item {
    width: 320px;
  }
}

.product-slider-progress {
  margin-top: var(--spacing-lg);
  height: 4px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.product-slider-progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-extra-slow, 500ms);
}

/* Hamburger Button */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--duration-normal), background-color var(--duration-normal);
}

.hamburger:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

@media (min-width: 1024px) {
  .hamburger {
    display: none;
  }
}

/* Cart Icon with Badge */
.vd-cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--duration-normal), background-color var(--duration-normal);
}

.vd-cart-icon:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.vd-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  padding: 0 var(--spacing-2xs);
}

/* ==========================================================================
   Design System: Chat Component
   ========================================================================== */

/* Chat Container */
.vd-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-surface);
}

/* Chat Header */
.vd-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.vd-chat__header-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.vd-chat__header-icon {
  font-size: var(--text-xl);
  line-height: 1;
}

.vd-chat__header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.vd-chat__header-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--duration-normal), background-color var(--duration-normal);
}

.vd-chat__header-btn:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light-6);
}

/* Chat Messages Container */
.vd-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.vd-chat__messages > * + * {
  margin-top: var(--spacing-sm);
}

/* Welcome Message (empty state) */
.vd-chat__welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 var(--spacing-md);
}

.vd-chat__welcome p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Chat Message */
.vd-chat__message {
  display: flex;
}

/* User Message (right-aligned, primary color) */
.vd-chat__message--user {
  justify-content: flex-end;
}

.vd-chat__message--user .vd-chat__message-content {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border-radius: 16px;
  border-bottom-right-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: 80%;
}

/* Bot Message (left-aligned, neutral background) */
.vd-chat__message--assistant,
.vd-chat__message--bot {
  justify-content: flex-start;
}

.vd-chat__message--assistant .vd-chat__message-content,
.vd-chat__message--bot .vd-chat__message-content {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  border-radius: 16px;
  border-bottom-left-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: 80%;
}

/* Message Content */
.vd-chat__message-content {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Typing Indicator */
.vd-chat__typing {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-radius: 16px;
  border-bottom-left-radius: var(--radius-sm);
  max-width: max-content;
}

.vd-chat__typing span {
  width: 8px;
  height: 8px;
  background-color: var(--color-text-subtle);
  border-radius: var(--radius-full);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.vd-chat__typing span:nth-child(1) {
  animation-delay: 0ms;
}

.vd-chat__typing span:nth-child(2) {
  animation-delay: var(--duration-fast);
}

.vd-chat__typing span:nth-child(3) {
  animation-delay: var(--duration-slow);
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

/* Chat Input Form */
.vd-chat__form {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-md);
  background-color: var(--color-surface);
}

.vd-chat__input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.vd-chat__input {
  flex: 1;
  background-color: transparent;
  border: 0;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.vd-chat__input::placeholder {
  color: var(--color-text-subtle);
}

.vd-chat__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Send Button */
.vd-chat__send {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-primary);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-normal);
}

.vd-chat__send:hover {
  background-color: var(--color-primary-dark-1);
}

.vd-chat__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vd-chat__send-text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* Chat Icons */
.vd-chat__icon {
  display: inline-block;
  flex-shrink: 0;
}

.vd-chat__icon--send {
  width: 18px;
  height: 18px;
}

.vd-chat__icon--refresh {
  width: 16px;
  height: 16px;
}

/* Error Message */
.vd-chat__error {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-error-soft);
  border-left: 4px solid var(--color-error);
  color: var(--color-error-strong);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Design System: Loyalty Components
   ========================================================================== */

/* Loyalty Balance Display */
.loyalty-balance {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.loyalty-balance-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.loyalty-balance-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.loyalty-balance-suffix {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Loyalty Points (inline display) */
.loyalty-points {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.loyalty-points-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.loyalty-points-value {
  font-weight: var(--font-weight-semibold);
}

/* Loyalty Currency (converteerd naar euro) */
.loyalty-currency {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.loyalty-currency-approx {
  font-weight: var(--font-weight-normal);
}

/* Loyalty Level/Tier Container */
.loyalty-level {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* Loyalty Level Badge (icon or graphic) */
.loyalty-level-badge {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

/* Loyalty Level: Bronze */
.loyalty-level-bronze {
  background-color: oklch(0.666 0.131 61.3 / 0.1);
  color: var(--color-loyalty-bronze);
  border: 1px solid oklch(0.666 0.131 61.3 / 0.2);
}

.loyalty-level-bronze .loyalty-level-badge {
  background-color: var(--color-loyalty-bronze);
  color: var(--color-surface);
}

/* Loyalty Level: Silver */
.loyalty-level-silver {
  background-color: oklch(0.808 0 0 / 0.1);
  color: var(--color-loyalty-silver-text);
  border: 1px solid oklch(0.808 0 0 / 0.2);
}

.loyalty-level-silver .loyalty-level-badge {
  background-color: var(--color-loyalty-silver);
  color: var(--color-neutral);
}

/* Loyalty Level: Gold */
.loyalty-level-gold {
  background-color: oklch(0.887 0.182 95.3 / 0.1);
  color: var(--color-loyalty-gold-text);
  border: 1px solid oklch(0.887 0.182 95.3 / 0.2);
}

.loyalty-level-gold .loyalty-level-badge {
  background-color: var(--color-loyalty-gold);
  color: var(--color-neutral);
}

/* Loyalty Level: Platinum */
.loyalty-level-platinum {
  background-color: oklch(0.919 0.003 84.6 / 0.1);
  color: var(--color-loyalty-platinum-text);
  border: 1px solid oklch(0.919 0.003 84.6 / 0.3);
}

.loyalty-level-platinum .loyalty-level-badge {
  background: linear-gradient(to bottom right, var(--color-loyalty-platinum), var(--color-loyalty-platinum-dark));
  color: var(--color-neutral);
}

/* Progress Bar naar Next Level */
.loyalty-progress > * + * {
  margin-top: var(--spacing-xs);
}

.loyalty-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.loyalty-progress-current {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.loyalty-progress-next {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.loyalty-progress-bar {
  height: 8px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loyalty-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark-1));
  border-radius: var(--radius-full);
  transition: all 500ms;
}

/* Tier Progress met Level Indicator */
.loyalty-tier-progress {
  position: relative;
  height: 12px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: visible;
}

.loyalty-tier-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: all 500ms;
}

.loyalty-tier-progress-fill--bronze {
  background: linear-gradient(to right, var(--color-loyalty-bronze), var(--color-loyalty-bronze-dark));
}

.loyalty-tier-progress-fill--silver {
  background: linear-gradient(to right, var(--color-loyalty-silver), var(--color-loyalty-silver-dark));
}

.loyalty-tier-progress-fill--gold {
  background: linear-gradient(to right, var(--color-loyalty-gold), var(--color-loyalty-gold-dark));
}

.loyalty-tier-progress-fill--platinum {
  background: linear-gradient(to right, var(--color-loyalty-platinum), var(--color-loyalty-platinum-dark));
}

/* Rewards/Benefits List */
.loyalty-reward {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

.loyalty-reward-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light-6);
  color: var(--color-primary);
}

.loyalty-reward-content {
  flex: 1;
  min-width: 0;
}

.loyalty-reward-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.loyalty-reward-description {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.loyalty-reward-locked {
  opacity: 0.5;
}

.loyalty-reward-locked .loyalty-reward-icon {
  background-color: var(--color-surface-alt);
  color: var(--color-text-subtle);
}

/* Benefits List (compact) */
.loyalty-benefit-list > * + * {
  margin-top: var(--spacing-xs);
}

.loyalty-benefit-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.loyalty-benefit-icon {
  width: 16px;
  height: 16px;
  color: var(--color-success);
  flex-shrink: 0;
}

.loyalty-benefit-icon--locked {
  color: var(--color-border-muted);
}

/* Point History/Transactions */
.loyalty-history > * + * {
  margin-top: var(--spacing-sm);
}

.loyalty-transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-surface-alt);
}

.loyalty-transaction:last-child {
  border-bottom: 0;
}

.loyalty-transaction-info {
  flex: 1;
  min-width: 0;
}

.loyalty-transaction-type {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.loyalty-transaction-date {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: 2px;
}

.loyalty-transaction-points {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.loyalty-transaction-points--earned {
  color: var(--color-success);
}

.loyalty-transaction-points--spent {
  color: var(--color-error);
}

.loyalty-transaction-points--expired {
  color: var(--color-text-subtle);
}

/* Tier Benefits Card */
.loyalty-tier-card {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 2px solid;
  transition: all var(--duration-normal);
}

.loyalty-tier-card--bronze {
  background-color: oklch(0.666 0.131 61.3 / 0.05);
  border-color: oklch(0.666 0.131 61.3 / 0.2);
}

.loyalty-tier-card--bronze:hover {
  border-color: oklch(0.666 0.131 61.3 / 0.4);
}

.loyalty-tier-card--silver {
  background-color: oklch(0.808 0 0 / 0.05);
  border-color: oklch(0.808 0 0 / 0.2);
}

.loyalty-tier-card--silver:hover {
  border-color: oklch(0.808 0 0 / 0.4);
}

.loyalty-tier-card--gold {
  background-color: oklch(0.887 0.182 95.3 / 0.05);
  border-color: oklch(0.887 0.182 95.3 / 0.2);
}

.loyalty-tier-card--gold:hover {
  border-color: oklch(0.887 0.182 95.3 / 0.4);
}

.loyalty-tier-card--platinum {
  background-color: oklch(0.919 0.003 84.6 / 0.05);
  border-color: oklch(0.919 0.003 84.6 / 0.3);
}

.loyalty-tier-card--platinum:hover {
  border-color: oklch(0.919 0.003 84.6 / 0.5);
}

.loyalty-tier-card--current {
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-surface);
}

.loyalty-tier-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.loyalty-tier-card-name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.loyalty-tier-card-threshold {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.loyalty-tier-card-benefits > * + * {
  margin-top: var(--spacing-xs);
}

/* Referral Component */
.loyalty-referral {
  padding: var(--spacing-lg);
  background: linear-gradient(to bottom right, var(--color-primary-light-6), var(--color-primary-light-5));
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary-light-4);
}

.loyalty-referral-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.loyalty-referral-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.loyalty-referral-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.loyalty-referral-code {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary-light-4);
}

.loyalty-referral-code-value {
  flex: 1;
  font-family: monospace;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.loyalty-referral-code-copy {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.loyalty-referral-code-copy:hover {
  color: var(--color-primary);
}

.loyalty-referral-description {
  margin-top: var(--spacing-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Loyalty Alert/Notification */
.loyalty-alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid;
}

.loyalty-alert--level-upgrade {
  background-color: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-strong);
}

.loyalty-alert--points-earned {
  background-color: var(--color-info-soft);
  border-color: var(--color-info);
  color: var(--color-info-strong);
}

.loyalty-alert--points-expiring {
  background-color: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-strong);
}

.loyalty-alert--birthday {
  background: linear-gradient(to bottom right, var(--color-primary-light-6), var(--color-primary-light-5));
  border-color: var(--color-primary);
  color: var(--color-primary-dark-3);
}

/* Earn Rate Multiplier Badge */
.loyalty-multiplier {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: 2px var(--spacing-xs);
  background-color: var(--color-success-soft);
  color: var(--color-success-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

.loyalty-multiplier-icon {
  width: 12px;
  height: 12px;
}

/* Loyalty Dashboard Card */
.loyalty-dashboard > * + * {
  margin-top: var(--spacing-lg);
}

.loyalty-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.loyalty-dashboard-stat {
  padding: var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.loyalty-dashboard-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.loyalty-dashboard-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-top: var(--spacing-2xs);
}

.loyalty-dashboard-stat--highlight {
  background-color: var(--color-primary-light-6);
  border: 1px solid var(--color-primary-light-4);
}

.loyalty-dashboard-stat--highlight .loyalty-dashboard-stat-value {
  color: var(--color-primary);
}

/* ==========================================================================
   Design System: Field Actions & Indicators
   Usage: Inline actions inside form fields (password toggle, checkmarks)
   ========================================================================== */

/* Field Action (interactive, e.g. "Toon/Verberg" password toggle) */
.field-action {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--color-primary);
  transition: color var(--duration-fast);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.field-action:hover {
  color: var(--color-link-hover);
}

.field-action:focus-visible {
  outline: 2px solid var(--color-neutral);
  outline-offset: 2px;
}

/* ==========================================================================
   Design System: Action Buttons (Rectangular)
   Usage: Cancel buttons, secondary actions in modal footers and action rows
   ========================================================================== */

.action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  cursor: pointer;
}

.action-secondary:hover {
  background-color: var(--color-surface-alt);
}

.action-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Design System: Toggle Pills
   Usage: Segment-style toggle buttons (e.g. Thuis/Werk/Anders)
   ========================================================================== */

.toggle-pill {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  cursor: pointer;
}

.toggle-pill:hover {
  border-color: var(--color-neutral);
}

.toggle-pill--active {
  background-color: var(--color-neutral);
  border-color: var(--color-neutral);
  color: var(--color-surface);
}

.toggle-pill--active:hover {
  background-color: var(--color-neutral-light-1);
  border-color: var(--color-neutral-light-1);
}

/* ==========================================================================
   Design System: Selectable Cards
   Usage: Clickable cards with selected state (e.g. address picker)
   ========================================================================== */

/* Add Card (dashed placeholder for adding new items) */
.card-add {
  padding: var(--spacing-sm);
  border: 1px dashed var(--color-border-muted);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  color: var(--color-text-subtle);
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
  cursor: pointer;
}

.card-add:hover {
  color: var(--color-text-muted);
  border-color: var(--color-text-subtle);
}

.card-add--active {
  border-color: var(--color-neutral);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

/* Selectable Card (clickable card with selected state) */
.card-selectable {
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  position: relative;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
  cursor: pointer;
}

.card-selectable:hover {
  border-color: var(--color-border-muted);
}

.card-selectable--active {
  border-color: var(--color-neutral);
  background-color: var(--color-surface-alt);
}

/* ==========================================================================
   Cart Items (Figma-based cart page block)
   ========================================================================== */

.vd-cart-items {
  font-family: var(--font-sans);
}

.vd-cart-items__surface {
  background-color: var(--color-surface);
}

.vd-cart-items__list {
  /* divide-y divide-neutral-light-5 */
}

.vd-cart-items__list > * + * {
  border-top: 1px solid var(--color-border);
}

.vd-cart-items__item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
}

.vd-cart-items__thumb {
  height: 88px;
  width: 88px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-alt);
  flex-shrink: 0;
}

.vd-cart-items__name {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
  transition: color var(--duration-fast);
}

.vd-cart-items__name:hover {
  color: var(--color-primary);
}

.vd-cart-items__subtitle {
  margin-top: var(--spacing-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  line-height: var(--leading-normal);
}

.vd-cart-items__price {
  margin-top: var(--spacing-xs);
  font-size: var(--text-2xl);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.vd-cart-items__remove {
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: color var(--duration-fast);
}

.vd-cart-items__remove:hover {
  color: var(--color-error);
}

.vd-cart-items__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  padding: var(--spacing-2xs);
}

.vd-cart-items__qty-btn {
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: background-color var(--duration-fast);
}

.vd-cart-items__qty-btn:hover {
  background-color: var(--color-surface-muted);
}

.vd-cart-items__qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vd-cart-items__qty-value {
  min-width: 20px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.vd-cart-items__summary {
  padding: var(--spacing-lg) var(--spacing-md);
}

.vd-cart-items__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-lg);
  padding: var(--spacing-xs) 0;
}

.vd-cart-items__summary-row--total {
  font-size: var(--text-3xl);
  line-height: var(--leading-normal);
  color: var(--color-text);
  padding-top: var(--spacing-sm);
}

.vd-cart-items__divider {
  border-top: 1px dashed var(--color-border);
  margin: var(--spacing-xs) 0;
}

.vd-cart-items__continue {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral);
  color: var(--color-surface);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  transition: background-color var(--duration-fast);
}

.vd-cart-items__continue:hover {
  background-color: var(--color-neutral-dark-1);
}

.vd-cart-items__continue-secondary {
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.vd-cart-items__continue-secondary:hover {
  color: var(--color-text);
}

.vd-cart-items__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-md);
  text-align: center;
}

.vd-cart-items__mini-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-cart-overlay);
  background-color: oklch(0 0 0 / 0.4);
}

.vd-cart-items__surface--mini {
  background-color: var(--color-surface);
}

.vd-cart-items__mini-header {
  display: none;
}

.vd-cart-items__mini-close {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.vd-cart-items__mini-close:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .vd-cart-items__surface--mini {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-cart);
    width: min(420px, 100vw);
    max-width: 420px;
    overflow-y: auto;
    border-left: 1px solid var(--color-border);
    box-shadow: 0 12px 36px oklch(0 0 0 / 0.12);
    transform: translateX(100%);
    transition: transform var(--duration-slow) ease;
  }

  .vd-cart-items__surface--mini.vd-cart-items__surface--open {
    transform: translateX(0);
  }

  .vd-cart-items__mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md);
  }
}

/* ==========================================================================
   Blade Component Classes
   Usage: Semantic classes for Blade components (replaces Tailwind utilities)
   WindPress scant NIET Blade views — daarom semantische classes i.p.v. utilities
   ========================================================================== */

/* Screen Reader Only (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Button: full width modifier */
.xbtn--full {
  width: 100%;
}

/* Form Field Wrapper (form-field.blade.php) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label.is-error {
  color: var(--color-error);
}

.form-required {
  color: var(--color-error);
}

/* Form Control: with action button (password toggle wrapper) */
.form-control--with-action {
  padding-right: 5rem;
}

.field-action-wrapper {
  position: relative;
}

/* File input button styling */
.form-file::file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-neutral);
  color: var(--color-surface);
  border-radius: var(--radius-full);
  cursor: pointer;
}

/* Character count (textarea) */
.form-count {
  margin-top: 0.25rem;
  text-align: right;
}

/* Checkbox (checkbox.blade.php) */
.form-check {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.form-check-label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border-muted);
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}

.form-check-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-check-input.is-error {
  border-color: var(--color-error);
}

.form-check-input.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form-check-text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-neutral);
}

.form-check-text.is-error {
  color: var(--color-error);
}

.form-check-text.is-disabled {
  opacity: 0.5;
}

.form-check .form-error,
.form-check .form-hint {
  margin-left: 2rem;
}

/* Radio Group (radio-group.blade.php) */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  border: 0;
  padding: 0;
  margin: 0;
}

.form-radio-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-radio-options--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.form-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.form-radio-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border-muted);
  transition: border-color var(--duration-fast);
  cursor: pointer;
  flex-shrink: 0;
}

.form-radio-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-radio-input.is-error {
  border-color: var(--color-error);
}

.form-radio-input.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form-radio-text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral);
}

.form-radio-text.is-error {
  color: var(--color-error);
}

.form-radio-text.is-disabled {
  opacity: 0.5;
}

/* Alert: rich layout (icon, title, dismiss) */
.alert__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-weight: var(--font-weight-semibold);
}

.alert__dismiss {
  flex-shrink: 0;
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: background-color var(--duration-fast);
}

.alert__dismiss:hover {
  background-color: oklch(0 0 0 / 0.1);
}

.alert__dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0;
}

/* Card Component (card.blade.php — structured: header/body/footer) */
.xcard {
  background-color: var(--color-surface);
  overflow: hidden;
}

.xcard--bordered {
  border: 1px solid var(--color-border-muted);
}

.xcard--shadow {
  box-shadow: var(--shadow-md);
}

.xcard--rounded-none { border-radius: 0; }
.xcard--rounded-sm { border-radius: var(--radius-sm); }
.xcard--rounded-md { border-radius: var(--radius-md); }
.xcard--rounded-lg { border-radius: var(--radius-lg); }
.xcard--rounded-xl { border-radius: var(--radius-xl); }
.xcard--rounded-2xl { border-radius: calc(var(--radius-xl) * 1.5); }
.xcard--rounded-full { border-radius: var(--radius-full); }

.xcard__header {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-muted);
}

.xcard__body {
  padding: var(--spacing-md);
}

@media (min-width: 640px) {
  .xcard__body {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}

.xcard__footer {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-neutral-light-6);
  border-top: 1px solid var(--color-border-muted);
}

/* Pagination (pagination.blade.php) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-2xl);
  flex-wrap: wrap;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.pagination-btn:hover:not(:disabled) {
  background-color: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  gap: 0.25rem;
}

.pagination-page {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--spacing-xs);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.pagination-page:hover:not(:disabled):not(.is-active) {
  background-color: var(--color-surface-alt);
}

.pagination-page.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.pagination-page:disabled {
  cursor: default;
}

/* Segment Control (segment-control.blade.php) */
.segment {
  display: flex;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-muted);
  padding: 0.25rem;
  background-color: var(--color-surface-alt);
}

.segment--pill {
  display: inline-flex;
  border-radius: var(--radius-full);
}

.segment-btn {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-subtle);
  transition: color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast);
}

.segment-btn:hover {
  color: var(--color-neutral);
}

.segment-btn.is-active {
  background-color: var(--color-surface);
  color: var(--color-neutral);
  box-shadow: var(--shadow-sm);
}

.segment-btn--pill {
  flex: none;
  padding: var(--spacing-2xs) var(--spacing-md);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Design Audit Layout
   Usage: Shared layout classes for design audit Blade views (vd_*_audit)
   Internal developer tools — not customer-facing
   ========================================================================== */

/* Page layout */
.vd-audit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.vd-audit-header {
  border-bottom: 1px solid var(--color-border-muted);
  padding-bottom: var(--spacing-md);
}

/* Section */
.vd-audit-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.vd-audit-section--tight {
  gap: var(--spacing-md);
}

.vd-audit-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* Navigation */
.vd-audit-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.vd-audit-nav a {
  text-decoration: underline;
}

.vd-audit-nav a:hover {
  color: var(--color-primary);
}

/* Subtitle & meta */
.vd-audit-subtitle {
  color: var(--color-text-subtle);
}

.vd-audit-shortcode {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.vd-audit-code {
  background-color: var(--color-neutral-light-6);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}

.vd-audit-meta {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Card (audit item) */
.vd-audit-card {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
}

.vd-audit-card--warning {
  border-color: var(--color-warning);
}

.vd-audit-card-head {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-muted);
}

.vd-audit-card-head--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.vd-audit-card-head--warning {
  background-color: var(--color-warning-soft);
  border-bottom-color: var(--color-warning);
}

.vd-audit-card-body {
  padding: var(--spacing-md);
}

.vd-audit-card-body--spaced {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Grid layouts */
.vd-audit-grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .vd-audit-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .vd-audit-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .vd-audit-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .vd-audit-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1024px) {
  .vd-audit-grid--lg2 { grid-template-columns: repeat(2, 1fr); }
  .vd-audit-grid--lg3 { grid-template-columns: repeat(3, 1fr); }
  .vd-audit-grid--lg4 { grid-template-columns: repeat(4, 1fr); }
  .vd-audit-grid--8 { grid-template-columns: repeat(8, 1fr); }
}

.vd-audit-grid--gap-md { gap: var(--spacing-md); }
.vd-audit-grid--gap-lg { gap: var(--spacing-lg); }

/* Table */
.vd-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.vd-audit-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-border-muted);
}

.vd-audit-table th.text-center { text-align: center; }
.vd-audit-table th.text-right { text-align: right; }

.vd-audit-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.vd-audit-table td.text-center { text-align: center; }
.vd-audit-table td.text-right { text-align: right; }

.vd-audit-table tbody tr:last-child td {
  border-bottom: 0;
}

.vd-audit-table tbody tr:hover {
  background-color: var(--color-surface-alt);
}

/* Source list */
.vd-audit-sources {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vd-audit-source {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--color-text-muted);
  display: block;
}

/* Status banners */
.vd-audit-banner {
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  border: 1px solid;
}

.vd-audit-banner--success {
  background-color: var(--color-success-soft);
  border-color: var(--color-success);
}

.vd-audit-banner--warning {
  background-color: var(--color-warning-soft);
  border-color: var(--color-warning);
}

/* Swatch (color audit) */
.vd-audit-swatch {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
}

.vd-audit-swatch-color {
  height: 4rem;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-xs);
}

.vd-audit-swatch-label {
  padding: var(--spacing-xs);
  background-color: var(--color-surface);
}

/* Type scale row */
.vd-audit-type-row {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.vd-audit-type-sidebar {
  width: 12rem;
  flex-shrink: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-right: 1px solid var(--color-border-muted);
}

.vd-audit-type-preview {
  padding: var(--spacing-md) var(--spacing-lg);
  flex: 1;
}

/* Inline code token */
.vd-audit-token {
  font-size: var(--text-xs);
  font-family: ui-monospace, monospace;
  color: var(--color-text-subtle);
}

/* Color dot */
.vd-audit-dot {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--color-border-muted);
}

.vd-audit-dot--sm {
  width: 0.75rem;
  height: 0.75rem;
}

/* Spacing bar */
.vd-audit-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.vd-audit-bar-track {
  flex: 1;
  background-color: var(--color-neutral-light-6);
  border-radius: var(--radius-full);
  height: 0.5rem;
  overflow: hidden;
}

.vd-audit-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light-2);
}

.vd-audit-bar-fill--accent {
  background-color: var(--color-accent);
}

/* Flex helpers (used in audit cards) */
.vd-audit-flex {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.vd-audit-flex--between {
  justify-content: space-between;
}

.vd-audit-flex--wrap {
  flex-wrap: wrap;
}

.vd-audit-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.vd-audit-stack--sm {
  gap: 2px;
}

/* Chip/tag */
.vd-audit-chip {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background-color: var(--color-neutral-light-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Demo area */
.vd-audit-demo {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
}

.vd-audit-demo--center {
  text-align: center;
}

/* Info box */
.vd-audit-info {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}

/* Code preview block */
.vd-audit-codeblock {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-neutral-light-6);
  border-top: 1px solid var(--color-border-muted);
  overflow-x: auto;
}

/* Preview area */
.vd-audit-preview {
  padding: var(--spacing-lg);
}

/* Section with top border (summary) */
.vd-audit-section--bordered {
  border-top: 1px solid var(--color-border-muted);
  padding-top: var(--spacing-lg);
}

/* Table footer */
.vd-audit-table tfoot td {
  border-top: 2px solid var(--color-border-muted);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Auth Form
   Usage: Unified auth flow (email → login/register → OTP)
   Component: auth/auth.blade.php — shortcode [vd_auth]
   ========================================================================== */

.auth-form {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.auth-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.auth-social-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.auth-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  background-color: var(--color-primary-light-6);
  border: 1px solid var(--color-primary-light-5);
  border-radius: var(--radius-md);
}

.auth-notification__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-dark-2);
}

.auth-notification__body {
  font-size: var(--text-sm);
  color: var(--color-primary-dark-1);
  margin-top: 4px;
}

.auth-email-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.auth-email-display__address {
  color: var(--color-neutral);
  font-weight: var(--font-weight-medium);
}

.auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-error-text {
  font-size: var(--text-sm);
  color: var(--color-error);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-block: var(--spacing-lg);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border-muted);
}

.auth-otp-group {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
}

.auth-otp-input {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast);
}

.auth-otp-input.is-error {
  border-color: var(--color-error);
}

.auth-strength {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.auth-strength-track {
  flex: 1;
  display: flex;
  gap: var(--spacing-xs);
}

.auth-strength-bar {
  flex: 1;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light-5);
  transition: background-color var(--duration-normal);
}

.auth-strength-bar.is-weak {
  background-color: var(--color-error);
}

.auth-strength-bar.is-medium {
  background-color: var(--color-warning);
}

.auth-strength-bar.is-strong {
  background-color: var(--color-primary-light-1);
}

/* ============================================
   Design System Menu
   ============================================ */

.vd-design-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vd-design-menu__children {
  list-style: none;
  padding: 0 0 0 var(--spacing-sm);
  margin: 0;
}

.vd-design-menu__link {
  display: block;
  padding: var(--spacing-2xs) var(--spacing-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.vd-design-menu__link:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

.vd-design-menu__link--parent {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: var(--spacing-xs) var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.vd-design-menu__item--parent:first-child .vd-design-menu__link--parent {
  margin-top: 0;
}

.vd-design-menu__link--active {
  background-color: var(--color-primary-light-6);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.vd-design-menu__item--ancestor > .vd-design-menu__link--parent {
  color: var(--color-primary);
}


/* ===== Product Card ===== */

.product-card {
  position: relative;
}

.product-card-gallery {
  position: relative;
  margin-bottom: 1rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background-color: var(--color-neutral-light-6);
}

.product-card-gallery-viewport {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card-gallery-track {
  display: flex;
  transition: transform var(--duration-normal) ease-out;
}

.product-card-gallery-slide {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.product-card-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
  border: none;
  cursor: pointer;
}

.product-card-gallery-nav:hover {
  background-color: var(--color-neutral-light-6);
}

.product-card-gallery-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-card:hover .product-card-gallery-nav:not(:disabled) {
  opacity: 1;
}

.product-card-gallery-nav--prev {
  left: 0.75rem;
}

.product-card-gallery-nav--next {
  right: 0.75rem;
}

.product-card-gallery-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.product-card-gallery-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-light-2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.product-card-gallery-dot:hover {
  background-color: var(--color-neutral-light-1);
}

.product-card-gallery-dot--active {
  width: 0.75rem;
  background-color: var(--color-neutral);
}

.product-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-card-badge {
  padding: 0.25rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.product-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-card-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-card-stars {
  display: flex;
  color: var(--color-neutral);
}

.product-card-star {
  width: 1rem;
  height: 1rem;
}

.product-card-star--filled {
  fill: currentColor;
}

.product-card-star--empty {
  fill: var(--color-neutral-light-5);
}

.product-card-title {
  color: var(--color-neutral);
  font-weight: var(--font-weight-semibold);
  transition: color var(--duration-fast) ease;
  text-decoration: none;
}

.product-card-title:hover {
  color: var(--color-primary);
}

.product-card .product-card-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product-card-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.product-card-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-card-price-current {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral);
}

.product-card-price-original {
  font-size: var(--text-sm);
  color: var(--color-neutral-light-2);
  text-decoration: line-through;
}

.product-card-swatches {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.product-card-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  outline: 1px solid var(--color-neutral-light-5);
  outline-offset: 2px;
  transition: all var(--duration-fast) ease;
  border: none;
  padding: 0;
  cursor: pointer;
}

.product-card-swatch--selected {
  outline: 2px solid var(--color-neutral);
}

.product-card-swatch:not(.product-card-swatch--selected):hover {
  outline-color: var(--color-neutral-light-2);
}

/* --- Product Card: List variant --- */

.product-card--list {
  display: flex;
  gap: 1rem;
  background-color: white;
  border-radius: var(--radius-xl);
  padding: 1rem;
}

.product-card-list-image {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-neutral-light-6);
  display: block;
}

.product-card-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card-list-star {
  width: 0.875rem;
  height: 0.875rem;
}

.product-card-list-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  outline: 1px solid var(--color-neutral-light-5);
  display: inline-block;
}

/* --- Product Card: Mini variant --- */

.product-card--mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.product-card-mini-image {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-neutral-light-6);
  display: block;
}

.product-card-mini-info {
  flex: 1;
  min-width: 0;
}

.product-card-mini-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}

.product-card-mini-title:hover {
  color: var(--color-primary);
}

.product-card-mini-price {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* --- Product Card: Featured variant --- */

.product-card--featured {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background-color: var(--color-neutral-light-6);
}

.product-card-featured-link {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  text-decoration: none;
}

@media (min-width: 768px) {
  .product-card-featured-link {
    aspect-ratio: 16 / 9;
  }
}

.product-card-featured-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), transparent);
}

.product-card-featured-content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem;
  color: white;
}

.product-card-featured-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .product-card-featured-title {
    font-size: var(--text-3xl);
  }
}


/* ===== Product Gallery ===== */

.product-gallery {
  display: none;
}

@media (min-width: 768px) {
  .product-gallery {
    display: flex;
    gap: 1rem;
  }
}

.product-gallery-mobile {
  display: block;
}

@media (min-width: 768px) {
  .product-gallery-mobile {
    display: none;
  }
}

.product-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 5rem;
  flex-shrink: 0;
}

.product-gallery-thumb {
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid transparent;
  transition: all var(--duration-fast) ease;
  cursor: pointer;
  padding: 0;
  background: none;
}

.product-gallery-thumb:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.product-gallery-thumb:hover {
  border-color: var(--color-neutral-light-3);
}

.product-gallery-thumb--active {
  border-color: var(--color-neutral);
}

.product-gallery-video-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
}

.product-gallery-main {
  flex: 1;
  position: relative;
}

.product-gallery-viewport {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-neutral-light-6);
  cursor: zoom-in;
}

.product-gallery-viewport--zoomed {
  cursor: zoom-out;
}

.product-gallery-zoom-hint {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.product-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}

.product-gallery-nav:hover {
  background-color: white;
}

.product-gallery-nav:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

.product-gallery-nav--prev {
  left: 0.75rem;
}

.product-gallery-nav--next {
  right: 0.75rem;
}

.product-gallery-counter {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  box-shadow: var(--shadow-sm);
}

.product-gallery-counter--bottom {
  bottom: 1rem;
  left: 1rem;
}

.product-gallery-counter--top {
  top: 1rem;
  right: 1rem;
  font-size: var(--text-xs);
  padding: 0.25rem 0.625rem;
}

.product-gallery-mobile-viewport {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-neutral-light-6);
}

.product-gallery-mobile-track {
  display: flex;
  transition: transform var(--duration-normal) ease-out;
  height: 100%;
}

.product-gallery-mobile-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.product-gallery-mobile-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.product-gallery-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-light-2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.product-gallery-dot--active {
  width: 1rem;
  background-color: var(--color-neutral);
}

.product-gallery-mobile-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-inline: -1rem;
  padding-inline: 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-gallery-mobile-thumbs::-webkit-scrollbar {
  display: none;
}

.product-gallery-mobile-thumb {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: all var(--duration-fast) ease;
  cursor: pointer;
  padding: 0;
  background: none;
}

.product-gallery-mobile-thumb--active {
  border-color: var(--color-neutral);
}

.product-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-gallery-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}

.product-gallery-lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}