/*
 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: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  gap: 10px;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  border: none;
  line-height: 1.3;
  border-radius: 9999px;
}

/* Sizes */
.xbtn--lg {
  height: 56px;
  padding: 0 24px;
  font-size: 16px;
  width: 100%;
}

.xbtn--md {
  padding: 12px 20px;
  font-size: 14px;
}

.xbtn--sm {
  padding: 8px 16px;
  font-size: 14px;
}

/* Primary (filled green) */
.xbtn--primary {
  background-color: #134B24;
  color: #FFFFFF;
}

.xbtn--primary:hover,
.xbtn--primary.force-hover {
  background-color: #133F1F;
}

.xbtn--primary:focus-visible,
.xbtn--primary.force-focus {
  outline: 2px solid #134B24;
  outline-offset: 2px;
}

.xbtn--primary.is-inactive {
  background-color: #BACABC;
  color: #757270;
  cursor: default;
}

.xbtn--primary.is-inactive:hover {
  background-color: #BACABC;
}

/* Secondary (outlined) */
.xbtn--secondary {
  background-color: transparent;
  color: #134B24;
  border: 1px solid #134B24;
}

.xbtn--secondary:hover,
.xbtn--secondary.force-hover {
  background-color: #DCE4DD;
}

.xbtn--secondary:focus-visible,
.xbtn--secondary.force-focus {
  outline: 2px solid #134B24;
  outline-offset: 2px;
}

.xbtn--secondary.is-inactive {
  border-color: #BACABC;
  color: #757270;
  cursor: default;
}

/* Danger (red) */
.xbtn--danger {
  background-color: #FF4973;
  color: #FFFFFF;
}

.xbtn--danger:hover,
.xbtn--danger.force-hover {
  background-color: #BF3756;
}

.xbtn--danger:focus-visible,
.xbtn--danger.force-focus {
  outline: 2px solid #FF4973;
  outline-offset: 2px;
}

.xbtn--danger.is-inactive {
  background-color: #FFE4EA;
  color: #757270;
  cursor: default;
}

/* Link (transparent, text-only) */
.xbtn--link {
  background-color: transparent;
  color: #134B24;
  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 #134B24;
  outline-offset: 2px;
}

.xbtn--link.is-inactive {
  color: #757270;
  cursor: default;
}

/* Icon (circular, minimum hit area) */
.xbtn--icon {
  border-radius: 9999px;
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
  background-color: transparent;
  color: #585351;
}

.xbtn--icon:hover,
.xbtn--icon.force-hover {
  background-color: #F0E9E1;
  color: #1F1A16;
}

.xbtn--icon:focus-visible,
.xbtn--icon.force-focus {
  outline: 2px solid #134B24;
  outline-offset: 2px;
}

.xbtn--icon.is-inactive {
  color: #D2C7BB;
  cursor: default;
}

/* Social (icon-only — login providers) */
.xbtn--social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid #D2C7BB;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.xbtn--social:hover,
.xbtn--social.force-hover {
  background-color: #F0E9E1;
}

.xbtn--social:focus-visible,
.xbtn--social.force-focus {
  outline: 2px solid #134B24;
  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 16px;
  border: 1px solid #D2C7BB;
  border-radius: 9999px;
  background-color: #FFFFFF;
  font-size: 14px;
  line-height: 1.8;
  color: #1F1A16;
  transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms;
}

.form-control::placeholder {
  color: #757270;
}

.form-control:focus {
  border-color: #134B24;
  outline: none;
  box-shadow: 0 0 0 2px rgba(19, 75, 36, 0.15);
}

/* Error state */
.form-control--error {
  border-color: #FF4973;
}

.form-control--error:focus {
  border-color: #FF4973;
  box-shadow: 0 0 0 2px rgba(255, 73, 115, 0.15);
}

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

/* Disabled / readonly state */
.form-control--disabled {
  background-color: #F0E9E1;
  color: #757270;
  cursor: not-allowed;
}

/* Textarea override (not pill, auto height) */
textarea.form-control {
  height: auto;
  padding: 12px 16px;
  border-radius: 8px;
  resize: vertical;
}

/* 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: 14px;
  line-height: 1.8;
  font-weight: 500;
  color: #393432;
}

.form-error {
  font-size: 14px;
  line-height: 1.8;
  color: #FF4973;
}

.form-hint {
  font-size: 14px;
  line-height: 1.8;
  color: #757270;
}

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

/* Headings */
.heading-1 {
  font-size: 34px;
  font-weight: 600;
  color: #1F1A16;
  line-height: 1.25;
}

.heading-2 {
  font-size: 28px;
  font-weight: 700;
  color: #1F1A16;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.heading-3 {
  font-size: 22px;
  font-weight: 600;
  color: #1F1A16;
  line-height: 1.375;
}

.heading-4 {
  font-size: 18px;
  font-weight: 500;
  color: #1F1A16;
  line-height: 1.375;
}

.heading-5 {
  font-size: 16px;
  font-weight: 500;
  color: #1F1A16;
  line-height: 1.5;
}

.heading-6 {
  font-size: 14px;
  font-weight: 500;
  color: #1F1A16;
  line-height: 1.5;
}

/* Body Text */
.body-text {
  font-size: 14px;
  line-height: 1.8;
  color: #585351;
}

.body-text-lg {
  font-size: 16px;
  color: #585351;
  line-height: 1.8;
}

.body-text-sm {
  font-size: 12px;
  line-height: 1.8;
  color: #585351;
}

/* Labels */
.label {
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
  color: #393432;
}

.label-required::after {
  content: ' *';
  color: #FF4973;
}

.label-optional::after {
  content: ' (optioneel)';
  color: #757270;
  font-weight: 400;
}

/* Utilities */
.caption {
  font-size: 12px;
  line-height: 1.8;
  color: #757270;
}

.overline {
  font-size: 12px;
  line-height: 1.8;
  font-weight: 600;
  color: #585351;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

/* Cards */
.card {
  padding: 16px;
  background-color: #F0E9E1;
  border-radius: 8px;
}

.card-border {
  background-color: #FFFFFF;
  border: 1px solid #E6DED4;
  border-radius: 8px;
  padding: 24px;
}

.card-bordered {
  background-color: #FFFFFF;
  border: 2px solid #E6DED4;
  border-radius: 8px;
  padding: 24px;
}

.card-elevated {
  background-color: #FFFFFF;
  border: 1px solid #E6DED4;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Sections */
.section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section-padded {
  padding: 64px 16px;
}

/* Dividers */
.divider {
  border-top: 1px solid #E6DED4;
}

.divider-vertical {
  border-left: 1px solid #E6DED4;
}

/* 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: #134B24;
}

.icon-secondary {
  color: #49FF78;
}

.icon-neutral {
  color: #585351;
}

.icon-error {
  color: #FF4973;
}

.icon-success {
  color: #49FF78;
}

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

.link {
  color: #134B24;
  transition: color 150ms;
}

.link:hover {
  color: #133F1F;
}

.link-primary {
  color: #134B24;
  text-decoration: underline;
  transition: color 150ms;
}

.link-primary:hover {
  color: #133F1F;
}

.link-secondary {
  color: #49FF78;
  transition: color 150ms;
}

.link-secondary:hover {
  color: #42D767;
}

.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: #757270;
  transition: color 150ms;
}

.link-muted:hover {
  color: #585351;
}

.link-danger {
  color: #FF4973;
  text-decoration: underline;
  transition: color 150ms;
}

.link-danger:hover {
  color: #BF3756;
}

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

.alert {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid;
}

.alert-success {
  padding: 16px;
  background-color: #E4FFEB;
  border: 1px solid #49FF78;
  color: #37BF5A;
  border-radius: 8px;
}

.alert-error {
  padding: 16px;
  background-color: #FFE4EA;
  border: 1px solid #FF4973;
  color: #BF3756;
  border-radius: 8px;
}

.alert-warning {
  padding: 16px;
  background-color: #FDF6E3;
  border: 1px solid #F4C542;
  color: #B79432;
  border-radius: 8px;
}

.alert-info {
  padding: 16px;
  background-color: #E4EBFF;
  border: 1px solid #4979FF;
  color: #375BBF;
  border-radius: 8px;
}

.alert-caution {
  padding: 16px;
  background-color: #FFF3E4;
  border: 1px solid #FFAD49;
  color: #BF8237;
  border-radius: 8px;
}

/* ==========================================================================
   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: #DCE4DD;
  color: #134B24;
  font-weight: 500;
}

/* Selected state */
.is-selected {
  background-color: #DCE4DD;
  border-color: #134B24;
}

/* 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 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.8;
  font-weight: 500;
}

.badge-primary {
  background-color: #DCE4DD;
  color: #134B24;
}

.badge-secondary {
  background-color: #EBFFEB;
  color: #3CAF57;
}

.badge-success {
  background-color: #E4FFEB;
  color: #37BF5A;
}

.badge-error {
  background-color: #FFE4EA;
  color: #BF3756;
}

.badge-warning {
  background-color: #FDF6E3;
  color: #B79432;
}

.badge-info {
  background-color: #E4EBFF;
  color: #375BBF;
}

.badge-neutral {
  background-color: #F0E9E1;
  color: #585351;
}

/* Tags (removable badges) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  background-color: #F0E9E1;
  color: #1F1A16;
}

.tag-removable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  background-color: #F0E9E1;
  color: #1F1A16;
}

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

/* Modal backdrop/overlay */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(31, 26, 22, 0.5);
  z-index: 40;
}

/* Modal container */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Modal content box */
.modal-content {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Modal header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #E6DED4;
}

/* Modal body */
.modal-body {
  padding: 24px;
  overflow-y: auto;
}

/* Modal footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid #E6DED4;
}

/* 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: 12px;
  padding: 10px 16px;
  color: #585351;
  transition: color 150ms, background-color 150ms;
}

.nav-link:hover {
  color: #134B24;
  background-color: #F0E9E1;
}

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

.slide-menu-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 300ms;
}

.slide-menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 24rem;
  background-color: #FFFFFF;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
  display: flex;
  flex-direction: column;
}

.slide-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #F0E9E1;
}

.slide-menu-footer {
  border-top: 1px solid #F0E9E1;
  padding: 16px;
}

.slide-menu-footer > * + * {
  margin-top: 8px;
}

/* Menu Item (herbruikbaar voor slide-menu en dropdowns) */
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  transition: background-color 150ms;
}

.menu-item:hover {
  background-color: #F0E9E1;
}

.menu-item-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-item-thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background-color: #F0E9E1;
}

.menu-item-thumbnail-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: #F0E9E1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757270;
}

.menu-item-title {
  display: block;
  color: #1F1A16;
  font-weight: 500;
}

.menu-item-subtitle {
  font-size: 14px;
  line-height: 1.8;
  color: #757270;
}

.menu-item-chevron {
  width: 20px;
  height: 20px;
  color: #757270;
}

/* Area Tabs (Binnen/Buiten Toggle) */
.area-tabs {
  display: inline-flex;
  gap: 4px;
  border-radius: 9999px;
  background-color: #F0E9E1;
  padding: 4px;
}

.area-tab {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  transition: all 200ms;
}

.area-tab-active {
  background-color: #FFFFFF;
  color: #134B24;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.area-tab-inactive {
  color: #585351;
}

.area-tab-inactive:hover {
  color: #1F1A16;
  background-color: rgba(255, 255, 255, 0.5);
}

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

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #585351;
  transition: color 200ms, background-color 200ms;
}

.dropdown-trigger:hover {
  color: #134B24;
  background-color: #F0E9E1;
}

.dropdown-panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 288px;
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #F0E9E1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 200ms;
  z-index: 50;
}

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

.dropdown-header {
  padding: 16px;
  border-bottom: 1px solid #F0E9E1;
}

.dropdown-footer {
  padding: 16px;
  border-top: 1px solid #F0E9E1;
  background-color: #F0E9E1;
  border-radius: 0 0 12px 12px;
}

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

.account-indicator-active {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background-color: #49FF78;
  border-radius: 9999px;
  border: 2px solid #FFFFFF;
}

.account-indicator-inactive {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background-color: #F4C542;
  border-radius: 9999px;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Social Accounts */
.vd-social-accounts {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vd-social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #D2C7BB;
  transition: color 200ms;
}

.vd-social-icon--linked {
  color: #1F1A16;
}

/* Search Flyout */
.search-flyout {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  background-color: #FFFFFF;
  transform: translateY(-100%);
  transition: transform 300ms ease-out;
}

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

.search-input {
  width: 100%;
  height: 48px;
  padding: 0 80px 0 16px;
  font-size: 18px;
  color: #1F1A16;
  border: 0;
  border-bottom: 2px solid #E6DED4;
  background-color: transparent;
  outline: none;
  transition: border-color 200ms;
}

.search-input::placeholder {
  color: #757270;
}

.search-input:focus {
  border-color: #1F1A16;
}

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

.search-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 40;
  transition: opacity 300ms;
  opacity: 0;
  pointer-events: none;
}

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

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

.category-browser-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  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: 12px;
  overflow: hidden;
  background-color: #F0E9E1;
  transition: all 200ms;
}

.category-card:hover .category-card-thumbnail {
  box-shadow: 0 0 0 2px #134B24, 0 0 0 4px #FFFFFF;
}

.category-card-title {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
  color: #1F1A16;
  transition: color 150ms;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-card:hover .category-card-title {
  color: #134B24;
}

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

.category-back-content {
  aspect-ratio: 1;
  border-radius: 12px;
  background-color: #F0E9E1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed #757270;
  transition: border-color 200ms, background-color 200ms;
}

.category-back-card:hover .category-back-content {
  border-color: #134B24;
  background-color: rgba(19, 75, 36, 0.05);
}

/* Browser Navigation Buttons */
.browser-nav-btn {
  padding: 8px;
  border-radius: 9999px;
  background-color: #F0E9E1;
  color: #585351;
  transition: background-color 150ms, color 150ms;
}

.browser-nav-btn:hover {
  background-color: #E6DED4;
  color: #1F1A16;
}

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

/* Hamburger Button */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #585351;
  transition: color 200ms, background-color 200ms;
}

.hamburger:hover {
  color: #134B24;
  background-color: #F0E9E1;
}

@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: 8px;
  color: #585351;
  transition: color 200ms, background-color 200ms;
}

.vd-cart-icon:hover {
  color: #134B24;
  background-color: #F0E9E1;
}

.vd-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #134B24;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0 4px;
}

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

/* Chat Container */
.vd-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #FFFFFF;
}

/* Chat Header */
.vd-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #E6DED4;
  background-color: #FFFFFF;
}

.vd-chat__header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1F1A16;
}

.vd-chat__header-icon {
  font-size: 22px;
  line-height: 1;
}

.vd-chat__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vd-chat__header-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #585351;
  transition: color 200ms, background-color 200ms;
}

.vd-chat__header-btn:hover {
  color: #134B24;
  background-color: #DCE4DD;
}

/* Chat Messages Container */
.vd-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.vd-chat__messages > * + * {
  margin-top: 12px;
}

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

.vd-chat__welcome p {
  font-size: 14px;
  color: #585351;
  line-height: 1.8;
}

/* 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: #134B24;
  color: #FFFFFF;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  padding: 10px 16px;
  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: #F0E9E1;
  color: #1F1A16;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 10px 16px;
  max-width: 80%;
}

/* Message Content */
.vd-chat__message-content {
  font-size: 14px;
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Typing Indicator */
.vd-chat__typing {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 16px;
  background-color: #F0E9E1;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  max-width: max-content;
}

.vd-chat__typing span {
  width: 8px;
  height: 8px;
  background-color: #757270;
  border-radius: 9999px;
  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: 150ms;
}

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

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

/* Chat Input Form */
.vd-chat__form {
  border-top: 1px solid #E6DED4;
  padding: 16px;
  background-color: #FFFFFF;
}

.vd-chat__input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #F0E9E1;
  border-radius: 8px;
  padding: 8px 12px;
}

.vd-chat__input {
  flex: 1;
  background-color: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
  color: #1F1A16;
}

.vd-chat__input::placeholder {
  color: #757270;
}

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

/* Send Button */
.vd-chat__send {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: #134B24;
  color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 200ms;
}

.vd-chat__send:hover {
  background-color: #133F1F;
}

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

.vd-chat__send-text {
  font-size: 14px;
  font-weight: 500;
}

/* 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: 12px 16px;
  background-color: #FFE4EA;
  border-left: 4px solid #FF4973;
  color: #BF3756;
  font-size: 14px;
}

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

/* Loyalty Balance Display */
.loyalty-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background-color: #F0E9E1;
  border-radius: 8px;
}

.loyalty-balance-label {
  font-size: 14px;
  font-weight: 500;
  color: #585351;
}

.loyalty-balance-value {
  font-size: 28px;
  font-weight: 600;
  color: #134B24;
}

.loyalty-balance-suffix {
  font-size: 14px;
  color: #757270;
}

/* Loyalty Points (inline display) */
.loyalty-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #134B24;
}

.loyalty-points-icon {
  width: 16px;
  height: 16px;
  color: #134B24;
}

.loyalty-points-value {
  font-weight: 600;
}

/* Loyalty Currency (converteerd naar euro) */
.loyalty-currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #757270;
}

.loyalty-currency-approx {
  font-weight: 400;
}

/* Loyalty Level/Tier Container */
.loyalty-level {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
}

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

/* Loyalty Level: Bronze */
.loyalty-level-bronze {
  background-color: rgba(205, 127, 50, 0.1);
  color: #CD7F32;
  border: 1px solid rgba(205, 127, 50, 0.2);
}

.loyalty-level-bronze .loyalty-level-badge {
  background-color: #CD7F32;
  color: #FFFFFF;
}

/* Loyalty Level: Silver */
.loyalty-level-silver {
  background-color: rgba(192, 192, 192, 0.1);
  color: #737373;
  border: 1px solid rgba(192, 192, 192, 0.2);
}

.loyalty-level-silver .loyalty-level-badge {
  background-color: #C0C0C0;
  color: #1D1816;
}

/* Loyalty Level: Gold */
.loyalty-level-gold {
  background-color: rgba(255, 215, 0, 0.1);
  color: #B8860B;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.loyalty-level-gold .loyalty-level-badge {
  background-color: #FFD700;
  color: #1D1816;
}

/* Loyalty Level: Platinum */
.loyalty-level-platinum {
  background-color: rgba(229, 228, 226, 0.1);
  color: #4A4A4A;
  border: 1px solid rgba(229, 228, 226, 0.3);
}

.loyalty-level-platinum .loyalty-level-badge {
  background: linear-gradient(to bottom right, #E5E4E2, #B0ADA9);
  color: #1D1816;
}

/* Progress Bar naar Next Level */
.loyalty-progress > * + * {
  margin-top: 8px;
}

.loyalty-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #757270;
}

.loyalty-progress-current {
  font-weight: 500;
  color: #585351;
}

.loyalty-progress-next {
  font-weight: 500;
  color: #585351;
}

.loyalty-progress-bar {
  height: 8px;
  background-color: #F0E9E1;
  border-radius: 9999px;
  overflow: hidden;
}

.loyalty-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #134B24, #133F1F);
  border-radius: 9999px;
  transition: all 500ms;
}

/* Tier Progress met Level Indicator */
.loyalty-tier-progress {
  position: relative;
  height: 12px;
  background-color: #F0E9E1;
  border-radius: 9999px;
  overflow: visible;
}

.loyalty-tier-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: all 500ms;
}

.loyalty-tier-progress-fill--bronze {
  background: linear-gradient(to right, #CD7F32, #A0522D);
}

.loyalty-tier-progress-fill--silver {
  background: linear-gradient(to right, #C0C0C0, #A8A8A8);
}

.loyalty-tier-progress-fill--gold {
  background: linear-gradient(to right, #FFD700, #DAA520);
}

.loyalty-tier-progress-fill--platinum {
  background: linear-gradient(to right, #E5E4E2, #B0ADA9);
}

/* Rewards/Benefits List */
.loyalty-reward {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: #F0E9E1;
  border: 1px solid #E6DED4;
}

.loyalty-reward-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #DCE4DD;
  color: #134B24;
}

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

.loyalty-reward-title {
  font-size: 14px;
  font-weight: 500;
  color: #1F1A16;
}

.loyalty-reward-description {
  font-size: 12px;
  color: #585351;
  margin-top: 2px;
}

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

.loyalty-reward-locked .loyalty-reward-icon {
  background-color: #F0E9E1;
  color: #757270;
}

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

.loyalty-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #585351;
}

.loyalty-benefit-icon {
  width: 16px;
  height: 16px;
  color: #49FF78;
  flex-shrink: 0;
}

.loyalty-benefit-icon--locked {
  color: #D2C7BB;
}

/* Point History/Transactions */
.loyalty-history > * + * {
  margin-top: 12px;
}

.loyalty-transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F0E9E1;
}

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

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

.loyalty-transaction-type {
  font-size: 14px;
  font-weight: 500;
  color: #1F1A16;
}

.loyalty-transaction-date {
  font-size: 12px;
  color: #757270;
  margin-top: 2px;
}

.loyalty-transaction-points {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
}

.loyalty-transaction-points--earned {
  color: #49FF78;
}

.loyalty-transaction-points--spent {
  color: #FF4973;
}

.loyalty-transaction-points--expired {
  color: #757270;
}

/* Tier Benefits Card */
.loyalty-tier-card {
  padding: 20px;
  border-radius: 12px;
  border: 2px solid;
  transition: all 200ms;
}

.loyalty-tier-card--bronze {
  background-color: rgba(205, 127, 50, 0.05);
  border-color: rgba(205, 127, 50, 0.2);
}

.loyalty-tier-card--bronze:hover {
  border-color: rgba(205, 127, 50, 0.4);
}

.loyalty-tier-card--silver {
  background-color: rgba(192, 192, 192, 0.05);
  border-color: rgba(192, 192, 192, 0.2);
}

.loyalty-tier-card--silver:hover {
  border-color: rgba(192, 192, 192, 0.4);
}

.loyalty-tier-card--gold {
  background-color: rgba(255, 215, 0, 0.05);
  border-color: rgba(255, 215, 0, 0.2);
}

.loyalty-tier-card--gold:hover {
  border-color: rgba(255, 215, 0, 0.4);
}

.loyalty-tier-card--platinum {
  background-color: rgba(229, 228, 226, 0.05);
  border-color: rgba(229, 228, 226, 0.3);
}

.loyalty-tier-card--platinum:hover {
  border-color: rgba(229, 228, 226, 0.5);
}

.loyalty-tier-card--current {
  box-shadow: 0 0 0 2px #134B24, 0 0 0 4px #FFFFFF;
}

.loyalty-tier-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.loyalty-tier-card-name {
  font-size: 18px;
  font-weight: 600;
  color: #1F1A16;
}

.loyalty-tier-card-threshold {
  font-size: 12px;
  color: #757270;
}

.loyalty-tier-card-benefits > * + * {
  margin-top: 8px;
}

/* Referral Component */
.loyalty-referral {
  padding: 20px;
  background: linear-gradient(to bottom right, #DCE4DD, #BACABC);
  border-radius: 12px;
  border: 1px solid #97AF9A;
}

.loyalty-referral-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.loyalty-referral-title {
  font-size: 16px;
  font-weight: 600;
  color: #1F1A16;
}

.loyalty-referral-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #134B24;
  color: #FFFFFF;
}

.loyalty-referral-code {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #97AF9A;
}

.loyalty-referral-code-value {
  flex: 1;
  font-family: monospace;
  font-weight: 600;
  font-size: 18px;
  color: #134B24;
  letter-spacing: 0.05em;
}

.loyalty-referral-code-copy {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #585351;
  transition: color 150ms;
}

.loyalty-referral-code-copy:hover {
  color: #134B24;
}

.loyalty-referral-description {
  margin-top: 12px;
  font-size: 14px;
  color: #585351;
}

/* Loyalty Alert/Notification */
.loyalty-alert {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid;
}

.loyalty-alert--level-upgrade {
  background-color: #E4FFEB;
  border-color: #49FF78;
  color: #37BF5A;
}

.loyalty-alert--points-earned {
  background-color: #E4EBFF;
  border-color: #4979FF;
  color: #375BBF;
}

.loyalty-alert--points-expiring {
  background-color: #FDF6E3;
  border-color: #F4C542;
  color: #B79432;
}

.loyalty-alert--birthday {
  background: linear-gradient(to bottom right, #DCE4DD, #BACABC);
  border-color: #134B24;
  color: #13351B;
}

/* Earn Rate Multiplier Badge */
.loyalty-multiplier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background-color: #E4FFEB;
  color: #37BF5A;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

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

/* Loyalty Dashboard Card */
.loyalty-dashboard > * + * {
  margin-top: 24px;
}

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

.loyalty-dashboard-stat {
  padding: 16px;
  background-color: #F0E9E1;
  border-radius: 8px;
}

.loyalty-dashboard-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #757270;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.loyalty-dashboard-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1F1A16;
  margin-top: 4px;
}

.loyalty-dashboard-stat--highlight {
  background-color: #DCE4DD;
  border: 1px solid #97AF9A;
}

.loyalty-dashboard-stat--highlight .loyalty-dashboard-stat-value {
  color: #134B24;
}

/* ==========================================================================
   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: 14px;
  color: #134B24;
  transition: color 150ms;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.field-action:hover {
  color: #133F1F;
}

.field-action:focus-visible {
  outline: 2px solid #134B24;
  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: 12px 24px;
  background-color: #FFFFFF;
  border: 1px solid #D2C7BB;
  color: #585351;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  cursor: pointer;
}

.action-secondary:hover {
  background-color: #F0E9E1;
}

.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: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #E6DED4;
  background-color: #FFFFFF;
  color: #585351;
  text-align: center;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  cursor: pointer;
}

.toggle-pill:hover {
  border-color: #134B24;
}

.toggle-pill--active {
  background-color: #134B24;
  border-color: #134B24;
  color: #FFFFFF;
}

.toggle-pill--active:hover {
  background-color: #133F1F;
  border-color: #133F1F;
}

/* ==========================================================================
   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: 12px;
  border: 1px dashed #D2C7BB;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #757270;
  transition: color 150ms, border-color 150ms, background-color 150ms;
  cursor: pointer;
}

.card-add:hover {
  color: #585351;
  border-color: #757270;
}

.card-add--active {
  border-color: #134B24;
  background-color: #DCE4DD;
  color: #133F1F;
}

/* Selectable Card (clickable card with selected state) */
.card-selectable {
  padding: 12px;
  border: 1px solid #E6DED4;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  position: relative;
  transition: border-color 150ms, background-color 150ms;
  cursor: pointer;
}

.card-selectable:hover {
  border-color: #D2C7BB;
}

.card-selectable--active {
  border-color: #134B24;
  background-color: #DCE4DD;
}

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

.vd-cart-items {
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vd-cart-items__surface {
  background-color: #FFFFFF;
}

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

.vd-cart-items__list > * + * {
  border-top: 1px solid #E6DED4;
}

.vd-cart-items__item {
  display: flex;
  gap: 12px;
  padding: 20px 16px;
}

.vd-cart-items__thumb {
  height: 88px;
  width: 88px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #F0E9E1;
  flex-shrink: 0;
}

.vd-cart-items__name {
  display: block;
  font-size: 14px;
  color: #1F1A16;
  line-height: 1.55;
  transition: color 150ms;
}

.vd-cart-items__name:hover {
  color: #134B24;
}

.vd-cart-items__subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: #757270;
  line-height: 1.55;
}

.vd-cart-items__price {
  margin-top: 8px;
  font-size: 28px;
  color: #1F1A16;
  line-height: 1.3;
}

.vd-cart-items__remove {
  font-size: 14px;
  color: #1F1A16;
  transition: color 150ms;
}

.vd-cart-items__remove:hover {
  color: #FF4973;
}

.vd-cart-items__qty {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 9999px;
  background-color: #F0E9E1;
  padding: 4px;
}

.vd-cart-items__qty-btn {
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #FFFFFF;
  color: #1F1A16;
  transition: background-color 150ms;
}

.vd-cart-items__qty-btn:hover {
  background-color: #E6DED4;
}

.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: 14px;
  color: #1F1A16;
}

.vd-cart-items__summary {
  padding: 24px 16px;
}

.vd-cart-items__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding: 8px 0;
}

.vd-cart-items__summary-row--total {
  font-size: 32px;
  line-height: 1.3;
  color: #1F1A16;
  padding-top: 12px;
}

.vd-cart-items__divider {
  border-top: 1px dashed #E6DED4;
  margin: 8px 0;
}

.vd-cart-items__continue {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #1F1A16;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.3;
  transition: background-color 150ms;
}

.vd-cart-items__continue:hover {
  background-color: #1A1614;
}

.vd-cart-items__continue-secondary {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #585351;
  transition: color 150ms;
}

.vd-cart-items__continue-secondary:hover {
  color: #1F1A16;
}

.vd-cart-items__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  text-align: center;
}

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

.vd-cart-items__surface--mini {
  background-color: #FFFFFF;
}

.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: 9999px;
  color: #585351;
  transition: background-color 150ms, color 150ms;
}

.vd-cart-items__mini-close:hover {
  background-color: #F0E9E1;
  color: #1F1A16;
}

@media (min-width: 1024px) {
  .vd-cart-items__surface--mini {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: min(420px, 100vw);
    max-width: 420px;
    overflow-y: auto;
    border-left: 1px solid #E6DED4;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 300ms 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 #E6DED4;
    padding: 16px;
  }
}