/*
 * =========================================================================================
 * CSS CUSTOM PROPERTY DEFINITIONS (:root)
 * =========================================================================================
 * This :root block defines all global CSS custom properties for the Rebuy headless components.
 * Values are populated from $theme->settings via the PHP variables prepared above,
 * or they are "evergreen" defaults that provide a baseline styling system.
 */
:root {
  /* --- SECTION: BASE DEFAULTS (Evergreen) --- */
  /* These are foundational values not directly controlled by theme settings,
     acting as sensible defaults or internal system values.
     Inspired by values from `onsite-js/src/onsite/css/variables/_colors.scss`. */
  --rb-base-default-error-text: #c00000;
  --rb-base-default-success-text: #16833a;
  --rb-base-default-disabled-background: #f8f8f8;
  --rb-base-default-tag-background: #eeeeee; /* Used for rb-color-background-neutral-subtle if not themed */
  --rb-base-default-error-border: #c00000;
  --rb-base-default-positive-background: #16833a; /* For positive feedback, e.g. progress bar fill */
  --rb-base-default-negative-background: color-mix(in srgb, white 90%, #c00000 10%); /* For negative feedback, e.g. delete button */
  --rb-base-default-placeholder-color: #ababab;
  /* Add any other general defaults here if needed in the future */


      /* --- SECTION: TYPOGRAPHY (Evergreen Defaults & Theme-Influenced) --- */
      /* Base Font & Sizing (these are general defaults, theme might override via body styles) */
      --rb-font-family-base: inherit; /* Components should inherit body font by default */
      --rb-font-size-xs: 11px;
      --rb-font-size-small: 13px;
      --rb-font-size-medium: 14px;
      --rb-font-size-large: 16px;
      /* Add more sizes if needed: xxl, xxxl, etc. */

      --rb-line-height-normal: 1.5;
      --rb-line-height-tight: 1.25;
      /* Add more line-heights if needed: loose, etc. */

      --rb-font-weight-normal: 400;
      --rb-font-weight-medium: 500;
      --rb-font-weight-bold: 700;
      /* Add more weights if needed: light, semibold, etc. */


      /* --- SECTION: SPACING UNITS (Evergreen Defaults) --- */
      /* Provides a consistent scale for margins, paddings, gaps. */
      --rb-spacing-unit-half: 2px;  /* New addition: if 1x is 4px, half might be useful */
      --rb-spacing-unit-1x: 4px;
      --rb-spacing-unit-1halfx: 6px; /* 1.5x */
      --rb-spacing-unit-2x: 8px;
      --rb-spacing-unit-2halfx: 10px; /* 2.5x */
      --rb-spacing-unit-3x: 12px;
      --rb-spacing-unit-4x: 16px;
      --rb-spacing-unit-5x: 20px;
      --rb-spacing-unit-6x: 24px;  /* New addition for more range */
      --rb-spacing-unit-8x: 32px;  /* New addition for more range */
      --rb-spacing-unit-10x: 40px;


      /* --- SECTION: BORDERS & RADIUS (Theme-Influenced & Evergreen Defaults) --- */
      /* Border Radius */
      --rb-border-radius-small: 2px;
      --rb-border-radius-medium: 3px; /* From $ts->button_radius, default 3px */
      --rb-border-radius-large: 6px;
      --rb-border-radius-circle: 50%; /* For circular elements */
      --rb-border-radius-pill: 9999px; /* For pill-shaped elements */

      /* Semantic Aliases for Border Radius (makes component CSS more readable) */
      --rb-border-radius-button: var(--rb-border-radius-medium);
      --rb-border-radius-input: var(--rb-border-radius-medium);
      --rb-border-radius-checkbox: var(--rb-border-radius-small);
      --rb-border-radius-card: var(--rb-border-radius-large); /* Example for cards */

      /* Border Widths */
      --rb-border-width-thin: 1px;
      --rb-border-width-medium: 1px; /* From $ts->button_border_width, default 1px */
      --rb-border-width-thick: 2px; /* Often used for outlines or active states */

      /* Semantic Aliases for Border Widths */
      --rb-border-width-button: var(--rb-border-width-medium); /* Can be overridden by specific button types */
      --rb-border-width-input: var(--rb-border-width-thin);
      --rb-border-width-checkbox: var(--rb-border-width-thick); /* Checkboxes often have slightly thicker borders */
      --rb-border-width-separator: var(--rb-border-width-thin); /* For dividers */


      /* --- SECTION: CORE COLORS (Theme-Influenced - Text, Background, Border) --- */
      /* --- Sub-Section: Text Colors --- */
      /* Populated by $ts->title, $ts->description, $ts->compare_price, $ts->button_text */
      --rb-color-text-default: #232323;       /* Primary text */
      --rb-color-text-secondary: #535353;   /* Secondary, less prominent text */
      --rb-color-text-muted: #939393;         /* Muted, hint text, often $ts->compare_price */
      --rb-color-text-emphasis: #000000; /* For hover states, slightly stronger than default - Consider if this should be themed or derived */
      --rb-color-text-disabled: #a9a9a9; /* Evergreen default for disabled text */
      --rb-color-text-error: var(--rb-base-default-error-text);           /* Error messages, references --rb-base-default-error-text */
      --rb-color-text-success: var(--rb-base-default-success-text);       /* Success messages, references --rb-base-default-success-text */
      --rb-color-text-on-accent: #ffffff;   /* Text on primary-accent backgrounds (e.g., button text) */

      /* --- Sub-Section: Background Colors --- */
      /* Populated by $ts->background_color, $ts->button_background (for RGBA derivation) */
      --rb-color-background-surface-primary: #ffffff; /* Main background for components like Smart Cart flyout */
      --rb-color-background-surface-secondary-alpha-20: rgba(36, 145, 196, 0.2); /* Lightly tinted bg, e.g., secondary column in cart */
      --rb-color-background-disabled: var(--rb-base-default-disabled-background);       /* Background for disabled inputs/elements */
      --rb-color-background-neutral-hover: #f0f0f0;   /* Evergreen: for neutral element hover (e.g. decline button) */
      --rb-color-background-neutral-subtle: var(--rb-base-default-tag-background); /* Subtle neutral bg, e.g., tags. From --rb-base-default-tag-background */
      --rb-color-background-neutral-light: #e0e0e0;  /* Evergreen: for progress bar track, slightly darker neutral */
      --rb-color-background-subtle-hover: #e9ecef; /* Evergreen: for clear button hover or similar subtle interactions */

      /* --- Sub-Section: Border Colors --- */
      /* Populated by $ts->border_color */
      --rb-color-border-default: #eeeeee;     /* Default border for components, inputs, etc. */
      --rb-color-border-subtle: #f5f5f5;        /* Evergreen: Lighter border for subtle divisions */
      --rb-color-border-hover: #999999;         /* Evergreen: Darker border for hover states on neutral elements */
      --rb-color-border-disabled: #e0e0e0;      /* Evergreen: Border for disabled elements */
      --rb-color-border-negative: var(--rb-base-default-error-border);  /* Error state borders, references --rb-base-default-error-border */


      /* --- SECTION: FOCUS & INTERACTION STATES (Theme-Influenced & Evergreen) --- */
      /* Populated by $ts->focus_visible_outline_color (for color) and RGBA calculation */
      --rb-color-focus-ring: #2491C4; /* Color of the focus outline/ring */
      --rb-color-focus-ring-alpha-25: rgba(36, 145, 196, 0.25); /* Semi-transparent version for box-shadow */
      --rb-focus-ring-width: 2px; /* Evergreen: Thickness of the focus ring */
      --rb-focus-ring-offset: 2px; /* Evergreen: Offset of the focus ring */

      /* Accent Colors for Interactions */
      /* Populated by $ts->button_background, $ts->button_border_color, $ts->button_background_hover */
      --rb-color-accent-primary-default: #2491C4; /* Primary action color, e.g., button background */
      --rb-color-accent-primary-text: var(--rb-color-text-on-accent); /* Text color for on primary accent backgrounds */
      --rb-color-accent-primary-border: var(--rb-color-accent-primary-default); /* Border for primary accent elements, defaults to accent color itself */
      --rb-color-accent-primary-hover-base: color-mix(in srgb, var(--rb-color-accent-primary-default), black 20%); /* Evergreen: Darker shade of default, used if $ts->button_background_hover is not set */
      --rb-color-accent-primary-hover: var(--rb-color-accent-primary-hover-base); /* Hover state for primary accent */
      --rb-color-accent-primary-border-hover: var(--rb-color-accent-primary-hover); /* Border for hover state, typically matches hover background */
      --rb-color-accent-primary-alpha-10: rgba(36, 145, 196, 0.1); /* Lightly tinted primary accent, for subtle backgrounds/hovers */
      --rb-color-accent-primary-alpha-20: rgba(36, 145, 196, 0.2); /* Lightly tinted primary accent, for subtle backgrounds/hovers */
      --rb-color-accent-positive-background: var(--rb-base-default-positive-background); /* For positive feedback elements, e.g., progress bar fill. From --rb-base-default-positive-background */
      --rb-color-accent-negative-background: var(--rb-base-default-negative-background); /* For negative feedback elements, e.g., delete button. From --rb-base-default-negative-background */


      /* --- SECTION: SEMANTIC ALIASES (Buttons, Links, Prices - Derived) --- */
      /* --- Sub-Section: Button Semantic Aliases --- */
      /* These tokens provide semantic meaning for different button types.
         Components should use these rather than raw accent colors for buttons. */

      /* Primary Button (Default action button) */
      --rb-color-button-primary-background: var(--rb-color-accent-primary-default);
      --rb-color-button-primary-text: var(--rb-color-accent-primary-text);
      --rb-color-button-primary-border: var(--rb-color-accent-primary-border);
      --rb-color-button-primary-background-hover: var(--rb-color-accent-primary-hover);
      --rb-color-button-primary-border-hover: var(--rb-color-accent-primary-border-hover);
      --rb-color-button-primary-text-hover: var(--rb-color-accent-primary-text); /* Text color usually remains same */

      --rb-color-button-primary-background-active: color-mix(in srgb, var(--rb-color-button-primary-background-hover), black 10%); /* Darken hover further */
      --rb-color-button-primary-border-active: var(--rb-color-button-primary-background-active); /* Match active background */
      --rb-color-button-primary-text-active: var(--rb-color-button-primary-text);

      --rb-color-button-primary-background-focus: var(--rb-color-button-primary-background-hover);
      --rb-color-button-primary-border-focus: var(--rb-color-button-primary-border-hover);
      --rb-color-button-primary-text-focus: var(--rb-color-button-primary-text-hover);

      /* Secondary Button (Outline style button) */
      --rb-color-button-secondary-text: var(--rb-color-accent-primary-default); /* Text is the accent color */
      --rb-color-button-secondary-background: var(--rb-color-accent-primary-text); /* Background is the accent text color (often white/transparent) */
      --rb-color-button-secondary-border: var(--rb-color-accent-primary-default); /* Border is the accent color */
      --rb-color-button-secondary-text-hover: var(--rb-color-accent-primary-hover);
      --rb-color-button-secondary-background-hover: var(--rb-color-accent-primary-alpha-10); /* Subtle background on hover */
      --rb-color-button-secondary-border-hover: var(--rb-color-accent-primary-hover);
      --rb-color-button-secondary-text-active: var(--rb-color-accent-primary-hover);
      --rb-color-button-secondary-background-active: var(--rb-color-accent-primary-alpha-20);
      --rb-color-button-secondary-border-active: var(--rb-color-accent-primary-hover);

      /* Decline/Neutral Button (Less prominent action, often default styling) */
      --rb-color-button-decline-text: var(--rb-color-text-default);
      --rb-color-button-decline-background: var(--rb-color-background-surface-primary); /* Or transparent */
      --rb-color-button-decline-border: var(--rb-color-border-default);
      --rb-color-button-decline-text-hover: var(--rb-color-text-emphasis);
      --rb-color-button-decline-background-hover: var(--rb-color-background-neutral-hover);
      --rb-color-button-decline-border-hover: var(--rb-color-border-hover);

      /* --- Sub-Section: Link Colors --- */
      --rb-color-text-link: var(--rb-color-accent-primary-default);       /* Default link color */
      --rb-color-text-link-hover: var(--rb-color-accent-primary-hover); /* Link hover color */

      /* --- Sub-Section: Price Colors --- */
      /* Populated by $ts->price, $ts->sale_price. Compare-at uses text-muted. */
      --rb-color-text-price-default: #535353;
      --rb-color-text-price-sale: #44be70;
      --rb-color-text-price-compare-at: var(--rb-color-text-muted); /* Compare-at price usually uses muted text color */


      /* --- SECTION: INPUTS & FORMS (Theme-Influenced & Derived) --- */
      /* Populated by $ts->input_text, $ts->input_background, $ts->input_border, $input_focus_final_color_temp (complex logic). */
      --rb-color-text-input: #434343;            /* Text color inside inputs */
      --rb-color-background-input: #ffffff; /* Background color of inputs */
      --rb-color-border-input-default: #cccccc; /* Default border color for inputs */
      --rb-color-border-input-focus: #2491C4; /* Border color for focused inputs */
      --rb-color-border-input-hover: var(--rb-color-border-input-focus); /* Border color for hovered inputs */
      --rb-color-icon-input-select-arrow: #919191; /* Color for select dropdown arrow icon */
      --rb-color-text-placeholder: var(--rb-base-default-placeholder-color); /* Placeholder text color, from --rb-base-default-placeholder-color */

      /* Select Arrow Tokens */
      --rb-select-arrow-width: 10px;
      --rb-select-arrow-height: 6px;
      --rb-select-arrow-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2355595C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      --rb-select-arrow-image-disabled: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ADB5BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

      /* Opacity Tokens */
      --rb-opacity-disabled: 0.65;

      /* --- SECTION: MISCELLANEOUS THEMED ELEMENTS (Theme-Influenced) --- */
      /* For specific settings like banners, carousels, ratings, timers not covered by broader semantics. */
      /* Specific elements like supertitles, product titles/descriptions in widgets, banners, carousel controls, ratings, timers. */
      --rb-color-text-supertitle: #535353;
      --rb-color-text-product-title: var(--rb-color-text-default);
      --rb-color-text-product-description: var(--rb-color-text-secondary);

      /* Smart Cart Announcement Bar */
      --rb-color-banner-text: var(--rb-color-accent-primary-text);
      --rb-color-banner-background: var(--rb-color-accent-primary-default);

      /* Widget Carousel */
      --rb-color-carousel-control-text: var(--rb-color-text-default);
      --rb-color-carousel-control-background: rgba(255,255,255,0.7);
      --rb-color-carousel-paging-dot: #cccccc;

      /* Widget Product Ratings/Reviews */
      --rb-color-rating-star-active: #FBCA10;
      --rb-color-rating-star-inactive: #E5E5E5;
      --rb-color-text-rating-count: var(--rb-color-text-secondary);

      /* Smart Cart Timer */
      --rb-color-background-timer: var(--rb-color-background-neutral-subtle);
      --rb-color-text-timer: var(--rb-color-text-default);


      /* --- SECTION: SHADOWS (Evergreen Defaults) --- */
      /* Predefined shadow styles for consistency. */
      --rb-shadow-small: 0 1px 2px 0 rgba(0,0,0,0.05);
      --rb-shadow-medium: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --rb-shadow-large: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      --rb-shadow-none: none; /* Explicitly define no shadow */

      /* --- SECTION: SIZING (Evergreen Defaults - Inputs, Buttons, etc.) --- */
      /* Default heights for interactive elements like inputs and buttons.
         Components can override these with their own specific tokens if needed. */
      --rb-size-input-height-small: 32px; /* New size */
      --rb-size-input-height-medium: 42px;
      --rb-size-input-height-large: 60px;

      --rb-size-button-height-small: 32px;
      --rb-size-button-height-medium: 42px;
      --rb-size-button-height-large: 60px;

      /* --- SECTION: Z-INDEX (Evergreen Defaults) --- */
      /* Centralized z-index management for overlaying elements. */
      --rb-z-index-dropdown: 1000;
      --rb-z-index-sticky: 1020;
      --rb-z-index-modal-backdrop: 1040;
      --rb-z-index-modal: 1050;
      --rb-z-index-popover: 1060;
      --rb-z-index-tooltip: 1070;
      --rb-z-index-smart-cart-overlay: 2147483637; /* High values from original SCSS */
      --rb-z-index-smart-cart: 2147483638;


      /*
       * =======================================================================
       * SECTION: COMPONENT-SPECIFIC TOKENS & DEFAULTS
       * =======================================================================
       * These tokens are named specifically for components but are defined globally
       * in :root to allow them to be themed or easily overridden.
       * They should ideally default to global semantic tokens where possible.
       */

      /* --- Smart Cart Layout --- */
      --rb-smart-cart-layout-gap-default: var(--rb-spacing-unit-2x); /* Default gap for layout children */
      --rb-smart-cart-layout-background-color: var(--rb-color-background-surface-primary); /* Main bg for layout sections */
      --rb-smart-cart-layout-anchor-footer-padding: 0 0 var(--rb-spacing-unit-2x);
      --rb-smart-cart-layout-anchor-cross-sells-padding: var(--rb-spacing-unit-2x) var(--rb-spacing-unit-4x);
      --rb-smart-cart-layout-primary-column-basis: 45%;
      --rb-smart-cart-layout-primary-column-max-width: 450px;
      --rb-smart-cart-layout-secondary-column-basis: 55%;
      --rb-smart-cart-layout-secondary-column-max-width: 550px;
      --rb-smart-cart-layout-secondary-column-background-color: var(--rb-color-background-surface-secondary-alpha-20);

      /* --- Smart Cart Container --- */

      /* Smart Cart Container: Overlay Background */
      --rb-smart-cart-overlay-background-color: rgba(0, 0, 0, 0.7);
      --rb-smart-cart-overlay-transition: opacity 0.25s ease-in-out;
      /* --rb-z-index-smart-cart-overlay is already defined globally */

      /* Smart Cart Container: Main Flyout Panel */
      --rb-smart-cart-gap: var(--rb-spacing-unit-2x); /* Gap for internal flex layout */
      --rb-smart-cart-background-color: var(--rb-color-background-surface-primary);
      --rb-smart-cart-box-shadow: var(--rb-shadow-large);
      /* --rb-z-index-smart-cart is already defined globally */

      /* Smart Cart Container: Desktop/Default Styles */
      --rb-smart-cart-inset-right-initial: -100%; /* For slide-in animation */
      --rb-smart-cart-transition-desktop: right 0.25s ease-in-out; /* LTR specific, consider logical properties if RTL needs different animation */
      --rb-smart-cart-margin-desktop: var(--rb-spacing-unit-2x); /* Overall margin around the cart */
      --rb-smart-cart-margin-desktop-horizontal-total: calc(var(--rb-smart-cart-margin-desktop) * 2);
      --rb-smart-cart-margin-desktop-vertical-total: calc(var(--rb-smart-cart-margin-desktop) * 2);
      --rb-smart-cart-border-radius-desktop: var(--rb-border-radius-card); /* e.g., 15px from audit, map to semantic */

      /* Smart Cart Container: Single Column Desktop Dimensions */
      --rb-smart-cart-width-single-column-desktop: 500px;
      --rb-smart-cart-max-width-single-column-desktop: calc(100% - var(--rb-smart-cart-margin-desktop-horizontal-total)); /* Max width considering margins */

      /* Smart Cart Container: Double Column Desktop Dimensions */
      --rb-smart-cart-width-double-column-desktop: 1000px; /* Target width for double column */
      --rb-smart-cart-max-width-double-column-desktop: min(calc(100% - var(--rb-smart-cart-margin-desktop-horizontal-total)), var(--rb-smart-cart-width-double-column-desktop)); /* Ensure it doesn't exceed viewport or target */
      --rb-smart-cart-height-double-column-desktop: calc(100vh - var(--rb-smart-cart-margin-desktop-vertical-total)); /* For double column, often takes more height */
      --rb-smart-cart-max-height-double-column-desktop: calc(100vh - var(--rb-smart-cart-margin-desktop-vertical-total));

      /* Smart Cart Container: Common Max Height for Desktop */
      --rb-smart-cart-max-height-desktop: calc(100vh - var(--rb-smart-cart-margin-desktop-vertical-total));

      /* Smart Cart Container: Tablet Styles */
      /* These are applied via media query to adjust double column on smaller screens */
      --rb-smart-cart-width-double-column-tablet: var(--rb-smart-cart-width-single-column-desktop); /* Fallback to single column width */
      --rb-smart-cart-max-width-double-column-tablet: var(--rb-smart-cart-max-width-single-column-desktop);
      --rb-smart-cart-height-double-column-tablet: var(--rb-smart-cart-max-height-desktop);
      --rb-smart-cart-max-height-double-column-tablet: var(--rb-smart-cart-max-height-desktop);

      /* Smart Cart Container: Mobile Styles */
      --rb-smart-cart-transition-mobile: top 0.25s ease-in-out; /* Animation from bottom */
      /* On mobile, margin and border-radius are typically 0 for full screen */
      --rb-smart-cart-border-radius-mobile: 0px;
      --rb-smart-cart-margin-mobile: 0px;


      /* Smart Cart Container: Header */
      --rb-smart-cart-header-gap: var(--rb-spacing-unit-2x);
      --rb-smart-cart-header-padding-top: var(--rb-spacing-unit-2x);
      --rb-smart-cart-header-background-color: inherit; /* Inherits from main cart panel */
      --rb-smart-cart-header-z-index: 10; /* Ensure header elements are above scrollable content */

      /* Smart Cart Container: Header Top Bar */
      --rb-smart-cart-header-top-bar-gap: var(--rb-spacing-unit-2x);
      --rb-smart-cart-header-top-bar-padding-horizontal: var(--rb-spacing-unit-4x);

      /* Smart Cart Container: Header Content Area */
      --rb-smart-cart-header-content-max-width: calc(100% - var(--rb-smart-cart-close-button-size, 24px) - var(--rb-smart-cart-header-top-bar-gap, 8px)); /* Max width to prevent overlap with close button */

      /* Smart Cart Container: Close Button */
      --rb-smart-cart-close-button-size: 24px; /* width & height */
      --rb-smart-cart-close-button-padding: 0; /* Typically no padding for icon buttons */
      --rb-smart-cart-close-button-border-radius: var(--rb-border-radius-medium);
      --rb-smart-cart-close-button-border-width: 0px; /* No border by default */
      --rb-smart-cart-close-button-border-color: transparent;
      --rb-smart-cart-close-button-background-color: transparent;
      --rb-smart-cart-close-button-text-color: var(--rb-color-text-default);
      --rb-smart-cart-close-button-font-size: 18px; /* For the '✕' character */
      --rb-smart-cart-close-button-line-height: var(--rb-smart-cart-close-button-size); /* To center '✕' */
      --rb-smart-cart-close-button-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

      /* Smart Cart Container: Close Button States */
      --rb-smart-cart-close-button-background-color-hover: var(--rb-color-background-neutral-hover);
      --rb-smart-cart-close-button-text-color-hover: var(--rb-color-text-emphasis);
      --rb-smart-cart-close-button-background-color-focus: var(--rb-smart-cart-close-button-background-color-hover);
      --rb-smart-cart-close-button-text-color-focus: var(--rb-smart-cart-close-button-text-color-hover);
      --rb-smart-cart-close-button-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);
      --rb-smart-cart-close-button-background-color-active: color-mix(in srgb, var(--rb-color-background-neutral-hover) 80%, black); /* Darken by 20% */
      --rb-smart-cart-close-button-text-color-active: var(--rb-smart-cart-close-button-text-color-hover);

      /* Smart Cart Container: Debug Panel */
      --rb-smart-cart-debug-panel-background-color: rgba(50, 0, 100, 0.95); /* Darker, distinct color */
      --rb-smart-cart-debug-panel-text-color: #ffffff;
      --rb-smart-cart-debug-panel-border-color: #888888;
      --rb-smart-cart-debug-panel-border-radius: var(--rb-border-radius-medium);
      --rb-smart-cart-debug-panel-padding: var(--rb-spacing-unit-2x) var(--rb-spacing-unit-3x);
      --rb-smart-cart-debug-panel-gap: var(--rb-spacing-unit-2x);
      --rb-smart-cart-debug-panel-position-offset: var(--rb-spacing-unit-2x); /* e.g., 10px from bottom/right */
      --rb-smart-cart-debug-panel-z-index: 100;
      --rb-smart-cart-debug-panel-max-height: 80vh;
      --rb-smart-cart-debug-panel-width: 300px;

      /* Smart Cart Container: Debug Toggle Button */
      --rb-smart-cart-debug-toggle-button-padding: var(--rb-spacing-unit-1x) var(--rb-spacing-unit-2x);
      --rb-smart-cart-debug-toggle-button-background-color: var(--rb-color-background-neutral-subtle);
      --rb-smart-cart-debug-toggle-button-text-color: var(--rb-color-text-default);
      --rb-smart-cart-debug-toggle-button-border-color: var(--rb-color-border-default);
      --rb-smart-cart-debug-toggle-button-border-width: var(--rb-border-width-thin);
      --rb-smart-cart-debug-toggle-button-border-radius: var(--rb-border-radius-button);
      --rb-smart-cart-debug-toggle-button-font-size: var(--rb-font-size-small);
      --rb-smart-cart-debug-toggle-button-z-index: 101; /* Above debug panel */

      /* Smart Cart Container: Debug Toggle Button States */
      --rb-smart-cart-debug-toggle-button-background-color-hover: var(--rb-color-background-neutral-hover);
      --rb-smart-cart-debug-toggle-button-border-color-hover: var(--rb-color-border-hover);
      --rb-smart-cart-debug-toggle-button-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);

      /* Announcement Bar */
      --rb-announcement-bar-padding: var(--rb-spacing-unit-1x) var(--rb-spacing-unit-4x);
      --rb-announcement-bar-font-size: var(--rb-font-size-small);
      --rb-announcement-bar-line-height: 20px;
      --rb-announcement-bar-font-weight: var(--rb-font-weight-normal);
      --rb-announcement-bar-transition-transform: transform 0.5s ease-in-out;
      --rb-announcement-bar-width: 100%;
      --rb-announcement-bar-text-align: center;
      --rb-announcement-bar-text-color: var(--rb-color-banner-text);
      --rb-announcement-bar-background-color: var(--rb-color-banner-background);

      /* Cart Item List */
      --rb-cart-item-list-container-padding-horizontal: var(--rb-spacing-unit-4x);
      --rb-cart-item-list-item-gap: var(--rb-spacing-unit-4x);
      --rb-cart-item-list-margin-vertical: var(--rb-spacing-unit-2x);
      --rb-cart-item-list-min-height: 15vh;

      /* Cart Item */
      --rb-cart-item-gap: var(--rb-spacing-unit-2x);
      --rb-cart-item-media-size: 90px;
      --rb-cart-item-product-title-font-size: var(--rb-font-size-medium);
      --rb-cart-item-product-title-font-weight: var(--rb-font-weight-medium);
      --rb-cart-item-qty-controls-height: 34px;
      --rb-cart-item-border-radius: var(--rb-border-radius-medium);

      /* Cart Item: General Layout & Structure */
      --rb-cart-item-border-color: var(--rb-color-border-default);
      --rb-cart-item-media-image-border-color: var(--rb-color-border-default);
      --rb-cart-item-media-image-border-radius: var(--rb-border-radius-medium);
      --rb-cart-item-info-padding-left: var(--rb-spacing-unit-4x);
      --rb-cart-item-section-margin-top: var(--rb-spacing-unit-2x);

      /* Cart Item: Text & Font Sizes (Non-interactive or simpler elements) */
      --rb-cart-item-variant-title-text-color: var(--rb-color-text-muted);
      --rb-cart-item-variant-title-font-size: var(--rb-font-size-small);
      --rb-cart-item-discount-message-text-color: var(--rb-color-text-price-sale);
      --rb-cart-item-properties-font-size: var(--rb-font-size-small);
      --rb-cart-item-properties-text-color: var(--rb-color-text-muted);
      --rb-cart-item-price-font-size: var(--rb-font-size-medium);
      --rb-cart-item-money-sale-text-color: var(--rb-color-text-price-sale);
      --rb-cart-item-money-compare-at-text-color: var(--rb-color-text-muted);
      --rb-cart-item-money-compare-at-font-size: var(--rb-font-size-small);

      /* Cart Item: Quantity Selector (Structural parts) */
      --rb-cart-item-quantity-selector-border-color: var(--rb-color-border-default);
      --rb-cart-item-quantity-selector-border-radius: var(--rb-border-radius-small);
      --rb-cart-item-quantity-selector-button-width: 32px;
      --rb-cart-item-quantity-selector-button-height: 28px;

      /* Cart Item: Spinner */
      --rb-cart-item-spinner-border-width: 2px;
      --rb-cart-item-spinner-inactive-color: rgba(0, 0, 0, 0.1);
      --rb-cart-item-spinner-active-color: var(--rb-color-text-default);
      --rb-cart-item-spinner-size: 12px;

      /* Cart Item: BMSM Specific (Non-button state parts) */
      --rb-cart-item-bmsm-button-gap: var(--rb-spacing-unit-1x);
      --rb-cart-item-bmsm-dynamic-message-text-color: var(--rb-color-text-success);
      --rb-cart-item-bmsm-dynamic-message-font-size: var(--rb-font-size-small);

      /* Cart Item: STS Specific (Loading placeholder) */
      --rb-cart-item-sts-loading-border-color: var(--rb-color-border-default);
      --rb-cart-item-sts-loading-background-color: var(--rb-color-background-neutral-hover);
      --rb-cart-item-sts-loading-text-color: var(--rb-color-text-muted);

      /* Cart Item: Bundle Specific */
      --rb-cart-item-bundle-children-list-border-color: var(--rb-color-border-default);
      --rb-cart-item-bundle-children-list-indent: 15px;
      --rb-cart-item-bundle-child-item-separator-color: var(--rb-color-border-default);
      --rb-cart-item-bundle-child-image-border-color: var(--rb-color-border-default);
      --rb-cart-item-bundle-child-image-border-radius: var(--rb-border-radius-medium);
      --rb-cart-item-bundle-child-image-size: 40px;
      --rb-cart-item-bundle-child-font-size: var(--rb-font-size-small);
      --rb-cart-item-bundle-child-value-text-color: var(--rb-color-text-muted);

      /* Cart Item: STS Element Tokens */
      --rb-cart-item-sts-border-radius: var(--rb-border-radius-small, 3px);
      --rb-cart-item-sts-padding: var(--rb-spacing-unit-1x, 8px) var(--rb-spacing-unit-2x, 16px);
      --rb-cart-item-sts-element-height: var(--rb-size-input-height-medium, 40px);
      --rb-cart-item-sts-font-size: var(--rb-font-size-small, 13px);
      --rb-cart-item-sts-select-padding-right: var(--rb-spacing-unit-5x, 24px);

      /* Cart Item: STS Button Tokens */
      --rb-cart-item-sts-button-border-color: var(--rb-color-button-secondary-border);
      --rb-cart-item-sts-button-background-color: var(--rb-color-button-secondary-background);
      --rb-cart-item-sts-button-text-color: var(--rb-color-button-secondary-text);
      --rb-cart-item-sts-button-border-color-hover: var(--rb-color-button-secondary-border-hover);
      --rb-cart-item-sts-button-background-color-hover: var(--rb-color-button-secondary-background-hover);
      --rb-cart-item-sts-button-text-color-hover: var(--rb-color-button-secondary-text-hover);
      --rb-cart-item-sts-button-background-color-focus: var(--rb-cart-item-sts-button-background-color-hover);
      --rb-cart-item-sts-button-border-color-focus: var(--rb-cart-item-sts-button-border-color-hover);
      --rb-cart-item-sts-button-text-color-focus: var(--rb-cart-item-sts-button-text-color-hover);
      --rb-cart-item-sts-button-background-color-active: var(--rb-color-button-secondary-background-active);
      --rb-cart-item-sts-button-border-color-active: var(--rb-color-button-secondary-border-active);
      --rb-cart-item-sts-button-text-color-active: var(--rb-color-button-secondary-text-active);
      --rb-cart-item-sts-button-background-color-disabled: var(--rb-cart-item-sts-button-background-color);
      --rb-cart-item-sts-button-border-color-disabled: var(--rb-cart-item-sts-button-border-color);
      --rb-cart-item-sts-button-text-color-disabled: var(--rb-cart-item-sts-button-text-color);

      /* Cart Item: STS Select Tokens */
      --rb-cart-item-sts-select-border-color: var(--rb-color-border-input-default);
      --rb-cart-item-sts-select-background-color: var(--rb-color-background-input);
      --rb-cart-item-sts-select-text-color: var(--rb-color-text-input);
      --rb-cart-item-sts-select-border-color-focus: var(--rb-color-border-input-focus);
      --rb-cart-item-sts-select-background-color-disabled: var(--rb-color-background-disabled);
      --rb-cart-item-sts-select-border-color-disabled: var(--rb-color-border-disabled);
      --rb-cart-item-sts-select-text-color-disabled: var(--rb-color-text-disabled);
      --rb-cart-item-sts-select-border-color-hover: var(--rb-color-border-input-hover, var(--rb-color-border-input-focus));
      /* --rb-cart-item-sts-select-background-color-hover: var(--rb-color-background-input-hover); */

      /* Cart Item: BMSM Button Tokens */
      --rb-cart-item-bmsm-button-padding: 6px 10px;
      --rb-cart-item-bmsm-button-border-radius: var(--rb-border-radius-small, 3px);
      /* Default State (Primary) */
      --rb-cart-item-bmsm-button-background-color: var(--rb-color-button-primary-background);
      --rb-cart-item-bmsm-button-text-color: var(--rb-color-button-primary-text);
      --rb-cart-item-bmsm-button-border-color: var(--rb-color-button-primary-border); /* Or transparent */
      --rb-cart-item-bmsm-button-font-size: var(--rb-font-size-small, 12px);

      /* Hover State */
      --rb-cart-item-bmsm-button-background-color-hover: var(--rb-color-button-primary-background-hover);
      --rb-cart-item-bmsm-button-text-color-hover: var(--rb-color-button-primary-text-hover);
      --rb-cart-item-bmsm-button-border-color-hover: var(--rb-color-button-primary-border-hover);

      /* Focus State */
      --rb-cart-item-bmsm-button-background-color-focus: var(--rb-color-button-primary-background-focus);
      --rb-cart-item-bmsm-button-text-color-focus: var(--rb-color-button-primary-text-focus);
      --rb-cart-item-bmsm-button-border-color-focus: var(--rb-color-button-primary-border-focus);
      --rb-cart-item-bmsm-button-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);

      /* Active State */
      --rb-cart-item-bmsm-button-background-color-active: var(--rb-color-button-primary-background-active);
      --rb-cart-item-bmsm-button-text-color-active: var(--rb-color-button-primary-text-active);
      --rb-cart-item-bmsm-button-border-color-active: var(--rb-color-button-primary-border-active);

      /* Cart Item: Remove Button */
      --rb-cart-item-remove-button-text-color: var(--rb-color-text-muted);
      --rb-cart-item-remove-button-text-color-hover: var(--rb-color-text-default);
      --rb-cart-item-remove-button-text-color-focus: var(--rb-cart-item-remove-button-text-color-hover);
      --rb-cart-item-remove-button-text-color-active: var(--rb-color-text-emphasis);
      --rb-cart-item-remove-button-size: 20px;
      --rb-cart-item-remove-button-font-size: var(--rb-font-size-large);

      /* Cart Item: Product Title Link */
      --rb-cart-item-product-title-text-color: var(--rb-color-text-product-title, var(--rb-color-text-default));
      --rb-cart-item-product-title-text-color-hover: var(--rb-color-text-link-hover);
      --rb-cart-item-product-title-text-decoration-hover: underline;
      --rb-cart-item-product-title-text-decoration-color-hover: var(--rb-color-text-link-hover);
      --rb-cart-item-product-title-text-color-focus: var(--rb-cart-item-product-title-text-color-hover);
      --rb-cart-item-product-title-text-decoration-focus: underline;
      --rb-cart-item-product-title-text-decoration-color-focus: var(--rb-cart-item-product-title-text-color-hover);
      --rb-cart-item-product-title-text-color-active: var(--rb-color-text-link-hover);
      --rb-cart-item-product-title-text-color-disabled: var(--rb-color-text-disabled);

      /* Cart Item: Quantity Buttons */
      --rb-cart-item-quantity-selector-button-background-color: var(--rb-color-background-surface-primary);
      --rb-cart-item-quantity-selector-button-text-color: var(--rb-color-text-default);
      --rb-cart-item-quantity-selector-button-background-color-hover: var(--rb-color-background-neutral-hover);
      --rb-cart-item-quantity-selector-button-text-color-hover: var(--rb-color-text-emphasis);
      --rb-cart-item-quantity-selector-button-background-color-focus: var(--rb-cart-item-quantity-selector-button-background-color-hover);
      --rb-cart-item-quantity-selector-button-text-color-focus: var(--rb-cart-item-quantity-selector-button-text-color-hover);
      --rb-cart-item-quantity-selector-button-background-color-active: color-mix(in srgb, var(--rb-color-background-neutral-hover) 80%, black); /* Darken by 20% */
      --rb-cart-item-quantity-selector-button-text-color-active: var(--rb-color-text-emphasis);
      --rb-cart-item-quantity-selector-button-background-color-disabled: var(--rb-cart-item-quantity-selector-button-background-color);
      --rb-cart-item-quantity-selector-button-text-color-disabled: var(--rb-color-text-disabled);


      /* Cart Item: Bundle Toggle Button */
      --rb-cart-item-bundle-toggle-font-size: var(--rb-font-size-small);
      --rb-cart-item-bundle-toggle-button-padding: var(--rb-spacing-unit-half);
      --rb-cart-item-bundle-toggle-button-text-color: var(--rb-color-text-link);
      --rb-cart-item-bundle-toggle-button-text-color-hover: var(--rb-color-text-link-hover);
      --rb-cart-item-bundle-toggle-button-text-decoration-hover: underline;
      --rb-cart-item-bundle-toggle-button-text-decoration-color-hover: var(--rb-color-text-link-hover);
      --rb-cart-item-bundle-toggle-button-text-color-focus: var(--rb-cart-item-bundle-toggle-button-text-color-hover);
      --rb-cart-item-bundle-toggle-button-text-decoration-focus: underline;
      --rb-cart-item-bundle-toggle-button-text-decoration-color-focus: var(--rb-cart-item-bundle-toggle-button-text-color-hover);
      --rb-cart-item-bundle-toggle-button-text-color-active: var(--rb-color-text-link-hover);
      --rb-cart-item-bundle-toggle-button-text-decoration-active: underline;
      --rb-cart-item-bundle-toggle-button-text-color-disabled: var(--rb-color-text-disabled);

      /* --- Cart Note Input --- */
      --rb-cart-note-input-gap: var(--rb-spacing-unit-1x);
      --rb-cart-note-input-padding-horizontal: var(--rb-spacing-unit-4x);
      --rb-cart-note-input-toggle-gap: var(--rb-spacing-unit-2x);
      --rb-cart-note-input-toggle-line-height: var(--rb-line-height-tight);
      --rb-cart-note-input-toggle-font-size: var(--rb-font-size-small);

      /* Cart Note Input: Checkbox Tokens */
      --rb-cart-note-input-toggle-checkbox-size: 16px;
      --rb-cart-note-input-toggle-checkbox-border-radius: var(--rb-border-radius-checkbox);
      --rb-cart-note-input-toggle-checkbox-border-width: var(--rb-border-width-checkbox);
      --rb-cart-note-input-toggle-checkbox-border-color: var(--rb-color-border-input-default);
      --rb-cart-note-input-toggle-checkbox-background-color: var(--rb-color-background-input);
      --rb-cart-note-input-toggle-checkbox-border-color-checked: var(--rb-color-accent-primary-default);
      --rb-cart-note-input-toggle-checkbox-background-color-checked: var(--rb-color-accent-primary-default);
      --rb-cart-note-input-toggle-checkbox-background-color-disabled: var(--rb-color-background-disabled);
      --rb-cart-note-input-toggle-checkbox-checkmark-color: var(--rb-color-text-on-accent);
      --rb-cart-note-input-toggle-checkbox-border-color-focus: var(--rb-color-border-input-focus);

      /* Cart Note Input: Textarea Tokens */
      --rb-cart-note-input-textarea-padding: 10px 65px 10px 10px; /* NOTE: Specific padding values needed to accommodate the overlaid button */
      --rb-cart-note-input-textarea-height: var(--rb-size-input-height-large);
      --rb-cart-note-input-textarea-border-radius: var(--rb-border-radius-input);
      --rb-cart-note-input-textarea-border-width: var(--rb-border-width-input);
      --rb-cart-note-input-textarea-border-color: var(--rb-color-border-input-default);
      --rb-cart-note-input-textarea-border-color-focus: var(--rb-color-border-input-focus);
      --rb-cart-note-input-textarea-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);
      --rb-cart-note-input-textarea-font-size: var(--rb-font-size-medium);
      --rb-cart-note-input-textarea-background-color-disabled: var(--rb-color-background-disabled);

      /* Cart Note Input: Save Button Tokens */
      --rb-cart-note-input-save-button-padding: 6px 12px;
      --rb-cart-note-input-save-button-min-width: 40px;
      --rb-cart-note-input-save-button-border-radius: var(--rb-border-radius-button);
      --rb-cart-note-input-save-button-border-width: var(--rb-border-width-button);
      --rb-cart-note-input-save-button-font-size: var(--rb-font-size-small);
      --rb-cart-note-input-save-button-font-weight: var(--rb-font-weight-medium);
      /*  -- Default / Primary State */
      --rb-cart-note-input-save-button-background-color: var(--rb-color-button-primary-background);
      --rb-cart-note-input-save-button-text-color: var(--rb-color-button-primary-text);
      --rb-cart-note-input-save-button-border-color: var(--rb-color-button-primary-border);
      /*  -- Hover State */
      --rb-cart-note-input-save-button-background-color-hover: var(--rb-color-button-primary-background-hover);
      --rb-cart-note-input-save-button-border-color-hover: var(--rb-color-button-primary-border-hover);
      --rb-cart-note-input-save-button-text-color-hover: var(--rb-color-button-primary-text-hover);
      /*  -- Disabled State */
      --rb-cart-note-input-save-button-border-color-disabled: var(--rb-color-border-disabled);
      --rb-cart-note-input-save-button-background-color-disabled: var(--rb-color-background-disabled);
      --rb-cart-note-input-save-button-text-color-disabled: var(--rb-color-text-disabled);
      /*  -- Saving State */
      --rb-cart-note-input-save-button-border-color-saving: var(--rb-color-border-default);
      --rb-cart-note-input-save-button-background-color-saving: var(--rb-color-background-neutral-subtle);
      --rb-cart-note-input-save-button-text-color-saving: var(--rb-color-text-default);
      /*  -- Saved State */
      --rb-cart-note-input-save-button-text-color-saved: var(--rb-color-text-success);
      /*  -- Error State */
      --rb-cart-note-input-save-button-border-color-error: var(--rb-color-border-negative);
      --rb-cart-note-input-save-button-background-color-error: var(--rb-color-background-surface-primary); /* Using base surface, error state indicated by border/text */
      --rb-cart-note-input-save-button-text-color-error: var(--rb-color-text-error);

      /* Cart Note Input: Meta Info / Help Text Tokens */
      --rb-cart-note-input-remaining-chars-text-color: var(--rb-color-text-secondary);
      --rb-cart-note-input-help-text-color: var(--rb-color-text-muted);

      /* --- Cart Subtotal --- */
      --rb-cart-subtotal-padding-horizontal: var(--rb-spacing-unit-4x);
      --rb-cart-subtotal-amount-gap: var(--rb-spacing-unit-2x);
      --rb-cart-subtotal-internal-gap: var(--rb-spacing-unit-2x);
      --rb-cart-subtotal-font-weight: var(--rb-font-weight-bold);

      /* Cart Subtotal: Price Variants */
      --rb-cart-subtotal-price-compare-at-text-color: var(--rb-color-text-muted);
      --rb-cart-subtotal-price-compare-at-font-size: var(--rb-font-size-xs);
      --rb-cart-subtotal-price-compare-at-font-weight: var(--rb-font-weight-normal);
      --rb-cart-subtotal-price-final-text-color: var(--rb-color-text-price-sale);

      /* Cart Subtotal: Discount Summary Specifics */
      --rb-cart-subtotal-discount-summary-font-size: var(--rb-font-size-xs);
      --rb-cart-subtotal-discount-summary-font-weight: var(--rb-font-weight-normal);
      --rb-cart-subtotal-discount-summary-header-padding: var(--rb-spacing-unit-half) 0;
      --rb-cart-subtotal-discount-summary-header-text-color: var(--rb-color-text-secondary);
      --rb-cart-subtotal-discount-summary-header-text-color-hover: var(--rb-color-text-default);
      --rb-cart-subtotal-discount-summary-icon-font-size: 0.8em;
      --rb-cart-subtotal-discount-summary-icon-color: inherit;
      --rb-cart-subtotal-discount-summary-details-margin-top: var(--rb-spacing-unit-half);
      --rb-cart-subtotal-discount-summary-details-max-height: 300px;
      --rb-cart-subtotal-discount-summary-item-padding: var(--rb-spacing-unit-half) 0;
      --rb-cart-subtotal-discount-summary-item-text-color: inherit;
      --rb-cart-subtotal-discount-summary-item-border-color: var(--rb-color-border-subtle);
      --rb-cart-subtotal-discount-summary-item-amount-font-weight: var(--rb-font-weight-bold);
      --rb-cart-subtotal-discount-summary-button-focus-outline: var(--rb-focus-ring-width) solid var(--rb-color-focus-ring);
      --rb-cart-subtotal-discount-summary-button-focus-outline-offset: var(--rb-focus-ring-offset);

      /* --- Discount Code Input --- */

      /* Discount Code Input: General Layout */
      --rb-discount-code-input-gap: var(--rb-spacing-unit-1x) var(--rb-spacing-unit-2x); /* Gap for main flex container (row/column) */
      --rb-discount-code-input-padding-horizontal: var(--rb-spacing-unit-4x); /* Horizontal padding for the main container */
      --rb-discount-code-input-form-gap: var(--rb-spacing-unit-2x); /* Gap between input field and apply button */
      --rb-discount-code-input-form-margin-bottom: var(--rb-spacing-unit-1x); /* Margin below the form */

      /* Discount Code Input: Input Field Wrapper & Label */
      --rb-discount-code-input-input-label-offset-top: var(--rb-spacing-unit-half); /* e.g., 2px, for floating label positioning */
      --rb-discount-code-input-input-label-offset-left: var(--rb-spacing-unit-3x); /* e.g., 12px */
      --rb-discount-code-input-input-label-line-height: 12px; /* Specific line height for the small label */
      --rb-discount-code-input-input-label-color: var(--rb-color-text-muted);
      --rb-discount-code-input-input-label-font-size: var(--rb-font-size-xs);
      --rb-discount-code-input-input-label-background-color: var(--rb-color-background-input); /* For border cutout effect */
      /* Note: margin-left: -5px and padding: 0 5px for cutout are hardcoded in CSS module for precision */

      /* Discount Code Input: Input Field */
      --rb-discount-code-input-field-height: var(--rb-size-input-height-medium); /* e.g., 40px */
      --rb-discount-code-input-field-padding-top: var(--rb-spacing-unit-2halfx);    /* e.g., 10px (adjust for floating label) */
      --rb-discount-code-input-field-padding-right: var(--rb-spacing-unit-3x);   /* e.g., 12px */
      --rb-discount-code-input-field-padding-bottom: var(--rb-spacing-unit-1halfx); /* e.g., 6px  */
      --rb-discount-code-input-field-padding-left: var(--rb-spacing-unit-3x);    /* e.g., 12px */
      --rb-discount-code-input-field-text-color: var(--rb-color-text-input);
      --rb-discount-code-input-field-background-color: var(--rb-color-background-input);
      --rb-discount-code-input-field-border-color: var(--rb-color-border-input-default);
      --rb-discount-code-input-field-border-width: var(--rb-border-width-input);
      --rb-discount-code-input-field-border-radius: var(--rb-border-radius-input);
      --rb-discount-code-input-field-font-size: var(--rb-font-size-medium);
      --rb-discount-code-input-field-placeholder-color: var(--rb-color-text-placeholder);
      /*  Discount Code Input: Input Field States */
      --rb-discount-code-input-field-border-color-hover: var(--rb-color-border-input-hover);
      --rb-discount-code-input-field-border-color-focus: var(--rb-color-border-input-focus);
      --rb-discount-code-input-field-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);
      --rb-discount-code-input-field-text-color-disabled: var(--rb-color-text-disabled);
      --rb-discount-code-input-field-background-color-disabled: var(--rb-color-background-disabled);
      --rb-discount-code-input-field-border-color-disabled: var(--rb-color-border-disabled);

      /* Discount Code Input: Apply Button */
      --rb-discount-code-input-apply-button-height: var(--rb-size-button-height-medium); /* e.g., 42px */
      --rb-discount-code-input-apply-button-min-width: 80px;
      --rb-discount-code-input-apply-button-padding: 0 var(--rb-spacing-unit-3x); /* Vertical 0, Horizontal 12px (adjust as needed) */
      --rb-discount-code-input-apply-button-font-size: var(--rb-font-size-medium);
      --rb-discount-code-input-apply-button-font-weight: var(--rb-font-weight-medium);
      --rb-discount-code-input-apply-button-line-height: var(--rb-line-height-normal); /* Allow text to wrap if needed, or set to match height for single line */
      --rb-discount-code-input-apply-button-border-radius: var(--rb-border-radius-button);
      --rb-discount-code-input-apply-button-border-width: var(--rb-border-width-button);
      /*  Discount Code Input: Apply Button Default State (Primary) */
      --rb-discount-code-input-apply-button-background-color: var(--rb-color-button-primary-background);
      --rb-discount-code-input-apply-button-text-color: var(--rb-color-button-primary-text);
      --rb-discount-code-input-apply-button-border-color: var(--rb-color-button-primary-border);
      /*  Discount Code Input: Apply Button Hover State */
      --rb-discount-code-input-apply-button-background-color-hover: var(--rb-color-button-primary-background-hover);
      --rb-discount-code-input-apply-button-text-color-hover: var(--rb-color-button-primary-text-hover);
      --rb-discount-code-input-apply-button-border-color-hover: var(--rb-color-button-primary-border-hover);
      /*  Discount Code Input: Apply Button Focus State */
      --rb-discount-code-input-apply-button-border-color-focus: var(--rb-color-focus-ring); /* Or use accent primary hover */
      --rb-discount-code-input-apply-button-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);
      /*  Discount Code Input: Apply Button Disabled State */
      --rb-discount-code-input-apply-button-background-color-disabled: var(--rb-color-button-primary-background); /* Use with opacity */
      --rb-discount-code-input-apply-button-text-color-disabled: var(--rb-color-button-primary-text); /* Use with opacity */
      --rb-discount-code-input-apply-button-border-color-disabled: var(--rb-color-button-primary-border); /* Use with opacity */
      --rb-discount-code-input-apply-button-opacity-disabled: var(--rb-opacity-disabled);

      /* Discount Code Input: Error Message */
      --rb-discount-code-input-error-message-text-color: var(--rb-color-text-error);
      --rb-discount-code-input-error-message-font-size: var(--rb-font-size-small);
      --rb-discount-code-input-error-message-margin-top: var(--rb-spacing-unit-half);
      --rb-discount-code-input-error-message-line-height: var(--rb-line-height-normal);

      /* Discount Code Input: Tags List */
      --rb-discount-code-input-tags-list-gap: var(--rb-spacing-unit-1x);

      /* Discount Code Input: Individual Tag */
      --rb-discount-code-input-tag-padding: var(--rb-spacing-unit-1x) var(--rb-spacing-unit-2x);
      --rb-discount-code-input-tag-border-radius: var(--rb-border-radius-small);
      --rb-discount-code-input-tag-background-color: var(--rb-color-background-neutral-subtle);
      --rb-discount-code-input-tag-text-color: var(--rb-color-text-secondary);
      --rb-discount-code-input-tag-font-size: var(--rb-font-size-small);

      /* Discount Code Input: Tag Icon */
      --rb-discount-code-input-tag-icon-size: 14px; /* Height/Width for SVG */
      --rb-discount-code-input-tag-icon-margin-right: var(--rb-spacing-unit-1x); /* Reduced from 8px to 4px for tighter spacing */

      /* Discount Code Input: Tag Text */
      --rb-discount-code-input-tag-text-margin-right: var(--rb-spacing-unit-1halfx); /* Reduced from 8px to 6px */
      --rb-discount-code-input-tag-text-font-weight: var(--rb-font-weight-bold);

      /* Discount Code Input: Tag Remove Button */
      --rb-discount-code-input-tag-remove-button-padding-horizontal: var(--rb-spacing-unit-1x);
      --rb-discount-code-input-tag-remove-button-font-size: var(--rb-font-size-medium);
      --rb-discount-code-input-tag-remove-button-font-weight: var(--rb-font-weight-bold);
      --rb-discount-code-input-tag-remove-button-text-color: var(--rb-color-text-muted);
      --rb-discount-code-input-tag-remove-button-opacity: 0.7;
      /*  Discount Code Input: Tag Remove Button States */
      --rb-discount-code-input-tag-remove-button-text-color-hover: var(--rb-color-text-default);
      --rb-discount-code-input-tag-remove-button-opacity-hover: 1;
      --rb-discount-code-input-tag-remove-button-text-color-focus: var(--rb-color-text-default); /* Same as hover */
      --rb-discount-code-input-tag-remove-button-opacity-focus: 1; /* Same as hover */
      --rb-discount-code-input-tag-remove-button-text-color-disabled: var(--rb-color-text-muted);
      --rb-discount-code-input-tag-remove-button-opacity-disabled: 0.4;

      /* --- Cart Title Bar --- */
      --rb-cart-title-bar-flex-grow: 0;
      --rb-cart-title-bar-line-height: 30px;
      --rb-cart-title-bar-font-size: var(--rb-font-size-medium);
      --rb-cart-title-bar-font-weight: var(--rb-font-weight-bold);
      --rb-cart-title-bar-text-transform: uppercase;
      --rb-cart-title-bar-text-align: center;
      --rb-cart-title-bar-text-color: var(--rb-color-text-default);
      /* Note: Padding is handled by the header container for this component, so not defined here. */

      /* --- Checkout Area --- */
      --rb-checkout-area-gap-default: var(--rb-spacing-unit-2x);
      --rb-checkout-area-padding-horizontal: var(--rb-spacing-unit-4x);

      /* Checkout Area: Terms Section */
      --rb-checkout-area-terms-gap: var(--rb-spacing-unit-2x);
      --rb-checkout-area-terms-checkbox-size: 16px;
      --rb-checkout-area-terms-checkbox-border-radius: var(--rb-border-radius-checkbox); /* Use semantic alias */
      --rb-checkout-area-terms-checkbox-border-width: var(--rb-border-width-checkbox);
      --rb-checkout-area-terms-checkbox-border-color: var(--rb-color-border-input-default);
      --rb-checkout-area-terms-checkbox-background-color: var(--rb-color-background-input);
      --rb-checkout-area-terms-checkbox-border-color-checked: var(--rb-color-accent-primary-default);
      --rb-checkout-area-terms-checkbox-background-color-checked: var(--rb-color-accent-primary-default);
      --rb-checkout-area-terms-checkbox-checkmark-color: var(--rb-color-text-on-accent);
      --rb-checkout-area-terms-checkbox-border-color-focus: var(--rb-color-border-input-focus);
      --rb-checkout-area-terms-checkbox-background-color-disabled: var(--rb-color-background-disabled);
      --rb-checkout-area-terms-label-font-size: var(--rb-font-size-small);
      --rb-checkout-area-terms-label-text-color: var(--rb-color-text-default);
      --rb-checkout-area-terms-label-link-text-color: var(--rb-color-text-link);
      --rb-checkout-area-terms-label-link-text-decoration: underline;
      --rb-checkout-area-terms-label-link-text-decoration-hover: none; /* Often preferred for less noise */

      /* Checkout Area: Shared Button Properties */
      --rb-checkout-area-button-height: var(--rb-size-button-height-medium);
      --rb-checkout-area-button-padding-vertical: var(--rb-spacing-unit-2x);
      --rb-checkout-area-button-padding-horizontal: var(--rb-spacing-unit-3x);
      --rb-checkout-area-button-border-radius: var(--rb-border-radius-button);
      --rb-checkout-area-button-font-size: var(--rb-font-size-medium); /* Audit was 16px, matches our medium */
      --rb-checkout-area-button-font-weight: var(--rb-font-weight-medium); /* Audit was 500 */
      --rb-checkout-area-button-line-height: var(--rb-line-height-normal);
      --rb-checkout-area-button-border-width: var(--rb-border-width-thin); /* Default to thin, can be overridden by specific buttons */

      /* Checkout Area: Primary Checkout Button */
      --rb-checkout-area-checkout-button-background-color: var(--rb-color-button-primary-background);
      --rb-checkout-area-checkout-button-text-color: var(--rb-color-button-primary-text);
      --rb-checkout-area-checkout-button-border-color: var(--rb-color-button-primary-border);
      --rb-checkout-area-checkout-button-background-color-hover: var(--rb-color-button-primary-background-hover);
      --rb-checkout-area-checkout-button-border-color-hover: var(--rb-color-button-primary-border-hover);
      --rb-checkout-area-checkout-button-text-color-hover: var(--rb-color-button-primary-text-hover);


      /* Checkout Area: Secondary / Outline Buttons (View Cart, Continue Shopping) */
      --rb-checkout-area-secondary-button-background-color: var(--rb-color-button-secondary-background);
      --rb-checkout-area-secondary-button-text-color: var(--rb-color-button-secondary-text);
      --rb-checkout-area-secondary-button-border-color: var(--rb-color-button-secondary-border);
      --rb-checkout-area-secondary-button-border-width: var(--rb-border-width-medium); /* Usually thicker for outline */
      --rb-checkout-area-secondary-button-background-color-hover: var(--rb-color-button-secondary-background-hover);
      --rb-checkout-area-secondary-button-text-color-hover: var(--rb-color-button-secondary-text-hover);
      --rb-checkout-area-secondary-button-border-color-hover: var(--rb-color-button-secondary-border-hover);

      /* Checkout Area: Shop Pay Button */
      --rb-checkout-area-shop-pay-button-background-color: #5a31f4; /* Shop Pay brand color */
      --rb-checkout-area-shop-pay-button-text-color: #ffffff; /* SVG will be white */
      --rb-checkout-area-shop-pay-button-background-color-hover: #4e2ad1; /* Darker Shop Pay brand color */
      --rb-checkout-area-shop-pay-button-svg-height: 20px; /* Control SVG size */

      /* Checkout Area: Installments Message */
      --rb-checkout-area-installments-message-font-size: var(--rb-font-size-small);
      --rb-checkout-area-installments-message-text-color: var(--rb-color-text-default);
      --rb-checkout-area-installments-link-text-color: var(--rb-color-text-link);


      /* Empty Cart Message */
      --rb-empty-cart-message-padding: var(--rb-spacing-unit-10x) var(--rb-spacing-unit-4x); /* Default: 40px 16px */
      --rb-empty-cart-message-text-align: center;
      --rb-empty-cart-message-text-color: var(--rb-color-text-muted);
      --rb-empty-cart-message-font-size: var(--rb-font-size-medium);
      --rb-empty-cart-message-link-color: var(--rb-color-text-link);
      --rb-empty-cart-message-link-text-decoration: underline;
      --rb-empty-cart-message-link-text-decoration-hover: none;

      /* Login Button */
      --rb-login-button-padding: var(--rb-spacing-unit-2x) var(--rb-spacing-unit-3x); /* e.g., 8px 12px */
      --rb-login-button-border-radius: var(--rb-border-radius-button);
      --rb-login-button-border-width: var(--rb-border-width-button); /* Typically 1px or 0px if no border */
      --rb-login-button-font-size: var(--rb-font-size-medium);
      --rb-login-button-font-weight: var(--rb-font-weight-medium); /* Changed from bold in audit to medium for less emphasis */
      --rb-login-button-line-height: var(--rb-line-height-normal);
      --rb-login-button-text-decoration: none;
      --rb-login-button-text-align: center;
      --rb-login-button-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

      /* Login Button: Default State (Primary) */
      --rb-login-button-background-color: var(--rb-color-button-primary-background);
      --rb-login-button-text-color: var(--rb-color-button-primary-text);
      --rb-login-button-border-color: var(--rb-color-button-primary-border); /* Or transparent if primary buttons are borderless */

      /* Login Button: Hover State */
      --rb-login-button-background-color-hover: var(--rb-color-button-primary-background-hover);
      --rb-login-button-text-color-hover: var(--rb-color-button-primary-text-hover);
      --rb-login-button-border-color-hover: var(--rb-color-button-primary-border-hover);
      /* --rb-login-button-text-decoration-hover: var(--rb-login-button-text-decoration); */ /* Keep as is */

      /* Login Button: Focus State */
      --rb-login-button-background-color-focus: var(--rb-color-button-primary-background-focus);
      --rb-login-button-text-color-focus: var(--rb-color-button-primary-text-focus);
      --rb-login-button-border-color-focus: var(--rb-color-button-primary-border-focus);
      --rb-login-button-box-shadow-focus: 0 0 0 var(--rb-focus-ring-width) var(--rb-color-focus-ring-alpha-25);
      /* --rb-login-button-text-decoration-focus: var(--rb-login-button-text-decoration); */ /* Keep as is */

      /* Login Button: Active State */
      --rb-login-button-background-color-active: var(--rb-color-button-primary-background-active);
      --rb-login-button-text-color-active: var(--rb-color-button-primary-text-active);
      --rb-login-button-border-color-active: var(--rb-color-button-primary-border-active);

      /* --- Tiered Progress Bar --- */
      --rb-tiered-progress-bar-padding: var(--rb-spacing-unit-2x) var(--rb-spacing-unit-4x);
      --rb-tiered-progress-bar-container-gap: var(--rb-spacing-unit-1halfx);
      --rb-tiered-progress-bar-tier-marker-margin-bottom: var(--rb-spacing-unit-1x);
      --rb-tiered-progress-bar-track-border-radius: var(--rb-border-radius-medium);
      --rb-tiered-progress-bar-track-background-color: var(--rb-color-background-neutral-light);
      --rb-tiered-progress-bar-track-height: 10px;
      --rb-tiered-progress-bar-fill-background-color: var(--rb-color-accent-positive-background);
      --rb-tiered-progress-bar-tier-step-gap: var(--rb-spacing-unit-1halfx);
      --rb-tiered-progress-bar-tier-step-min-width: 40px; /* Specific value */
      --rb-tiered-progress-bar-icon-size: 18px; /* Specific value */
      --rb-tiered-progress-bar-icon-symbol-font-size: calc(var(--rb-tiered-progress-bar-icon-size) * 0.6);
      --rb-tiered-progress-bar-icon-default-border-color: var(--rb-color-border-default);
      --rb-tiered-progress-bar-icon-box-shadow: var(--rb-shadow-small);
      --rb-tiered-progress-bar-icon-default-background-color: var(--rb-color-background-surface-primary);
      --rb-tiered-progress-bar-icon-default-symbol-color: var(--rb-color-text-muted);
      --rb-tiered-progress-bar-icon-reached-border-color: var(--rb-color-accent-positive-background);
      --rb-tiered-progress-bar-icon-reached-background-color: var(--rb-color-accent-positive-background);
      --rb-tiered-progress-bar-icon-reached-symbol-color: var(--rb-color-text-on-accent);
      --rb-tiered-progress-bar-tier-icon-image-border-radius: var(--rb-border-radius-circle);
      --rb-tiered-progress-bar-label-default-color: var(--rb-color-text-secondary);
      --rb-tiered-progress-bar-label-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-label-reached-color: var(--rb-color-text-default);
      --rb-tiered-progress-bar-label-reached-font-weight: var(--rb-font-weight-bold);
      --rb-tiered-progress-bar-feedback-text-color: var(--rb-color-text-default);
      --rb-tiered-progress-bar-feedback-font-size: var(--rb-font-size-medium);
      --rb-tiered-progress-bar-gift-area-margin: 0; /* Specific value */
      --rb-tiered-progress-bar-gift-area-title-margin: var(--rb-spacing-unit-1halfx) 0;
      --rb-tiered-progress-bar-gift-area-title-color: var(--rb-color-text-secondary);
      --rb-tiered-progress-bar-gift-area-title-font-size: var(--rb-font-size-medium); /* Renamed from gift-title-font-size */
      --rb-tiered-progress-bar-gift-area-title-font-weight: var(--rb-font-weight-bold);
      --rb-tiered-progress-bar-gift-items-gap: var(--rb-spacing-unit-2x);
      --rb-tiered-progress-bar-gift-item-basis: 220px; /* Specific value */
      --rb-tiered-progress-bar-gift-item-internal-gap: var(--rb-spacing-unit-2x);
      --rb-tiered-progress-bar-gift-item-details-gap: var(--rb-spacing-unit-half);
      --rb-tiered-progress-bar-gift-item-border-color: var(--rb-color-border-subtle);
      --rb-tiered-progress-bar-gift-item-border-radius: var(--rb-border-radius-medium);
      --rb-tiered-progress-bar-gift-item-background-color: var(--rb-color-background-neutral-subtle);
      --rb-tiered-progress-bar-gift-item-padding: var(--rb-spacing-unit-2x);
      --rb-tiered-progress-bar-gift-image-size: 65px; /* Specific value */
      --rb-tiered-progress-bar-gift-image-border-radius: var(--rb-border-radius-small);
      --rb-tiered-progress-bar-gift-image-placeholder-bg: var(--rb-color-background-neutral-light);
      --rb-tiered-progress-bar-gift-item-base-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-gift-item-title-color: var(--rb-color-text-default);
      --rb-tiered-progress-bar-gift-item-title-font-size: var(--rb-font-size-medium);
      --rb-tiered-progress-bar-gift-item-title-font-weight: var(--rb-font-weight-bold);
      --rb-tiered-progress-bar-gift-item-variant-title-color: var(--rb-color-text-secondary);
      --rb-tiered-progress-bar-gift-item-variant-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-gift-item-action-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-gift-item-status-text-color: var(--rb-color-text-muted);

      /* Tiered Progress Bar: Gift Item Select */
      --rb-tiered-progress-bar-gift-item-select-margin-top: var(--rb-spacing-unit-1x);
      --rb-tiered-progress-bar-gift-item-select-border-color: var(--rb-color-border-input-default);
      --rb-tiered-progress-bar-gift-item-select-border-radius: var(--rb-border-radius-input); /* Use input radius alias */
      --rb-tiered-progress-bar-gift-item-select-padding: 6px var(--rb-spacing-unit-4x) 6px var(--rb-spacing-unit-1x); /* Pad for arrow */
      --rb-tiered-progress-bar-gift-item-select-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-gift-item-select-height: var(--rb-size-input-height-small); /* Use small input height */
      --rb-tiered-progress-bar-gift-item-select-background-color: var(--rb-color-background-input);
      --rb-tiered-progress-bar-gift-item-select-text-color: var(--rb-color-text-input);
      --rb-tiered-progress-bar-gift-item-select-border-width: var(--rb-border-width-input);
      --rb-tiered-progress-bar-gift-item-select-arrow-image: var(--rb-select-arrow-image);
      --rb-tiered-progress-bar-gift-item-select-arrow-image-disabled: var(--rb-select-arrow-image-disabled);
      --rb-tiered-progress-bar-gift-item-select-border-color-hover: var(--rb-color-border-input-hover);
      --rb-tiered-progress-bar-gift-item-select-border-color-focus: var(--rb-color-border-input-focus);
      --rb-tiered-progress-bar-gift-item-select-focus-ring-color: var(--rb-color-focus-ring);
      --rb-tiered-progress-bar-gift-item-select-background-color-disabled: var(--rb-color-background-disabled);
      --rb-tiered-progress-bar-gift-item-select-border-color-disabled: var(--rb-color-border-disabled);
      --rb-tiered-progress-bar-gift-item-select-text-color-disabled: var(--rb-color-text-disabled);

      /* Tiered Progress Bar: Gift Item Button (Defaults) */
      --rb-tiered-progress-bar-button-gap: var(--rb-spacing-unit-half);
      --rb-tiered-progress-bar-button-border-radius: var(--rb-border-radius-button);
      --rb-tiered-progress-bar-button-padding: 6px 10px;
      --rb-tiered-progress-bar-button-width: 100%; /* Or auto if they shouldn't be full width of their container */
      --rb-tiered-progress-bar-button-margin-top: var(--rb-spacing-unit-1x);
      --rb-tiered-progress-bar-button-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-button-line-height: 1.2;
      --rb-tiered-progress-bar-button-focus-ring-color: var(--rb-color-focus-ring);
      --rb-tiered-progress-bar-button-default-border-color: var(--rb-color-button-decline-border); /* Default to decline style */
      --rb-tiered-progress-bar-button-default-background-color: var(--rb-color-button-decline-background);
      --rb-tiered-progress-bar-button-default-text-color: var(--rb-color-button-decline-text);
      --rb-tiered-progress-bar-button-default-border-color-hover: var(--rb-color-button-decline-border-hover);
      --rb-tiered-progress-bar-button-default-background-color-hover: var(--rb-color-button-decline-background-hover);
      --rb-tiered-progress-bar-button-default-text-color-hover: var(--rb-color-button-decline-text-hover);
      --rb-tiered-progress-bar-button-default-border-color-focus: var(--rb-color-focus-ring); /* Focus usually shows accent */
      --rb-tiered-progress-bar-button-default-background-color-disabled: var(--rb-color-background-disabled);
      --rb-tiered-progress-bar-button-default-border-color-disabled: var(--rb-color-border-disabled);
      --rb-tiered-progress-bar-button-default-text-color-disabled: var(--rb-color-text-disabled);

      /* Tiered Progress Bar: Gift Item Button (Remove Variant) */
      --rb-tiered-progress-bar-button-remove-border-color: var(--rb-color-border-negative);
      --rb-tiered-progress-bar-button-remove-text-color: var(--rb-color-text-error);
      --rb-tiered-progress-bar-button-remove-background-color: var(--rb-color-background-surface-primary); /* Or a very light negative bg */
      --rb-tiered-progress-bar-button-remove-hover-bg-color: var(--rb-color-accent-negative-background);
      --rb-tiered-progress-bar-button-remove-border-color-hover: var(--rb-color-border-negative);
      --rb-tiered-progress-bar-button-remove-text-color-hover: var(--rb-color-text-error);

      /* Tiered Progress Bar: Gift Item Button (Add Variant) */

      /* Secondary button style (outline using accent color) */
      /* --rb-tiered-progress-bar-button-add-border-color: var(--rb-color-button-secondary-border);
      --rb-tiered-progress-bar-button-add-text-color: var(--rb-color-button-secondary-text);
      --rb-tiered-progress-bar-button-add-background-color: var(--rb-color-button-secondary-background);
      --rb-tiered-progress-bar-button-add-hover-bg-color: var(--rb-color-button-secondary-background-hover);
      --rb-tiered-progress-bar-button-add-border-color-hover: var(--rb-color-button-secondary-border-hover);
      --rb-tiered-progress-bar-button-add-text-color-hover: var(--rb-color-button-secondary-text-hover); */

      /* Primary button style (solid accent color) */
      --rb-tiered-progress-bar-button-add-border-color: var(--rb-color-button-primary-border);
      --rb-tiered-progress-bar-button-add-text-color: var(--rb-color-button-primary-text);
      --rb-tiered-progress-bar-button-add-background-color: var(--rb-color-button-primary-background);
      --rb-tiered-progress-bar-button-add-hover-bg-color: var(--rb-color-button-primary-background-hover);
      --rb-tiered-progress-bar-button-add-border-color-hover: var(--rb-color-button-primary-border-hover);
      --rb-tiered-progress-bar-button-add-text-color-hover: var(--rb-color-button-primary-text-hover);

      /* Tiered Progress Bar: Error & Debug */
      --rb-tiered-progress-bar-error-text-color: var(--rb-color-text-error);
      --rb-tiered-progress-bar-error-font-size: var(--rb-font-size-small);
      --rb-tiered-progress-bar-error-margin-top: var(--rb-spacing-unit-half);
      --rb-tiered-progress-bar-debug-margin-top: var(--rb-spacing-unit-2x);
      --rb-tiered-progress-bar-debug-border-color: var(--rb-color-border-default);
      --rb-tiered-progress-bar-debug-background-color: var(--rb-color-background-neutral-subtle);
      --rb-tiered-progress-bar-debug-padding: var(--rb-spacing-unit-1x);
      --rb-tiered-progress-bar-debug-font-size: var(--rb-font-size-xs);
      --rb-tiered-progress-bar-debug-text-color: var(--rb-color-text-default);
      --rb-tiered-progress-bar-gift-item-opacity-syncing: 0.7; /* Specific value */

      /* --- Cross-Sell Widget --- */
      /* Cross-Sell:Container */
      --rb-cross-sell-container-padding: var(--rb-spacing-unit-8x) var(--rb-spacing-unit-4x);
      --rb-cross-sell-container-margin: var(--rb-spacing-unit-4x) 0;
      --rb-cross-sell-container-background-color: transparent;
      --rb-cross-sell-container-border-radius: 0px;

      /* Cross-Sell: Title */
      --rb-cross-sell-title-margin-bottom: var(--rb-spacing-unit-6x);

      /* Cross-Sell: Product Grid */
      --rb-cross-sell-product-min-width: 150px;
      --rb-cross-sell-product-min-width-md: 200px;
      --rb-cross-sell-product-grid-gap: var(--rb-spacing-unit-8x);

      /* Cross-Sell: Feedback States */
      --rb-cross-sell-feedback-padding: var(--rb-spacing-unit-8x);
      --rb-cross-sell-feedback-text-color: var(--rb-color-text-default);

      /* Cross-Sell: Error States */
      --rb-cross-sell-error-text-color: var(--rb-color-text-error);
      --rb-cross-sell-error-background-color: var(--rb-color-background-error-subtle);
      --rb-cross-sell-error-border-color: var(--rb-color-border-error);
      --rb-cross-sell-error-border-radius: var(--rb-spacing-unit-1x);
    }