@charset "UTF-8";
/* =====================================
   Bulbulustur Theme - Main Stylesheet
===================================== */
/* 1. Foundation / Tokens */
/* =====================================
   Bulbulustur Theme - Color Palette
   Raw color scales only.

   Rule:
   - This file defines colors.
   - It does not define theme behavior.
   - It does not define light/dark decisions.
   - It does not define component usage.
   - Theme files consume these tokens.

   Naming:
   --bb-color-{family}-{step}

   Scale:
   50  = almost white / softest surface
   100 = soft surface
   200 = muted surface
   300 = light accent
   400 = bright accent
   500 = base / live color
   600 = hover / stronger
   700 = strong text / active
   800 = deep
   900 = deepest
===================================== */
:root {
  /* -------------------------------------
     Base Absolute
  ------------------------------------- */
  --bb-color-white: #ffffff;
  --bb-color-black: #000000;
  /* -------------------------------------
     Yellow
     Bulbulustur main brand energy.
     Base: #FED700
  ------------------------------------- */
  --bb-color-yellow-50: #fffdf0;
  --bb-color-yellow-100: #fff8cc;
  --bb-color-yellow-200: #fff099;
  --bb-color-yellow-300: #ffe866;
  --bb-color-yellow-400: #ffdf33;
  --bb-color-yellow-500: #fed700;
  --bb-color-yellow-600: #e6c300;
  --bb-color-yellow-700: #b89400;
  --bb-color-yellow-800: #806700;
  --bb-color-yellow-900: #4d3e00;
  --bb-color-yellow-rgb: 254, 215, 0;
  /* -------------------------------------
     Navy
     Ecosystem depth / footer / platform shell.
  ------------------------------------- */
  --bb-color-navy-50: #edf4fb;
  --bb-color-navy-100: #d8e7f5;
  --bb-color-navy-200: #b6cde3;
  --bb-color-navy-300: #8aaac8;
  --bb-color-navy-400: #587c9e;
  --bb-color-navy-500: #17324f;
  --bb-color-navy-600: #142b45;
  --bb-color-navy-700: #0f2238;
  --bb-color-navy-800: #0b1c30;
  --bb-color-navy-900: #081626;
  --bb-color-navy-rgb: 8, 22, 38;
  /* -------------------------------------
     Gray
     Neutral UI scale.
     Light mode surfaces and typography backbone.
  ------------------------------------- */
  --bb-color-gray-50: #fafbfc;
  --bb-color-gray-100: #f4f6f8;
  --bb-color-gray-200: #e8edf3;
  --bb-color-gray-300: #d5dde8;
  --bb-color-gray-400: #b9c2d3;
  --bb-color-gray-500: #8a96a8;
  --bb-color-gray-600: #6b7894;
  --bb-color-gray-700: #445066;
  --bb-color-gray-800: #232d44;
  --bb-color-gray-900: #0f1a33;
  --bb-color-gray-rgb: 15, 26, 51;
  /* -------------------------------------
     Coal
     Hard black / premium dark accents.
     Used for strong contrast, overlays and deep UI areas.
  ------------------------------------- */
  --bb-color-coal-50: #252a35;
  --bb-color-coal-100: #1d222c;
  --bb-color-coal-200: #161a22;
  --bb-color-coal-300: #13161e;
  --bb-color-coal-400: #0f1219;
  --bb-color-coal-500: #0c0f15;
  --bb-color-coal-600: #090b10;
  --bb-color-coal-700: #06080c;
  --bb-color-coal-800: #030406;
  --bb-color-coal-900: #000000;
  --bb-color-coal-rgb: 15, 18, 25;
  /* -------------------------------------
     Ink
     Dark theme navy-black foundation.
     95% black / 5% blue feeling.
  ------------------------------------- */
  --bb-color-ink-50: #233446;
  --bb-color-ink-100: #1c2b3c;
  --bb-color-ink-200: #172433;
  --bb-color-ink-300: #131e2a;
  --bb-color-ink-400: #101923;
  --bb-color-ink-500: #0d141e;
  --bb-color-ink-600: #0a0f17;
  --bb-color-ink-700: #070b11;
  --bb-color-ink-800: #05080c;
  --bb-color-ink-900: #030507;
  --bb-color-ink-rgb: 13, 20, 30;
  /* -------------------------------------
     Blue
     B2B / wholesale / professional trade.
  ------------------------------------- */
  --bb-color-blue-50: #eff6ff;
  --bb-color-blue-100: #dbeafe;
  --bb-color-blue-200: #bfdbfe;
  --bb-color-blue-300: #93c5fd;
  --bb-color-blue-400: #60a5fa;
  --bb-color-blue-500: #2563eb;
  --bb-color-blue-600: #1d4ed8;
  --bb-color-blue-700: #1e40af;
  --bb-color-blue-800: #1e3a8a;
  --bb-color-blue-900: #172554;
  --bb-color-blue-rgb: 37, 99, 235;
  /* -------------------------------------
     Orange
     B2C / retail / warm commerce.
  ------------------------------------- */
  --bb-color-orange-50: #fff7ed;
  --bb-color-orange-100: #ffedd5;
  --bb-color-orange-200: #fed7aa;
  --bb-color-orange-300: #fdba74;
  --bb-color-orange-400: #fb923c;
  --bb-color-orange-500: #f97316;
  --bb-color-orange-600: #ea580c;
  --bb-color-orange-700: #c2410c;
  --bb-color-orange-800: #9a3412;
  --bb-color-orange-900: #7c2d12;
  --bb-color-orange-rgb: 249, 115, 22;
  /* -------------------------------------
     Purple
     Ecosystem accent / discovery / suppliers / fair / event.
  ------------------------------------- */
  --bb-color-purple-50: #f5f3ff;
  --bb-color-purple-100: #ede9fe;
  --bb-color-purple-200: #ddd6fe;
  --bb-color-purple-300: #c4b5fd;
  --bb-color-purple-400: #a78bfa;
  --bb-color-purple-500: #8b5cf6;
  --bb-color-purple-600: #7c3aed;
  --bb-color-purple-700: #6d28d9;
  --bb-color-purple-800: #5b21b6;
  --bb-color-purple-900: #4c1d95;
  --bb-color-purple-rgb: 139, 92, 246;
  /* -------------------------------------
     Pink
     Highlight / campaign / special emphasis.
  ------------------------------------- */
  --bb-color-pink-50: #fdf2f8;
  --bb-color-pink-100: #fce7f3;
  --bb-color-pink-200: #fbcfe8;
  --bb-color-pink-300: #f9a8d4;
  --bb-color-pink-400: #f472b6;
  --bb-color-pink-500: #ec4899;
  --bb-color-pink-600: #db2777;
  --bb-color-pink-700: #be185d;
  --bb-color-pink-800: #9d174d;
  --bb-color-pink-900: #831843;
  --bb-color-pink-rgb: 236, 72, 153;
  /* -------------------------------------
     Green
     Trust / verified / success / secure trade.
  ------------------------------------- */
  --bb-color-green-50: #f0fdf4;
  --bb-color-green-100: #dcfce7;
  --bb-color-green-200: #bbf7d0;
  --bb-color-green-300: #86efac;
  --bb-color-green-400: #4ade80;
  --bb-color-green-500: #22c55e;
  --bb-color-green-600: #16a34a;
  --bb-color-green-700: #15803d;
  --bb-color-green-800: #166534;
  --bb-color-green-900: #14532d;
  --bb-color-green-rgb: 34, 197, 94;
  /* -------------------------------------
     Turquoise
     Tech / API / status / system.
  ------------------------------------- */
  --bb-color-turquoise-50: #ecfeff;
  --bb-color-turquoise-100: #cffafe;
  --bb-color-turquoise-200: #a5f3fc;
  --bb-color-turquoise-300: #67e8f9;
  --bb-color-turquoise-400: #22d3ee;
  --bb-color-turquoise-500: #06b6d4;
  --bb-color-turquoise-600: #0891b2;
  --bb-color-turquoise-700: #0e7490;
  --bb-color-turquoise-800: #155e75;
  --bb-color-turquoise-900: #164e63;
  --bb-color-turquoise-rgb: 6, 182, 212;
  /* -------------------------------------
     Red
     Danger / destructive / critical error.
  ------------------------------------- */
  --bb-color-red-50: #fef2f2;
  --bb-color-red-100: #fee2e2;
  --bb-color-red-200: #fecaca;
  --bb-color-red-300: #fca5a5;
  --bb-color-red-400: #f87171;
  --bb-color-red-500: #ef4444;
  --bb-color-red-600: #dc2626;
  --bb-color-red-700: #b91c1c;
  --bb-color-red-800: #991b1b;
  --bb-color-red-900: #7f1d1d;
  --bb-color-red-rgb: 239, 68, 68;
  /* -------------------------------------
       Beige
       Soft alternative surfaces / light premium accents.
    ------------------------------------- */
  --bb-color-beige-50: #fbfbfa;
  --bb-color-beige-100: #f7f5f0;
  --bb-color-beige-200: #f1ede4;
  --bb-color-beige-300: #e6dfd1;
  --bb-color-beige-400: #d6cab3;
  --bb-color-beige-500: #c2b294;
  --bb-color-beige-600: #a89676;
  --bb-color-beige-700: #8a795d;
  --bb-color-beige-800: #665944;
  --bb-color-beige-900: #40382b;
  --bb-color-beige-rgb: 194, 178, 148;
}

/* =====================================
   Bulbulustur Theme Profile

   Source:
   base/colors.scss

   Responsibility:
   - Does not create raw colors.
   - Consumes --bb-color-* palette tokens.
   - Produces light / navy / dark theme tokens.
   - Keeps legacy aliases alive.
   - Defines brand, semantic, surface, shell tokens.

   Theme attribute:
   html[data-bs-theme="light|navy|dark"]

   Surface attribute:
   html[data-bb-surface="b2b|b2c|fair|event|trust|tech|highlight"]
===================================== */
/* =====================================
   SHARED LEGACY COLOR ALIASES
   These keep old components alive.
   Raw palette remains in base/colors.scss.
===================================== */
:root {
  /* Absolute */
  --bb-white: var(--bb-color-white);
  --bb-black: var(--bb-color-black);
  /* Yellow */
  --bb-yellow-50: var(--bb-color-yellow-50);
  --bb-yellow-100: var(--bb-color-yellow-100);
  --bb-yellow-200: var(--bb-color-yellow-200);
  --bb-yellow-300: var(--bb-color-yellow-300);
  --bb-yellow-400: var(--bb-color-yellow-400);
  --bb-yellow-500: var(--bb-color-yellow-500);
  --bb-yellow-600: var(--bb-color-yellow-600);
  --bb-yellow-700: var(--bb-color-yellow-700);
  --bb-yellow-800: var(--bb-color-yellow-800);
  --bb-yellow-900: var(--bb-color-yellow-900);
  --bb-yellow-rgb: var(--bb-color-yellow-rgb);
  /* Navy */
  --bb-navy-50: var(--bb-color-navy-50);
  --bb-navy-100: var(--bb-color-navy-100);
  --bb-navy-200: var(--bb-color-navy-200);
  --bb-navy-300: var(--bb-color-navy-300);
  --bb-navy-400: var(--bb-color-navy-400);
  --bb-navy-500: var(--bb-color-navy-500);
  --bb-navy-600: var(--bb-color-navy-600);
  --bb-navy-700: var(--bb-color-navy-700);
  --bb-navy-800: var(--bb-color-navy-800);
  --bb-navy-900: var(--bb-color-navy-900);
  --bb-navy-rgb: var(--bb-color-navy-rgb);
  /* Gray */
  --bb-gray-50: var(--bb-color-gray-50);
  --bb-gray-100: var(--bb-color-gray-100);
  --bb-gray-200: var(--bb-color-gray-200);
  --bb-gray-300: var(--bb-color-gray-300);
  --bb-gray-400: var(--bb-color-gray-400);
  --bb-gray-500: var(--bb-color-gray-500);
  --bb-gray-600: var(--bb-color-gray-600);
  --bb-gray-700: var(--bb-color-gray-700);
  --bb-gray-800: var(--bb-color-gray-800);
  --bb-gray-900: var(--bb-color-gray-900);
  /* Coal */
  --bb-coal-50: var(--bb-color-coal-50);
  --bb-coal-100: var(--bb-color-coal-100);
  --bb-coal-200: var(--bb-color-coal-200);
  --bb-coal-300: var(--bb-color-coal-300);
  --bb-coal-400: var(--bb-color-coal-400);
  --bb-coal-500: var(--bb-color-coal-500);
  --bb-coal-600: var(--bb-color-coal-600);
  --bb-coal-700: var(--bb-color-coal-700);
  --bb-coal-800: var(--bb-color-coal-800);
  --bb-coal-900: var(--bb-color-coal-900);
  --bb-coal-black: var(--bb-color-black);
  --bb-coal-rgb: var(--bb-color-coal-rgb);
  /* Ink */
  --bb-ink-50: var(--bb-color-ink-50);
  --bb-ink-100: var(--bb-color-ink-100);
  --bb-ink-200: var(--bb-color-ink-200);
  --bb-ink-300: var(--bb-color-ink-300);
  --bb-ink-400: var(--bb-color-ink-400);
  --bb-ink-500: var(--bb-color-ink-500);
  --bb-ink-600: var(--bb-color-ink-600);
  --bb-ink-700: var(--bb-color-ink-700);
  --bb-ink-800: var(--bb-color-ink-800);
  --bb-ink-900: var(--bb-color-ink-900);
  /* Accent palettes */
  --bb-blue-50: var(--bb-color-blue-50);
  --bb-blue-100: var(--bb-color-blue-100);
  --bb-blue-200: var(--bb-color-blue-200);
  --bb-blue-300: var(--bb-color-blue-300);
  --bb-blue-400: var(--bb-color-blue-400);
  --bb-blue-500: var(--bb-color-blue-500);
  --bb-blue-600: var(--bb-color-blue-600);
  --bb-blue-700: var(--bb-color-blue-700);
  --bb-blue-800: var(--bb-color-blue-800);
  --bb-blue-900: var(--bb-color-blue-900);
  --bb-blue-rgb: var(--bb-color-blue-rgb);
  --bb-orange-50: var(--bb-color-orange-50);
  --bb-orange-100: var(--bb-color-orange-100);
  --bb-orange-200: var(--bb-color-orange-200);
  --bb-orange-300: var(--bb-color-orange-300);
  --bb-orange-400: var(--bb-color-orange-400);
  --bb-orange-500: var(--bb-color-orange-500);
  --bb-orange-600: var(--bb-color-orange-600);
  --bb-orange-700: var(--bb-color-orange-700);
  --bb-orange-800: var(--bb-color-orange-800);
  --bb-orange-900: var(--bb-color-orange-900);
  --bb-orange-rgb: var(--bb-color-orange-rgb);
  --bb-purple-50: var(--bb-color-purple-50);
  --bb-purple-100: var(--bb-color-purple-100);
  --bb-purple-200: var(--bb-color-purple-200);
  --bb-purple-300: var(--bb-color-purple-300);
  --bb-purple-400: var(--bb-color-purple-400);
  --bb-purple-500: var(--bb-color-purple-500);
  --bb-purple-600: var(--bb-color-purple-600);
  --bb-purple-700: var(--bb-color-purple-700);
  --bb-purple-800: var(--bb-color-purple-800);
  --bb-purple-900: var(--bb-color-purple-900);
  --bb-purple-rgb: var(--bb-color-purple-rgb);
  --bb-pink-50: var(--bb-color-pink-50);
  --bb-pink-100: var(--bb-color-pink-100);
  --bb-pink-200: var(--bb-color-pink-200);
  --bb-pink-300: var(--bb-color-pink-300);
  --bb-pink-400: var(--bb-color-pink-400);
  --bb-pink-500: var(--bb-color-pink-500);
  --bb-pink-600: var(--bb-color-pink-600);
  --bb-pink-700: var(--bb-color-pink-700);
  --bb-pink-800: var(--bb-color-pink-800);
  --bb-pink-900: var(--bb-color-pink-900);
  --bb-pink-rgb: var(--bb-color-pink-rgb);
  --bb-green-50: var(--bb-color-green-50);
  --bb-green-100: var(--bb-color-green-100);
  --bb-green-200: var(--bb-color-green-200);
  --bb-green-300: var(--bb-color-green-300);
  --bb-green-400: var(--bb-color-green-400);
  --bb-green-500: var(--bb-color-green-500);
  --bb-green-600: var(--bb-color-green-600);
  --bb-green-700: var(--bb-color-green-700);
  --bb-green-800: var(--bb-color-green-800);
  --bb-green-900: var(--bb-color-green-900);
  --bb-green-rgb: var(--bb-color-green-rgb);
  --bb-turquoise-50: var(--bb-color-turquoise-50);
  --bb-turquoise-100: var(--bb-color-turquoise-100);
  --bb-turquoise-200: var(--bb-color-turquoise-200);
  --bb-turquoise-300: var(--bb-color-turquoise-300);
  --bb-turquoise-400: var(--bb-color-turquoise-400);
  --bb-turquoise-500: var(--bb-color-turquoise-500);
  --bb-turquoise-600: var(--bb-color-turquoise-600);
  --bb-turquoise-700: var(--bb-color-turquoise-700);
  --bb-turquoise-800: var(--bb-color-turquoise-800);
  --bb-turquoise-900: var(--bb-color-turquoise-900);
  --bb-turquoise-rgb: var(--bb-color-turquoise-rgb);
  --bb-red-50: var(--bb-color-red-50);
  --bb-red-100: var(--bb-color-red-100);
  --bb-red-200: var(--bb-color-red-200);
  --bb-red-300: var(--bb-color-red-300);
  --bb-red-400: var(--bb-color-red-400);
  --bb-red-500: var(--bb-color-red-500);
  --bb-red-600: var(--bb-color-red-600);
  --bb-red-700: var(--bb-color-red-700);
  --bb-red-800: var(--bb-color-red-800);
  --bb-red-900: var(--bb-color-red-900);
  --bb-red-rgb: var(--bb-color-red-rgb);
}

/* =====================================
   LIGHT THEME
===================================== */
:root,
html[data-bs-theme=light] {
  color-scheme: light;
  /* Brand core */
  --bb-brand-yellow: var(--bb-color-yellow-500);
  --bb-brand-yellow-rgb: var(--bb-color-yellow-rgb);
  --bb-brand-yellow-hover: var(--bb-color-yellow-600);
  --bb-brand-yellow-active: var(--bb-color-yellow-700);
  --bb-brand-yellow-soft: var(--bb-color-yellow-100);
  --bb-brand-yellow-inverse: var(--bb-color-gray-900);
  --bb-brand-navy: var(--bb-color-navy-900);
  --bb-brand-navy-rgb: var(--bb-color-navy-rgb);
  --bb-brand-navy-soft: var(--bb-color-navy-700);
  --bb-brand-navy-inverse: var(--bb-color-white);
  --bb-brand-accent: var(--bb-color-purple-500);
  --bb-brand-accent-rgb: var(--bb-color-purple-rgb);
  --bb-brand-accent-soft: var(--bb-color-purple-50);
  --bb-brand-accent-muted: var(--bb-color-purple-100);
  --bb-brand-accent-strong: var(--bb-color-purple-700);
  --bb-brand-accent-hover: var(--bb-color-purple-700);
  --bb-brand-accent-active: var(--bb-color-purple-800);
  --bb-brand-accent-inverse: var(--bb-color-white);
  /* Body */
  --bb-body-bg: var(--bb-color-white);
  --bb-body-color: var(--bb-color-gray-900);
  --bb-body-bg-rgb: 255, 255, 255;
  --bb-body-color-rgb: 15, 26, 51;
  /* Surfaces */
  --bb-secondary-bg: var(--bb-color-gray-200);
  --bb-tertiary-bg: var(--bb-color-gray-100);
  --bb-surface-bg: var(--bb-color-white);
  --bb-surface-soft: var(--bb-color-gray-50);
  --bb-surface-muted: var(--bb-color-gray-100);
  --bb-surface-elevated: var(--bb-color-white);
  --bb-secondary-bg-rgb: 232, 237, 243;
  --bb-tertiary-bg-rgb: 244, 246, 248;
  /* Text */
  --bb-emphasis-color: var(--bb-body-color);
  --bb-secondary-color: var(--bb-color-gray-600);
  --bb-tertiary-color: var(--bb-color-gray-700);
  --bb-heading-color: var(--bb-emphasis-color);
  --bb-secondary-color-rgb: 107, 120, 148;
  --bb-tertiary-color-rgb: 68, 80, 102;
  /* Borders */
  --bb-border-color: var(--bb-color-gray-200);
  --bb-border-color-strong: var(--bb-color-gray-300);
  --bb-border-dashed-color: var(--bb-color-gray-300);
  --bb-border-width: 1px;
  /* Shadows */
  --bb-shadow-rgb: 0, 0, 0;
  --bb-shadow-opacity-xs: 0.05;
  --bb-shadow-opacity-sm: 0.06;
  --bb-shadow-opacity-md: 0.08;
  --bb-shadow-opacity-lg: 0.10;
  --bb-shadow-opacity-inset: 0.08;
  --bb-shadow-xs: 0 0.10rem 0.65rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-xs));
  --bb-shadow-sm: 0 0.25rem 1rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-sm));
  --bb-shadow: 0 0.60rem 1.60rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-md));
  --bb-shadow-lg: 0 1.20rem 2.80rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-lg));
  --bb-shadow-inset: inset 0 1px 2px rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-inset));
  /* Brand semantic inputs */
  --bb-brand-primary: var(--bb-brand-yellow);
  --bb-brand-secondary: var(--bb-color-gray-200);
  --bb-brand-success: var(--bb-color-green-500);
  --bb-brand-info: var(--bb-color-blue-500);
  --bb-brand-warning: var(--bb-color-orange-500);
  --bb-brand-danger: var(--bb-color-red-500);
  --bb-brand-dark: var(--bb-brand-navy);
  --bb-brand-light: var(--bb-color-gray-100);
  --bb-brand-primary-rgb: var(--bb-brand-yellow-rgb);
  --bb-brand-secondary-rgb: 232, 237, 243;
  --bb-brand-success-rgb: var(--bb-color-green-rgb);
  --bb-brand-info-rgb: var(--bb-color-blue-rgb);
  --bb-brand-warning-rgb: var(--bb-color-orange-rgb);
  --bb-brand-danger-rgb: var(--bb-color-red-rgb);
  --bb-brand-dark-rgb: var(--bb-brand-navy-rgb);
  --bb-brand-light-rgb: 244, 246, 248;
  --bb-brand-primary-inverse: var(--bb-brand-yellow-inverse);
  --bb-brand-secondary-inverse: var(--bb-color-gray-800);
  --bb-brand-success-inverse: var(--bb-color-white);
  --bb-brand-info-inverse: var(--bb-color-white);
  --bb-brand-warning-inverse: var(--bb-color-gray-900);
  --bb-brand-danger-inverse: var(--bb-color-white);
  --bb-brand-dark-inverse: var(--bb-color-white);
  --bb-brand-light-inverse: var(--bb-color-gray-800);
  /* Shell */
  --bb-header-bg: var(--bb-color-white);
  --bb-header-color: var(--bb-body-color);
  --bb-header-border-color: var(--bb-border-color);
  --bb-header-top-bg: var(--bb-brand-primary);
  --bb-header-top-color: var(--bb-brand-primary-inverse);
  --bb-header-top-muted-color: color-mix(in srgb, var(--bb-brand-primary-inverse) 74%, transparent);
  --bb-header-top-border-color: color-mix(in srgb, var(--bb-brand-primary-inverse) 12%, transparent);
  --bb-header-top-action-bg: color-mix(in srgb, var(--bb-brand-primary-inverse) 8%, transparent);
  --bb-header-top-action-hover-bg: color-mix(in srgb, var(--bb-brand-primary-inverse) 12%, transparent);
  --bb-footer-bg: var(--bb-color-coal-500);
  --bb-footer-bg-soft: var(--bb-color-coal-400);
  --bb-footer-bottom-bg: var(--bb-color-coal-700);
  --bb-footer-color: color-mix(in srgb, var(--bb-color-white) 84%, transparent);
  --bb-footer-muted-color: color-mix(in srgb, var(--bb-color-white) 64%, transparent);
  --bb-footer-subtle-color: color-mix(in srgb, var(--bb-color-white) 48%, transparent);
  --bb-footer-heading-color: var(--bb-color-white);
  --bb-footer-link-color: color-mix(in srgb, var(--bb-color-white) 76%, transparent);
  --bb-footer-link-hover-color: var(--bb-color-white);
  --bb-footer-border-color: color-mix(in srgb, var(--bb-color-white) 11%, transparent);
  --bb-footer-border-color-strong: color-mix(in srgb, var(--bb-color-white) 16%, transparent);
  --bb-footer-surface: color-mix(in srgb, var(--bb-color-white) 6%, transparent);
  --bb-footer-surface-hover: color-mix(in srgb, var(--bb-color-white) 9%, transparent);
  --bb-footer-surface-strong: color-mix(in srgb, var(--bb-color-white) 12%, transparent);
  --bb-footer-accent-surface: color-mix(in srgb, var(--bb-brand-primary) 12%, transparent);
  --bb-footer-accent-border: color-mix(in srgb, var(--bb-brand-primary) 34%, transparent);
  --bb-footer-topline-gradient:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--bb-brand-primary) 54%, transparent) 18%,
      color-mix(in srgb, var(--bb-brand-primary) 86%, transparent) 50%,
      color-mix(in srgb, var(--bb-brand-primary) 54%, transparent) 82%,
      transparent 100%
    );
  --bb-footer-shadow-accent:
    0 0.75rem 1.75rem color-mix(in srgb, var(--bb-brand-primary) 15%, transparent);
  /* Product media */
  --bb-product-media-bg: #f7fafe;
  --bb-product-media-border-color: rgba(7, 31, 53, 0.12);
  /* Links / selection / focus */
  --bb-link-color: var(--bb-color-blue-700);
  --bb-link-hover-color: var(--bb-brand-yellow-active);
  --bb-selection-bg: color-mix(in srgb, var(--bb-brand-primary) 32%, transparent);
  --bb-selection-color: var(--bb-body-color);
  --bb-focus-ring-width: 0.2rem;
  --bb-focus-ring-opacity: 0.35;
  --bb-focus-ring-alpha: 35%;
  --bb-focus-ring-color: var(--bb-brand-primary);
}

/* =====================================
   NAVY THEME
   Soft navy dark.
   Premium marketplace night mode.
===================================== */
html[data-bs-theme=navy] {
  color-scheme: dark;
  /* Theme tuned legacy aliases */
  --bb-yellow-50: color-mix(in srgb, var(--bb-color-yellow-500) 10%, transparent);
  --bb-yellow-100: color-mix(in srgb, var(--bb-color-yellow-500) 16%, transparent);
  --bb-yellow-200: color-mix(in srgb, var(--bb-color-yellow-500) 26%, transparent);
  --bb-yellow-300: var(--bb-color-yellow-300);
  --bb-yellow-400: var(--bb-color-yellow-400);
  --bb-yellow-500: #f6c900;
  --bb-yellow-600: #ffd633;
  --bb-yellow-700: #ffe45c;
  --bb-yellow-rgb: 255, 223, 41;
  /* Brand core */
  --bb-brand-yellow: var(--bb-yellow-500);
  --bb-brand-yellow-rgb: var(--bb-yellow-rgb);
  --bb-brand-yellow-hover: var(--bb-yellow-600);
  --bb-brand-yellow-active: var(--bb-yellow-700);
  --bb-brand-yellow-soft: color-mix(in srgb, var(--bb-brand-yellow) 16%, transparent);
  --bb-brand-yellow-inverse: #0b1017;
  --bb-brand-navy: var(--bb-color-ink-700);
  --bb-brand-navy-rgb: var(--bb-color-ink-rgb);
  --bb-brand-navy-soft: var(--bb-color-ink-500);
  --bb-brand-navy-inverse: #eef3f8;
  --bb-brand-accent: var(--bb-color-purple-400);
  --bb-brand-accent-rgb: 167, 139, 250;
  --bb-brand-accent-soft: color-mix(in srgb, var(--bb-brand-accent) 12%, transparent);
  --bb-brand-accent-muted: color-mix(in srgb, var(--bb-brand-accent) 18%, transparent);
  --bb-brand-accent-strong: var(--bb-color-purple-300);
  --bb-brand-accent-hover: var(--bb-color-purple-300);
  --bb-brand-accent-active: var(--bb-color-purple-200);
  --bb-brand-accent-inverse: var(--bb-color-ink-900);
  /* Body */
  --bb-body-bg: var(--bb-color-ink-500);
  --bb-body-color: #eef3f8;
  --bb-body-bg-rgb: 13, 20, 30;
  --bb-body-color-rgb: 238, 243, 248;
  /* Surfaces */
  --bb-secondary-bg: var(--bb-color-ink-200);
  --bb-tertiary-bg: var(--bb-color-ink-300);
  --bb-surface-bg: var(--bb-color-ink-400);
  --bb-surface-soft: var(--bb-color-ink-300);
  --bb-surface-muted: var(--bb-color-ink-200);
  --bb-surface-elevated: var(--bb-color-ink-100);
  --bb-secondary-bg-rgb: 23, 36, 51;
  --bb-tertiary-bg-rgb: 19, 30, 42;
  /* Text */
  --bb-emphasis-color: #f7fafe;
  --bb-secondary-color: #c4cfda;
  --bb-tertiary-color: #94a2b1;
  --bb-heading-color: var(--bb-emphasis-color);
  --bb-secondary-color-rgb: 196, 207, 218;
  --bb-tertiary-color-rgb: 148, 162, 177;
  /* Borders */
  --bb-border-rgb: 152, 177, 200;
  --bb-border-opacity: 0.13;
  --bb-border-opacity-strong: 0.22;
  --bb-border-opacity-dashed: 0.20;
  --bb-border-color: rgba(var(--bb-border-rgb), var(--bb-border-opacity));
  --bb-border-color-strong: rgba(var(--bb-border-rgb), var(--bb-border-opacity-strong));
  --bb-border-dashed-color: rgba(var(--bb-border-rgb), var(--bb-border-opacity-dashed));
  --bb-border-width: 1px;
  /* Shadows */
  --bb-shadow-rgb: 0, 0, 0;
  --bb-shadow-opacity-xs: 0.26;
  --bb-shadow-opacity-sm: 0.34;
  --bb-shadow-opacity-md: 0.42;
  --bb-shadow-opacity-lg: 0.52;
  --bb-shadow-opacity-inset: 0.30;
  --bb-shadow-xs: 0 0.10rem 0.65rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-xs));
  --bb-shadow-sm: 0 0.25rem 1rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-sm));
  --bb-shadow: 0 0.60rem 1.60rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-md));
  --bb-shadow-lg: 0 1.20rem 2.80rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-lg));
  --bb-shadow-inset: inset 0 1px 2px rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-inset));
  /* Brand semantic inputs */
  --bb-brand-primary: var(--bb-brand-yellow);
  --bb-brand-secondary: var(--bb-color-ink-300);
  --bb-brand-success: var(--bb-color-green-400);
  --bb-brand-info: #8fbce8;
  --bb-brand-warning: #f59e5b;
  --bb-brand-danger: var(--bb-color-red-400);
  --bb-brand-dark: var(--bb-color-ink-800);
  --bb-brand-light: var(--bb-color-ink-200);
  --bb-brand-primary-rgb: var(--bb-brand-yellow-rgb);
  --bb-brand-secondary-rgb: 19, 30, 42;
  --bb-brand-success-rgb: 74, 222, 128;
  --bb-brand-info-rgb: 143, 188, 232;
  --bb-brand-warning-rgb: 245, 158, 91;
  --bb-brand-danger-rgb: 248, 113, 113;
  --bb-brand-dark-rgb: 5, 8, 12;
  --bb-brand-light-rgb: 23, 36, 51;
  --bb-brand-primary-inverse: var(--bb-brand-yellow-inverse);
  --bb-brand-secondary-inverse: #eef3f8;
  --bb-brand-success-inverse: var(--bb-color-ink-900);
  --bb-brand-info-inverse: var(--bb-color-ink-900);
  --bb-brand-warning-inverse: var(--bb-color-ink-900);
  --bb-brand-danger-inverse: var(--bb-color-ink-900);
  --bb-brand-dark-inverse: #eef3f8;
  --bb-brand-light-inverse: #eef3f8;
  /* Shell */
  --bb-header-bg: var(--bb-color-ink-600);
  --bb-header-color: #eef3f8;
  --bb-header-border-color: var(--bb-border-color);
  --bb-header-top-bg: var(--bb-brand-primary);
  --bb-header-top-color: var(--bb-brand-primary-inverse);
  --bb-header-top-muted-color: color-mix(in srgb, var(--bb-brand-primary-inverse) 74%, transparent);
  --bb-header-top-border-color: color-mix(in srgb, var(--bb-brand-primary-inverse) 12%, transparent);
  --bb-header-top-action-bg: color-mix(in srgb, var(--bb-brand-primary-inverse) 8%, transparent);
  --bb-header-top-action-hover-bg: color-mix(in srgb, var(--bb-brand-primary-inverse) 12%, transparent);
  --bb-footer-bg: var(--bb-color-ink-600);
  --bb-footer-bg-soft: var(--bb-color-ink-500);
  --bb-footer-bottom-bg: var(--bb-color-ink-700);
  --bb-footer-color: color-mix(in srgb, var(--bb-color-white) 84%, transparent);
  --bb-footer-muted-color: color-mix(in srgb, var(--bb-color-white) 64%, transparent);
  --bb-footer-subtle-color: color-mix(in srgb, var(--bb-color-white) 48%, transparent);
  --bb-footer-heading-color: var(--bb-color-white);
  --bb-footer-link-color: color-mix(in srgb, var(--bb-color-white) 76%, transparent);
  --bb-footer-link-hover-color: var(--bb-color-white);
  --bb-footer-border-color: color-mix(in srgb, #98b1c8 13%, transparent);
  --bb-footer-border-color-strong: color-mix(in srgb, #98b1c8 22%, transparent);
  --bb-footer-surface: color-mix(in srgb, var(--bb-color-white) 6%, transparent);
  --bb-footer-surface-hover: color-mix(in srgb, var(--bb-color-white) 9%, transparent);
  --bb-footer-surface-strong: color-mix(in srgb, var(--bb-color-white) 12%, transparent);
  --bb-footer-accent-surface: color-mix(in srgb, var(--bb-brand-primary) 12%, transparent);
  --bb-footer-accent-border: color-mix(in srgb, var(--bb-brand-primary) 34%, transparent);
  --bb-footer-topline-gradient:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--bb-brand-primary) 38%, transparent) 18%,
      color-mix(in srgb, var(--bb-brand-primary) 70%, transparent) 50%,
      color-mix(in srgb, var(--bb-brand-primary) 38%, transparent) 82%,
      transparent 100%
    );
  --bb-footer-shadow-accent:
    0 0.75rem 1.75rem color-mix(in srgb, var(--bb-brand-primary) 12%, transparent);
  /* Product media */
  --bb-product-media-bg: #f7fafe;
  --bb-product-media-border-color: rgba(7, 31, 53, 0.12);
  /* Links / selection / focus */
  --bb-link-color: #a7c5e6;
  --bb-link-hover-color: var(--bb-brand-primary);
  --bb-selection-bg: color-mix(in srgb, var(--bb-brand-primary) 36%, transparent);
  --bb-selection-color: var(--bb-body-color);
  --bb-focus-ring-width: 0.2rem;
  --bb-focus-ring-opacity: 0.35;
  --bb-focus-ring-alpha: 35%;
  --bb-focus-ring-color: var(--bb-brand-primary);
}

/* =====================================
   DARK THEME
   Harder dark.
   More coal / less blue than navy theme.
===================================== */
html[data-bs-theme=dark] {
  color-scheme: dark;
  /* Theme tuned legacy aliases */
  --bb-yellow-50: color-mix(in srgb, var(--bb-color-yellow-500) 9%, transparent);
  --bb-yellow-100: color-mix(in srgb, var(--bb-color-yellow-500) 15%, transparent);
  --bb-yellow-200: color-mix(in srgb, var(--bb-color-yellow-500) 24%, transparent);
  --bb-yellow-300: var(--bb-color-yellow-300);
  --bb-yellow-400: var(--bb-color-yellow-400);
  --bb-yellow-500: #f6c900;
  --bb-yellow-600: #ffd633;
  --bb-yellow-700: #ffe45c;
  --bb-yellow-rgb: 255, 223, 41;
  /* Brand core */
  --bb-brand-yellow: var(--bb-yellow-500);
  --bb-brand-yellow-rgb: var(--bb-yellow-rgb);
  --bb-brand-yellow-hover: var(--bb-yellow-600);
  --bb-brand-yellow-active: var(--bb-yellow-700);
  --bb-brand-yellow-soft: color-mix(in srgb, var(--bb-brand-yellow) 14%, transparent);
  --bb-brand-yellow-inverse: #070707;
  --bb-brand-navy: var(--bb-color-coal-900);
  --bb-brand-navy-rgb: 0, 0, 0;
  --bb-brand-navy-soft: var(--bb-color-coal-500);
  --bb-brand-navy-inverse: #f7fafe;
  --bb-brand-accent: var(--bb-color-purple-400);
  --bb-brand-accent-rgb: 167, 139, 250;
  --bb-brand-accent-soft: color-mix(in srgb, var(--bb-brand-accent) 10%, transparent);
  --bb-brand-accent-muted: color-mix(in srgb, var(--bb-brand-accent) 16%, transparent);
  --bb-brand-accent-strong: var(--bb-color-purple-300);
  --bb-brand-accent-hover: var(--bb-color-purple-300);
  --bb-brand-accent-active: var(--bb-color-purple-200);
  --bb-brand-accent-inverse: var(--bb-color-coal-900);
  /* Body */
  --bb-body-bg: var(--bb-color-coal-500);
  --bb-body-color: #f4f7fb;
  --bb-body-bg-rgb: 12, 15, 21;
  --bb-body-color-rgb: 244, 247, 251;
  /* Surfaces */
  --bb-secondary-bg: var(--bb-color-coal-300);
  --bb-tertiary-bg: var(--bb-color-coal-400);
  --bb-surface-bg: var(--bb-color-coal-300);
  --bb-surface-soft: var(--bb-color-coal-400);
  --bb-surface-muted: var(--bb-color-coal-200);
  --bb-surface-elevated: var(--bb-color-coal-100);
  --bb-secondary-bg-rgb: 19, 22, 30;
  --bb-tertiary-bg-rgb: 15, 18, 25;
  /* Text */
  --bb-emphasis-color: #f8fafc;
  --bb-secondary-color: #cbd5e1;
  --bb-tertiary-color: #94a3b8;
  --bb-heading-color: var(--bb-emphasis-color);
  --bb-secondary-color-rgb: 203, 213, 225;
  --bb-tertiary-color-rgb: 148, 163, 184;
  /* Borders */
  --bb-border-rgb: 148, 163, 184;
  --bb-border-opacity: 0.12;
  --bb-border-opacity-strong: 0.20;
  --bb-border-opacity-dashed: 0.18;
  --bb-border-color: rgba(var(--bb-border-rgb), var(--bb-border-opacity));
  --bb-border-color-strong: rgba(var(--bb-border-rgb), var(--bb-border-opacity-strong));
  --bb-border-dashed-color: rgba(var(--bb-border-rgb), var(--bb-border-opacity-dashed));
  --bb-border-width: 1px;
  /* Shadows */
  --bb-shadow-rgb: 0, 0, 0;
  --bb-shadow-opacity-xs: 0.30;
  --bb-shadow-opacity-sm: 0.38;
  --bb-shadow-opacity-md: 0.48;
  --bb-shadow-opacity-lg: 0.58;
  --bb-shadow-opacity-inset: 0.32;
  --bb-shadow-xs: 0 0.10rem 0.65rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-xs));
  --bb-shadow-sm: 0 0.25rem 1rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-sm));
  --bb-shadow: 0 0.60rem 1.60rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-md));
  --bb-shadow-lg: 0 1.20rem 2.80rem rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-lg));
  --bb-shadow-inset: inset 0 1px 2px rgba(var(--bb-shadow-rgb), var(--bb-shadow-opacity-inset));
  /* Brand semantic inputs */
  --bb-brand-primary: var(--bb-brand-yellow);
  --bb-brand-secondary: var(--bb-color-coal-300);
  --bb-brand-success: var(--bb-color-green-400);
  --bb-brand-info: #93c5fd;
  --bb-brand-warning: #fdba74;
  --bb-brand-danger: var(--bb-color-red-400);
  --bb-brand-dark: var(--bb-color-coal-900);
  --bb-brand-light: var(--bb-color-coal-200);
  --bb-brand-primary-rgb: var(--bb-brand-yellow-rgb);
  --bb-brand-secondary-rgb: 19, 22, 30;
  --bb-brand-success-rgb: 74, 222, 128;
  --bb-brand-info-rgb: 147, 197, 253;
  --bb-brand-warning-rgb: 253, 186, 116;
  --bb-brand-danger-rgb: 248, 113, 113;
  --bb-brand-dark-rgb: 0, 0, 0;
  --bb-brand-light-rgb: 22, 26, 34;
  --bb-brand-primary-inverse: var(--bb-brand-yellow-inverse);
  --bb-brand-secondary-inverse: #f8fafc;
  --bb-brand-success-inverse: var(--bb-color-coal-900);
  --bb-brand-info-inverse: var(--bb-color-coal-900);
  --bb-brand-warning-inverse: var(--bb-color-coal-900);
  --bb-brand-danger-inverse: var(--bb-color-coal-900);
  --bb-brand-dark-inverse: #f8fafc;
  --bb-brand-light-inverse: #f8fafc;
  /* Shell */
  --bb-header-bg: var(--bb-color-coal-400);
  --bb-header-color: #f8fafc;
  --bb-header-border-color: var(--bb-border-color);
  --bb-header-top-bg: var(--bb-brand-primary);
  --bb-header-top-color: var(--bb-brand-primary-inverse);
  --bb-header-top-muted-color: color-mix(in srgb, var(--bb-brand-primary-inverse) 74%, transparent);
  --bb-header-top-border-color: color-mix(in srgb, var(--bb-brand-primary-inverse) 12%, transparent);
  --bb-header-top-action-bg: color-mix(in srgb, var(--bb-brand-primary-inverse) 8%, transparent);
  --bb-header-top-action-hover-bg: color-mix(in srgb, var(--bb-brand-primary-inverse) 12%, transparent);
  --bb-footer-bg: var(--bb-color-coal-500);
  --bb-footer-bg-soft: var(--bb-color-coal-400);
  --bb-footer-bottom-bg: var(--bb-color-coal-700);
  --bb-footer-color: color-mix(in srgb, var(--bb-color-white) 84%, transparent);
  --bb-footer-muted-color: color-mix(in srgb, var(--bb-color-white) 64%, transparent);
  --bb-footer-subtle-color: color-mix(in srgb, var(--bb-color-white) 48%, transparent);
  --bb-footer-heading-color: var(--bb-color-white);
  --bb-footer-link-color: color-mix(in srgb, var(--bb-color-white) 76%, transparent);
  --bb-footer-link-hover-color: var(--bb-color-white);
  --bb-footer-border-color: color-mix(in srgb, var(--bb-color-white) 11%, transparent);
  --bb-footer-border-color-strong: color-mix(in srgb, var(--bb-color-white) 16%, transparent);
  --bb-footer-surface: color-mix(in srgb, var(--bb-color-white) 6%, transparent);
  --bb-footer-surface-hover: color-mix(in srgb, var(--bb-color-white) 9%, transparent);
  --bb-footer-surface-strong: color-mix(in srgb, var(--bb-color-white) 12%, transparent);
  --bb-footer-accent-surface: color-mix(in srgb, var(--bb-brand-primary) 12%, transparent);
  --bb-footer-accent-border: color-mix(in srgb, var(--bb-brand-primary) 34%, transparent);
  --bb-footer-topline-gradient:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--bb-brand-primary) 36%, transparent) 18%,
      color-mix(in srgb, var(--bb-brand-primary) 66%, transparent) 50%,
      color-mix(in srgb, var(--bb-brand-primary) 36%, transparent) 82%,
      transparent 100%
    );
  --bb-footer-shadow-accent:
    0 0.75rem 1.75rem color-mix(in srgb, var(--bb-brand-primary) 10%, transparent);
  /* Product media */
  --bb-product-media-bg: #f7fafe;
  --bb-product-media-border-color: rgba(7, 31, 53, 0.12);
  /* Links / selection / focus */
  --bb-link-color: #bfdbfe;
  --bb-link-hover-color: var(--bb-brand-primary);
  --bb-selection-bg: color-mix(in srgb, var(--bb-brand-primary) 34%, transparent);
  --bb-selection-color: var(--bb-body-color);
  --bb-focus-ring-width: 0.2rem;
  --bb-focus-ring-opacity: 0.35;
  --bb-focus-ring-alpha: 35%;
  --bb-focus-ring-color: var(--bb-brand-primary);
}

/* =====================================
   COMMON SEMANTIC TOKENS
   These run after each theme block.
===================================== */
:root,
html[data-bs-theme=light],
html[data-bs-theme=navy],
html[data-bs-theme=dark] {
  /* Theme inputs */
  --bb-theme-primary: var(--bb-brand-primary);
  --bb-theme-secondary: var(--bb-brand-secondary);
  --bb-theme-success: var(--bb-brand-success);
  --bb-theme-info: var(--bb-brand-info);
  --bb-theme-warning: var(--bb-brand-warning);
  --bb-theme-danger: var(--bb-brand-danger);
  --bb-theme-dark: var(--bb-brand-dark);
  --bb-theme-light: var(--bb-brand-light);
  --bb-theme-primary-rgb: var(--bb-brand-primary-rgb);
  --bb-theme-secondary-rgb: var(--bb-brand-secondary-rgb);
  --bb-theme-success-rgb: var(--bb-brand-success-rgb);
  --bb-theme-info-rgb: var(--bb-brand-info-rgb);
  --bb-theme-warning-rgb: var(--bb-brand-warning-rgb);
  --bb-theme-danger-rgb: var(--bb-brand-danger-rgb);
  --bb-theme-dark-rgb: var(--bb-brand-dark-rgb);
  --bb-theme-light-rgb: var(--bb-brand-light-rgb);
  --bb-theme-on-primary: var(--bb-brand-primary-inverse);
  --bb-theme-on-secondary: var(--bb-brand-secondary-inverse);
  --bb-theme-on-success: var(--bb-brand-success-inverse);
  --bb-theme-on-info: var(--bb-brand-info-inverse);
  --bb-theme-on-warning: var(--bb-brand-warning-inverse);
  --bb-theme-on-danger: var(--bb-brand-danger-inverse);
  --bb-theme-on-dark: var(--bb-brand-dark-inverse);
  --bb-theme-on-light: var(--bb-brand-light-inverse);
  /* Semantic aliases */
  --bb-primary: var(--bb-theme-primary);
  --bb-secondary: var(--bb-theme-secondary);
  --bb-success: var(--bb-theme-success);
  --bb-info: var(--bb-theme-info);
  --bb-warning: var(--bb-theme-warning);
  --bb-danger: var(--bb-theme-danger);
  --bb-dark: var(--bb-theme-dark);
  --bb-light: var(--bb-theme-light);
  --bb-primary-rgb: var(--bb-theme-primary-rgb);
  --bb-secondary-rgb: var(--bb-theme-secondary-rgb);
  --bb-success-rgb: var(--bb-theme-success-rgb);
  --bb-info-rgb: var(--bb-theme-info-rgb);
  --bb-warning-rgb: var(--bb-theme-warning-rgb);
  --bb-danger-rgb: var(--bb-theme-danger-rgb);
  --bb-dark-rgb: var(--bb-theme-dark-rgb);
  --bb-light-rgb: var(--bb-theme-light-rgb);
  --bb-primary-inverse: var(--bb-theme-on-primary);
  --bb-secondary-inverse: var(--bb-theme-on-secondary);
  --bb-success-inverse: var(--bb-theme-on-success);
  --bb-info-inverse: var(--bb-theme-on-info);
  --bb-warning-inverse: var(--bb-theme-on-warning);
  --bb-danger-inverse: var(--bb-theme-on-danger);
  --bb-dark-inverse: var(--bb-theme-on-dark);
  --bb-light-inverse: var(--bb-theme-on-light);
  /* Semantic derived */
  --bb-primary-hover: var(--bb-brand-yellow-hover);
  --bb-primary-active: var(--bb-brand-yellow-active);
  --bb-primary-light: var(--bb-brand-yellow-soft);
  --bb-primary-clarity: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-secondary-hover: color-mix(in srgb, var(--bb-secondary) 90%, var(--bb-black));
  --bb-secondary-active: color-mix(in srgb, var(--bb-secondary) 82%, var(--bb-black));
  --bb-secondary-light: color-mix(in srgb, var(--bb-secondary) 35%, transparent);
  --bb-secondary-clarity: color-mix(in srgb, var(--bb-secondary) 65%, transparent);
  --bb-success-hover: var(--bb-color-green-700);
  --bb-success-active: color-mix(in srgb, var(--bb-color-green-700) 88%, var(--bb-black));
  --bb-success-light: color-mix(in srgb, var(--bb-success) 18%, transparent);
  --bb-success-clarity: color-mix(in srgb, var(--bb-success) 18%, transparent);
  --bb-info-hover: var(--bb-color-blue-700);
  --bb-info-active: color-mix(in srgb, var(--bb-color-blue-700) 88%, var(--bb-black));
  --bb-info-light: color-mix(in srgb, var(--bb-info) 16%, transparent);
  --bb-info-clarity: color-mix(in srgb, var(--bb-info) 18%, transparent);
  --bb-warning-hover: var(--bb-color-orange-700);
  --bb-warning-active: color-mix(in srgb, var(--bb-color-orange-700) 88%, var(--bb-black));
  --bb-warning-light: color-mix(in srgb, var(--bb-warning) 18%, transparent);
  --bb-warning-clarity: color-mix(in srgb, var(--bb-warning) 20%, transparent);
  --bb-danger-hover: var(--bb-color-red-700);
  --bb-danger-active: color-mix(in srgb, var(--bb-color-red-700) 88%, var(--bb-black));
  --bb-danger-light: color-mix(in srgb, var(--bb-danger) 18%, transparent);
  --bb-danger-clarity: color-mix(in srgb, var(--bb-danger) 18%, transparent);
  --bb-dark-hover: color-mix(in srgb, var(--bb-dark) 88%, var(--bb-white));
  --bb-dark-active: color-mix(in srgb, var(--bb-dark) 76%, var(--bb-black));
  --bb-dark-light: color-mix(in srgb, var(--bb-dark) 16%, transparent);
  --bb-dark-clarity: color-mix(in srgb, var(--bb-dark) 18%, transparent);
  --bb-light-hover: color-mix(in srgb, var(--bb-light) 88%, var(--bb-black));
  --bb-light-active: color-mix(in srgb, var(--bb-light) 76%, var(--bb-black));
  --bb-light-light: var(--bb-surface-bg);
  --bb-light-clarity: color-mix(in srgb, var(--bb-light) 25%, transparent);
  /* Page accent default */
  --bb-page-accent: var(--bb-primary);
  --bb-page-accent-rgb: var(--bb-primary-rgb);
  --bb-page-accent-soft: var(--bb-yellow-50);
  --bb-page-accent-muted: var(--bb-yellow-100);
  --bb-page-accent-strong: var(--bb-yellow-700);
  --bb-page-accent-hover: var(--bb-primary-hover);
  --bb-page-accent-active: var(--bb-primary-active);
  --bb-page-accent-light: var(--bb-primary-light);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-page-accent) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-primary-inverse);
  /* Motion */
  --bb-motion-fast: 150ms;
  --bb-motion-normal: 200ms;
  --bb-motion-slow: 300ms;
  --bb-ease-in: ease-in;
  --bb-ease-out: ease-out;
  --bb-ease-in-out: ease-in-out;
  --bb-transition-fast: var(--bb-motion-fast) var(--bb-ease-in-out);
  --bb-transition-normal: var(--bb-motion-normal) var(--bb-ease-in-out);
  --bb-transition-slow: var(--bb-motion-slow) var(--bb-ease-in-out);
  --bb-transition-colors:
    color var(--bb-motion-fast) var(--bb-ease-in-out),
    background-color var(--bb-motion-fast) var(--bb-ease-in-out),
    border-color var(--bb-motion-fast) var(--bb-ease-in-out);
  /* State */
  --bb-disabled-opacity: 0.55;
  --bb-loading-opacity: 0.65;
}

/* =====================================
   LIGHT SURFACE ACCENTS
===================================== */
html[data-bs-theme=light][data-bb-surface=b2b],
:root[data-bb-surface=b2b] {
  --bb-page-accent: var(--bb-color-blue-500);
  --bb-page-accent-rgb: var(--bb-color-blue-rgb);
  --bb-page-accent-soft: var(--bb-color-blue-50);
  --bb-page-accent-muted: var(--bb-color-blue-100);
  --bb-page-accent-strong: var(--bb-color-blue-700);
  --bb-page-accent-hover: var(--bb-color-blue-700);
  --bb-page-accent-active: var(--bb-color-blue-800);
  --bb-page-accent-light: var(--bb-color-blue-100);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-color-blue-500) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-color-white);
}

html[data-bs-theme=light][data-bb-surface=b2c],
:root[data-bb-surface=b2c] {
  --bb-page-accent: var(--bb-color-orange-500);
  --bb-page-accent-rgb: var(--bb-color-orange-rgb);
  --bb-page-accent-soft: var(--bb-color-orange-50);
  --bb-page-accent-muted: var(--bb-color-orange-100);
  --bb-page-accent-strong: var(--bb-color-orange-700);
  --bb-page-accent-hover: var(--bb-color-orange-700);
  --bb-page-accent-active: var(--bb-color-orange-800);
  --bb-page-accent-light: var(--bb-color-orange-100);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-color-orange-500) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-color-white);
}

html[data-bs-theme=light][data-bb-surface=fair],
html[data-bs-theme=light][data-bb-surface=event],
:root[data-bb-surface=fair],
:root[data-bb-surface=event] {
  --bb-page-accent: var(--bb-color-purple-500);
  --bb-page-accent-rgb: var(--bb-color-purple-rgb);
  --bb-page-accent-soft: var(--bb-color-purple-50);
  --bb-page-accent-muted: var(--bb-color-purple-100);
  --bb-page-accent-strong: var(--bb-color-purple-700);
  --bb-page-accent-hover: var(--bb-color-purple-700);
  --bb-page-accent-active: var(--bb-color-purple-800);
  --bb-page-accent-light: var(--bb-color-purple-100);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-color-purple-500) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-color-white);
}

html[data-bs-theme=light][data-bb-surface=trust],
:root[data-bb-surface=trust] {
  --bb-page-accent: var(--bb-color-green-500);
  --bb-page-accent-rgb: var(--bb-color-green-rgb);
  --bb-page-accent-soft: var(--bb-color-green-50);
  --bb-page-accent-muted: var(--bb-color-green-100);
  --bb-page-accent-strong: var(--bb-color-green-700);
  --bb-page-accent-hover: var(--bb-color-green-700);
  --bb-page-accent-active: var(--bb-color-green-800);
  --bb-page-accent-light: var(--bb-color-green-100);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-color-green-500) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-color-white);
}

html[data-bs-theme=light][data-bb-surface=tech],
:root[data-bb-surface=tech] {
  --bb-page-accent: var(--bb-color-turquoise-500);
  --bb-page-accent-rgb: var(--bb-color-turquoise-rgb);
  --bb-page-accent-soft: var(--bb-color-turquoise-50);
  --bb-page-accent-muted: var(--bb-color-turquoise-100);
  --bb-page-accent-strong: var(--bb-color-turquoise-700);
  --bb-page-accent-hover: var(--bb-color-turquoise-700);
  --bb-page-accent-active: var(--bb-color-turquoise-800);
  --bb-page-accent-light: var(--bb-color-turquoise-100);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-color-turquoise-500) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-color-white);
}

html[data-bs-theme=light][data-bb-surface=highlight],
:root[data-bb-surface=highlight] {
  --bb-page-accent: var(--bb-color-pink-500);
  --bb-page-accent-rgb: var(--bb-color-pink-rgb);
  --bb-page-accent-soft: var(--bb-color-pink-50);
  --bb-page-accent-muted: var(--bb-color-pink-100);
  --bb-page-accent-strong: var(--bb-color-pink-700);
  --bb-page-accent-hover: var(--bb-color-pink-700);
  --bb-page-accent-active: var(--bb-color-pink-800);
  --bb-page-accent-light: var(--bb-color-pink-100);
  --bb-page-accent-clarity: color-mix(in srgb, var(--bb-color-pink-500) 14%, transparent);
  --bb-page-accent-inverse: var(--bb-color-white);
}

/* =====================================
   NAVY SURFACE ACCENTS
===================================== */
html[data-bs-theme=navy][data-bb-surface=b2b] {
  --bb-page-accent: #8fbce8;
  --bb-page-accent-rgb: 143, 188, 232;
  --bb-page-accent-soft: color-mix(in srgb, #8fbce8 12%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #8fbce8 18%, transparent);
  --bb-page-accent-strong: #b8d6f1;
  --bb-page-accent-hover: #b8d6f1;
  --bb-page-accent-active: #d7ebff;
  --bb-page-accent-light: color-mix(in srgb, #8fbce8 16%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #8fbce8 12%, transparent);
  --bb-page-accent-inverse: var(--bb-color-ink-900);
}

html[data-bs-theme=navy][data-bb-surface=b2c] {
  --bb-page-accent: #f59e5b;
  --bb-page-accent-rgb: 245, 158, 91;
  --bb-page-accent-soft: color-mix(in srgb, #f59e5b 12%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #f59e5b 18%, transparent);
  --bb-page-accent-strong: #fdba74;
  --bb-page-accent-hover: #fdba74;
  --bb-page-accent-active: #fed7aa;
  --bb-page-accent-light: color-mix(in srgb, #f59e5b 16%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #f59e5b 12%, transparent);
  --bb-page-accent-inverse: var(--bb-color-ink-900);
}

html[data-bs-theme=navy][data-bb-surface=fair],
html[data-bs-theme=navy][data-bb-surface=event] {
  --bb-page-accent: #a78bfa;
  --bb-page-accent-rgb: 167, 139, 250;
  --bb-page-accent-soft: color-mix(in srgb, #a78bfa 12%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #a78bfa 18%, transparent);
  --bb-page-accent-strong: #c4b5fd;
  --bb-page-accent-hover: #c4b5fd;
  --bb-page-accent-active: #ddd6fe;
  --bb-page-accent-light: color-mix(in srgb, #a78bfa 16%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #a78bfa 12%, transparent);
  --bb-page-accent-inverse: var(--bb-color-ink-900);
}

html[data-bs-theme=navy][data-bb-surface=trust] {
  --bb-page-accent: #4ade80;
  --bb-page-accent-rgb: 74, 222, 128;
  --bb-page-accent-soft: color-mix(in srgb, #4ade80 12%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #4ade80 18%, transparent);
  --bb-page-accent-strong: #86efac;
  --bb-page-accent-hover: #86efac;
  --bb-page-accent-active: #bbf7d0;
  --bb-page-accent-light: color-mix(in srgb, #4ade80 16%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #4ade80 12%, transparent);
  --bb-page-accent-inverse: var(--bb-color-ink-900);
}

html[data-bs-theme=navy][data-bb-surface=tech] {
  --bb-page-accent: #22d3ee;
  --bb-page-accent-rgb: 34, 211, 238;
  --bb-page-accent-soft: color-mix(in srgb, #22d3ee 12%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #22d3ee 18%, transparent);
  --bb-page-accent-strong: #67e8f9;
  --bb-page-accent-hover: #67e8f9;
  --bb-page-accent-active: #a5f3fc;
  --bb-page-accent-light: color-mix(in srgb, #22d3ee 16%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #22d3ee 12%, transparent);
  --bb-page-accent-inverse: var(--bb-color-ink-900);
}

html[data-bs-theme=navy][data-bb-surface=highlight] {
  --bb-page-accent: #f472b6;
  --bb-page-accent-rgb: 244, 114, 182;
  --bb-page-accent-soft: color-mix(in srgb, #f472b6 12%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #f472b6 18%, transparent);
  --bb-page-accent-strong: #f9a8d4;
  --bb-page-accent-hover: #f9a8d4;
  --bb-page-accent-active: #fbcfe8;
  --bb-page-accent-light: color-mix(in srgb, #f472b6 16%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #f472b6 12%, transparent);
  --bb-page-accent-inverse: var(--bb-color-ink-900);
}

/* =====================================
   DARK SURFACE ACCENTS
===================================== */
html[data-bs-theme=dark][data-bb-surface=b2b] {
  --bb-page-accent: #93c5fd;
  --bb-page-accent-rgb: 147, 197, 253;
  --bb-page-accent-soft: color-mix(in srgb, #93c5fd 10%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #93c5fd 16%, transparent);
  --bb-page-accent-strong: #bfdbfe;
  --bb-page-accent-hover: #bfdbfe;
  --bb-page-accent-active: #dbeafe;
  --bb-page-accent-light: color-mix(in srgb, #93c5fd 14%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #93c5fd 10%, transparent);
  --bb-page-accent-inverse: var(--bb-color-coal-900);
}

html[data-bs-theme=dark][data-bb-surface=b2c] {
  --bb-page-accent: #fdba74;
  --bb-page-accent-rgb: 253, 186, 116;
  --bb-page-accent-soft: color-mix(in srgb, #fdba74 10%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #fdba74 16%, transparent);
  --bb-page-accent-strong: #fed7aa;
  --bb-page-accent-hover: #fed7aa;
  --bb-page-accent-active: #ffedd5;
  --bb-page-accent-light: color-mix(in srgb, #fdba74 14%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #fdba74 10%, transparent);
  --bb-page-accent-inverse: var(--bb-color-coal-900);
}

html[data-bs-theme=dark][data-bb-surface=fair],
html[data-bs-theme=dark][data-bb-surface=event] {
  --bb-page-accent: #a78bfa;
  --bb-page-accent-rgb: 167, 139, 250;
  --bb-page-accent-soft: color-mix(in srgb, #a78bfa 10%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #a78bfa 16%, transparent);
  --bb-page-accent-strong: #c4b5fd;
  --bb-page-accent-hover: #c4b5fd;
  --bb-page-accent-active: #ddd6fe;
  --bb-page-accent-light: color-mix(in srgb, #a78bfa 14%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #a78bfa 10%, transparent);
  --bb-page-accent-inverse: var(--bb-color-coal-900);
}

html[data-bs-theme=dark][data-bb-surface=trust] {
  --bb-page-accent: #4ade80;
  --bb-page-accent-rgb: 74, 222, 128;
  --bb-page-accent-soft: color-mix(in srgb, #4ade80 10%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #4ade80 16%, transparent);
  --bb-page-accent-strong: #86efac;
  --bb-page-accent-hover: #86efac;
  --bb-page-accent-active: #bbf7d0;
  --bb-page-accent-light: color-mix(in srgb, #4ade80 14%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #4ade80 10%, transparent);
  --bb-page-accent-inverse: var(--bb-color-coal-900);
}

html[data-bs-theme=dark][data-bb-surface=tech] {
  --bb-page-accent: #22d3ee;
  --bb-page-accent-rgb: 34, 211, 238;
  --bb-page-accent-soft: color-mix(in srgb, #22d3ee 10%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #22d3ee 16%, transparent);
  --bb-page-accent-strong: #67e8f9;
  --bb-page-accent-hover: #67e8f9;
  --bb-page-accent-active: #a5f3fc;
  --bb-page-accent-light: color-mix(in srgb, #22d3ee 14%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #22d3ee 10%, transparent);
  --bb-page-accent-inverse: var(--bb-color-coal-900);
}

html[data-bs-theme=dark][data-bb-surface=highlight] {
  --bb-page-accent: #f472b6;
  --bb-page-accent-rgb: 244, 114, 182;
  --bb-page-accent-soft: color-mix(in srgb, #f472b6 10%, transparent);
  --bb-page-accent-muted: color-mix(in srgb, #f472b6 16%, transparent);
  --bb-page-accent-strong: #f9a8d4;
  --bb-page-accent-hover: #f9a8d4;
  --bb-page-accent-active: #fbcfe8;
  --bb-page-accent-light: color-mix(in srgb, #f472b6 14%, transparent);
  --bb-page-accent-clarity: color-mix(in srgb, #f472b6 10%, transparent);
  --bb-page-accent-inverse: var(--bb-color-coal-900);
}

/* =====================================
   Bulbulustur Theme - Radius Tokens
   Bootstrap-parallel radius scale
   Source: bb-* radius tokens
===================================== */
:root {
  --bb-radius-none: 0;
  --bb-radius-xs: 0.2rem;
  --bb-radius-sm: 0.4rem;
  --bb-radius: 0.475rem;
  --bb-radius-lg: 0.65rem;
  --bb-radius-xl: 1rem;
  --bb-radius-2xl: 1.5rem;
  --bb-radius-pill: 999rem;
}

/* =====================================
   Bulbulustur Theme - Token Engine
   Produces semantic tokens from theme base tokens
   Dark / Light / Navy aware mixing
   Includes fallback for browsers without color-mix()
===================================== */
/* ------------------------------------------------
   Mix behavior
------------------------------------------------ */
:root,
html[data-bs-theme=light] {
  --bb-mix-shade: var(--bb-black);
  --bb-mix-tint: var(--bb-white);
  --bb-active-mix: var(--bb-mix-shade);
  --bb-hover-mix: var(--bb-mix-shade);
  --bb-light-ratio: 12%;
  --bb-clarity-ratio: 18%;
}

html[data-bs-theme=navy] {
  --bb-mix-shade: var(--bb-black);
  --bb-mix-tint: var(--bb-white);
  --bb-active-mix: var(--bb-mix-tint);
  --bb-hover-mix: var(--bb-mix-tint);
  --bb-light-ratio: 13%;
  --bb-clarity-ratio: 20%;
}

html[data-bs-theme=dark] {
  --bb-mix-shade: var(--bb-black);
  --bb-mix-tint: var(--bb-white);
  --bb-active-mix: var(--bb-mix-tint);
  --bb-hover-mix: var(--bb-mix-tint);
  --bb-light-ratio: 14%;
  --bb-clarity-ratio: 22%;
}

/* ------------------------------------------------
   Semantic tokens
------------------------------------------------ */
:root,
html[data-bs-theme=light],
html[data-bs-theme=navy],
html[data-bs-theme=dark] {
  /* Base */
  --bb-primary: var(--bb-theme-primary);
  --bb-secondary: var(--bb-theme-secondary);
  --bb-success: var(--bb-theme-success);
  --bb-info: var(--bb-theme-info);
  --bb-warning: var(--bb-theme-warning);
  --bb-danger: var(--bb-theme-danger);
  --bb-dark: var(--bb-theme-dark);
  --bb-light: var(--bb-theme-light);
  /* Active */
  --bb-primary-active: color-mix(in srgb, var(--bb-primary) 85%, var(--bb-active-mix));
  --bb-secondary-active: color-mix(in srgb, var(--bb-secondary) 85%, var(--bb-active-mix));
  --bb-success-active: color-mix(in srgb, var(--bb-success) 85%, var(--bb-active-mix));
  --bb-info-active: color-mix(in srgb, var(--bb-info) 85%, var(--bb-active-mix));
  --bb-warning-active: color-mix(in srgb, var(--bb-warning) 85%, var(--bb-active-mix));
  --bb-danger-active: color-mix(in srgb, var(--bb-danger) 85%, var(--bb-active-mix));
  --bb-dark-active: color-mix(in srgb, var(--bb-coal-300) 85%, var(--bb-active-mix));
  --bb-light-active: color-mix(in srgb, var(--bb-light) 85%, var(--bb-active-mix));
  /* Hover */
  --bb-primary-hover: color-mix(in srgb, var(--bb-primary) 90%, var(--bb-hover-mix));
  --bb-secondary-hover: color-mix(in srgb, var(--bb-secondary) 90%, var(--bb-hover-mix));
  --bb-success-hover: color-mix(in srgb, var(--bb-success) 90%, var(--bb-hover-mix));
  --bb-info-hover: color-mix(in srgb, var(--bb-info) 90%, var(--bb-hover-mix));
  --bb-warning-hover: color-mix(in srgb, var(--bb-warning) 90%, var(--bb-hover-mix));
  --bb-danger-hover: color-mix(in srgb, var(--bb-danger) 90%, var(--bb-hover-mix));
  --bb-dark-hover: color-mix(in srgb, var(--bb-coal-300) 90%, var(--bb-hover-mix));
  --bb-light-hover: color-mix(in srgb, var(--bb-light) 90%, var(--bb-hover-mix));
  /* Light */
  --bb-primary-light: color-mix(in srgb, var(--bb-primary) var(--bb-light-ratio), transparent);
  --bb-secondary-light: color-mix(in srgb, var(--bb-secondary) var(--bb-light-ratio), transparent);
  --bb-success-light: color-mix(in srgb, var(--bb-success) var(--bb-light-ratio), transparent);
  --bb-info-light: color-mix(in srgb, var(--bb-info) var(--bb-light-ratio), transparent);
  --bb-warning-light: color-mix(in srgb, var(--bb-warning) var(--bb-light-ratio), transparent);
  --bb-danger-light: color-mix(in srgb, var(--bb-danger) var(--bb-light-ratio), transparent);
  --bb-dark-light: color-mix(in srgb, var(--bb-coal-300) 10%, transparent);
  --bb-light-light: var(--bb-body-bg);
  /* Clarity */
  --bb-primary-clarity: color-mix(in srgb, var(--bb-primary) var(--bb-clarity-ratio), transparent);
  --bb-secondary-clarity: color-mix(in srgb, var(--bb-secondary) 65%, transparent);
  --bb-success-clarity: color-mix(in srgb, var(--bb-success) var(--bb-clarity-ratio), transparent);
  --bb-info-clarity: color-mix(in srgb, var(--bb-info) var(--bb-clarity-ratio), transparent);
  --bb-warning-clarity: color-mix(in srgb, var(--bb-warning) 20%, transparent);
  --bb-danger-clarity: color-mix(in srgb, var(--bb-danger) var(--bb-clarity-ratio), transparent);
  --bb-dark-clarity: color-mix(in srgb, var(--bb-coal-300) 15%, transparent);
  --bb-light-clarity: color-mix(in srgb, var(--bb-light) 25%, transparent);
  /* Inverse */
  --bb-primary-inverse: var(--bb-theme-on-primary);
  --bb-secondary-inverse: var(--bb-theme-on-secondary);
  --bb-success-inverse: var(--bb-theme-on-success);
  --bb-info-inverse: var(--bb-theme-on-info);
  --bb-warning-inverse: var(--bb-theme-on-warning);
  --bb-danger-inverse: var(--bb-theme-on-danger);
  --bb-dark-inverse: var(--bb-theme-on-dark);
  --bb-light-inverse: var(--bb-theme-on-light);
  /* State */
  --bb-state-error: var(--bb-danger);
  --bb-state-success: var(--bb-success);
  /* Links */
  --bb-link-color: var(--bb-primary);
  --bb-link-hover-color: var(--bb-primary-active);
}

/* ------------------------------------------------
   Fallbacks: no color-mix support
------------------------------------------------ */
@supports not (color: color-mix(in srgb, var(--bb-black) 50%, var(--bb-white))) {
  :root,
  html[data-bs-theme=light],
  html[data-bs-theme=navy],
  html[data-bs-theme=dark] {
    --bb-primary-active: var(--bb-primary);
    --bb-secondary-active: var(--bb-secondary);
    --bb-success-active: var(--bb-success);
    --bb-info-active: var(--bb-info);
    --bb-warning-active: var(--bb-warning);
    --bb-danger-active: var(--bb-danger);
    --bb-dark-active: var(--bb-dark);
    --bb-light-active: var(--bb-light);
    --bb-primary-hover: var(--bb-primary);
    --bb-secondary-hover: var(--bb-secondary);
    --bb-success-hover: var(--bb-success);
    --bb-info-hover: var(--bb-info);
    --bb-warning-hover: var(--bb-warning);
    --bb-danger-hover: var(--bb-danger);
    --bb-dark-hover: var(--bb-dark);
    --bb-light-hover: var(--bb-light);
    --bb-primary-light: rgba(var(--bb-primary-rgb), 0.12);
    --bb-secondary-light: rgba(var(--bb-secondary-rgb), 0.12);
    --bb-success-light: rgba(var(--bb-success-rgb), 0.12);
    --bb-info-light: rgba(var(--bb-info-rgb), 0.12);
    --bb-warning-light: rgba(var(--bb-warning-rgb), 0.14);
    --bb-danger-light: rgba(var(--bb-danger-rgb), 0.12);
    --bb-dark-light: rgba(var(--bb-dark-rgb), 0.10);
    --bb-light-light: var(--bb-body-bg);
    --bb-primary-clarity: rgba(var(--bb-primary-rgb), 0.18);
    --bb-secondary-clarity: rgba(var(--bb-secondary-rgb), 0.18);
    --bb-success-clarity: rgba(var(--bb-success-rgb), 0.18);
    --bb-info-clarity: rgba(var(--bb-info-rgb), 0.18);
    --bb-warning-clarity: rgba(var(--bb-warning-rgb), 0.20);
    --bb-danger-clarity: rgba(var(--bb-danger-rgb), 0.18);
    --bb-dark-clarity: rgba(var(--bb-dark-rgb), 0.15);
    --bb-light-clarity: rgba(var(--bb-light-rgb), 0.25);
    --bb-link-color: var(--bb-primary);
    --bb-link-hover-color: var(--bb-primary);
  }
}
/* =====================================
   Bulbulustur Theme - Typography
   Google Font Supported / Inter First

   CDN Include should be placed in layout/head:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">

   Bootstrap-parallel token names
   Theme: data-bs-theme="light|navy|dark"
   Density: data-bb-density="compact"

   Typography Decision:
   - 12px = micro only / legal / extreme helper
   - 13px = tiny helper / id / timestamp
   - 14px = compact UI / badge / chip / dense table
   - 16px = body / base content
   - 17px = comfortable content / support text
   - 19px = lead / strong body / compact card title
   - 22px = card title / section subtitle
   - 26px = section title support
   - 32px = strong title / page title support

   Important:
   - Font-size tokens use rem.
   - Root remains 16px. Do not upscale html globally.
   - Typography consumes theme tokens.
   - Typography does not create colors.
===================================== */
/* =====================================
   Typography Tokens
===================================== */
:root,
html[data-bs-theme=light],
html[data-bs-theme=navy],
html[data-bs-theme=dark] {
  /* -------------------------------------
     Font Stack
  ------------------------------------- */
  --bb-font-sans:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  --bb-font-display: var(--bb-font-sans);
  --bb-font-heading: var(--bb-font-sans);
  --bb-font-mono:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      monospace;
  --bb-font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  --bb-font-variation-settings: "opsz" 16;
  /* -------------------------------------
     Root Scale
     Keep browser baseline stable.
  ------------------------------------- */
  --bb-root-font-size: 16px;
  /* -------------------------------------
     Font Size Scale
  ------------------------------------- */
  --bb-fs-2xs: 0.75rem; /* 12px */
  --bb-fs-xs: 0.8125rem; /* 13px */
  --bb-fs-sm: 0.875rem; /* 14px */
  --bb-fs-base: 1rem; /* 16px */
  --bb-fs-md: 1.0625rem; /* 17px */
  --bb-fs-lg: 1.1875rem; /* 19px */
  --bb-fs-xl: 1.375rem; /* 22px */
  --bb-fs-2xl: 1.625rem; /* 26px */
  --bb-fs-3xl: 2rem; /* 32px */
  --bb-fs-display-sm: 1.875rem; /* 30px */
  --bb-fs-display-md: 2.5rem; /* 40px */
  --bb-fs-display-lg: 3.25rem; /* 52px */
  --bb-fs-display-xl: 4rem; /* 64px */
  /* -------------------------------------
     Heading Scale
  ------------------------------------- */
  --bb-h1: 2rem; /* 32px */
  --bb-h2: 1.75rem; /* 28px */
  --bb-h3: 1.5rem; /* 24px */
  --bb-h4: 1.3125rem; /* 21px */
  --bb-h5: 1.1875rem; /* 19px */
  --bb-h6: 1rem; /* 16px */
  /* -------------------------------------
     Font Weight Scale
  ------------------------------------- */
  --bb-fw-thin: 100;
  --bb-fw-extralight: 200;
  --bb-fw-light: 300;
  --bb-fw-normal: 400;
  --bb-fw-medium: 500;
  --bb-fw-semibold: 600;
  --bb-fw-bold: 700;
  --bb-fw-extrabold: 800;
  --bb-fw-black: 900;
  /* -------------------------------------
     Semantic Font Weight Tokens
  ------------------------------------- */
  --bb-fw-body: var(--bb-fw-normal);
  --bb-fw-ui: var(--bb-fw-medium);
  --bb-fw-navigation: var(--bb-fw-medium);
  --bb-fw-navigation-active: var(--bb-fw-semibold);
  --bb-fw-action: var(--bb-fw-semibold);
  --bb-fw-title: var(--bb-fw-semibold);
  --bb-fw-title-strong: var(--bb-fw-bold);
  --bb-fw-display: var(--bb-fw-extrabold);
  /* -------------------------------------
     Line Height
  ------------------------------------- */
  --bb-line-height-tight: 1.1;
  --bb-line-height-display: 1.06;
  --bb-line-height-heading: 1.16;
  --bb-line-height-base: 1.65;
  --bb-line-height-content: 1.72;
  --bb-line-height-loose: 1.8;
  --bb-heading-letter-spacing: -0.02em;
  --bb-display-letter-spacing: -0.045em;
  /* -------------------------------------
     Text Rhythm
  ------------------------------------- */
  --bb-heading-margin-bottom: var(--bb-space-2, 0.5rem);
  --bb-paragraph-margin-bottom: var(--bb-space-4, 1rem);
  /* -------------------------------------
     Element Tokens
  ------------------------------------- */
  --bb-small-font-size: var(--bb-fs-sm);
  --bb-list-padding-left: 2rem;
  --bb-list-item-margin-bottom: var(--bb-space-1, 0.25rem);
  --bb-blockquote-padding-y: var(--bb-space-3, 0.75rem);
  --bb-blockquote-padding-x: var(--bb-space-4, 1rem);
  --bb-blockquote-border-width: 0.1875rem;
  --bb-code-font-size: var(--bb-fs-sm);
  --bb-code-padding-y: 0.2em;
  --bb-code-padding-x: 0.4em;
  --bb-pre-padding: var(--bb-space-4, 1rem);
  --bb-hr-margin-y: 1.5rem;
  --bb-border-opacity-muted: 0.6;
  --bb-lead-font-size: var(--bb-fs-md);
  --bb-lead-font-weight: var(--bb-fw-normal);
  --bb-lead-line-height: var(--bb-line-height-loose);
  --bb-mark-padding-y: var(--bb-space-1, 0.25rem);
  --bb-mark-padding-x: var(--bb-space-2, 0.5rem);
  --bb-mark-radius: 0.2em;
  --bb-sup-offset: -0.5em;
  --bb-sub-offset: -0.25em;
  /* -------------------------------------
     Component Typography Bridges
  ------------------------------------- */
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-size-sm: var(--bb-fs-xs);
  --bb-chip-line-height: var(--bb-line-height-heading);
  --bb-badge-font-size: var(--bb-fs-sm);
  --bb-badge-font-size-sm: var(--bb-fs-xs);
  --bb-table-font-size: var(--bb-fs-sm);
  --bb-table-head-font-size: var(--bb-fs-sm);
  --bb-table-line-height: var(--bb-line-height-base);
  --bb-form-label-font-size: var(--bb-fs-sm);
  --bb-form-control-font-size: var(--bb-fs-base);
  --bb-form-help-font-size: var(--bb-fs-sm);
  --bb-page-text-font-size: var(--bb-fs-base);
  --bb-page-lead-font-size: var(--bb-fs-md);
  --bb-section-text-font-size: var(--bb-fs-base);
  /* -------------------------------------
     Legacy / Alternate Typography Bridges
  ------------------------------------- */
  --bb-font-size-2xs: var(--bb-fs-2xs);
  --bb-font-size-xs: var(--bb-fs-xs);
  --bb-font-size-sm: var(--bb-fs-sm);
  --bb-font-size-base: var(--bb-fs-base);
  --bb-font-size-md: var(--bb-fs-md);
  --bb-font-size-lg: var(--bb-fs-lg);
  --bb-font-size-xl: var(--bb-fs-xl);
  --bb-font-size-2xl: var(--bb-fs-2xl);
  --bb-font-size-3xl: var(--bb-fs-3xl);
  --bb-font-size-4xl: var(--bb-fs-display-md);
  --bb-font-size-5xl: var(--bb-fs-display-lg);
  --bb-text-2xs: var(--bb-fs-2xs);
  --bb-text-xs: var(--bb-fs-xs);
  --bb-text-sm: var(--bb-fs-sm);
  --bb-text-base: var(--bb-fs-base);
  --bb-text-md: var(--bb-fs-md);
  --bb-text-lg: var(--bb-fs-lg);
  --bb-text-xl: var(--bb-fs-xl);
  --bb-text-2xl: var(--bb-fs-2xl);
  --bb-text-3xl: var(--bb-fs-3xl);
  --bb-text-4xl: var(--bb-fs-display-md);
  /* -------------------------------------
     Bootstrap Typography Bridge
  ------------------------------------- */
  --bs-body-font-family: var(--bb-font-sans);
  --bs-body-font-size: var(--bb-fs-base);
  --bs-body-font-weight: var(--bb-fw-body);
  --bs-body-line-height: var(--bb-line-height-base);
  --bs-headings-font-family: var(--bb-font-heading);
  --bs-headings-font-weight: var(--bb-fw-title);
  --bs-headings-line-height: var(--bb-line-height-heading);
  --bs-font-monospace: var(--bb-font-mono);
  --bs-text-muted: var(--bb-secondary-color);
}

/* =====================================
   Navy Mode Typography Micro Tuning
===================================== */
html[data-bs-theme=navy] {
  --bb-line-height-base: 1.67;
  --bb-line-height-heading: 1.19;
  --bb-heading-letter-spacing: -0.015em;
  --bb-fw-title: var(--bb-fw-semibold);
  --bb-fw-display: var(--bb-fw-extrabold);
  --bb-font-variation-settings: "opsz" 17;
}

/* =====================================
   Dark Mode Typography Micro Tuning
===================================== */
html[data-bs-theme=dark] {
  --bb-line-height-base: 1.68;
  --bb-line-height-heading: 1.2;
  --bb-heading-letter-spacing: -0.01em;
  --bb-fw-title: var(--bb-fw-semibold);
  --bb-fw-display: var(--bb-fw-extrabold);
  --bb-font-variation-settings: "opsz" 17;
}

/* =====================================
   Density: Compact
   For admin/dense panels only.
===================================== */
html[data-bb-density=compact],
[data-bb-density=compact] {
  --bb-root-font-size: 16px;
  --bb-fs-2xs: 0.6875rem; /* 11px */
  --bb-fs-xs: 0.75rem; /* 12px */
  --bb-fs-sm: 0.8125rem; /* 13px */
  --bb-fs-base: 0.9375rem; /* 15px */
  --bb-fs-md: 1rem; /* 16px */
  --bb-fs-lg: 1.125rem; /* 18px */
  --bb-fs-xl: 1.25rem; /* 20px */
  --bb-fs-2xl: 1.5rem; /* 24px */
  --bb-fs-3xl: 1.75rem; /* 28px */
  --bb-fs-display-sm: 1.75rem;
  --bb-fs-display-md: 2.25rem;
  --bb-fs-display-lg: 2.875rem;
  --bb-fs-display-xl: 3.5rem;
  --bb-h1: 1.875rem;
  --bb-h2: 1.625rem;
  --bb-h3: 1.375rem;
  --bb-h4: 1.1875rem;
  --bb-h5: 1rem;
  --bb-h6: 0.9375rem;
  --bb-line-height-base: 1.58;
  --bb-line-height-heading: 1.18;
  --bb-line-height-content: 1.64;
}

/* =====================================
   Desktop Upscale
===================================== */
@media (min-width: 992px) {
  :root,
  html[data-bs-theme=light],
  html[data-bs-theme=navy],
  html[data-bs-theme=dark] {
    --bb-h1: 2.875rem; /* 46px */
    --bb-h2: 2.25rem; /* 36px */
    --bb-h3: 1.75rem; /* 28px */
    --bb-h4: 1.375rem; /* 22px */
    --bb-h5: 1.1875rem; /* 19px */
    --bb-h6: 1rem; /* 16px */
    --bb-fs-display-sm: 1.875rem; /* 30px */
    --bb-fs-display-md: 2.5rem; /* 40px */
    --bb-fs-display-lg: 3.25rem; /* 52px */
    --bb-fs-display-xl: 4rem; /* 64px */
  }
  html[data-bb-density=compact],
  [data-bb-density=compact] {
    --bb-h1: 2.125rem;
    --bb-h2: 1.75rem;
    --bb-h3: 1.5rem;
    --bb-h4: 1.25rem;
    --bb-fs-display-sm: 1.75rem;
    --bb-fs-display-md: 2.25rem;
    --bb-fs-display-lg: 2.875rem;
  }
}
/* =====================================
   Wide Desktop Upscale
   Do not upscale root font-size.
===================================== */
@media (min-width: 1400px) {
  :root,
  html[data-bs-theme=light],
  html[data-bs-theme=navy],
  html[data-bs-theme=dark] {
    --bb-h1: 3rem; /* 48px */
    --bb-h2: 2.375rem; /* 38px */
    --bb-h3: 1.75rem; /* 28px */
    --bb-fs-display-lg: 3.625rem; /* 58px */
    --bb-fs-display-xl: 4.5rem; /* 72px */
  }
}
/* =====================================
   Small Mobile Tuning
===================================== */
@media (max-width: 480px) {
  :root,
  html[data-bs-theme=light],
  html[data-bs-theme=navy],
  html[data-bs-theme=dark] {
    --bb-fs-2xs: 0.75rem;
    --bb-fs-display-lg: 2.75rem;
    --bb-fs-display-xl: 3rem;
  }
}
/* =====================================
   Base
===================================== */
html {
  font-size: var(--bb-root-font-size);
}

body {
  color: var(--bb-body-color);
  background-color: var(--bb-body-bg);
  font-family: var(--bb-font-sans);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bb-fw-body);
  line-height: var(--bb-line-height-base);
  font-feature-settings: var(--bb-font-feature-settings);
  font-variation-settings: var(--bb-font-variation-settings);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* =====================================
   Selection
===================================== */
::selection {
  color: var(--bb-selection-color);
  background-color: var(--bb-selection-bg);
}

::-moz-selection {
  color: var(--bb-selection-color);
  background-color: var(--bb-selection-bg);
}

/* =====================================
   Headings
===================================== */
h1,
.h1 {
  font-size: var(--bb-h1);
}

h2,
.h2 {
  font-size: var(--bb-h2);
}

h3,
.h3 {
  font-size: var(--bb-h3);
}

h4,
.h4 {
  font-size: var(--bb-h4);
}

h5,
.h5 {
  font-size: var(--bb-h5);
}

h6,
.h6 {
  font-size: var(--bb-h6);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  margin-bottom: var(--bb-heading-margin-bottom);
  color: var(--bb-heading-color, var(--bb-emphasis-color));
  font-family: var(--bb-font-heading);
  font-weight: var(--bb-fw-title);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-heading-letter-spacing);
}

/* =====================================
   Display Helpers
===================================== */
.bb-display-sm,
.bb-display-md,
.bb-display-lg,
.bb-display-xl {
  margin-top: 0;
  margin-bottom: var(--bb-heading-margin-bottom);
  color: var(--bb-heading-color, var(--bb-emphasis-color));
  font-family: var(--bb-font-display);
  font-weight: var(--bb-fw-display);
  line-height: var(--bb-line-height-display);
  letter-spacing: var(--bb-display-letter-spacing);
}

.bb-display-sm {
  font-size: var(--bb-fs-display-sm);
}

.bb-display-md {
  font-size: var(--bb-fs-display-md);
}

.bb-display-lg {
  font-size: var(--bb-fs-display-lg);
}

.bb-display-xl {
  font-size: var(--bb-fs-display-xl);
}

/* =====================================
   Text Elements
===================================== */
p {
  margin-top: 0;
  margin-bottom: var(--bb-paragraph-margin-bottom);
}

.bb-lead {
  color: var(--bb-secondary-color);
  font-size: var(--bb-page-lead-font-size);
  font-weight: var(--bb-lead-font-weight);
  line-height: var(--bb-lead-line-height);
}

small,
.small {
  color: var(--bb-secondary-color);
  font-size: var(--bb-small-font-size);
  line-height: var(--bb-line-height-base);
}

a {
  color: var(--bb-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--bb-link-hover-color);
  text-decoration: underline;
}

/* =====================================
   Inline Elements
===================================== */
abbr[title] {
  cursor: help;
  text-decoration: underline dotted;
}

mark {
  padding: var(--bb-mark-padding-y) var(--bb-mark-padding-x);
  color: var(--bb-warning-inverse);
  background-color: var(--bb-warning-light);
  border-radius: var(--bb-mark-radius);
}

sup,
sub {
  position: relative;
  font-size: var(--bb-fs-xs);
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: var(--bb-sup-offset);
}

sub {
  bottom: var(--bb-sub-offset);
}

/* =====================================
   Lists
===================================== */
ul,
ol {
  margin-top: 0;
  margin-bottom: var(--bb-paragraph-margin-bottom);
  padding-left: var(--bb-list-padding-left);
}

li {
  margin-bottom: var(--bb-list-item-margin-bottom);
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

/* =====================================
   Definition List
===================================== */
dl {
  margin: 0 0 var(--bb-paragraph-margin-bottom);
}

dt {
  margin-top: var(--bb-space-3, 0.75rem);
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

dd {
  margin-left: var(--bb-space-4, 1rem);
  color: var(--bb-secondary-color);
}

/* =====================================
   Blockquote
===================================== */
blockquote {
  margin: 0 0 var(--bb-paragraph-margin-bottom);
  padding: var(--bb-blockquote-padding-y) var(--bb-blockquote-padding-x);
  color: var(--bb-secondary-color);
  border-left: var(--bb-blockquote-border-width) solid var(--bb-border-color);
  font-style: italic;
}

/* =====================================
   Code
===================================== */
code,
kbd,
samp,
pre {
  font-family: var(--bb-font-mono);
}

code {
  padding: var(--bb-code-padding-y) var(--bb-code-padding-x);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-code-font-size);
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-sm);
}

pre {
  display: block;
  overflow: auto;
  margin: 0 0 var(--bb-paragraph-margin-bottom);
  padding: var(--bb-pre-padding);
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

kbd {
  padding: var(--bb-space-1, 0.25rem) var(--bb-space-2, 0.5rem);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-code-font-size);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-sm);
}

/* =====================================
   HR
===================================== */
hr {
  margin: var(--bb-hr-margin-y) 0;
  border: 0;
  border-top: 1px solid var(--bb-border-color);
  opacity: var(--bb-border-opacity-muted);
}

/* =====================================
   Font Size Utilities
===================================== */
.bb-fs-2xs {
  font-size: var(--bb-fs-2xs) !important;
}

.bb-fs-xs {
  font-size: var(--bb-fs-xs) !important;
}

.bb-fs-sm {
  font-size: var(--bb-fs-sm) !important;
}

.bb-fs-base {
  font-size: var(--bb-fs-base) !important;
}

.bb-fs-md {
  font-size: var(--bb-fs-md) !important;
}

.bb-fs-lg {
  font-size: var(--bb-fs-lg) !important;
}

.bb-fs-xl {
  font-size: var(--bb-fs-xl) !important;
}

.bb-fs-2xl {
  font-size: var(--bb-fs-2xl) !important;
}

.bb-fs-3xl {
  font-size: var(--bb-fs-3xl) !important;
}

.bb-fs-display-sm {
  font-size: var(--bb-fs-display-sm) !important;
}

.bb-fs-display-md {
  font-size: var(--bb-fs-display-md) !important;
}

.bb-fs-display-lg {
  font-size: var(--bb-fs-display-lg) !important;
}

.bb-fs-display-xl {
  font-size: var(--bb-fs-display-xl) !important;
}

/* =====================================
   Font Weight Utilities
===================================== */
.bb-fw-thin {
  font-weight: var(--bb-fw-thin) !important;
}

.bb-fw-extralight {
  font-weight: var(--bb-fw-extralight) !important;
}

.bb-fw-light {
  font-weight: var(--bb-fw-light) !important;
}

.bb-fw-normal {
  font-weight: var(--bb-fw-normal) !important;
}

.bb-fw-medium {
  font-weight: var(--bb-fw-medium) !important;
}

.bb-fw-semibold {
  font-weight: var(--bb-fw-semibold) !important;
}

.bb-fw-bold {
  font-weight: var(--bb-fw-bold) !important;
}

.bb-fw-extrabold {
  font-weight: var(--bb-fw-extrabold) !important;
}

.bb-fw-black {
  font-weight: var(--bb-fw-black) !important;
}

.bb-fw-body {
  font-weight: var(--bb-fw-body) !important;
}

.bb-fw-ui {
  font-weight: var(--bb-fw-ui) !important;
}

.bb-fw-navigation {
  font-weight: var(--bb-fw-navigation) !important;
}

.bb-fw-navigation-active {
  font-weight: var(--bb-fw-navigation-active) !important;
}

.bb-fw-action {
  font-weight: var(--bb-fw-action) !important;
}

.bb-fw-title {
  font-weight: var(--bb-fw-title) !important;
}

.bb-fw-title-strong {
  font-weight: var(--bb-fw-title-strong) !important;
}

.bb-fw-display {
  font-weight: var(--bb-fw-display) !important;
}

/* =====================================
   Text Rhythm Helpers
===================================== */
.bb-text-xs {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-ui);
  line-height: var(--bb-line-height-base);
}

.bb-text-sm {
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-text-base {
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
}

.bb-text-ui {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-ui);
  line-height: var(--bb-line-height-base);
}

.bb-text-action {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-action);
  line-height: var(--bb-line-height-heading);
}

.bb-text-navigation {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-navigation);
  line-height: var(--bb-line-height-heading);
}

.bb-text-navigation-active {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-navigation-active);
  line-height: var(--bb-line-height-heading);
}

.bb-text-muted {
  color: var(--bb-secondary-color) !important;
}

.bb-text-subtle {
  color: var(--bb-tertiary-color) !important;
}

.bb-text-emphasis {
  color: var(--bb-emphasis-color) !important;
}

/* =====================================
   Line Height Utilities
===================================== */
.bb-lh-tight {
  line-height: var(--bb-line-height-tight) !important;
}

.bb-lh-display {
  line-height: var(--bb-line-height-display) !important;
}

.bb-lh-heading {
  line-height: var(--bb-line-height-heading) !important;
}

.bb-lh-base {
  line-height: var(--bb-line-height-base) !important;
}

.bb-lh-content {
  line-height: var(--bb-line-height-content) !important;
}

.bb-lh-loose {
  line-height: var(--bb-line-height-loose) !important;
}

/* =====================================
   Letter Spacing Utilities
===================================== */
.bb-ls-heading {
  letter-spacing: var(--bb-heading-letter-spacing) !important;
}

.bb-ls-display {
  letter-spacing: var(--bb-display-letter-spacing) !important;
}

.bb-ls-normal {
  letter-spacing: normal !important;
}

/* =====================================
   Bulbulustur Theme - Bootstrap Bridge
   Source: bb-* tokens
   Target: Bootstrap --bs-* compatibility
===================================== */
:root,
html[data-bs-theme=light],
html[data-bs-theme=navy],
html[data-bs-theme=dark] {
  /* -------------------------------------
     Body
  ------------------------------------- */
  --bs-body-bg: var(--bb-body-bg);
  --bs-body-bg-rgb: var(--bb-body-bg-rgb);
  --bs-body-color: var(--bb-body-color);
  --bs-body-color-rgb: var(--bb-body-color-rgb);
  /* -------------------------------------
     Borders
  ------------------------------------- */
  --bs-border-color: var(--bb-border-color);
  --bs-border-width: var(--bb-border-width, 1px);
  /* -------------------------------------
     Radius
  ------------------------------------- */
  --bs-border-radius-sm: var(--bb-radius-sm);
  --bs-border-radius: var(--bb-radius);
  --bs-border-radius-lg: var(--bb-radius-lg);
  --bs-border-radius-xl: var(--bb-radius-xl);
  --bs-border-radius-xxl: var(--bb-radius-2xl);
  --bs-border-radius-pill: var(--bb-radius-pill);
  /* -------------------------------------
     Shadows
  ------------------------------------- */
  --bs-box-shadow-sm: var(--bb-shadow-sm);
  --bs-box-shadow: var(--bb-shadow);
  --bs-box-shadow-lg: var(--bb-shadow-lg);
  --bs-box-shadow-inset: var(--bb-shadow-inset);
  /* -------------------------------------
     Semantic Colors
  ------------------------------------- */
  --bs-primary: var(--bb-primary);
  --bs-secondary: var(--bb-secondary);
  --bs-success: var(--bb-success);
  --bs-info: var(--bb-info);
  --bs-warning: var(--bb-warning);
  --bs-danger: var(--bb-danger);
  --bs-light: var(--bb-light);
  --bs-dark: var(--bb-dark);
  /* -------------------------------------
     Semantic RGB
  ------------------------------------- */
  --bs-primary-rgb: var(--bb-primary-rgb);
  --bs-secondary-rgb: var(--bb-secondary-rgb);
  --bs-success-rgb: var(--bb-success-rgb);
  --bs-info-rgb: var(--bb-info-rgb);
  --bs-warning-rgb: var(--bb-warning-rgb);
  --bs-danger-rgb: var(--bb-danger-rgb);
  --bs-light-rgb: var(--bb-light-rgb);
  --bs-dark-rgb: var(--bb-dark-rgb);
  /* -------------------------------------
     Links
  ------------------------------------- */
  --bs-link-color: var(--bb-link-color);
  --bs-link-hover-color: var(--bb-link-hover-color);
  /* -------------------------------------
     Backgrounds
  ------------------------------------- */
  --bs-secondary-bg: var(--bb-secondary-bg);
  --bs-secondary-bg-rgb: var(--bb-secondary-bg-rgb);
  --bs-tertiary-bg: var(--bb-tertiary-bg);
  --bs-tertiary-bg-rgb: var(--bb-tertiary-bg-rgb);
  /* -------------------------------------
     Text
  ------------------------------------- */
  --bs-emphasis-color: var(--bb-emphasis-color);
  --bs-secondary-color: var(--bb-secondary-color);
  --bs-tertiary-color: var(--bb-tertiary-color);
  /* -------------------------------------
     Text RGB
  ------------------------------------- */
  --bs-emphasis-color-rgb: var(--bb-emphasis-color-rgb);
  --bs-secondary-color-rgb: var(--bb-secondary-color-rgb);
  --bs-tertiary-color-rgb: var(--bb-tertiary-color-rgb);
  /* -------------------------------------
     Typography
  ------------------------------------- */
  --bs-body-font-family: var(--bb-font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: var(--bb-fw-body);
  --bs-body-line-height: var(--bb-line-height-base);
  --bs-headings-font-family: var(--bb-font-heading);
  --bs-headings-font-weight: var(--bb-fw-title);
  --bs-headings-line-height: var(--bb-line-height-heading);
  --bs-font-monospace: var(--bb-font-mono);
  --bs-text-muted: var(--bb-secondary-color);
}

/* =====================================
   Bulbulustur Theme - Bootstrap Container Bridge
   Electro theme container genişliğini Bootstrap 5 üstüne taşır.

   Eski Electro theme:
   576px  => 540px
   768px  => 720px
   992px  => 960px
   1200px => 1200px
   1480px => 1430px
===================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.875rem;
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1200px;
  }
}
@media (min-width: 1480px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1430px;
  }
}
/* 2. Core */
/* =====================================
   Bulbulustur Theme - Reset
===================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}
img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

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

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

/* =====================================
   Bulbulustur Theme - Reset
===================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

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

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

/* =====================================
   Bulbulustur Theme - Page Wrapper
   Main element remains neutral.
   Page mood and spacing are controlled by bb-wrapper-* modifiers.
===================================== */
/* -------------------------------------
   Main semantic area
------------------------------------- */
main {
  display: block;
  min-width: 0;
}

/* -------------------------------------
   Page wrapper base
------------------------------------- */
.bb-wrapper {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 1px;
  color: var(--bb-body-color);
  background: var(--bb-wrapper-bg, var(--bb-body-bg));
  padding-bottom: var(--bb-wrapper-padding-bottom, 3rem);
}

/* -------------------------------------
   Background moods
------------------------------------- */
/* Default white surface */
.bb-wrapper-surface-white {
  --bb-wrapper-bg: var(--bb-body-bg);
}

/* Full gray work surface */
.bb-wrapper-surface-gray {
  --bb-wrapper-bg: var(--bb-tertiary-bg);
}

/* Very soft surface, premium middle ground */
.bb-wrapper-surface-subtle {
  --bb-wrapper-bg: var(--bb-surface-soft);
}

/* Same meaning, shorter alias for common premium pages */
.bb-wrapper-surface-soft {
  --bb-wrapper-bg: var(--bb-surface-soft);
}

/* Slightly stronger muted surface */
.bb-wrapper-surface-muted {
  --bb-wrapper-bg: var(--bb-surface-muted, var(--bb-tertiary-bg));
}

/* Soft primary wash */
.bb-wrapper-surface-primary-soft {
  --bb-wrapper-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 3%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 18rem,
          var(--bb-body-bg) 100%
      );
}

/* Muted gray-to-white wash */
.bb-wrapper-surface-muted-wash {
  --bb-wrapper-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-white)) 0%,
          var(--bb-body-bg) 16rem,
          var(--bb-body-bg) 100%
      );
}

/* Brand / accent landing surface */
.bb-wrapper-surface-accent {
  --bb-wrapper-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 18%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 20rem,
          var(--bb-body-bg) 100%
      );
}

/* Cooler technical / document surface */
.bb-wrapper-surface-technical {
  --bb-wrapper-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 90%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 22rem,
          var(--bb-body-bg) 100%
      );
}

/* -------------------------------------
   Spacing modifiers
------------------------------------- */
/* Adds top breathing space for pages without hero/slider */
.bb-wrapper-spacing-spaced {
  padding-top: var(--bb-wrapper-padding-top-spaced, 3rem);
}

/* Smaller bottom space than default */
.bb-wrapper-spacing-compact {
  --bb-wrapper-padding-bottom: 1.25rem;
}

/* Larger bottom space */
.bb-wrapper-spacing-loose {
  --bb-wrapper-padding-bottom: 5.5rem;
}

/* No shell spacing */
.bb-wrapper-spacing-flush {
  padding-top: 0;
  --bb-wrapper-padding-bottom: 0;
}

/* Pages with bottom CTA / sticky visual ending */
.bb-wrapper-has-bottom-cta {
  --bb-wrapper-padding-bottom: 5.5rem;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-wrapper {
    --bb-wrapper-padding-bottom: 3.25rem;
  }
  .bb-wrapper-spacing-spaced {
    padding-top: 2.25rem;
  }
  .bb-wrapper-spacing-compact {
    --bb-wrapper-padding-bottom: 1.25rem;
  }
  .bb-wrapper-spacing-loose,
  .bb-wrapper-has-bottom-cta {
    --bb-wrapper-padding-bottom: 4.5rem;
  }
  .bb-wrapper-spacing-flush {
    padding-top: 0;
    --bb-wrapper-padding-bottom: 0;
  }
}
@media (max-width: 767.98px) {
  .bb-wrapper {
    --bb-wrapper-padding-bottom: 3rem;
  }
  .bb-wrapper-spacing-spaced {
    padding-top: 2rem;
  }
  .bb-wrapper-spacing-loose,
  .bb-wrapper-has-bottom-cta {
    --bb-wrapper-padding-bottom: 4.25rem;
  }
  .bb-wrapper-spacing-flush {
    padding-top: 0;
    --bb-wrapper-padding-bottom: 0;
  }
}
@media (max-width: 575.98px) {
  .bb-wrapper {
    --bb-wrapper-padding-bottom: 2.75rem;
  }
  .bb-wrapper-spacing-spaced {
    padding-top: 1.75rem;
  }
  .bb-wrapper-spacing-loose,
  .bb-wrapper-has-bottom-cta {
    --bb-wrapper-padding-bottom: 4rem;
  }
  .bb-wrapper-spacing-flush {
    padding-top: 0;
    --bb-wrapper-padding-bottom: 0;
  }
}
/* =====================================
   Bulbulustur Theme - Icons
   Google Material Symbols Outlined

   CDN Include should be placed in layout/head:
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet">

   Standard:
   - .material-symbols-outlined

   Icon Decision:
   - 2xs = 14px inline/tiny icon
   - xs  = 16px micro icon
   - sm  = 18px compact UI icon
   - md  = 20px header/dropdown/button icon
   - lg  = 24px default icon
   - xl  = 28px card/action icon
   - 2xl = 32px feature icon
   - 3xl = 40px hero/section icon
   - 4xl = 48px empty state/display icon

   Accessibility:
   - Dekoratif iconlara aria-hidden="true" eklenmeli.
   - Anlamlı iconlarda aria-label veya sr-only span kullanılmalı.
   - Örnek: <span class="material-symbols-outlined" aria-hidden="true">home</span>
===================================== */
/* =====================================
   Icon Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  /* -------------------------------------
     Icon Size Scale
  ------------------------------------- */
  --bb-icon-size-2xs: 0.875rem; /* 14px */
  --bb-icon-size-xs: 1rem; /* 16px */
  --bb-icon-size-sm: 1.125rem; /* 18px */
  --bb-icon-size-md: 1.25rem; /* 20px */
  --bb-icon-size-lg: 1.5rem; /* 24px */
  --bb-icon-size-xl: 1.75rem; /* 28px */
  --bb-icon-size-2xl: 2rem; /* 32px */
  --bb-icon-size-3xl: 2.5rem; /* 40px */
  --bb-icon-size-4xl: 3rem; /* 48px */
  --bb-icon-size: var(--bb-icon-size-lg);
  /* -------------------------------------
     Material Symbols Variation Tokens
  ------------------------------------- */
  --bb-icon-fill: 0;
  --bb-icon-weight: 450;
  --bb-icon-grade: 0;
  --bb-icon-optical-size: 24;
  /* -------------------------------------
     Semantic Icon Sizes
  ------------------------------------- */
  --bb-icon-size-inline: var(--bb-icon-size-sm);
  --bb-icon-size-compact: var(--bb-icon-size-xs);
  --bb-icon-size-ui: var(--bb-icon-size-md);
  --bb-icon-size-action: var(--bb-icon-size-md);
  --bb-icon-size-section: var(--bb-icon-size-lg);
  --bb-icon-size-feature: var(--bb-icon-size-xl);
  --bb-icon-size-hero: var(--bb-icon-size-3xl);
  --bb-icon-size-empty: var(--bb-icon-size-4xl);
  /* -------------------------------------
     Icon Box / Circle Size Tokens
  ------------------------------------- */
  --bb-icon-box-2xs: 1.5rem; /* 24px */
  --bb-icon-box-xs: 1.75rem; /* 28px */
  --bb-icon-box-sm: 2rem; /* 32px */
  --bb-icon-box-md: 2.5rem; /* 40px */
  --bb-icon-box-lg: 3rem; /* 48px */
  --bb-icon-box-xl: 3.5rem; /* 56px */
  --bb-icon-box-2xl: 4rem; /* 64px */
  --bb-icon-box-3xl: 5rem; /* 80px */
  /* -------------------------------------
     Icon Colors
     Icon colors consume theme tokens.
  ------------------------------------- */
  --bb-icon-color: currentColor;
  --bb-icon-muted-color: var(--bb-secondary-color);
  --bb-icon-subtle-color: var(--bb-tertiary-color);
  --bb-icon-primary-color: var(--bb-primary);
  --bb-icon-accent-color: var(--bb-brand-accent, var(--bb-purple-500));
  --bb-icon-page-accent-color: var(--bb-page-accent);
  /* -------------------------------------
     Icon Interaction Tokens
  ------------------------------------- */
  --bb-icon-transition:
    color var(--bb-motion-normal, 200ms) var(--bb-ease-in-out, ease-in-out),
    background-color var(--bb-motion-normal, 200ms) var(--bb-ease-in-out, ease-in-out),
    border-color var(--bb-motion-normal, 200ms) var(--bb-ease-in-out, ease-in-out),
    box-shadow var(--bb-motion-normal, 200ms) var(--bb-ease-in-out, ease-in-out),
    transform var(--bb-motion-normal, 200ms) var(--bb-ease-in-out, ease-in-out);
  --bb-icon-hover-lift-y: -0.125rem;
  --bb-icon-active-scale: 0.96;
}

/* =====================================
   Navy Mode Micro Tuning
===================================== */
html[data-bs-theme=navy] {
  --bb-icon-weight: 400;
  --bb-icon-grade: -15;
  --bb-icon-muted-color: var(--bb-secondary-color);
  --bb-icon-subtle-color: var(--bb-tertiary-color);
  --bb-icon-primary-color: var(--bb-primary);
  --bb-icon-accent-color: var(--bb-brand-accent, var(--bb-color-purple-400));
  --bb-icon-page-accent-color: var(--bb-page-accent);
}

/* =====================================
   Dark Mode Micro Tuning
===================================== */
html[data-bs-theme=dark] {
  --bb-icon-weight: 400;
  --bb-icon-grade: -25;
  --bb-icon-muted-color: var(--bb-secondary-color);
  --bb-icon-subtle-color: var(--bb-tertiary-color);
  --bb-icon-primary-color: var(--bb-primary);
  --bb-icon-accent-color: var(--bb-brand-accent, var(--bb-color-purple-400));
  --bb-icon-page-accent-color: var(--bb-page-accent);
}

/* =====================================
   Material Symbols Base
===================================== */
.material-symbols-outlined {
  display: inline-block;
  flex-shrink: 0;
  color: var(--bb-icon-color);
  font-family: "Material Symbols Outlined";
  font-size: var(--bb-icon-size);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings: "FILL" var(--bb-icon-fill), "wght" var(--bb-icon-weight), "GRAD" var(--bb-icon-grade), "opsz" var(--bb-icon-optical-size);
}

/* =====================================
   Icon Size Utilities
===================================== */
.bb-icon-2xs,
.bb-icon-2xs.material-symbols-outlined,
.bb-icon-2xs .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xs);
  --bb-icon-optical-size: 20;
}

.bb-icon-xs,
.bb-icon-xs.material-symbols-outlined,
.bb-icon-xs .material-symbols-outlined {
  font-size: var(--bb-icon-size-xs);
  --bb-icon-optical-size: 20;
}

.bb-icon-sm,
.bb-icon-sm.material-symbols-outlined,
.bb-icon-sm .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  --bb-icon-optical-size: 20;
}

.bb-icon-md,
.bb-icon-md.material-symbols-outlined,
.bb-icon-md .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  --bb-icon-optical-size: 24;
}

.bb-icon-lg,
.bb-icon-lg.material-symbols-outlined,
.bb-icon-lg .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  --bb-icon-optical-size: 24;
}

.bb-icon-xl,
.bb-icon-xl.material-symbols-outlined,
.bb-icon-xl .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  --bb-icon-optical-size: 32;
}

.bb-icon-2xl,
.bb-icon-2xl.material-symbols-outlined,
.bb-icon-2xl .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  --bb-icon-optical-size: 32;
}

.bb-icon-3xl,
.bb-icon-3xl.material-symbols-outlined,
.bb-icon-3xl .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  --bb-icon-optical-size: 40;
}

.bb-icon-4xl,
.bb-icon-4xl.material-symbols-outlined,
.bb-icon-4xl .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  --bb-icon-optical-size: 48;
}

/* =====================================
   Semantic Icon Utilities
===================================== */
.bb-icon-inline,
.bb-icon-inline.material-symbols-outlined,
.bb-icon-inline .material-symbols-outlined {
  font-size: var(--bb-icon-size-inline);
  --bb-icon-optical-size: 20;
}

.bb-icon-compact,
.bb-icon-compact.material-symbols-outlined,
.bb-icon-compact .material-symbols-outlined {
  font-size: var(--bb-icon-size-compact);
  --bb-icon-optical-size: 20;
}

.bb-icon-ui,
.bb-icon-ui.material-symbols-outlined,
.bb-icon-ui .material-symbols-outlined {
  font-size: var(--bb-icon-size-ui);
  --bb-icon-optical-size: 24;
}

.bb-icon-action,
.bb-icon-action.material-symbols-outlined,
.bb-icon-action .material-symbols-outlined {
  font-size: var(--bb-icon-size-action);
  --bb-icon-optical-size: 24;
}

.bb-icon-section,
.bb-icon-section.material-symbols-outlined,
.bb-icon-section .material-symbols-outlined {
  font-size: var(--bb-icon-size-section);
  --bb-icon-optical-size: 24;
}

.bb-icon-feature,
.bb-icon-feature.material-symbols-outlined,
.bb-icon-feature .material-symbols-outlined {
  font-size: var(--bb-icon-size-feature);
  --bb-icon-optical-size: 32;
}

.bb-icon-hero,
.bb-icon-hero.material-symbols-outlined,
.bb-icon-hero .material-symbols-outlined {
  font-size: var(--bb-icon-size-hero);
  --bb-icon-optical-size: 40;
}

.bb-icon-empty,
.bb-icon-empty.material-symbols-outlined,
.bb-icon-empty .material-symbols-outlined {
  font-size: var(--bb-icon-size-empty);
  --bb-icon-optical-size: 48;
}

/* =====================================
   Icon Weight Utilities
===================================== */
.bb-icon-w-300,
.bb-icon-w-300.material-symbols-outlined,
.bb-icon-w-300 .material-symbols-outlined {
  --bb-icon-weight: 300;
}

.bb-icon-w-400,
.bb-icon-w-400.material-symbols-outlined,
.bb-icon-w-400 .material-symbols-outlined {
  --bb-icon-weight: 400;
}

.bb-icon-w-450,
.bb-icon-w-450.material-symbols-outlined,
.bb-icon-w-450 .material-symbols-outlined {
  --bb-icon-weight: 450;
}

.bb-icon-w-500,
.bb-icon-w-500.material-symbols-outlined,
.bb-icon-w-500 .material-symbols-outlined {
  --bb-icon-weight: 500;
}

.bb-icon-w-600,
.bb-icon-w-600.material-symbols-outlined,
.bb-icon-w-600 .material-symbols-outlined {
  --bb-icon-weight: 600;
}

.bb-icon-w-700,
.bb-icon-w-700.material-symbols-outlined,
.bb-icon-w-700 .material-symbols-outlined {
  --bb-icon-weight: 700;
}

/* =====================================
   Icon Fill Utilities
===================================== */
.bb-icon-fill,
.bb-icon-fill.material-symbols-outlined,
.bb-icon-fill .material-symbols-outlined {
  --bb-icon-fill: 1;
}

.bb-icon-outline,
.bb-icon-outline.material-symbols-outlined,
.bb-icon-outline .material-symbols-outlined {
  --bb-icon-fill: 0;
}

/* =====================================
   Icon Grade Utilities
===================================== */
.bb-icon-grade-light,
.bb-icon-grade-light.material-symbols-outlined,
.bb-icon-grade-light .material-symbols-outlined {
  --bb-icon-grade: -25;
}

.bb-icon-grade-default,
.bb-icon-grade-default.material-symbols-outlined,
.bb-icon-grade-default .material-symbols-outlined {
  --bb-icon-grade: 0;
}

.bb-icon-grade-soft,
.bb-icon-grade-soft.material-symbols-outlined,
.bb-icon-grade-soft .material-symbols-outlined {
  --bb-icon-grade: 25;
}

/* =====================================
   Icon Color Helpers
===================================== */
.bb-icon-current,
.bb-icon-current.material-symbols-outlined,
.bb-icon-current .material-symbols-outlined {
  color: currentColor;
}

.bb-icon-primary,
.bb-icon-primary.material-symbols-outlined,
.bb-icon-primary .material-symbols-outlined {
  color: var(--bb-icon-primary-color);
}

.bb-icon-accent,
.bb-icon-accent.material-symbols-outlined,
.bb-icon-accent .material-symbols-outlined {
  color: var(--bb-icon-accent-color);
}

.bb-icon-page-accent,
.bb-icon-page-accent.material-symbols-outlined,
.bb-icon-page-accent .material-symbols-outlined {
  color: var(--bb-icon-page-accent-color);
}

.bb-icon-secondary,
.bb-icon-secondary.material-symbols-outlined,
.bb-icon-secondary .material-symbols-outlined {
  color: var(--bb-icon-muted-color);
}

.bb-icon-muted,
.bb-icon-muted.material-symbols-outlined,
.bb-icon-muted .material-symbols-outlined {
  color: var(--bb-icon-subtle-color);
}

.bb-icon-success,
.bb-icon-success.material-symbols-outlined,
.bb-icon-success .material-symbols-outlined {
  color: var(--bb-success);
}

.bb-icon-warning,
.bb-icon-warning.material-symbols-outlined,
.bb-icon-warning .material-symbols-outlined {
  color: var(--bb-warning);
}

.bb-icon-danger,
.bb-icon-danger.material-symbols-outlined,
.bb-icon-danger .material-symbols-outlined {
  color: var(--bb-danger);
}

.bb-icon-info,
.bb-icon-info.material-symbols-outlined,
.bb-icon-info .material-symbols-outlined {
  color: var(--bb-info);
}

.bb-icon-white,
.bb-icon-white.material-symbols-outlined,
.bb-icon-white .material-symbols-outlined {
  color: var(--bb-white, var(--bb-color-white));
}

.bb-icon-black,
.bb-icon-black.material-symbols-outlined,
.bb-icon-black .material-symbols-outlined {
  color: var(--bb-black, var(--bb-color-black));
}

/* =====================================
   Icon Wrapper Helpers
===================================== */
.bb-icon-box,
.bb-icon-circle {
  width: var(--bb-icon-box-md);
  height: var(--bb-icon-box-md);
  flex: 0 0 var(--bb-icon-box-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid transparent;
  transition: var(--bb-icon-transition);
}

.bb-icon-box {
  border-radius: var(--bb-radius-lg);
}

.bb-icon-circle {
  border-radius: var(--bb-radius-pill);
}

.bb-icon-box .material-symbols-outlined,
.bb-icon-circle .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  --bb-icon-optical-size: 24;
}

/* =====================================
   Icon Wrapper Sizes
===================================== */
.bb-icon-box-2xs,
.bb-icon-circle-2xs {
  width: var(--bb-icon-box-2xs);
  height: var(--bb-icon-box-2xs);
  flex-basis: var(--bb-icon-box-2xs);
}

.bb-icon-box-xs,
.bb-icon-circle-xs {
  width: var(--bb-icon-box-xs);
  height: var(--bb-icon-box-xs);
  flex-basis: var(--bb-icon-box-xs);
}

.bb-icon-box-sm,
.bb-icon-circle-sm {
  width: var(--bb-icon-box-sm);
  height: var(--bb-icon-box-sm);
  flex-basis: var(--bb-icon-box-sm);
}

.bb-icon-box-md,
.bb-icon-circle-md {
  width: var(--bb-icon-box-md);
  height: var(--bb-icon-box-md);
  flex-basis: var(--bb-icon-box-md);
}

.bb-icon-box-lg,
.bb-icon-circle-lg {
  width: var(--bb-icon-box-lg);
  height: var(--bb-icon-box-lg);
  flex-basis: var(--bb-icon-box-lg);
}

.bb-icon-box-xl,
.bb-icon-circle-xl {
  width: var(--bb-icon-box-xl);
  height: var(--bb-icon-box-xl);
  flex-basis: var(--bb-icon-box-xl);
}

.bb-icon-box-2xl,
.bb-icon-circle-2xl {
  width: var(--bb-icon-box-2xl);
  height: var(--bb-icon-box-2xl);
  flex-basis: var(--bb-icon-box-2xl);
}

.bb-icon-box-3xl,
.bb-icon-circle-3xl {
  width: var(--bb-icon-box-3xl);
  height: var(--bb-icon-box-3xl);
  flex-basis: var(--bb-icon-box-3xl);
}

.bb-icon-box-2xs,
.bb-icon-box-xs,
.bb-icon-box-sm {
  border-radius: var(--bb-radius);
}

.bb-icon-box-lg,
.bb-icon-box-xl,
.bb-icon-box-2xl,
.bb-icon-box-3xl {
  border-radius: var(--bb-radius-xl);
}

/* =====================================
   Icon Wrapper Color Variants
===================================== */
.bb-icon-bg-primary {
  color: var(--bb-primary);
  background-color: var(--bb-primary-light);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, transparent);
}

.bb-icon-bg-accent {
  color: var(--bb-brand-accent-strong, var(--bb-color-purple-700));
  background-color: var(--bb-brand-accent-soft, var(--bb-color-purple-50));
  border-color: color-mix(in srgb, var(--bb-brand-accent, var(--bb-color-purple-500)) 24%, transparent);
}

.bb-icon-bg-page-accent {
  color: var(--bb-page-accent-strong);
  background-color: var(--bb-page-accent-soft);
  border-color: color-mix(in srgb, var(--bb-page-accent) 24%, transparent);
}

.bb-icon-bg-success {
  color: var(--bb-success);
  background-color: var(--bb-success-light);
  border-color: color-mix(in srgb, var(--bb-success) 24%, transparent);
}

.bb-icon-bg-warning {
  color: var(--bb-warning);
  background-color: var(--bb-warning-light);
  border-color: color-mix(in srgb, var(--bb-warning) 24%, transparent);
}

.bb-icon-bg-danger {
  color: var(--bb-danger);
  background-color: var(--bb-danger-light);
  border-color: color-mix(in srgb, var(--bb-danger) 24%, transparent);
}

.bb-icon-bg-info {
  color: var(--bb-info);
  background-color: var(--bb-info-light);
  border-color: color-mix(in srgb, var(--bb-info) 24%, transparent);
}

/* =====================================
   Navy / Dark Wrapper Tuning
===================================== */
html[data-bs-theme=navy] .bb-icon-box,
html[data-bs-theme=navy] .bb-icon-circle,
html[data-bs-theme=dark] .bb-icon-box,
html[data-bs-theme=dark] .bb-icon-circle {
  background-color: var(--bb-surface-elevated);
  border-color: var(--bb-border-color);
}

html[data-bs-theme=navy] .bb-icon-bg-primary,
html[data-bs-theme=dark] .bb-icon-bg-primary {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
}

html[data-bs-theme=navy] .bb-icon-bg-accent,
html[data-bs-theme=dark] .bb-icon-bg-accent {
  color: var(--bb-brand-accent-strong, var(--bb-color-purple-300));
  background-color: var(--bb-brand-accent-soft, color-mix(in srgb, var(--bb-color-purple-400) 12%, transparent));
  border-color: color-mix(in srgb, var(--bb-brand-accent, var(--bb-color-purple-400)) 32%, var(--bb-border-color));
}

html[data-bs-theme=navy] .bb-icon-bg-page-accent,
html[data-bs-theme=dark] .bb-icon-bg-page-accent {
  color: var(--bb-page-accent-strong);
  background-color: var(--bb-page-accent-soft);
  border-color: color-mix(in srgb, var(--bb-page-accent) 32%, var(--bb-border-color));
}

html[data-bs-theme=navy] .bb-icon-bg-success,
html[data-bs-theme=dark] .bb-icon-bg-success {
  background-color: color-mix(in srgb, var(--bb-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--bb-success) 30%, var(--bb-border-color));
}

html[data-bs-theme=navy] .bb-icon-bg-warning,
html[data-bs-theme=dark] .bb-icon-bg-warning {
  background-color: color-mix(in srgb, var(--bb-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--bb-warning) 30%, var(--bb-border-color));
}

html[data-bs-theme=navy] .bb-icon-bg-danger,
html[data-bs-theme=dark] .bb-icon-bg-danger {
  background-color: color-mix(in srgb, var(--bb-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--bb-danger) 30%, var(--bb-border-color));
}

html[data-bs-theme=navy] .bb-icon-bg-info,
html[data-bs-theme=dark] .bb-icon-bg-info {
  background-color: color-mix(in srgb, var(--bb-info) 14%, transparent);
  border-color: color-mix(in srgb, var(--bb-info) 30%, var(--bb-border-color));
}

/* =====================================
   Icon with Text Alignment
===================================== */
.bb-icon-start {
  margin-right: var(--bb-space-2);
}

.bb-icon-end {
  margin-left: var(--bb-space-2);
}

.bb-icon-start-sm {
  margin-right: var(--bb-space-1);
}

.bb-icon-end-sm {
  margin-left: var(--bb-space-1);
}

.bb-icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
}

.bb-icon-text-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
}

.bb-icon-text .material-symbols-outlined,
.bb-icon-text-sm .material-symbols-outlined {
  flex: 0 0 auto;
}

/* =====================================
   Icon Alignment Utilities
===================================== */
.bb-icon-baseline {
  vertical-align: baseline;
}

.bb-icon-middle {
  vertical-align: middle;
}

.bb-icon-sub {
  vertical-align: sub;
}

.bb-icon-text-top {
  vertical-align: text-top;
}

.bb-icon-text-bottom {
  vertical-align: text-bottom;
}

.bb-icon-inline-align,
.material-symbols-outlined.bb-icon-inline-align {
  vertical-align: -0.16em;
}

/* =====================================
   Interactive Icon Utilities
===================================== */
.bb-icon-clickable,
.bb-icon-hover,
.bb-icon-box-hover,
.bb-icon-circle-hover {
  cursor: pointer;
  transition: var(--bb-icon-transition);
}

.bb-icon-hover:hover,
.bb-icon-box-hover:hover,
.bb-icon-circle-hover:hover {
  transform: translateY(var(--bb-icon-hover-lift-y));
}

.bb-icon-clickable:active {
  transform: scale(var(--bb-icon-active-scale));
}

/* =====================================
   Responsive Icon Sizes
===================================== */
@media (max-width: 768px) {
  :root {
    --bb-icon-size-hero: var(--bb-icon-size-2xl);
    --bb-icon-size-empty: var(--bb-icon-size-3xl);
    --bb-icon-box-3xl: var(--bb-icon-box-2xl);
  }
}
/* =====================================
   Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-icon-clickable,
  .bb-icon-hover,
  .bb-icon-box-hover,
  .bb-icon-circle-hover {
    transition: none;
  }
  .bb-icon-hover:hover,
  .bb-icon-box-hover:hover,
  .bb-icon-circle-hover:hover,
  .bb-icon-clickable:active {
    transform: none;
  }
}
/* =====================================
   Bulbulustur Theme - State System
   Global state helpers + Focus Ring Standard
   File: assets/scss/base/_state.scss
===================================== */
/* -------------------------------------
   Disabled
------------------------------------- */
.is-disabled,
[aria-disabled=true],
:disabled {
  pointer-events: none;
  opacity: var(--bb-disabled-opacity);
}

/* -------------------------------------
   Active
   Component-level override önerilir
------------------------------------- */
.is-active {
  /* intentionally minimal */
}

/* -------------------------------------
   Loading
------------------------------------- */
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: var(--bb-loading-opacity);
}

.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* -------------------------------------
   Validation wrappers
------------------------------------- */
.has-error,
.has-success {
  position: relative;
}

input.has-error,
select.has-error,
textarea.has-error,
.has-error .form-control,
.has-error .form-select {
  border-color: var(--bb-state-error);
}

input.has-success,
select.has-success,
textarea.has-success,
.has-success .form-control,
.has-success .form-select {
  border-color: var(--bb-state-success);
}

.has-error .bb-help,
.has-error .invalid-feedback {
  color: var(--bb-state-error);
}

.has-success .bb-help,
.has-success .valid-feedback {
  color: var(--bb-state-success);
}

.has-error .form-control:focus-visible,
.has-error .form-select:focus-visible,
input.has-error:focus-visible,
select.has-error:focus-visible,
textarea.has-error:focus-visible {
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-danger-rgb), 0.25);
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-state-error) 25%, transparent);
}

.has-success .form-control:focus-visible,
.has-success .form-select:focus-visible,
input.has-success:focus-visible,
select.has-success:focus-visible,
textarea.has-success:focus-visible {
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-success-rgb), 0.25);
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-state-success) 25%, transparent);
}

/* =====================================
   Focus Ring Standard
===================================== */
/* -------------------------------------
   Buttons
------------------------------------- */
.btn:focus-visible,
.bb-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity));
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-focus-ring-color) var(--bb-focus-ring-alpha), transparent);
}

/* -------------------------------------
   Inputs
------------------------------------- */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
textarea.form-control:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity));
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-focus-ring-color) var(--bb-focus-ring-alpha), transparent);
}

/* -------------------------------------
   Interactive components
------------------------------------- */
.toast.bb-toast:focus-visible,
.bb-ts-thumb:focus-visible,
.bb-ts-dot:focus-visible,
.bb-ts-btn:focus-visible,
.bb-card-action:focus-visible,
.bb-card a.bb-card-action:focus-visible,
.bb-card button.bb-card-action:focus-visible,
.bb-alert-close:focus-visible,
a.badge.bb-badge:focus-visible,
button.badge.bb-badge:focus-visible,
.bb-breadcrumb a:focus-visible,
.bb-carousel-control:focus-visible,
.bb-carousel .carousel-control-prev:focus-visible,
.bb-carousel .carousel-control-next:focus-visible,
.bb-carousel .carousel-indicators [data-bs-target]:focus-visible,
.bb-collapse-toggle:focus-visible,
.bb-countup-stat-clickable:focus-visible,
.bb-dialer .bb-dialer-btn:focus-visible,
.bb-dialer .bb-dialer-input:focus-visible,
.bb-drawer-close:focus-visible,
.bb-dropdown-item:focus-visible,
.form-control.bb-inputmask:focus-visible,
.bb-lightbox-close:focus-visible,
.bb-lightbox-nav:focus-visible,
.bb-menu .bb-menu-link:focus-visible,
.bb-modal-close:focus-visible,
.bb-accordion .accordion-button:focus-visible,
.bb-password-meter__toggle:focus-visible,
.bb-pagination .page-link:focus-visible,
.bb-scroll:focus-visible,
.bb-scroll-y:focus-visible,
.bb-scroll-x:focus-visible,
.bb-hover-scroll:focus-visible,
.bb-hover-scroll-y:focus-visible,
.bb-hover-scroll-x:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity));
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-focus-ring-color) var(--bb-focus-ring-alpha), transparent);
}

/* -------------------------------------
   Rating special case
------------------------------------- */
.bb-rating-input:focus-visible ~ .bb-rating-label {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity));
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-focus-ring-color) var(--bb-focus-ring-alpha), transparent);
}

/* -------------------------------------
   Links / generic clickable bb elements
------------------------------------- */
a.bb-link:focus-visible,
button.bb-link:focus-visible,
.bb-nav .nav-link:focus-visible,
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity));
  box-shadow: 0 0 0 var(--bb-focus-ring-width) color-mix(in srgb, var(--bb-focus-ring-color) var(--bb-focus-ring-alpha), transparent);
}

/* -------------------------------------
   Disabled ring reset
------------------------------------- */
.btn:disabled,
.btn.disabled,
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled,
[aria-disabled=true] {
  box-shadow: none !important;
}

/* =====================================
   Bulbulustur Theme - Motion Accessibility
   Global reduced-motion safety layer
   File: assets/scss/base/_motion.scss
===================================== */
/* -------------------------------------
   Reduced motion
   Kullanıcı işletim sistemi seviyesinde
   "reduce motion" seçtiyse animasyonları minimuma indirir.
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
/* =====================================
   Bulbulustur Theme – Hover Utilities
   Base-level hover helpers
   ===================================== */
/* -------------------------------------
   Core hover transition
------------------------------------- */
.bb-hover {
  will-change: transform, box-shadow;
  transition: var(--bb-transition-colors), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

/* -------------------------------------
   Background hover
------------------------------------- */
.bb-hover-bg:hover {
  background-color: var(--bb-tertiary-bg);
}

/* -------------------------------------
   Text hover
------------------------------------- */
.bb-hover-text:hover {
  color: var(--bb-primary);
}

/* -------------------------------------
   Border hover
------------------------------------- */
.bb-hover-border:hover {
  border-color: var(--bb-border-color);
}

/* -------------------------------------
   Elevation hover
------------------------------------- */
.bb-hover-elevate:hover {
  box-shadow: var(--bb-shadow-sm);
}

/* -------------------------------------
   Lift (micro interaction)
------------------------------------- */
.bb-hover-lift:hover {
  transform: translateY(-1px);
}

/* -------------------------------------
   Scale hover
   Kart, ürün görseli gibi elementler için
------------------------------------- */
.bb-hover-scale:hover {
  transform: scale(1.02);
}

/* -------------------------------------
   Opacity / Dim hover
   Icon, secondary elementler için
------------------------------------- */
.bb-hover-dim:hover {
  opacity: 0.72;
}

/* -------------------------------------
   Primary bg hover
   Sarı CTA elementler için
------------------------------------- */
.bb-hover-primary:hover {
  background-color: var(--bb-theme-primary);
  color: var(--bb-theme-on-primary);
}

/* -------------------------------------
   Combined (en sık kullanım)
------------------------------------- */
.bb-hover-soft:hover {
  background-color: var(--bb-tertiary-bg);
  box-shadow: var(--bb-shadow-xs);
}

/* -------------------------------------
   Disabled safety
------------------------------------- */
.is-disabled .bb-hover, .is-disabled.bb-hover,
[aria-disabled=true] .bb-hover,
[aria-disabled=true].bb-hover {
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* -------------------------------------
   Reduced motion (accessibility)
   prefers-reduced-motion aktifse
   tüm hover animasyonları devre dışı
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-hover,
  .bb-hover-lift,
  .bb-hover-scale,
  .bb-hover-elevate,
  .bb-hover-soft,
  .bb-hover-primary,
  .bb-hover-dim,
  .bb-hover-bg,
  .bb-hover-text,
  .bb-hover-border {
    transition: none;
    transform: none;
    will-change: auto;
  }
}
/* 3. Utilities */
/* =====================================
   Bulbulustur Theme - Utilities (bb-)
   Mechanical utilities only (layout/size/flow)
   Works with CDN Bootstrap too
   ===================================== */
/* Breakpoints (Bootstrap 5 defaults) */
/* -------------------------------------
   Cursor
------------------------------------- */
.bb-cursor-help {
  cursor: help !important;
}

.bb-cursor-wait {
  cursor: wait !important;
}

.bb-cursor-crosshair {
  cursor: crosshair !important;
}

.bb-cursor-not-allowed {
  cursor: not-allowed !important;
}

.bb-cursor-zoom-in {
  cursor: zoom-in !important;
}

.bb-cursor-grab {
  cursor: grab !important;
}

.bb-cursor-pointer {
  cursor: pointer !important;
}

/* -------------------------------------
   Position (base + responsive)
------------------------------------- */
.bb-position-static {
  position: static !important;
}

@media (min-width: 576px) {
  .bb-position-sm-static {
    position: static !important;
  }
}
@media (min-width: 768px) {
  .bb-position-md-static {
    position: static !important;
  }
}
@media (min-width: 992px) {
  .bb-position-lg-static {
    position: static !important;
  }
}
@media (min-width: 1200px) {
  .bb-position-xl-static {
    position: static !important;
  }
}
@media (min-width: 1400px) {
  .bb-position-xxl-static {
    position: static !important;
  }
}
.bb-position-relative {
  position: relative !important;
}

@media (min-width: 576px) {
  .bb-position-sm-relative {
    position: relative !important;
  }
}
@media (min-width: 768px) {
  .bb-position-md-relative {
    position: relative !important;
  }
}
@media (min-width: 992px) {
  .bb-position-lg-relative {
    position: relative !important;
  }
}
@media (min-width: 1200px) {
  .bb-position-xl-relative {
    position: relative !important;
  }
}
@media (min-width: 1400px) {
  .bb-position-xxl-relative {
    position: relative !important;
  }
}
.bb-position-absolute {
  position: absolute !important;
}

@media (min-width: 576px) {
  .bb-position-sm-absolute {
    position: absolute !important;
  }
}
@media (min-width: 768px) {
  .bb-position-md-absolute {
    position: absolute !important;
  }
}
@media (min-width: 992px) {
  .bb-position-lg-absolute {
    position: absolute !important;
  }
}
@media (min-width: 1200px) {
  .bb-position-xl-absolute {
    position: absolute !important;
  }
}
@media (min-width: 1400px) {
  .bb-position-xxl-absolute {
    position: absolute !important;
  }
}
.bb-position-fixed {
  position: fixed !important;
}

@media (min-width: 576px) {
  .bb-position-sm-fixed {
    position: fixed !important;
  }
}
@media (min-width: 768px) {
  .bb-position-md-fixed {
    position: fixed !important;
  }
}
@media (min-width: 992px) {
  .bb-position-lg-fixed {
    position: fixed !important;
  }
}
@media (min-width: 1200px) {
  .bb-position-xl-fixed {
    position: fixed !important;
  }
}
@media (min-width: 1400px) {
  .bb-position-xxl-fixed {
    position: fixed !important;
  }
}
.bb-position-sticky {
  position: sticky !important;
}

@media (min-width: 576px) {
  .bb-position-sm-sticky {
    position: sticky !important;
  }
}
@media (min-width: 768px) {
  .bb-position-md-sticky {
    position: sticky !important;
  }
}
@media (min-width: 992px) {
  .bb-position-lg-sticky {
    position: sticky !important;
  }
}
@media (min-width: 1200px) {
  .bb-position-xl-sticky {
    position: sticky !important;
  }
}
@media (min-width: 1400px) {
  .bb-position-xxl-sticky {
    position: sticky !important;
  }
}
/* -------------------------------------
   Overflow (base + responsive)
------------------------------------- */
.bb-overflow-auto {
  overflow: auto !important;
}

@media (min-width: 576px) {
  .bb-overflow-sm-auto {
    overflow: auto !important;
  }
}
@media (min-width: 768px) {
  .bb-overflow-md-auto {
    overflow: auto !important;
  }
}
@media (min-width: 992px) {
  .bb-overflow-lg-auto {
    overflow: auto !important;
  }
}
@media (min-width: 1200px) {
  .bb-overflow-xl-auto {
    overflow: auto !important;
  }
}
@media (min-width: 1400px) {
  .bb-overflow-xxl-auto {
    overflow: auto !important;
  }
}
.bb-overflow-hidden {
  overflow: hidden !important;
}

@media (min-width: 576px) {
  .bb-overflow-sm-hidden {
    overflow: hidden !important;
  }
}
@media (min-width: 768px) {
  .bb-overflow-md-hidden {
    overflow: hidden !important;
  }
}
@media (min-width: 992px) {
  .bb-overflow-lg-hidden {
    overflow: hidden !important;
  }
}
@media (min-width: 1200px) {
  .bb-overflow-xl-hidden {
    overflow: hidden !important;
  }
}
@media (min-width: 1400px) {
  .bb-overflow-xxl-hidden {
    overflow: hidden !important;
  }
}
.bb-overflow-visible {
  overflow: visible !important;
}

@media (min-width: 576px) {
  .bb-overflow-sm-visible {
    overflow: visible !important;
  }
}
@media (min-width: 768px) {
  .bb-overflow-md-visible {
    overflow: visible !important;
  }
}
@media (min-width: 992px) {
  .bb-overflow-lg-visible {
    overflow: visible !important;
  }
}
@media (min-width: 1200px) {
  .bb-overflow-xl-visible {
    overflow: visible !important;
  }
}
@media (min-width: 1400px) {
  .bb-overflow-xxl-visible {
    overflow: visible !important;
  }
}
.bb-overflow-scroll {
  overflow: scroll !important;
}

@media (min-width: 576px) {
  .bb-overflow-sm-scroll {
    overflow: scroll !important;
  }
}
@media (min-width: 768px) {
  .bb-overflow-md-scroll {
    overflow: scroll !important;
  }
}
@media (min-width: 992px) {
  .bb-overflow-lg-scroll {
    overflow: scroll !important;
  }
}
@media (min-width: 1200px) {
  .bb-overflow-xl-scroll {
    overflow: scroll !important;
  }
}
@media (min-width: 1400px) {
  .bb-overflow-xxl-scroll {
    overflow: scroll !important;
  }
}
/* -------------------------------------
   Sizing (limited scale)
   - Percent sizes: responsive variants ON
   - Px sizes: responsive variants OFF (CSS şişmesin)
------------------------------------- */
/* Percent (responsive) */
.bb-w-25 {
  width: 25% !important;
}

.bb-h-25 {
  height: 25% !important;
}

.bb-mw-25 {
  max-width: 25% !important;
}

.bb-mh-25 {
  max-height: 25% !important;
}

.bb-min-w-25 {
  min-width: 25% !important;
}

.bb-min-h-25 {
  min-height: 25% !important;
}

@media (min-width: 576px) {
  .bb-w-sm-25 {
    width: 25% !important;
  }
  .bb-h-sm-25 {
    height: 25% !important;
  }
  .bb-mw-sm-25 {
    max-width: 25% !important;
  }
  .bb-mh-sm-25 {
    max-height: 25% !important;
  }
  .bb-min-w-sm-25 {
    min-width: 25% !important;
  }
  .bb-min-h-sm-25 {
    min-height: 25% !important;
  }
}
@media (min-width: 768px) {
  .bb-w-md-25 {
    width: 25% !important;
  }
  .bb-h-md-25 {
    height: 25% !important;
  }
  .bb-mw-md-25 {
    max-width: 25% !important;
  }
  .bb-mh-md-25 {
    max-height: 25% !important;
  }
  .bb-min-w-md-25 {
    min-width: 25% !important;
  }
  .bb-min-h-md-25 {
    min-height: 25% !important;
  }
}
@media (min-width: 992px) {
  .bb-w-lg-25 {
    width: 25% !important;
  }
  .bb-h-lg-25 {
    height: 25% !important;
  }
  .bb-mw-lg-25 {
    max-width: 25% !important;
  }
  .bb-mh-lg-25 {
    max-height: 25% !important;
  }
  .bb-min-w-lg-25 {
    min-width: 25% !important;
  }
  .bb-min-h-lg-25 {
    min-height: 25% !important;
  }
}
@media (min-width: 1200px) {
  .bb-w-xl-25 {
    width: 25% !important;
  }
  .bb-h-xl-25 {
    height: 25% !important;
  }
  .bb-mw-xl-25 {
    max-width: 25% !important;
  }
  .bb-mh-xl-25 {
    max-height: 25% !important;
  }
  .bb-min-w-xl-25 {
    min-width: 25% !important;
  }
  .bb-min-h-xl-25 {
    min-height: 25% !important;
  }
}
@media (min-width: 1400px) {
  .bb-w-xxl-25 {
    width: 25% !important;
  }
  .bb-h-xxl-25 {
    height: 25% !important;
  }
  .bb-mw-xxl-25 {
    max-width: 25% !important;
  }
  .bb-mh-xxl-25 {
    max-height: 25% !important;
  }
  .bb-min-w-xxl-25 {
    min-width: 25% !important;
  }
  .bb-min-h-xxl-25 {
    min-height: 25% !important;
  }
}
.bb-w-50 {
  width: 50% !important;
}

.bb-h-50 {
  height: 50% !important;
}

.bb-mw-50 {
  max-width: 50% !important;
}

.bb-mh-50 {
  max-height: 50% !important;
}

.bb-min-w-50 {
  min-width: 50% !important;
}

.bb-min-h-50 {
  min-height: 50% !important;
}

@media (min-width: 576px) {
  .bb-w-sm-50 {
    width: 50% !important;
  }
  .bb-h-sm-50 {
    height: 50% !important;
  }
  .bb-mw-sm-50 {
    max-width: 50% !important;
  }
  .bb-mh-sm-50 {
    max-height: 50% !important;
  }
  .bb-min-w-sm-50 {
    min-width: 50% !important;
  }
  .bb-min-h-sm-50 {
    min-height: 50% !important;
  }
}
@media (min-width: 768px) {
  .bb-w-md-50 {
    width: 50% !important;
  }
  .bb-h-md-50 {
    height: 50% !important;
  }
  .bb-mw-md-50 {
    max-width: 50% !important;
  }
  .bb-mh-md-50 {
    max-height: 50% !important;
  }
  .bb-min-w-md-50 {
    min-width: 50% !important;
  }
  .bb-min-h-md-50 {
    min-height: 50% !important;
  }
}
@media (min-width: 992px) {
  .bb-w-lg-50 {
    width: 50% !important;
  }
  .bb-h-lg-50 {
    height: 50% !important;
  }
  .bb-mw-lg-50 {
    max-width: 50% !important;
  }
  .bb-mh-lg-50 {
    max-height: 50% !important;
  }
  .bb-min-w-lg-50 {
    min-width: 50% !important;
  }
  .bb-min-h-lg-50 {
    min-height: 50% !important;
  }
}
@media (min-width: 1200px) {
  .bb-w-xl-50 {
    width: 50% !important;
  }
  .bb-h-xl-50 {
    height: 50% !important;
  }
  .bb-mw-xl-50 {
    max-width: 50% !important;
  }
  .bb-mh-xl-50 {
    max-height: 50% !important;
  }
  .bb-min-w-xl-50 {
    min-width: 50% !important;
  }
  .bb-min-h-xl-50 {
    min-height: 50% !important;
  }
}
@media (min-width: 1400px) {
  .bb-w-xxl-50 {
    width: 50% !important;
  }
  .bb-h-xxl-50 {
    height: 50% !important;
  }
  .bb-mw-xxl-50 {
    max-width: 50% !important;
  }
  .bb-mh-xxl-50 {
    max-height: 50% !important;
  }
  .bb-min-w-xxl-50 {
    min-width: 50% !important;
  }
  .bb-min-h-xxl-50 {
    min-height: 50% !important;
  }
}
.bb-w-75 {
  width: 75% !important;
}

.bb-h-75 {
  height: 75% !important;
}

.bb-mw-75 {
  max-width: 75% !important;
}

.bb-mh-75 {
  max-height: 75% !important;
}

.bb-min-w-75 {
  min-width: 75% !important;
}

.bb-min-h-75 {
  min-height: 75% !important;
}

@media (min-width: 576px) {
  .bb-w-sm-75 {
    width: 75% !important;
  }
  .bb-h-sm-75 {
    height: 75% !important;
  }
  .bb-mw-sm-75 {
    max-width: 75% !important;
  }
  .bb-mh-sm-75 {
    max-height: 75% !important;
  }
  .bb-min-w-sm-75 {
    min-width: 75% !important;
  }
  .bb-min-h-sm-75 {
    min-height: 75% !important;
  }
}
@media (min-width: 768px) {
  .bb-w-md-75 {
    width: 75% !important;
  }
  .bb-h-md-75 {
    height: 75% !important;
  }
  .bb-mw-md-75 {
    max-width: 75% !important;
  }
  .bb-mh-md-75 {
    max-height: 75% !important;
  }
  .bb-min-w-md-75 {
    min-width: 75% !important;
  }
  .bb-min-h-md-75 {
    min-height: 75% !important;
  }
}
@media (min-width: 992px) {
  .bb-w-lg-75 {
    width: 75% !important;
  }
  .bb-h-lg-75 {
    height: 75% !important;
  }
  .bb-mw-lg-75 {
    max-width: 75% !important;
  }
  .bb-mh-lg-75 {
    max-height: 75% !important;
  }
  .bb-min-w-lg-75 {
    min-width: 75% !important;
  }
  .bb-min-h-lg-75 {
    min-height: 75% !important;
  }
}
@media (min-width: 1200px) {
  .bb-w-xl-75 {
    width: 75% !important;
  }
  .bb-h-xl-75 {
    height: 75% !important;
  }
  .bb-mw-xl-75 {
    max-width: 75% !important;
  }
  .bb-mh-xl-75 {
    max-height: 75% !important;
  }
  .bb-min-w-xl-75 {
    min-width: 75% !important;
  }
  .bb-min-h-xl-75 {
    min-height: 75% !important;
  }
}
@media (min-width: 1400px) {
  .bb-w-xxl-75 {
    width: 75% !important;
  }
  .bb-h-xxl-75 {
    height: 75% !important;
  }
  .bb-mw-xxl-75 {
    max-width: 75% !important;
  }
  .bb-mh-xxl-75 {
    max-height: 75% !important;
  }
  .bb-min-w-xxl-75 {
    min-width: 75% !important;
  }
  .bb-min-h-xxl-75 {
    min-height: 75% !important;
  }
}
.bb-w-100 {
  width: 100% !important;
}

.bb-h-100 {
  height: 100% !important;
}

.bb-mw-100 {
  max-width: 100% !important;
}

.bb-mh-100 {
  max-height: 100% !important;
}

.bb-min-w-100 {
  min-width: 100% !important;
}

.bb-min-h-100 {
  min-height: 100% !important;
}

@media (min-width: 576px) {
  .bb-w-sm-100 {
    width: 100% !important;
  }
  .bb-h-sm-100 {
    height: 100% !important;
  }
  .bb-mw-sm-100 {
    max-width: 100% !important;
  }
  .bb-mh-sm-100 {
    max-height: 100% !important;
  }
  .bb-min-w-sm-100 {
    min-width: 100% !important;
  }
  .bb-min-h-sm-100 {
    min-height: 100% !important;
  }
}
@media (min-width: 768px) {
  .bb-w-md-100 {
    width: 100% !important;
  }
  .bb-h-md-100 {
    height: 100% !important;
  }
  .bb-mw-md-100 {
    max-width: 100% !important;
  }
  .bb-mh-md-100 {
    max-height: 100% !important;
  }
  .bb-min-w-md-100 {
    min-width: 100% !important;
  }
  .bb-min-h-md-100 {
    min-height: 100% !important;
  }
}
@media (min-width: 992px) {
  .bb-w-lg-100 {
    width: 100% !important;
  }
  .bb-h-lg-100 {
    height: 100% !important;
  }
  .bb-mw-lg-100 {
    max-width: 100% !important;
  }
  .bb-mh-lg-100 {
    max-height: 100% !important;
  }
  .bb-min-w-lg-100 {
    min-width: 100% !important;
  }
  .bb-min-h-lg-100 {
    min-height: 100% !important;
  }
}
@media (min-width: 1200px) {
  .bb-w-xl-100 {
    width: 100% !important;
  }
  .bb-h-xl-100 {
    height: 100% !important;
  }
  .bb-mw-xl-100 {
    max-width: 100% !important;
  }
  .bb-mh-xl-100 {
    max-height: 100% !important;
  }
  .bb-min-w-xl-100 {
    min-width: 100% !important;
  }
  .bb-min-h-xl-100 {
    min-height: 100% !important;
  }
}
@media (min-width: 1400px) {
  .bb-w-xxl-100 {
    width: 100% !important;
  }
  .bb-h-xxl-100 {
    height: 100% !important;
  }
  .bb-mw-xxl-100 {
    max-width: 100% !important;
  }
  .bb-mh-xxl-100 {
    max-height: 100% !important;
  }
  .bb-min-w-xxl-100 {
    min-width: 100% !important;
  }
  .bb-min-h-xxl-100 {
    min-height: 100% !important;
  }
}
.bb-w-auto {
  width: auto !important;
}

.bb-h-auto {
  height: auto !important;
}

.bb-mw-auto {
  max-width: auto !important;
}

.bb-mh-auto {
  max-height: auto !important;
}

.bb-min-w-auto {
  min-width: auto !important;
}

.bb-min-h-auto {
  min-height: auto !important;
}

@media (min-width: 576px) {
  .bb-w-sm-auto {
    width: auto !important;
  }
  .bb-h-sm-auto {
    height: auto !important;
  }
  .bb-mw-sm-auto {
    max-width: auto !important;
  }
  .bb-mh-sm-auto {
    max-height: auto !important;
  }
  .bb-min-w-sm-auto {
    min-width: auto !important;
  }
  .bb-min-h-sm-auto {
    min-height: auto !important;
  }
}
@media (min-width: 768px) {
  .bb-w-md-auto {
    width: auto !important;
  }
  .bb-h-md-auto {
    height: auto !important;
  }
  .bb-mw-md-auto {
    max-width: auto !important;
  }
  .bb-mh-md-auto {
    max-height: auto !important;
  }
  .bb-min-w-md-auto {
    min-width: auto !important;
  }
  .bb-min-h-md-auto {
    min-height: auto !important;
  }
}
@media (min-width: 992px) {
  .bb-w-lg-auto {
    width: auto !important;
  }
  .bb-h-lg-auto {
    height: auto !important;
  }
  .bb-mw-lg-auto {
    max-width: auto !important;
  }
  .bb-mh-lg-auto {
    max-height: auto !important;
  }
  .bb-min-w-lg-auto {
    min-width: auto !important;
  }
  .bb-min-h-lg-auto {
    min-height: auto !important;
  }
}
@media (min-width: 1200px) {
  .bb-w-xl-auto {
    width: auto !important;
  }
  .bb-h-xl-auto {
    height: auto !important;
  }
  .bb-mw-xl-auto {
    max-width: auto !important;
  }
  .bb-mh-xl-auto {
    max-height: auto !important;
  }
  .bb-min-w-xl-auto {
    min-width: auto !important;
  }
  .bb-min-h-xl-auto {
    min-height: auto !important;
  }
}
@media (min-width: 1400px) {
  .bb-w-xxl-auto {
    width: auto !important;
  }
  .bb-h-xxl-auto {
    height: auto !important;
  }
  .bb-mw-xxl-auto {
    max-width: auto !important;
  }
  .bb-mh-xxl-auto {
    max-height: auto !important;
  }
  .bb-min-w-xxl-auto {
    min-width: auto !important;
  }
  .bb-min-h-xxl-auto {
    min-height: auto !important;
  }
}
/* Px (non-responsive) */
.bb-w-16px {
  width: 16px !important;
}

.bb-h-16px {
  height: 16px !important;
}

.bb-mw-16px {
  max-width: 16px !important;
}

.bb-mh-16px {
  max-height: 16px !important;
}

.bb-min-w-16px {
  min-width: 16px !important;
}

.bb-min-h-16px {
  min-height: 16px !important;
}

.bb-w-20px {
  width: 20px !important;
}

.bb-h-20px {
  height: 20px !important;
}

.bb-mw-20px {
  max-width: 20px !important;
}

.bb-mh-20px {
  max-height: 20px !important;
}

.bb-min-w-20px {
  min-width: 20px !important;
}

.bb-min-h-20px {
  min-height: 20px !important;
}

.bb-w-24px {
  width: 24px !important;
}

.bb-h-24px {
  height: 24px !important;
}

.bb-mw-24px {
  max-width: 24px !important;
}

.bb-mh-24px {
  max-height: 24px !important;
}

.bb-min-w-24px {
  min-width: 24px !important;
}

.bb-min-h-24px {
  min-height: 24px !important;
}

.bb-w-28px {
  width: 28px !important;
}

.bb-h-28px {
  height: 28px !important;
}

.bb-mw-28px {
  max-width: 28px !important;
}

.bb-mh-28px {
  max-height: 28px !important;
}

.bb-min-w-28px {
  min-width: 28px !important;
}

.bb-min-h-28px {
  min-height: 28px !important;
}

.bb-w-32px {
  width: 32px !important;
}

.bb-h-32px {
  height: 32px !important;
}

.bb-mw-32px {
  max-width: 32px !important;
}

.bb-mh-32px {
  max-height: 32px !important;
}

.bb-min-w-32px {
  min-width: 32px !important;
}

.bb-min-h-32px {
  min-height: 32px !important;
}

.bb-w-40px {
  width: 40px !important;
}

.bb-h-40px {
  height: 40px !important;
}

.bb-mw-40px {
  max-width: 40px !important;
}

.bb-mh-40px {
  max-height: 40px !important;
}

.bb-min-w-40px {
  min-width: 40px !important;
}

.bb-min-h-40px {
  min-height: 40px !important;
}

.bb-w-48px {
  width: 48px !important;
}

.bb-h-48px {
  height: 48px !important;
}

.bb-mw-48px {
  max-width: 48px !important;
}

.bb-mh-48px {
  max-height: 48px !important;
}

.bb-min-w-48px {
  min-width: 48px !important;
}

.bb-min-h-48px {
  min-height: 48px !important;
}

.bb-w-56px {
  width: 56px !important;
}

.bb-h-56px {
  height: 56px !important;
}

.bb-mw-56px {
  max-width: 56px !important;
}

.bb-mh-56px {
  max-height: 56px !important;
}

.bb-min-w-56px {
  min-width: 56px !important;
}

.bb-min-h-56px {
  min-height: 56px !important;
}

.bb-w-64px {
  width: 64px !important;
}

.bb-h-64px {
  height: 64px !important;
}

.bb-mw-64px {
  max-width: 64px !important;
}

.bb-mh-64px {
  max-height: 64px !important;
}

.bb-min-w-64px {
  min-width: 64px !important;
}

.bb-min-h-64px {
  min-height: 64px !important;
}

.bb-w-80px {
  width: 80px !important;
}

.bb-h-80px {
  height: 80px !important;
}

.bb-mw-80px {
  max-width: 80px !important;
}

.bb-mh-80px {
  max-height: 80px !important;
}

.bb-min-w-80px {
  min-width: 80px !important;
}

.bb-min-h-80px {
  min-height: 80px !important;
}

.bb-w-96px {
  width: 96px !important;
}

.bb-h-96px {
  height: 96px !important;
}

.bb-mw-96px {
  max-width: 96px !important;
}

.bb-mh-96px {
  max-height: 96px !important;
}

.bb-min-w-96px {
  min-width: 96px !important;
}

.bb-min-h-96px {
  min-height: 96px !important;
}

.bb-w-120px {
  width: 120px !important;
}

.bb-h-120px {
  height: 120px !important;
}

.bb-mw-120px {
  max-width: 120px !important;
}

.bb-mh-120px {
  max-height: 120px !important;
}

.bb-min-w-120px {
  min-width: 120px !important;
}

.bb-min-h-120px {
  min-height: 120px !important;
}

.bb-w-150px {
  width: 150px !important;
}

.bb-h-150px {
  height: 150px !important;
}

.bb-mw-150px {
  max-width: 150px !important;
}

.bb-mh-150px {
  max-height: 150px !important;
}

.bb-min-w-150px {
  min-width: 150px !important;
}

.bb-min-h-150px {
  min-height: 150px !important;
}

.bb-w-200px {
  width: 200px !important;
}

.bb-h-200px {
  height: 200px !important;
}

.bb-mw-200px {
  max-width: 200px !important;
}

.bb-mh-200px {
  max-height: 200px !important;
}

.bb-min-w-200px {
  min-width: 200px !important;
}

.bb-min-h-200px {
  min-height: 200px !important;
}

.bb-w-250px {
  width: 250px !important;
}

.bb-h-250px {
  height: 250px !important;
}

.bb-mw-250px {
  max-width: 250px !important;
}

.bb-mh-250px {
  max-height: 250px !important;
}

.bb-min-w-250px {
  min-width: 250px !important;
}

.bb-min-h-250px {
  min-height: 250px !important;
}

.bb-w-300px {
  width: 300px !important;
}

.bb-h-300px {
  height: 300px !important;
}

.bb-mw-300px {
  max-width: 300px !important;
}

.bb-mh-300px {
  max-height: 300px !important;
}

.bb-min-w-300px {
  min-width: 300px !important;
}

.bb-min-h-300px {
  min-height: 300px !important;
}

.bb-w-400px {
  width: 400px !important;
}

.bb-h-400px {
  height: 400px !important;
}

.bb-mw-400px {
  max-width: 400px !important;
}

.bb-mh-400px {
  max-height: 400px !important;
}

.bb-min-w-400px {
  min-width: 400px !important;
}

.bb-min-h-400px {
  min-height: 400px !important;
}

.bb-w-500px {
  width: 500px !important;
}

.bb-h-500px {
  height: 500px !important;
}

.bb-mw-500px {
  max-width: 500px !important;
}

.bb-mh-500px {
  max-height: 500px !important;
}

.bb-min-w-500px {
  min-width: 500px !important;
}

.bb-min-h-500px {
  min-height: 500px !important;
}

/* -------------------------------------
   Z-index (small, useful)
------------------------------------- */
.bb-zindex-n1 {
  z-index: -1 !important;
}

.bb-zindex-0 {
  z-index: 0 !important;
}

.bb-zindex-1 {
  z-index: 1 !important;
}

.bb-zindex-2 {
  z-index: 2 !important;
}

.bb-zindex-3 {
  z-index: 3 !important;
}

.bb-zindex-10 {
  z-index: 10 !important;
}

.bb-zindex-50 {
  z-index: 50 !important;
}

.bb-zindex-100 {
  z-index: 100 !important;
}

.bb-zindex-999 {
  z-index: 999 !important;
}

/* -------------------------------------
   Border width (sides)
   Not: color/style/state -> _border.scss
------------------------------------- */
.bb-border-top-0 {
  border-top-width: 0 !important;
}

.bb-border-bottom-0 {
  border-bottom-width: 0 !important;
}

.bb-border-start-0 {
  border-left-width: 0 !important;
}

.bb-border-end-0 {
  border-right-width: 0 !important;
}

.bb-border-top-1 {
  border-top-width: 1px !important;
}

.bb-border-bottom-1 {
  border-bottom-width: 1px !important;
}

.bb-border-start-1 {
  border-left-width: 1px !important;
}

.bb-border-end-1 {
  border-right-width: 1px !important;
}

.bb-border-top-2 {
  border-top-width: 2px !important;
}

.bb-border-bottom-2 {
  border-bottom-width: 2px !important;
}

.bb-border-start-2 {
  border-left-width: 2px !important;
}

.bb-border-end-2 {
  border-right-width: 2px !important;
}

.bb-border-top-3 {
  border-top-width: 3px !important;
}

.bb-border-bottom-3 {
  border-bottom-width: 3px !important;
}

.bb-border-start-3 {
  border-left-width: 3px !important;
}

.bb-border-end-3 {
  border-right-width: 3px !important;
}

.bb-border-top-4 {
  border-top-width: 4px !important;
}

.bb-border-bottom-4 {
  border-bottom-width: 4px !important;
}

.bb-border-start-4 {
  border-left-width: 4px !important;
}

.bb-border-end-4 {
  border-right-width: 4px !important;
}

.bb-border-top-5 {
  border-top-width: 5px !important;
}

.bb-border-bottom-5 {
  border-bottom-width: 5px !important;
}

.bb-border-start-5 {
  border-left-width: 5px !important;
}

.bb-border-end-5 {
  border-right-width: 5px !important;
}

/* -------------------------------------
   Line-height
------------------------------------- */
.bb-lh-0 {
  line-height: 0 !important;
}

.bb-lh-1 {
  line-height: 1 !important;
}

.bb-lh-sm {
  line-height: 1.25 !important;
}

.bb-lh-base {
  line-height: 1.5 !important;
}

.bb-lh-lg {
  line-height: 1.75 !important;
}

.bb-lh-xl {
  line-height: 2 !important;
}

.bb-lh-xxl {
  line-height: 2.25 !important;
}

/* -------------------------------------
   Letter-spacing
------------------------------------- */
.bb-ls-1 {
  letter-spacing: 0.1rem !important;
}

.bb-ls-2 {
  letter-spacing: 0.115rem !important;
}

.bb-ls-3 {
  letter-spacing: 0.125rem !important;
}

.bb-ls-4 {
  letter-spacing: 0.25rem !important;
}

.bb-ls-n1 {
  letter-spacing: -0.1rem !important;
}

.bb-ls-n2 {
  letter-spacing: -0.115rem !important;
}

.bb-ls-n3 {
  letter-spacing: -0.125rem !important;
}

/* -------------------------------------
   Rounded (token-driven)
------------------------------------- */
.bb-rounded {
  border-radius: var(--bb-radius) !important;
}

.bb-rounded-0 {
  border-radius: 0 !important;
}

.bb-rounded-sm {
  border-radius: var(--bb-radius-sm) !important;
}

.bb-rounded-lg {
  border-radius: var(--bb-radius-lg) !important;
}

.bb-rounded-xl {
  border-radius: var(--bb-radius-xl) !important;
}

.bb-rounded-2xl {
  border-radius: var(--bb-radius-2xl) !important;
}

.bb-rounded-pill {
  border-radius: var(--bb-radius-pill) !important;
}

.bb-rounded-circle {
  border-radius: 50% !important;
}

.bb-drawer-lock {
  overflow: hidden;
}

/* =====================================
   Bulbulustur Theme – Flex Helpers
   bb- prefix | responsive | Bootstrap SCSS bağımsız
   ===================================== */
/* Breakpoints (Bootstrap 5 defaults) */
/* -------------------------------------
   Base (non-responsive)
------------------------------------- */
.bb-flex-equal {
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 0;
}

/* -------------------------------------
   Responsive helpers
------------------------------------- */
@media (min-width: 576px) {
  /* infix (bootstrap style) */
  .bb-flex-sm-root {
    flex: 1 !important;
  }
  .bb-flex-sm-column-auto {
    flex: none !important;
  }
  .bb-flex-sm-column-fluid {
    flex: 1 0 auto !important;
  }
  .bb-flex-sm-row-auto {
    flex: 0 0 auto !important;
  }
  .bb-flex-sm-row-fluid {
    flex: 1 auto !important;
    min-width: 0 !important;
  }
  .bb-flex-sm-center {
    justify-content: center !important;
    align-items: center !important;
  }
  .bb-flex-sm-start {
    justify-content: start !important;
    align-items: start !important;
  }
  .bb-flex-sm-end {
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
  .bb-flex-sm-stack {
    justify-content: space-between !important;
    align-items: center !important;
  }
}
@media (min-width: 768px) {
  /* infix (bootstrap style) */
  .bb-flex-md-root {
    flex: 1 !important;
  }
  .bb-flex-md-column-auto {
    flex: none !important;
  }
  .bb-flex-md-column-fluid {
    flex: 1 0 auto !important;
  }
  .bb-flex-md-row-auto {
    flex: 0 0 auto !important;
  }
  .bb-flex-md-row-fluid {
    flex: 1 auto !important;
    min-width: 0 !important;
  }
  .bb-flex-md-center {
    justify-content: center !important;
    align-items: center !important;
  }
  .bb-flex-md-start {
    justify-content: start !important;
    align-items: start !important;
  }
  .bb-flex-md-end {
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
  .bb-flex-md-stack {
    justify-content: space-between !important;
    align-items: center !important;
  }
}
@media (min-width: 992px) {
  /* infix (bootstrap style) */
  .bb-flex-lg-root {
    flex: 1 !important;
  }
  .bb-flex-lg-column-auto {
    flex: none !important;
  }
  .bb-flex-lg-column-fluid {
    flex: 1 0 auto !important;
  }
  .bb-flex-lg-row-auto {
    flex: 0 0 auto !important;
  }
  .bb-flex-lg-row-fluid {
    flex: 1 auto !important;
    min-width: 0 !important;
  }
  .bb-flex-lg-center {
    justify-content: center !important;
    align-items: center !important;
  }
  .bb-flex-lg-start {
    justify-content: start !important;
    align-items: start !important;
  }
  .bb-flex-lg-end {
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
  .bb-flex-lg-stack {
    justify-content: space-between !important;
    align-items: center !important;
  }
}
@media (min-width: 1200px) {
  /* infix (bootstrap style) */
  .bb-flex-xl-root {
    flex: 1 !important;
  }
  .bb-flex-xl-column-auto {
    flex: none !important;
  }
  .bb-flex-xl-column-fluid {
    flex: 1 0 auto !important;
  }
  .bb-flex-xl-row-auto {
    flex: 0 0 auto !important;
  }
  .bb-flex-xl-row-fluid {
    flex: 1 auto !important;
    min-width: 0 !important;
  }
  .bb-flex-xl-center {
    justify-content: center !important;
    align-items: center !important;
  }
  .bb-flex-xl-start {
    justify-content: start !important;
    align-items: start !important;
  }
  .bb-flex-xl-end {
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
  .bb-flex-xl-stack {
    justify-content: space-between !important;
    align-items: center !important;
  }
}
@media (min-width: 1400px) {
  /* infix (bootstrap style) */
  .bb-flex-xxl-root {
    flex: 1 !important;
  }
  .bb-flex-xxl-column-auto {
    flex: none !important;
  }
  .bb-flex-xxl-column-fluid {
    flex: 1 0 auto !important;
  }
  .bb-flex-xxl-row-auto {
    flex: 0 0 auto !important;
  }
  .bb-flex-xxl-row-fluid {
    flex: 1 auto !important;
    min-width: 0 !important;
  }
  .bb-flex-xxl-center {
    justify-content: center !important;
    align-items: center !important;
  }
  .bb-flex-xxl-start {
    justify-content: start !important;
    align-items: start !important;
  }
  .bb-flex-xxl-end {
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
  .bb-flex-xxl-stack {
    justify-content: space-between !important;
    align-items: center !important;
  }
}
/* =====================================
   Bulbulustur Theme – Transform Helpers (PURE)
   bb- prefix | token-driven | minimal + practical
   Scope: utilities/transform
===================================== */
:root {
  /* -------------------------------------
     Rotate angles
  ------------------------------------- */
  --bb-rotate-0: 0deg;
  --bb-rotate-45: 45deg;
  --bb-rotate-90: 90deg;
  --bb-rotate-180: 180deg;
  --bb-rotate-270: 270deg;
  /* Negative rotate */
  --bb-rotate-n45: -45deg;
  --bb-rotate-n90: -90deg;
  --bb-rotate-n180: -180deg;
  /* -------------------------------------
     Scale
  ------------------------------------- */
  --bb-scale-90: 0.9;
  --bb-scale-100: 1;
  --bb-scale-105: 1.05;
  --bb-scale-110: 1.1;
  --bb-scale-125: 1.25;
  /* -------------------------------------
     Translate (consume global spacing tokens)
     If spacing system is not loaded, fallback to Bootstrap spacer math.
  ------------------------------------- */
  --bb-translate-x-1: var(--bb-space-1, calc(var(--bs-spacer, 1rem) * 0.25));
  --bb-translate-x-2: var(--bb-space-2, calc(var(--bs-spacer, 1rem) * 0.5));
  --bb-translate-x-3: var(--bb-space-3, calc(var(--bs-spacer, 1rem) * 0.75));
  --bb-translate-y-1: var(--bb-space-1, calc(var(--bs-spacer, 1rem) * 0.25));
  --bb-translate-y-2: var(--bb-space-2, calc(var(--bs-spacer, 1rem) * 0.5));
  --bb-translate-y-3: var(--bb-space-3, calc(var(--bs-spacer, 1rem) * 0.75));
  /* -------------------------------------
     Origins
  ------------------------------------- */
  --bb-origin-center: center;
  --bb-origin-top: top;
  --bb-origin-right: right;
  --bb-origin-bottom: bottom;
  --bb-origin-left: left;
  --bb-origin-right-top: right top;
  /* -------------------------------------
     Generic hooks
  ------------------------------------- */
  --bb-transform: none;
  --bb-transform-origin: center;
}

/* -------------------------------------
   Generic hook (composite transform)
------------------------------------- */
.bb-transform {
  transform: var(--bb-transform) !important;
  transform-origin: var(--bb-transform-origin) !important;
}

/* Opt-in performance helper */
.bb-transform-optimized {
  transform: var(--bb-transform) !important;
  transform-origin: var(--bb-transform-origin) !important;
  will-change: transform;
  backface-visibility: hidden;
}

/* -------------------------------------
   Rotate utilities
------------------------------------- */
.bb-rotate-0 {
  transform: rotate(var(--bb-rotate-0)) !important;
}

.bb-rotate-45 {
  transform: rotate(var(--bb-rotate-45)) !important;
}

.bb-rotate-90 {
  transform: rotate(var(--bb-rotate-90)) !important;
}

.bb-rotate-180 {
  transform: rotate(var(--bb-rotate-180)) !important;
}

.bb-rotate-270 {
  transform: rotate(var(--bb-rotate-270)) !important;
}

.bb-rotate-n45 {
  transform: rotate(var(--bb-rotate-n45)) !important;
}

.bb-rotate-n90 {
  transform: rotate(var(--bb-rotate-n90)) !important;
}

.bb-rotate-n180 {
  transform: rotate(var(--bb-rotate-n180)) !important;
}

/* Metronic-like specific */
.bb-rotate-90-rt {
  transform: rotate(var(--bb-rotate-90)) !important;
  transform-origin: var(--bb-origin-right-top) !important;
}

/* -------------------------------------
   Scale utilities
------------------------------------- */
.bb-scale-90 {
  transform: scale(var(--bb-scale-90)) !important;
}

.bb-scale-100 {
  transform: scale(var(--bb-scale-100)) !important;
}

.bb-scale-105 {
  transform: scale(var(--bb-scale-105)) !important;
}

.bb-scale-110 {
  transform: scale(var(--bb-scale-110)) !important;
}

.bb-scale-125 {
  transform: scale(var(--bb-scale-125)) !important;
}

/* -------------------------------------
   Translate utilities (positive)
------------------------------------- */
.bb-translate-x-1 {
  transform: translateX(var(--bb-translate-x-1)) !important;
}

.bb-translate-x-2 {
  transform: translateX(var(--bb-translate-x-2)) !important;
}

.bb-translate-x-3 {
  transform: translateX(var(--bb-translate-x-3)) !important;
}

.bb-translate-y-1 {
  transform: translateY(var(--bb-translate-y-1)) !important;
}

.bb-translate-y-2 {
  transform: translateY(var(--bb-translate-y-2)) !important;
}

.bb-translate-y-3 {
  transform: translateY(var(--bb-translate-y-3)) !important;
}

/* -------------------------------------
   Translate utilities (negative)
------------------------------------- */
.bb-translate-x-n1 {
  transform: translateX(calc(var(--bb-translate-x-1) * -1)) !important;
}

.bb-translate-x-n2 {
  transform: translateX(calc(var(--bb-translate-x-2) * -1)) !important;
}

.bb-translate-x-n3 {
  transform: translateX(calc(var(--bb-translate-x-3) * -1)) !important;
}

.bb-translate-y-n1 {
  transform: translateY(calc(var(--bb-translate-y-1) * -1)) !important;
}

.bb-translate-y-n2 {
  transform: translateY(calc(var(--bb-translate-y-2) * -1)) !important;
}

.bb-translate-y-n3 {
  transform: translateY(calc(var(--bb-translate-y-3) * -1)) !important;
}

/* -------------------------------------
   Transform origin helpers
------------------------------------- */
.bb-origin-center {
  transform-origin: var(--bb-origin-center) !important;
}

.bb-origin-top {
  transform-origin: var(--bb-origin-top) !important;
}

.bb-origin-right {
  transform-origin: var(--bb-origin-right) !important;
}

.bb-origin-bottom {
  transform-origin: var(--bb-origin-bottom) !important;
}

.bb-origin-left {
  transform-origin: var(--bb-origin-left) !important;
}

/* =====================================
   Bulbulustur Theme – Background Helpers
   bb- prefix | token-driven | dark/light safe
   ===================================== */
/* -------------------------------------
   Base surfaces
------------------------------------- */
.bb-bg-body {
  background-color: var(--bb-body-bg) !important;
}

.bb-bg-surface {
  background-color: var(--bb-surface-bg) !important;
}

.bb-bg-surface-soft {
  background-color: var(--bb-surface-soft) !important;
}

.bb-bg-surface-muted {
  background-color: var(--bb-surface-muted) !important;
}

.bb-bg-surface-elevated {
  background-color: var(--bb-surface-elevated) !important;
}

/* Numbered aliases (geriye dönük uyumluluk) */
.bb-bg-surface-1 {
  background-color: var(--bb-body-bg) !important;
}

.bb-bg-surface-2 {
  background-color: var(--bb-tertiary-bg) !important;
}

.bb-bg-surface-3 {
  background-color: var(--bb-secondary-bg) !important;
}

/* -------------------------------------
   Neutral helpers
------------------------------------- */
.bb-bg-white {
  background-color: var(--bb-surface-elevated) !important;
}

.bb-bg-black {
  background-color: var(--bb-black) !important;
}

.bb-bg-transparent {
  background-color: transparent !important;
}

/* -------------------------------------
   Page accent backgrounds
   Surface sistemine bağlı, data-bb-surface
   değişince otomatik güncellenir
------------------------------------- */
.bb-bg-accent {
  background-color: var(--bb-page-accent) !important;
}

.bb-bg-accent-soft {
  background-color: var(--bb-page-accent-soft) !important;
}

.bb-bg-accent-muted {
  background-color: var(--bb-page-accent-muted) !important;
}

.bb-bg-accent-clarity {
  background-color: var(--bb-page-accent-clarity) !important;
}

.bb-bg-hover-accent:hover {
  background-color: var(--bb-page-accent) !important;
}

.bb-bg-hover-accent-soft:hover {
  background-color: var(--bb-page-accent-soft) !important;
}

.bb-bg-active-accent.active {
  background-color: var(--bb-page-accent) !important;
}

.bb-bg-state-accent {
  cursor: pointer;
}
.bb-bg-state-accent:hover, .bb-bg-state-accent.active {
  background-color: var(--bb-page-accent-soft) !important;
}

/* -------------------------------------
   Semantic backgrounds
------------------------------------- */
/* Solid */
.bb-bg-primary {
  background-color: var(--bb-primary) !important;
}

/* Soft / light */
.bb-bg-primary-soft {
  background-color: var(--bb-primary-light) !important;
}

/* Clarity / subtle */
.bb-bg-primary-clarity {
  background-color: var(--bb-primary-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-primary:hover {
  background-color: var(--bb-primary) !important;
}

/* Active solid */
.bb-bg-active-primary.active {
  background-color: var(--bb-primary) !important;
}

/* Hover + active birlikte */
.bb-bg-state-primary {
  cursor: pointer;
}
.bb-bg-state-primary:hover, .bb-bg-state-primary.active {
  background-color: var(--bb-primary) !important;
}

/* Soft states */
.bb-bg-hover-primary-soft:hover {
  background-color: var(--bb-primary-light) !important;
}

.bb-bg-state-primary-soft {
  cursor: pointer;
}
.bb-bg-state-primary-soft:hover, .bb-bg-state-primary-soft.active {
  background-color: var(--bb-primary-light) !important;
}

/* Clarity states */
.bb-bg-hover-primary-clarity:hover {
  background-color: var(--bb-primary-clarity) !important;
}

.bb-bg-state-primary-clarity {
  cursor: pointer;
}
.bb-bg-state-primary-clarity:hover, .bb-bg-state-primary-clarity.active {
  background-color: var(--bb-primary-clarity) !important;
}

/* Solid */
.bb-bg-secondary {
  background-color: var(--bb-secondary) !important;
}

/* Soft / light */
.bb-bg-secondary-soft {
  background-color: var(--bb-secondary-light) !important;
}

/* Clarity / subtle */
.bb-bg-secondary-clarity {
  background-color: var(--bb-secondary-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-secondary:hover {
  background-color: var(--bb-secondary) !important;
}

/* Active solid */
.bb-bg-active-secondary.active {
  background-color: var(--bb-secondary) !important;
}

/* Hover + active birlikte */
.bb-bg-state-secondary {
  cursor: pointer;
}
.bb-bg-state-secondary:hover, .bb-bg-state-secondary.active {
  background-color: var(--bb-secondary) !important;
}

/* Soft states */
.bb-bg-hover-secondary-soft:hover {
  background-color: var(--bb-secondary-light) !important;
}

.bb-bg-state-secondary-soft {
  cursor: pointer;
}
.bb-bg-state-secondary-soft:hover, .bb-bg-state-secondary-soft.active {
  background-color: var(--bb-secondary-light) !important;
}

/* Clarity states */
.bb-bg-hover-secondary-clarity:hover {
  background-color: var(--bb-secondary-clarity) !important;
}

.bb-bg-state-secondary-clarity {
  cursor: pointer;
}
.bb-bg-state-secondary-clarity:hover, .bb-bg-state-secondary-clarity.active {
  background-color: var(--bb-secondary-clarity) !important;
}

/* Solid */
.bb-bg-success {
  background-color: var(--bb-success) !important;
}

/* Soft / light */
.bb-bg-success-soft {
  background-color: var(--bb-success-light) !important;
}

/* Clarity / subtle */
.bb-bg-success-clarity {
  background-color: var(--bb-success-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-success:hover {
  background-color: var(--bb-success) !important;
}

/* Active solid */
.bb-bg-active-success.active {
  background-color: var(--bb-success) !important;
}

/* Hover + active birlikte */
.bb-bg-state-success {
  cursor: pointer;
}
.bb-bg-state-success:hover, .bb-bg-state-success.active {
  background-color: var(--bb-success) !important;
}

/* Soft states */
.bb-bg-hover-success-soft:hover {
  background-color: var(--bb-success-light) !important;
}

.bb-bg-state-success-soft {
  cursor: pointer;
}
.bb-bg-state-success-soft:hover, .bb-bg-state-success-soft.active {
  background-color: var(--bb-success-light) !important;
}

/* Clarity states */
.bb-bg-hover-success-clarity:hover {
  background-color: var(--bb-success-clarity) !important;
}

.bb-bg-state-success-clarity {
  cursor: pointer;
}
.bb-bg-state-success-clarity:hover, .bb-bg-state-success-clarity.active {
  background-color: var(--bb-success-clarity) !important;
}

/* Solid */
.bb-bg-info {
  background-color: var(--bb-info) !important;
}

/* Soft / light */
.bb-bg-info-soft {
  background-color: var(--bb-info-light) !important;
}

/* Clarity / subtle */
.bb-bg-info-clarity {
  background-color: var(--bb-info-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-info:hover {
  background-color: var(--bb-info) !important;
}

/* Active solid */
.bb-bg-active-info.active {
  background-color: var(--bb-info) !important;
}

/* Hover + active birlikte */
.bb-bg-state-info {
  cursor: pointer;
}
.bb-bg-state-info:hover, .bb-bg-state-info.active {
  background-color: var(--bb-info) !important;
}

/* Soft states */
.bb-bg-hover-info-soft:hover {
  background-color: var(--bb-info-light) !important;
}

.bb-bg-state-info-soft {
  cursor: pointer;
}
.bb-bg-state-info-soft:hover, .bb-bg-state-info-soft.active {
  background-color: var(--bb-info-light) !important;
}

/* Clarity states */
.bb-bg-hover-info-clarity:hover {
  background-color: var(--bb-info-clarity) !important;
}

.bb-bg-state-info-clarity {
  cursor: pointer;
}
.bb-bg-state-info-clarity:hover, .bb-bg-state-info-clarity.active {
  background-color: var(--bb-info-clarity) !important;
}

/* Solid */
.bb-bg-warning {
  background-color: var(--bb-warning) !important;
}

/* Soft / light */
.bb-bg-warning-soft {
  background-color: var(--bb-warning-light) !important;
}

/* Clarity / subtle */
.bb-bg-warning-clarity {
  background-color: var(--bb-warning-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-warning:hover {
  background-color: var(--bb-warning) !important;
}

/* Active solid */
.bb-bg-active-warning.active {
  background-color: var(--bb-warning) !important;
}

/* Hover + active birlikte */
.bb-bg-state-warning {
  cursor: pointer;
}
.bb-bg-state-warning:hover, .bb-bg-state-warning.active {
  background-color: var(--bb-warning) !important;
}

/* Soft states */
.bb-bg-hover-warning-soft:hover {
  background-color: var(--bb-warning-light) !important;
}

.bb-bg-state-warning-soft {
  cursor: pointer;
}
.bb-bg-state-warning-soft:hover, .bb-bg-state-warning-soft.active {
  background-color: var(--bb-warning-light) !important;
}

/* Clarity states */
.bb-bg-hover-warning-clarity:hover {
  background-color: var(--bb-warning-clarity) !important;
}

.bb-bg-state-warning-clarity {
  cursor: pointer;
}
.bb-bg-state-warning-clarity:hover, .bb-bg-state-warning-clarity.active {
  background-color: var(--bb-warning-clarity) !important;
}

/* Solid */
.bb-bg-danger {
  background-color: var(--bb-danger) !important;
}

/* Soft / light */
.bb-bg-danger-soft {
  background-color: var(--bb-danger-light) !important;
}

/* Clarity / subtle */
.bb-bg-danger-clarity {
  background-color: var(--bb-danger-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-danger:hover {
  background-color: var(--bb-danger) !important;
}

/* Active solid */
.bb-bg-active-danger.active {
  background-color: var(--bb-danger) !important;
}

/* Hover + active birlikte */
.bb-bg-state-danger {
  cursor: pointer;
}
.bb-bg-state-danger:hover, .bb-bg-state-danger.active {
  background-color: var(--bb-danger) !important;
}

/* Soft states */
.bb-bg-hover-danger-soft:hover {
  background-color: var(--bb-danger-light) !important;
}

.bb-bg-state-danger-soft {
  cursor: pointer;
}
.bb-bg-state-danger-soft:hover, .bb-bg-state-danger-soft.active {
  background-color: var(--bb-danger-light) !important;
}

/* Clarity states */
.bb-bg-hover-danger-clarity:hover {
  background-color: var(--bb-danger-clarity) !important;
}

.bb-bg-state-danger-clarity {
  cursor: pointer;
}
.bb-bg-state-danger-clarity:hover, .bb-bg-state-danger-clarity.active {
  background-color: var(--bb-danger-clarity) !important;
}

/* Solid */
.bb-bg-dark {
  background-color: var(--bb-dark) !important;
}

/* Soft / light */
.bb-bg-dark-soft {
  background-color: var(--bb-dark-light) !important;
}

/* Clarity / subtle */
.bb-bg-dark-clarity {
  background-color: var(--bb-dark-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-dark:hover {
  background-color: var(--bb-dark) !important;
}

/* Active solid */
.bb-bg-active-dark.active {
  background-color: var(--bb-dark) !important;
}

/* Hover + active birlikte */
.bb-bg-state-dark {
  cursor: pointer;
}
.bb-bg-state-dark:hover, .bb-bg-state-dark.active {
  background-color: var(--bb-dark) !important;
}

/* Soft states */
.bb-bg-hover-dark-soft:hover {
  background-color: var(--bb-dark-light) !important;
}

.bb-bg-state-dark-soft {
  cursor: pointer;
}
.bb-bg-state-dark-soft:hover, .bb-bg-state-dark-soft.active {
  background-color: var(--bb-dark-light) !important;
}

/* Clarity states */
.bb-bg-hover-dark-clarity:hover {
  background-color: var(--bb-dark-clarity) !important;
}

.bb-bg-state-dark-clarity {
  cursor: pointer;
}
.bb-bg-state-dark-clarity:hover, .bb-bg-state-dark-clarity.active {
  background-color: var(--bb-dark-clarity) !important;
}

/* Solid */
.bb-bg-light {
  background-color: var(--bb-light) !important;
}

/* Soft / light */
.bb-bg-light-soft {
  background-color: var(--bb-light-light) !important;
}

/* Clarity / subtle */
.bb-bg-light-clarity {
  background-color: var(--bb-light-clarity) !important;
}

/* Hover solid */
.bb-bg-hover-light:hover {
  background-color: var(--bb-light) !important;
}

/* Active solid */
.bb-bg-active-light.active {
  background-color: var(--bb-light) !important;
}

/* Hover + active birlikte */
.bb-bg-state-light {
  cursor: pointer;
}
.bb-bg-state-light:hover, .bb-bg-state-light.active {
  background-color: var(--bb-light) !important;
}

/* Soft states */
.bb-bg-hover-light-soft:hover {
  background-color: var(--bb-light-light) !important;
}

.bb-bg-state-light-soft {
  cursor: pointer;
}
.bb-bg-state-light-soft:hover, .bb-bg-state-light-soft.active {
  background-color: var(--bb-light-light) !important;
}

/* Clarity states */
.bb-bg-hover-light-clarity:hover {
  background-color: var(--bb-light-clarity) !important;
}

.bb-bg-state-light-clarity {
  cursor: pointer;
}
.bb-bg-state-light-clarity:hover, .bb-bg-state-light-clarity.active {
  background-color: var(--bb-light-clarity) !important;
}

/* -------------------------------------
   Gray scale helpers
------------------------------------- */
.bb-bg-gray-50 {
  background-color: var(--bb-gray-50) !important;
}

.bb-bg-hover-gray-50:hover {
  background-color: var(--bb-gray-50) !important;
}

.bb-bg-gray-100 {
  background-color: var(--bb-gray-100) !important;
}

.bb-bg-hover-gray-100:hover {
  background-color: var(--bb-gray-100) !important;
}

.bb-bg-gray-200 {
  background-color: var(--bb-gray-200) !important;
}

.bb-bg-hover-gray-200:hover {
  background-color: var(--bb-gray-200) !important;
}

.bb-bg-gray-300 {
  background-color: var(--bb-gray-300) !important;
}

.bb-bg-hover-gray-300:hover {
  background-color: var(--bb-gray-300) !important;
}

.bb-bg-gray-400 {
  background-color: var(--bb-gray-400) !important;
}

.bb-bg-hover-gray-400:hover {
  background-color: var(--bb-gray-400) !important;
}

.bb-bg-gray-500 {
  background-color: var(--bb-gray-500) !important;
}

.bb-bg-hover-gray-500:hover {
  background-color: var(--bb-gray-500) !important;
}

.bb-bg-gray-600 {
  background-color: var(--bb-gray-600) !important;
}

.bb-bg-hover-gray-600:hover {
  background-color: var(--bb-gray-600) !important;
}

.bb-bg-gray-700 {
  background-color: var(--bb-gray-700) !important;
}

.bb-bg-hover-gray-700:hover {
  background-color: var(--bb-gray-700) !important;
}

.bb-bg-gray-800 {
  background-color: var(--bb-gray-800) !important;
}

.bb-bg-hover-gray-800:hover {
  background-color: var(--bb-gray-800) !important;
}

.bb-bg-gray-900 {
  background-color: var(--bb-gray-900) !important;
}

.bb-bg-hover-gray-900:hover {
  background-color: var(--bb-gray-900) !important;
}

/* -------------------------------------
   Navy helpers
   Header/footer/dark shell için
------------------------------------- */
.bb-bg-navy {
  background-color: var(--bb-brand-navy) !important;
}

.bb-bg-navy-soft {
  background-color: var(--bb-brand-navy-soft) !important;
}

/* -------------------------------------
   Ecosystem shell helpers
   Header ve footer token'larına bağlı
------------------------------------- */
.bb-bg-header {
  background-color: var(--bb-header-bg) !important;
}

.bb-bg-footer {
  background-color: var(--bb-footer-bg) !important;
}

/* -------------------------------------
   Background image helpers
------------------------------------- */
.bb-bgi-no-repeat {
  background-repeat: no-repeat;
}

.bb-bgi-repeat {
  background-repeat: repeat;
}

.bb-bgi-repeat-x {
  background-repeat: repeat-x;
}

.bb-bgi-repeat-y {
  background-repeat: repeat-y;
}

.bb-bgi-cover {
  background-size: cover;
}

.bb-bgi-contain {
  background-size: contain;
}

.bb-bgi-auto {
  background-size: auto;
}

.bb-bgi-full {
  background-size: 100% 100%;
}

.bb-bgi-center {
  background-position: center;
}

.bb-bgi-top {
  background-position: top;
}

.bb-bgi-bottom {
  background-position: bottom;
}

.bb-bgi-left {
  background-position: left;
}

.bb-bgi-right {
  background-position: right;
}

.bb-bgi-top-left {
  background-position: top left;
}

.bb-bgi-top-right {
  background-position: top right;
}

/* -------------------------------------
   Background attachment
------------------------------------- */
.bb-bgi-fixed {
  background-attachment: fixed;
}

.bb-bgi-scroll {
  background-attachment: scroll;
}

.bb-bgi-local {
  background-attachment: local;
}

/* =====================================
   Bulbulustur Theme – Border Helpers
   bb- prefix | token-driven | state aware
   ===================================== */
/* -------------------------------------
   Base visibility helpers
------------------------------------- */
.bb-border-active:not(.active):not(:active):not(:hover):not(:focus) {
  border-color: transparent !important;
}

.bb-border-hover:not(:hover):not(:focus):not(.active):not(:active) {
  cursor: pointer;
  border-color: transparent !important;
}

/* -------------------------------------
   Default border colors
------------------------------------- */
.bb-border-default {
  border-color: var(--bb-border-color) !important;
}

.bb-border-strong {
  border-color: var(--bb-border-color-strong) !important;
}

.bb-border-body {
  border-color: var(--bb-body-bg) !important;
}

.bb-border-transparent {
  border-color: transparent !important;
}

/* -------------------------------------
   Gray scale borders
------------------------------------- */
.bb-border-gray-100 {
  border-color: var(--bb-gray-100) !important;
}

.bb-border-hover-gray-100:hover {
  border-color: var(--bb-gray-100) !important;
}

.bb-border-gray-200 {
  border-color: var(--bb-gray-200) !important;
}

.bb-border-hover-gray-200:hover {
  border-color: var(--bb-gray-200) !important;
}

.bb-border-gray-300 {
  border-color: var(--bb-gray-300) !important;
}

.bb-border-hover-gray-300:hover {
  border-color: var(--bb-gray-300) !important;
}

.bb-border-gray-400 {
  border-color: var(--bb-gray-400) !important;
}

.bb-border-hover-gray-400:hover {
  border-color: var(--bb-gray-400) !important;
}

.bb-border-gray-500 {
  border-color: var(--bb-gray-500) !important;
}

.bb-border-hover-gray-500:hover {
  border-color: var(--bb-gray-500) !important;
}

.bb-border-gray-600 {
  border-color: var(--bb-gray-600) !important;
}

.bb-border-hover-gray-600:hover {
  border-color: var(--bb-gray-600) !important;
}

.bb-border-gray-700 {
  border-color: var(--bb-gray-700) !important;
}

.bb-border-hover-gray-700:hover {
  border-color: var(--bb-gray-700) !important;
}

.bb-border-gray-800 {
  border-color: var(--bb-gray-800) !important;
}

.bb-border-hover-gray-800:hover {
  border-color: var(--bb-gray-800) !important;
}

.bb-border-gray-900 {
  border-color: var(--bb-gray-900) !important;
}

.bb-border-hover-gray-900:hover {
  border-color: var(--bb-gray-900) !important;
}

/* -------------------------------------
   Semantic borders
------------------------------------- */
.bb-border-primary {
  border-color: var(--bb-primary) !important;
}

.bb-border-primary-clarity {
  border-color: var(--bb-primary-clarity) !important;
}

.bb-border-hover-primary:hover {
  border-color: var(--bb-primary) !important;
}

.bb-border-active-primary.active {
  border-color: var(--bb-primary) !important;
}

.bb-border-hover-primary-clarity:hover {
  border-color: var(--bb-primary-clarity) !important;
}

.bb-border-active-primary-clarity.active {
  border-color: var(--bb-primary-clarity) !important;
}

.bb-border-secondary {
  border-color: var(--bb-secondary) !important;
}

.bb-border-secondary-clarity {
  border-color: var(--bb-secondary-clarity) !important;
}

.bb-border-hover-secondary:hover {
  border-color: var(--bb-secondary) !important;
}

.bb-border-active-secondary.active {
  border-color: var(--bb-secondary) !important;
}

.bb-border-hover-secondary-clarity:hover {
  border-color: var(--bb-secondary-clarity) !important;
}

.bb-border-active-secondary-clarity.active {
  border-color: var(--bb-secondary-clarity) !important;
}

.bb-border-success {
  border-color: var(--bb-success) !important;
}

.bb-border-success-clarity {
  border-color: var(--bb-success-clarity) !important;
}

.bb-border-hover-success:hover {
  border-color: var(--bb-success) !important;
}

.bb-border-active-success.active {
  border-color: var(--bb-success) !important;
}

.bb-border-hover-success-clarity:hover {
  border-color: var(--bb-success-clarity) !important;
}

.bb-border-active-success-clarity.active {
  border-color: var(--bb-success-clarity) !important;
}

.bb-border-info {
  border-color: var(--bb-info) !important;
}

.bb-border-info-clarity {
  border-color: var(--bb-info-clarity) !important;
}

.bb-border-hover-info:hover {
  border-color: var(--bb-info) !important;
}

.bb-border-active-info.active {
  border-color: var(--bb-info) !important;
}

.bb-border-hover-info-clarity:hover {
  border-color: var(--bb-info-clarity) !important;
}

.bb-border-active-info-clarity.active {
  border-color: var(--bb-info-clarity) !important;
}

.bb-border-warning {
  border-color: var(--bb-warning) !important;
}

.bb-border-warning-clarity {
  border-color: var(--bb-warning-clarity) !important;
}

.bb-border-hover-warning:hover {
  border-color: var(--bb-warning) !important;
}

.bb-border-active-warning.active {
  border-color: var(--bb-warning) !important;
}

.bb-border-hover-warning-clarity:hover {
  border-color: var(--bb-warning-clarity) !important;
}

.bb-border-active-warning-clarity.active {
  border-color: var(--bb-warning-clarity) !important;
}

.bb-border-danger {
  border-color: var(--bb-danger) !important;
}

.bb-border-danger-clarity {
  border-color: var(--bb-danger-clarity) !important;
}

.bb-border-hover-danger:hover {
  border-color: var(--bb-danger) !important;
}

.bb-border-active-danger.active {
  border-color: var(--bb-danger) !important;
}

.bb-border-hover-danger-clarity:hover {
  border-color: var(--bb-danger-clarity) !important;
}

.bb-border-active-danger-clarity.active {
  border-color: var(--bb-danger-clarity) !important;
}

.bb-border-dark {
  border-color: var(--bb-dark) !important;
}

.bb-border-dark-clarity {
  border-color: var(--bb-dark-clarity) !important;
}

.bb-border-hover-dark:hover {
  border-color: var(--bb-dark) !important;
}

.bb-border-active-dark.active {
  border-color: var(--bb-dark) !important;
}

.bb-border-hover-dark-clarity:hover {
  border-color: var(--bb-dark-clarity) !important;
}

.bb-border-active-dark-clarity.active {
  border-color: var(--bb-dark-clarity) !important;
}

.bb-border-light {
  border-color: var(--bb-light) !important;
}

.bb-border-light-clarity {
  border-color: var(--bb-light-clarity) !important;
}

.bb-border-hover-light:hover {
  border-color: var(--bb-light) !important;
}

.bb-border-active-light.active {
  border-color: var(--bb-light) !important;
}

.bb-border-hover-light-clarity:hover {
  border-color: var(--bb-light-clarity) !important;
}

.bb-border-active-light-clarity.active {
  border-color: var(--bb-light-clarity) !important;
}

/* -------------------------------------
   Page accent borders
   Surface sistemine bağlı, data-bb-surface
   değişince otomatik güncellenir
------------------------------------- */
.bb-border-accent {
  border-color: var(--bb-page-accent) !important;
}

.bb-border-accent-clarity {
  border-color: var(--bb-page-accent-clarity) !important;
}

.bb-border-accent-muted {
  border-color: var(--bb-page-accent-muted) !important;
}

.bb-border-hover-accent:hover {
  border-color: var(--bb-page-accent) !important;
}

.bb-border-active-accent.active {
  border-color: var(--bb-page-accent) !important;
}

.bb-border-hover-accent-clarity:hover {
  border-color: var(--bb-page-accent-clarity) !important;
}

/* -------------------------------------
   Focus border
------------------------------------- */
.bb-border-focus:focus,
.bb-border-focus:focus-visible {
  border-color: var(--bb-focus-ring-color) !important;
  outline: none;
}

/* -------------------------------------
   Disabled border
------------------------------------- */
.bb-border-disabled,
[disabled] .bb-border-auto,
[aria-disabled=true] .bb-border-auto {
  border-color: var(--bb-border-color) !important;
  opacity: var(--bb-disabled-opacity);
}

/* -------------------------------------
   Border style helpers
------------------------------------- */
.bb-border-dashed {
  border-style: dashed !important;
  border-color: var(--bb-border-dashed-color) !important;
}

.bb-border-dotted {
  border-style: dotted !important;
}

/* Side styles */
.bb-border-top-dashed {
  border-top-style: dashed !important;
}

.bb-border-bottom-dashed {
  border-bottom-style: dashed !important;
}

.bb-border-start-dashed {
  border-left-style: dashed !important;
}

.bb-border-end-dashed {
  border-right-style: dashed !important;
}

.bb-border-top-dotted {
  border-top-style: dotted !important;
}

.bb-border-bottom-dotted {
  border-bottom-style: dotted !important;
}

.bb-border-start-dotted {
  border-left-style: dotted !important;
}

.bb-border-end-dotted {
  border-right-style: dotted !important;
}

/* -------------------------------------
   Border width utilities
------------------------------------- */
.bb-border-2 {
  border-width: 2px !important;
}

.bb-border-3 {
  border-width: 3px !important;
}

.bb-border-top-2 {
  border-top-width: 2px !important;
}

.bb-border-bottom-2 {
  border-bottom-width: 2px !important;
}

.bb-border-start-2 {
  border-left-width: 2px !important;
}

.bb-border-end-2 {
  border-right-width: 2px !important;
}

.bb-border-top-3 {
  border-top-width: 3px !important;
}

.bb-border-bottom-3 {
  border-bottom-width: 3px !important;
}

.bb-border-start-3 {
  border-left-width: 3px !important;
}

.bb-border-end-3 {
  border-right-width: 3px !important;
}

/* -------------------------------------
   Radius overrides
------------------------------------- */
.bb-rounded-none {
  border-radius: 0 !important;
}

.bb-rounded-xs {
  border-radius: var(--bb-radius-xs) !important;
}

.bb-rounded-sm {
  border-radius: var(--bb-radius-sm) !important;
}

.bb-rounded {
  border-radius: var(--bb-radius) !important;
}

.bb-rounded-lg {
  border-radius: var(--bb-radius-lg) !important;
}

.bb-rounded-xl {
  border-radius: var(--bb-radius-xl) !important;
}

.bb-rounded-2xl {
  border-radius: var(--bb-radius-2xl) !important;
}

.bb-rounded-pill {
  border-radius: var(--bb-radius-pill) !important;
}

.bb-rounded-circle {
  border-radius: 50% !important;
}

/* Side radius resets */
.bb-rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.bb-rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.bb-rounded-start-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.bb-rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* =====================================
   Bulbulustur Theme – Shadow Helpers
   bb- prefix | token-driven | dark/light safe
   ===================================== */
/* -------------------------------------
   Base shadows
------------------------------------- */
.bb-shadow-none {
  box-shadow: none !important;
}

.bb-shadow-xs {
  box-shadow: var(--bb-shadow-xs) !important;
}

.bb-shadow-sm {
  box-shadow: var(--bb-shadow-sm) !important;
}

.bb-shadow {
  box-shadow: var(--bb-shadow) !important;
}

.bb-shadow-lg {
  box-shadow: var(--bb-shadow-lg) !important;
}

.bb-shadow-inset {
  box-shadow: var(--bb-shadow-inset) !important;
}

/* -------------------------------------
   Hover shadows
   Transition ile yumuşak geçiş
------------------------------------- */
.bb-shadow-hover-none {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-none:hover {
  box-shadow: none !important;
}

.bb-shadow-hover-xs {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-xs:hover {
  box-shadow: var(--bb-shadow-xs) !important;
}

.bb-shadow-hover-sm {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-sm:hover {
  box-shadow: var(--bb-shadow-sm) !important;
}

.bb-shadow-hover {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover:hover {
  box-shadow: var(--bb-shadow) !important;
}

.bb-shadow-hover-lg {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-lg:hover {
  box-shadow: var(--bb-shadow-lg) !important;
}

/* -------------------------------------
   Lift — shadow + transform birlikte
   Kart hover'ları için en sık kullanım
------------------------------------- */
.bb-shadow-lift {
  transition: box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}
.bb-shadow-lift:hover {
  box-shadow: var(--bb-shadow) !important;
  transform: translateY(-2px);
}

.bb-shadow-lift-sm {
  transition: box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}
.bb-shadow-lift-sm:hover {
  box-shadow: var(--bb-shadow-sm) !important;
  transform: translateY(-1px);
}

.bb-shadow-lift-lg {
  transition: box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}
.bb-shadow-lift-lg:hover {
  box-shadow: var(--bb-shadow-lg) !important;
  transform: translateY(-3px);
}

/* -------------------------------------
   Active shadows
------------------------------------- */
.bb-shadow-active-none.active {
  box-shadow: none !important;
}

.bb-shadow-active-xs.active {
  box-shadow: var(--bb-shadow-xs) !important;
}

.bb-shadow-active-sm.active {
  box-shadow: var(--bb-shadow-sm) !important;
}

.bb-shadow-active.active {
  box-shadow: var(--bb-shadow) !important;
}

.bb-shadow-active-lg.active {
  box-shadow: var(--bb-shadow-lg) !important;
}

/* -------------------------------------
   Focus ring shadows
   Border yerine box-shadow ile focus
------------------------------------- */
.bb-shadow-focus:focus,
.bb-shadow-focus:focus-visible {
  box-shadow: 0 0 0 var(--bb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity)) !important;
  outline: none;
}

.bb-shadow-focus-sm:focus,
.bb-shadow-focus-sm:focus-visible {
  box-shadow: 0 0 0 0.15rem rgba(var(--bb-primary-rgb), var(--bb-focus-ring-opacity)) !important;
  outline: none;
}

/* -------------------------------------
   Semantic colored shadows
   Alert, badge, button vurgusu için
------------------------------------- */
.bb-shadow-primary {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-primary-rgb), 0.28) !important;
}

.bb-shadow-hover-primary {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-primary:hover {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-primary-rgb), 0.28) !important;
}

.bb-shadow-success {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-success-rgb), 0.28) !important;
}

.bb-shadow-hover-success {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-success:hover {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-success-rgb), 0.28) !important;
}

.bb-shadow-info {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-info-rgb), 0.28) !important;
}

.bb-shadow-hover-info {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-info:hover {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-info-rgb), 0.28) !important;
}

.bb-shadow-warning {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-warning-rgb), 0.28) !important;
}

.bb-shadow-hover-warning {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-warning:hover {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-warning-rgb), 0.28) !important;
}

.bb-shadow-danger {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-danger-rgb), 0.28) !important;
}

.bb-shadow-hover-danger {
  transition: box-shadow var(--bb-transition-normal);
}
.bb-shadow-hover-danger:hover {
  box-shadow: 0 0.25rem 1rem rgba(var(--bb-danger-rgb), 0.28) !important;
}

/* -------------------------------------
   Reduced motion
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-shadow-hover-none,
  .bb-shadow-hover-xs,
  .bb-shadow-hover-sm,
  .bb-shadow-hover,
  .bb-shadow-hover-lg,
  .bb-shadow-lift,
  .bb-shadow-lift-sm,
  .bb-shadow-lift-lg {
    transition: none;
  }
  .bb-shadow-hover-none:hover,
  .bb-shadow-hover-xs:hover,
  .bb-shadow-hover-sm:hover,
  .bb-shadow-hover:hover,
  .bb-shadow-hover-lg:hover,
  .bb-shadow-lift:hover,
  .bb-shadow-lift-sm:hover,
  .bb-shadow-lift-lg:hover {
    transform: none;
  }
  .bb-shadow-hover-primary {
    transition: none;
  }
  .bb-shadow-hover-success {
    transition: none;
  }
  .bb-shadow-hover-info {
    transition: none;
  }
  .bb-shadow-hover-warning {
    transition: none;
  }
  .bb-shadow-hover-danger {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme – Opacity Helpers
   bb- prefix | state aware | minimal
   ===================================== */
/* -------------------------------------
   Base opacity
------------------------------------- */
.bb-opacity-0 {
  opacity: 0 !important;
}

.bb-opacity-5 {
  opacity: 0.05 !important;
}

.bb-opacity-10 {
  opacity: 0.1 !important;
}

.bb-opacity-15 {
  opacity: 0.15 !important;
}

.bb-opacity-20 {
  opacity: 0.2 !important;
}

.bb-opacity-25 {
  opacity: 0.25 !important;
}

.bb-opacity-30 {
  opacity: 0.3 !important;
}

.bb-opacity-40 {
  opacity: 0.4 !important;
}

.bb-opacity-50 {
  opacity: 0.5 !important;
}

.bb-opacity-60 {
  opacity: 0.6 !important;
}

.bb-opacity-70 {
  opacity: 0.7 !important;
}

.bb-opacity-75 {
  opacity: 0.75 !important;
}

.bb-opacity-80 {
  opacity: 0.8 !important;
}

.bb-opacity-90 {
  opacity: 0.9 !important;
}

.bb-opacity-100 {
  opacity: 1 !important;
}

/* -------------------------------------
   Hover opacity
   Transition ile yumuşak geçiş
------------------------------------- */
.bb-opacity-hover-0 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-0:hover {
  opacity: 0 !important;
}

.bb-opacity-hover-5 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-5:hover {
  opacity: 0.05 !important;
}

.bb-opacity-hover-10 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-10:hover {
  opacity: 0.1 !important;
}

.bb-opacity-hover-15 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-15:hover {
  opacity: 0.15 !important;
}

.bb-opacity-hover-20 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-20:hover {
  opacity: 0.2 !important;
}

.bb-opacity-hover-25 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-25:hover {
  opacity: 0.25 !important;
}

.bb-opacity-hover-30 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-30:hover {
  opacity: 0.3 !important;
}

.bb-opacity-hover-40 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-40:hover {
  opacity: 0.4 !important;
}

.bb-opacity-hover-50 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-50:hover {
  opacity: 0.5 !important;
}

.bb-opacity-hover-60 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-60:hover {
  opacity: 0.6 !important;
}

.bb-opacity-hover-70 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-70:hover {
  opacity: 0.7 !important;
}

.bb-opacity-hover-75 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-75:hover {
  opacity: 0.75 !important;
}

.bb-opacity-hover-80 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-80:hover {
  opacity: 0.8 !important;
}

.bb-opacity-hover-90 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-90:hover {
  opacity: 0.9 !important;
}

.bb-opacity-hover-100 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-hover-100:hover {
  opacity: 1 !important;
}

/* -------------------------------------
   Active opacity
------------------------------------- */
.bb-opacity-active-0.active {
  opacity: 0 !important;
}

.bb-opacity-active-5.active {
  opacity: 0.05 !important;
}

.bb-opacity-active-10.active {
  opacity: 0.1 !important;
}

.bb-opacity-active-15.active {
  opacity: 0.15 !important;
}

.bb-opacity-active-20.active {
  opacity: 0.2 !important;
}

.bb-opacity-active-25.active {
  opacity: 0.25 !important;
}

.bb-opacity-active-30.active {
  opacity: 0.3 !important;
}

.bb-opacity-active-40.active {
  opacity: 0.4 !important;
}

.bb-opacity-active-50.active {
  opacity: 0.5 !important;
}

.bb-opacity-active-60.active {
  opacity: 0.6 !important;
}

.bb-opacity-active-70.active {
  opacity: 0.7 !important;
}

.bb-opacity-active-75.active {
  opacity: 0.75 !important;
}

.bb-opacity-active-80.active {
  opacity: 0.8 !important;
}

.bb-opacity-active-90.active {
  opacity: 0.9 !important;
}

.bb-opacity-active-100.active {
  opacity: 1 !important;
}

/* -------------------------------------
   State (hover + active)
------------------------------------- */
.bb-opacity-state-0 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-0:hover, .bb-opacity-state-0.active {
  opacity: 0 !important;
}

.bb-opacity-state-5 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-5:hover, .bb-opacity-state-5.active {
  opacity: 0.05 !important;
}

.bb-opacity-state-10 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-10:hover, .bb-opacity-state-10.active {
  opacity: 0.1 !important;
}

.bb-opacity-state-15 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-15:hover, .bb-opacity-state-15.active {
  opacity: 0.15 !important;
}

.bb-opacity-state-20 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-20:hover, .bb-opacity-state-20.active {
  opacity: 0.2 !important;
}

.bb-opacity-state-25 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-25:hover, .bb-opacity-state-25.active {
  opacity: 0.25 !important;
}

.bb-opacity-state-30 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-30:hover, .bb-opacity-state-30.active {
  opacity: 0.3 !important;
}

.bb-opacity-state-40 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-40:hover, .bb-opacity-state-40.active {
  opacity: 0.4 !important;
}

.bb-opacity-state-50 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-50:hover, .bb-opacity-state-50.active {
  opacity: 0.5 !important;
}

.bb-opacity-state-60 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-60:hover, .bb-opacity-state-60.active {
  opacity: 0.6 !important;
}

.bb-opacity-state-70 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-70:hover, .bb-opacity-state-70.active {
  opacity: 0.7 !important;
}

.bb-opacity-state-75 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-75:hover, .bb-opacity-state-75.active {
  opacity: 0.75 !important;
}

.bb-opacity-state-80 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-80:hover, .bb-opacity-state-80.active {
  opacity: 0.8 !important;
}

.bb-opacity-state-90 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-90:hover, .bb-opacity-state-90.active {
  opacity: 0.9 !important;
}

.bb-opacity-state-100 {
  transition: opacity var(--bb-transition-fast);
}
.bb-opacity-state-100:hover, .bb-opacity-state-100.active {
  opacity: 1 !important;
}

/* -------------------------------------
   Disabled state
------------------------------------- */
.bb-opacity-disabled.bb-opacity-auto,
[disabled].bb-opacity-auto,
[aria-disabled=true].bb-opacity-auto {
  opacity: var(--bb-disabled-opacity) !important;
  pointer-events: none;
}

/* -------------------------------------
   Reduced motion
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-opacity-hover-0,
  .bb-opacity-state-0 {
    transition: none;
  }
  .bb-opacity-hover-5,
  .bb-opacity-state-5 {
    transition: none;
  }
  .bb-opacity-hover-10,
  .bb-opacity-state-10 {
    transition: none;
  }
  .bb-opacity-hover-15,
  .bb-opacity-state-15 {
    transition: none;
  }
  .bb-opacity-hover-20,
  .bb-opacity-state-20 {
    transition: none;
  }
  .bb-opacity-hover-25,
  .bb-opacity-state-25 {
    transition: none;
  }
  .bb-opacity-hover-30,
  .bb-opacity-state-30 {
    transition: none;
  }
  .bb-opacity-hover-40,
  .bb-opacity-state-40 {
    transition: none;
  }
  .bb-opacity-hover-50,
  .bb-opacity-state-50 {
    transition: none;
  }
  .bb-opacity-hover-60,
  .bb-opacity-state-60 {
    transition: none;
  }
  .bb-opacity-hover-70,
  .bb-opacity-state-70 {
    transition: none;
  }
  .bb-opacity-hover-75,
  .bb-opacity-state-75 {
    transition: none;
  }
  .bb-opacity-hover-80,
  .bb-opacity-state-80 {
    transition: none;
  }
  .bb-opacity-hover-90,
  .bb-opacity-state-90 {
    transition: none;
  }
  .bb-opacity-hover-100,
  .bb-opacity-state-100 {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Text Utilities
   bb- prefix | token-driven | state aware | PURE

   Scope:
   - Text color
   - Text decoration
   - Text wrapping / truncation / clamp
   - Text alignment / transform
   - Text selection / interaction states
   - Font-weight aliases only

   Important:
   - Font-size is managed by _typography.scss via .bb-fs-* utilities.
   - Icon size is managed by _icons.scss via .bb-icon-* utilities.
   - Do not define hardcoded font-size values here.
===================================== */
/* -------------------------------------
   Local utility tokens
------------------------------------- */
:root {
  --bb-text-transition:
    color var(--bb-motion-fast) var(--bb-ease-in-out);
  --bb-text-truncate-max-width: 100%;
}

/* -------------------------------------
   Local SCSS selectors
------------------------------------- */
/* -------------------------------------
   Text color basics
------------------------------------- */
.bb-text {
  color: var(--bb-body-color) !important;
}

.bb-text-muted {
  color: var(--bb-secondary-color) !important;
}

.bb-text-subtle {
  color: var(--bb-tertiary-color) !important;
}

.bb-text-heading {
  color: var(--bb-heading-color) !important;
}

.bb-text-emphasis {
  color: var(--bb-emphasis-color) !important;
}

.bb-text-transparent {
  color: transparent !important;
}

.bb-text-white {
  color: var(--bb-white) !important;
}

.bb-text-black {
  color: var(--bb-black) !important;
}

/* -------------------------------------
   Page accent text
------------------------------------- */
.bb-text-accent {
  color: var(--bb-page-accent) !important;
}

.bb-text-accent-strong {
  color: var(--bb-page-accent-strong) !important;
}

.bb-text-hover-accent {
  transition: var(--bb-text-transition);
}
.bb-text-hover-accent:hover {
  color: var(--bb-page-accent) !important;
}
.bb-text-hover-accent:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-page-accent) !important;
}

.bb-text-active-accent {
  transition: var(--bb-text-transition);
}
.bb-text-active-accent.active, .bb-text-active-accent.is-active, .bb-text-active-accent[aria-current=page], .bb-text-active-accent[aria-current=true] {
  color: var(--bb-page-accent) !important;
}
.bb-text-active-accent.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-accent.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-accent[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-accent[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-page-accent) !important;
}

/* -------------------------------------
   Semantic text colors
------------------------------------- */
.bb-text-primary {
  color: var(--bb-primary) !important;
}

.bb-text-inverse-primary {
  color: var(--bb-primary-inverse) !important;
}

.bb-text-light-primary {
  color: var(--bb-primary-light) !important;
}

.bb-text-hover-primary {
  transition: var(--bb-text-transition);
}
.bb-text-hover-primary:hover {
  color: var(--bb-primary) !important;
}
.bb-text-hover-primary:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-primary) !important;
}

.bb-text-active-primary {
  transition: var(--bb-text-transition);
}
.bb-text-active-primary.active, .bb-text-active-primary.is-active, .bb-text-active-primary[aria-current=page], .bb-text-active-primary[aria-current=true] {
  color: var(--bb-primary) !important;
}
.bb-text-active-primary.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-primary.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-primary[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-primary[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-primary) !important;
}

.bb-text-state-primary {
  transition: var(--bb-text-transition);
}
.bb-text-state-primary:hover, .bb-text-state-primary.active, .bb-text-state-primary.is-active, .bb-text-state-primary[aria-current=page], .bb-text-state-primary[aria-current=true] {
  color: var(--bb-primary) !important;
}
.bb-text-state-primary:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-primary.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-primary.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-primary[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-primary[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-primary) !important;
}

.bb-text-secondary {
  color: var(--bb-secondary) !important;
}

.bb-text-inverse-secondary {
  color: var(--bb-secondary-inverse) !important;
}

.bb-text-light-secondary {
  color: var(--bb-secondary-light) !important;
}

.bb-text-hover-secondary {
  transition: var(--bb-text-transition);
}
.bb-text-hover-secondary:hover {
  color: var(--bb-secondary) !important;
}
.bb-text-hover-secondary:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-secondary) !important;
}

.bb-text-active-secondary {
  transition: var(--bb-text-transition);
}
.bb-text-active-secondary.active, .bb-text-active-secondary.is-active, .bb-text-active-secondary[aria-current=page], .bb-text-active-secondary[aria-current=true] {
  color: var(--bb-secondary) !important;
}
.bb-text-active-secondary.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-secondary.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-secondary[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-secondary[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-secondary) !important;
}

.bb-text-state-secondary {
  transition: var(--bb-text-transition);
}
.bb-text-state-secondary:hover, .bb-text-state-secondary.active, .bb-text-state-secondary.is-active, .bb-text-state-secondary[aria-current=page], .bb-text-state-secondary[aria-current=true] {
  color: var(--bb-secondary) !important;
}
.bb-text-state-secondary:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-secondary.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-secondary.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-secondary[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-secondary[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-secondary) !important;
}

.bb-text-success {
  color: var(--bb-success) !important;
}

.bb-text-inverse-success {
  color: var(--bb-success-inverse) !important;
}

.bb-text-light-success {
  color: var(--bb-success-light) !important;
}

.bb-text-hover-success {
  transition: var(--bb-text-transition);
}
.bb-text-hover-success:hover {
  color: var(--bb-success) !important;
}
.bb-text-hover-success:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-success) !important;
}

.bb-text-active-success {
  transition: var(--bb-text-transition);
}
.bb-text-active-success.active, .bb-text-active-success.is-active, .bb-text-active-success[aria-current=page], .bb-text-active-success[aria-current=true] {
  color: var(--bb-success) !important;
}
.bb-text-active-success.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-success.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-success[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-success[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-success) !important;
}

.bb-text-state-success {
  transition: var(--bb-text-transition);
}
.bb-text-state-success:hover, .bb-text-state-success.active, .bb-text-state-success.is-active, .bb-text-state-success[aria-current=page], .bb-text-state-success[aria-current=true] {
  color: var(--bb-success) !important;
}
.bb-text-state-success:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-success.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-success.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-success[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-success[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-success) !important;
}

.bb-text-info {
  color: var(--bb-info) !important;
}

.bb-text-inverse-info {
  color: var(--bb-info-inverse) !important;
}

.bb-text-light-info {
  color: var(--bb-info-light) !important;
}

.bb-text-hover-info {
  transition: var(--bb-text-transition);
}
.bb-text-hover-info:hover {
  color: var(--bb-info) !important;
}
.bb-text-hover-info:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-info) !important;
}

.bb-text-active-info {
  transition: var(--bb-text-transition);
}
.bb-text-active-info.active, .bb-text-active-info.is-active, .bb-text-active-info[aria-current=page], .bb-text-active-info[aria-current=true] {
  color: var(--bb-info) !important;
}
.bb-text-active-info.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-info.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-info[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-info[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-info) !important;
}

.bb-text-state-info {
  transition: var(--bb-text-transition);
}
.bb-text-state-info:hover, .bb-text-state-info.active, .bb-text-state-info.is-active, .bb-text-state-info[aria-current=page], .bb-text-state-info[aria-current=true] {
  color: var(--bb-info) !important;
}
.bb-text-state-info:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-info.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-info.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-info[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-info[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-info) !important;
}

.bb-text-warning {
  color: var(--bb-warning) !important;
}

.bb-text-inverse-warning {
  color: var(--bb-warning-inverse) !important;
}

.bb-text-light-warning {
  color: var(--bb-warning-light) !important;
}

.bb-text-hover-warning {
  transition: var(--bb-text-transition);
}
.bb-text-hover-warning:hover {
  color: var(--bb-warning) !important;
}
.bb-text-hover-warning:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-warning) !important;
}

.bb-text-active-warning {
  transition: var(--bb-text-transition);
}
.bb-text-active-warning.active, .bb-text-active-warning.is-active, .bb-text-active-warning[aria-current=page], .bb-text-active-warning[aria-current=true] {
  color: var(--bb-warning) !important;
}
.bb-text-active-warning.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-warning.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-warning[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-warning[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-warning) !important;
}

.bb-text-state-warning {
  transition: var(--bb-text-transition);
}
.bb-text-state-warning:hover, .bb-text-state-warning.active, .bb-text-state-warning.is-active, .bb-text-state-warning[aria-current=page], .bb-text-state-warning[aria-current=true] {
  color: var(--bb-warning) !important;
}
.bb-text-state-warning:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-warning.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-warning.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-warning[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-warning[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-warning) !important;
}

.bb-text-danger {
  color: var(--bb-danger) !important;
}

.bb-text-inverse-danger {
  color: var(--bb-danger-inverse) !important;
}

.bb-text-light-danger {
  color: var(--bb-danger-light) !important;
}

.bb-text-hover-danger {
  transition: var(--bb-text-transition);
}
.bb-text-hover-danger:hover {
  color: var(--bb-danger) !important;
}
.bb-text-hover-danger:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-danger) !important;
}

.bb-text-active-danger {
  transition: var(--bb-text-transition);
}
.bb-text-active-danger.active, .bb-text-active-danger.is-active, .bb-text-active-danger[aria-current=page], .bb-text-active-danger[aria-current=true] {
  color: var(--bb-danger) !important;
}
.bb-text-active-danger.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-danger.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-danger[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-danger[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-danger) !important;
}

.bb-text-state-danger {
  transition: var(--bb-text-transition);
}
.bb-text-state-danger:hover, .bb-text-state-danger.active, .bb-text-state-danger.is-active, .bb-text-state-danger[aria-current=page], .bb-text-state-danger[aria-current=true] {
  color: var(--bb-danger) !important;
}
.bb-text-state-danger:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-danger.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-danger.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-danger[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-danger[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-danger) !important;
}

.bb-text-light {
  color: var(--bb-light) !important;
}

.bb-text-inverse-light {
  color: var(--bb-light-inverse) !important;
}

.bb-text-light-light {
  color: var(--bb-light-light) !important;
}

.bb-text-hover-light {
  transition: var(--bb-text-transition);
}
.bb-text-hover-light:hover {
  color: var(--bb-light) !important;
}
.bb-text-hover-light:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-light) !important;
}

.bb-text-active-light {
  transition: var(--bb-text-transition);
}
.bb-text-active-light.active, .bb-text-active-light.is-active, .bb-text-active-light[aria-current=page], .bb-text-active-light[aria-current=true] {
  color: var(--bb-light) !important;
}
.bb-text-active-light.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-light.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-light[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-light[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-light) !important;
}

.bb-text-state-light {
  transition: var(--bb-text-transition);
}
.bb-text-state-light:hover, .bb-text-state-light.active, .bb-text-state-light.is-active, .bb-text-state-light[aria-current=page], .bb-text-state-light[aria-current=true] {
  color: var(--bb-light) !important;
}
.bb-text-state-light:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-light.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-light.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-light[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-light[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-light) !important;
}

.bb-text-dark {
  color: var(--bb-dark) !important;
}

.bb-text-inverse-dark {
  color: var(--bb-dark-inverse) !important;
}

.bb-text-light-dark {
  color: var(--bb-dark-light) !important;
}

.bb-text-hover-dark {
  transition: var(--bb-text-transition);
}
.bb-text-hover-dark:hover {
  color: var(--bb-dark) !important;
}
.bb-text-hover-dark:hover :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-dark) !important;
}

.bb-text-active-dark {
  transition: var(--bb-text-transition);
}
.bb-text-active-dark.active, .bb-text-active-dark.is-active, .bb-text-active-dark[aria-current=page], .bb-text-active-dark[aria-current=true] {
  color: var(--bb-dark) !important;
}
.bb-text-active-dark.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-dark.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-dark[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-active-dark[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-dark) !important;
}

.bb-text-state-dark {
  transition: var(--bb-text-transition);
}
.bb-text-state-dark:hover, .bb-text-state-dark.active, .bb-text-state-dark.is-active, .bb-text-state-dark[aria-current=page], .bb-text-state-dark[aria-current=true] {
  color: var(--bb-dark) !important;
}
.bb-text-state-dark:hover :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-dark.active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-dark.is-active :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-dark[aria-current=page] :is(i, .svg-icon, .material-symbols-outlined), .bb-text-state-dark[aria-current=true] :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-dark) !important;
}

/* -------------------------------------
   Gray scale text colors
------------------------------------- */
.bb-text-gray-100 {
  color: var(--bb-gray-100) !important;
}

.bb-text-gray-200 {
  color: var(--bb-gray-200) !important;
}

.bb-text-gray-300 {
  color: var(--bb-gray-300) !important;
}

.bb-text-gray-400 {
  color: var(--bb-gray-400) !important;
}

.bb-text-gray-500 {
  color: var(--bb-gray-500) !important;
}

.bb-text-gray-600 {
  color: var(--bb-gray-600) !important;
}

.bb-text-gray-700 {
  color: var(--bb-gray-700) !important;
}

.bb-text-gray-800 {
  color: var(--bb-gray-800) !important;
}

.bb-text-gray-900 {
  color: var(--bb-gray-900) !important;
}

/* -------------------------------------
   Text decoration
------------------------------------- */
.bb-text-underline {
  text-decoration: underline !important;
}

.bb-text-line-through {
  text-decoration: line-through !important;
}

.bb-text-overline {
  text-decoration: overline !important;
}

.bb-text-none {
  text-decoration: none !important;
}

.bb-text-hover-underline:hover {
  text-decoration: underline !important;
}

.bb-text-hover-none:hover {
  text-decoration: none !important;
}

.bb-text-hover-line-through:hover {
  text-decoration: line-through !important;
}

/* -------------------------------------
   Text alignment
------------------------------------- */
.bb-text-start {
  text-align: left !important;
}

.bb-text-center {
  text-align: center !important;
}

.bb-text-end {
  text-align: right !important;
}

.bb-text-justify {
  text-align: justify !important;
}

/* -------------------------------------
   Text transform
------------------------------------- */
.bb-text-lowercase {
  text-transform: lowercase !important;
}

.bb-text-uppercase {
  text-transform: uppercase !important;
}

.bb-text-capitalize {
  text-transform: capitalize !important;
}

.bb-text-transform-none {
  text-transform: none !important;
}

/* -------------------------------------
   Font weight aliases
   Typography owns the token values.
------------------------------------- */
.bb-text-regular {
  font-weight: var(--bb-fw-normal) !important;
}

.bb-text-medium {
  font-weight: var(--bb-fw-medium) !important;
}

.bb-text-semibold {
  font-weight: var(--bb-fw-semibold) !important;
}

.bb-text-bold {
  font-weight: var(--bb-fw-bold) !important;
}

.bb-text-title {
  font-weight: var(--bb-fw-title) !important;
}

.bb-text-title-strong {
  font-weight: var(--bb-fw-title-strong) !important;
}

/* -------------------------------------
   Wrapping helpers
------------------------------------- */
.bb-text-wrap {
  white-space: normal !important;
}

.bb-text-nowrap {
  white-space: nowrap !important;
}

.bb-text-pre {
  white-space: pre !important;
}

.bb-text-pre-wrap {
  white-space: pre-wrap !important;
}

.bb-text-break {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* -------------------------------------
   Single-line truncation
------------------------------------- */
.bb-text-truncate {
  max-width: var(--bb-text-truncate-max-width);
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* -------------------------------------
   Multi-line clamp
------------------------------------- */
.bb-text-clamp-1,
.bb-text-clamp-2,
.bb-text-clamp-3,
.bb-text-clamp-4,
.bb-text-clamp-5 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.bb-text-clamp-1 {
  -webkit-line-clamp: 1;
}

.bb-text-clamp-2 {
  -webkit-line-clamp: 2;
}

.bb-text-clamp-3 {
  -webkit-line-clamp: 3;
}

.bb-text-clamp-4 {
  -webkit-line-clamp: 4;
}

.bb-text-clamp-5 {
  -webkit-line-clamp: 5;
}

/* -------------------------------------
   Letter spacing helpers
   Typography owns heading/display letter-spacing.
   These are utility overrides only.
------------------------------------- */
.bb-ls-tight {
  letter-spacing: var(--bb-heading-letter-spacing) !important;
}

.bb-ls-display {
  letter-spacing: var(--bb-display-letter-spacing) !important;
}

.bb-ls-normal {
  letter-spacing: 0 !important;
}

.bb-ls-wide {
  letter-spacing: 0.05em !important;
}

.bb-ls-wider {
  letter-spacing: 0.1em !important;
}

/* -------------------------------------
   Line-height aliases
   Typography owns line-height tokens.
------------------------------------- */
.bb-lh-1 {
  line-height: 1 !important;
}

.bb-lh-tight {
  line-height: var(--bb-line-height-tight) !important;
}

.bb-lh-heading {
  line-height: var(--bb-line-height-heading) !important;
}

.bb-lh-base {
  line-height: var(--bb-line-height-base) !important;
}

.bb-lh-content {
  line-height: var(--bb-line-height-content) !important;
}

.bb-lh-loose {
  line-height: var(--bb-line-height-loose) !important;
}

/* -------------------------------------
   Text selection
------------------------------------- */
.bb-user-select-none {
  user-select: none !important;
}

.bb-user-select-text {
  user-select: text !important;
}

.bb-user-select-all {
  user-select: all !important;
}

.bb-user-select-auto {
  user-select: auto !important;
}

/* -------------------------------------
   Parent hover / active helpers
------------------------------------- */
.bb-parent-hover:hover .bb-parent-hover-primary {
  transition: var(--bb-text-transition);
  color: var(--bb-primary) !important;
}
.bb-parent-hover:hover .bb-parent-hover-primary :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-primary) !important;
}
.bb-parent-hover:hover .bb-parent-hover-secondary {
  transition: var(--bb-text-transition);
  color: var(--bb-secondary) !important;
}
.bb-parent-hover:hover .bb-parent-hover-secondary :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-secondary) !important;
}
.bb-parent-hover:hover .bb-parent-hover-success {
  transition: var(--bb-text-transition);
  color: var(--bb-success) !important;
}
.bb-parent-hover:hover .bb-parent-hover-success :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-success) !important;
}
.bb-parent-hover:hover .bb-parent-hover-info {
  transition: var(--bb-text-transition);
  color: var(--bb-info) !important;
}
.bb-parent-hover:hover .bb-parent-hover-info :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-info) !important;
}
.bb-parent-hover:hover .bb-parent-hover-warning {
  transition: var(--bb-text-transition);
  color: var(--bb-warning) !important;
}
.bb-parent-hover:hover .bb-parent-hover-warning :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-warning) !important;
}
.bb-parent-hover:hover .bb-parent-hover-danger {
  transition: var(--bb-text-transition);
  color: var(--bb-danger) !important;
}
.bb-parent-hover:hover .bb-parent-hover-danger :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-danger) !important;
}
.bb-parent-hover:hover .bb-parent-hover-light {
  transition: var(--bb-text-transition);
  color: var(--bb-light) !important;
}
.bb-parent-hover:hover .bb-parent-hover-light :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-light) !important;
}
.bb-parent-hover:hover .bb-parent-hover-dark {
  transition: var(--bb-text-transition);
  color: var(--bb-dark) !important;
}
.bb-parent-hover:hover .bb-parent-hover-dark :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-dark) !important;
}

.bb-parent-active.active .bb-parent-active-primary, .bb-parent-active.is-active .bb-parent-active-primary, .bb-parent-active[aria-current=page] .bb-parent-active-primary, .bb-parent-active[aria-current=true] .bb-parent-active-primary {
  transition: var(--bb-text-transition);
  color: var(--bb-primary) !important;
}
.bb-parent-active.active .bb-parent-active-primary :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-primary :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-primary :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-primary :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-primary) !important;
}
.bb-parent-active.active .bb-parent-active-secondary, .bb-parent-active.is-active .bb-parent-active-secondary, .bb-parent-active[aria-current=page] .bb-parent-active-secondary, .bb-parent-active[aria-current=true] .bb-parent-active-secondary {
  transition: var(--bb-text-transition);
  color: var(--bb-secondary) !important;
}
.bb-parent-active.active .bb-parent-active-secondary :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-secondary :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-secondary :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-secondary :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-secondary) !important;
}
.bb-parent-active.active .bb-parent-active-success, .bb-parent-active.is-active .bb-parent-active-success, .bb-parent-active[aria-current=page] .bb-parent-active-success, .bb-parent-active[aria-current=true] .bb-parent-active-success {
  transition: var(--bb-text-transition);
  color: var(--bb-success) !important;
}
.bb-parent-active.active .bb-parent-active-success :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-success :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-success :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-success :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-success) !important;
}
.bb-parent-active.active .bb-parent-active-info, .bb-parent-active.is-active .bb-parent-active-info, .bb-parent-active[aria-current=page] .bb-parent-active-info, .bb-parent-active[aria-current=true] .bb-parent-active-info {
  transition: var(--bb-text-transition);
  color: var(--bb-info) !important;
}
.bb-parent-active.active .bb-parent-active-info :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-info :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-info :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-info :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-info) !important;
}
.bb-parent-active.active .bb-parent-active-warning, .bb-parent-active.is-active .bb-parent-active-warning, .bb-parent-active[aria-current=page] .bb-parent-active-warning, .bb-parent-active[aria-current=true] .bb-parent-active-warning {
  transition: var(--bb-text-transition);
  color: var(--bb-warning) !important;
}
.bb-parent-active.active .bb-parent-active-warning :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-warning :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-warning :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-warning :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-warning) !important;
}
.bb-parent-active.active .bb-parent-active-danger, .bb-parent-active.is-active .bb-parent-active-danger, .bb-parent-active[aria-current=page] .bb-parent-active-danger, .bb-parent-active[aria-current=true] .bb-parent-active-danger {
  transition: var(--bb-text-transition);
  color: var(--bb-danger) !important;
}
.bb-parent-active.active .bb-parent-active-danger :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-danger :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-danger :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-danger :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-danger) !important;
}
.bb-parent-active.active .bb-parent-active-light, .bb-parent-active.is-active .bb-parent-active-light, .bb-parent-active[aria-current=page] .bb-parent-active-light, .bb-parent-active[aria-current=true] .bb-parent-active-light {
  transition: var(--bb-text-transition);
  color: var(--bb-light) !important;
}
.bb-parent-active.active .bb-parent-active-light :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-light :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-light :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-light :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-light) !important;
}
.bb-parent-active.active .bb-parent-active-dark, .bb-parent-active.is-active .bb-parent-active-dark, .bb-parent-active[aria-current=page] .bb-parent-active-dark, .bb-parent-active[aria-current=true] .bb-parent-active-dark {
  transition: var(--bb-text-transition);
  color: var(--bb-dark) !important;
}
.bb-parent-active.active .bb-parent-active-dark :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active.is-active .bb-parent-active-dark :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=page] .bb-parent-active-dark :is(i, .svg-icon, .material-symbols-outlined), .bb-parent-active[aria-current=true] .bb-parent-active-dark :is(i, .svg-icon, .material-symbols-outlined) {
  color: var(--bb-dark) !important;
}

/* -------------------------------------
   Disabled text
------------------------------------- */
.bb-text-disabled,
[disabled] .bb-text-auto,
[aria-disabled=true] .bb-text-auto {
  color: var(--bb-secondary-color) !important;
  opacity: var(--bb-disabled-opacity);
  pointer-events: none;
}

/* -------------------------------------
   Reduced motion
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-text-hover-accent,
  .bb-text-active-accent {
    transition: none;
  }
  .bb-text-hover-primary,
  .bb-text-active-primary,
  .bb-text-state-primary,
  .bb-parent-hover:hover .bb-parent-hover-primary,
  .bb-parent-active.active .bb-parent-active-primary,
  .bb-parent-active.is-active .bb-parent-active-primary,
  .bb-parent-active[aria-current=page] .bb-parent-active-primary,
  .bb-parent-active[aria-current=true] .bb-parent-active-primary {
    transition: none;
  }
  .bb-text-hover-secondary,
  .bb-text-active-secondary,
  .bb-text-state-secondary,
  .bb-parent-hover:hover .bb-parent-hover-secondary,
  .bb-parent-active.active .bb-parent-active-secondary,
  .bb-parent-active.is-active .bb-parent-active-secondary,
  .bb-parent-active[aria-current=page] .bb-parent-active-secondary,
  .bb-parent-active[aria-current=true] .bb-parent-active-secondary {
    transition: none;
  }
  .bb-text-hover-success,
  .bb-text-active-success,
  .bb-text-state-success,
  .bb-parent-hover:hover .bb-parent-hover-success,
  .bb-parent-active.active .bb-parent-active-success,
  .bb-parent-active.is-active .bb-parent-active-success,
  .bb-parent-active[aria-current=page] .bb-parent-active-success,
  .bb-parent-active[aria-current=true] .bb-parent-active-success {
    transition: none;
  }
  .bb-text-hover-info,
  .bb-text-active-info,
  .bb-text-state-info,
  .bb-parent-hover:hover .bb-parent-hover-info,
  .bb-parent-active.active .bb-parent-active-info,
  .bb-parent-active.is-active .bb-parent-active-info,
  .bb-parent-active[aria-current=page] .bb-parent-active-info,
  .bb-parent-active[aria-current=true] .bb-parent-active-info {
    transition: none;
  }
  .bb-text-hover-warning,
  .bb-text-active-warning,
  .bb-text-state-warning,
  .bb-parent-hover:hover .bb-parent-hover-warning,
  .bb-parent-active.active .bb-parent-active-warning,
  .bb-parent-active.is-active .bb-parent-active-warning,
  .bb-parent-active[aria-current=page] .bb-parent-active-warning,
  .bb-parent-active[aria-current=true] .bb-parent-active-warning {
    transition: none;
  }
  .bb-text-hover-danger,
  .bb-text-active-danger,
  .bb-text-state-danger,
  .bb-parent-hover:hover .bb-parent-hover-danger,
  .bb-parent-active.active .bb-parent-active-danger,
  .bb-parent-active.is-active .bb-parent-active-danger,
  .bb-parent-active[aria-current=page] .bb-parent-active-danger,
  .bb-parent-active[aria-current=true] .bb-parent-active-danger {
    transition: none;
  }
  .bb-text-hover-light,
  .bb-text-active-light,
  .bb-text-state-light,
  .bb-parent-hover:hover .bb-parent-hover-light,
  .bb-parent-active.active .bb-parent-active-light,
  .bb-parent-active.is-active .bb-parent-active-light,
  .bb-parent-active[aria-current=page] .bb-parent-active-light,
  .bb-parent-active[aria-current=true] .bb-parent-active-light {
    transition: none;
  }
  .bb-text-hover-dark,
  .bb-text-active-dark,
  .bb-text-state-dark,
  .bb-parent-hover:hover .bb-parent-hover-dark,
  .bb-parent-active.active .bb-parent-active-dark,
  .bb-parent-active.is-active .bb-parent-active-dark,
  .bb-parent-active[aria-current=page] .bb-parent-active-dark,
  .bb-parent-active[aria-current=true] .bb-parent-active-dark {
    transition: none;
  }
}
/* 4. Layout */
/* =====================================
   Bulbulustur Layout Core
   Type-1 Dashboard (Sidebar | Main)
   ===================================== */
/* -------------------------------------------------
   APP ROOT (en üst)
------------------------------------------------- */
.bb-app {
  min-height: 100vh;
  display: flex;
  flex-direction: row; /* 🔥 YAN YANA */
}

/* -------------------------------------------------
   SIDEBAR (sol)
------------------------------------------------- */
.bb-sidebar {
  width: 16.25rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-coal-300);
  color: var(--bb-white);
}

/* -------------------------------------------------
   RIGHT SIDE (header + main + footer)
------------------------------------------------- */
.bb-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* -------------------------------------------------
   HEADER (üstte sabit)
------------------------------------------------- */
/* HEADER */
.bb-shell-header {
  flex-shrink: 0;
  background-color: var(--bb-body-bg);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-shell-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* LEFT / RIGHT */
.bb-shell-header-left,
.bb-shell-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* HEADER MENU */
.bb-shell-header-menu .bb-menu-link {
  padding: 0.5rem 0.75rem;
  font-weight: var(--bb-fw-medium);
  color: var(--bb-body-color);
}

.bb-shell-header-menu .bb-menu-link.is-active {
  color: var(--bb-primary);
}

/* DROPDOWN */
.bb-dropdown {
  position: relative;
}

.bb-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 140px;
  background: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bs-box-shadow-sm);
  display: none;
  z-index: 100;
}

.bb-dropdown-item {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--bb-body-color);
  text-decoration: none;
}

.bb-dropdown-item:hover {
  background-color: var(--bb-surface-2);
}

/* OPEN STATE (JS ile eklenecek) */
.bb-dropdown.is-open .bb-dropdown-menu {
  display: block;
}

/* -------------------------------------------------
   MAIN AREA (ortadaki büyüyen alan)
------------------------------------------------- */
.bb-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background-color: var(--bb-surface-2);
}

/* -------------------------------------------------
   MAIN INNER (ORTALAYAN KATMAN)
------------------------------------------------- */
.bb-main-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------
   TOOLBAR
------------------------------------------------- */
.bb-toolbar {
  flex-shrink: 0;
}

/* -------------------------------------------------
   CONTENT (scroll burada)
------------------------------------------------- */
.bb-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* -------------------------------------------------
   FOOTER (altta)
------------------------------------------------- */
.bb-shell-footer {
  flex-shrink: 0;
}

/* =====================================
   Grid System – Bulbulustur Theme
   Bootstrap-safe
   ===================================== */
:root {
  --bb-container-max-width: 1460px;
  --bb-gutter-x: 1.5rem;
  --bb-gutter-y: 1.5rem;
}

/* BB Container (Bootstrap container'ı KIRMAZ) */
.bb-container {
  width: 100%;
  max-width: var(--bb-container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bb-gutter-x);
  padding-right: var(--bb-gutter-x);
}

/* BB Row (isteğe bağlı, bootstrap'a alternatif) */
.bb-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bb-gutter-y));
  margin-left: calc(-0.5 * var(--bb-gutter-x));
  margin-right: calc(-0.5 * var(--bb-gutter-x));
}

/* BB Column */
.bb-col {
  flex: 1 0 0%;
  max-width: 100%;
  padding-left: calc(0.5 * var(--bb-gutter-x));
  padding-right: calc(0.5 * var(--bb-gutter-x));
  margin-top: var(--bb-gutter-y);
}

/* =====================================
   Header Layout
   Minimal + token-first (dark/light safe)
   ===================================== */
.bb-header {
  /* local tokens (override-friendly) */
  --bb-header-bg: var(--bb-body-bg);
  --bb-header-border-width: var(--bb-border-width, 1px);
  --bb-header-border-color: var(--bb-border-color);
  --bb-header-height-local: var(--bb-header-height, 70px);
  --bb-header-zindex: var(--bb-z-sticky, 1020);
  background-color: var(--bb-header-bg);
  border-bottom: var(--bb-header-border-width) solid var(--bb-header-border-color);
  position: sticky;
  top: 0;
  z-index: var(--bb-header-zindex);
}

.bb-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--bb-header-height-local);
}

.bb-logo {
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
  color: var(--bb-primary);
  text-decoration: none;
}

/* dikkat: bb-nav component ile çakışmasın */
.bb-header-nav {
  display: flex;
  gap: 2rem;
}

.bb-header-nav a {
  color: var(--bb-tertiary-color);
  text-decoration: none;
  font-weight: var(--bb-fw-medium);
}

.bb-header-nav a:hover {
  color: var(--bb-primary);
}

/* =====================================
    Bulbulustur Sidebar
    ===================================== */
.bb-sidebar {
  --bb-sidebar-width: 16.25rem;
  /* colors */
  --bb-sidebar-bg: var(--bb-coal-900);
  --bb-sidebar-border-color: var(--bb-border-color);
  --bb-sidebar-text-color: rgba(255, 255, 255, 0.85);
  /* layout */
  width: var(--bb-sidebar-width);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 100%;
  background-color: var(--bb-sidebar-bg);
  color: var(--bb-sidebar-text-color);
  border-right: 1px solid var(--bb-sidebar-border-color);
}

/* -------------------------------------
Header
------------------------------------- */
.bb-sidebar-header {
  flex-shrink: 0;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bb-sidebar-logo img {
  height: 28px;
  display: block;
}

/* -------------------------------------
    Body (scrollable)
------------------------------------- */
.bb-sidebar-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* -------------------------------------
    Footer
------------------------------------- */
.bb-sidebar-footer {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* =====================================
   Bulbulustur Toolbar
   ===================================== */
.bb-toolbar {
  flex-shrink: 0;
  border-bottom: 1px solid var(--bb-border-color);
  background-color: var(--bb-body-bg);
  margin-bottom: var(--bb-layout-gap, 1.5rem);
  margin-top: var(--bb-layout-gap, 1.5rem);
}

.bb-toolbar-inner {
  padding: 0;
}

/* ASIL OLAY BURADA */
.bb-toolbar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
}

/* LEFT */
.bb-toolbar-col-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* RIGHT */
.bb-toolbar-col-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 767.98px) {
  .bb-toolbar-row {
    grid-template-columns: 1fr;
  }
  .bb-toolbar-col-right {
    margin-top: 0.5rem;
  }
}
/* =====================================
   Bulbulustur Footer
   Type-1 Dashboard
   ===================================== */
.bb-footer {
  flex-shrink: 0;
  width: 100%;
}

/* ZEMİN */
.bb-footer-bar {
  width: 100%;
  background-color: var(--bb-body-bg);
  border-top: 1px solid var(--bb-border-color);
}

/* İÇ HİZALAMA */
.bb-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 1rem;
}

.bb-footer-left,
.bb-footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bb-footer-brand {
  font-weight: var(--bb-fw-semibold);
  color: var(--bb-body-color);
  text-decoration: none;
}

.bb-footer-brand:hover {
  color: var(--bb-primary);
}

/* Mobile */
@media (max-width: 767.98px) {
  .bb-footer-inner {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
}
/* 5. Components */
/* =====================================
   Bulbulustur Theme - Buttons
   Bootstrap 5 base preserved
   Token-first | Dark/Light safe | PURE
===================================== */
.btn,
.bb-btn {
  /* Base tokens */
  --bb-btn-padding-x: 1.5rem;
  --bb-btn-padding-y: 0.775rem;
  --bb-btn-gap: 0.5rem;
  --bb-btn-font-size: var(--bb-fs-base);
  --bb-btn-font-weight: var(--bb-fw-medium);
  --bb-btn-line-height: var(--bb-line-height-base);
  --bb-btn-radius: var(--bb-radius);
  --bb-btn-border-width: var(--bb-border-width);
  --bb-btn-bg: transparent;
  --bb-btn-color: var(--bb-emphasis-color);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: var(--bb-btn-bg);
  --bb-btn-hover-color: var(--bb-btn-color);
  --bb-btn-hover-border-color: var(--bb-btn-border-color);
  --bb-btn-active-bg: var(--bb-btn-hover-bg);
  --bb-btn-active-color: var(--bb-btn-hover-color);
  --bb-btn-active-border-color: var(--bb-btn-hover-border-color);
  --bb-btn-disabled-opacity: var(--bb-disabled-opacity);
  --bb-btn-icon-size: 1.2em;
  --bb-btn-transition:
    var(--bb-transition-colors),
    box-shadow var(--bb-transition-fast),
    transform var(--bb-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-btn-gap);
  padding: var(--bb-btn-padding-y) var(--bb-btn-padding-x);
  color: var(--bb-btn-color);
  background-color: var(--bb-btn-bg);
  border: var(--bb-btn-border-width) solid var(--bb-btn-border-color);
  border-radius: var(--bb-btn-radius);
  font-family: var(--bb-font-sans);
  font-size: var(--bb-btn-font-size);
  font-weight: var(--bb-btn-font-weight);
  line-height: var(--bb-btn-line-height);
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: var(--bb-btn-transition);
}

.btn:hover,
.bb-btn:hover {
  color: var(--bb-btn-hover-color);
  background-color: var(--bb-btn-hover-bg);
  border-color: var(--bb-btn-hover-border-color);
  text-decoration: none;
}

.btn:active,
.btn.active,
.btn.show,
.bb-btn:active,
.bb-btn.active,
.bb-btn.show {
  color: var(--bb-btn-active-color);
  background-color: var(--bb-btn-active-bg);
  border-color: var(--bb-btn-active-border-color);
}

.btn.btn-sm,
.bb-btn.btn-sm,
.bb-btn.bb-btn-sm {
  --bb-btn-padding-x: 1rem;
  --bb-btn-padding-y: 0.5rem;
  --bb-btn-font-size: var(--bb-fs-sm);
}

.btn.btn-lg,
.bb-btn.btn-lg,
.bb-btn.bb-btn-lg {
  --bb-btn-padding-x: 2rem;
  --bb-btn-padding-y: 1rem;
  --bb-btn-font-size: var(--bb-icon-size-md);
}

.btn .material-symbols-outlined,
.bb-btn .material-symbols-outlined,
.btn .svg-icon,
.bb-btn .svg-icon,
.btn i,
.bb-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-btn-icon-size);
  line-height: 1;
}

/* -------------------------------------------------
   Disabled
------------------------------------------------- */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled=true],
.bb-btn:disabled,
.bb-btn.disabled,
.bb-btn[aria-disabled=true] {
  opacity: var(--bb-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}

/* -------------------------------------------------
   Solid variants
   Bootstrap names preserved
------------------------------------------------- */
.btn-primary,
.bb-btn-primary {
  --bb-btn-bg: var(--bb-primary);
  --bb-btn-color: var(--bb-primary-inverse);
  --bb-btn-border-color: var(--bb-primary);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-primary) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-primary-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-primary-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-secondary,
.bb-btn-secondary {
  --bb-btn-bg: var(--bb-secondary);
  --bb-btn-color: var(--bb-secondary-inverse);
  --bb-btn-border-color: var(--bb-secondary);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-secondary) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-secondary-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-secondary) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-secondary-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-success,
.bb-btn-success {
  --bb-btn-bg: var(--bb-success);
  --bb-btn-color: var(--bb-success-inverse);
  --bb-btn-border-color: var(--bb-success);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-success) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-success-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-success) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-success-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-info,
.bb-btn-info {
  --bb-btn-bg: var(--bb-info);
  --bb-btn-color: var(--bb-info-inverse);
  --bb-btn-border-color: var(--bb-info);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-info) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-info-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-info) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-info-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-warning,
.bb-btn-warning {
  --bb-btn-bg: var(--bb-warning);
  --bb-btn-color: var(--bb-warning-inverse);
  --bb-btn-border-color: var(--bb-warning);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-warning) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-warning-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-warning) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-warning-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-danger,
.bb-btn-danger {
  --bb-btn-bg: var(--bb-danger);
  --bb-btn-color: var(--bb-danger-inverse);
  --bb-btn-border-color: var(--bb-danger);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-danger) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-danger-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-danger) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-danger-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-light,
.bb-btn-light {
  --bb-btn-bg: var(--bb-light);
  --bb-btn-color: var(--bb-light-inverse);
  --bb-btn-border-color: var(--bb-light);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-light) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-light-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-light) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-light-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

.btn-dark,
.bb-btn-dark {
  --bb-btn-bg: var(--bb-dark);
  --bb-btn-color: var(--bb-dark-inverse);
  --bb-btn-border-color: var(--bb-dark);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-dark) 92%, var(--bb-body-bg));
  --bb-btn-hover-color: var(--bb-dark-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-dark) 86%, var(--bb-body-bg));
  --bb-btn-active-color: var(--bb-dark-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
}

/* -------------------------------------------------
   Icon-only
------------------------------------------------- */
.bb-btn-icon {
  width: calc(var(--bb-btn-font-size) * 1.25 + var(--bb-btn-padding-y) * 2);
  height: calc(var(--bb-btn-font-size) * 1.25 + var(--bb-btn-padding-y) * 2);
  padding: calc(var(--bb-btn-padding-y) * 0.9);
  border-radius: calc(var(--bb-btn-radius) * 1.15);
}

/* -------------------------------------------------
   Light style
------------------------------------------------- */
.bb-btn-light-primary {
  --bb-btn-bg: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-btn-color: var(--bb-primary);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-btn-hover-color: var(--bb-primary);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-primary) 24%, transparent);
  --bb-btn-active-color: var(--bb-primary);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-light-secondary {
  --bb-btn-bg: color-mix(in srgb, var(--bb-secondary) 12%, transparent);
  --bb-btn-color: var(--bb-secondary);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-secondary) 18%, transparent);
  --bb-btn-hover-color: var(--bb-secondary);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-secondary) 24%, transparent);
  --bb-btn-active-color: var(--bb-secondary);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-light-success {
  --bb-btn-bg: color-mix(in srgb, var(--bb-success) 12%, transparent);
  --bb-btn-color: var(--bb-success);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-success) 18%, transparent);
  --bb-btn-hover-color: var(--bb-success);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-success) 24%, transparent);
  --bb-btn-active-color: var(--bb-success);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-light-info {
  --bb-btn-bg: color-mix(in srgb, var(--bb-info) 12%, transparent);
  --bb-btn-color: var(--bb-info);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-info) 18%, transparent);
  --bb-btn-hover-color: var(--bb-info);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-info) 24%, transparent);
  --bb-btn-active-color: var(--bb-info);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-light-warning {
  --bb-btn-bg: color-mix(in srgb, var(--bb-warning) 12%, transparent);
  --bb-btn-color: var(--bb-warning);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-warning) 18%, transparent);
  --bb-btn-hover-color: var(--bb-warning);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-warning) 24%, transparent);
  --bb-btn-active-color: var(--bb-warning);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-light-danger {
  --bb-btn-bg: color-mix(in srgb, var(--bb-danger) 12%, transparent);
  --bb-btn-color: var(--bb-danger);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-danger) 18%, transparent);
  --bb-btn-hover-color: var(--bb-danger);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-danger) 24%, transparent);
  --bb-btn-active-color: var(--bb-danger);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-light-dark {
  --bb-btn-bg: color-mix(in srgb, var(--bb-dark) 12%, transparent);
  --bb-btn-color: var(--bb-dark);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-dark) 18%, transparent);
  --bb-btn-hover-color: var(--bb-dark);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-dark) 24%, transparent);
  --bb-btn-active-color: var(--bb-dark);
  --bb-btn-active-border-color: transparent;
}

/* -------------------------------------------------
   Background-only style
------------------------------------------------- */
.bb-btn-bg-light {
  --bb-btn-bg: var(--bb-light);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-light-inverse);
  --bb-btn-hover-color: var(--bb-light-inverse);
  --bb-btn-active-color: var(--bb-light-inverse);
}

.bb-btn-bg-primary {
  --bb-btn-bg: var(--bb-primary);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-primary-inverse);
  --bb-btn-hover-color: var(--bb-primary-inverse);
  --bb-btn-active-color: var(--bb-primary-inverse);
}

.bb-btn-bg-secondary {
  --bb-btn-bg: var(--bb-secondary);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-secondary-inverse);
  --bb-btn-hover-color: var(--bb-secondary-inverse);
  --bb-btn-active-color: var(--bb-secondary-inverse);
}

.bb-btn-bg-success {
  --bb-btn-bg: var(--bb-success);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-success-inverse);
  --bb-btn-hover-color: var(--bb-success-inverse);
  --bb-btn-active-color: var(--bb-success-inverse);
}

.bb-btn-bg-info {
  --bb-btn-bg: var(--bb-info);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-info-inverse);
  --bb-btn-hover-color: var(--bb-info-inverse);
  --bb-btn-active-color: var(--bb-info-inverse);
}

.bb-btn-bg-warning {
  --bb-btn-bg: var(--bb-warning);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-warning-inverse);
  --bb-btn-hover-color: var(--bb-warning-inverse);
  --bb-btn-active-color: var(--bb-warning-inverse);
}

.bb-btn-bg-danger {
  --bb-btn-bg: var(--bb-danger);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-danger-inverse);
  --bb-btn-hover-color: var(--bb-danger-inverse);
  --bb-btn-active-color: var(--bb-danger-inverse);
}

.bb-btn-bg-dark {
  --bb-btn-bg: var(--bb-dark);
  --bb-btn-border-color: transparent;
  --bb-btn-color: var(--bb-dark-inverse);
  --bb-btn-hover-color: var(--bb-dark-inverse);
  --bb-btn-active-color: var(--bb-dark-inverse);
}

/* -------------------------------------------------
   Outline style
------------------------------------------------- */
.bb-btn-outline {
  --bb-btn-bg: transparent;
  --bb-btn-hover-color: var(--bb-btn-color);
  --bb-btn-active-color: var(--bb-btn-color);
}

.bb-btn-outline-primary {
  --bb-btn-color: var(--bb-primary);
  --bb-btn-border-color: var(--bb-primary);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-primary);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-primary);
}

.bb-btn-outline-secondary {
  --bb-btn-color: var(--bb-secondary);
  --bb-btn-border-color: var(--bb-secondary);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-secondary) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-secondary);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-secondary) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-secondary);
}

.bb-btn-outline-success {
  --bb-btn-color: var(--bb-success);
  --bb-btn-border-color: var(--bb-success);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-success) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-success);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-success) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-success);
}

.bb-btn-outline-info {
  --bb-btn-color: var(--bb-info);
  --bb-btn-border-color: var(--bb-info);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-info) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-info);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-info) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-info);
}

.bb-btn-outline-warning {
  --bb-btn-color: var(--bb-warning);
  --bb-btn-border-color: var(--bb-warning);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-warning) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-warning);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-warning) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-warning);
}

.bb-btn-outline-danger {
  --bb-btn-color: var(--bb-danger);
  --bb-btn-border-color: var(--bb-danger);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-danger) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-danger);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-danger) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-danger);
}

.bb-btn-outline-dark {
  --bb-btn-color: var(--bb-dark);
  --bb-btn-border-color: var(--bb-dark);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-dark) 10%, transparent);
  --bb-btn-hover-border-color: var(--bb-dark);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-dark) 16%, transparent);
  --bb-btn-active-border-color: var(--bb-dark);
}

.bb-btn-outline-dashed {
  border-style: dashed;
}

/* -------------------------------------------------
   Color-only
------------------------------------------------- */
.bb-btn-color-white {
  --bb-btn-color: var(--bb-white);
  --bb-btn-hover-color: var(--bb-white);
  --bb-btn-active-color: var(--bb-white);
}

.bb-btn-color-muted {
  --bb-btn-color: var(--bb-secondary-color);
  --bb-btn-hover-color: var(--bb-secondary-color);
  --bb-btn-active-color: var(--bb-secondary-color);
}

.bb-btn-color-primary {
  --bb-btn-color: var(--bb-primary);
  --bb-btn-hover-color: var(--bb-primary);
  --bb-btn-active-color: var(--bb-primary);
}

.bb-btn-color-success {
  --bb-btn-color: var(--bb-success);
  --bb-btn-hover-color: var(--bb-success);
  --bb-btn-active-color: var(--bb-success);
}

.bb-btn-color-info {
  --bb-btn-color: var(--bb-info);
  --bb-btn-hover-color: var(--bb-info);
  --bb-btn-active-color: var(--bb-info);
}

.bb-btn-color-warning {
  --bb-btn-color: var(--bb-warning);
  --bb-btn-hover-color: var(--bb-warning);
  --bb-btn-active-color: var(--bb-warning);
}

.bb-btn-color-danger {
  --bb-btn-color: var(--bb-danger);
  --bb-btn-hover-color: var(--bb-danger);
  --bb-btn-active-color: var(--bb-danger);
}

.bb-btn-color-dark {
  --bb-btn-color: var(--bb-dark);
  --bb-btn-hover-color: var(--bb-dark);
  --bb-btn-active-color: var(--bb-dark);
}

/* -------------------------------------------------
   Active-only
------------------------------------------------- */
.bb-btn-active-primary {
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-active-success {
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-success) 10%, transparent);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-success) 16%, transparent);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-active-danger {
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-danger) 10%, transparent);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-danger) 16%, transparent);
  --bb-btn-active-border-color: transparent;
}

.bb-btn-active-dark {
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-dark) 10%, transparent);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-dark) 16%, transparent);
  --bb-btn-active-border-color: transparent;
}

/* -------------------------------------------------
   Utilities
------------------------------------------------- */
.bb-btn-flush {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--bb-radius-none);
  box-shadow: none;
}

.bb-btn-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-btn-trim-start {
  padding-left: 0;
}

.bb-btn-trim-end {
  padding-right: 0;
}

/* =====================================
   Bulbulustur Theme - Cards (v2 PURE)
   Metronic DNA: in, copy: out
   Bootstrap 5 compatible, token-first
   ===================================== */
.bb-card {
  /* -----------------------------------
     Local tokens (override-friendly)
  ----------------------------------- */
  /* surfaces + text (dark/light safe fallbacks) */
  --bb-card-bg: var(--bb-body-bg);
  --bb-card-color: var(--bb-emphasis-color, var(--bs-emphasis-color, var(--bb-body-color)));
  --bb-card-muted: var(--bb-secondary-color);
  /* border */
  --bb-card-border-width: var(--bb-border-width, 1px);
  --bb-card-border-color: var(--bb-border-color);
  /* radius */
  --bb-card-radius: var(--bb-radius-lg, var(--bs-border-radius-lg, 0.75rem));
  /* elevation (no rgba fallbacks) */
  --bb-card-shadow: var(--bb-shadow-xs, var(--bs-box-shadow-sm, none));
  --bb-card-shadow-hover: var(--bb-shadow-sm, var(--bs-box-shadow, var(--bb-card-shadow)));
  /* spacing */
  --bb-card-px: 1.25rem;
  --bb-card-header-py: 1rem;
  --bb-card-body-py: 1.25rem;
  --bb-card-footer-py: 0.85rem;
  /* micro tokens */
  --bb-card-actions-gap: 0.5rem;
  --bb-card-metric-gap: 0.25rem;
  --bb-card-hover-translate-y: -2px;
  /* focus ring */
  --bb-card-focus-ring-width: var(--bb-focus-ring-width, 0.2rem);
  --bb-card-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-card-focus-ring-opacity: var(--bb-focus-ring-opacity, 0.35);
  border: 0;
  border-radius: var(--bb-card-radius);
  background-color: var(--bb-card-bg);
  color: var(--bb-card-color);
  box-shadow: var(--bb-card-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  /* Bootstrap .card ile yan yana kullanım (güvenli) */
}
.bb-card.card {
  border-radius: var(--bb-card-radius);
}

/* -------------------------------------
   Hover elevate (opt-in)
------------------------------------- */
.bb-card-hover-elevate:hover {
  box-shadow: var(--bb-card-shadow-hover);
  transform: translateY(var(--bb-card-hover-translate-y));
}

/* -------------------------------------
   Header / Body / Footer
   (color'ı garanti ediyoruz)
------------------------------------- */
.bb-card-header,
.bb-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bb-card-header-py) var(--bb-card-px);
  background: transparent;
  color: var(--bb-card-color);
  border-bottom: var(--bb-card-border-width) solid var(--bb-card-border-color);
}

.bb-card-body,
.bb-card .card-body {
  padding: var(--bb-card-body-py) var(--bb-card-px);
  color: var(--bb-card-color);
}

.bb-card-footer,
.bb-card .card-footer {
  padding: var(--bb-card-footer-py) var(--bb-card-px);
  background: transparent;
  color: var(--bb-card-muted);
  border-top: var(--bb-card-border-width) solid var(--bb-card-border-color);
}

/* header title helpers */
.bb-card-title,
.bb-card .card-title {
  margin: 0;
  font-weight: var(--bb-fw-semibold);
  font-size: var(--bb-fs-base);
  color: var(--bb-card-color);
}

/* toolbars */
.bb-card-actions,
.bb-card-toolbar {
  display: flex;
  align-items: center;
  gap: var(--bb-card-actions-gap);
}

/* -------------------------------------
   Metric blocks
------------------------------------- */
.bb-card-metric {
  display: flex;
  flex-direction: column;
  gap: var(--bb-card-metric-gap);
}

.bb-card-value {
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-semibold);
  color: var(--bb-card-color);
  letter-spacing: -0.01em;
}

.bb-card-meta {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
}
.bb-card-meta.positive {
  color: var(--bb-success, var(--bb-success));
}
.bb-card-meta.negative {
  color: var(--bb-danger, var(--bb-danger));
}
.bb-card-meta.muted {
  color: var(--bb-card-muted);
}

.bb-card-footer-text {
  font-size: var(--bb-fs-xs);
  color: var(--bb-card-muted);
}

/* -------------------------------------
   Variants
------------------------------------- */
/* Bordered: shadow off, border on */
.bb-card-bordered {
  box-shadow: none;
  border: var(--bb-card-border-width) solid var(--bb-card-border-color);
}

/* Dashed: shadow off, dashed border */
.bb-card-dashed {
  box-shadow: none;
  border: var(--bb-card-border-width) dashed var(--bb-card-border-color);
}

/* Flush: header/footer borders off */
.bb-card-flush .bb-card-header,
.bb-card-flush .card-header {
  border-bottom: 0;
}
.bb-card-flush .bb-card-footer,
.bb-card-flush .card-footer {
  border-top: 0;
}

/* Reset side paddings */
.bb-card-px-0 {
  --bb-card-px: 0;
}

/* Scrollable body (height via css var) */
.bb-card-scroll {
  --bb-card-scroll-height: 200px;
}
.bb-card-scroll .bb-card-body,
.bb-card-scroll .card-body {
  max-height: var(--bb-card-scroll-height);
  overflow: auto;
}

/* Linkable (focus-visible included) */
.bb-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.bb-card-link:hover {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------
   Collapsible helper
------------------------------------- */
.bb-card-collapsible {
  cursor: pointer;
  user-select: none;
}
.bb-card-collapsible .bb-card-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.bb-card-collapsible[aria-expanded=true] .bb-card-toggle-icon {
  transform: rotate(180deg);
}

/* =====================================
   Bulbulustur Theme - Modal (PURE)
   Metronic-inspired | Bootstrap 5 compatible
   Token-first | Dark/Light safe
   Root: .bb-modal
   ===================================== */
.bb-modal {
  /* -------------------------------------
     Tokens (override-friendly)
  -------------------------------------- */
  /* Core */
  --bb-modal-radius: var(--bb-radius-lg, 0.85rem);
  --bb-modal-bg: var(--bb-body-bg);
  --bb-modal-border-color: var(--bb-border-color);
  --bb-modal-border-width: var(--bb-border-width, 1px);
  --bb-modal-shadow: var(--bb-shadow-lg, var(--bs-box-shadow-lg, none));
  /* Sections bg (optional) */
  --bb-modal-header-bg: transparent;
  --bb-modal-footer-bg: transparent;
  /* Typography */
  --bb-modal-title-color: var(--bb-emphasis-color, var(--bb-emphasis-color));
  --bb-modal-title-size: 1rem;
  --bb-modal-title-weight: 600;
  /* Spacing */
  --bb-modal-padding-x: 1.25rem;
  --bb-modal-header-padding-y: 1rem;
  --bb-modal-body-padding-y: 1.5rem;
  --bb-modal-footer-padding-y: 1rem;
  /* Close button */
  --bb-modal-close-size: 34px;
  --bb-modal-close-radius: var(--bb-radius);
  --bb-modal-close-color: var(--bs-secondary-color, var(--bb-body-color));
  --bb-modal-close-hover-bg: var(--bb-tertiary-bg);
  --bb-modal-close-hover-color: var(--bb-body-color);
  /* Focus ring */
  --bb-modal-focus-ring: var(--bs-focus-ring-box-shadow, 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary)25%, transparent));
  /* Sizes */
  --bb-modal-max-w-sm: 420px;
  --bb-modal-max-w-lg: 900px;
  --bb-modal-max-w-xl: 1140px;
  /* Scroll */
  --bb-modal-scroll-max-h: calc(100vh - 220px);
  /* Layout */
  border-radius: var(--bb-modal-radius);
  border: var(--bb-modal-border-width) solid var(--bb-modal-border-color);
  background-color: var(--bb-modal-bg);
  box-shadow: var(--bb-modal-shadow);
}

/* ----------------------------------------
   Header
----------------------------------------- */
.bb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bb-modal-header-padding-y) var(--bb-modal-padding-x);
  border-bottom: var(--bb-modal-border-width) solid var(--bb-modal-border-color);
  background-color: var(--bb-modal-header-bg);
}

.bb-modal-title {
  margin: 0;
  font-size: var(--bb-modal-title-size);
  font-weight: var(--bb-modal-title-weight);
  color: var(--bb-modal-title-color);
}

.bb-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Optional close button (pure, no Bootstrap dependency) */
.bb-modal-close {
  width: var(--bb-modal-close-size);
  height: var(--bb-modal-close-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--bb-modal-close-radius);
  color: var(--bb-modal-close-color);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.bb-modal-close:hover {
  background-color: var(--bb-modal-close-hover-bg);
  color: var(--bb-modal-close-hover-color);
}

/* ----------------------------------------
   Body
----------------------------------------- */
.bb-modal-body {
  padding: var(--bb-modal-body-padding-y) var(--bb-modal-padding-x);
}

/*
  KURAL:
  Modal body spacing yapar.
  İçerideki card / form kendi spacing’ini yönetir.
*/
/* ----------------------------------------
   Footer
----------------------------------------- */
.bb-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: var(--bb-modal-footer-padding-y) var(--bb-modal-padding-x);
  border-top: var(--bb-modal-border-width) solid var(--bb-modal-border-color);
  background-color: var(--bb-modal-footer-bg);
}

/* ----------------------------------------
   Size Variants (Optional)
   Not: max-width hard-coded ama token’lı, override edilebilir
----------------------------------------- */
.bb-modal-sm {
  max-width: var(--bb-modal-max-w-sm);
}

.bb-modal-lg {
  max-width: var(--bb-modal-max-w-lg);
}

.bb-modal-xl {
  max-width: var(--bb-modal-max-w-xl);
}

/* ----------------------------------------
   State Variants (Optional)
----------------------------------------- */
.bb-modal-danger {
  --bb-modal-title-color: var(--bb-danger, var(--bb-danger));
}

.bb-modal-info {
  --bb-modal-title-color: var(--bb-info, var(--bb-info));
}

.bb-modal-success {
  --bb-modal-title-color: var(--bb-success, var(--bb-success));
}

.bb-modal-warning {
  --bb-modal-title-color: var(--bb-warning, var(--bb-warning));
}

/* ----------------------------------------
   Scroll Variant
----------------------------------------- */
.bb-modal-scroll .bb-modal-body {
  max-height: var(--bb-modal-scroll-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ----------------------------------------
   Reduced motion
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-modal-close {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Tables (PURE)
   Bootstrap 5 friendly: use with .table
   Root: .table.bb-table
   Wrapper (optional): .bb-table-wrap
   ===================================== */
/* Optional wrapper (rounded + clip + border) */
.bb-table-wrap {
  --bb-table-wrap-radius: var(--bb-radius);
  --bb-table-wrap-bg: var(--bb-body-bg);
  --bb-table-wrap-border-color: var(--bb-border-color);
  --bb-table-wrap-border-width: var(--bb-border-width, 1px);
  border-radius: var(--bb-table-wrap-radius);
  background-color: var(--bb-table-wrap-bg);
  border: var(--bb-table-wrap-border-width) solid var(--bb-table-wrap-border-color);
  overflow: hidden;
}

.bb-table-wrap > .table.bb-table {
  margin-bottom: 0;
}

/* Main table */
.table.bb-table {
  /* -------- tokens (override edilebilir) -------- */
  --bb-table-border-color: var(--bb-border-color);
  --bb-table-color: var(--bb-body-color);
  --bb-table-head-color: var(--bb-secondary-color);
  --bb-table-font-size: var(--bb-fs-sm);
  --bb-table-head-font-size: var(--bb-fs-xs);
  --bb-table-head-font-weight: var(--bb-fw-semibold);
  --bb-table-head-letter-spacing: 0.03em;
  --bb-table-head-transform: uppercase;
  --bb-table-cell-px: 0.75rem;
  --bb-table-cell-py: 0.85rem;
  --bb-table-head-py: 0.75rem;
  --bb-table-striped-bg: var(--bb-tertiary-bg);
  --bb-table-hover-bg: var(--bb-secondary-bg);
  --bb-table-transition: var(--bb-transition-fast);
  --bb-table-row-radius: var(--bb-radius-sm);
  width: 100%;
  color: var(--bb-table-color);
  border-color: var(--bb-table-border-color);
  vertical-align: middle;
}
.table.bb-table th,
.table.bb-table td {
  font-size: var(--bb-table-font-size);
  color: inherit;
  vertical-align: middle;
  padding: var(--bb-table-cell-py) var(--bb-table-cell-px);
}
.table.bb-table thead th {
  font-size: var(--bb-table-head-font-size);
  font-weight: var(--bb-table-head-font-weight);
  letter-spacing: var(--bb-table-head-letter-spacing);
  text-transform: var(--bb-table-head-transform);
  color: var(--bb-table-head-color);
  padding-top: var(--bb-table-head-py);
  padding-bottom: var(--bb-table-head-py);
  white-space: nowrap;
}
.table.bb-table tbody > tr:last-child > * {
  border-bottom-width: 0;
}
.table.bb-table tbody > tr {
  --bb-table-row-bg: transparent;
}
.table.bb-table tbody > tr > * {
  background-color: var(--bb-table-row-bg);
  transition: background-color var(--bb-table-transition);
}
.table.bb-table.table-striped > tbody > tr:nth-of-type(odd) {
  --bb-table-row-bg: var(--bb-table-striped-bg);
}
.table.bb-table.table-hover > tbody > tr:hover {
  --bb-table-row-bg: var(--bb-table-hover-bg);
}
.table.bb-table.bb-table-row-bordered > tbody > tr {
  border-bottom: 1px solid var(--bb-table-border-color);
}
.table.bb-table.bb-table-row-dashed > tbody > tr {
  border-bottom: 1px dashed var(--bb-table-border-color);
}
.table.bb-table.bb-table-rows-rounded > tbody > tr > *:first-child {
  border-top-left-radius: var(--bb-table-row-radius);
  border-bottom-left-radius: var(--bb-table-row-radius);
}
.table.bb-table.bb-table-rows-rounded > tbody > tr > *:last-child {
  border-top-right-radius: var(--bb-table-row-radius);
  border-bottom-right-radius: var(--bb-table-row-radius);
}
.table.bb-table.bb-table-flush th, .table.bb-table.bb-table-flush td {
  padding: 0;
}

/* =====================================
   Empty State
   Main CSS component
   Token-first | Dark/Light safe
===================================== */
.bb-empty-state {
  --bb-empty-max-width: 420px;
  --bb-empty-padding-y: 2rem;
  --bb-empty-padding-x: 1rem;
  --bb-empty-icon-size: 64px;
  --bb-empty-icon-box-size: 76px;
  --bb-empty-icon-radius: var(--bb-radius-2xl);
  --bb-empty-title-size: var(--bb-fs-xl);
  --bb-empty-title-weight: var(--bb-fw-semibold);
  --bb-empty-text-size: .95rem;
  --bb-empty-text-weight: var(--bb-fw-semibold);
  --bb-empty-text-line-height: var(--bb-line-height-base);
  max-width: var(--bb-empty-max-width);
  margin-inline: auto;
  padding: var(--bb-empty-padding-y) var(--bb-empty-padding-x);
  text-align: center;
}

.bb-empty-icon {
  width: var(--bb-empty-icon-box-size);
  height: var(--bb-empty-icon-box-size);
  margin: 0 auto 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-empty-icon-radius);
  font-size: var(--bb-empty-icon-size);
  line-height: 1;
}

.bb-empty-icon .material-symbols-outlined {
  font-size: inherit;
  line-height: inherit;
}

.bb-empty-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-empty-title-size);
  line-height: 1.3;
  font-weight: var(--bb-empty-title-weight);
  letter-spacing: -0.01em;
}

.bb-empty-text {
  margin: 0.5rem auto 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-empty-text-size);
  line-height: var(--bb-empty-text-line-height);
  font-weight: var(--bb-empty-text-weight);
}

.bb-empty-actions {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* -------------------------------------
   Variants
------------------------------------- */
.bb-empty-state-sm {
  --bb-empty-max-width: 360px;
  --bb-empty-padding-y: 1.25rem;
  --bb-empty-icon-size: 38px;
  --bb-empty-icon-box-size: 52px;
  --bb-empty-title-size: var(--bb-fs-lg);
  --bb-empty-text-size: .875rem;
}

.bb-empty-state-lg {
  --bb-empty-max-width: 560px;
  --bb-empty-padding-y: 3rem;
  --bb-empty-icon-size: 74px;
  --bb-empty-icon-box-size: 90px;
  --bb-empty-title-size: var(--bb-h3);
  --bb-empty-text-size: 1rem;
}

/* -------------------------------------
   Tone variants
------------------------------------- */
.bb-empty-state-primary .bb-empty-icon {
  color: var(--bb-primary);
  background-color: var(--bb-primary-light);
}

.bb-empty-state-success .bb-empty-icon {
  color: var(--bb-success);
  background-color: var(--bb-success-light);
}

.bb-empty-state-warning .bb-empty-icon {
  color: var(--bb-warning);
  background-color: var(--bb-warning-light);
}

.bb-empty-state-danger .bb-empty-icon {
  color: var(--bb-danger);
  background-color: var(--bb-danger-light);
}

.bb-empty-state-info .bb-empty-icon {
  color: var(--bb-info);
  background-color: var(--bb-info-light);
}

/* -------------------------------------
   Surface variant
   Card/container içinde daha sakin kullanım.
------------------------------------- */
.bb-empty-state-flat {
  padding: 1rem;
}

.bb-empty-state-flat .bb-empty-icon {
  background-color: transparent;
  width: auto;
  height: auto;
  margin-bottom: 0.75rem;
}

/* -------------------------------------
   Border variant
   Standalone empty panels için.
------------------------------------- */
.bb-empty-state-panel {
  max-width: none;
  border: 1px dashed var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
}

/* -------------------------------------
   Horizontal variant
   Dar kartlarda / küçük dashboard alanlarında.
------------------------------------- */
.bb-empty-state-horizontal {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.bb-empty-state-horizontal .bb-empty-icon {
  margin: 0;
  flex: 0 0 auto;
}

.bb-empty-state-horizontal .bb-empty-text {
  margin-left: 0;
  margin-right: 0;
}

.bb-empty-state-horizontal .bb-empty-actions {
  justify-content: flex-start;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-empty-state {
    --bb-empty-padding-y: 1.5rem;
    --bb-empty-padding-x: .75rem;
  }
  .bb-empty-state-horizontal {
    align-items: flex-start;
    text-align: left;
  }
}
/* =====================================
   Bulbulustur Theme - Accordion
   Bootstrap 5 base preserved
   Root: .bb-accordion
===================================== */
.bb-accordion {
  /* Local tokens */
  --bb-accordion-padding-y: 1rem;
  --bb-accordion-padding-x: 1.25rem;
  --bb-accordion-icon-size: 1.25rem;
  --bb-accordion-border-color: var(--bb-border-color);
  --bb-accordion-border-width: var(--bb-border-width, 1px);
  --bb-accordion-radius: var(--bb-radius);
  --bb-accordion-bg: var(--bb-body-bg);
  --bb-accordion-color: var(--bb-body-color);
  --bb-accordion-muted-color: var(--bb-secondary-color);
  --bb-accordion-active-color: var(--bb-primary);
  --bb-accordion-active-bg: var(--bb-tertiary-bg);
}
.bb-accordion .accordion-item {
  background-color: var(--bb-accordion-bg);
  border: var(--bb-accordion-border-width) solid var(--bb-accordion-border-color);
  border-radius: var(--bb-accordion-radius);
  overflow: hidden;
}
.bb-accordion .accordion-item + .accordion-item {
  margin-top: 0.75rem;
}
.bb-accordion .accordion-header {
  margin: 0;
}
.bb-accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--bb-accordion-padding-y) var(--bb-accordion-padding-x);
  font-weight: var(--bb-fw-medium);
  color: var(--bb-accordion-color);
  background-color: transparent;
  box-shadow: none;
}
.bb-accordion .accordion-button::after {
  display: none;
}
.bb-accordion .accordion-button:not(.collapsed) {
  color: var(--bb-accordion-active-color);
  background-color: var(--bb-accordion-active-bg);
  box-shadow: none;
}
.bb-accordion .accordion-button:focus {
  box-shadow: none;
}
.bb-accordion .accordion-button:disabled {
  opacity: var(--bb-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
.bb-accordion .accordion-body {
  color: var(--bb-accordion-color);
  background-color: var(--bb-accordion-bg);
}
.bb-accordion {
  /* -------------------------------------
     Icon
  ------------------------------------- */
}
.bb-accordion .bb-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-accordion-icon-size);
  color: var(--bb-accordion-muted-color);
  transition: transform var(--bb-transition-fast), color var(--bb-transition-fast);
}
.bb-accordion {
  /* -------------------------------------
     Icon toggle mode
  ------------------------------------- */
}
.bb-accordion.bb-accordion-icon-toggle .accordion-button:not(.collapsed) .bb-accordion-icon {
  transform: rotate(90deg);
  color: var(--bb-accordion-active-color);
}
.bb-accordion.bb-accordion-icon-toggle .accordion-button.collapsed .bb-accordion-icon {
  transform: rotate(0);
  color: var(--bb-accordion-muted-color);
}
.bb-accordion {
  /* -------------------------------------
     Icon collapse mode
  ------------------------------------- */
}
.bb-accordion.bb-accordion-icon-collapse .bb-accordion-icon-on {
  display: none;
}
.bb-accordion.bb-accordion-icon-collapse .bb-accordion-icon-off {
  display: inline-flex;
}
.bb-accordion.bb-accordion-icon-collapse .accordion-button:not(.collapsed) .bb-accordion-icon-on {
  display: inline-flex;
  color: var(--bb-accordion-active-color);
}
.bb-accordion.bb-accordion-icon-collapse .accordion-button:not(.collapsed) .bb-accordion-icon-off {
  display: none;
}
.bb-accordion {
  /* -------------------------------------
     Borderless
  ------------------------------------- */
}
.bb-accordion.bb-accordion-borderless .accordion-item {
  border: 0;
}
.bb-accordion {
  /* -------------------------------------
     Flush
  ------------------------------------- */
}
.bb-accordion.bb-accordion-flush .accordion-item {
  background-color: transparent;
  border: 0;
  border-radius: var(--bb-radius-none);
}
.bb-accordion.bb-accordion-flush .accordion-button {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
}
.bb-accordion.bb-accordion-flush .accordion-button:not(.collapsed) {
  background-color: transparent;
}

/* =====================================
   Bulbulustur Theme - Alerts (Pure)
   Token-first, Bootstrap 5 safe
   ===================================== */
.bb-alert {
  /* defaults (safe even if :root doesn't define) */
  --bb-alert-gap: 0.75rem;
  --bb-alert-padding: 1rem 1.25rem;
  --bb-alert-radius: var(--bb-radius);
  --bb-alert-bg: var(--bb-body-bg);
  --bb-alert-border-color: transparent;
  --bb-alert-title-color: var(--bb-emphasis-color);
  --bb-alert-text-color: var(--bb-secondary-color);
  /* micro polish (override-friendly) */
  --bb-alert-icon-size: 1.75rem;
  --bb-alert-icon-offset-y: 0.15rem;
  --bb-alert-title-size: 1rem;
  --bb-alert-title-weight: 600;
  --bb-alert-title-margin-bottom: 0.15rem;
  --bb-alert-text-size: 0.875rem;
  --bb-alert-text-line-height: var(--bb-line-height-base);
  /* opacity tokens (dark/light safe) */
  --bb-alert-icon-opacity: 0.9;
  --bb-alert-close-opacity: 0.45;
  --bb-alert-close-opacity-hover: 0.8;
  --bb-alert-close-padding: 0.25rem;
  /* focus / a11y */
  --bb-alert-focus-ring-width: var(--bb-focus-ring-width, 0.2rem);
  --bb-alert-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-alert-focus-ring-opacity: var(--bb-focus-ring-opacity, 0.35);
  display: flex;
  align-items: flex-start;
  gap: var(--bb-alert-gap);
  padding: var(--bb-alert-padding);
  border-radius: var(--bb-alert-radius);
  border: var(--bb-border-width) solid var(--bb-alert-border-color);
  background-color: var(--bb-alert-bg);
  background-clip: padding-box;
  position: relative;
}

/* -------------------------------------
   Icon
------------------------------------- */
.bb-alert-icon {
  font-size: var(--bb-alert-icon-size);
  line-height: 1;
  margin-top: var(--bb-alert-icon-offset-y);
  opacity: var(--bb-alert-icon-opacity);
  display: flex;
  align-items: center;
  color: var(--bb-alert-title-color);
}

/* -------------------------------------
   Body
------------------------------------- */
.bb-alert-body {
  display: flex;
  flex-direction: column;
}

.bb-alert-title {
  font-size: var(--bb-alert-title-size);
  font-weight: var(--bb-alert-title-weight);
  margin: 0 0 var(--bb-alert-title-margin-bottom) 0;
  color: var(--bb-alert-title-color);
}

.bb-alert-text {
  font-size: var(--bb-alert-text-size);
  line-height: var(--bb-alert-text-line-height);
  color: var(--bb-alert-text-color);
}

/* -------------------------------------
   Close button
------------------------------------- */
.bb-alert-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: var(--bb-alert-close-padding);
  opacity: var(--bb-alert-close-opacity);
  cursor: pointer;
  /* reset-ish */
  appearance: none;
  -webkit-appearance: none;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.bb-alert-close:hover {
  opacity: var(--bb-alert-close-opacity-hover);
}

.bb-alert-close:disabled,
.bb-alert.is-disabled .bb-alert-close {
  opacity: var(--bb-disabled-opacity, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================================
   Variants
   ===================================== */
/* Primary */
.bb-alert-primary {
  --bb-alert-bg: var(--bb-primary-light);
  --bb-alert-border-color: var(--bb-primary);
  --bb-alert-title-color: var(--bb-primary);
}

/* Success */
.bb-alert-success {
  --bb-alert-bg: var(--bb-success-light);
  --bb-alert-border-color: var(--bb-success);
  --bb-alert-title-color: var(--bb-success);
}

/* Warning */
.bb-alert-warning {
  --bb-alert-bg: var(--bb-warning-light);
  --bb-alert-border-color: var(--bb-warning);
  --bb-alert-title-color: var(--bb-warning);
}

/* Danger */
.bb-alert-danger {
  --bb-alert-bg: var(--bb-danger-light);
  --bb-alert-border-color: var(--bb-danger);
  --bb-alert-title-color: var(--bb-danger);
}

/* =====================================
   Bulbulustur Theme - Nav / Tabs (PURE)
   Token-first | Dark/Light safe
   Root: .bb-nav
   Variants: .bb-nav-tabs .bb-nav-pills .bb-nav-soft .bb-nav-group .bb-nav-underline
   ===================================== */
.bb-nav {
  /* -------------------------------------
     Tokens (override-friendly)
  -------------------------------------- */
  /* Layout */
  --bb-nav-gap: 0.5rem;
  --bb-nav-radius: var(--bb-radius, 0.65rem);
  --bb-nav-border-width: var(--bb-border-width, 1px);
  /* Colors */
  --bb-nav-bg: transparent;
  --bb-nav-border-color: var(--bb-border-color);
  --bb-nav-color: var(--bb-secondary-color, var(--bs-secondary-color, var(--bb-body-color)));
  --bb-nav-hover-color:var(--bb-primary);
  --bb-nav-active-color:var(--bb-primary);
  /* Backgrounds */
  --bb-nav-hover-bg: transparent;
  --bb-nav-active-bg: var(--bb-body-bg);
  --bb-nav-soft-bg: var(--bb-tertiary-bg);
  /* Pills active */
  --bb-nav-pill-active-bg:var(--bb-primary);
  --bb-nav-pill-active-color: var(--bb-primary-inverse, var(--bb-white));
  /* Typography */
  --bb-nav-font-weight: var(--bb-fw-medium);
  /* Spacing (token’lı kalsın) */
  --bb-nav-link-py: 0.6rem;
  --bb-nav-link-px: 1.25rem;
  /* Interaction */
  --bb-nav-transition-speed: 200ms;
  --bb-nav-transition-ease: ease;
  /* Focus / Disabled */
  --bb-nav-focus-ring: var(--bs-focus-ring-box-shadow, 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary)25%, transparent));
  --bb-nav-disabled-opacity: 0.55;
  display: flex;
  gap: var(--bb-nav-gap);
}

/* -------------------------------------
   Links
------------------------------------- */
.bb-nav .nav-link {
  color: var(--bb-nav-color);
  font-weight: var(--bb-nav-font-weight);
  border-radius: var(--bb-nav-radius);
  padding: var(--bb-nav-link-py) var(--bb-nav-link-px);
  background-color: transparent;
  text-decoration: none;
  transition: color var(--bb-nav-transition-speed) var(--bb-nav-transition-ease), background-color var(--bb-nav-transition-speed) var(--bb-nav-transition-ease), box-shadow var(--bb-nav-transition-speed) var(--bb-nav-transition-ease);
}

.bb-nav .nav-link:hover {
  color: var(--bb-nav-hover-color);
  background-color: var(--bb-nav-hover-bg);
}

.bb-nav .nav-link.active,
.bb-nav .nav-link[aria-current=page] {
  color: var(--bb-nav-active-color);
  background-color: var(--bb-nav-active-bg);
}

/* Disabled */
.bb-nav .nav-link.disabled,
.bb-nav .nav-link[aria-disabled=true] {
  opacity: var(--bb-nav-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------
   Tabs Style
------------------------------------- */
.bb-nav-tabs {
  border-bottom: var(--bb-nav-border-width) solid var(--bb-nav-border-color);
}

.bb-nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--bb-radius-none);
  background-color: transparent;
}

.bb-nav-tabs .nav-link:hover {
  background-color: transparent;
}

.bb-nav-tabs .nav-link.active,
.bb-nav-tabs .nav-link[aria-current=page] {
  border-bottom-color: var(--bb-nav-active-color);
  background-color: transparent;
}

/* -------------------------------------
   Underline Variant (same feel, ayrı class)
------------------------------------- */
.bb-nav-underline .nav-link {
  border-radius: var(--bb-radius-none);
  border-bottom: 2px solid transparent;
  background-color: transparent;
}

.bb-nav-underline .nav-link.active,
.bb-nav-underline .nav-link[aria-current=page] {
  border-bottom-color: var(--bb-nav-active-color);
  background-color: transparent;
}

/* -------------------------------------
   Pills Style
------------------------------------- */
.bb-nav-pills {
  background-color: transparent;
}

.bb-nav-pills .nav-link.active,
.bb-nav-pills .nav-link[aria-current=page] {
  background-color: var(--bb-nav-pill-active-bg);
  color: var(--bb-nav-pill-active-color);
}

/* -------------------------------------
   Soft Pills (Metronic feel)
------------------------------------- */
.bb-nav-soft {
  background-color: var(--bb-nav-soft-bg);
  padding: 0.35rem;
  border-radius: var(--bb-nav-radius);
  /* Soft içinde hover bg genelde hafif olur */
  --bb-nav-hover-bg: color-mix(in srgb, var(--bb-nav-pill-active-bg) 8%, transparent);
}

.bb-nav-soft .nav-link.active,
.bb-nav-soft .nav-link[aria-current=page] {
  background-color: var(--bb-nav-active-bg);
  box-shadow: var(--bb-shadow-sm, var(--bs-box-shadow-sm, none));
}

/* -------------------------------------
   Group
------------------------------------- */
.bb-nav-group {
  padding: 0.35rem;
  background-color: var(--bb-nav-soft-bg);
  border-radius: var(--bb-nav-radius);
}

/* Outline Group */
.bb-nav-group.bb-nav-group-outline {
  background-color: transparent;
  border: var(--bb-nav-border-width) solid var(--bb-nav-border-color);
}

/* -------------------------------------
   Stretch
------------------------------------- */
.bb-nav-stretch {
  display: flex;
}

.bb-nav-stretch .nav-item {
  flex: 1 1 0;
}

.bb-nav-stretch .nav-link {
  width: 100%;
  text-align: center;
}

/* -------------------------------------
   Sizes
------------------------------------- */
.bb-nav-sm {
  --bb-nav-link-py: 0.45rem;
  --bb-nav-link-px: 0.9rem;
}

.bb-nav-sm .nav-link {
  font-size: var(--bb-fs-sm);
}

.bb-nav-lg {
  --bb-nav-link-py: 0.85rem;
  --bb-nav-link-px: 1.75rem;
}

.bb-nav-lg .nav-link {
  font-size: var(--bb-fs-base);
}

/* -------------------------------------
   Reduced motion
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-nav .nav-link {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Badges (Pure)
   Bootstrap 5 compatible, token-first
   ===================================== */
.badge.bb-badge {
  /* -----------------------------------
     Local tokens (override-friendly)
  ----------------------------------- */
  --bb-badge-padding-y: 0.35em;
  --bb-badge-padding-x: 0.65em;
  --bb-badge-font-size: var(--bb-fs-xs);
  --bb-badge-font-weight: var(--bb-fw-semibold);
  --bb-badge-line-height: 1;
  --bb-badge-radius: var(--bb-radius-sm);
  /* Default (dark/light safe) */
  --bb-badge-bg: var(--bb-tertiary-bg);
  --bb-badge-color: var(--bb-emphasis-color);
  /* Outline */
  --bb-badge-border-width: var(--bb-border-width, 1px);
  /* Circle */
  --bb-badge-circle-size: 1.75rem;
  /* Focus ring (only for interactive usage) */
  --bb-badge-focus-ring-width: var(--bb-focus-ring-width, 0.2rem);
  --bb-badge-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-badge-focus-ring-opacity: var(--bb-focus-ring-opacity, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--bb-badge-padding-y) var(--bb-badge-padding-x);
  font-size: var(--bb-badge-font-size);
  font-weight: var(--bb-badge-font-weight);
  line-height: var(--bb-badge-line-height);
  white-space: nowrap;
  border-radius: var(--bb-badge-radius);
  background-color: var(--bb-badge-bg);
  color: var(--bb-badge-color);
}

/* -----------------------------
   Sizes
----------------------------- */
.badge.bb-badge-sm {
  --bb-badge-font-size: var(--bb-fs-2xs);
  --bb-badge-padding-y: 0.25em;
  --bb-badge-padding-x: 0.5em;
}

.badge.bb-badge-lg {
  --bb-badge-font-size: var(--bb-fs-sm);
  --bb-badge-padding-y: 0.45em;
  --bb-badge-padding-x: 0.8em;
}

/* -----------------------------
   Shapes
----------------------------- */
.badge.bb-badge-pill {
  --bb-badge-radius: var(--bb-radius-pill);
}

.badge.bb-badge-circle {
  width: var(--bb-badge-circle-size);
  height: var(--bb-badge-circle-size);
  padding: 0;
  border-radius: 50%;
  font-size: var(--bb-badge-font-size);
}

/* -----------------------------
   Semantic Variants
----------------------------- */
.badge.bb-badge-primary {
  --bb-badge-bg: var(--bb-primary);
  --bb-badge-color: var(--bb-primary-inverse);
}

.badge.bb-badge-success {
  --bb-badge-bg: var(--bb-success);
  --bb-badge-color: var(--bb-success-inverse);
}

.badge.bb-badge-info {
  --bb-badge-bg: var(--bb-info);
  --bb-badge-color: var(--bb-info-inverse);
}

.badge.bb-badge-warning {
  --bb-badge-bg: var(--bb-warning);
  --bb-badge-color: var(--bb-warning-inverse);
}

.badge.bb-badge-danger {
  --bb-badge-bg: var(--bb-danger);
  --bb-badge-color: var(--bb-danger-inverse);
}

.badge.bb-badge-dark {
  --bb-badge-bg: var(--bb-dark);
  --bb-badge-color: var(--bb-dark-inverse);
}

/* -----------------------------
   Light / Soft (Metronic feel)
----------------------------- */
.badge.bb-badge-light-primary {
  --bb-badge-bg: var(--bb-primary-light);
  --bb-badge-color: var(--bb-primary);
}

.badge.bb-badge-light-success {
  --bb-badge-bg: var(--bb-success-light);
  --bb-badge-color: var(--bb-success);
}

.badge.bb-badge-light-warning {
  --bb-badge-bg: var(--bb-warning-light);
  --bb-badge-color: var(--bb-warning);
}

.badge.bb-badge-light-danger {
  --bb-badge-bg: var(--bb-danger-light);
  --bb-badge-color: var(--bb-danger);
}

/* -----------------------------
   Outline
----------------------------- */
.badge.bb-badge-outline {
  --bb-badge-bg: transparent;
  background-color: var(--bb-badge-bg);
  border: var(--bb-badge-border-width) solid currentColor;
}

/* outline colors */
.badge.bb-badge-outline.bb-badge-primary {
  --bb-badge-color: var(--bb-primary);
}

.badge.bb-badge-outline.bb-badge-success {
  --bb-badge-color: var(--bb-success);
}

.badge.bb-badge-outline.bb-badge-danger {
  --bb-badge-color: var(--bb-danger);
}

/* -----------------------------
   Interactive (optional)
   If badge is used as <a> or <button>
----------------------------- */
a.badge.bb-badge,
button.badge.bb-badge {
  text-decoration: none;
  cursor: pointer;
}

a.badge.bb-badge[aria-disabled=true],
button.badge.bb-badge:disabled {
  opacity: var(--bb-disabled-opacity, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================================
   Bulbulustur Theme - Chips
   Compact metadata / filter / status pills
   Bootstrap-independent, token-first
===================================== */
.bb-chip {
  --bb-chip-bg: var(--bb-tertiary-bg);
  --bb-chip-color: var(--bb-body-color);
  --bb-chip-border-color: var(--bb-border-color);
  --bb-chip-radius: var(--bb-radius-pill);
  --bb-chip-padding-x: .75rem;
  --bb-chip-padding-y: .35rem;
  --bb-chip-gap: .4rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-line-height: var(--bb-line-height-heading);
  --bb-chip-dot-size: .45rem;
  --bb-chip-icon-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-chip-gap);
  min-height: 1.875rem;
  padding: var(--bb-chip-padding-y) var(--bb-chip-padding-x);
  border: 1px solid var(--bb-chip-border-color);
  border-radius: var(--bb-chip-radius);
  background-color: var(--bb-chip-bg);
  color: var(--bb-chip-color);
  font-size: var(--bb-chip-font-size);
  font-weight: var(--bb-chip-font-weight);
  line-height: var(--bb-chip-line-height);
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}

.bb-chip:hover {
  color: var(--bb-chip-color);
  text-decoration: none;
}

.bb-chip-dot {
  width: var(--bb-chip-dot-size);
  height: var(--bb-chip-dot-size);
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}

.bb-chip .material-symbols-outlined {
  font-size: var(--bb-chip-icon-size);
  line-height: 1;
  color: currentColor;
}

.bb-chip-clickable {
  cursor: pointer;
  transition: var(--bb-transition-colors), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-chip-clickable:hover {
  box-shadow: var(--bb-shadow-xs);
  transform: translateY(-1px);
}

/* Sizes */
.bb-chip-sm {
  --bb-chip-padding-x: .55rem;
  --bb-chip-padding-y: 0.25rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  min-height: 1.55rem;
}

.bb-chip-lg {
  --bb-chip-padding-x: 1rem;
  --bb-chip-padding-y: .45rem;
  --bb-chip-font-size: var(--bb-fs-base);
  min-height: 2.25rem;
}

/* Soft variants */
.bb-chip-primary-soft {
  --bb-chip-bg: var(--bb-primary-light);
  --bb-chip-color: var(--bb-primary);
  --bb-chip-border-color: transparent;
}

.bb-chip-success-soft {
  --bb-chip-bg: var(--bb-success-light);
  --bb-chip-color: var(--bb-success);
  --bb-chip-border-color: transparent;
}

.bb-chip-warning-soft {
  --bb-chip-bg: var(--bb-warning-light);
  --bb-chip-color: var(--bb-warning);
  --bb-chip-border-color: transparent;
}

.bb-chip-danger-soft {
  --bb-chip-bg: var(--bb-danger-light);
  --bb-chip-color: var(--bb-danger);
  --bb-chip-border-color: transparent;
}

.bb-chip-info-soft {
  --bb-chip-bg: var(--bb-info-light);
  --bb-chip-color: var(--bb-info);
  --bb-chip-border-color: transparent;
}

.bb-chip-dark-soft {
  --bb-chip-bg: var(--bb-dark-light);
  --bb-chip-color: var(--bb-dark);
  --bb-chip-border-color: transparent;
}

/* Solid variants */
.bb-chip-primary {
  --bb-chip-bg: var(--bb-primary);
  --bb-chip-color: var(--bb-primary-inverse);
  --bb-chip-border-color: var(--bb-primary);
}

.bb-chip-success {
  --bb-chip-bg: var(--bb-success);
  --bb-chip-color: var(--bb-success-inverse);
  --bb-chip-border-color: var(--bb-success);
}

.bb-chip-warning {
  --bb-chip-bg: var(--bb-warning);
  --bb-chip-color: var(--bb-warning-inverse);
  --bb-chip-border-color: var(--bb-warning);
}

.bb-chip-danger {
  --bb-chip-bg: var(--bb-danger);
  --bb-chip-color: var(--bb-danger-inverse);
  --bb-chip-border-color: var(--bb-danger);
}

.bb-chip-info {
  --bb-chip-bg: var(--bb-info);
  --bb-chip-color: var(--bb-info-inverse);
  --bb-chip-border-color: var(--bb-info);
}

.bb-chip-dark {
  --bb-chip-bg: var(--bb-dark);
  --bb-chip-color: var(--bb-dark-inverse);
  --bb-chip-border-color: var(--bb-dark);
}

/* Outline */
.bb-chip-outline {
  --bb-chip-bg: transparent;
  --bb-chip-color: var(--bb-body-color);
  --bb-chip-border-color: var(--bb-border-color);
}

.bb-chip-outline-success {
  --bb-chip-bg: transparent;
  --bb-chip-color: var(--bb-success);
  --bb-chip-border-color: var(--bb-success);
}

.bb-chip-outline-warning {
  --bb-chip-bg: transparent;
  --bb-chip-color: var(--bb-warning);
  --bb-chip-border-color: var(--bb-warning);
}

.bb-chip-outline-danger {
  --bb-chip-bg: transparent;
  --bb-chip-color: var(--bb-danger);
  --bb-chip-border-color: var(--bb-danger);
}

.bb-chip-outline-info {
  --bb-chip-bg: transparent;
  --bb-chip-color: var(--bb-info);
  --bb-chip-border-color: var(--bb-info);
}

/* =====================================
   Bulbulustur Theme - Breadcrumb (PURE)
   Bootstrap 5 tokens + bb- layer
===================================== */
/* -------------------------------------
   Breadcrumb wrapper
   Spacing lives here, not inside page SCSS.
------------------------------------- */
.bb-breadcrumb-wrap {
  margin: 0;
}

.bb-breadcrumb-wrap-hero {
  margin-bottom: 1.5rem;
}

.bb-breadcrumb-wrap-page {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.bb-breadcrumb-wrap-compact {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.bb-breadcrumb-wrap-spaced {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* -------------------------------------
   Breadcrumb core
------------------------------------- */
.bb-breadcrumb {
  /* -----------------------------------
     Local tokens
  ----------------------------------- */
  --bb-breadcrumb-color: var(--bb-secondary-color);
  --bb-breadcrumb-active-color: var(--bb-emphasis-color);
  --bb-breadcrumb-separator-color: var(--bs-tertiary-color, var(--bb-breadcrumb-color));
  --bb-breadcrumb-font-size: var(--bb-fs-sm);
  --bb-breadcrumb-gap: 0.75rem;
  --bb-breadcrumb-link-hover-color: var(--bb-primary);
  --bb-breadcrumb-focus-ring-width: var(--bb-focus-ring-width, 0.2rem);
  --bb-breadcrumb-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-breadcrumb-focus-ring-opacity: var(--bb-focus-ring-opacity, 0.35);
  --bb-breadcrumb-link-radius: var(--bb-radius-sm, var(--bs-border-radius-sm, 0.35rem));
  --bb-breadcrumb-separator: "/";
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
}
.bb-breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  color: var(--bb-breadcrumb-color);
  font-size: var(--bb-breadcrumb-font-size);
  line-height: var(--bb-line-height-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-breadcrumb .breadcrumb-item a {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--bb-breadcrumb-link-radius);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
.bb-breadcrumb .breadcrumb-item a:hover {
  color: var(--bb-breadcrumb-link-hover-color);
}
.bb-breadcrumb .breadcrumb-item a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-breadcrumb-focus-ring-width) rgba(var(--bb-primary-rgb), var(--bb-breadcrumb-focus-ring-opacity));
  box-shadow: 0 0 0 var(--bb-breadcrumb-focus-ring-width) color-mix(in srgb, var(--bb-breadcrumb-focus-ring-color) calc(var(--bb-breadcrumb-focus-ring-opacity) * 100%), transparent);
}
.bb-breadcrumb .breadcrumb-item.active {
  max-width: none;
  color: var(--bb-breadcrumb-active-color);
  font-weight: var(--bb-fw-medium, 500);
}
.bb-breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bb-breadcrumb-gap);
}
.bb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  flex: 0 0 auto;
  padding-right: var(--bb-breadcrumb-gap);
  color: var(--bb-breadcrumb-separator-color);
  content: var(--bb-breadcrumb-separator);
}

/* -------------------------------------
   Separator variants
------------------------------------- */
.bb-breadcrumb.bb-breadcrumb-dot {
  --bb-breadcrumb-separator: "•";
}
.bb-breadcrumb.bb-breadcrumb-dot .breadcrumb-item + .breadcrumb-item::before {
  font-size: var(--bb-fs-base);
  line-height: 1;
  transform: translateY(-1px);
}

.bb-breadcrumb.bb-breadcrumb-line {
  --bb-breadcrumb-separator: "—";
}
.bb-breadcrumb.bb-breadcrumb-line .breadcrumb-item + .breadcrumb-item::before {
  color: color-mix(in srgb, var(--bb-breadcrumb-separator-color) 60%, transparent);
  font-weight: var(--bb-fw-light);
}

.bb-breadcrumb.bb-breadcrumb-arrow {
  --bb-breadcrumb-separator: "›";
}
.bb-breadcrumb.bb-breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
  color: color-mix(in srgb, var(--bb-breadcrumb-separator-color) 72%, transparent);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-semibold, 600);
  line-height: 1;
  transform: translateY(-1px);
}

/* -------------------------------------
   Size variants
------------------------------------- */
.bb-breadcrumb.bb-breadcrumb-sm {
  --bb-breadcrumb-font-size: var(--bb-fs-xs);
  --bb-breadcrumb-gap: 0.5rem;
}

.bb-breadcrumb.bb-breadcrumb-lg {
  --bb-breadcrumb-font-size: var(--bb-fs-base);
  --bb-breadcrumb-gap: 1rem;
}

/* -------------------------------------
   Surface variants
------------------------------------- */
.bb-breadcrumb.bb-breadcrumb-soft {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 0.75rem;
  background-color: rgba(var(--bb-body-bg-rgb), 0.9);
  background-color: color-mix(in srgb, var(--bb-body-bg) 90%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  overflow-x: auto;
}

/* -------------------------------------
   Chip / pill breadcrumb
------------------------------------- */
.bb-breadcrumb.bb-breadcrumb-chip {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 0.75rem;
  background-color: rgba(var(--bb-body-bg-rgb), 0.92);
  background-color: color-mix(in srgb, var(--bb-body-bg) 92%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  overflow-x: auto;
  --bb-breadcrumb-font-size: var(--bb-fs-xs, 0.8rem);
  --bb-breadcrumb-gap: 0.5rem;
}
.bb-breadcrumb.bb-breadcrumb-chip .breadcrumb-item {
  min-height: 34px;
}
.bb-breadcrumb.bb-breadcrumb-chip .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 0.15rem;
}
.bb-breadcrumb.bb-breadcrumb-chip .breadcrumb-item.active {
  font-weight: var(--bb-fw-semibold, 600);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-breadcrumb {
    --bb-breadcrumb-font-size: var(--bb-fs-xs);
    --bb-breadcrumb-gap: 0.5rem;
  }
  .bb-breadcrumb .breadcrumb-item {
    max-width: 140px;
  }
  .bb-breadcrumb .breadcrumb-item.active {
    max-width: 180px;
  }
  .bb-breadcrumb-wrap-hero {
    margin-bottom: 1rem;
  }
  .bb-breadcrumb-wrap-page {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-breadcrumb .breadcrumb-item {
    max-width: 110px;
  }
  .bb-breadcrumb .breadcrumb-item.active {
    max-width: 150px;
  }
  .bb-breadcrumb.bb-breadcrumb-soft,
  .bb-breadcrumb.bb-breadcrumb-chip {
    width: 100%;
  }
}
/* =====================================
   Bulbulustur Theme - Carousel (PURE)
   Metronic inspired (no copy)
   Bootstrap 5 compatible, bb-* modifiers
   ===================================== */
.bb-carousel {
  /* -----------------------------------
     Local tokens (override-friendly)
  ----------------------------------- */
  --bb-carousel-indicator-size: 8px;
  --bb-carousel-indicator-active-size: 14px;
  --bb-carousel-indicator-gap: 0.5rem;
  /* prefer semantic/text tokens over palette grays */
  --bb-carousel-indicator-bg: var(--bb-border-color);
  --bb-carousel-indicator-active-bg:var(--bb-primary);
  /* bullets */
  --bb-carousel-bullet-w: 28px;
  --bb-carousel-bullet-h: 6px;
  /* overlay controls */
  --bb-carousel-control-size: 44px;
  --bb-carousel-control-radius: 50%;
  --bb-carousel-control-inset: var(--bb-space-4, 1rem);
  --bb-carousel-control-bg-color: var(--bb-dark, var(--bs-black));
  --bb-carousel-control-bg-opacity: 0.35;
  --bb-carousel-control-bg-opacity-hover: 0.55;
  /* focus ring */
  --bb-carousel-focus-ring-width: var(--bb-focus-ring-width, 0.2rem);
  --bb-carousel-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-carousel-focus-ring-opacity: var(--bb-focus-ring-opacity, 0.35);
  /* motion */
  --bb-carousel-transition: 0.2s ease;
  position: relative;
  /* ------------------------------
     Indicators (safe reset)
     (avoid all: unset)
  ------------------------------ */
}
.bb-carousel .carousel-indicators {
  position: static;
  margin: 0;
  padding: var(--bb-space-4, 1rem) 0 0;
  gap: var(--bb-carousel-indicator-gap);
}
.bb-carousel .carousel-indicators [data-bs-target] {
  cursor: pointer;
  /* minimal reset */
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* for a11y */
  border-radius: var(--bb-radius-pill);
}
.bb-carousel {
  /* ------------------------------
     DOTS variant
  ------------------------------ */
}
.bb-carousel.bb-carousel-dots .carousel-indicators [data-bs-target] {
  width: var(--bb-carousel-indicator-active-size);
  height: var(--bb-carousel-indicator-active-size);
}
.bb-carousel.bb-carousel-dots .carousel-indicators [data-bs-target]::after {
  content: "";
  width: var(--bb-carousel-indicator-size);
  height: var(--bb-carousel-indicator-size);
  border-radius: 50%;
  background-color: var(--bb-carousel-indicator-bg);
  transition: width var(--bb-carousel-transition), height var(--bb-carousel-transition), background-color var(--bb-carousel-transition);
}
.bb-carousel.bb-carousel-dots .carousel-indicators [data-bs-target].active::after {
  width: var(--bb-carousel-indicator-active-size);
  height: var(--bb-carousel-indicator-active-size);
  background-color: var(--bb-carousel-indicator-active-bg);
}
.bb-carousel {
  /* ------------------------------
     BULLET / BAR variant
  ------------------------------ */
}
.bb-carousel.bb-carousel-bullets .carousel-indicators [data-bs-target] {
  width: var(--bb-carousel-bullet-w);
  height: var(--bb-carousel-bullet-h);
}
.bb-carousel.bb-carousel-bullets .carousel-indicators [data-bs-target]::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: var(--bb-radius-pill, 999px);
  background-color: var(--bb-carousel-indicator-bg);
  transition: background-color var(--bb-carousel-transition);
}
.bb-carousel.bb-carousel-bullets .carousel-indicators [data-bs-target].active::after {
  background-color: var(--bb-carousel-indicator-active-bg);
}
.bb-carousel {
  /* ------------------------------
     Overlay controls
  ------------------------------ */
}
.bb-carousel.bb-carousel-overlay .carousel-control-prev,
.bb-carousel.bb-carousel-overlay .carousel-control-next {
  width: var(--bb-carousel-control-size);
  height: var(--bb-carousel-control-size);
  top: 50%;
  transform: translateY(-50%);
  border-radius: var(--bb-carousel-control-radius);
  /* rgba yerine token + opacity */
  background-color: color-mix(in srgb, var(--bb-carousel-control-bg-color) calc(var(--bb-carousel-control-bg-opacity) * 100%), transparent);
  opacity: 1;
  transition: background-color var(--bb-carousel-transition), transform var(--bb-carousel-transition);
}
.bb-carousel.bb-carousel-overlay .carousel-control-prev:hover,
.bb-carousel.bb-carousel-overlay .carousel-control-next:hover {
  background-color: color-mix(in srgb, var(--bb-carousel-control-bg-color) calc(var(--bb-carousel-control-bg-opacity-hover) * 100%), transparent);
}
.bb-carousel.bb-carousel-overlay .carousel-control-prev {
  left: var(--bb-carousel-control-inset);
}
.bb-carousel.bb-carousel-overlay .carousel-control-next {
  right: var(--bb-carousel-control-inset);
}
.bb-carousel {
  /* ------------------------------
     Stretch helper
  ------------------------------ */
}
.bb-carousel.bb-carousel-stretch {
  height: 100%;
}
.bb-carousel.bb-carousel-stretch .carousel-inner,
.bb-carousel.bb-carousel-stretch .carousel-item {
  height: 100%;
}
.bb-carousel.bb-carousel-stretch .carousel-item > * {
  height: 100%;
}

/* =====================================
   Bulbulustur Theme - Separator (PURE)
   Token-first | Dark/Light safe
   Root: .bb-separator
   Variants: .is-dashed | .is-dotted | .has-content
   ===================================== */
.bb-separator {
  /* tokens (override-friendly) */
  --bb-separator-border-color: var(--bb-border-color);
  --bb-separator-border-width: var(--bb-border-width, 1px);
  --bb-separator-gap: 1.25rem;
  display: block;
  height: 0;
  border-bottom: var(--bb-separator-border-width) solid var(--bb-separator-border-color);
  opacity: 1;
}

/* line styles */
.bb-separator.is-dashed {
  border-bottom-style: dashed;
}

.bb-separator.is-dotted {
  border-bottom-style: dotted;
}

/* ---------------------------------
   Content separator
--------------------------------- */
.bb-separator.has-content {
  display: flex;
  align-items: center;
  border-bottom: 0;
  text-align: center;
  white-space: nowrap;
}

.bb-separator.has-content::before,
.bb-separator.has-content::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: var(--bb-separator-border-width) solid var(--bb-separator-border-color);
}

.bb-separator.has-content::before {
  margin-right: var(--bb-separator-gap);
}

.bb-separator.has-content::after {
  margin-left: var(--bb-separator-gap);
}

/* dotted/dashed for content lines */
.bb-separator.has-content.is-dotted::before,
.bb-separator.has-content.is-dotted::after {
  border-bottom-style: dotted;
}

.bb-separator.has-content.is-dashed::before,
.bb-separator.has-content.is-dashed::after {
  border-bottom-style: dashed;
}

/* ---------------------------------
   Bootstrap color bridge (optional)
   Works with .border-*
--------------------------------- */
.bb-separator.border-primary {
  --bb-separator-border-color: var(--bb-primary, var(--bb-primary));
}

.bb-separator.border-success {
  --bb-separator-border-color: var(--bs-success, var(--bb-success));
}

.bb-separator.border-danger {
  --bb-separator-border-color: var(--bs-danger, var(--bb-danger));
}

.bb-separator.border-warning {
  --bb-separator-border-color: var(--bs-warning, var(--bb-warning));
}

.bb-separator.border-dark {
  --bb-separator-border-color: var(--bs-dark, var(--bb-dark));
}

.bb-separator.border-secondary {
  --bb-separator-border-color: var(--bs-secondary, var(--bb-secondary));
}

/* =====================================
   Bulbulustur Theme - Overlay (PURE)
   Token-first | Dark/Light safe
   Root: .bb-overlay
   States: .bb-overlay-hover | .bb-overlay-show | .bb-overlay-block
   ===================================== */
.bb-overlay {
  /* -------------------------------------
     Tokens (override-friendly)
  -------------------------------------- */
  /* Safety / scope */
  --bb-overlay-scope-overflow: hidden;
  /* Layer visuals */
  --bb-overlay-bg: color-mix(in srgb, var(--bb-body-color) 35%, transparent);
  --bb-overlay-opacity: 1;
  /* Optional blur */
  --bb-overlay-backdrop-blur: 0px;
  /* Motion */
  --bb-overlay-transition-speed: 250ms;
  --bb-overlay-transition-ease: ease;
  /* Interactions */
  --bb-overlay-block-cursor: wait;
  position: relative; /* scope lock */
  overflow: var(--bb-overlay-scope-overflow);
}

/* Content wrapper */
.bb-overlay-wrapper {
  position: relative;
  z-index: 1;
}

/* Layer */
.bb-overlay-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bb-overlay-bg);
  /* blur (optional) */
  backdrop-filter: blur(var(--bb-overlay-backdrop-blur));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-overlay-transition-speed) var(--bb-overlay-transition-ease), visibility 0ms linear var(--bb-overlay-transition-speed);
  z-index: 2;
  /* default: do not block clicks unless state says so */
  pointer-events: none;
}

/* Hover OR keyboard focus within */
.bb-overlay-hover:hover > .bb-overlay-layer,
.bb-overlay-hover:focus-within > .bb-overlay-layer {
  opacity: var(--bb-overlay-opacity);
  visibility: visible;
}

/* Always visible (show) */
.bb-overlay-show > .bb-overlay-layer {
  opacity: var(--bb-overlay-opacity);
  visibility: visible;
}

/* Blocking variant: blocks interaction + shows layer */
.bb-overlay-block {
  cursor: var(--bb-overlay-block-cursor);
}

.bb-overlay-block > .bb-overlay-layer {
  opacity: var(--bb-overlay-opacity);
  visibility: visible;
  /* true blocking */
  pointer-events: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bb-overlay-layer {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Toasts
   Scope: .toast.bb-toast
   Bootstrap 5 friendly | Token-first
===================================== */
.toast.bb-toast {
  --bb-toast-bg: var(--bb-body-bg);
  --bb-toast-color: var(--bb-body-color);
  --bb-toast-border-color: var(--bb-border-color);
  --bb-toast-radius: var(--bb-radius-lg);
  --bb-toast-shadow: var(--bb-shadow-lg);
  --bb-toast-border-width: var(--bb-border-width, 1px);
  --bb-toast-header-py: 0.75rem;
  --bb-toast-header-px: 1rem;
  --bb-toast-body-p: 1rem;
  --bb-toast-title-font-weight: var(--bb-fw-semibold);
  --bb-toast-title-font-size: var(--bb-fs-sm);
  --bb-toast-meta-color: var(--bb-secondary-color);
  --bb-toast-meta-font-size: var(--bb-fs-xs);
  background-color: var(--bb-toast-bg);
  color: var(--bb-toast-color);
  border: var(--bb-toast-border-width) solid var(--bb-toast-border-color);
  border-radius: var(--bb-toast-radius);
  box-shadow: var(--bb-toast-shadow);
}

.toast.bb-toast .toast-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--bb-toast-header-py) var(--bb-toast-header-px);
  background: transparent;
  color: inherit;
  border-bottom: var(--bb-toast-border-width) solid var(--bb-toast-border-color);
}

.toast.bb-toast .toast-header strong {
  color: inherit;
  font-size: var(--bb-toast-title-font-size);
  font-weight: var(--bb-toast-title-font-weight);
}

.toast.bb-toast .toast-header small {
  color: var(--bb-toast-meta-color);
  font-size: var(--bb-toast-meta-font-size);
}

.toast.bb-toast .toast-header .btn-close {
  margin-left: auto;
  margin-right: 0;
}

.toast.bb-toast .toast-body {
  padding: var(--bb-toast-body-p);
  color: inherit;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Variants
   Usage: <div class="toast bb-toast bb-toast-success">...</div>
------------------------------------- */
.toast.bb-toast-success {
  --bb-toast-bg: var(--bb-success-light);
  --bb-toast-color: var(--bb-success);
  --bb-toast-border-color: var(--bb-success-clarity);
}

.toast.bb-toast-danger {
  --bb-toast-bg: var(--bb-danger-light);
  --bb-toast-color: var(--bb-danger);
  --bb-toast-border-color: var(--bb-danger-clarity);
}

.toast.bb-toast-warning {
  --bb-toast-bg: var(--bb-warning-light);
  --bb-toast-color: var(--bb-warning-inverse);
  --bb-toast-border-color: var(--bb-warning-clarity);
}

.toast.bb-toast-info {
  --bb-toast-bg: var(--bb-info-light);
  --bb-toast-color: var(--bb-info);
  --bb-toast-border-color: var(--bb-info-clarity);
}

.toast.bb-toast-primary {
  --bb-toast-bg: var(--bb-primary-light);
  --bb-toast-color: var(--bb-primary);
  --bb-toast-border-color: var(--bb-primary-clarity);
}

/* -------------------------------------
   Reduced motion
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .toast.bb-toast {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Symbols
   Token-first | Dark/Light safe
   Root: .bb-symbol
   Variants: .is-circle | .is-square
===================================== */
.bb-symbol {
  /* Local tokens */
  --bb-symbol-size: 3.125rem;
  --bb-symbol-radius: var(--bb-radius);
  --bb-symbol-bg: var(--bb-tertiary-bg);
  --bb-symbol-color: var(--bb-body-color);
  --bb-symbol-border-color: var(--bb-border-color);
  --bb-symbol-badge-border-color: var(--bb-body-bg);
  --bb-symbol-badge-border-width: var(--bb-border-width, 1px);
  --bb-symbol-group-overlap: 0.625rem;
  --bb-symbol-hover-raise: 2px;
  --bb-symbol-transition: var(--bb-transition-fast);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--bb-symbol-size);
  height: var(--bb-symbol-size);
  border-radius: var(--bb-symbol-radius);
  overflow: hidden;
}

/* -------------------------------------
   Sizes
------------------------------------- */
.bb-symbol.size-20 {
  --bb-symbol-size: 1.25rem;
}

.bb-symbol.size-25 {
  --bb-symbol-size: 1.5625rem;
}

.bb-symbol.size-30 {
  --bb-symbol-size: 1.875rem;
}

.bb-symbol.size-35 {
  --bb-symbol-size: 2.1875rem;
}

.bb-symbol.size-40 {
  --bb-symbol-size: 2.5rem;
}

.bb-symbol.size-45 {
  --bb-symbol-size: 2.8125rem;
}

.bb-symbol.size-50 {
  --bb-symbol-size: 3.125rem;
}

.bb-symbol.size-60 {
  --bb-symbol-size: 3.75rem;
}

.bb-symbol.size-75 {
  --bb-symbol-size: 4.6875rem;
}

.bb-symbol.size-100 {
  --bb-symbol-size: 6.25rem;
}

.bb-symbol.size-125 {
  --bb-symbol-size: 7.8125rem;
}

.bb-symbol.size-150 {
  --bb-symbol-size: 9.375rem;
}

/* -------------------------------------
   Label
------------------------------------- */
.bb-symbol-label {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bb-fw-semibold);
  color: var(--bb-symbol-color);
  background-color: var(--bb-symbol-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: inherit;
}

/* -------------------------------------
   Image
------------------------------------- */
.bb-symbol > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* -------------------------------------
   Shapes
------------------------------------- */
.bb-symbol.is-circle {
  --bb-symbol-radius: 50%;
}

.bb-symbol.is-square {
  --bb-symbol-radius: var(--bb-radius-none);
}

/* -------------------------------------
   Badge
------------------------------------- */
.bb-symbol-badge {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translate(-50%, -50%);
  border: var(--bb-symbol-badge-border-width) solid var(--bb-symbol-badge-border-color);
  z-index: 1;
}

/* -------------------------------------
   Group
------------------------------------- */
.bb-symbol-group {
  display: inline-flex;
  align-items: center;
}

.bb-symbol-group .bb-symbol {
  margin-left: calc(var(--bb-symbol-group-overlap) * -1);
  transition: transform var(--bb-symbol-transition), z-index var(--bb-symbol-transition);
}

.bb-symbol-group .bb-symbol:hover {
  z-index: 2;
  transform: translateY(calc(var(--bb-symbol-hover-raise) * -1));
}

/* =====================================
   Bulbulustur Theme - Drawer
   Overlay side panel (start/end)
   Bootstrap 5 compatible, bb-* prefixed
===================================== */
.bb-drawer {
  /* Core tokens */
  --bb-drawer-z: var(--bb-z-drawer, 1055);
  --bb-drawer-width: 420px;
  --bb-drawer-bg: var(--bb-body-bg);
  --bb-drawer-color: var(--bb-emphasis-color);
  --bb-drawer-muted-color: var(--bb-secondary-color);
  --bb-drawer-border-color: var(--bb-border-color);
  --bb-drawer-border-width: var(--bb-border-width, 1px);
  --bb-drawer-radius: var(--bb-radius-lg);
  --bb-drawer-padding-x: 1.25rem;
  --bb-drawer-header-padding-y: 1rem;
  --bb-drawer-body-padding-y: 1rem;
  --bb-drawer-transition: var(--bb-transition-normal);
  --bb-drawer-shadow-color: var(--bb-black);
  --bb-drawer-shadow-opacity: 0.28;
  --bb-drawer-shadow:
    0 18px 40px
    color-mix(
      in srgb,
      var(--bb-drawer-shadow-color) calc(var(--bb-drawer-shadow-opacity) * 100%),
      transparent
    );
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--bb-drawer-z);
  display: flex;
  flex-direction: column;
  width: var(--bb-drawer-width);
  max-width: 100%;
  color: var(--bb-drawer-color);
  background-color: var(--bb-drawer-bg);
  border: var(--bb-drawer-border-width) solid var(--bb-drawer-border-color);
  border-radius: var(--bb-drawer-radius);
  box-shadow: var(--bb-drawer-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--bb-drawer-transition), opacity var(--bb-drawer-transition), visibility var(--bb-drawer-transition);
  will-change: transform;
}

.bb-drawer.bb-drawer-end {
  right: 0;
  transform: translateX(102%);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.bb-drawer.bb-drawer-start {
  left: 0;
  transform: translateX(-102%);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.bb-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--bb-drawer-header-padding-y) var(--bb-drawer-padding-x);
  background: transparent;
  border-bottom: var(--bb-drawer-border-width) solid var(--bb-drawer-border-color);
}

.bb-drawer-title {
  margin: 0;
  color: inherit;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Close
------------------------------------- */
.bb-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--bb-radius);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-drawer-close:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--bb-drawer-border-color) 18%, transparent);
}

/* -------------------------------------
   Body
------------------------------------- */
.bb-drawer-body {
  flex: 1 1 auto;
  padding: var(--bb-drawer-body-padding-y) var(--bb-drawer-padding-x);
  overflow: auto;
  color: var(--bb-drawer-color);
}

.bb-drawer-body p {
  color: var(--bb-drawer-muted-color);
}

/* -------------------------------------
   Backdrop
   Usage:
   <div class="bb-drawer-backdrop"></div>
   <div data-bb-drawer-backdrop></div>
------------------------------------- */
.bb-drawer-backdrop,
[data-bb-drawer-backdrop] {
  --bb-drawer-backdrop-z: calc(var(--bb-z-drawer, 1055) - 1);
  --bb-drawer-backdrop-color: var(--bb-overlay-color, var(--bb-black));
  --bb-drawer-backdrop-opacity: var(--bb-overlay-opacity, 0.45);
  --bb-drawer-backdrop-blur: var(--bb-overlay-blur, 0px);
  --bb-drawer-backdrop-transition: var(--bb-transition-normal);
  position: fixed;
  inset: 0;
  z-index: var(--bb-drawer-backdrop-z);
  background-color: color-mix(in srgb, var(--bb-drawer-backdrop-color) calc(var(--bb-drawer-backdrop-opacity) * 100%), transparent);
  backdrop-filter: blur(var(--bb-drawer-backdrop-blur));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--bb-drawer-backdrop-transition), visibility var(--bb-drawer-backdrop-transition);
}

.bb-drawer-backdrop.is-open,
[data-bb-drawer-backdrop].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* -------------------------------------
   Density
------------------------------------- */
[data-bb-density=compact] .bb-drawer {
  --bb-drawer-width: 380px;
  --bb-drawer-padding-x: 1rem;
  --bb-drawer-header-padding-y: 0.85rem;
  --bb-drawer-body-padding-y: 0.85rem;
}

/* =====================================
   Bulbulustur Theme - Lightbox
   Fullscreen backdrop + fixed controls
   Token-first | Light / Navy / Dark safe | PURE
===================================== */
/* =====================================
   Lightbox Tokens - Light
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-lightbox-z: 1090;
  --bb-lightbox-padding: 1.25rem;
  --bb-lightbox-backdrop-bg: color-mix(in srgb, var(--bb-black) 90%, transparent);
  --bb-lightbox-stage-bg: transparent;
  --bb-lightbox-media-bg: var(--bb-body-bg);
  --bb-lightbox-media-radius: var(--bb-radius-2xl);
  --bb-lightbox-media-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 34%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black) 18%, transparent);
  --bb-lightbox-control-size: 2.875rem;
  --bb-lightbox-control-radius: var(--bb-radius-xl);
  --bb-lightbox-control-bg: color-mix(in srgb, var(--bb-body-bg) 90%, transparent);
  --bb-lightbox-control-bg-hover: var(--bb-body-bg);
  --bb-lightbox-control-border-color: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-lightbox-control-border-color-hover: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-lightbox-control-color: var(--bb-emphasis-color);
  --bb-lightbox-control-color-hover: var(--bb-primary);
  --bb-lightbox-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black) 18%, transparent);
  --bb-lightbox-info-bg: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  --bb-lightbox-info-color: var(--bb-emphasis-color);
  --bb-lightbox-info-muted-color: var(--bb-secondary-color);
  --bb-lightbox-info-border-color: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

/* =====================================
   Lightbox Tokens - Navy
===================================== */
html[data-bs-theme=navy] {
  --bb-lightbox-backdrop-bg: color-mix(in srgb, var(--bb-black) 88%, var(--bb-body-bg));
  --bb-lightbox-media-bg: var(--bb-surface-elevated);
  --bb-lightbox-media-radius: var(--bb-radius-2xl);
  --bb-lightbox-media-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 48%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black) 26%, transparent);
  --bb-lightbox-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, transparent);
  --bb-lightbox-control-bg-hover: var(--bb-surface-elevated);
  --bb-lightbox-control-border-color: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-lightbox-control-border-color-hover: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-lightbox-control-color: var(--bb-emphasis-color);
  --bb-lightbox-control-color-hover: var(--bb-primary);
  --bb-lightbox-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black) 34%, transparent);
  --bb-lightbox-info-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, transparent);
  --bb-lightbox-info-color: var(--bb-emphasis-color);
  --bb-lightbox-info-muted-color: var(--bb-secondary-color);
  --bb-lightbox-info-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

/* =====================================
   Lightbox Tokens - Dark
===================================== */
html[data-bs-theme=dark] {
  --bb-lightbox-backdrop-bg: color-mix(in srgb, var(--bb-black) 90%, var(--bb-body-bg));
  --bb-lightbox-media-bg: var(--bb-surface-elevated);
  --bb-lightbox-media-radius: var(--bb-radius-2xl);
  --bb-lightbox-media-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 52%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black) 30%, transparent);
  --bb-lightbox-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, transparent);
  --bb-lightbox-control-bg-hover: var(--bb-surface-elevated);
  --bb-lightbox-control-border-color: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-lightbox-control-border-color-hover: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  --bb-lightbox-control-color: var(--bb-emphasis-color);
  --bb-lightbox-control-color-hover: var(--bb-primary);
  --bb-lightbox-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black) 38%, transparent);
  --bb-lightbox-info-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, transparent);
  --bb-lightbox-info-color: var(--bb-emphasis-color);
  --bb-lightbox-info-muted-color: var(--bb-secondary-color);
  --bb-lightbox-info-border-color: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

/* =====================================
   Root
===================================== */
.bb-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--bb-lightbox-z);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--bb-body-color);
}

.bb-lightbox.is-open {
  display: flex;
}

/* =====================================
   Backdrop
===================================== */
.bb-lightbox-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bb-lightbox-backdrop-bg);
}

/* =====================================
   Stage
===================================== */
.bb-lightbox-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 94vw;
  max-height: 94vh;
  padding: var(--bb-lightbox-padding);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.875rem;
  place-items: center;
  pointer-events: none;
}

.bb-lightbox-media-wrap {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bb-lightbox-media {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(94vh - 5.5rem);
  object-fit: contain;
  background-color: var(--bb-lightbox-media-bg);
  border-radius: var(--bb-lightbox-media-radius);
  box-shadow: var(--bb-lightbox-media-shadow);
  pointer-events: auto;
}

/* =====================================
   Info
===================================== */
.bb-lightbox-info {
  min-width: min(100%, 22rem);
  max-width: min(100%, 44rem);
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-lightbox-info-color);
  background-color: var(--bb-lightbox-info-bg);
  border: var(--bb-border-width) solid var(--bb-lightbox-info-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-lightbox-control-shadow);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  pointer-events: auto;
}

.bb-lightbox-caption {
  min-width: 0;
  overflow: hidden;
  color: var(--bb-lightbox-info-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-lightbox-counter {
  flex: 0 0 auto;
  color: var(--bb-lightbox-info-muted-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* =====================================
   Controls
===================================== */
.bb-lightbox-close,
.bb-lightbox-nav {
  position: absolute;
  z-index: 2;
  width: var(--bb-lightbox-control-size);
  height: var(--bb-lightbox-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-lightbox-control-color);
  background-color: var(--bb-lightbox-control-bg);
  border: var(--bb-border-width) solid var(--bb-lightbox-control-border-color);
  border-radius: var(--bb-lightbox-control-radius);
  box-shadow: var(--bb-lightbox-control-shadow);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  cursor: pointer;
  user-select: none;
  transition: color var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-lightbox-close {
  top: 1.25rem;
  right: 1.25rem;
}

.bb-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.bb-lightbox-nav.is-prev {
  left: 1.25rem;
}

.bb-lightbox-nav.is-next {
  right: 1.25rem;
}

.bb-lightbox-close:hover,
.bb-lightbox-nav:hover {
  color: var(--bb-lightbox-control-color-hover);
  background-color: var(--bb-lightbox-control-bg-hover);
  border-color: var(--bb-lightbox-control-border-color-hover);
}

.bb-lightbox-close:hover {
  transform: translateY(-0.0625rem);
}

.bb-lightbox-nav:hover.is-prev {
  transform: translateY(-50%) translateX(-0.0625rem);
}

.bb-lightbox-nav:hover.is-next {
  transform: translateY(-50%) translateX(0.0625rem);
}

.bb-lightbox-close .material-symbols-outlined,
.bb-lightbox-nav .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Page Lock
===================================== */
body.bb-lightbox-open {
  overflow: hidden;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 767.98px) {
  .bb-lightbox {
    --bb-lightbox-padding: 0.875rem;
    --bb-lightbox-control-size: 2.625rem;
  }
  .bb-lightbox-close {
    top: 0.875rem;
    right: 0.875rem;
  }
  .bb-lightbox-nav.is-prev {
    left: 0.875rem;
  }
  .bb-lightbox-nav.is-next {
    right: 0.875rem;
  }
  .bb-lightbox-info {
    max-width: calc(100vw - 1.75rem);
  }
  .bb-lightbox-media {
    max-height: calc(94vh - 5rem);
  }
}
/* =====================================
   Bulbulustur Theme - CountUp (PURE)
   Lightweight, Bootstrap 5 friendly
   ===================================== */
.bb-countup {
  /* -----------------------------------
     Component tokens (override-friendly)
  ----------------------------------- */
  --bb-countup-bg: var(--bb-body-bg);
  --bb-countup-color: var(--bb-emphasis-color, var(--bb-body-color));
  --bb-countup-muted-color: var(--bb-secondary-color);
  --bb-countup-border-color: var(--bb-border-color);
  --bb-countup-border-width: var(--bb-border-width, 1px);
  --bb-countup-border-style: dashed;
  --bb-countup-shadow: var(--bb-shadow-sm, none);
  --bb-countup-radius: var(--bb-radius-lg, var(--bs-border-radius, 0.75rem));
  --bb-countup-padding-y: 0.75rem;
  --bb-countup-padding-x: 1rem;
  --bb-countup-min-w: 125px;
  --bb-countup-gap: 0.5rem;
  --bb-countup-stack-gap: 0.25rem;
  --bb-countup-number-size: 1.5rem;
  --bb-countup-label-size: 0.9rem;
  --bb-countup-icon-size: 1.25rem;
  --bb-countup-letter-spacing: -0.01em;
  /* Focus ring tokens (for clickable variant) */
  --bb-countup-focus-ring-width: var(--bb-focus-ring-width, 0.2rem);
  --bb-countup-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-countup-focus-ring-opacity: var(--bb-focus-ring-opacity, 0.35);
}

/* -------------------------------------
   Stat box
------------------------------------- */
.bb-countup-stat {
  display: flex;
  flex-direction: column;
  gap: var(--bb-countup-stack-gap);
  min-width: var(--bb-countup-min-w);
  padding: var(--bb-countup-padding-y) var(--bb-countup-padding-x);
  background-color: var(--bb-countup-bg);
  color: var(--bb-countup-color);
  border: var(--bb-countup-border-width) var(--bb-countup-border-style) var(--bb-countup-border-color);
  border-radius: var(--bb-countup-radius);
  box-shadow: var(--bb-countup-shadow);
}

/* Number row */
.bb-countup-number {
  display: flex;
  align-items: center;
  gap: var(--bb-countup-gap);
}

.bb-countup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-countup-icon-size);
  line-height: 1;
  /* inherits color; override by parent if needed */
  color: inherit;
}

/* The animated value */
.bb-countup-value {
  font-size: var(--bb-countup-number-size);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-countup-letter-spacing);
  color: inherit;
}

/* Label */
.bb-countup-label {
  font-size: var(--bb-countup-label-size);
  font-weight: var(--bb-fw-semibold);
  color: var(--bb-countup-muted-color);
}

/* -------------------------------------
   Clickable (opt-in)
   Use: <a class="bb-countup-stat is-clickable">...</a>
------------------------------------- */
.bb-countup-stat.is-clickable {
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  color: var(--bb-countup-color);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.bb-countup-stat.is-clickable:hover {
  transform: translateY(-1px);
}

/* -------------------------------------
   Compact density (optional)
   If root has data-bb-density="compact"
------------------------------------- */
:root[data-bb-density=compact] .bb-countup {
  --bb-countup-padding-y: 0.6rem;
  --bb-countup-padding-x: 0.85rem;
  --bb-countup-number-size: 1.35rem;
  --bb-countup-label-size: 0.85rem;
}

/* -------------------------------------
   Small screens
------------------------------------- */
@media (max-width: 575.98px) {
  .bb-countup-stat {
    min-width: 100%;
  }
}
/* =====================================
   Bulbulustur Theme - Tiny Slider (PURE)
   CSS-only (scroll-snap) | Token-first | Dark/Light safe
   Root: .bb-tiny-slider
   ===================================== */
.bb-tiny-slider {
  /* ---- layout tokens ---- */
  --bb-ts-gap: 1rem;
  --bb-ts-radius: var(--bb-radius, var(--bb-radius));
  --bb-ts-border-color: var(--bb-border-color);
  --bb-ts-shadow: var(--bb-shadow-sm);
  --bb-ts-track-padding-b: 0.25rem;
  /* ---- motion tokens ---- */
  --bb-ts-transition: var(--bb-transition-fast);
  --bb-ts-scroll-behavior: smooth;
  /* ---- slide surface tokens ---- */
  --bb-ts-surface-bg: var(--bb-body-bg);
  /* ---- controls tokens ---- */
  --bb-ts-control-size: 40px;
  --bb-ts-control-radius: var(--bb-radius-pill);
  --bb-ts-control-bg: var(--bb-body-bg);
  --bb-ts-control-color: var(--bb-body-color);
  --bb-ts-control-border: var(--bb-ts-border-color);
  --bb-ts-control-shadow: var(--bb-ts-shadow);
  --bb-ts-controls-padding: 0.5rem;
  --bb-ts-icon-size: 22px;
  /* ---- nav tokens ---- */
  --bb-ts-nav-gap: 0.5rem;
  --bb-ts-nav-mt: 0.75rem;
  --bb-ts-dot-size: 10px;
  --bb-ts-dot-bg: var(--bb-border-color);
  --bb-ts-dot-active-bg:var(--bb-primary);
  --bb-ts-dot-opacity: 0.8;
  /* ---- focus tokens ---- */
  --bb-ts-focus-ring-width: 0.2rem;
  --bb-ts-focus-ring-color: color-mix(in srgb,var(--bb-primary) 35%, transparent);
  position: relative;
}

.bb-ts-viewport {
  overflow: hidden;
  border-radius: var(--bb-ts-radius);
}

.bb-ts-track {
  display: flex;
  gap: var(--bb-ts-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: var(--bb-ts-scroll-behavior);
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--bb-ts-track-padding-b);
  /* hide scrollbar (still scrollable) */
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.bb-ts-track::-webkit-scrollbar {
  display: none;
}

.bb-ts-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 100%;
  position: relative;
}

.bb-ts-slide-inner {
  border: 1px solid var(--bb-ts-border-color);
  border-radius: var(--bb-ts-radius);
  box-shadow: var(--bb-ts-shadow);
  background: var(--bb-ts-surface-bg);
  overflow: hidden;
}

/* Items (attribute-driven) */
.bb-tiny-slider[data-bb-items="2"] .bb-ts-slide {
  width: calc((100% - var(--bb-ts-gap)) / 2);
}

.bb-tiny-slider[data-bb-items="3"] .bb-ts-slide {
  width: calc((100% - var(--bb-ts-gap) * 2) / 3);
}

/* Controls */
.bb-ts-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  padding: var(--bb-ts-controls-padding);
}

.bb-ts-btn {
  pointer-events: auto;
  width: var(--bb-ts-control-size);
  height: var(--bb-ts-control-size);
  border-radius: var(--bb-ts-control-radius);
  border: 1px solid var(--bb-ts-control-border);
  background: var(--bb-ts-control-bg);
  color: var(--bb-ts-control-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bb-ts-control-shadow);
  user-select: none;
  transition: transform var(--bb-ts-transition), opacity var(--bb-ts-transition);
}

.bb-ts-btn:hover {
  transform: scale(1.03);
}

.bb-ts-btn:active {
  transform: scale(0.98);
}

.bb-ts-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.bb-ts-btn .material-symbols-outlined {
  font-size: var(--bb-ts-icon-size);
  line-height: 1;
}

/* Nav dots */
.bb-ts-nav {
  display: flex;
  gap: var(--bb-ts-nav-gap);
  justify-content: center;
  align-items: center;
  margin-top: var(--bb-ts-nav-mt);
}

.bb-ts-dot {
  width: var(--bb-ts-dot-size);
  height: var(--bb-ts-dot-size);
  border-radius: var(--bb-radius-pill);
  border: 0;
  background: var(--bb-ts-dot-bg);
  opacity: var(--bb-ts-dot-opacity);
  transition: transform var(--bb-ts-transition), opacity var(--bb-ts-transition), background-color var(--bb-ts-transition);
}

.bb-ts-dot:hover {
  opacity: 1;
  transform: scale(1.1);
}

.bb-ts-dot.is-active {
  background: var(--bb-ts-dot-active-bg);
  opacity: 1;
  transform: scale(1.15);
}

/* Caption */
.bb-ts-caption {
  --bb-ts-caption-py: 0.9rem;
  --bb-ts-caption-px: 1rem;
  padding: var(--bb-ts-caption-py) var(--bb-ts-caption-px);
  border-top: 1px solid var(--bb-ts-border-color);
}

/* Thumbnails */
.bb-ts-thumbs {
  --bb-ts-thumb-size: 54px;
  --bb-ts-thumb-radius: var(--bb-radius);
  --bb-ts-thumb-border: var(--bb-border-color);
  --bb-ts-thumb-active:var(--bb-primary);
  --bb-ts-thumbs-gap: 0.75rem;
  display: flex;
  gap: var(--bb-ts-thumbs-gap);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.bb-ts-thumb {
  width: var(--bb-ts-thumb-size);
  height: var(--bb-ts-thumb-size);
  padding: 0;
  border-radius: var(--bb-ts-thumb-radius);
  border: 1px solid var(--bb-ts-thumb-border);
  background: var(--bb-ts-surface-bg);
  box-shadow: var(--bb-ts-shadow);
  overflow: hidden;
  transition: transform var(--bb-ts-transition), border-color var(--bb-ts-transition);
}

.bb-ts-thumb:hover {
  transform: scale(1.04);
}

.bb-ts-thumb.is-active {
  border-color: var(--bb-ts-thumb-active);
}

.bb-ts-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--bb-ts-thumb-radius) - 2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bb-tiny-slider {
    --bb-ts-transition: 0s;
    --bb-ts-scroll-behavior: auto;
  }
  .bb-ts-btn,
  .bb-ts-dot,
  .bb-ts-thumb {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Sticky
   JS-free: position sticky
   Token-first | Dark/Light safe
   Root: .bb-sticky
   Variants: .is-end | .is-animate
===================================== */
.bb-sticky {
  --bb-sticky-top: 0;
  --bb-sticky-zindex: var(--bs-sticky-zindex, 1020);
  position: sticky;
  top: var(--bb-sticky-top);
  z-index: var(--bb-sticky-zindex);
  will-change: top;
}

/* -------------------------------------
   Alignment helper
------------------------------------- */
.bb-sticky.is-end {
  margin-left: auto;
}

/* -------------------------------------
   Optional animation hook
------------------------------------- */
.bb-sticky.is-animate {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* -------------------------------------
   Optional state hook
------------------------------------- */
.bb-sticky[data-bb-sticky-state=on] {
  transform: translateY(0);
}

/* -------------------------------------
   Child spacing micro reset
------------------------------------- */
.bb-sticky > :last-child {
  margin-bottom: 0;
}

/* =====================================
   Sticky Top Presets
===================================== */
.bb-sticky-top-0 {
  --bb-sticky-top: 0;
}

.bb-sticky-top-50 {
  --bb-sticky-top: 3.125rem;
}

.bb-sticky-top-75 {
  --bb-sticky-top: 4.6875rem;
}

.bb-sticky-top-100 {
  --bb-sticky-top: 6.25rem;
}

.bb-sticky-top-120 {
  --bb-sticky-top: 7.5rem;
}

.bb-sticky-top-150 {
  --bb-sticky-top: 9.375rem;
}

.bb-sticky-top-200 {
  --bb-sticky-top: 12.5rem;
}

/* =====================================
   Sticky Z-index Presets
===================================== */
.bb-sticky-z-50 {
  --bb-sticky-zindex: 50;
}

.bb-sticky-z-90 {
  --bb-sticky-zindex: 90;
}

.bb-sticky-z-95 {
  --bb-sticky-zindex: 95;
}

.bb-sticky-z-100 {
  --bb-sticky-zindex: 100;
}

.bb-sticky-z-1000 {
  --bb-sticky-zindex: 1000;
}

/* =====================================
   Responsive Top Presets
===================================== */
@media (min-width: 992px) {
  .bb-sticky-top-lg-0 {
    --bb-sticky-top: 0;
  }
  .bb-sticky-top-lg-100 {
    --bb-sticky-top: 6.25rem;
  }
  .bb-sticky-top-lg-200 {
    --bb-sticky-top: 12.5rem;
  }
}
@media (min-width: 1200px) {
  .bb-sticky-top-xl-0 {
    --bb-sticky-top: 0;
  }
  .bb-sticky-top-xl-100 {
    --bb-sticky-top: 6.25rem;
  }
  .bb-sticky-top-xl-200 {
    --bb-sticky-top: 12.5rem;
  }
}
/* =====================================
   Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-sticky.is-animate {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Scroll
   CSS-only custom scrollbar styling
   Optional hover scrollbar behavior
   Token-first | Dark/Light safe
===================================== */
/* -------------------------------------
   Shared base
-------------------------------------- */
.bb-scroll,
.bb-scroll-y,
.bb-scroll-x,
.bb-scroll-x-visible,
.bb-hover-scroll,
.bb-hover-scroll-y,
.bb-hover-scroll-x {
  --bb-scrollbar-size: 10px;
  --bb-scrollbar-radius: var(--bb-radius-pill);
  --bb-scrollbar-track: var(--bb-body-bg);
  --bb-scrollbar-thumb: var(--bb-border-color);
  --bb-scrollbar-thumb-hover: var(--bb-secondary-color);
  --bb-scrollbar-thumb-hidden: transparent;
  --bb-scrollbar-track-hidden: transparent;
  --bb-scrollbar-inset-border: 2px;
  --bb-scroll-focus-radius: var(--bb-radius);
  --bb-scroll-focus-outline-w: 2px;
  --bb-scroll-focus-outline: color-mix(in srgb, var(--bb-primary) 35%, transparent);
  position: relative;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--bb-scrollbar-thumb) var(--bb-scrollbar-track);
  overscroll-behavior: contain;
}

/* -------------------------------------
   Axis helpers
-------------------------------------- */
.bb-scroll,
.bb-scroll-y,
.bb-hover-scroll,
.bb-hover-scroll-y {
  overflow-y: auto;
}

.bb-scroll-x,
.bb-hover-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.bb-scroll-x-visible {
  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------
   WebKit scrollbar base
-------------------------------------- */
.bb-scroll::-webkit-scrollbar,
.bb-scroll-y::-webkit-scrollbar,
.bb-scroll-x::-webkit-scrollbar,
.bb-scroll-x-visible::-webkit-scrollbar,
.bb-hover-scroll::-webkit-scrollbar,
.bb-hover-scroll-y::-webkit-scrollbar,
.bb-hover-scroll-x::-webkit-scrollbar {
  width: var(--bb-scrollbar-size);
  height: var(--bb-scrollbar-size);
}

.bb-scroll::-webkit-scrollbar-track,
.bb-scroll-y::-webkit-scrollbar-track,
.bb-scroll-x::-webkit-scrollbar-track,
.bb-scroll-x-visible::-webkit-scrollbar-track,
.bb-hover-scroll::-webkit-scrollbar-track,
.bb-hover-scroll-y::-webkit-scrollbar-track,
.bb-hover-scroll-x::-webkit-scrollbar-track {
  background: var(--bb-scrollbar-track);
  border-radius: var(--bb-scrollbar-radius);
}

.bb-scroll::-webkit-scrollbar-thumb,
.bb-scroll-y::-webkit-scrollbar-thumb,
.bb-scroll-x::-webkit-scrollbar-thumb,
.bb-scroll-x-visible::-webkit-scrollbar-thumb,
.bb-hover-scroll::-webkit-scrollbar-thumb,
.bb-hover-scroll-y::-webkit-scrollbar-thumb,
.bb-hover-scroll-x::-webkit-scrollbar-thumb {
  background: var(--bb-scrollbar-thumb);
  border-radius: var(--bb-scrollbar-radius);
  border: var(--bb-scrollbar-inset-border) solid var(--bb-scrollbar-track);
}

/* -------------------------------------
   Hover
-------------------------------------- */
.bb-scroll:hover::-webkit-scrollbar-thumb,
.bb-scroll-y:hover::-webkit-scrollbar-thumb,
.bb-scroll-x:hover::-webkit-scrollbar-thumb,
.bb-scroll-x-visible:hover::-webkit-scrollbar-thumb {
  background: var(--bb-scrollbar-thumb-hover);
}

/* -------------------------------------
   Hover Scroll
-------------------------------------- */
.bb-hover-scroll,
.bb-hover-scroll-y,
.bb-hover-scroll-x {
  scrollbar-color: var(--bb-scrollbar-thumb-hidden) var(--bb-scrollbar-track-hidden);
}

.bb-hover-scroll::-webkit-scrollbar-track,
.bb-hover-scroll-y::-webkit-scrollbar-track,
.bb-hover-scroll-x::-webkit-scrollbar-track {
  background: var(--bb-scrollbar-track-hidden);
}

.bb-hover-scroll::-webkit-scrollbar-thumb,
.bb-hover-scroll-y::-webkit-scrollbar-thumb,
.bb-hover-scroll-x::-webkit-scrollbar-thumb {
  background: var(--bb-scrollbar-thumb-hidden);
  border-color: var(--bb-scrollbar-track-hidden);
}

.bb-hover-scroll:hover,
.bb-hover-scroll-y:hover,
.bb-hover-scroll-x:hover {
  scrollbar-color: var(--bb-scrollbar-thumb) var(--bb-scrollbar-track);
}

.bb-hover-scroll:hover::-webkit-scrollbar-track,
.bb-hover-scroll-y:hover::-webkit-scrollbar-track,
.bb-hover-scroll-x:hover::-webkit-scrollbar-track {
  background: var(--bb-scrollbar-track);
}

.bb-hover-scroll:hover::-webkit-scrollbar-thumb,
.bb-hover-scroll-y:hover::-webkit-scrollbar-thumb,
.bb-hover-scroll-x:hover::-webkit-scrollbar-thumb {
  background: var(--bb-scrollbar-thumb-hover);
  border-color: var(--bb-scrollbar-track);
}

/* =====================================
   Bulbulustur Theme - Menu (PURE)
   Bootstrap 5 compatible
   Prefix: bb-
   Supports:
   - Sidebar accordion (down)
   - Topbar dropdown (down)
   - Flyout submenu (right)
   Notes:
   - Click trigger için JS sadece .show toggle eder + aria-expanded günceller
   ===================================== */
.bb-menu {
  /* -------------------------------------
     Tokens (override-friendly)
  -------------------------------------- */
  /* Surfaces */
  --bb-menu-bg: var(--bb-body-bg);
  --bb-menu-border-color: var(--bb-border-color);
  /* Link colors */
  --bb-menu-link-color: var(--bs-secondary-color, var(--bb-body-color));
  --bb-menu-link-hover-color: var(--bb-body-color);
  --bb-menu-link-active-color: var(--bb-primary);
  /* Link backgrounds */
  --bb-menu-link-hover-bg: var(--bb-tertiary-bg);
  --bb-menu-link-active-bg: color-mix(in srgb, var(--bb-primary)12%, transparent);
  --bb-menu-link-here-bg: color-mix(in srgb, var(--bb-primary)10%, transparent);
  /* Typography */
  --bb-menu-link-font-size: var(--bs-body-font-size, 1rem);
  --bb-menu-link-font-weight: var(--bb-fw-medium);
  --bb-menu-link-line-height: 1.4;
  --bb-menu-section-font-size: var(--bb-fs-xs);
  --bb-menu-section-letter-spacing: 0.06em;
  --bb-menu-section-text-transform: uppercase;
  --bb-menu-section-color: var(--bs-secondary-color, var(--bb-body-color));
  --bb-menu-section-opacity: 0.8;
  /* Spacing / radius */
  --bb-menu-gap: 0.25rem;
  --bb-menu-radius: var(--bb-radius-lg);
  --bb-menu-link-radius: var(--bb-radius-lg);
  --bb-menu-link-py: 0.65rem;
  --bb-menu-link-px: 0.9rem;
  /* Icon / bullet */
  --bb-menu-icon-size: 1.15rem;
  --bb-menu-bullet-size: 0.35rem;
  --bb-menu-bullet-color: var(--bs-secondary-color, var(--bb-body-color));
  --bb-menu-bullet-opacity: 0.6;
  --bb-menu-bullet-gap: 0.75rem;
  /* Arrow */
  --bb-menu-arrow-size: 0.5rem;
  --bb-menu-arrow-stroke: 2px;
  --bb-menu-arrow-opacity: 0.7;
  --bb-menu-arrow-rotate: -45deg; /* closed: right-ish */
  --bb-menu-arrow-rotate-open: 45deg; /* open: down-ish */
  /* Submenu (floating) */
  --bb-menu-sub-min-width: 12rem;
  --bb-menu-sub-padding: 0.5rem;
  --bb-menu-sub-radius: var(--bb-menu-radius);
  --bb-menu-sub-offset: 0.5rem;
  --bb-menu-sub-z: 1050;
  --bb-menu-sub-shadow: var(--bb-shadow, var(--bb-shadow-sm, none));
  /* Focus / disabled */
  --bb-menu-focus-ring: var(--bs-focus-ring-box-shadow, 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary)25%, transparent));
  --bb-menu-disabled-opacity: 0.55;
  /* Motion */
  --bb-menu-transition-speed: 150ms;
  --bb-menu-transition-ease: ease;
  /* Accordion */
  --bb-menu-accordion-gap-top: 0.25rem;
  --bb-menu-accordion-speed: 200ms;
  display: inline-flex;
  align-items: stretch;
  gap: var(--bb-menu-gap);
  /* -------------------------------------
     Core structure
  -------------------------------------- */
}
.bb-menu .bb-menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
}
.bb-menu .bb-menu-link {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--bb-menu-link-py) var(--bb-menu-link-px);
  border-radius: var(--bb-menu-link-radius);
  color: var(--bb-menu-link-color);
  text-decoration: none;
  user-select: none;
  font-size: var(--bb-menu-link-font-size);
  font-weight: var(--bb-menu-link-font-weight);
  line-height: var(--bb-menu-link-line-height);
  transition: color var(--bb-menu-transition-speed) var(--bb-menu-transition-ease), background-color var(--bb-menu-transition-speed) var(--bb-menu-transition-ease), transform var(--bb-menu-transition-speed) var(--bb-menu-transition-ease);
}
.bb-menu .bb-menu-link:hover {
  text-decoration: none;
}
.bb-menu {
  /* Disabled states */
}
.bb-menu .bb-menu-link.disabled,
.bb-menu .bb-menu-link[aria-disabled=true],
.bb-menu .bb-menu-item.disabled > .bb-menu-link {
  opacity: var(--bb-menu-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
.bb-menu .bb-menu-icon {
  width: var(--bb-menu-icon-size);
  height: var(--bb-menu-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bb-menu .bb-menu-icon .material-symbols-outlined {
  font-size: var(--bb-menu-icon-size);
  line-height: 1;
}
.bb-menu {
  /* Bullet (resim 2-3 sub item'lar) */
}
.bb-menu .bb-menu-bullet {
  width: var(--bb-menu-bullet-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bb-menu .bb-menu-bullet::before {
  content: "";
  width: var(--bb-menu-bullet-size);
  height: var(--bb-menu-bullet-size);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-menu-bullet-color);
  opacity: var(--bb-menu-bullet-opacity);
}
.bb-menu .bb-menu-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-menu .bb-menu-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bb-menu .bb-menu-arrow {
  flex: 0 0 auto;
  width: var(--bb-menu-arrow-size);
  height: var(--bb-menu-arrow-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bb-menu .bb-menu-arrow::before {
  content: "";
  width: calc(var(--bb-menu-arrow-size) * 0.9);
  height: calc(var(--bb-menu-arrow-size) * 0.9);
  border-right: var(--bb-menu-arrow-stroke) solid currentColor;
  border-bottom: var(--bb-menu-arrow-stroke) solid currentColor;
  transform: rotate(var(--bb-menu-arrow-rotate));
  opacity: var(--bb-menu-arrow-opacity);
  transition: transform var(--bb-menu-transition-speed) var(--bb-menu-transition-ease);
}
.bb-menu {
  /* Arrow rotate when open */
}
.bb-menu .bb-menu-item.show > .bb-menu-link .bb-menu-arrow::before,
.bb-menu .bb-menu-item[aria-expanded=true] > .bb-menu-link .bb-menu-arrow::before {
  transform: rotate(var(--bb-menu-arrow-rotate-open));
}
.bb-menu {
  /* -------------------------------------
     States (hover/active/here)
     Controlled by root helper classes
  -------------------------------------- */
}
.bb-menu.bb-menu-hover-bg .bb-menu-link:hover {
  background-color: var(--bb-menu-link-hover-bg);
  color: var(--bb-menu-link-hover-color);
}
.bb-menu.bb-menu-active-bg .bb-menu-link.active, .bb-menu.bb-menu-active-bg .bb-menu-item.active > .bb-menu-link {
  background-color: var(--bb-menu-link-active-bg);
  color: var(--bb-menu-link-active-color);
}
.bb-menu.bb-menu-here-bg .bb-menu-item.here > .bb-menu-link {
  background-color: var(--bb-menu-link-here-bg);
  color: var(--bb-menu-link-active-color);
}
.bb-menu {
  /* -------------------------------------
     Layout variants
  -------------------------------------- */
}
.bb-menu.bb-menu-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bb-menu.bb-menu-rounded .bb-menu-link {
  border-radius: var(--bb-radius-pill);
}
.bb-menu {
  /* Section label (PAGES gibi) */
}
.bb-menu .bb-menu-section {
  padding: 0.5rem var(--bb-menu-link-px) 0.25rem var(--bb-menu-link-px);
  font-size: var(--bb-menu-section-font-size);
  letter-spacing: var(--bb-menu-section-letter-spacing);
  text-transform: var(--bb-menu-section-text-transform);
  color: var(--bb-menu-section-color);
  opacity: var(--bb-menu-section-opacity);
}
.bb-menu {
  /* Optional separator */
}
.bb-menu .bb-menu-separator {
  height: 1px;
  background-color: var(--bb-menu-border-color);
  opacity: 0.6;
  margin: 0.35rem 0;
}
.bb-menu {
  /* -------------------------------------
     Submenu - Floating (dropdown/flyout)
     Works for topbar (bottom-start) and flyout (right-start)
  -------------------------------------- */
}
.bb-menu .bb-menu-sub {
  display: none;
  position: absolute;
  z-index: var(--bb-menu-sub-z);
  min-width: var(--bb-menu-sub-min-width);
  padding: var(--bb-menu-sub-padding);
  border-radius: var(--bb-menu-sub-radius);
  background: var(--bb-menu-bg);
  border: 1px solid var(--bb-menu-border-color);
  box-shadow: var(--bb-menu-sub-shadow);
}
.bb-menu .bb-menu-sub .bb-menu-item,
.bb-menu .bb-menu-sub .bb-menu-link {
  width: 100%;
}
.bb-menu {
  /* Placement helpers */
}
.bb-menu .bb-menu-sub.bb-menu-sub-dropdown[data-bb-menu-placement=right-start] {
  left: calc(100% + var(--bb-menu-sub-offset));
  top: 0;
}
.bb-menu .bb-menu-sub.bb-menu-sub-dropdown[data-bb-menu-placement=right-end] {
  left: calc(100% + var(--bb-menu-sub-offset));
  top: auto;
  bottom: 0;
}
.bb-menu .bb-menu-sub.bb-menu-sub-dropdown[data-bb-menu-placement=bottom-start] {
  left: 0;
  top: calc(100% + var(--bb-menu-sub-offset));
}
.bb-menu .bb-menu-sub.bb-menu-sub-dropdown[data-bb-menu-placement=bottom-end] {
  left: auto;
  right: 0;
  top: calc(100% + var(--bb-menu-sub-offset));
}
.bb-menu {
  /* Show rules */
}
.bb-menu .bb-menu-item.show > .bb-menu-sub {
  display: block;
}
.bb-menu {
  /* Hover trigger (mouse + keyboard) */
}
.bb-menu .bb-menu-item[data-bb-menu-trigger=hover]:hover > .bb-menu-sub,
.bb-menu .bb-menu-item[data-bb-menu-trigger=hover]:focus-within > .bb-menu-sub {
  display: block;
}
.bb-menu {
  /* -------------------------------------
     Submenu - Accordion (sidebar down-open)
     Markup recommended:
     <div class="bb-menu-sub bb-menu-sub-accordion">
       <div class="bb-menu-sub-content"> ...items... </div>
     </div>
  -------------------------------------- */
}
.bb-menu .bb-menu-sub.bb-menu-sub-accordion {
  position: static;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-top: var(--bb-menu-accordion-gap-top);
  /* Smooth, no "1000px cap" */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--bb-menu-accordion-speed) var(--bb-menu-transition-ease);
}
.bb-menu .bb-menu-sub.bb-menu-sub-accordion > .bb-menu-sub-content {
  overflow: hidden;
  min-height: 0;
  padding: 0.25rem 0 0 0;
}
.bb-menu .bb-menu-item.show > .bb-menu-sub.bb-menu-sub-accordion,
.bb-menu .bb-menu-item[aria-expanded=true] > .bb-menu-sub.bb-menu-sub-accordion {
  grid-template-rows: 1fr;
}
.bb-menu {
  /* Indent for accordion children (resim 3 hissi) */
}
.bb-menu.bb-menu-sub-indention .bb-menu-sub.bb-menu-sub-accordion .bb-menu-link {
  padding-left: calc(var(--bb-menu-link-px) + 1rem);
}
.bb-menu {
  /* -------------------------------------
     Size helpers
  -------------------------------------- */
}
.bb-menu.bb-menu-sm {
  --bb-menu-link-py: 0.5rem;
  --bb-menu-link-px: 0.75rem;
  --bb-menu-icon-size: 1.05rem;
}
.bb-menu.bb-menu-lg {
  --bb-menu-link-py: 0.75rem;
  --bb-menu-link-px: 1rem;
  --bb-menu-icon-size: 1.25rem;
}
.bb-menu {
  /* -------------------------------------
     Reduced motion
  -------------------------------------- */
}
@media (prefers-reduced-motion: reduce) {
  .bb-menu .bb-menu-link,
  .bb-menu .bb-menu-arrow::before,
  .bb-menu .bb-menu-sub.bb-menu-sub-accordion {
    transition: none;
  }
}

/* =====================================
   Bulbulustur Theme - Password Meter
   Bootstrap 5 compatible | bb-* prefixed
   Token-first | Dark/Light safe | PURE
   Root: .bb-password-meter
   States: .is-weak | .is-medium | .is-good | .is-strong
===================================== */
/* Marker: optional JS hook */
.bb-password-meter[data-bb-password-meter] {
  /* no-op */
}

.bb-password-meter {
  /* Input */
  --bb-pwm-input-bg: var(--bb-body-bg);
  --bb-pwm-input-border-color: var(--bb-border-color);
  --bb-pwm-input-border-width: var(--bb-border-width, 1px);
  --bb-pwm-input-focus-border-color: var(--bb-primary);
  --bb-pwm-input-padding-right: 3rem;
  /* Bars */
  --bb-pwm-bar-height: 0.375rem;
  --bb-pwm-bar-radius: var(--bb-radius-pill);
  --bb-pwm-bar-gap: 0.5rem;
  --bb-pwm-bar-bg: var(--bb-border-color);
  --bb-pwm-bar-inactive-opacity: 0.9;
  /* Strength colors */
  --bb-pwm-weak-color: var(--bb-danger);
  --bb-pwm-medium-color: var(--bb-warning);
  --bb-pwm-good-color: var(--bb-info);
  --bb-pwm-strong-color: var(--bb-success);
  /* Toggle */
  --bb-pwm-toggle-size: 2.125rem;
  --bb-pwm-toggle-radius: var(--bb-radius);
  --bb-pwm-toggle-inset-x: 0.5rem;
  --bb-pwm-toggle-icon-size: 1.25rem;
  --bb-pwm-toggle-color: var(--bb-body-color);
  --bb-pwm-toggle-hover-bg: var(--bb-tertiary-bg);
  --bb-pwm-toggle-hover-border-color: var(--bb-border-color);
  /* Motion / opacity */
  --bb-pwm-transition: var(--bb-transition-fast);
  --bb-pwm-hover-opacity: 0.92;
  --bb-pwm-active-opacity: 0.86;
  position: relative;
}

/* -------------------------------------
   Label
------------------------------------- */
.bb-password-meter__label {
  margin-bottom: 0.5rem;
}

/* -------------------------------------
   Input
------------------------------------- */
.bb-password-meter__input-wrap {
  position: relative;
}

.bb-password-meter__input {
  padding-right: var(--bb-pwm-input-padding-right);
  background-color: var(--bb-pwm-input-bg);
  border-color: var(--bb-pwm-input-border-color);
  border-width: var(--bb-pwm-input-border-width);
}

.bb-password-meter__input:focus {
  border-color: var(--bb-pwm-input-focus-border-color);
}

/* -------------------------------------
   Toggle
------------------------------------- */
.bb-password-meter__toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(calc(var(--bb-pwm-toggle-inset-x) * -1), -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-pwm-toggle-size);
  height: var(--bb-pwm-toggle-size);
  color: var(--bb-pwm-toggle-color);
  background: transparent;
  border: var(--bb-border-width, 1px) solid transparent;
  border-radius: var(--bb-pwm-toggle-radius);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--bb-pwm-transition), border-color var(--bb-pwm-transition), opacity var(--bb-pwm-transition);
}

.bb-password-meter__toggle:hover {
  opacity: var(--bb-pwm-hover-opacity);
  border-color: var(--bb-pwm-toggle-hover-border-color);
  background-color: var(--bb-pwm-toggle-hover-bg);
}

.bb-password-meter__toggle:active {
  opacity: var(--bb-pwm-active-opacity);
}

.bb-password-meter__toggle .material-symbols-outlined {
  font-size: var(--bb-pwm-toggle-icon-size);
  line-height: 1;
}

/* -------------------------------------
   Meter
------------------------------------- */
.bb-password-meter__meter {
  display: flex;
  align-items: center;
  gap: var(--bb-pwm-bar-gap);
}

.bb-password-meter__bar {
  flex: 1 1 0;
  height: var(--bb-pwm-bar-height);
  background-color: var(--bb-pwm-bar-bg);
  border-radius: var(--bb-pwm-bar-radius);
  opacity: var(--bb-pwm-bar-inactive-opacity);
  transition: background-color var(--bb-pwm-transition), opacity var(--bb-pwm-transition);
}

.bb-password-meter__bar.is-active {
  opacity: 1;
}

/* -------------------------------------
   Strength states
------------------------------------- */
.bb-password-meter.is-weak .bb-password-meter__bar.is-active {
  background-color: var(--bb-pwm-weak-color);
}

.bb-password-meter.is-medium .bb-password-meter__bar.is-active {
  background-color: var(--bb-pwm-medium-color);
}

.bb-password-meter.is-good .bb-password-meter__bar.is-active {
  background-color: var(--bb-pwm-good-color);
}

.bb-password-meter.is-strong .bb-password-meter__bar.is-active {
  background-color: var(--bb-pwm-strong-color);
}

/* -------------------------------------
   Hint / Score
------------------------------------- */
.bb-password-meter__hint {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-password-meter__score {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-password-meter.is-weak .bb-password-meter__score {
  color: var(--bb-pwm-weak-color);
}

.bb-password-meter.is-medium .bb-password-meter__score {
  color: var(--bb-pwm-medium-color);
}

.bb-password-meter.is-good .bb-password-meter__score {
  color: var(--bb-pwm-good-color);
}

.bb-password-meter.is-strong .bb-password-meter__score {
  color: var(--bb-pwm-strong-color);
}

/* -------------------------------------
   Reduced motion
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-password-meter__toggle,
  .bb-password-meter__bar {
    transition: none;
  }
}
.bb-inputmask {
  /* local tokens (override edilebilir) */
  --bb-inputmask-bg: var(--bb-body-bg);
  --bb-inputmask-border-color: var(--bb-border-color);
  --bb-inputmask-placeholder-color: var(--bb-secondary-color);
  --bb-inputmask-icon-color: var(--bb-secondary-color);
  --bb-inputmask-focus-border-color: var(--bb-primary);
  --bb-inputmask-focus-ring-width: 0.25rem;
  --bb-inputmask-focus-ring-alpha: 0.15;
  --bb-inputmask-hint-margin-top: 0.35rem;
  --bb-inputmask-hint-font-size: (--bb-fs-sm)
  --bb-inputmask-hint-color: var(--bb-secondary-color);
  --bb-inputmask-icon-size: 1.1rem;
  --bb-inputmask-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* Core (input üstünde) */
.form-control.bb-inputmask {
  background-color: var(--bb-inputmask-bg);
  border-color: var(--bb-inputmask-border-color);
  font-variant-numeric: tabular-nums;
}

.form-control.bb-inputmask::placeholder {
  color: var(--bb-inputmask-placeholder-color);
  opacity: 1;
}

.form-control.bb-inputmask:focus {
  border-color: var(--bb-inputmask-focus-border-color);
}

/* Helpers */
.bb-inputmask-monospace {
  font-family: var(--bb-inputmask-font-mono);
  letter-spacing: 0.02em;
}

.bb-inputmask-right {
  text-align: right;
}

/* Optional: input-group addon */
.bb-inputmask-group .bb-inputmask-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-inputmask-icon-color);
  background-color: var(--bb-tertiary-bg);
  border-color: var(--bb-border-color);
}
.bb-inputmask-group .bb-inputmask-addon .material-symbols-outlined {
  font-size: var(--bb-inputmask-icon-size);
  line-height: 1;
}

/* Hint text under masked inputs */
.bb-inputmask-hint {
  margin-top: var(--bb-inputmask-hint-margin-top);
  font-size: var(--bb-inputmask-hint-font-size);
  color: var(--bb-inputmask-hint-color);
}

/* =====================================
   Bulbulustur Theme - Forms
   Bootstrap 5 base classes preserved
   Token-first | Global premium form object system | PURE

   Layer:
   components/_forms.scss

   Rule:
   - Forms consume theme tokens.
   - Forms do not create global theme colors.
   - Light / navy / dark form tuning stays here because form is reusable.
===================================== */
:root,
html[data-bs-theme=light] {
  /* -------------------------------------------------------
     Form philosophy
     Label bilgi hiyerarşisini taşır.
     Input sadece verinin yatağıdır.
     Input label'dan daha siyah, daha etli ve daha baskın görünmez.
  ------------------------------------------------------- */
  /* Label */
  --bb-form-label-color: color-mix(in srgb, var(--bb-emphasis-color) 78%, var(--bb-secondary-color));
  --bb-form-label-font-size: var(--bb-fs-sm);
  --bb-form-label-font-weight: var(--bb-fw-semibold);
  --bb-form-label-line-height: 1.3;
  --bb-form-label-margin-bottom: 0.48rem;
  /* Form Control */
  --bb-form-control-bg: color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-tertiary-bg));
  --bb-form-control-bg-hover: color-mix(in srgb, var(--bb-body-bg) 97%, var(--bb-primary));
  --bb-form-control-bg-focus: var(--bb-body-bg);
  --bb-form-control-color: color-mix(in srgb, var(--bb-emphasis-color) 76%, var(--bb-secondary-color));
  --bb-form-control-color-hover: var(--bb-emphasis-color);
  --bb-form-control-color-focus: var(--bb-emphasis-color);
  --bb-form-control-placeholder-color: color-mix(in srgb, var(--bb-secondary-color) 58%, transparent);
  --bb-form-control-border-color: color-mix(in srgb, var(--bb-border-color) 56%, transparent);
  --bb-form-control-border-hover-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-form-control-border-focus-color: color-mix(in srgb, var(--bb-primary) 56%, var(--bb-border-color));
  --bb-form-control-border-width: var(--bb-border-width);
  --bb-form-control-radius: var(--bb-radius);
  --bb-form-control-min-height: 3rem;
  --bb-form-control-padding-y: 0.72rem;
  --bb-form-control-padding-x: 0.95rem;
  --bb-form-control-font-size: var(--bb-fs-base);
  --bb-form-control-font-weight: var(--bb-fw-medium);
  --bb-form-control-line-height: var(--bb-line-height-base);
  --bb-form-control-box-shadow: none;
  --bb-form-control-focus-box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-primary) 9%, transparent);
  --bb-form-control-transition:
    color var(--bb-transition-fast),
    border-color var(--bb-transition-fast),
    background-color var(--bb-transition-fast),
    box-shadow var(--bb-transition-fast);
  /* Sizes */
  --bb-form-control-sm-min-height: 2.55rem;
  --bb-form-control-sm-padding-y: 0.56rem;
  --bb-form-control-sm-padding-x: 0.8rem;
  --bb-form-control-sm-font-size: var(--bb-fs-sm);
  --bb-form-control-lg-min-height: 3.35rem;
  --bb-form-control-lg-padding-y: 0.82rem;
  --bb-form-control-lg-padding-x: 1.05rem;
  --bb-form-control-lg-font-size: var(--bb-fs-base);
  /* Solid Variant */
  --bb-form-control-solid-bg: color-mix(in srgb, var(--bb-body-bg) 90%, var(--bb-tertiary-bg));
  --bb-form-control-solid-bg-hover: color-mix(in srgb, var(--bb-body-bg) 95%, var(--bb-tertiary-bg));
  --bb-form-control-solid-border-color: color-mix(in srgb, var(--bb-border-color) 42%, transparent);
  /* Transparent Variant */
  --bb-form-control-transparent-bg: transparent;
  --bb-form-control-transparent-border-color: transparent;
  /* Flush Variant */
  --bb-form-control-flush-border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  /* Disabled / Readonly */
  --bb-form-control-disabled-bg: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-form-control-disabled-color: color-mix(in srgb, var(--bb-secondary-color) 72%, transparent);
  --bb-form-control-disabled-border-color: color-mix(in srgb, var(--bb-border-color) 46%, transparent);
  --bb-form-control-readonly-bg: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  /* Validation */
  --bb-form-control-valid-border-color: color-mix(in srgb, var(--bb-success) 58%, var(--bb-border-color));
  --bb-form-control-valid-focus-border-color: var(--bb-success);
  --bb-form-control-valid-focus-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-success) 10%, transparent);
  --bb-form-control-invalid-border-color: color-mix(in srgb, var(--bb-danger) 58%, var(--bb-border-color));
  --bb-form-control-invalid-focus-border-color: var(--bb-danger);
  --bb-form-control-invalid-focus-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-danger) 10%, transparent);
  --bb-form-validation-font-size: var(--bb-fs-xs);
  --bb-form-validation-line-height: 1.4;
  /* Required */
  --bb-form-required-color: var(--bb-danger);
  --bb-form-required-size: 0.85em;
  /* Checks / Radios / Switch */
  --bb-form-check-solid-bg: color-mix(in srgb, var(--bb-body-bg) 90%, var(--bb-tertiary-bg));
  --bb-form-check-border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  --bb-form-check-focus-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-primary) 9%, transparent);
  /* Image Check */
  --bb-form-check-image-radius: var(--bb-radius-lg);
  --bb-form-check-image-border-color: var(--bb-form-control-border-color);
  --bb-form-check-image-shadow: var(--bb-shadow-sm);
  --bb-form-check-image-padding: var(--bb-space-4);
  --bb-form-check-image-gap: var(--bb-space-4);
  /* Helper */
  --bb-form-text-color: var(--bb-secondary-color);
  --bb-form-text-font-size: var(--bb-fs-sm);
  --bb-form-text-line-height: var(--bb-line-height-base);
}

/* -------------------------------------------------------
   Navy Mode Adjustments
   Navy mode'da inputlar soft lacivert atmosferle uyumlu kalır.
------------------------------------------------------- */
html[data-bs-theme=navy] {
  --bb-form-control-bg: color-mix(in srgb, var(--bb-body-bg) 84%, var(--bb-tertiary-bg));
  --bb-form-control-bg-hover: color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-tertiary-bg));
  --bb-form-control-bg-focus: color-mix(in srgb, var(--bb-body-bg) 90%, var(--bb-tertiary-bg));
  --bb-form-control-color: color-mix(in srgb, var(--bb-emphasis-color) 82%, var(--bb-secondary-color));
  --bb-form-control-color-hover: var(--bb-emphasis-color);
  --bb-form-control-color-focus: var(--bb-emphasis-color);
  --bb-form-control-placeholder-color: color-mix(in srgb, var(--bb-secondary-color) 62%, transparent);
  --bb-form-control-border-color: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-form-control-border-hover-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
  --bb-form-control-border-focus-color: color-mix(in srgb, var(--bb-primary) 58%, var(--bb-border-color));
  --bb-form-control-focus-box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-primary) 11%, transparent);
  --bb-form-label-color: color-mix(in srgb, var(--bb-emphasis-color) 82%, var(--bb-secondary-color));
  --bb-form-control-solid-bg: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-tertiary-bg));
  --bb-form-control-solid-bg-hover: color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-tertiary-bg));
  --bb-form-control-solid-border-color: color-mix(in srgb, var(--bb-border-color) 48%, transparent);
  --bb-form-control-disabled-bg: color-mix(in srgb, var(--bb-body-bg) 70%, var(--bb-tertiary-bg));
  --bb-form-control-disabled-color: color-mix(in srgb, var(--bb-secondary-color) 62%, transparent);
  --bb-form-control-disabled-border-color: color-mix(in srgb, var(--bb-border-color) 42%, transparent);
  --bb-form-control-readonly-bg: color-mix(in srgb, var(--bb-body-bg) 74%, var(--bb-tertiary-bg));
  --bb-form-check-solid-bg: color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-tertiary-bg));
  --bb-form-check-border-color: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-form-check-focus-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-primary) 11%, transparent);
}

/* -------------------------------------------------------
   Dark Mode Adjustments
   Dark mode'da inputlar açık kutu gibi bağırmaz.
   Yine de body surface ile uyumlu, sessiz form yüzeyi kullanılır.
------------------------------------------------------- */
html[data-bs-theme=dark] {
  --bb-form-control-bg: color-mix(in srgb, var(--bb-body-bg) 88%, var(--bb-tertiary-bg));
  --bb-form-control-bg-hover: color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-tertiary-bg));
  --bb-form-control-bg-focus: color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-tertiary-bg));
  --bb-form-control-color: color-mix(in srgb, var(--bb-emphasis-color) 82%, var(--bb-secondary-color));
  --bb-form-control-color-hover: var(--bb-emphasis-color);
  --bb-form-control-color-focus: var(--bb-emphasis-color);
  --bb-form-control-placeholder-color: color-mix(in srgb, var(--bb-secondary-color) 62%, transparent);
  --bb-form-control-border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-form-control-border-hover-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
  --bb-form-control-border-focus-color: color-mix(in srgb, var(--bb-primary) 58%, var(--bb-border-color));
  --bb-form-control-focus-box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-form-label-color: color-mix(in srgb, var(--bb-emphasis-color) 82%, var(--bb-secondary-color));
  --bb-form-control-solid-bg: color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-tertiary-bg));
  --bb-form-control-solid-bg-hover: color-mix(in srgb, var(--bb-body-bg) 84%, var(--bb-tertiary-bg));
  --bb-form-control-solid-border-color: color-mix(in srgb, var(--bb-border-color) 48%, transparent);
  --bb-form-control-disabled-bg: color-mix(in srgb, var(--bb-body-bg) 72%, var(--bb-tertiary-bg));
  --bb-form-control-disabled-color: color-mix(in srgb, var(--bb-secondary-color) 62%, transparent);
  --bb-form-control-disabled-border-color: color-mix(in srgb, var(--bb-border-color) 42%, transparent);
  --bb-form-control-readonly-bg: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-tertiary-bg));
  --bb-form-check-solid-bg: color-mix(in srgb, var(--bb-body-bg) 80%, var(--bb-tertiary-bg));
  --bb-form-check-border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-form-check-focus-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

/* -------------------------------------------------------
   Label Base
------------------------------------------------------- */
.form-label {
  margin-bottom: var(--bb-form-label-margin-bottom);
  color: var(--bb-form-label-color);
  font-size: var(--bb-form-label-font-size);
  font-weight: var(--bb-form-label-font-weight);
  line-height: var(--bb-form-label-line-height);
}

.form-label .text-danger,
label .text-danger {
  margin-left: 0.12rem;
  color: var(--bb-form-required-color) !important;
}

/* -------------------------------------------------------
   Form Control Base
------------------------------------------------------- */
.form-control,
.form-select {
  min-height: var(--bb-form-control-min-height);
  padding: var(--bb-form-control-padding-y) var(--bb-form-control-padding-x);
  color: var(--bb-form-control-color);
  background-color: var(--bb-form-control-bg);
  border-color: var(--bb-form-control-border-color);
  border-width: var(--bb-form-control-border-width);
  border-radius: var(--bb-form-control-radius);
  font-size: var(--bb-form-control-font-size);
  font-weight: var(--bb-form-control-font-weight);
  line-height: var(--bb-form-control-line-height);
  box-shadow: var(--bb-form-control-box-shadow);
  transition: var(--bb-form-control-transition);
}

.form-control:hover,
.form-select:hover {
  color: var(--bb-form-control-color-hover);
  background-color: var(--bb-form-control-bg-hover);
  border-color: var(--bb-form-control-border-hover-color);
}

.form-control:focus,
.form-select:focus {
  color: var(--bb-form-control-color-focus);
  background-color: var(--bb-form-control-bg-focus);
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: var(--bb-form-control-focus-box-shadow);
}

.form-control::placeholder {
  color: var(--bb-form-control-placeholder-color);
  font-weight: var(--bb-fw-medium);
  opacity: 1;
}

.form-select {
  cursor: pointer;
}

textarea.form-control {
  min-height: 8.25rem;
  resize: vertical;
}

/* -------------------------------------------------------
   Form Control Sizes
------------------------------------------------------- */
.form-control-sm,
.form-select-sm {
  min-height: var(--bb-form-control-sm-min-height);
  padding: var(--bb-form-control-sm-padding-y) var(--bb-form-control-sm-padding-x);
  font-size: var(--bb-form-control-sm-font-size);
}

.form-control-lg,
.form-select-lg {
  min-height: var(--bb-form-control-lg-min-height);
  padding: var(--bb-form-control-lg-padding-y) var(--bb-form-control-lg-padding-x);
  font-size: var(--bb-form-control-lg-font-size);
}

/* -------------------------------------------------------
   Solid Variant
------------------------------------------------------- */
.form-control.form-control-solid,
.form-select.form-select-solid {
  background-color: var(--bb-form-control-solid-bg);
  border-color: var(--bb-form-control-solid-border-color);
}

.form-control.form-control-solid:hover,
.form-select.form-select-solid:hover {
  background-color: var(--bb-form-control-solid-bg-hover);
  border-color: var(--bb-form-control-border-hover-color);
}

.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
  color: var(--bb-form-control-color-focus);
  background-color: var(--bb-form-control-bg-focus);
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: var(--bb-form-control-focus-box-shadow);
}

/* -------------------------------------------------------
   Transparent Variant
------------------------------------------------------- */
.form-control.form-control-transparent,
.form-select.form-select-transparent {
  background-color: var(--bb-form-control-transparent-bg);
  border-color: var(--bb-form-control-transparent-border-color);
  box-shadow: none;
}

.form-control.form-control-transparent:hover,
.form-select.form-select-transparent:hover {
  background-color: var(--bb-form-control-transparent-bg);
  border-color: var(--bb-form-control-transparent-border-color);
}

.form-control.form-control-transparent:focus,
.form-select.form-select-transparent:focus {
  background-color: var(--bb-form-control-transparent-bg);
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: none;
}

/* -------------------------------------------------------
   Flush Variant
------------------------------------------------------- */
.form-control.form-control-flush,
.form-select.form-select-flush {
  min-height: auto;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  border: 0;
  border-bottom: var(--bb-form-control-border-width) solid var(--bb-form-control-flush-border-color);
  border-radius: var(--bb-radius-none);
  box-shadow: none;
}

.form-control.form-control-flush:hover,
.form-select.form-select-flush:hover {
  background-color: transparent;
  border-bottom-color: var(--bb-form-control-border-hover-color);
}

.form-control.form-control-flush:focus,
.form-select.form-select-flush:focus {
  background-color: transparent;
  border-bottom-color: var(--bb-form-control-border-focus-color);
  box-shadow: none;
}

/* -------------------------------------------------------
   Disabled / Readonly
------------------------------------------------------- */
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  color: var(--bb-form-control-disabled-color);
  background-color: var(--bb-form-control-disabled-bg);
  border-color: var(--bb-form-control-disabled-border-color);
  opacity: var(--bb-disabled-opacity);
  cursor: not-allowed;
}

.form-control:read-only:not(:disabled) {
  background-color: var(--bb-form-control-readonly-bg);
}

/* -------------------------------------------------------
   Validation
------------------------------------------------------- */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--bb-form-control-valid-border-color);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--bb-form-control-valid-focus-border-color);
  box-shadow: var(--bb-form-control-valid-focus-shadow);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bb-form-control-invalid-border-color);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--bb-form-control-invalid-focus-border-color);
  box-shadow: var(--bb-form-control-invalid-focus-shadow);
}

.field-validation-error,
.text-danger.small {
  font-size: var(--bb-form-validation-font-size);
  line-height: var(--bb-form-validation-line-height);
}

/* -------------------------------------------------------
   Form Text / Help
------------------------------------------------------- */
.form-text {
  color: var(--bb-form-text-color);
  font-size: var(--bb-form-text-font-size);
  line-height: var(--bb-form-text-line-height);
}

/* -------------------------------------------------------
   Required Indicator
------------------------------------------------------- */
.form-label.required::after,
label.required::after {
  content: "*";
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--bb-form-required-color);
  font-size: var(--bb-form-required-size);
  line-height: 1;
}

.required:not(.form-label):not(label)::after {
  content: "*";
  display: inline-block;
  color: var(--bb-form-required-color);
  font-size: var(--bb-form-required-size);
  line-height: 1;
}

.required.position-absolute {
  pointer-events: none;
}

.required.position-absolute::after {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -35%);
}

/* -------------------------------------------------------
   Input Group Compatibility
   Uses Bootstrap structure:
   .input-group.bb-input-group > .input-group-text + .form-control
------------------------------------------------------- */
.input-group .form-control,
.input-group .form-select {
  min-height: var(--bb-form-control-min-height);
}

.input-group-text {
  color: color-mix(in srgb, var(--bb-secondary-color) 84%, var(--bb-emphasis-color));
  background-color: var(--bb-form-control-bg);
  border-color: var(--bb-form-control-border-color);
  border-width: var(--bb-form-control-border-width);
  border-radius: var(--bb-form-control-radius);
  box-shadow: none;
  transition: color var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-form-control-bg-focus);
  border-color: var(--bb-form-control-border-focus-color);
}

/* -------------------------------------------------------
   Checks / Radios
------------------------------------------------------- */
.form-check.form-check-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
  padding-left: 0;
}

.form-check.form-check-custom .form-check-input {
  float: none;
  margin-top: 0;
  margin-left: 0;
}

.form-check.form-check-custom .form-check-label {
  margin: 0;
  cursor: pointer;
}

.form-check-input {
  border-color: var(--bb-form-check-border-color);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: var(--bb-form-check-focus-shadow);
}

.form-check.form-check-solid .form-check-input {
  background-color: var(--bb-form-check-solid-bg);
  border-color: transparent;
}

.form-check.form-check-solid .form-check-input:focus {
  border-color: var(--bb-form-control-border-focus-color);
}

.form-check.form-check-solid .form-check-input:checked {
  border-color: transparent;
}

/* -------------------------------------------------------
   Check Color Variants
------------------------------------------------------- */
.form-check.form-check-success .form-check-input:checked {
  background-color: var(--bb-success);
  border-color: var(--bb-success);
}

.form-check.form-check-danger .form-check-input:checked {
  background-color: var(--bb-danger);
  border-color: var(--bb-danger);
}

.form-check.form-check-warning .form-check-input:checked {
  background-color: var(--bb-warning);
  border-color: var(--bb-warning);
}

.form-check.form-check-info .form-check-input:checked {
  background-color: var(--bb-info);
  border-color: var(--bb-info);
}

.form-check.form-check-primary .form-check-input:checked {
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

/* -------------------------------------------------------
   Check Sizes
------------------------------------------------------- */
.form-check.form-check-sm .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
}

.form-check.form-check-lg .form-check-input {
  width: 1.45rem;
  height: 1.45rem;
}

/* -------------------------------------------------------
   Switch Extras
------------------------------------------------------- */
.form-switch.form-check-custom {
  gap: 0.75rem;
}

.form-switch.form-check-solid .form-check-input {
  background-color: var(--bb-form-check-solid-bg);
  border-color: transparent;
}

.form-switch.form-check-solid .form-check-input:focus {
  border-color: var(--bb-form-control-border-focus-color);
}

.form-switch.form-check-success .form-check-input:checked {
  background-color: var(--bb-success);
  border-color: var(--bb-success);
}

.form-switch.form-check-danger .form-check-input:checked {
  background-color: var(--bb-danger);
  border-color: var(--bb-danger);
}

.form-switch.form-check-warning .form-check-input:checked {
  background-color: var(--bb-warning);
  border-color: var(--bb-warning);
}

.form-switch.form-check-info .form-check-input:checked {
  background-color: var(--bb-info);
  border-color: var(--bb-info);
}

.form-switch.form-check-primary .form-check-input:checked {
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

/* -------------------------------------------------------
   Image Check
------------------------------------------------------- */
.form-check-image {
  display: block;
  padding: var(--bb-form-check-image-padding);
  cursor: pointer;
  background-color: var(--bb-form-control-bg);
  border: var(--bb-form-control-border-width) solid var(--bb-form-check-image-border-color);
  border-radius: var(--bb-form-check-image-radius);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.form-check-image .form-check-wrapper {
  margin-bottom: var(--bb-form-check-image-gap);
  overflow: hidden;
  border-radius: calc(var(--bb-form-check-image-radius) - var(--bb-space-2));
}

.form-check-image .form-check-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.form-check-image:focus-within {
  border-color: var(--bb-form-control-border-focus-color);
}

.form-check-image.active {
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: var(--bb-form-check-image-shadow);
  transform: translateY(-1px);
}

/* -------------------------------------------------------
   Reduced Motion
------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-select,
  .input-group-text,
  .form-check-image {
    transition: none;
  }
}
:root {
  /* label tokens */
  --bb-form-floating-label-color: var(--bb-secondary-color);
  --bb-form-floating-label-bg: var(--bb-body-bg);
  --bb-form-floating-label-padding-x: 0.25rem;
  --bb-form-floating-label-radius: var(--bb-radius-sm, var(--bs-border-radius-sm, 0.4rem));
  /* optional */
  --bb-form-floating-disabled-opacity: 0.75;
}

/* -------------------------------------
   Core label (default state)
------------------------------------- */
.form-floating > label {
  color: var(--bb-form-floating-label-color);
  background: transparent;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

/* -------------------------------------
   Chip background ONLY when floated
   - height/width reset: 100% hissini kırar
------------------------------------- */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  height: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  background-color: var(--bb-form-floating-label-bg);
  border-radius: var(--bb-form-floating-label-radius);
  padding-left: var(--bb-form-floating-label-padding-x);
  padding-right: var(--bb-form-floating-label-padding-x);
}

/* -------------------------------------
   Solid style compatibility
------------------------------------- */
.form-floating > .form-control.form-control-solid:focus ~ label,
.form-floating > .form-control.form-control-solid:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control.form-control-solid:focus ~ label,
.form-floating > textarea.form-control.form-control-solid:not(:placeholder-shown) ~ label,
.form-floating > .form-select.form-select-solid ~ label {
  background-color: var(--bb-form-control-solid-bg, var(--bb-form-floating-label-bg));
}

/* -------------------------------------
   Transparent + Flush style compatibility
------------------------------------- */
.form-floating > .form-control.form-control-transparent:focus ~ label,
.form-floating > .form-control.form-control-transparent:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control.form-control-transparent:focus ~ label,
.form-floating > textarea.form-control.form-control-transparent:not(:placeholder-shown) ~ label,
.form-floating > .form-select.form-select-transparent ~ label,
.form-floating > .form-control.form-control-flush:focus ~ label,
.form-floating > .form-control.form-control-flush:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control.form-control-flush:focus ~ label,
.form-floating > textarea.form-control.form-control-flush:not(:placeholder-shown) ~ label,
.form-floating > .form-select.form-select-flush ~ label {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  border-radius: var(--bb-radius-none);
}

/* -------------------------------------
   Validation: label follows input state
------------------------------------- */
.form-floating > .form-control.is-valid ~ label,
.form-floating > .form-select.is-valid ~ label,
.form-floating > textarea.form-control.is-valid ~ label {
  color: var(--bb-success);
}

.form-floating > .form-control.is-invalid ~ label,
.form-floating > .form-select.is-invalid ~ label,
.form-floating > textarea.form-control.is-invalid ~ label {
  color: var(--bb-danger);
}

/* -------------------------------------
   Disabled: subtle but readable
------------------------------------- */
.form-floating > .form-control:disabled ~ label,
.form-floating > .form-select:disabled ~ label,
.form-floating > textarea.form-control:disabled ~ label {
  opacity: var(--bb-form-floating-disabled-opacity);
}

/* -------------------------------------
   Optional: autofill edge-case
   (bazı tarayıcılarda placeholder-shown şaşabiliyor)
------------------------------------- */
.form-floating > .form-control:-webkit-autofill ~ label,
.form-floating > textarea.form-control:-webkit-autofill ~ label {
  height: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  background-color: var(--bb-form-floating-label-bg);
  border-radius: var(--bb-form-floating-label-radius);
  padding-left: var(--bb-form-floating-label-padding-x);
  padding-right: var(--bb-form-floating-label-padding-x);
}

/* =====================================
   Bulbulustur Theme - Ribbons (PURE)
   Bootstrap 5 base class'lar korunur.
   Token-first | Dark/Light safe
   Root: .bb-ribbon
   Variants: start/end, top/bottom, vertical, clip, triangle
===================================== */
.bb-ribbon {
  /* container, usually card-header */
  position: relative;
  overflow: hidden;
  /* -------------------------------------
     Tokens
  ------------------------------------- */
  --bb-ribbon-gap: 0.5rem;
  --bb-ribbon-label-padding-y: 0.35rem;
  --bb-ribbon-label-padding-x: 0.75rem;
  --bb-ribbon-label-font-size: var(--bb-fs-xs);
  --bb-ribbon-label-font-weight: var(--bb-fw-semibold);
  --bb-ribbon-label-letter-spacing: 0.02em;
  --bb-ribbon-label-radius: var(--bb-radius);
  --bb-ribbon-label-bg: var(--bb-primary);
  --bb-ribbon-label-color: var(--bb-primary-inverse);
  --bb-ribbon-offset-x: 1rem;
  --bb-ribbon-offset-y: 0.65rem;
  /* Clip / vertical */
  --bb-ribbon-clip-size: 0.55rem;
  --bb-ribbon-clip-radius: var(--bb-radius-sm);
  --bb-ribbon-vertical-w: 2.25rem;
  --bb-ribbon-vertical-h: 2.75rem;
  /* Triangle */
  --bb-ribbon-triangle-size: 2.75rem;
  --bb-ribbon-triangle-color: currentColor;
  /* Cut shadow tone
     Fallback first, modern color-mix second.
  */
  --bb-ribbon-cut-bg: rgba(var(--bb-body-color-rgb), 0.12);
  --bb-ribbon-cut-bg: color-mix(in srgb, var(--bb-body-color) 12%, transparent);
  /* Inner strip */
  --bb-ribbon-inner-opacity: 0.25;
  /* Icon */
  --bb-ribbon-icon-size: 2rem;
  --bb-ribbon-icon-color: var(--bb-ribbon-label-color);
  --bb-ribbon-icon-inset: 0.35rem;
}

/* -------------------------------------
   Label
------------------------------------- */
.bb-ribbon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--bb-ribbon-label-padding-y) var(--bb-ribbon-label-padding-x);
  color: var(--bb-ribbon-label-color);
  background-color: var(--bb-ribbon-label-bg);
  border-radius: var(--bb-ribbon-label-radius);
  font-size: var(--bb-ribbon-label-font-size);
  font-weight: var(--bb-ribbon-label-font-weight);
  letter-spacing: var(--bb-ribbon-label-letter-spacing);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* Default positioning: end/top */
.bb-ribbon > .bb-ribbon-label {
  position: absolute;
  top: var(--bb-ribbon-offset-y);
  right: var(--bb-ribbon-offset-x);
  z-index: 2;
}

/* -------------------------------------
   Direction helpers
------------------------------------- */
.bb-ribbon-start > .bb-ribbon-label {
  left: var(--bb-ribbon-offset-x);
  right: auto;
}

.bb-ribbon-end > .bb-ribbon-label {
  right: var(--bb-ribbon-offset-x);
  left: auto;
}

.bb-ribbon-top > .bb-ribbon-label {
  top: var(--bb-ribbon-offset-y);
}

.bb-ribbon-bottom > .bb-ribbon-label {
  top: auto;
  bottom: var(--bb-ribbon-offset-y);
}

/* -------------------------------------
   Rounded edge helpers
------------------------------------- */
.bb-ribbon-rounded-start > .bb-ribbon-label {
  border-top-left-radius: var(--bb-radius-pill);
  border-bottom-left-radius: var(--bb-radius-pill);
}

.bb-ribbon-rounded-end > .bb-ribbon-label {
  border-top-right-radius: var(--bb-radius-pill);
  border-bottom-right-radius: var(--bb-radius-pill);
}

.bb-ribbon-rounded-top > .bb-ribbon-label {
  border-top-left-radius: var(--bb-radius-pill);
  border-top-right-radius: var(--bb-radius-pill);
}

.bb-ribbon-rounded-bottom > .bb-ribbon-label {
  border-bottom-left-radius: var(--bb-radius-pill);
  border-bottom-right-radius: var(--bb-radius-pill);
}

/* -------------------------------------
   Vertical ribbon
------------------------------------- */
.bb-ribbon-vertical > .bb-ribbon-label {
  width: var(--bb-ribbon-vertical-w);
  height: var(--bb-ribbon-vertical-h);
  padding: 0;
  border-radius: calc(var(--bb-ribbon-label-radius) + 0.15rem);
}

.bb-ribbon-vertical > .bb-ribbon-label > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-90deg);
}

/* -------------------------------------
   Clip ribbon
------------------------------------- */
.bb-ribbon-clip > .bb-ribbon-label {
  position: absolute;
}

.bb-ribbon-clip > .bb-ribbon-label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--bb-ribbon-clip-size);
  height: var(--bb-ribbon-clip-size);
  background-color: var(--bb-ribbon-cut-bg);
  border-radius: var(--bb-ribbon-clip-radius);
  z-index: -1;
}

.bb-ribbon-clip.bb-ribbon-end > .bb-ribbon-label::after,
.bb-ribbon-clip:not(.bb-ribbon-start) > .bb-ribbon-label::after {
  left: calc(-1 * var(--bb-ribbon-clip-size) * 0.5);
}

.bb-ribbon-clip.bb-ribbon-start > .bb-ribbon-label::after {
  right: calc(-1 * var(--bb-ribbon-clip-size) * 0.5);
  left: auto;
}

/* -------------------------------------
   Inner strip
------------------------------------- */
.bb-ribbon-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--bb-ribbon-inner-opacity);
  pointer-events: none;
}

/* -------------------------------------
   Triangle ribbon
------------------------------------- */
.bb-ribbon-triangle {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
}

/* Positions */
.bb-ribbon-top-start {
  top: 0;
  left: 0;
}

.bb-ribbon-top-end {
  top: 0;
  right: 0;
}

.bb-ribbon-bottom-start {
  bottom: 0;
  left: 0;
}

.bb-ribbon-bottom-end {
  bottom: 0;
  right: 0;
}

/* Triangle shapes */
.bb-ribbon-triangle.bb-ribbon-top-start {
  border-top: var(--bb-ribbon-triangle-size) solid var(--bb-ribbon-triangle-color);
  border-right: var(--bb-ribbon-triangle-size) solid transparent;
}

.bb-ribbon-triangle.bb-ribbon-top-end {
  border-top: var(--bb-ribbon-triangle-size) solid var(--bb-ribbon-triangle-color);
  border-left: var(--bb-ribbon-triangle-size) solid transparent;
}

.bb-ribbon-triangle.bb-ribbon-bottom-start {
  border-bottom: var(--bb-ribbon-triangle-size) solid var(--bb-ribbon-triangle-color);
  border-right: var(--bb-ribbon-triangle-size) solid transparent;
}

.bb-ribbon-triangle.bb-ribbon-bottom-end {
  border-bottom: var(--bb-ribbon-triangle-size) solid var(--bb-ribbon-triangle-color);
  border-left: var(--bb-ribbon-triangle-size) solid transparent;
}

/* -------------------------------------
   Icon on triangle
------------------------------------- */
.bb-ribbon-icon {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-ribbon-icon-size);
  height: var(--bb-ribbon-icon-size);
  color: var(--bb-ribbon-icon-color);
  pointer-events: none;
}

.bb-ribbon-top-start .bb-ribbon-icon {
  top: var(--bb-ribbon-icon-inset);
  left: var(--bb-ribbon-icon-inset);
}

.bb-ribbon-top-end .bb-ribbon-icon {
  top: var(--bb-ribbon-icon-inset);
  right: var(--bb-ribbon-icon-inset);
}

.bb-ribbon-bottom-start .bb-ribbon-icon {
  bottom: var(--bb-ribbon-icon-inset);
  left: var(--bb-ribbon-icon-inset);
}

.bb-ribbon-bottom-end .bb-ribbon-icon {
  bottom: var(--bb-ribbon-icon-inset);
  right: var(--bb-ribbon-icon-inset);
}

/* -------------------------------------
   Card header helper
------------------------------------- */
.card-header.bb-ribbon {
  gap: var(--bb-ribbon-gap);
}

/* =====================================
   Bulbulustur Theme - Rating (PURE)
   Bootstrap 5 friendly | Token-first | Dark/Light safe
   Root: .bb-rating
   Variants: .bb-rating-sm | .bb-rating-lg
   Modes: .bb-rating-hover | .bb-rating-editable
   States: .is-checked | .bb-rating-disabled
   ===================================== */
.bb-rating {
  /* -------------------------------------
     Tokens (override-friendly, local scope)
  -------------------------------------- */
  --bb-rating-gap: 0.35rem;
  --bb-rating-icon-size: 1.25rem;
  --bb-rating-color: var(--bb-warning, var(--bb-warning));
  --bb-rating-muted-color: var(--bb-secondary-color);
  /* hover bg (NO hard-coded rgba) */
  --bb-rating-hover-bg: var(--bb-tertiary-bg);
  /* focus ring (token-first) */
  --bb-rating-focus-ring: var(--bs-focus-ring-box-shadow);
  /* motion */
  --bb-rating-transition-speed: 150ms;
  --bb-rating-transition-ease: ease;
  /* editable label shape */
  --bb-rating-hit-padding: 0.125rem;
  --bb-rating-hit-radius: var(--bb-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--bb-rating-gap);
  user-select: none;
}

/* Size variants */
.bb-rating.bb-rating-sm {
  --bb-rating-icon-size: 1rem;
  --bb-rating-gap: 0.25rem;
}

.bb-rating.bb-rating-lg {
  --bb-rating-icon-size: 1.6rem;
  --bb-rating-gap: 0.375rem;
}

/* -------------------------------------
   Icon (Material Symbols)
-------------------------------------- */
.bb-rating-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Outlined";
  font-size: var(--bb-rating-icon-size);
  line-height: 1;
  font-variation-settings: "FILL" var(--bb-rating-fill, 0), "wght" 400, "GRAD" 0, "opsz" 24;
  transition: color var(--bb-rating-transition-speed) var(--bb-rating-transition-ease), transform var(--bb-rating-transition-speed) var(--bb-rating-transition-ease);
}

/* -------------------------------------
   Label base (display + edit)
-------------------------------------- */
.bb-rating-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  color: var(--bb-rating-muted-color);
}

.bb-rating-label.is-checked {
  color: var(--bb-rating-color);
}

.bb-rating-label.is-checked .bb-rating-icon {
  --bb-rating-fill: 1;
}

/* Optional hover polish (display mode) */
.bb-rating.bb-rating-hover .bb-rating-label {
  cursor: pointer;
}

.bb-rating.bb-rating-hover .bb-rating-label:hover .bb-rating-icon {
  transform: translateY(-1px);
}

/* -------------------------------------
   Editable mode (radio inputs)
   Pattern: row-reverse + sibling selectors
-------------------------------------- */
.bb-rating.bb-rating-editable {
  gap: var(--bb-rating-gap);
}

/* Accessible hide radios */
.bb-rating-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* Stars wrapper */
.bb-rating-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--bb-rating-gap);
}

/* editable labels behave like buttons */
.bb-rating.bb-rating-editable .bb-rating-label {
  cursor: pointer;
  padding: var(--bb-rating-hit-padding);
  border-radius: var(--bb-rating-hit-radius);
  transition: background-color var(--bb-rating-transition-speed) var(--bb-rating-transition-ease);
}

.bb-rating.bb-rating-editable .bb-rating-label:hover {
  background-color: var(--bb-rating-hover-bg);
}

/* Hover preview fill */
.bb-rating.bb-rating-editable .bb-rating-label:hover,
.bb-rating.bb-rating-editable .bb-rating-label:hover ~ .bb-rating-label {
  color: var(--bb-rating-color);
}

.bb-rating.bb-rating-editable .bb-rating-label:hover .bb-rating-icon,
.bb-rating.bb-rating-editable .bb-rating-label:hover ~ .bb-rating-label .bb-rating-icon {
  --bb-rating-fill: 1;
}

/* Checked state fill */
.bb-rating.bb-rating-editable .bb-rating-input:checked ~ .bb-rating-label {
  color: var(--bb-rating-color);
}

.bb-rating.bb-rating-editable .bb-rating-input:checked ~ .bb-rating-label .bb-rating-icon {
  --bb-rating-fill: 1;
}

/* Disabled */
.bb-rating.bb-rating-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Reset helper (spacing only) */
.bb-rating-reset {
  margin-right: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .bb-rating-icon,
  .bb-rating.bb-rating-editable .bb-rating-label {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Indicator (PURE)
   Bootstrap 5 uyumlu
   Toggle: data-bb-indicator="on"
   ===================================== */
.bb-indicator {
  /* local tokens */
  --bb-indicator-transition: 150ms ease;
  --bb-indicator-disabled-opacity: var(--bs-disabled-opacity, 0.65);
  /* layout tokens */
  --bb-indicator-gap: var(--bb-space-2, 0.5rem);
  /* micro motion tokens */
  --bb-indicator-shift-y: 1px;
  /* icon token */
  --bb-indicator-icon-size: 1.15em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-indicator-gap);
}

/* Label & Progress layers */
.bb-indicator .bb-indicator-label,
.bb-indicator .bb-indicator-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  transition: opacity var(--bb-indicator-transition), transform var(--bb-indicator-transition);
  will-change: opacity, transform;
}

/* Progress overlay: buton genişliği zıplamasın */
.bb-indicator .bb-indicator-progress {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--bb-indicator-shift-y));
}

/* Default state */
.bb-indicator .bb-indicator-label {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ON state */
.bb-indicator[data-bb-indicator=on] .bb-indicator-label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--bb-indicator-shift-y) * -1));
}

.bb-indicator[data-bb-indicator=on] .bb-indicator-progress {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Opt-in: ON iken disable davranışı */
.bb-indicator[data-bb-indicator=on][data-bb-indicator-disable=true] {
  pointer-events: none;
  cursor: progress;
  opacity: var(--bb-indicator-disabled-opacity);
}

/* Icon alignment */
.bb-indicator .material-symbols-outlined {
  font-size: var(--bb-indicator-icon-size);
  line-height: 1;
}

/* =====================================
   Bulbulustur Theme - Pagination
   Bootstrap 5 compatible, bb-* prefixed
   Variants: pill, circle, outline, compact
   ===================================== */
.bb-pagination {
  /* -----------------------------------
     Local tokens
     Override-friendly component API
  ----------------------------------- */
  --bb-pagination-gap: .5rem;
  --bb-pagination-item-size: 2.25rem;
  --bb-pagination-item-padding-x: .85rem;
  --bb-pagination-font-size: .95rem;
  --bb-pagination-font-weight: var(--bb-fw-semibold, 600);
  --bb-pagination-radius: var(--bb-radius-md, .5rem);
  --bb-pagination-radius-pill: var(--bb-radius-pill, 999px);
  --bb-pagination-bg: var(--bb-tertiary-bg);
  --bb-pagination-border-color: var(--bb-border-color);
  --bb-pagination-border-width: 1px;
  --bb-pagination-color: var(--bb-secondary-color);
  --bb-pagination-hover-bg: var(--bb-secondary-bg);
  --bb-pagination-hover-color: var(--bb-emphasis-color);
  --bb-pagination-active-bg: var(--bb-primary);
  --bb-pagination-active-color: var(--bb-primary-inverse, var(--bb-white));
  --bb-pagination-active-border-color: var(--bb-primary);
  --bb-pagination-disabled-opacity: var(--bb-disabled-opacity, .55);
  --bb-pagination-focus-ring-width: var(--bb-focus-ring-width, .2rem);
  --bb-pagination-focus-ring-color: var(--bb-focus-ring-color, var(--bb-primary));
  --bb-pagination-focus-ring-opacity: var(--bb-focus-ring-opacity, .25);
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

/* Bootstrap pagination wrapper */
.bb-pagination .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bb-pagination-gap);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* Item reset */
.bb-pagination .page-item {
  margin: 0;
}

/* Link */
.bb-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bb-pagination-item-size);
  height: var(--bb-pagination-item-size);
  padding: 0 var(--bb-pagination-item-padding-x);
  border: var(--bb-pagination-border-width) solid transparent;
  border-radius: var(--bb-pagination-radius);
  background-color: var(--bb-pagination-bg);
  color: var(--bb-pagination-color);
  font-size: var(--bb-pagination-font-size);
  font-weight: var(--bb-pagination-font-weight);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  box-shadow: none;
  transition: background-color var(--bb-transition-normal, 200ms), color var(--bb-transition-normal, 200ms), border-color var(--bb-transition-normal, 200ms), box-shadow var(--bb-transition-normal, 200ms);
}

/* Hover */
.bb-pagination .page-item:not(.disabled):not(.active) .page-link:hover {
  background-color: var(--bb-pagination-hover-bg);
  color: var(--bb-pagination-hover-color);
}

/* Focus */
.bb-pagination .page-link:focus {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-pagination-focus-ring-width) color-mix(in srgb, var(--bb-pagination-focus-ring-color) calc(var(--bb-pagination-focus-ring-opacity) * 100%), transparent);
}

/* Active */
.bb-pagination .page-item.active .page-link {
  background-color: var(--bb-pagination-active-bg);
  border-color: var(--bb-pagination-active-border-color);
  color: var(--bb-pagination-active-color);
}

/* Disabled */
.bb-pagination .page-item.disabled .page-link,
.bb-pagination .page-item[aria-disabled=true] .page-link {
  opacity: var(--bb-pagination-disabled-opacity);
  pointer-events: none;
}

/* Icons */
.bb-pagination .page-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Variants
===================================== */
/* Outline */
.bb-pagination.bb-pagination--outline .page-link {
  border-color: var(--bb-pagination-border-color);
  background-color: transparent;
}

.bb-pagination.bb-pagination--outline .page-item:not(.disabled):not(.active) .page-link:hover {
  border-color: color-mix(in srgb, var(--bb-pagination-active-border-color) 35%, var(--bb-pagination-border-color));
}

.bb-pagination.bb-pagination--outline .page-item.active .page-link {
  border-color: var(--bb-pagination-active-border-color);
}

/* Pill */
.bb-pagination.bb-pagination--pill .page-link {
  border-radius: var(--bb-pagination-radius-pill);
}

/* Circle */
.bb-pagination.bb-pagination--circle .page-link {
  width: var(--bb-pagination-item-size);
  min-width: var(--bb-pagination-item-size);
  padding: 0;
  border-radius: 50%;
}

/* Compact */
.bb-pagination.bb-pagination--compact {
  --bb-pagination-gap: 0.35rem;
  --bb-pagination-item-size: 2rem;
  --bb-pagination-item-padding-x: 0.7rem;
  --bb-pagination-font-size: var(--bb-fs-sm);
}

.bb-b2c-history-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-history-pager-info {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

@media (max-width: 767.98px) {
  .bb-b2c-history-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-b2c-history-pager-info {
    text-align: center;
  }
  .bb-b2c-history-pager .bb-pagination {
    justify-content: center;
  }
}
/* =====================================
   Bulbulustur Theme - Progress
   Bootstrap 5 compatible, token-driven
===================================== */
.bb-progress {
  /* Local tokens */
  --bb-progress-height: 0.5rem;
  --bb-progress-radius: var(--bb-radius-pill);
  --bb-progress-track-bg: var(--bb-tertiary-bg);
  --bb-progress-bar-bg: var(--bb-success);
  --bb-progress-label-color: var(--bb-secondary-color);
  --bb-progress-value-color: var(--bb-body-color);
  --bb-progress-gap: 0.5rem;
  --bb-progress-font-size: font-size: var(--bb-fs-base);
  --bb-progress-transition:
    width var(--bb-motion-normal, 200ms) var(--bb-ease-in-out, ease-in-out);
  display: flex;
  flex-direction: column;
  gap: var(--bb-progress-gap);
}

.bb-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-progress-gap);
}

.bb-progress__label {
  color: var(--bb-progress-label-color);
  font-size: var(--bb-progress-font-size);
  font-weight: var(--bb-fw-semibold);
}

.bb-progress__value {
  color: var(--bb-progress-value-color);
  font-size: var(--bb-progress-font-size);
  font-weight: var(--bb-fw-bold);
}

.bb-progress__track {
  width: 100%;
  height: var(--bb-progress-height);
  overflow: hidden;
  background-color: var(--bb-progress-track-bg);
  border-radius: var(--bb-progress-radius);
}

.bb-progress__bar {
  width: 0%;
  height: 100%;
  background-color: var(--bb-progress-bar-bg);
  border-radius: inherit;
  transition: var(--bb-progress-transition);
}

/* -------------------------------------
   Sizes
------------------------------------- */
.bb-progress--sm {
  --bb-progress-height: 5px;
}

.bb-progress--md {
  --bb-progress-height: 8px;
}

.bb-progress--lg {
  --bb-progress-height: 12px;
}

/* -------------------------------------
   Variants
------------------------------------- */
.bb-progress--primary {
  --bb-progress-bar-bg: var(--bb-primary);
}

.bb-progress--secondary {
  --bb-progress-bar-bg: var(--bb-secondary);
}

.bb-progress--success {
  --bb-progress-bar-bg: var(--bb-success);
}

.bb-progress--info {
  --bb-progress-bar-bg: var(--bb-info);
}

.bb-progress--warning {
  --bb-progress-bar-bg: var(--bb-warning);
}

.bb-progress--danger {
  --bb-progress-bar-bg: var(--bb-danger);
}

.bb-progress--dark {
  --bb-progress-bar-bg: var(--bb-dark);
}

/* -------------------------------------
   States
------------------------------------- */
.bb-progress.is-loading {
  opacity: var(--bb-loading-opacity);
  pointer-events: none;
}

.bb-progress.is-disabled {
  opacity: var(--bb-disabled-opacity);
  pointer-events: none;
}

/* =====================================
   Bulbulustur Theme - Popover
   Bootstrap 5 compatible | bb-* prefixed
   Token-first | Dark/Light safe | PURE
   Root: .bb-popover
===================================== */
.bb-popover {
  /* Local tokens */
  --bb-popover-bg: var(--bb-body-bg);
  --bb-popover-color: var(--bb-body-color);
  --bb-popover-border-color: var(--bb-border-color);
  --bb-popover-border-width: var(--bb-border-width, 1px);
  --bb-popover-radius: var(--bb-radius);
  --bb-popover-shadow: var(--bb-shadow-sm);
  --bb-popover-padding-y: 0.5rem;
  --bb-popover-padding-x: 0.75rem;
  --bb-popover-font-size: var(--bb-fs-sm);
  --bb-popover-header-color: var(--bb-emphasis-color);
  --bb-popover-header-font-weight: var(--bb-fw-semibold);
  --bb-popover-header-padding-bottom: 0.25rem;
  background-color: var(--bb-popover-bg);
  color: var(--bb-popover-color);
  border: var(--bb-popover-border-width) solid var(--bb-popover-border-color);
  border-radius: var(--bb-popover-radius);
  box-shadow: var(--bb-popover-shadow);
  padding: var(--bb-popover-padding-y) var(--bb-popover-padding-x);
  font-size: var(--bb-popover-font-size);
}
.bb-popover .popover-header {
  margin: 0;
  padding: 0 0 var(--bb-popover-header-padding-bottom) 0;
  color: var(--bb-popover-header-color);
  background: transparent;
  border: 0;
  font-weight: var(--bb-popover-header-font-weight);
}
.bb-popover .popover-body {
  margin: 0;
  padding: 0;
  color: var(--bb-popover-color);
}
.bb-popover .popover-arrow::before,
.bb-popover .popover-arrow::after {
  border-color: transparent;
}
.bb-popover .popover-arrow::after {
  border-top-color: var(--bb-popover-bg);
  border-bottom-color: var(--bb-popover-bg);
}

/* -------------------------------------
   Variants
------------------------------------- */
.bb-popover.is-success {
  --bb-popover-bg: var(--bb-success);
  --bb-popover-color: var(--bb-success-inverse);
  --bb-popover-border-color: var(--bb-success);
  --bb-popover-header-color: var(--bb-success-inverse);
}

.bb-popover.is-danger {
  --bb-popover-bg: var(--bb-danger);
  --bb-popover-color: var(--bb-danger-inverse);
  --bb-popover-border-color: var(--bb-danger);
  --bb-popover-header-color: var(--bb-danger-inverse);
}

.bb-popover.is-warning {
  --bb-popover-bg: var(--bb-warning);
  --bb-popover-color: var(--bb-warning-inverse);
  --bb-popover-border-color: var(--bb-warning);
  --bb-popover-header-color: var(--bb-warning-inverse);
}

.bb-popover.is-info {
  --bb-popover-bg: var(--bb-info);
  --bb-popover-color: var(--bb-info-inverse);
  --bb-popover-border-color: var(--bb-info);
  --bb-popover-header-color: var(--bb-info-inverse);
}

.bb-popover.is-inverse {
  --bb-popover-bg: var(--bb-dark);
  --bb-popover-color: var(--bb-dark-inverse);
  --bb-popover-border-color: var(--bb-dark);
  --bb-popover-header-color: var(--bb-dark-inverse);
  --bb-popover-shadow: var(--bb-shadow-lg);
}

/* -------------------------------------
   States
------------------------------------- */
.bb-popover.is-disabled {
  opacity: var(--bb-disabled-opacity);
  pointer-events: none;
}

/* =====================================
   Bulbulustur Theme - Bullet
   Prefix: bb-
   Type: micro / utility-friendly
===================================== */
.bb-bullet {
  /* tokens */
  --bb-bullet-size: 0.5rem;
  --bb-bullet-radius: var(--bb-radius-xs);
  --bb-bullet-bg: var(--bb-secondary-bg);
  --bb-bullet-opacity: 1;
  display: inline-block;
  flex-shrink: 0;
  width: var(--bb-bullet-size);
  height: var(--bb-bullet-size);
  border-radius: var(--bb-bullet-radius);
  background-color: var(--bb-bullet-bg);
  opacity: var(--bb-bullet-opacity);
}

/* -------------------------------------
   Dot Style
------------------------------------- */
.bb-bullet-dot {
  --bb-bullet-radius: 50%;
}

/* -------------------------------------
   Vertical Style
------------------------------------- */
.bb-bullet-vertical {
  --bb-bullet-size: 1.25rem;
  --bb-bullet-radius: var(--bb-radius-xs);
  width: 0.25rem;
  height: var(--bb-bullet-size);
}

/* -------------------------------------
   Line Style
------------------------------------- */
.bb-bullet-line {
  --bb-bullet-radius: var(--bb-radius-xs);
  width: 1.25rem;
  height: 0.125rem;
}

/* -------------------------------------
   Color bridge (Bootstrap bg utilities)
------------------------------------- */
.bb-bullet.bg-primary {
  --bb-bullet-bg: var(--bb-primary);
}

.bb-bullet.bg-secondary {
  --bb-bullet-bg: var(--bs-secondary);
}

.bb-bullet.bg-success {
  --bb-bullet-bg: var(--bb-success);
}

.bb-bullet.bg-info {
  --bb-bullet-bg: var(--bb-info);
}

.bb-bullet.bg-warning {
  --bb-bullet-bg: var(--bb-warning);
}

.bb-bullet.bg-danger {
  --bb-bullet-bg: var(--bb-danger);
}

.bb-bullet.bg-light {
  --bb-bullet-bg: var(--bb-light);
}

.bb-bullet.bg-dark {
  --bb-bullet-bg: var(--bb-dark);
}

/* =====================================
   Bulbulustur Pulse
   Indicator component
   Prefix: bb-
   Layer: components/_pulse.scss
   Theme: data-bs-theme="light|navy|dark"

   Rule:
   - Pulse consumes theme tokens.
   - Pulse owns only component-local tokens.
   - It does not create global theme colors.
===================================== */
/* =====================================
   Pulse Mode Tokens
===================================== */
.bb-pulse {
  --bb-pulse-size: 2.75rem; /* 44px */
  --bb-pulse-ring-size: var(--bb-pulse-size);
  --bb-pulse-ring-width: 0.125rem;
  --bb-pulse-duration: 1.5s;
  --bb-pulse-scale: 1.5;
  --bb-pulse-color: var(--bb-primary);
  --bb-pulse-ring-opacity-from: 0.6;
  --bb-pulse-ring-opacity-to: 0;
  --bb-pulse-core-size: 0.625rem;
  --bb-pulse-core-color: var(--bb-pulse-color);
  --bb-pulse-core-bg: color-mix(in srgb, var(--bb-pulse-color) 18%, transparent);
}

html[data-bs-theme=navy] .bb-pulse {
  --bb-pulse-ring-opacity-from: 0.72;
  --bb-pulse-core-bg: color-mix(in srgb, var(--bb-pulse-color) 20%, transparent);
}

html[data-bs-theme=dark] .bb-pulse {
  --bb-pulse-ring-opacity-from: 0.78;
  --bb-pulse-core-bg: color-mix(in srgb, var(--bb-pulse-color) 18%, transparent);
}

/* =====================================
   Density
===================================== */
html[data-bb-density=compact] .bb-pulse,
[data-bb-density=compact] .bb-pulse {
  --bb-pulse-size: 2.25rem; /* 36px */
  --bb-pulse-core-size: 0.5rem;
}

/* =====================================
   Base
===================================== */
.bb-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-pulse-size);
  height: var(--bb-pulse-size);
  flex: 0 0 var(--bb-pulse-size);
  color: var(--bb-pulse-color);
}

/* =====================================
   Ring
===================================== */
.bb-pulse-ring {
  position: absolute;
  inset: 0;
  width: var(--bb-pulse-ring-size);
  height: var(--bb-pulse-ring-size);
  border: var(--bb-pulse-ring-width) solid var(--bb-pulse-color);
  border-radius: var(--bb-radius-pill);
  animation: bb-pulse-ring var(--bb-pulse-duration) var(--bb-ease-out, ease-out) infinite;
  pointer-events: none;
}

.bb-pulse-ring:nth-child(2) {
  animation-delay: calc(var(--bb-pulse-duration) * -0.45);
}

/* =====================================
   Core Dot
   Optional:
   <span class="bb-pulse-core"></span>
===================================== */
.bb-pulse-core {
  position: relative;
  z-index: 1;
  width: var(--bb-pulse-core-size);
  height: var(--bb-pulse-core-size);
  background-color: var(--bb-pulse-core-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0 0 0.375rem var(--bb-pulse-core-bg);
}

/* =====================================
   Sizes
===================================== */
.bb-pulse-xs {
  --bb-pulse-size: 1.5rem;
  --bb-pulse-core-size: 0.375rem;
  --bb-pulse-scale: 1.42;
}

.bb-pulse-sm {
  --bb-pulse-size: 2rem;
  --bb-pulse-core-size: 0.5rem;
  --bb-pulse-scale: 1.45;
}

.bb-pulse-md {
  --bb-pulse-size: 2.75rem;
  --bb-pulse-core-size: 0.625rem;
}

.bb-pulse-lg {
  --bb-pulse-size: 3.5rem;
  --bb-pulse-core-size: 0.75rem;
}

.bb-pulse-xl {
  --bb-pulse-size: 4.25rem;
  --bb-pulse-core-size: 0.875rem;
}

/* =====================================
   Colors
===================================== */
.bb-pulse-primary {
  --bb-pulse-color: var(--bb-primary);
}

.bb-pulse-secondary {
  --bb-pulse-color: var(--bb-secondary-color);
}

.bb-pulse-success {
  --bb-pulse-color: var(--bb-success);
}

.bb-pulse-info {
  --bb-pulse-color: var(--bb-info);
}

.bb-pulse-warning {
  --bb-pulse-color: var(--bb-warning);
}

.bb-pulse-danger {
  --bb-pulse-color: var(--bb-danger);
}

.bb-pulse-accent {
  --bb-pulse-color: var(--bb-brand-accent, var(--bb-purple-500));
}

.bb-pulse-page-accent {
  --bb-pulse-color: var(--bb-page-accent);
}

.bb-pulse-light {
  --bb-pulse-color: var(--bb-light);
}

.bb-pulse-dark {
  --bb-pulse-color: var(--bb-dark);
}

/* =====================================
   Static Variant
===================================== */
.bb-pulse-static .bb-pulse-ring {
  animation: none;
  opacity: 0.28;
  transform: scale(1);
}

/* =====================================
   Animation
===================================== */
@keyframes bb-pulse-ring {
  0% {
    opacity: var(--bb-pulse-ring-opacity-from);
    transform: scale(1);
  }
  100% {
    opacity: var(--bb-pulse-ring-opacity-to);
    transform: scale(var(--bb-pulse-scale));
  }
}
/* =====================================
   Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-pulse-ring {
    animation: none;
    opacity: 0.28;
    transform: scale(1);
  }
}
/* =====================================
   Bulbulustur Theme - Datetime (PURE)
   Prefix: bb-
   Vendor yok. Bootstrap 5 + token.
   ===================================== */
.bb-datetime {
  /* local tokens */
  --bb-dt-bg: var(--bb-body-bg);
  --bb-dt-surface: var(--bb-body-bg);
  --bb-dt-border: var(--bb-border-color);
  --bb-dt-text: var(--bb-body-color);
  --bb-dt-muted: var(--bb-secondary-color);
  --bb-dt-radius: var(--bb-radius-xl);
  --bb-dt-shadow: var(--bb-shadow-sm);
  --bb-dt-hover-bg: var(--bb-tertiary-bg);
  --bb-dt-active-bg: color-mix(in srgb, var(--bb-primary)12%, transparent);
  --bb-dt-active-text: var(--bb-primary);
  --bb-dt-inrange-bg: color-mix(in srgb, var(--bb-primary)8%, transparent);
  --bb-dt-today-ring: color-mix(in srgb, var(--bb-primary)35%, transparent);
  --bb-dt-gap: 0.75rem;
  --bb-dt-pad: 0.85rem;
  position: relative;
}

.bb-datetime-field {
  position: relative;
}

.bb-datetime-input {
  padding-right: 2.75rem;
}

.bb-datetime-icon {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dt-muted);
  pointer-events: none;
}

/* Popover */
.bb-datetime-popover {
  position: absolute;
  z-index: 1080; /* modal altında kalmasın */
  min-width: 320px;
  background-color: var(--bb-dt-surface);
  border: 1px solid var(--bb-dt-border);
  border-radius: var(--bb-dt-radius);
  box-shadow: var(--bb-dt-shadow);
  overflow: hidden;
}

.bb-datetime-popover[data-bb-open=false] {
  display: none;
}

.bb-datetime-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-dt-gap);
  padding: var(--bb-dt-pad);
  border-bottom: 1px solid var(--bb-dt-border);
}

.bb-datetime-title {
  font-weight: var(--bb-fw-semibold);
  color: var(--bb-dt-text);
  margin: 0;
}

.bb-datetime-close {
  border: 0;
  background: transparent;
  color: var(--bb-dt-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-lg);
  padding: 0.35rem;
}

.bb-datetime-close:hover {
  background-color: var(--bb-dt-hover-bg);
  color: var(--bb-dt-text);
}

/* Body layout */
.bb-datetime-popover-body {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
}

.bb-datetime-presets {
  padding: var(--bb-dt-pad);
  border-right: 1px solid var(--bb-dt-border);
  background-color: var(--bb-dt-surface);
}

.bb-datetime-presets .bb-datetime-preset {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.75rem;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-dt-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bb-datetime-presets .bb-datetime-preset:hover {
  background-color: var(--bb-dt-hover-bg);
}

.bb-datetime-presets .bb-datetime-preset[aria-current=true] {
  background-color: var(--bb-dt-active-bg);
  color: var(--bb-dt-active-text);
}

/* Calendars */
.bb-datetime-calendars {
  padding: var(--bb-dt-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bb-dt-gap);
}

.bb-datetime-cal {
  min-width: 220px;
}

.bb-datetime-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.bb-datetime-nav {
  border: 0;
  background: transparent;
  color: var(--bb-dt-muted);
  border-radius: var(--bb-radius-lg);
  padding: 0.25rem 0.35rem;
}

.bb-datetime-nav:hover {
  background-color: var(--bb-dt-hover-bg);
  color: var(--bb-dt-text);
}

.bb-datetime-month {
  font-weight: var(--bb-fw-semibold);
  color: var(--bb-dt-text);
  font-size: var(--bb-fs-base);
  margin: 0;
}

/* Weekdays & grid */
.bb-datetime-weekdays,
.bb-datetime-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.bb-datetime-weekdays div {
  font-size: var(--bb-fs-xs);
  color: var(--bb-dt-muted);
  text-align: center;
  padding: 0.2rem 0;
}

.bb-datetime-day {
  border: 0;
  background: transparent;
  color: var(--bb-dt-text);
  border-radius: var(--bb-radius-lg);
  padding: 0.45rem 0;
  text-align: center;
  font-size: var(--bb-fs-sm);
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bb-datetime-day:hover {
  background-color: var(--bb-dt-hover-bg);
}

.bb-datetime-day[disabled] {
  color: color-mix(in srgb, var(--bb-dt-muted) 65%, transparent);
  pointer-events: none;
}

.bb-datetime-day[data-bb-today=true] {
  box-shadow: inset 0 0 0 2px var(--bb-dt-today-ring);
}

.bb-datetime-day[data-bb-inrange=true] {
  background-color: var(--bb-dt-inrange-bg);
}

.bb-datetime-day[data-bb-active=true] {
  background-color: var(--bb-dt-active-bg);
  color: var(--bb-dt-active-text);
}

/* Footer */
.bb-datetime-popover-footer {
  display: flex;
  align-items: center;
  gap: var(--bb-dt-gap);
  padding: var(--bb-dt-pad);
  border-top: 1px solid var(--bb-dt-border);
  justify-content: flex-end;
}

.bb-datetime-selected {
  margin-right: auto;
  color: var(--bb-dt-muted);
  font-size: var(--bb-fs-sm);
}

/* Responsive */
@media (max-width: 575.98px) {
  .bb-datetime-popover {
    min-width: 100%;
  }
  .bb-datetime-popover-body {
    grid-template-columns: 1fr;
  }
  .bb-datetime-presets {
    border-right: 0;
    border-bottom: 1px solid var(--bb-dt-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .bb-datetime-calendars {
    grid-template-columns: 1fr;
  }
  .bb-datetime-cal {
    min-width: 0;
  }
}
/* =====================================
   Bulbulustur Theme - Tooltips (PURE)
   Bootstrap 5 tooltip base korunur
   Custom class ile theme: data-bs-custom-class="bb-tooltip ..."
   Dark/Light: token-first
===================================== */
.tooltip.bb-tooltip {
  /* -----------------------------------
     Local tokens (override-friendly)
  ----------------------------------- */
  --bb-tooltip-bg: var(--bb-body-bg);
  --bb-tooltip-color: var(--bb-body-color);
  --bb-tooltip-border-color: var(--bb-border-color);
  --bb-tooltip-radius: var(--bb-radius-sm, var(--bs-border-radius-sm, 0.35rem));
  --bb-tooltip-shadow: var(--bb-shadow-xs, var(--bs-box-shadow-sm, none));
  --bb-tooltip-padding-y: 0.45rem;
  --bb-tooltip-padding-x: 0.65rem;
  --bb-tooltip-font-size: var(--bb-fs-sm);
  --bb-tooltip-line-height: var(--bb-line-height-base);
  --bb-tooltip-max-width: 16.25rem;
  /* Bootstrap inner */
}
.tooltip.bb-tooltip .tooltip-inner {
  max-width: var(--bb-tooltip-max-width);
  padding: var(--bb-tooltip-padding-y) var(--bb-tooltip-padding-x);
  color: var(--bb-tooltip-color);
  background-color: var(--bb-tooltip-bg);
  border: 1px solid var(--bb-tooltip-border-color);
  border-radius: var(--bb-tooltip-radius);
  box-shadow: var(--bb-tooltip-shadow);
  font-size: var(--bb-tooltip-font-size);
  line-height: var(--bb-tooltip-line-height);
  text-align: left; /* Metronic hissi: daha “UI tooltip” */
}
.tooltip.bb-tooltip {
  /* Arrow uses current tooltip bg */
}
.tooltip.bb-tooltip .tooltip-arrow::before {
  /* Bootstrap arrow is border-based; color is driven by CSS variables */
  border-top-color: var(--bb-tooltip-bg);
  border-right-color: var(--bb-tooltip-bg);
  border-bottom-color: var(--bb-tooltip-bg);
  border-left-color: var(--bb-tooltip-bg);
}

/* -------------------------------------
   Inverse variant (Metronic-esque)
   Usage: data-bs-custom-class="bb-tooltip bb-tooltip-inverse"
-------------------------------------- */
.tooltip.bb-tooltip.bb-tooltip-inverse {
  --bb-tooltip-bg: var(--bb-emphasis-color);
  --bb-tooltip-color: var(--bb-body-bg);
  --bb-tooltip-border-color: transparent;
  --bb-tooltip-shadow: var(--bb-shadow-sm, var(--bs-box-shadow, none));
}

/* Soft variant (subtle surface) */
.tooltip.bb-tooltip.bb-tooltip-soft {
  --bb-tooltip-bg: var(--bb-tertiary-bg);
  --bb-tooltip-color: var(--bb-body-color);
  --bb-tooltip-border-color: var(--bb-border-color);
}

/* Size helpers */
.tooltip.bb-tooltip.bb-tooltip-sm {
  --bb-tooltip-font-size: var(--bb-fs-xs);
  --bb-tooltip-padding-y: 0.35rem;
  --bb-tooltip-padding-x: 0.55rem;
}

.tooltip.bb-tooltip.bb-tooltip-lg {
  --bb-tooltip-font-size: var(--bb-fs-sm);
  --bb-tooltip-padding-y: 0.55rem;
  --bb-tooltip-padding-x: 0.75rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tooltip.bb-tooltip .tooltip-inner {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Form Repeater
   Bootstrap 5 compatible
   Prefix: bb-
   Layer: components/_form-repeater.scss
   Theme: data-bs-theme="light|navy|dark"

   Rule:
   - Form repeater consumes theme tokens.
   - It owns only component-local tokens.
   - It does not create global theme colors.
===================================== */
.bb-formrepeater {
  /* -----------------------------------
     Local tokens
  ----------------------------------- */
  --bb-fr-bg: var(--bb-surface-elevated);
  --bb-fr-color: var(--bb-emphasis-color);
  --bb-fr-muted: var(--bb-secondary-color);
  --bb-fr-border-width: var(--bb-border-width, 1px);
  --bb-fr-border-color: var(--bb-border-color);
  --bb-fr-border-color-strong: var(--bb-border-color-strong);
  --bb-fr-radius: var(--bb-radius-lg);
  --bb-fr-item-radius: var(--bb-radius);
  --bb-fr-shadow: var(--bb-shadow-xs);
  --bb-fr-gap: 1rem;
  --bb-fr-padding: 1rem;
  --bb-fr-item-bg: var(--bb-surface-elevated);
  --bb-fr-item-head-bg: color-mix(in srgb, var(--bb-fr-item-bg) 88%, var(--bb-tertiary-bg));
  --bb-fr-item-border-style: dashed;
  --bb-fr-handle-size: 2.125rem;
  --bb-fr-handle-bg: var(--bb-tertiary-bg);
  --bb-fr-handle-color: var(--bb-fr-muted);
  --bb-fr-handle-border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-fr-index-size: 1.625rem;
  --bb-fr-index-bg: var(--bb-tertiary-bg);
  --bb-fr-index-color: var(--bb-fr-muted);
  --bb-fr-index-border-color: color-mix(in srgb, var(--bb-border-color) 64%, transparent);
  --bb-fr-action-gap: 0.5rem;
  --bb-fr-add-bg: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-fr-add-bg-hover: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-fr-add-color: var(--bb-primary);
  --bb-fr-add-border-color: color-mix(in srgb, var(--bb-primary) 25%, var(--bb-fr-border-color));
  --bb-fr-remove-bg: color-mix(in srgb, var(--bb-danger) 10%, transparent);
  --bb-fr-remove-bg-hover: color-mix(in srgb, var(--bb-danger) 14%, transparent);
  --bb-fr-remove-color: var(--bb-danger);
  --bb-fr-remove-border-color: color-mix(in srgb, var(--bb-danger) 25%, var(--bb-fr-border-color));
  --bb-fr-transition:
    color var(--bb-transition-fast),
    background-color var(--bb-transition-fast),
    border-color var(--bb-transition-fast),
    box-shadow var(--bb-transition-fast),
    transform var(--bb-transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--bb-fr-gap);
  color: var(--bb-fr-color);
}

/* =====================================
   Navy / Dark Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-formrepeater {
  --bb-fr-bg: var(--bb-surface-bg);
  --bb-fr-item-bg: var(--bb-surface-elevated);
  --bb-fr-item-head-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-surface-soft));
  --bb-fr-border-color: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-fr-border-color-strong: var(--bb-border-color-strong);
  --bb-fr-handle-bg: color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-tertiary-bg));
  --bb-fr-handle-color: var(--bb-tertiary-color);
  --bb-fr-handle-border-color: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-fr-index-bg: color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-tertiary-bg));
  --bb-fr-index-color: var(--bb-tertiary-color);
  --bb-fr-index-border-color: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-fr-add-bg: color-mix(in srgb, var(--bb-primary) 13%, transparent);
  --bb-fr-add-bg-hover: color-mix(in srgb, var(--bb-primary) 17%, transparent);
  --bb-fr-add-border-color: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-fr-border-color));
  --bb-fr-remove-bg: color-mix(in srgb, var(--bb-danger) 12%, transparent);
  --bb-fr-remove-bg-hover: color-mix(in srgb, var(--bb-danger) 16%, transparent);
  --bb-fr-remove-border-color: color-mix(in srgb, var(--bb-danger) 34%, var(--bb-fr-border-color));
}

html[data-bs-theme=dark] .bb-formrepeater {
  --bb-fr-bg: var(--bb-surface-bg);
  --bb-fr-item-bg: var(--bb-surface-elevated);
  --bb-fr-item-head-bg: color-mix(in srgb, var(--bb-surface-elevated) 80%, var(--bb-surface-soft));
  --bb-fr-border-color: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-fr-border-color-strong: var(--bb-border-color-strong);
  --bb-fr-handle-bg: color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-tertiary-bg));
  --bb-fr-handle-color: var(--bb-tertiary-color);
  --bb-fr-handle-border-color: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-fr-index-bg: color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-tertiary-bg));
  --bb-fr-index-color: var(--bb-tertiary-color);
  --bb-fr-index-border-color: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-fr-add-bg: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-fr-add-bg-hover: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-fr-add-border-color: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-fr-border-color));
  --bb-fr-remove-bg: color-mix(in srgb, var(--bb-danger) 11%, transparent);
  --bb-fr-remove-bg-hover: color-mix(in srgb, var(--bb-danger) 15%, transparent);
  --bb-fr-remove-border-color: color-mix(in srgb, var(--bb-danger) 32%, var(--bb-fr-border-color));
}

/* =====================================
   Header
===================================== */
.bb-formrepeater-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-fr-gap);
}

.bb-formrepeater-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-formrepeater-subtitle {
  margin: 0.25rem 0 0;
  color: var(--bb-fr-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-formrepeater-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-fr-action-gap);
  flex: 0 0 auto;
}

/* =====================================
   List
===================================== */
.bb-formrepeater-list {
  display: flex;
  flex-direction: column;
  gap: var(--bb-fr-gap);
}

/* =====================================
   Item
===================================== */
.bb-formrepeater-item {
  overflow: hidden;
  color: var(--bb-fr-color);
  background-color: var(--bb-fr-item-bg);
  border: var(--bb-fr-border-width) var(--bb-fr-item-border-style) var(--bb-fr-border-color);
  border-radius: var(--bb-fr-item-radius);
  box-shadow: var(--bb-fr-shadow);
}

.bb-formrepeater-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-fr-gap);
  padding: 0.75rem var(--bb-fr-padding);
  background-color: var(--bb-fr-item-head-bg);
  border-bottom: var(--bb-fr-border-width) solid var(--bb-fr-border-color);
}

.bb-formrepeater-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.bb-formrepeater-index {
  width: var(--bb-fr-index-size);
  height: var(--bb-fr-index-size);
  flex: 0 0 var(--bb-fr-index-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-fr-index-color);
  background-color: var(--bb-fr-index-bg);
  border: var(--bb-fr-border-width) solid var(--bb-fr-index-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-formrepeater-handle {
  width: var(--bb-fr-handle-size);
  height: var(--bb-fr-handle-size);
  flex: 0 0 var(--bb-fr-handle-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-fr-handle-color);
  background-color: var(--bb-fr-handle-bg);
  border: var(--bb-fr-border-width) solid var(--bb-fr-handle-border-color);
  border-radius: var(--bb-radius-lg);
  cursor: grab;
  user-select: none;
  transition: var(--bb-fr-transition);
}

.bb-formrepeater-handle:hover {
  color: var(--bb-primary);
  border-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-fr-handle-border-color));
}

.bb-formrepeater-handle:active {
  cursor: grabbing;
}

.bb-formrepeater-handle .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-formrepeater-item-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-formrepeater-item-body {
  padding: var(--bb-fr-padding);
}

.bb-formrepeater-item-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-fr-action-gap);
  flex: 0 0 auto;
}

/* =====================================
   Add / Remove Button Helpers
   Keep Bootstrap .btn base.
===================================== */
.bb-formrepeater-btn-add {
  color: var(--bb-fr-add-color);
  background-color: var(--bb-fr-add-bg);
  border-color: var(--bb-fr-add-border-color);
}

.bb-formrepeater-btn-add:hover,
.bb-formrepeater-btn-add:focus {
  color: var(--bb-fr-add-color);
  background-color: var(--bb-fr-add-bg-hover);
  border-color: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-fr-border-color));
}

.bb-formrepeater-btn-remove {
  color: var(--bb-fr-remove-color);
  background-color: var(--bb-fr-remove-bg);
  border-color: var(--bb-fr-remove-border-color);
}

.bb-formrepeater-btn-remove:hover,
.bb-formrepeater-btn-remove:focus {
  color: var(--bb-fr-remove-color);
  background-color: var(--bb-fr-remove-bg-hover);
  border-color: color-mix(in srgb, var(--bb-danger) 38%, var(--bb-fr-border-color));
}

/* =====================================
   Density
===================================== */
[data-bb-density=compact] .bb-formrepeater {
  --bb-fr-gap: 0.75rem;
  --bb-fr-padding: 0.75rem;
}

[data-bb-density=compact] .bb-formrepeater-item-head {
  padding: 0.6rem var(--bb-fr-padding);
}

[data-bb-density=compact] .bb-formrepeater-title {
  font-size: var(--bb-fs-base);
}

[data-bb-density=compact] .bb-formrepeater-subtitle {
  font-size: var(--bb-fs-xs);
}

/* =====================================
   Animation
===================================== */
.bb-formrepeater-item.bb-is-entering {
  animation: bb-formrepeater-in var(--bb-motion-fast, 150ms) var(--bb-ease-out, ease-out) both;
}

@keyframes bb-formrepeater-in {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =====================================
   Responsive
===================================== */
@media (max-width: 575.98px) {
  .bb-formrepeater-header,
  .bb-formrepeater-item-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-formrepeater-actions,
  .bb-formrepeater-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* =====================================
   Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-formrepeater-handle,
  .bb-formrepeater-btn-add,
  .bb-formrepeater-btn-remove {
    transition: none;
  }
  .bb-formrepeater-item.bb-is-entering {
    animation: none;
  }
}
/* =====================================
   Bulbulustur Theme - Input Group
   Bootstrap 5 base preserved
   Prefix: bb-
   Root: .input-group.bb-input-group
   Token-first | Dark/Light safe | PURE
===================================== */
.bb-input-group {
  /* Local tokens */
  --bb-ig-radius: var(--bb-form-control-radius);
  --bb-ig-border-width: var(--bb-form-control-border-width);
  --bb-ig-addon-bg: var(--bb-form-control-bg);
  --bb-ig-addon-color: var(--bb-form-control-color);
  --bb-ig-addon-border-color: var(--bb-form-control-border-color);
  --bb-ig-addon-px: 0.9rem;
  --bb-ig-addon-gap: 0.5rem;
  --bb-ig-icon-size: 1.15rem;
  --bb-ig-focus-border-color: var(--bb-form-control-focus-border-color);
  --bb-ig-solid-bg: var(--bb-form-control-solid-bg);
  --bb-ig-solid-border-color: var(--bb-form-control-solid-border-color);
  --bb-ig-addon-bg-local: var(--bb-ig-addon-bg);
  --bb-ig-addon-border-local: var(--bb-ig-addon-border-color);
  --bb-ig-addon-color-local: var(--bb-ig-addon-color);
  border-radius: var(--bb-ig-radius);
}

/* -------------------------------------
   Addon
------------------------------------- */
.bb-input-group .input-group-text {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-ig-addon-gap);
  padding-left: var(--bb-ig-addon-px);
  padding-right: var(--bb-ig-addon-px);
  color: var(--bb-ig-addon-color-local);
  background-color: var(--bb-ig-addon-bg-local);
  border-color: var(--bb-ig-addon-border-local);
  border-width: var(--bb-ig-border-width);
  border-radius: var(--bb-ig-radius);
}

/* -------------------------------------
   Icons
------------------------------------- */
.bb-input-group .input-group-text .material-symbols-outlined,
.bb-input-group .input-group-text i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-ig-icon-size);
  line-height: 1;
}

/* -------------------------------------
   Focus
   Ring _state.scss tarafından yönetilir.
   Burada sadece border uyumu var.
------------------------------------- */
.bb-input-group:focus-within .input-group-text {
  border-color: var(--bb-ig-focus-border-color);
}

.bb-input-group .form-control,
.bb-input-group .form-select,
.bb-input-group textarea.form-control {
  border-radius: var(--bb-ig-radius);
}

/* -------------------------------------
   Solid variant
   Usage: .input-group.bb-input-group.bb-input-group-solid
------------------------------------- */
.bb-input-group.bb-input-group-solid {
  --bb-ig-addon-bg-local: var(--bb-ig-solid-bg);
  --bb-ig-addon-border-local: var(--bb-ig-solid-border-color);
}

.bb-input-group.bb-input-group-solid .form-control,
.bb-input-group.bb-input-group-solid .form-select,
.bb-input-group.bb-input-group-solid textarea.form-control {
  background-color: var(--bb-ig-solid-bg);
  border-color: var(--bb-ig-solid-border-color);
}

.bb-input-group.bb-input-group-solid:focus-within .form-control,
.bb-input-group.bb-input-group-solid:focus-within .form-select,
.bb-input-group.bb-input-group-solid:focus-within textarea.form-control {
  border-color: var(--bb-ig-focus-border-color);
}

/* -------------------------------------
   Sizing bridge
------------------------------------- */
.bb-input-group.input-group-sm {
  --bb-ig-addon-px: 0.75rem;
  --bb-ig-icon-size: 1.05rem;
}

.bb-input-group.input-group-lg {
  --bb-ig-addon-px: 1.05rem;
  --bb-ig-icon-size: 1.25rem;
}

/* =====================================
   Bulbulustur Theme - Dropdowns
   Bootstrap 5 compatible (dropdown JS)
   Prefix: bb-
   Notes:
   - Hard-coded renk yok -> tokens / Bootstrap CSS vars
   - Bootstrap base class'lar korunur (.dropdown-menu, .dropdown-item ...)
===================================== */
.bb-dropdown-menu {
  /* local tokens (override edilebilir) */
  --bb-dd-bg: var(--bb-body-bg);
  --bb-dd-border: var(--bb-border-color);
  --bb-dd-shadow: var(--bb-shadow-sm);
  --bb-dd-radius: var(--bb-radius-lg);
  --bb-dd-minw: 14rem;
  --bb-dd-pad-x: 0.5rem;
  --bb-dd-pad-y: 0.5rem;
  --bb-dd-item-radius: var(--bb-radius);
  --bb-dd-item-px: 0.75rem;
  --bb-dd-item-py: 0.55rem;
  --bb-dd-item-hover-bg: var(--bb-tertiary-bg);
  --bb-dd-item-active-bg: color-mix(in srgb, var(--bb-primary)14%, transparent);
  --bb-dd-header-color: var(--bb-secondary-color);
  --bb-dd-divider: var(--bb-border-color);
  /* Bootstrap dropdown variable bridge */
  --bs-dropdown-min-width: var(--bb-dd-minw);
  --bs-dropdown-padding-x: var(--bb-dd-pad-x);
  --bs-dropdown-padding-y: var(--bb-dd-pad-y);
  --bs-dropdown-bg: var(--bb-dd-bg);
  --bs-dropdown-border-color: var(--bb-dd-border);
  --bs-dropdown-border-radius: var(--bb-dd-radius);
  --bs-dropdown-link-color: var(--bb-body-color);
  --bs-dropdown-link-hover-color: var(--bb-body-color);
  --bs-dropdown-link-hover-bg: var(--bb-dd-item-hover-bg);
  --bs-dropdown-link-active-color: var(--bb-primary);
  --bs-dropdown-link-active-bg: var(--bb-dd-item-active-bg);
  --bs-dropdown-header-color: var(--bb-dd-header-color);
  --bs-dropdown-divider-bg: var(--bb-dd-divider);
  /* polish */
  border-width: var(--bb-border-width, 1px);
  box-shadow: var(--bb-dd-shadow);
}

/* Menü varyantları */
.bb-dropdown-menu-solid {
  --bb-dd-border: transparent;
  --bb-dd-bg: var(--bb-tertiary-bg);
}

.bb-dropdown-menu-sm {
  --bb-dd-minw: 12rem;
  --bb-dd-pad-x: 0.4rem;
  --bb-dd-pad-y: 0.4rem;
  --bb-dd-item-px: 0.65rem;
  --bb-dd-item-py: 0.45rem;
  --bb-dd-item-radius: var(--bb-radius);
}

.bb-dropdown-menu-lg {
  --bb-dd-minw: 16rem;
  --bb-dd-pad-x: 0.65rem;
  --bb-dd-pad-y: 0.65rem;
  --bb-dd-item-px: 0.9rem;
  --bb-dd-item-py: 0.65rem;
  --bb-dd-item-radius: var(--bb-radius-lg);
}

/* Scrollable menu */
.bb-dropdown-menu-scroll {
  max-height: 320px;
  overflow: auto;
}

/* Item polish (hem bb class ile hem de menu scope içinde çalışsın) */
.bb-dropdown-menu .dropdown-item,
.bb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--bb-dd-item-radius);
  padding: var(--bb-dd-item-py) var(--bb-dd-item-px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Disabled item opacity (token bazlı) */
.bb-dropdown-menu .dropdown-item.disabled,
.bb-dropdown-item.disabled {
  opacity: 0.6;
}

/* Header & divider spacing (Bootstrap base korunur) */
.bb-dropdown-menu .dropdown-header {
  padding-left: var(--bb-dd-item-px);
  padding-right: var(--bb-dd-item-px);
  color: var(--bb-dd-header-color);
}

.bb-dropdown-menu .dropdown-divider {
  margin: 0.5rem 0;
  opacity: 1;
}

/* Item icon helper */
.bb-dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--bb-secondary-color);
}

.bb-dropdown-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.bb-dropdown-item-meta {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

/* Toggle button helper (opsiyonel) */
.bb-btn-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bb-btn-dropdown.dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  margin: 0 !important;
}

/* Split button alignment helper (opsiyonel) */
.bb-btn-dropdown-split {
  display: inline-flex;
  align-items: center;
}

.bb-btn-dropdown-split .dropdown-toggle-split {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dark/light için ekstra iş yok:
   - bb tokens ve bs vars zaten theme ile değişiyor
*/
/* =====================================
   Bulbulustur Theme - Spinner (PURE)
   Bootstrap 5 spinners preserved
   Prefix: bb-
   Supports: border + grow, size + color + overlay
===================================== */
.bb-spinner {
  /* -------------------------------
     Tokens (override-friendly)
  -------------------------------- */
  --bb-spinner-size: 1.5rem;
  --bb-spinner-border-width: 0.2em;
  --bb-spinner-speed: 0.75s;
  /* Use theme tokens (dark/light safe) */
  --bb-spinner-color:var(--bb-primary);
  --bb-spinner-muted: var(--bb-secondary-color);
  /* Bridge to Bootstrap spinner CSS vars */
  --bs-spinner-width: var(--bb-spinner-size);
  --bs-spinner-height: var(--bb-spinner-size);
  --bs-spinner-border-width: var(--bb-spinner-border-width);
  --bs-spinner-animation-speed: var(--bb-spinner-speed);
  color: var(--bb-spinner-color);
}

/* When spinner sits in inline flows nicely */
.bb-spinner-inline {
  vertical-align: -0.125em;
}

/* -------------------------------------
   Sizes
------------------------------------- */
.bb-spinner-xs {
  --bb-spinner-size: 1rem;
  --bb-spinner-border-width: 0.18em;
}

.bb-spinner-sm {
  --bb-spinner-size: 1.25rem;
}

.bb-spinner-md {
  --bb-spinner-size: 1.5rem;
}

.bb-spinner-lg {
  --bb-spinner-size: 2rem;
  --bb-spinner-border-width: 0.22em;
}

.bb-spinner-xl {
  --bb-spinner-size: 2.5rem;
  --bb-spinner-border-width: 0.24em;
}

/* -------------------------------------
   Speeds
------------------------------------- */
.bb-spinner-speed-slow {
  --bb-spinner-speed: 1.05s;
}

.bb-spinner-speed-fast {
  --bb-spinner-speed: 0.55s;
}

/* -------------------------------------
   Colors (token bridge)
   (Bootstrap uses currentColor; we set color)
------------------------------------- */
.bb-spinner-primary {
  --bb-spinner-color:var(--bb-primary);
}

.bb-spinner-secondary {
  --bb-spinner-color: var(--bb-secondary, var(--bs-secondary));
}

.bb-spinner-success {
  --bb-spinner-color: var(--bb-success, var(--bb-success));
}

.bb-spinner-info {
  --bb-spinner-color: var(--bb-info, var(--bb-info));
}

.bb-spinner-warning {
  --bb-spinner-color: var(--bb-warning, var(--bb-warning));
}

.bb-spinner-danger {
  --bb-spinner-color: var(--bb-danger, var(--bb-danger));
}

.bb-spinner-light {
  --bb-spinner-color: var(--bb-light, var(--bb-light));
}

.bb-spinner-dark {
  --bb-spinner-color: var(--bb-dark, var(--bb-dark));
}

.bb-spinner-muted {
  --bb-spinner-color: var(--bb-spinner-muted);
}

/* -------------------------------------
   Button helper (Metronic hissi: label + spinner)
------------------------------------- */
.bb-btn-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Optional: hide label when loading (opt-in) */
.bb-btn-spinner.is-loading .bb-btn-spinner__label {
  opacity: 0.75;
}

/* -------------------------------------
   Overlay helper (card üstü / container üstü)
------------------------------------- */
.bb-spinner-overlay {
  /* local tokens */
  --bb-spinner-overlay-bg: color-mix(in srgb, var(--bb-body-bg) 70%, transparent);
  --bb-spinner-overlay-z: 10;
  --bb-spinner-overlay-radius: inherit;
  --bb-spinner-overlay-blur: 1px;
  position: absolute;
  inset: 0;
  z-index: var(--bb-spinner-overlay-z);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-spinner-overlay-radius);
  background: var(--bb-spinner-overlay-bg);
  backdrop-filter: blur(var(--bb-spinner-overlay-blur));
}

/* Active state */
.bb-spinner-overlay.is-active {
  display: flex;
}

/* Make it easy to anchor overlays */
.bb-spinner-overlay-wrap {
  position: relative;
}

/* =====================================
   Bulbulustur Theme - Dialer (PURE)
   Bootstrap 5 compatible | bb-* prefixed
   Token-first | Dark/Light safe
   Root: .bb-dialer
   ===================================== */
.bb-dialer {
  /* -------------------------------------
     Local tokens (override-friendly)
  -------------------------------------- */
  --bb-dialer-radius: var(--bb-radius, var(--bb-radius));
  --bb-dialer-border-color: var(--bb-border-color);
  --bb-dialer-bg: var(--bb-body-bg);
  --bb-dialer-value-color: var(--bb-emphasis-color, var(--bb-body-color));
  --bb-dialer-muted-color: var(--bb-secondary-color);
  /* Input */
  --bb-dialer-input-min-w: 10rem;
  --bb-dialer-input-align: center;
  --bb-dialer-input-fw: 600;
  --bb-dialer-input-ls: -0.01em;
  /* Buttons (icon buttons) */
  --bb-dialer-btn-size: 2.75rem; /* default ~ form-control height */
  --bb-dialer-btn-radius: var(--bb-radius-lg);
  --bb-dialer-btn-border: var(--bb-dialer-border-color);
  --bb-dialer-btn-bg: transparent;
  --bb-dialer-btn-color: var(--bb-body-color);
  --bb-dialer-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-dialer-btn-active-bg: color-mix(in srgb, var(--bb-primary)10%, transparent);
  /* Focus ring */
  --bb-dialer-focus-ring: var(--bs-focus-ring-box-shadow);
  /* Motion */
  --bb-dialer-transition-speed: 150ms;
  --bb-dialer-transition-ease: ease;
  display: inline-flex;
  align-items: stretch;
}

/* Works best on input-group */
.bb-dialer.input-group {
  width: auto;
}

/* Input */
.bb-dialer .bb-dialer-input.form-control {
  min-width: var(--bb-dialer-input-min-w);
  text-align: var(--bb-dialer-input-align);
  font-weight: var(--bb-dialer-input-fw);
  letter-spacing: var(--bb-dialer-input-ls);
  color: var(--bb-dialer-value-color);
  background-color: var(--bb-dialer-bg);
}

/* Optional hint text */
.bb-dialer .bb-dialer-hint {
  font-size: var(--bb-fs-sm);
  color: var(--bb-dialer-muted-color);
  margin-top: 0.35rem;
}

/* Buttons */
.bb-dialer .bb-dialer-btn.btn {
  /* use your existing .btn token system */
  --bb-btn-padding-x: 0;
  --bb-btn-padding-y: 0;
  --bb-btn-radius: var(--bb-dialer-btn-radius);
  --bb-btn-border-width: var(--bb-border-width, 1px);
  --bb-btn-bg: var(--bb-dialer-btn-bg);
  --bb-btn-color: var(--bb-dialer-btn-color);
  --bb-btn-border-color: var(--bb-dialer-btn-border);
  --bb-btn-hover-bg: var(--bb-dialer-btn-hover-bg);
  --bb-btn-hover-color: var(--bb-dialer-btn-color);
  --bb-btn-hover-border-color: var(--bb-dialer-btn-border);
  --bb-btn-active-bg: var(--bb-dialer-btn-active-bg);
  --bb-btn-active-color: var(--bb-dialer-btn-color);
  --bb-btn-active-border-color: var(--bb-dialer-btn-border);
  width: var(--bb-dialer-btn-size);
  min-width: var(--bb-dialer-btn-size);
  height: var(--bb-dialer-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon sizing (Material Symbols) */
.bb-dialer .bb-dialer-btn .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* Disabled state */
.bb-dialer.is-disabled,
.bb-dialer[aria-disabled=true] {
  opacity: var(--bb-disabled-opacity, 0.55);
  pointer-events: none;
}

/* Sizes */
.bb-dialer.bb-dialer-sm {
  --bb-dialer-btn-size: 2.25rem;
  --bb-dialer-input-min-w: 8.5rem;
  --bb-dialer-btn-radius: var(--bb-radius);
}

.bb-dialer.bb-dialer-lg {
  --bb-dialer-btn-size: 3.25rem;
  --bb-dialer-input-min-w: 12rem;
  --bb-dialer-btn-radius: var(--bb-radius-lg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bb-dialer .bb-dialer-btn.btn,
  .bb-dialer .bb-dialer-input.form-control {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Collapse (PURE)
   Bootstrap 5 compatible | bb-* prefixed
   Token-first | Dark/Light safe
   Root: .bb-collapse
   ===================================== */
.bb-collapse {
  /* -------------------------------------
     Tokens (override-friendly)
  -------------------------------------- */
  --bb-collapse-bg: var(--bb-body-bg);
  --bb-collapse-color: var(--bb-emphasis-color, var(--bs-emphasis-color, var(--bb-body-color)));
  --bb-collapse-border-width: var(--bb-border-width, 1px);
  --bb-collapse-border-color: var(--bb-border-color);
  --bb-collapse-radius: var(--bb-radius-lg, var(--bs-border-radius-lg, 0.75rem));
  --bb-collapse-shadow: var(--bb-shadow-xs, var(--bs-box-shadow-sm, none));
  --bb-collapse-header-px: 1rem;
  --bb-collapse-header-py: 0.9rem;
  --bb-collapse-body-px: 1rem;
  --bb-collapse-body-py: 1rem;
  --bb-collapse-gap: 0.5rem;
  --bb-collapse-toggle-bg: transparent;
  --bb-collapse-toggle-hover-bg: var(--bb-tertiary-bg);
  --bb-collapse-toggle-active-bg: color-mix(in srgb, var(--bb-primary)10%, transparent);
  --bb-collapse-toggle-color: var(--bb-body-color);
  --bb-collapse-toggle-muted: var(--bb-secondary-color);
  --bb-collapse-icon-size: 1.25rem;
  --bb-collapse-icon-rotate: 180deg;
  --bb-collapse-transition: 0.2s ease;
  position: relative;
  border-radius: var(--bb-collapse-radius);
  background: var(--bb-collapse-bg);
  color: var(--bb-collapse-color);
  box-shadow: var(--bb-collapse-shadow);
}

/* -------------------------------------
   Variants
-------------------------------------- */
.bb-collapse.bb-collapse-bordered {
  box-shadow: none;
  border: var(--bb-collapse-border-width) solid var(--bb-collapse-border-color);
}

.bb-collapse.bb-collapse-dashed {
  box-shadow: none;
  border: var(--bb-collapse-border-width) dashed var(--bb-collapse-border-color);
}

.bb-collapse.bb-collapse-flush {
  box-shadow: none;
  border: 0;
  border-radius: var(--bb-radius-none);
  background: transparent;
}

/* -------------------------------------
   Toggle (header button)
-------------------------------------- */
.bb-collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-collapse-gap);
  padding: var(--bb-collapse-header-py) var(--bb-collapse-header-px);
  border: 0;
  background: var(--bb-collapse-toggle-bg);
  color: var(--bb-collapse-toggle-color);
  border-radius: inherit;
  text-align: left;
  transition: background-color var(--bb-collapse-transition), color var(--bb-collapse-transition);
}

.bb-collapse:not(.bb-collapse-flush) .bb-collapse-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Hover/Active */
.bb-collapse-toggle:hover {
  background: var(--bb-collapse-toggle-hover-bg);
}

.bb-collapse-toggle:active {
  background: var(--bb-collapse-toggle-active-bg);
}

/* Title + meta */
.bb-collapse-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.bb-collapse-title > .bb-collapse-heading {
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
  color: var(--bb-collapse-toggle-color);
}

.bb-collapse-title > .bb-collapse-subtitle {
  font-size: var(--bb-fs-sm);
  color: var(--bb-collapse-toggle-muted);
  line-height: var(--bb-line-height-heading);
}

/* Icon */
.bb-collapse-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bb-collapse-icon-size) + 0.5rem);
  height: calc(var(--bb-collapse-icon-size) + 0.5rem);
  border-radius: var(--bb-radius-pill);
  color: var(--bb-collapse-toggle-muted);
  transition: transform var(--bb-collapse-transition), background-color var(--bb-collapse-transition), color var(--bb-collapse-transition);
}

.bb-collapse-toggle:hover .bb-collapse-icon {
  background-color: color-mix(in srgb, var(--bb-body-color) 6%, transparent);
  color: var(--bb-collapse-toggle-color);
}

/* Expanded state (Bootstrap sets: aria-expanded="true" and removes .collapsed) */
.bb-collapse-toggle[aria-expanded=true] .bb-collapse-icon {
  transform: rotate(var(--bb-collapse-icon-rotate));
}

/* -------------------------------------
   Body (content wrapper)
-------------------------------------- */
.bb-collapse .collapse {
  /* Bootstrap handles height; we only keep visuals safe */
}

.bb-collapse-body {
  padding: var(--bb-collapse-body-py) var(--bb-collapse-body-px);
}

.bb-collapse:not(.bb-collapse-flush) .bb-collapse-body {
  border-top: var(--bb-collapse-border-width) solid var(--bb-collapse-border-color);
}

/* When bordered/dashed, keep body inside same radius feel */
.bb-collapse:not(.bb-collapse-flush) .collapse.show .bb-collapse-body {
  border-bottom-left-radius: var(--bb-collapse-radius);
  border-bottom-right-radius: var(--bb-collapse-radius);
}

/* -------------------------------------
   Group (accordion-like stack without Bootstrap accordion markup)
-------------------------------------- */
.bb-collapse-group {
  display: grid;
  gap: 0.75rem;
}

/* -------------------------------------
   Reduced motion
-------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-collapse-toggle,
  .bb-collapse-icon {
    transition: none;
  }
}
/* =====================================
   Bulbulustur Theme - Button Groups
   Bootstrap 5 compatible (base korunur)
   Prefix: bb-
   Token-first (dark/light ready)
===================================== */
/* -------------------------------------------------
  Usage
  - Default Bootstrap group: .btn-group / .btn-toolbar / .btn-group-vertical
  - Bulbulustur polish: add .bb-btn-group to .btn-group (opt-in)
    مثال: <div class="btn-group bb-btn-group">...</div>
-------------------------------------------------- */
.btn-group.bb-btn-group,
.btn-group-vertical.bb-btn-group {
  /* local tokens (override edilebilir) */
  --bb-btg-bg: var(--bb-body-bg);
  --bb-btg-border-color: var(--bb-border-color);
  --bb-btg-border-width: var(--bb-border-width, 1px);
  --bb-btg-radius: var(--bb-radius, var(--bs-border-radius, 0.5rem));
  --bb-btg-padding: 0.25rem;
  --bb-btg-gap: 0.25rem;
  --bb-btg-shadow: none; /* istersen: var(--bb-shadow-xs) */
  /* item tokens */
  --bb-btg-item-radius: calc(var(--bb-btg-radius) - 0.15rem);
  /* button token bridge (child btn) */
  --bb-btg-btn-bg: transparent;
  --bb-btg-btn-color: var(--bb-body-color);
  --bb-btg-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-btg-btn-hover-color: var(--bb-body-color);
  --bb-btg-btn-active-bg: color-mix(in srgb, var(--bb-primary)12%, transparent);
  --bb-btg-btn-active-color: var(--bb-primary);
  --bb-btg-btn-focus-ring: var(--bb-focus-ring-color, var(--bb-primary));
  padding: var(--bb-btg-padding);
  border-radius: var(--bb-btg-radius);
  background-color: var(--bb-btg-bg);
  border: var(--bb-btg-border-width) solid var(--bb-btg-border-color);
  box-shadow: var(--bb-btg-shadow);
  /* segmented hissi */
  gap: var(--bb-btg-gap);
  /* Bootstrap’ın overlap/margin sistemini bb-mode’da kapatıyoruz */
}
.btn-group.bb-btn-group > .btn,
.btn-group.bb-btn-group > .btn-group,
.btn-group-vertical.bb-btn-group > .btn,
.btn-group-vertical.bb-btn-group > .btn-group {
  margin-left: 0 !important;
}
.btn-group.bb-btn-group,
.btn-group-vertical.bb-btn-group {
  /* dropdown’lu child group */
}
.btn-group.bb-btn-group > .btn-group,
.btn-group-vertical.bb-btn-group > .btn-group {
  display: inline-flex;
}
.btn-group.bb-btn-group,
.btn-group-vertical.bb-btn-group {
  /* child buttons: bb button token’larına bağlan */
}
.btn-group.bb-btn-group .btn,
.btn-group-vertical.bb-btn-group .btn {
  --bb-btn-bg: var(--bb-btg-btn-bg);
  --bb-btn-color: var(--bb-btg-btn-color);
  --bb-btn-border-color: transparent;
  --bb-btn-hover-bg: var(--bb-btg-btn-hover-bg);
  --bb-btn-hover-color: var(--bb-btg-btn-hover-color);
  --bb-btn-hover-border-color: transparent;
  --bb-btn-active-bg: var(--bb-btg-btn-active-bg);
  --bb-btn-active-color: var(--bb-btg-btn-active-color);
  --bb-btn-active-border-color: transparent;
  /* group içinde daha “segmented” his */
  border-radius: var(--bb-btg-item-radius) !important;
  box-shadow: none !important;
}
.btn-group.bb-btn-group,
.btn-group-vertical.bb-btn-group {
  /* checked/active states (btn-check / .active / aria-pressed) */
}
.btn-group.bb-btn-group .btn-check:checked + .btn,
.btn-group.bb-btn-group .btn.active,
.btn-group.bb-btn-group .btn[aria-pressed=true],
.btn-group-vertical.bb-btn-group .btn-check:checked + .btn,
.btn-group-vertical.bb-btn-group .btn.active,
.btn-group-vertical.bb-btn-group .btn[aria-pressed=true] {
  --bb-btn-bg: var(--bb-btg-btn-active-bg);
  --bb-btn-color: var(--bb-btg-btn-active-color);
}

/* -------------------------------------------------
  Variants (bb-)
-------------------------------------------------- */
/* Pill group */
.btn-group.bb-btn-group-pill,
.btn-group-vertical.bb-btn-group-pill {
  --bb-btg-radius: var(--bb-radius-pill, 50rem);
  --bb-btg-item-radius: var(--bb-radius-pill, 50rem);
}

/* Compact density */
.btn-group.bb-btn-group-compact,
.btn-group-vertical.bb-btn-group-compact {
  --bb-btg-padding: 0.15rem;
  --bb-btg-gap: 0.15rem;
}

/* “Soft surface” (Metronic hissi ama kopya değil) */
.btn-group.bb-btn-group-soft,
.btn-group-vertical.bb-btn-group-soft {
  --bb-btg-bg: var(--bb-tertiary-bg);
  --bb-btg-border-color: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
}

/* Toolbar polish (opt-in) */
.btn-toolbar.bb-btn-toolbar {
  --bb-bt-gap: 0.75rem;
  gap: var(--bb-bt-gap);
}

/* -------------------------------------------------
  Notes:
  - Default Bootstrap .btn-group davranışına dokunmuyoruz.
  - bb-* sadece opt-in class ile devreye girer.
-------------------------------------------------- */
/* =====================================
   Product Quick View
===================================== */
.bb-product-card-quick-view {
  position: absolute;
  left: var(--bb-spacer-3);
  right: var(--bb-spacer-3);
  bottom: var(--bb-spacer-3);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-spacer-2);
  min-height: 2.375rem;
  padding: 0.55rem 0.9rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 58%, transparent);
  border-radius: var(--bb-radius-pill);
  background: color-mix(in srgb, var(--bb-emphasis-color) 84%, transparent);
  color: var(--bb-body-bg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--bb-shadow-sm);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--bb-transition-base), transform var(--bb-transition-base), border-color var(--bb-transition-base), background var(--bb-transition-base), color var(--bb-transition-base);
  backdrop-filter: blur(14px);
}

.bb-product-card:hover .bb-product-card-quick-view,
.bb-product-card:focus-within .bb-product-card-quick-view {
  opacity: 1;
  transform: translateY(0);
}

.bb-product-card-quick-view:hover,
.bb-product-card-quick-view:focus-visible {
  border-color: color-mix(in srgb, var(--bb-primary) 72%, transparent);
  background: color-mix(in srgb, var(--bb-emphasis-color) 94%, transparent);
  color: var(--bb-body-bg);
  text-decoration: none;
}

.bb-product-card-quick-view .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* =====================================
   Modal Bridge
===================================== */
.bb-product-quick-view-modal {
  --bs-modal-bg: transparent;
}

.bb-product-quick-view-dialog {
  max-width: min(1120px, 100vw - 2rem);
}

/* =====================================
   Shell
===================================== */
.bb-product-quick-view {
  position: relative;
  overflow: hidden;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: var(--bb-radius-2xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 34%), var(--bb-body-bg);
  color: var(--bb-body-color);
  box-shadow: var(--bb-shadow-lg);
}

.bb-product-quick-view-close {
  position: absolute;
  top: var(--bb-spacer-4);
  right: var(--bb-spacer-4);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius-pill);
  background: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  color: var(--bb-body-color);
  box-shadow: var(--bb-shadow-sm);
  transition: transform var(--bb-transition-base), background var(--bb-transition-base), border-color var(--bb-transition-base), color var(--bb-transition-base);
  backdrop-filter: blur(14px);
}

.bb-product-quick-view-close:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, transparent);
  background: var(--bb-body-bg);
  color: var(--bb-emphasis-color);
}

.bb-product-quick-view-close .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-product-quick-view-inner {
  min-height: 32rem;
}

.bb-product-quick-view-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1rem, 3vw, 1.75rem);
}

/* =====================================
   Gallery
===================================== */
.bb-product-quick-view-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--bb-spacer-3);
  min-width: 0;
}

.bb-product-quick-view-media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 31rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 68%, transparent);
  border-radius: var(--bb-radius-xl);
  background: radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--bb-primary) 12%, transparent), transparent 34%), var(--bb-tertiary-bg);
}

.bb-product-quick-view-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 31rem;
  object-fit: contain;
}

.bb-product-quick-view-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 4.75rem;
  gap: var(--bb-spacer-2);
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}

.bb-product-quick-view-thumb {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-body-bg);
  color: var(--bb-body-color);
  cursor: pointer;
  transition: border-color var(--bb-transition-base), box-shadow var(--bb-transition-base), transform var(--bb-transition-base), background var(--bb-transition-base);
}

.bb-product-quick-view-thumb:hover,
.bb-product-quick-view-thumb.active {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-product-quick-view-thumb:hover {
  transform: translateY(-1px);
}

.bb-product-quick-view-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =====================================
   Content
===================================== */
.bb-product-quick-view-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(0.5rem, 2vw, 1rem) clamp(0.25rem, 1vw, 0.5rem);
}

.bb-product-quick-view-head {
  display: grid;
  gap: var(--bb-spacer-2);
  padding-right: 3.5rem;
}

.bb-product-quick-view-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-spacer-2);
  margin-bottom: 0.15rem;
}

.bb-product-quick-view-brand {
  width: fit-content;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-product-quick-view-brand:hover {
  color: var(--bb-link-hover-color);
  text-decoration: none;
}

.bb-product-quick-view-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-title);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-product-quick-view-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-product-quick-view-rating .material-symbols-outlined {
  color: var(--bb-warning);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
  font-variation-settings: "FILL" 1;
}

.bb-product-quick-view-rating strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-product-quick-view-price-block {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding-top: clamp(1rem, 2.5vw, 1.5rem);
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 70%, transparent);
}

.bb-product-quick-view-price {
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--bb-fw-title);
  line-height: 1;
  letter-spacing: -0.04em;
}

.bb-product-quick-view-price-note {
  margin-top: 0.35rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-product-quick-view-summary {
  margin: clamp(1rem, 2vw, 1.25rem) 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Options
===================================== */
.bb-product-quick-view-options {
  display: grid;
  gap: var(--bb-spacer-4);
  margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
}

.bb-product-quick-view-option-group {
  display: grid;
  gap: var(--bb-spacer-2);
}

.bb-product-quick-view-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-spacer-3);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-product-quick-view-option-head strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-product-quick-view-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-spacer-2);
}

.bb-product-quick-view-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  min-width: 2.875rem;
  padding: 0.55rem 0.85rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-body-bg);
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--bb-transition-base), background var(--bb-transition-base), color var(--bb-transition-base), box-shadow var(--bb-transition-base);
}

.bb-product-quick-view-option:hover,
.bb-product-quick-view-option.active {
  border-color: var(--bb-primary);
  background: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  color: var(--bb-emphasis-color);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-product-quick-view-option:disabled {
  opacity: var(--bb-opacity-disabled);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* =====================================
   Actions
===================================== */
.bb-product-quick-view-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--bb-spacer-2);
  margin-top: auto;
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.bb-product-quick-view-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-product-quick-view-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-product-quick-view-cart-btn {
  padding-inline: clamp(1.1rem, 3vw, 2rem);
}

/* =====================================
   Loading / Error
===================================== */
.bb-product-quick-view-loading,
.bb-product-quick-view-error {
  display: flex;
  align-items: center;
  gap: var(--bb-spacer-3);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--bb-body-color);
}

.bb-product-quick-view-loading[hidden],
.bb-product-quick-view-error[hidden] {
  display: none;
}

.bb-product-quick-view-spinner {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border: 0.22rem solid color-mix(in srgb, var(--bb-border-color) 42%, transparent);
  border-top-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  animation: bb-product-quick-view-spin 800ms linear infinite;
}

.bb-product-quick-view-loading-content {
  display: grid;
  gap: 0.2rem;
}

.bb-product-quick-view-loading-content strong,
.bb-product-quick-view-error strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-title);
}

.bb-product-quick-view-loading-content span,
.bb-product-quick-view-error p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-product-quick-view-error > .material-symbols-outlined {
  color: var(--bb-danger);
  font-size: var(--bb-icon-size-2xl);
}

.bb-product-quick-view-close {
  top: var(--bb-spacer-4);
  right: var(--bb-spacer-4);
  left: auto;
}

@keyframes bb-product-quick-view-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-product-quick-view-dialog {
    max-width: calc(100vw - 1rem);
    margin-inline: 0.5rem;
  }
  .bb-product-quick-view-body {
    grid-template-columns: 1fr;
  }
  .bb-product-quick-view-media {
    min-height: 22rem;
  }
  .bb-product-quick-view-media img {
    max-height: 22rem;
  }
  .bb-product-quick-view-content {
    padding-bottom: 0;
  }
  .bb-product-quick-view-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    grid-template-columns: 1fr 1fr;
    margin-inline: calc(clamp(1rem, 3vw, 1.75rem) * -1);
    margin-bottom: calc(clamp(1rem, 3vw, 1.75rem) * -1);
    padding: var(--bb-spacer-3);
    border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bb-body-bg) 92%, transparent);
    backdrop-filter: blur(16px);
  }
  .bb-product-quick-view-detail-btn {
    grid-column: span 2;
  }
}
@media (max-width: 575.98px) {
  .bb-product-card-quick-view {
    position: static;
    width: 100%;
    margin-top: var(--bb-spacer-2);
    opacity: 1;
    transform: none;
  }
  .bb-product-quick-view-dialog {
    align-items: flex-end;
    max-width: 100vw;
    min-height: 100%;
    margin: 0;
  }
  .bb-product-quick-view {
    min-height: auto;
    max-height: calc(100vh - 1rem);
    border-radius: var(--bb-radius-2xl) var(--bb-radius-2xl) 0 0;
    overflow-y: auto;
  }
  .bb-product-quick-view-close {
    top: 0.75rem;
    right: 0.75rem;
  }
  .bb-product-quick-view-body {
    padding: 0.75rem;
    gap: var(--bb-spacer-3);
  }
  .bb-product-quick-view-media {
    min-height: 18rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-product-quick-view-media img {
    max-height: 18rem;
  }
  .bb-product-quick-view-head {
    padding-right: 0;
  }
  .bb-product-quick-view-price {
    font-size: var(--bb-icon-size-2xl);
  }
  .bb-product-quick-view-actions {
    grid-template-columns: 1fr;
    margin-inline: -0.75rem;
    margin-bottom: -0.75rem;
  }
  .bb-product-quick-view-detail-btn {
    grid-column: auto;
  }
}
/* ================================================== */
/* ================================================== */
/* ================================================== */
/* ================================================== */
/* 6. Sample Draugr / Commerce Components */
/* =====================================
   Bulbulustur – Product Rail
   Prefix: bb-
   Purpose:
   - Çok satanlar / vitrin / highlight ürünleri
   - Yuvarlak görsel + label
===================================== */
.bb-product-rail {
  /* tokens */
  --bb-rail-bg: var(--bb-tertiary-bg);
  --bb-rail-gap: 1.25rem;
  --bb-rail-padding-y: 1.25rem;
  --bb-rail-padding-x: 1rem;
  --bb-rail-item-size: 96px;
  --bb-rail-item-radius: 50%;
  --bb-rail-label-size: 0.75rem;
  --bb-rail-label-color: var(--bb-secondary-color);
  background-color: var(--bb-rail-bg);
  padding: var(--bb-rail-padding-y) var(--bb-rail-padding-x);
}

/* Row */
.bb-product-rail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-rail-gap);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.bb-product-rail-row::-webkit-scrollbar {
  display: none;
}

/* Item */
.bb-product-rail-item {
  flex: 0 0 auto;
  text-align: center;
}

.bb-product-rail-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

/* Image */
.bb-product-rail-image {
  width: var(--bb-rail-item-size);
  height: var(--bb-rail-item-size);
  border-radius: var(--bb-rail-item-radius);
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-product-rail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Label */
.bb-product-rail-label {
  font-size: var(--bb-rail-label-size);
  font-weight: var(--bb-fw-medium);
  color: var(--bb-rail-label-color);
  line-height: var(--bb-line-height-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Hover */
.bb-product-rail-link:hover .bb-product-rail-image {
  box-shadow: var(--bb-shadow-sm);
  border-color: var(--bb-primary);
}

.bb-product-rail-link:hover .bb-product-rail-label {
  color: var(--bb-primary);
}

/* =====================================
   Bulbulustur Theme - Product Gallery
   Token-first product image gallery
   Root: .bb-product-gallery

   Features:
   - Main image stage
   - Bottom thumbnails
   - Left thumbnails modifier
   - Favorite overlay action
   - Lightbox / gallery modal
   - Caption support
   - Light/Dark safe
===================================== */
.bb-product-gallery {
  --bb-pg-main-height: 35rem;
  --bb-pg-main-height-lg: 30rem;
  --bb-pg-main-height-sm: 22.5rem;
  --bb-pg-bg: var(--bb-tertiary-bg);
  --bb-pg-surface-bg: var(--bb-body-bg);
  --bb-pg-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-pg-radius: var(--bb-radius-xl);
  --bb-pg-radius-sm: var(--bb-radius-lg);
  --bb-pg-thumb-radius: var(--bb-radius);
  --bb-pg-shadow: var(--bb-shadow-xs);
  --bb-pg-stage-padding: clamp(0.75rem, 2vw, 1.25rem);
  --bb-pg-control-size: 2.625rem;
  --bb-pg-control-bg: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  --bb-pg-control-color: var(--bb-emphasis-color);
  --bb-pg-control-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-pg-action-size: 2.625rem;
  --bb-pg-action-bg: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  --bb-pg-action-color: var(--bb-emphasis-color);
  --bb-pg-action-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-pg-thumb-width: 5.25rem;
  --bb-pg-thumb-height: 6rem;
  --bb-pg-thumb-gap: 0.5rem;
  --bb-pg-thumb-active-color: var(--bb-primary);
  --bb-pg-caption-bg: color-mix(in srgb, var(--bb-body-bg) 92%, transparent);
  --bb-pg-caption-color: var(--bb-secondary-color);
  --bb-pg-transition: var(--bb-transition-fast);
  width: 100%;
  min-width: 0;
}

/* -------------------------------------
   Main stage
------------------------------------- */
.bb-product-gallery-main {
  position: relative;
  width: 100%;
  height: var(--bb-pg-main-height);
  min-height: var(--bb-pg-main-height);
  overflow: hidden;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 18rem), var(--bb-pg-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-pg-radius);
}

.bb-product-gallery-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bb-product-gallery-track {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.bb-product-gallery-track::-webkit-scrollbar {
  display: none;
}

.bb-product-gallery-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.bb-product-gallery-open {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.bb-product-gallery-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: var(--bb-pg-stage-padding);
}

.bb-product-gallery-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: none;
  padding: 0.65rem 0.8rem;
  color: var(--bb-pg-caption-color);
  background-color: var(--bb-pg-caption-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-meta);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-product-gallery-slide.has-caption .bb-product-gallery-caption {
  display: block;
}

/* -------------------------------------
   Overlay actions
------------------------------------- */
.bb-product-gallery-favorite,
.bb-product-gallery-lightbox-favorite {
  width: var(--bb-pg-action-size);
  height: var(--bb-pg-action-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-pg-action-color);
  background-color: var(--bb-pg-action-bg);
  border: var(--bb-border-width) solid var(--bb-pg-action-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-pg-shadow);
  text-decoration: none;
  transition: transform var(--bb-pg-transition), color var(--bb-pg-transition), background-color var(--bb-pg-transition), border-color var(--bb-pg-transition);
}

.bb-product-gallery-favorite {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 4;
}

.bb-product-gallery-favorite:hover,
.bb-product-gallery-lightbox-favorite:hover {
  color: var(--bb-danger);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-danger) 28%, var(--bb-border-color));
  transform: translateY(-0.0625rem);
}

.bb-product-gallery-favorite .material-symbols-outlined,
.bb-product-gallery-lightbox-favorite .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-product-gallery-favorite:hover .material-symbols-outlined,
.bb-product-gallery-lightbox-favorite:hover .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* -------------------------------------
   Controls
------------------------------------- */
.bb-product-gallery-control {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: var(--bb-pg-control-size);
  height: var(--bb-pg-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-pg-control-color);
  background-color: var(--bb-pg-control-bg);
  border: var(--bb-border-width) solid var(--bb-pg-control-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-pg-shadow);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform var(--bb-pg-transition), color var(--bb-pg-transition), background-color var(--bb-pg-transition), border-color var(--bb-pg-transition), opacity var(--bb-pg-transition);
}

.bb-product-gallery-control:hover {
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
  transform: translateY(-50%) scale(1.035);
}

.bb-product-gallery-control:active {
  transform: translateY(-50%) scale(0.97);
}

.bb-product-gallery-control[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.bb-product-gallery-control .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

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

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

/* -------------------------------------
   Thumbnails
------------------------------------- */
.bb-product-gallery-thumbs {
  width: min(100%, 31rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-pg-thumb-gap);
  margin: 1rem auto 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.125rem 0.125rem 0.35rem;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

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

.bb-product-gallery-thumb {
  position: relative;
  width: var(--bb-pg-thumb-width);
  height: var(--bb-pg-thumb-height);
  flex: 0 0 var(--bb-pg-thumb-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background-color: var(--bb-pg-surface-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-pg-thumb-radius);
  box-shadow: inset 0 -2px 0 transparent;
  cursor: pointer;
  transition: transform var(--bb-pg-transition), border-color var(--bb-pg-transition), box-shadow var(--bb-pg-transition);
}

.bb-product-gallery-thumb:hover {
  transform: translateY(-0.0625rem);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
}

.bb-product-gallery-thumb.is-active {
  border-color: var(--bb-pg-border-color);
  box-shadow: inset 0 -0.1875rem 0 var(--bb-pg-thumb-active-color);
}

.bb-product-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0.25rem;
}

/* -------------------------------------
   Variant: left thumbnails
------------------------------------- */
.bb-product-gallery-thumbs-left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.bb-product-gallery-thumbs-left .bb-product-gallery-main {
  grid-column: 2;
  grid-row: 1;
}

.bb-product-gallery-thumbs-left .bb-product-gallery-thumbs {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-height: var(--bb-pg-main-height);
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-product-gallery-empty .bb-product-gallery-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-product-gallery-empty-state {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: var(--bb-secondary-color);
  text-align: center;
}

.bb-product-gallery-empty-state .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-product-gallery-empty-state strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

/* =====================================
   Product Gallery Lightbox
===================================== */
.bb-product-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  color: var(--bb-body-color);
  background-color: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  backdrop-filter: blur(0.35rem);
}

.bb-product-gallery-lightbox.is-active {
  display: block;
}

.bb-product-gallery-lightbox-panel {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2vw, 2rem);
}

.bb-product-gallery-lightbox-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-pg-radius);
}

.bb-product-gallery-lightbox-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.bb-product-gallery-lightbox-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-pg-radius);
}

.bb-product-gallery-lightbox-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.bb-product-gallery-lightbox-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-product-gallery-lightbox-counter {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-meta);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-product-gallery-lightbox-caption {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.65;
}

.bb-product-gallery-lightbox-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid var(--bb-pg-border-color);
}

.bb-product-gallery-lightbox-thumb {
  width: 3.75rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-radius-sm);
  cursor: pointer;
}

.bb-product-gallery-lightbox-thumb.is-active {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-product-gallery-lightbox-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0.1875rem;
}

.bb-product-gallery-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1090;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-sm);
  cursor: pointer;
}

.bb-product-gallery-lightbox-close:hover {
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-product-gallery-lightbox-close .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-product-gallery-lightbox-control {
  position: fixed;
  top: 50%;
  z-index: 1090;
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-pg-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
}

.bb-product-gallery-lightbox-control:hover {
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-product-gallery-lightbox-control-prev {
  left: 1rem;
}

.bb-product-gallery-lightbox-control-next {
  right: 22rem;
}

.bb-product-gallery-lightbox-control .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

body.bb-product-gallery-lightbox-open {
  overflow: hidden;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-product-gallery-main {
    height: var(--bb-pg-main-height-lg);
    min-height: var(--bb-pg-main-height-lg);
  }
  .bb-product-gallery-thumbs-left {
    display: block;
  }
  .bb-product-gallery-thumbs-left .bb-product-gallery-thumbs {
    width: min(100%, 31rem);
    max-height: none;
    flex-direction: row;
    justify-content: center;
    margin: 1rem auto 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .bb-product-gallery-lightbox-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .bb-product-gallery-lightbox-side {
    max-height: 16rem;
  }
  .bb-product-gallery-lightbox-control-next {
    right: 1rem;
  }
}
@media (max-width: 575.98px) {
  .bb-product-gallery {
    --bb-pg-thumb-width: 4.5rem;
    --bb-pg-thumb-height: 5rem;
    --bb-pg-control-size: 2.375rem;
    --bb-pg-action-size: 2.375rem;
  }
  .bb-product-gallery-main {
    height: var(--bb-pg-main-height-sm);
    min-height: var(--bb-pg-main-height-sm);
    border-radius: var(--bb-pg-radius-sm);
  }
  .bb-product-gallery-control-prev {
    left: 0.5rem;
  }
  .bb-product-gallery-control-next {
    right: 0.5rem;
  }
  .bb-product-gallery-favorite {
    top: 0.625rem;
    right: 0.625rem;
  }
  .bb-product-gallery-thumbs {
    justify-content: flex-start;
    width: 100%;
    margin-top: 0.75rem;
  }
  .bb-product-gallery-lightbox-panel {
    gap: 0.75rem;
    padding: 0.75rem;
  }
  .bb-product-gallery-lightbox-stage,
  .bb-product-gallery-lightbox-side {
    border-radius: var(--bb-radius-lg);
  }
  .bb-product-gallery-lightbox-side {
    padding: 0.875rem;
  }
  .bb-product-gallery-lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }
  .bb-product-gallery-lightbox-control {
    width: 2.5rem;
    height: 2.5rem;
  }
  .bb-product-gallery-lightbox-control-prev {
    left: 0.75rem;
  }
  .bb-product-gallery-lightbox-control-next {
    right: 0.75rem;
  }
}
/* -------------------------------------
   Reduced Motion
------------------------------------- */
/* -------------------------------------
   Overlay actions
------------------------------------- */
.bb-product-gallery-actions {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.bb-product-gallery-action,
.bb-product-gallery-favorite,
.bb-product-gallery-similar-trigger,
.bb-product-gallery-lightbox-favorite {
  width: var(--bb-pg-action-size);
  height: var(--bb-pg-action-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-pg-action-color);
  background-color: var(--bb-pg-action-bg);
  border: var(--bb-border-width) solid var(--bb-pg-action-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-pg-shadow);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--bb-pg-transition), color var(--bb-pg-transition), background-color var(--bb-pg-transition), border-color var(--bb-pg-transition);
}

/* Backward safety: if old favorite is used without wrapper */
.bb-product-gallery-main > .bb-product-gallery-favorite {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 4;
}

.bb-product-gallery-actions .bb-product-gallery-favorite {
  position: static;
}

.bb-product-gallery-action:hover,
.bb-product-gallery-favorite:hover,
.bb-product-gallery-lightbox-favorite:hover {
  color: var(--bb-danger);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-danger) 28%, var(--bb-border-color));
  transform: translateY(-0.0625rem);
}

.bb-product-gallery-similar-trigger:hover {
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-product-gallery-action .material-symbols-outlined,
.bb-product-gallery-favorite .material-symbols-outlined,
.bb-product-gallery-similar-trigger .material-symbols-outlined,
.bb-product-gallery-lightbox-favorite .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-product-gallery-favorite:hover .material-symbols-outlined,
.bb-product-gallery-lightbox-favorite:hover .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-product-gallery-thumbs {
  scroll-snap-type: x proximity;
}

.bb-product-gallery-thumb {
  scroll-snap-align: start;
}

@media (max-width: 575.98px) {
  .bb-product-gallery-thumbs {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.45rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bb-product-gallery {
    --bb-pg-transition: 0s;
  }
  .bb-product-gallery-track {
    scroll-behavior: auto;
  }
  .bb-product-gallery-control,
  .bb-product-gallery-favorite,
  .bb-product-gallery-thumb {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  .bb-product-gallery-actions {
    top: 0.625rem;
    right: 0.625rem;
    gap: 0.35rem;
  }
}
/* =====================================
   Product Item (bb-product-item)
===================================== */
.bb-product-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--bb-body-bg);
}

/* MEDIA */
.bb-product-media {
  position: relative;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  background: var(--bb-secondary-bg);
  aspect-ratio: 1/1;
}
.bb-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.bb-product-media:hover img {
  transform: scale(1.03);
}

/* BADGES */
.bb-product-badges {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
}

.bb-badge-discount {
  background: var(--bb-danger);
  color: var(--bb-white);
  font-size: var(--bb-fs-xs);
  padding: 0.25rem 0.5rem;
  border-radius: var(--bb-radius-pill);
}

/* FAVORITE */
.bb-product-fav {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  background: var(--bb-body-bg);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bb-border-color);
}

/* META */
.bb-product-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bb-product-title {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  color: var(--bb-body-color);
  text-decoration: none;
}

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

.bb-price-old {
  text-decoration: line-through;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-price-current {
  font-weight: var(--bb-fw-semibold);
}

/* BASKET NOTE */
.bb-product-basket-note {
  font-size: var(--bb-fs-xs);
  color: var(--bb-danger);
}

/* ACTIONS */
.bb-product-actions {
  margin-top: auto;
}

/* =====================================
   Product List Grid (LAYOUT ONLY)
===================================== */
.bb-product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.bb-product-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.bb-product-actions .bb-btn {
  width: 100%;
}

/* =====================================
   Product List Toolbar
===================================== */
.bb-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  background: var(--bb-body-bg);
  margin-bottom: 1rem;
}

/* LEFT */
.bb-list-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-list-count {
  font-size: var(--bb-fs-sm);
  color: var(--bb-secondary-color);
}

/* RIGHT */
.bb-list-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bb-view-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bb-border-color);
  background: transparent;
  border-radius: var(--bb-radius);
  cursor: pointer;
  color: var(--bb-secondary-color);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bb-view-btn span {
  font-size: var(--bb-icon-size-md);
}
.bb-view-btn:hover {
  background: var(--bb-tertiary-bg);
  color: var(--bb-body-color);
}
.bb-view-btn.is-active {
  background: var(--bb-body-color);
  color: var(--bb-body-bg);
  border-color: var(--bb-body-color);
}

/* Desktop */
@media (min-width: 1200px) {
  .bb-product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* =====================================
   Filter Sidebar (MVP)
   Prefix: bb-
===================================== */
.bb-filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* GROUP */
.bb-filter-group {
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  overflow: hidden;
  background: var(--bb-body-bg);
}

/* TITLE */
.bb-filter-title {
  padding: 0.5rem 0.75rem;
  font-weight: var(--bb-fw-semibold);
  font-size: var(--bb-fs-sm);
  background: var(--bb-tertiary-bg);
  border-bottom: 1px solid var(--bb-border-color);
}

/* LIST */
.bb-filter-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ITEM */
.bb-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--bb-fs-sm);
  cursor: pointer;
  user-select: none;
}
.bb-filter-item input {
  margin-top: 0;
}

/* =====================================
   Auth Page (Login / Register)
   Scope: page
===================================== */
.bb-auth {
  max-width: 420px;
  margin-inline: auto;
  background-color: var(--bb-surface-elevated);
}

/* Tabs */
.bb-auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--bb-border-color);
  margin-bottom: 1.5rem;
}

.bb-auth-tab {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0;
  font-weight: var(--bb-fw-medium);
  color: var(--bb-secondary-color);
  cursor: pointer;
  position: relative;
}
.bb-auth-tab.is-active {
  color: var(--bb-body-color);
}
.bb-auth-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--bb-primary);
}

/* Form spacing */
.bb-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Checkbox group */
.bb-auth-checks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bb-auth-checks label {
  font-size: var(--bb-fs-sm);
}

/* Footer links */
.bb-auth-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.bb-auth-footer a {
  font-size: var(--bb-fs-sm);
  text-decoration: none;
}

/* Submit */
.bb-auth-submit {
  margin-top: 1.25rem;
}

/* 7. Status Pages */
/* Status projesinin genel token, shell, header, footer, card, border, radius ve layout varsayılanları burada. */
/* =====================================
   Status Project Theme Scope
   Main CSS tokenlarını status projesi içinde ayarlar.
   Yeni özel renk sistemi kurmaz.
   Light/Dark safe.
===================================== */
.bb-status-page {
  /* Semantic theme */
  --bb-theme-primary: var(--bb-color-blue-500);
  --bb-theme-primary-rgb: 45, 125, 255;
  --bb-theme-success: var(--bb-color-green-700);
  --bb-theme-success-rgb: 19, 138, 73;
  --bb-theme-warning: var(--bb-color-yellow-600);
  --bb-theme-warning-rgb: 242, 177, 0;
  --bb-theme-danger: var(--bb-color-red-500);
  --bb-theme-danger-rgb: 240, 74, 106;
  --bb-theme-info: var(--bb-color-blue-500);
  --bb-theme-info-rgb: 59, 130, 246;
  --bb-theme-dark: var(--bb-color-navy-800);
  --bb-theme-dark-rgb: 7, 27, 57;
  /* Surfaces */
  --bb-body-bg: var(--bb-white);
  --bb-secondary-bg: var(--bb-surface-soft);
  --bb-tertiary-bg: var(--bb-color-navy-50);
  /* Text */
  --bb-body-color: #101828;
  --bb-heading-color: #101828;
  --bb-secondary-color: var(--bb-color-gray-600);
  --bb-tertiary-color: var(--bb-color-gray-700);
  /* Borders */
  --bb-border-color: #dfe7f1;
  --bb-border-color-strong: #cfd9e6;
  /* Status project defaults */
  --bb-status-container-max-width: 1320px;
  --bb-status-container-x: 40px;
  --bb-status-container-x-mobile: 20px;
  --bb-status-card-bg: var(--bb-body-bg);
  --bb-status-card-border-color: var(--bb-border-color);
  --bb-status-card-border: 1px solid var(--bb-status-card-border-color);
  --bb-status-card-radius: var(--bb-radius-2xl);
  --bb-status-card-inner-radius: var(--bb-radius-lg);
  --bb-status-card-shadow: var(--bb-shadow-xs);
  --bb-status-card-padding: 18px;
  --bb-status-panel-bg: var(--bb-body-bg);
  --bb-status-panel-border: 1px solid var(--bb-border-color);
  --bb-status-panel-radius: var(--bb-radius-lg);
  --bb-status-pill-radius: var(--bb-radius-pill);
  --bb-status-section-gap: 16px;
  --bb-status-stack-gap: 0.875rem;
  min-height: 100vh;
  background-color: var(--bb-body-bg);
  color: var(--bb-body-color);
}

[data-bs-theme=dark] .bb-status-page,
.bb-status-page[data-bs-theme=dark] {
  /* Semantic theme */
  --bb-theme-primary: var(--bb-color-blue-400);
  --bb-theme-primary-rgb: 104, 161, 255;
  --bb-theme-success: var(--bb-color-green-400);
  --bb-theme-success-rgb: 71, 217, 144;
  --bb-theme-warning: var(--bb-color-yellow-400);
  --bb-theme-warning-rgb: 255, 212, 90;
  --bb-theme-danger: var(--bb-color-red-400);
  --bb-theme-danger-rgb: 255, 111, 143;
  --bb-theme-info: var(--bb-color-blue-300);
  --bb-theme-info-rgb: 142, 184, 255;
  --bb-theme-dark: var(--bb-color-ink-300);
  --bb-theme-dark-rgb: 16, 24, 39;
  /* Surfaces */
  --bb-body-bg: #0b0f17;
  --bb-secondary-bg: var(--bb-color-ink-300);
  --bb-tertiary-bg: var(--bb-color-navy-900);
  /* Text */
  --bb-body-color: #e8edf6;
  --bb-heading-color: #f3f6fb;
  --bb-secondary-color: rgba(232, 237, 246, .76);
  --bb-tertiary-color: rgba(232, 237, 246, .62);
  /* Borders */
  --bb-border-color: rgba(183, 196, 218, .14);
  --bb-border-color-strong: rgba(183, 196, 218, .22);
}

/* =====================================
   Status Project Carrier Defaults
===================================== */
.bb-status-card,
.bb-status-component-card,
.bb-status-component-side-card,
.bb-status-overall-card,
.bb-status-affected-card,
.bb-status-updates-card,
.bb-status-subscribe-card {
  border: var(--bb-status-card-border);
  border-radius: var(--bb-status-card-radius);
  background-color: var(--bb-status-card-bg);
  box-shadow: var(--bb-status-card-shadow);
}

.bb-status-component-item,
.bb-status-event-item,
.bb-status-history-item,
.bb-status-history-link,
.bb-status-component-side-item,
.bb-status-component-side-empty,
.bb-status-component-metric {
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background-color: var(--bb-status-panel-bg);
}

.bb-status-label,
.bb-status-card-chip,
.bb-status-component-state,
.bb-status-pill,
.bb-status-tag,
.bb-status-event-badge,
.bb-status-incident-badge,
.bb-status-timeline-state,
.bb-status-component-section-label {
  border-radius: var(--bb-status-pill-radius);
}

/* =====================================
   Status Layout Shell
===================================== */
.bb-status-container {
  width: min(var(--bb-status-container-max-width), 100% - var(--bb-status-container-x));
  margin: 0 auto;
}

.bb-status-header {
  background-color: var(--bb-body-bg);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-status-header-inner {
  min-height: 98px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0;
}

.bb-status-brand {
  display: inline-flex;
  align-items: center;
  max-width: 350px;
  text-decoration: none;
}

.bb-status-brand img {
  display: block;
  width: auto;
  height: 40px;
}

.bb-status-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-status-main,
.bb-status-history-main,
.bb-status-detail-main,
.bb-status-component-main {
  background-color: var(--bb-secondary-bg);
  min-height: 720px;
}

.bb-status-main {
  padding: 0 0 36px;
}

.bb-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(320px, 0.9fr);
  gap: var(--bb-status-section-gap);
  align-items: start;
}

.bb-status-left,
.bb-status-right {
  display: flex;
  flex-direction: column;
  gap: var(--bb-status-stack-gap);
  min-width: 0;
}

/* =====================================
   Footer
===================================== */
.bb-status-footer {
  background-color: var(--bb-body-bg);
  border-top: 1px solid var(--bb-border-color);
}

.bb-status-footer-inner {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 0 18px;
}

.bb-status-footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4375rem;
  min-width: 0;
}

.bb-status-footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bb-status-footer-brand img {
  display: block;
  width: auto;
  height: 34px;
}

.bb-status-footer-copy {
  color: color-mix(in srgb, var(--bb-secondary-color) 84%, var(--bb-heading-color));
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-medium);
  letter-spacing: -0.01em;
}

.bb-status-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.875rem;
  min-width: 0;
}

.bb-status-footer-links a {
  color: var(--bb-secondary-color);
  font-size: 0.925rem;
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.bb-status-footer-links a:first-child {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

.bb-status-footer-links a:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

.bb-status-footer-links a + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 14px 0 0;
  background-color: color-mix(in srgb, var(--bb-border-color) 75%, transparent);
  vertical-align: -2px;
}

/* =====================================
   Status Chip Density
===================================== */
:where(.bb-status-page) .bb-chip {
  --bb-chip-padding-y: .45rem;
  --bb-chip-padding-x: .9rem;
  --bb-chip-min-height: 2rem;
}

/* =====================================
   Soft Sections
===================================== */
.bb-status-section-soft {
  background-color: var(--bb-tertiary-bg);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1200px) {
  .bb-status-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-status-header-inner {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .bb-status-header-actions {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .bb-status-container,
  .bb-status-live-holder {
    width: min(100%, 100% - var(--bb-status-container-x-mobile));
  }
  .bb-status-header-inner {
    padding: 24px 0 18px;
  }
  .bb-status-brand img {
    height: 34px;
  }
  .bb-status-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-status-live-holder {
    margin: 18px auto;
  }
  .bb-status-footer-inner {
    align-items: flex-start;
    padding: 22px 0;
  }
  .bb-status-footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .bb-status-footer-brand img {
    height: 32px;
  }
  .bb-status-footer-copy {
    font-size: 0.85rem;
  }
  .bb-status-footer-links {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
  .bb-status-footer-links a {
    font-size: 0.925rem;
  }
  .bb-status-footer-links a + a::before {
    display: none;
  }
  .bb-status-bar::before,
  .bb-status-component-day::before {
    display: none !important;
  }
  .bb-status-bar-tooltip,
  .bb-status-component-day-tooltip {
    display: none !important;
  }
}
/* assets/scss/pages/status/_index.scss */
/* =====================================
   Status Index
   Main CSS component-first
   Page-specific visual layer
===================================== */
/* -------------------------------------
   Buttons
------------------------------------- */
.bb-status-btn {
  --bb-btn-radius: var(--bb-status-card-inner-radius);
  --bb-btn-font-weight: var(--bb-fw-semibold);
  --bb-btn-padding-x: 1.15rem;
  --bb-btn-padding-y: .65rem;
}

.bb-status-btn-yellow {
  --bb-btn-bg: var(--bb-warning);
  --bb-btn-border-color: var(--bb-warning);
  --bb-btn-color: var(--bb-warning-inverse);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-warning) 92%, var(--bb-body-bg));
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-hover-color: var(--bb-warning-inverse);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-warning) 86%, var(--bb-body-bg));
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  --bb-btn-active-color: var(--bb-warning-inverse);
}

.bb-status-btn-outline {
  --bb-btn-bg: var(--bb-body-bg);
  --bb-btn-border-color: var(--bb-border-color);
  --bb-btn-color: var(--bb-body-color);
  --bb-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-btn-hover-border-color: var(--bb-border-color);
  --bb-btn-hover-color: var(--bb-body-color);
  --bb-btn-active-bg: var(--bb-tertiary-bg);
  --bb-btn-active-border-color: var(--bb-border-color);
  --bb-btn-active-color: var(--bb-body-color);
}

.bb-status-btn-dark {
  width: 100%;
  --bb-btn-bg: var(--bb-dark);
  --bb-btn-border-color: var(--bb-dark);
  --bb-btn-color: var(--bb-dark-inverse);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-coal-300) 92%, var(--bb-body-bg));
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-hover-color: var(--bb-dark-inverse);
}

/* -------------------------------------
   Cards
------------------------------------- */
.bb-status-card {
  padding: var(--bb-status-card-padding);
}

/* -------------------------------------
   Live Hero
------------------------------------- */
.bb-status-index-page .bb-status-live-strip {
  margin: 28px 0 24px;
}

.bb-status-live-strip {
  position: relative;
  padding: 26px 28px 22px;
  color: var(--bb-white);
  background: radial-gradient(circle at 96% 0%, rgba(var(--bb-warning-rgb), 0.2), transparent 25%), linear-gradient(135deg, var(--bb-color-navy-600) 0%, var(--bb-color-navy-700) 52%, var(--bb-color-navy-800) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bb-status-card-radius);
  box-shadow: var(--bb-shadow-lg);
  overflow: visible;
}

.bb-status-live-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.bb-status-live-service {
  min-width: 0;
}

.bb-status-live-title {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-h2);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-status-live-subtitle {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-medium);
}

.bb-status-live-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.bb-status-live-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  flex-wrap: wrap;
}

/* -------------------------------------
   Status Pills
------------------------------------- */
.bb-status-pill {
  min-height: 36px;
  padding: 0 15px;
  border-radius: var(--bb-status-card-inner-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-status-pill-dark {
  background: rgba(4, 17, 36, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--bb-white);
}

.bb-status-pill-dark strong {
  color: var(--bb-warning);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-pill-green {
  min-height: 50px;
  padding: 0 20px;
  border-radius: var(--bb-status-pill-radius);
  background: rgba(var(--bb-success-rgb), 0.16);
  color: var(--bb-color-green-300);
  border: 1px solid rgba(var(--bb-success-rgb), 0.14);
}

.bb-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  flex: 0 0 auto;
}

/* -------------------------------------
   Uptime Bars
------------------------------------- */
.bb-status-bars-scroll {
  width: 100%;
  max-width: 100%;
  margin-bottom: 14px;
  padding-bottom: 4px;
  overflow: visible;
}

.bb-status-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(90, 8px);
  gap: 4px;
  width: max-content;
  min-width: max-content;
  overflow: visible;
}

.bb-status-bar {
  position: relative;
  display: block;
  width: 8px;
  height: 40px;
  border-radius: var(--bb-radius-xs);
  background: var(--bb-success);
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), filter var(--bb-transition-fast);
  z-index: 1;
  font-size: 0;
  line-height: 0;
}

.bb-status-bar.ok,
.bb-status-bar.operational {
  background: var(--bb-success);
}

.bb-status-bar.warning,
.bb-status-bar.degraded_performance {
  background: var(--bb-warning);
}

.bb-status-bar.error,
.bb-status-bar.partial_outage,
.bb-status-bar.major_outage {
  background: var(--bb-danger);
}

.bb-status-bar.maintenance {
  background: var(--bb-info);
}

.bb-status-bar:hover {
  transform: scaleY(1.18) scaleX(1.14);
  box-shadow: var(--bb-shadow);
  filter: brightness(1.06);
  z-index: 90;
}

/* -------------------------------------
   Uptime Rich Tooltip
------------------------------------- */
.bb-status-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 330px;
  height: 20px;
  transform: translateX(-50%);
  background: transparent;
  display: none;
  z-index: 70;
}

.bb-status-bar:hover::before {
  display: block;
}

.bb-status-bar-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  bottom: auto;
  width: 340px;
  min-height: 138px;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  background: var(--bb-body-bg);
  color: var(--bb-body-color);
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  box-shadow: var(--bb-shadow-lg);
  padding: 14px;
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast), transform var(--bb-transition-fast);
  z-index: 100;
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
}

.bb-status-bar:hover .bb-status-bar-tooltip,
.bb-status-bar-tooltip:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bb-status-bar-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 14px;
  height: 14px;
  background: var(--bb-body-bg);
  border-left: 1px solid var(--bb-border-color);
  border-top: 1px solid var(--bb-border-color);
  transform: translateX(-50%) rotate(45deg);
}

.bb-status-bar-tooltip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.625rem;
}

.bb-status-bar-tooltip-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bb-status-bar-tooltip-title strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-status-bar-tooltip-title span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-bar-tooltip-state {
  min-height: 26px;
  padding: 0 9px;
  border-radius: var(--bb-status-pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: var(--bb-fw-bold);
}

.bb-status-bar-tooltip-state.ok,
.bb-status-bar-tooltip-state.operational {
  background: var(--bb-success-light);
  color: var(--bb-success);
}

.bb-status-bar-tooltip-state.warning,
.bb-status-bar-tooltip-state.degraded_performance {
  background: var(--bb-warning-light);
  color: color-mix(in srgb, var(--bb-warning) 74%, var(--bb-heading-color));
}

.bb-status-bar-tooltip-state.error,
.bb-status-bar-tooltip-state.partial_outage,
.bb-status-bar-tooltip-state.major_outage {
  background: var(--bb-danger-light);
  color: var(--bb-danger);
}

.bb-status-bar-tooltip-state.maintenance {
  background: var(--bb-info-light);
  color: var(--bb-info);
}

.bb-status-bar-tooltip-metric {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 0.625rem;
}

.bb-status-bar-tooltip-metric-item {
  padding: 9px 10px;
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background: var(--bb-tertiary-bg);
}

.bb-status-bar-tooltip-metric-item span {
  display: block;
  margin-bottom: 3px;
  color: var(--bb-secondary-color);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-status-bar-tooltip-metric-item strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-status-bar-tooltip-note {
  margin: 0 0 12px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-bar-tooltip-note.warning,
.bb-status-bar-tooltip-note.degraded_performance {
  color: color-mix(in srgb, var(--bb-warning) 74%, var(--bb-heading-color));
}

.bb-status-bar-tooltip-note.error,
.bb-status-bar-tooltip-note.partial_outage,
.bb-status-bar-tooltip-note.major_outage {
  color: var(--bb-danger);
}

.bb-status-bar-tooltip-note.maintenance {
  color: var(--bb-info);
}

.bb-status-bar-tooltip-action {
  min-height: 40px;
  border-top: 1px solid var(--bb-border-color);
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-status-bar-tooltip-action:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

.bb-status-bar-tooltip-action.is-passive {
  color: var(--bb-secondary-color);
  cursor: default;
}

/* Left edge tooltip correction */
.bb-status-bar:first-child .bb-status-bar-tooltip,
.bb-status-bar:nth-child(2) .bb-status-bar-tooltip,
.bb-status-bar:nth-child(3) .bb-status-bar-tooltip,
.bb-status-bar:nth-child(4) .bb-status-bar-tooltip,
.bb-status-bar:nth-child(5) .bb-status-bar-tooltip,
.bb-status-bar:nth-child(6) .bb-status-bar-tooltip,
.bb-status-bar:nth-child(7) .bb-status-bar-tooltip,
.bb-status-bar:nth-child(8) .bb-status-bar-tooltip {
  left: 0;
  transform: translateX(0) translateY(-8px);
}

.bb-status-bar:first-child:hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(2):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(3):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(4):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(5):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(6):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(7):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-child(8):hover .bb-status-bar-tooltip {
  transform: translateX(0) translateY(0);
}

.bb-status-bar:first-child::before,
.bb-status-bar:nth-child(2)::before,
.bb-status-bar:nth-child(3)::before,
.bb-status-bar:nth-child(4)::before,
.bb-status-bar:nth-child(5)::before,
.bb-status-bar:nth-child(6)::before,
.bb-status-bar:nth-child(7)::before,
.bb-status-bar:nth-child(8)::before {
  left: 0;
  transform: translateX(0);
}

.bb-status-bar:first-child .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(2) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(3) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(4) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(5) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(6) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(7) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-child(8) .bb-status-bar-tooltip::after {
  left: 18px;
}

/* Right edge tooltip correction */
.bb-status-bar:nth-last-child(1) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(2) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(3) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(4) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(5) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(6) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(7) .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(8) .bb-status-bar-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-8px);
}

.bb-status-bar:nth-last-child(1):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(2):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(3):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(4):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(5):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(6):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(7):hover .bb-status-bar-tooltip,
.bb-status-bar:nth-last-child(8):hover .bb-status-bar-tooltip {
  transform: translateX(0) translateY(0);
}

.bb-status-bar:nth-last-child(1)::before,
.bb-status-bar:nth-last-child(2)::before,
.bb-status-bar:nth-last-child(3)::before,
.bb-status-bar:nth-last-child(4)::before,
.bb-status-bar:nth-last-child(5)::before,
.bb-status-bar:nth-last-child(6)::before,
.bb-status-bar:nth-last-child(7)::before,
.bb-status-bar:nth-last-child(8)::before {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.bb-status-bar:nth-last-child(1) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(2) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(3) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(4) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(5) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(6) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(7) .bb-status-bar-tooltip::after,
.bb-status-bar:nth-last-child(8) .bb-status-bar-tooltip::after {
  left: auto;
  right: 18px;
}

/* -------------------------------------
   Legend
------------------------------------- */
.bb-status-legend {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  flex-wrap: wrap;
}

.bb-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-legend-item.ok .bb-status-dot {
  color: var(--bb-success);
}

.bb-status-legend-item.warning .bb-status-dot {
  color: var(--bb-warning);
}

.bb-status-legend-item.error .bb-status-dot {
  color: var(--bb-danger);
}

.bb-status-legend-item.maintenance .bb-status-dot {
  color: var(--bb-info);
}

.bb-status-dates {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

/* -------------------------------------
   Content Sections
------------------------------------- */
.bb-status-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.bb-status-header-link {
  min-height: 1.75rem;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-status-label {
  min-height: 26px;
  padding: 0 0.625rem;
  border-radius: var(--bb-status-pill-radius);
  background: var(--bb-success-light);
  color: var(--bb-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-status-card-title {
  margin: 12px 0 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-status-card-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
}

.bb-status-card-chip,
.bb-status-component-state {
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--bb-status-pill-radius);
  background: var(--bb-success-light);
  color: var(--bb-success);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-status-component-list,
.bb-status-event-list,
.bb-status-notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-status-component-item,
.bb-status-event-item {
  padding: 15px 17px;
}

.bb-status-component-item {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bb-status-component-item-title,
.bb-status-event-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-lg);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-component-item-text,
.bb-status-event-text {
  margin: 5px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-table-line-height);
}

.bb-status-service-row {
  color: inherit;
  text-decoration: none;
}

.bb-status-service-row:hover {
  color: inherit;
  text-decoration: none;
}

.bb-status-side-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 14px;
}

.bb-status-side-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--bb-status-card-inner-radius);
  background: var(--bb-warning-light);
  color: var(--bb-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bb-status-side-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.bb-status-event-badge {
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--bb-status-pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-status-event-badge.warning {
  background: var(--bb-warning-light);
  color: color-mix(in srgb, var(--bb-warning) 74%, var(--bb-heading-color));
}

.bb-status-event-badge.error {
  background: var(--bb-danger-light);
  color: var(--bb-danger);
}

.bb-status-event-badge.maintenance {
  background: var(--bb-info-light);
  color: var(--bb-info);
}

.bb-status-event-time {
  color: var(--bb-secondary-color);
  font-size: 0.975rem;
  line-height: 1.4;
  font-weight: var(--bb-fw-bold);
}

.bb-status-tag-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}

.bb-status-tag {
  min-height: 30px;
  padding: 0 0.625rem;
  border-radius: var(--bb-status-pill-radius);
  border: var(--bb-status-panel-border);
  background: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------
   Notice History Preview
------------------------------------- */
.bb-status-notice-item {
  position: relative;
  padding: 15px 58px 15px 17px;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1.125rem;
  align-items: start;
  color: inherit;
  text-decoration: none;
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background-color: var(--bb-status-panel-bg);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-status-notice-arrow {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: var(--bb-status-card-inner-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  text-decoration: none;
  line-height: 1;
}

.bb-status-notice-arrow:hover {
  color: var(--bb-primary);
  background-color: var(--bb-tertiary-bg);
  text-decoration: none;
}

.bb-status-notice-arrow .material-symbols-outlined {
  display: block;
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-status-notice-item.is-empty:hover {
  transform: none;
  box-shadow: none;
}

.bb-status-notice-date {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
}

.bb-status-notice-content {
  display: block;
  min-width: 0;
}

.bb-status-notice-title {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-notice-text {
  display: block;
  margin-top: 5px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-table-line-height);
}

.bb-status-notice-link {
  margin-top: 10px;
  min-height: 52px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--bb-heading-color);
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background-color: var(--bb-status-panel-bg);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
}

.bb-status-notice-link:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-status-live-strip {
    padding: 20px 18px 18px;
  }
  .bb-status-live-top,
  .bb-status-live-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .bb-status-live-badges {
    margin-left: 0;
  }
}
@media (max-width: 767.98px) {
  .bb-status-index-page .bb-status-live-strip {
    margin: 18px 0;
  }
  .bb-status-live-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-status-live-subtitle {
    font-size: var(--bb-fs-base);
  }
  .bb-status-live-badges {
    width: 100%;
    align-items: flex-start;
  }
  .bb-status-pill-green {
    min-height: 46px;
    padding: 0 17px;
  }
  .bb-status-bars-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    padding-bottom: 8px;
  }
  .bb-status-bars {
    grid-template-columns: repeat(90, 8px);
    gap: 4px;
    width: max-content;
    min-width: max-content;
  }
  .bb-status-bar {
    width: 8px;
    height: 32px;
  }
  .bb-status-bar::before,
  .bb-status-bar-tooltip {
    display: none !important;
  }
  .bb-status-bar:hover {
    transform: none;
    box-shadow: none;
    filter: none;
  }
  .bb-status-live-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .bb-status-legend {
    gap: 12px;
  }
  .bb-status-legend-item {
    font-size: var(--bb-fs-sm);
  }
  .bb-status-dates {
    width: 100%;
    justify-content: space-between;
    font-size: var(--bb-fs-sm);
  }
  .bb-status-card {
    padding: 16px;
  }
  .bb-status-component-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767.98px) and (max-width: 767.98px) {
  .bb-status-notice-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 15px 54px 15px 17px;
  }
  .bb-status-notice-arrow {
    right: 14px;
  }
  .bb-status-notice-item.is-empty {
    padding-right: 17px;
  }
  .bb-status-notice-link {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .bb-status-notice-link {
    width: 100%;
  }
}
/* -------------------------------------
   Side Card Header
------------------------------------- */
.bb-status-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.bb-status-side-heading {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.bb-status-side-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--bb-status-card-inner-radius);
  background: var(--bb-warning-light);
  color: var(--bb-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bb-status-side-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-status-header-link {
  min-height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.bb-status-header-link:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

/* -------------------------------------
   Event / Maintenance Card Body
------------------------------------- */
.bb-status-event-item {
  padding: 18px 16px;
}

.bb-status-event-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.5rem;
}

.bb-status-event-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-event-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: 0.975rem;
  line-height: var(--bb-line-height-base);
}

.bb-status-event-time {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Badges
------------------------------------- */
.bb-status-event-badge {
  min-height: 26px;
  padding: 0 0.625rem;
  border-radius: var(--bb-status-pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
  letter-spacing: 0.01em;
  border: 0;
}

.bb-status-event-badge.warning {
  background: color-mix(in srgb, var(--bb-warning) 85%, var(--bb-color-gray-900));
  color: var(--bb-white);
}

.bb-status-event-badge.error {
  background: var(--bb-danger);
  color: var(--bb-white);
}

.bb-status-event-badge.maintenance {
  background: var(--bb-navy-900);
  color: var(--bb-white);
}

.bb-status-event-badge.success {
  background: var(--bb-success);
  color: var(--bb-white);
}

/* -------------------------------------
   Component Public API Card
------------------------------------- */
.bb-status-component-api-list {
  display: grid;
  gap: 10px;
}

.bb-status-component-api-item {
  min-width: 0;
  padding: 14px;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
}

.bb-status-component-api-text {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-api-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-component-api-method {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 6px;
  padding: 0 8px;
  border-radius: var(--bb-status-pill-radius);
  color: var(--bb-white);
  color: var(--bb-dark-inverse);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.03em;
}

.bb-status-component-api-code {
  display: block;
  max-width: 100%;
  color: var(--bb-heading-color);
  background-color: transparent;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -------------------------------------
   Mobile
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-status-side-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-status-event-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .bb-status-header-link {
    padding-left: 0;
  }
}
/* assets/scss/pages/status/_history.scss */
/* =====================================
   Status History
   Main CSS component-first
   Page-specific visual layer
===================================== */
/* -------------------------------------
   Hero
------------------------------------- */
.bb-status-history-hero-wrap {
  background-color: var(--bb-body-bg);
  padding: 30px 0 0;
}

.bb-status-history-hero {
  position: relative;
  overflow: hidden;
  min-height: 254px;
  padding: 34px 36px;
  color: var(--bb-white);
  background: radial-gradient(circle at 96% 0%, rgba(var(--bb-warning-rgb), 0.2), transparent 27%), radial-gradient(circle at 0% 100%, rgba(var(--bb-success-rgb), 0.12), transparent 30%), linear-gradient(135deg, var(--bb-color-navy-800) 0%, var(--bb-color-navy-700) 56%, var(--bb-color-navy-700) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bb-status-card-radius);
  box-shadow: var(--bb-shadow-lg);
}

.bb-status-history-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(var(--bb-warning-rgb), 0.12);
  pointer-events: none;
}

.bb-status-history-hero::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(var(--bb-success-rgb), 0.08);
  pointer-events: none;
}

.bb-status-history-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.85fr);
  gap: 34px;
  align-items: center;
}

.bb-status-history-back {
  width: fit-content;
  min-height: 34px;
  margin-bottom: 1rem;
  padding: 0 12px;
  border-radius: var(--bb-status-pill-radius);
  background: color-mix(in srgb, var(--bb-white) 8%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-history-back:hover {
  color: var(--bb-white);
  text-decoration: none;
  background: color-mix(in srgb, var(--bb-white) 12%, transparent);
}

.bb-status-history-eyebrow {
  min-height: 1.75rem;
  width: fit-content;
  padding: 0 0.625rem;
  margin-bottom: 0.75rem;
  border-radius: var(--bb-status-pill-radius);
  background: rgba(var(--bb-success-rgb), 0.16);
  color: color-mix(in srgb, var(--bb-success) 62%, var(--bb-white));
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bb-status-history-eyebrow-chip {
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(7, 27, 57, 0.28);
  color: color-mix(in srgb, var(--bb-success) 62%, var(--bb-white));
  box-shadow: none;
}

.bb-status-history-back .material-symbols-outlined,
.bb-status-history-eyebrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-status-history-title {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-h1);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.035em;
}

.bb-status-history-text {
  margin: 0.875rem 0 0;
  max-width: 47.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-history-hero-actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bb-status-history-hero-pill {
  --bb-chip-bg: rgba(4, 17, 36, .38);
  --bb-chip-color: rgba(255, 255, 255, .88);
  --bb-chip-border-color: rgba(255, 255, 255, .12);
  --bb-chip-padding-x: .85rem;
  --bb-chip-padding-y: .45rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 2.375rem;
}

.bb-status-history-hero-pill strong {
  color: var(--bb-warning);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Summary cards
------------------------------------- */
.bb-status-history-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bb-status-history-summary-card {
  position: relative;
  display: block;
  min-height: 92px;
  padding: 17px 18px;
  background: color-mix(in srgb, var(--bb-white) 10%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--bb-status-card-inner-radius);
  backdrop-filter: blur(0.625rem);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.bb-status-history-summary-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 32px;
  height: 3px;
  border-radius: var(--bb-status-pill-radius);
  background: var(--bb-warning);
  opacity: 0.9;
}

.bb-status-history-summary-label {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
  margin: 13px 0 5px;
}

.bb-status-history-summary-value {
  display: block;
  color: var(--bb-white);
  font-size: var(--bb-icon-size-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.02em;
}

/* -------------------------------------
   Main area
------------------------------------- */
.bb-status-history-main {
  padding: 30px 0 42px;
  margin-top: 30px;
}

/* -------------------------------------
   Toolbar
------------------------------------- */
.bb-status-history-toolbar {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.bb-status-history-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bb-status-history-filter {
  --bb-chip-bg: var(--bb-body-bg);
  --bb-chip-color: var(--bb-secondary-color);
  --bb-chip-border-color: var(--bb-border-color);
  --bb-chip-padding-x: .85rem;
  --bb-chip-padding-y: .45rem;
  --bb-chip-font-size: var(--bb-fs-base);
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-min-height: 2.25rem;
  color: var(--bb-chip-color);
}

.bb-status-history-filter:hover {
  --bb-chip-bg: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  text-decoration: none;
}

.bb-status-history-filter.active {
  --bb-chip-bg: var(--bb-dark);
  --bb-chip-border-color: var(--bb-dark);
  --bb-chip-color: var(--bb-dark-inverse);
}

.bb-status-history-filter .material-symbols-outlined {
  font-size: var(--bb-fs-base);
}

.bb-status-history-range {
  --bb-chip-bg: var(--bb-tertiary-bg);
  --bb-chip-color: var(--bb-secondary-color);
  --bb-chip-border-color: var(--bb-border-color);
  --bb-chip-padding-x: .85rem;
  --bb-chip-padding-y: .45rem;
  --bb-chip-font-size: var(--bb-fs-base);
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-min-height: 2.25rem;
  white-space: nowrap;
}

.bb-status-history-range .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

/* -------------------------------------
   Month sections
------------------------------------- */
.bb-status-history-month {
  margin-bottom: 28px;
}

.bb-status-history-month-title {
  margin: 0 0 14px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.015em;
}

.bb-status-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -------------------------------------
   History item
------------------------------------- */
.bb-status-history-item {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 180px;
  gap: 20px;
  align-items: start;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-status-history-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--bb-shadow);
  border-color: var(--bb-border-color-strong);
}

.bb-status-history-item-title {
  margin: 0 0 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-history-item-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Kind chips
------------------------------------- */
.bb-status-history-kind {
  margin-top: 8px;
  width: fit-content;
  --bb-chip-padding-x: 0.6rem;
  --bb-chip-padding-y: 0.25rem;
  --bb-chip-font-size: .75rem;
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-min-height: 1.625rem;
}

.bb-status-history-kind.incident {
  --bb-chip-bg: var(--bb-danger-light);
  --bb-chip-color: var(--bb-danger);
  --bb-chip-border-color: transparent;
}

.bb-status-history-kind.maintenance {
  --bb-chip-bg: var(--bb-info-light);
  --bb-chip-color: var(--bb-info);
  --bb-chip-border-color: transparent;
}

.bb-status-history-kind.warning {
  --bb-chip-bg: var(--bb-warning-light);
  --bb-chip-color: var(--bb-warning);
  --bb-chip-border-color: transparent;
}

.bb-status-history-kind .material-symbols-outlined {
  font-size: var(--bb-fs-base);
}

/* -------------------------------------
   Component chips
------------------------------------- */
.bb-status-history-components {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bb-status-history-component {
  --bb-chip-bg: var(--bb-tertiary-bg);
  --bb-chip-color: var(--bb-secondary-color);
  --bb-chip-border-color: var(--bb-border-color);
  --bb-chip-padding-x: 0.6rem;
  --bb-chip-padding-y: 0.25rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-min-height: 1.6875rem;
}

/* -------------------------------------
   Status area
------------------------------------- */
.bb-status-history-status-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}

.bb-status-history-state {
  --bb-chip-padding-x: .7rem;
  --bb-chip-padding-y: .3rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-min-height: 1.875rem;
}

.bb-status-history-state.resolved,
.bb-status-history-state.completed {
  --bb-chip-bg: var(--bb-success-light);
  --bb-chip-color: var(--bb-success);
  --bb-chip-border-color: transparent;
}

.bb-status-history-state.monitoring {
  --bb-chip-bg: var(--bb-warning-light);
  --bb-chip-color: var(--bb-warning);
  --bb-chip-border-color: transparent;
}

.bb-status-history-state.scheduled {
  --bb-chip-bg: var(--bb-info-light);
  --bb-chip-color: var(--bb-info);
  --bb-chip-border-color: transparent;
}

.bb-status-history-state .material-symbols-outlined {
  font-size: var(--bb-fs-base);
}

.bb-status-history-detail-link {
  min-height: 34px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-status-history-detail-link:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

.bb-status-history-detail-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

/* -------------------------------------
   Type alignment
------------------------------------- */
.bb-status-history-detail-link,
.bb-status-history-filter,
.bb-status-history-range,
.bb-status-history-item-title,
.bb-status-history-item-text {
  font-size: var(--bb-fs-base);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1100px) {
  .bb-status-history-hero-content {
    grid-template-columns: 1fr;
  }
  .bb-status-history-summary {
    max-width: 720px;
  }
}
@media (max-width: 991.98px) {
  .bb-status-history-hero .bb-status-history-title {
    font-size: clamp(31px, 3vw, 38px);
  }
  .bb-status-history-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-status-history-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bb-status-history-status-area {
    align-items: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-status-history-hero-wrap {
    padding-top: 20px;
  }
  .bb-status-history-hero {
    padding: 24px 20px;
    min-height: unset;
  }
  .bb-status-history-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-status-history-text {
    font-size: var(--bb-fs-base);
  }
  .bb-status-history-summary {
    grid-template-columns: 1fr;
  }
  .bb-status-history-filters {
    width: 100%;
  }
  .bb-status-history-filter {
    flex: 1;
  }
  .bb-status-history-range {
    width: 100%;
    justify-content: center;
  }
}
/* assets/scss/pages/status/_incident.scss */
/* =====================================
   Status Incident Detail
   Main CSS component-first
   Page-specific visual layer
===================================== */
/* -------------------------------------
   Main / Top
------------------------------------- */
.bb-status-detail-main {
  padding: 28px 0 0;
}

.bb-status-detail-top {
  background-color: var(--bb-body-bg);
  border-bottom: 1px solid var(--bb-border-color);
  padding: 28px 0 30px;
}

.bb-status-detail-content {
  padding: 34px 0 40px;
}

/* -------------------------------------
   Overall Card
   Special visual card, keeps its own scene.
------------------------------------- */
.bb-status-overall-card {
  min-height: 92px;
  border-color: color-mix(in srgb, var(--bb-success) 26%, transparent);
  background: radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--bb-success) 10%, transparent), transparent 28%), linear-gradient(135deg, var(--bb-success-light) 0%, var(--bb-body-bg) 72%);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.bb-status-overall-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bb-success-light);
  color: var(--bb-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bb-status-overall-icon .material-symbols-outlined {
  font-size: var(--bb-h2);
}

.bb-status-overall-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-2xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.015em;
}

.bb-status-overall-text {
  margin: 6px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-detail-intro {
  margin: 26px 0 0;
  max-width: 1040px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Incident Head
------------------------------------- */
.bb-status-incident-head {
  margin-bottom: 30px;
}

.bb-status-incident-title-row {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: 18px;
}

.bb-status-back-button {
  width: 48px;
  height: 48px;
  border-radius: var(--bb-status-card-inner-radius);
  border: var(--bb-status-panel-border);
  background-color: var(--bb-body-bg);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--bb-status-card-shadow);
}

.bb-status-back-button:hover {
  color: var(--bb-primary);
  border-color: var(--bb-border-color-strong);
  text-decoration: none;
}

.bb-status-back-button .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
}

.bb-status-incident-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.025em;
}

.bb-status-incident-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* -------------------------------------
   Incident chips
   Main: .bb-chip
------------------------------------- */
.bb-status-incident-badge {
  --bb-chip-padding-x: .95rem;
  --bb-chip-padding-y: .55rem;
  --bb-chip-font-size: var(--bb-icon-size-md);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 42px;
  --bb-chip-bg: var(--bb-body-bg);
  --bb-chip-color: var(--bb-heading-color);
  --bb-chip-border-color: var(--bb-border-color);
}

.bb-status-incident-badge.resolved {
  --bb-chip-bg: var(--bb-success);
  --bb-chip-border-color: var(--bb-success);
  --bb-chip-color: var(--bb-success-inverse);
}

.bb-status-incident-badge.outage {
  --bb-chip-bg: var(--bb-danger-light);
  --bb-chip-border-color: color-mix(in srgb, var(--bb-danger) 18%, transparent);
  --bb-chip-color: var(--bb-danger);
}

.bb-status-incident-badge .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
}

.bb-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  background-color: currentColor;
  flex-shrink: 0;
}

/* -------------------------------------
   Sections / Cards
------------------------------------- */
.bb-status-section {
  margin-bottom: 32px;
}

.bb-status-section-title {
  margin: 0 0 13px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1.4;
  font-weight: var(--bb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.bb-status-affected-card,
.bb-status-updates-card {
  padding: 22px 24px;
}

.bb-status-affected-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

/* -------------------------------------
   Range chip
------------------------------------- */
.bb-status-range-pill {
  --bb-chip-bg: var(--bb-tertiary-bg);
  --bb-chip-color: var(--bb-secondary-color);
  --bb-chip-border-color: var(--bb-border-color);
  --bb-chip-padding-x: .7rem;
  --bb-chip-padding-y: .35rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-semibold);
  --bb-chip-min-height: 32px;
}

.bb-status-range-pill .material-symbols-outlined {
  font-size: var(--bb-fs-md);
}

/* -------------------------------------
   Affected services
------------------------------------- */
.bb-status-affected-list {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.bb-status-affected-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.bb-status-affected-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-affected-name .material-symbols-outlined {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-md);
}

.bb-status-affected-bar {
  height: 8px;
  border-radius: var(--bb-status-pill-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 36fr 2fr 3fr 2fr 57fr;
  gap: 5px;
  background: transparent;
}

.bb-status-segment {
  height: 8px;
  border-radius: var(--bb-status-pill-radius);
  display: block;
}

.bb-status-segment.ok {
  background-color: var(--bb-success);
}

.bb-status-segment.warning {
  background-color: var(--bb-warning);
}

.bb-status-segment.error {
  background-color: var(--bb-danger);
}

.bb-status-segment.maintenance {
  background-color: var(--bb-info);
}

/* -------------------------------------
   Legend
------------------------------------- */
.bb-status-legend {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.bb-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.bb-status-legend-dot.ok {
  background-color: var(--bb-success);
}

.bb-status-legend-dot.warning {
  background-color: var(--bb-warning);
}

.bb-status-legend-dot.error {
  background-color: var(--bb-danger);
}

.bb-status-legend-dot.maintenance {
  background-color: var(--bb-info);
}

/* -------------------------------------
   Timeline
------------------------------------- */
.bb-status-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.bb-status-timeline::before {
  content: "";
  position: absolute;
  left: 192px;
  top: 18px;
  bottom: 24px;
  width: 2px;
  background-color: var(--bb-border-color);
}

.bb-status-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 150px 34px minmax(0, 1fr);
  gap: 20px;
  align-items: flex-start;
}

.bb-status-timeline-state {
  --bb-chip-padding-x: .9rem;
  --bb-chip-padding-y: .45rem;
  --bb-chip-font-size: var(--bb-icon-size-md);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 36px;
  --bb-chip-bg: var(--bb-body-bg);
  --bb-chip-color: var(--bb-heading-color);
  --bb-chip-border-color: var(--bb-border-color);
  box-shadow: var(--bb-status-card-shadow);
}

.bb-status-timeline-state.resolved {
  --bb-chip-bg: var(--bb-success-light);
  --bb-chip-border-color: color-mix(in srgb, var(--bb-success) 25%, transparent);
  --bb-chip-color: var(--bb-success);
}

.bb-status-timeline-state.monitoring {
  --bb-chip-bg: var(--bb-warning-light);
  --bb-chip-border-color: color-mix(in srgb, var(--bb-warning) 35%, transparent);
  --bb-chip-color: var(--bb-warning);
}

.bb-status-timeline-state.identified {
  --bb-chip-bg: var(--bb-danger-light);
  --bb-chip-border-color: color-mix(in srgb, var(--bb-danger) 18%, transparent);
  --bb-chip-color: var(--bb-danger);
}

.bb-status-timeline-state.update {
  --bb-chip-color: var(--bb-heading-color);
}

.bb-status-timeline-state .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-status-timeline-node-wrap {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.bb-status-timeline-node {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 4px solid var(--bb-body-bg);
  box-shadow: 0 0 0 1px var(--bb-border-color-strong);
  display: inline-block;
  background-color: var(--bb-info);
}

.bb-status-timeline-node.resolved {
  background-color: var(--bb-success);
}

.bb-status-timeline-node.monitoring {
  background-color: var(--bb-warning);
}

.bb-status-timeline-node.identified {
  background-color: var(--bb-danger);
}

.bb-status-timeline-content {
  padding-top: 0;
}

.bb-status-timeline-date {
  margin: 0 0 7px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-timeline-text {
  margin: 0;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-status-overall-card {
    padding: 20px;
    align-items: flex-start;
  }
  .bb-status-incident-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-status-affected-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bb-status-timeline::before {
    left: 17px;
  }
  .bb-status-timeline-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
  }
  .bb-status-timeline-state {
    grid-column: 2;
    grid-row: 1;
    width: fit-content;
  }
  .bb-status-timeline-node-wrap {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .bb-status-timeline-content {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (max-width: 767.98px) {
  .bb-status-overall-card {
    flex-direction: column;
    gap: 0.875rem;
  }
  .bb-status-overall-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-status-overall-text,
  .bb-status-detail-intro,
  .bb-status-timeline-text {
    font-size: var(--bb-icon-size-md);
  }
  .bb-status-incident-title-row {
    align-items: flex-start;
    gap: 0.875rem;
  }
  .bb-status-back-button {
    width: 44px;
    height: 44px;
  }
  .bb-status-incident-title {
    font-size: var(--bb-icon-size-lg);
  }
  .bb-status-incident-badge {
    width: 100%;
    justify-content: flex-start;
  }
  .bb-status-affected-card,
  .bb-status-updates-card {
    padding: 16px;
  }
  .bb-status-affected-bar {
    grid-template-columns: 34fr 3fr 4fr 3fr 56fr;
    gap: 4px;
  }
  .bb-status-legend {
    gap: 0.875rem;
  }
}
/* assets/scss/pages/status/_subscribe.scss */
/* =====================================
   Status Subscribe
   Main CSS component-first
   Page-specific visual layer
===================================== */
/* -------------------------------------
   Hero
------------------------------------- */
.bb-status-subscribe-hero-wrap {
  background-color: var(--bb-body-bg);
  padding: 30px 0 0;
}

.bb-status-subscribe-hero {
  position: relative;
  overflow: hidden;
  min-height: 252px;
  padding: 34px 36px;
  color: var(--bb-white);
  background: radial-gradient(circle at 96% 0%, rgba(var(--bb-warning-rgb), 0.2), transparent 27%), radial-gradient(circle at 0% 100%, rgba(var(--bb-success-rgb), 0.12), transparent 30%), linear-gradient(135deg, var(--bb-color-navy-800) 0%, var(--bb-color-navy-700) 56%, var(--bb-color-navy-700) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bb-status-card-radius);
  box-shadow: var(--bb-shadow-lg);
}

.bb-status-subscribe-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(var(--bb-warning-rgb), 0.12);
  pointer-events: none;
}

.bb-status-subscribe-hero::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(var(--bb-success-rgb), 0.08);
  pointer-events: none;
}

.bb-status-subscribe-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 34px;
  align-items: center;
}

.bb-status-subscribe-back {
  --bb-chip-bg: rgba(255, 255, 255, .08);
  --bb-chip-color: rgba(255, 255, 255, .86);
  --bb-chip-border-color: rgba(255, 255, 255, .12);
  --bb-chip-padding-x: .8rem;
  --bb-chip-padding-y: .35rem;
  --bb-chip-font-size: var(--bb-icon-size-md);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 34px;
  width: fit-content;
  margin-bottom: 1rem;
}

.bb-status-subscribe-back:hover {
  --bb-chip-bg: rgba(255, 255, 255, .12);
  --bb-chip-color: var(--bb-white);
  text-decoration: none;
}

.bb-status-subscribe-back .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-status-subscribe-eyebrow {
  --bb-chip-bg: rgba(var(--bb-success-rgb), .16);
  --bb-chip-color: color-mix(in srgb, var(--bb-success) 62%, var(--bb-white));
  --bb-chip-border-color: transparent;
  --bb-chip-padding-x: .65rem;
  --bb-chip-padding-y: 0.25rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 1.75rem;
  width: fit-content;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bb-status-subscribe-eyebrow .material-symbols-outlined {
  font-size: var(--bb-fs-base);
}

.bb-status-subscribe-title {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(31px, 3vw, 38px);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.035em;
}

.bb-status-subscribe-text {
  margin: 0.875rem 0 0;
  max-width: 47.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Hero card
------------------------------------- */
.bb-status-subscribe-hero-card {
  padding: 20px;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(0.625rem);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.card.bb-card.bb-status-subscribe-hero-card {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
}

.bb-status-subscribe-hero-card-title {
  margin: 0 0 10px;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-subscribe-hero-card-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-subscribe-hero-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 16px;
}

.bb-status-subscribe-hero-chip {
  --bb-chip-bg: rgba(4, 17, 36, .38);
  --bb-chip-color: rgba(255, 255, 255, .88);
  --bb-chip-border-color: rgba(255, 255, 255, .12);
  --bb-chip-padding-x: .7rem;
  --bb-chip-padding-y: .32rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 30px;
}

.bb-status-subscribe-hero-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  color: var(--bb-warning);
}

/* -------------------------------------
   Main
------------------------------------- */
.bb-status-subscribe-main {
  padding: 30px 0 42px;
  margin-top: 30px;
}

.bb-status-subscribe-shell {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 1.125rem;
  align-items: start;
}

/* -------------------------------------
   Channel sidebar
------------------------------------- */
.bb-status-channel-card {
  padding: 14px;
  position: sticky;
  top: 20px;
}

.bb-status-channel-title {
  margin: 0 0 10px;
  padding: 0 4px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-status-channel-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bb-status-channel-item {
  min-height: 52px;
  padding: 0 13px;
  border-radius: var(--bb-status-card-inner-radius);
  border: 1px solid transparent;
  background-color: var(--bb-body-bg);
  color: var(--bb-heading-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: var(--bb-transition-colors), box-shadow var(--bb-transition-fast);
}

.bb-status-channel-item:hover {
  background-color: var(--bb-tertiary-bg);
  border-color: var(--bb-border-color);
  text-decoration: none;
}

.bb-status-channel-item.active,
.bb-status-channel-item.is-active {
  color: var(--bb-white);
  border-color: var(--bb-dark);
  color: var(--bb-dark-inverse);
}

.bb-status-channel-item-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bb-status-channel-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--bb-status-card-inner-radius);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bb-status-channel-item.active .bb-status-channel-icon,
.bb-status-channel-item.is-active .bb-status-channel-icon {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 12%, transparent);
  color: var(--bb-warning);
}

.bb-status-channel-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-status-channel-name {
  display: block;
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-status-channel-desc {
  display: block;
  margin-top: 2px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-status-channel-item.active .bb-status-channel-desc,
.bb-status-channel-item.is-active .bb-status-channel-desc {
  color: rgba(255, 255, 255, 0.68);
}

.bb-status-channel-item > .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  color: var(--bb-secondary-color);
}

.bb-status-channel-item.active > .material-symbols-outlined,
.bb-status-channel-item.is-active > .material-symbols-outlined {
  color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------
   Form card
------------------------------------- */
.bb-status-form-card {
  padding: 26px;
}

.bb-status-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 24px;
}

.bb-status-form-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--bb-status-card-inner-radius);
  background-color: var(--bb-warning-light);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bb-status-form-icon .material-symbols-outlined {
  font-size: var(--bb-h2);
}

.bb-status-form-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-2xl);
  line-height: 1.22;
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.02em;
}

.bb-status-form-text {
  margin: 8px 0 0;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
}

/* -------------------------------------
   Alerts
------------------------------------- */
.bb-status-alert {
  padding: 0.8125rem 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

.alert.bb-status-alert.alert-success,
.bb-status-alert.success {
  background-color: var(--bb-success-light);
  color: var(--bb-success);
  border-color: color-mix(in srgb, var(--bb-success) 18%, transparent);
}

.alert.bb-status-alert.alert-danger,
.bb-status-alert.error {
  background-color: var(--bb-danger-light);
  color: var(--bb-danger);
  border-color: color-mix(in srgb, var(--bb-danger) 18%, transparent);
}

.bb-status-alert .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  flex-shrink: 0;
}

/* -------------------------------------
   Fields
------------------------------------- */
.bb-status-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bb-status-label {
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.form-control.bb-status-input {
  min-height: 48px;
  border-radius: var(--bb-status-card-inner-radius);
  border-color: var(--bb-border-color-strong);
  background-color: var(--bb-body-bg);
  color: var(--bb-body-color);
  padding-inline: 14px;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
}

.form-control.bb-status-input:focus {
  border-color: var(--bb-dark);
}

.bb-status-help {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Options
------------------------------------- */
.bb-status-options {
  display: grid;
  gap: 10px;
}

.form-check.bb-status-radio,
.form-check.bb-status-checkbox {
  min-height: 42px;
  padding: 10px 12px;
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
  cursor: pointer;
}

.form-check.bb-status-radio .form-check-input,
.form-check.bb-status-checkbox .form-check-input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
}

.form-check.bb-status-radio .form-check-label,
.form-check.bb-status-checkbox .form-check-label {
  cursor: pointer;
}

.bb-status-component-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* -------------------------------------
   Submit actions
------------------------------------- */
.bb-status-submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-status-primary-button,
.bb-status-secondary-button {
  min-height: 48px;
  gap: 9px;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
}

.btn.bb-status-primary-button {
  --bb-btn-bg: var(--bb-dark);
  --bb-btn-border-color: var(--bb-dark);
  --bb-btn-color: var(--bb-dark-inverse);
  --bb-btn-hover-bg: var(--bb-dark-hover);
  --bb-btn-hover-border-color: var(--bb-dark-hover);
  --bb-btn-hover-color: var(--bb-dark-inverse);
}

.btn.bb-status-secondary-button {
  --bb-btn-bg: var(--bb-body-bg);
  --bb-btn-border-color: var(--bb-border-color);
  --bb-btn-color: var(--bb-heading-color);
  --bb-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-btn-hover-border-color: var(--bb-border-color-strong);
  --bb-btn-hover-color: var(--bb-heading-color);
}

.bb-status-primary-button .material-symbols-outlined,
.bb-status-secondary-button .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

/* -------------------------------------
   Static / copy / endpoints
------------------------------------- */
.bb-status-static-box {
  padding: 16px;
  background-color: var(--bb-tertiary-bg);
  display: grid;
  gap: 12px;
}

.bb-status-copy-line {
  min-height: 48px;
  padding: 0 14px;
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background-color: var(--bb-body-bg);
  color: var(--bb-heading-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
  overflow: hidden;
}

.bb-status-copy-line code {
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-status-mini-button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border-color);
  background-color: var(--bb-body-bg);
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  cursor: pointer;
  white-space: nowrap;
}

.bb-status-mini-button:hover {
  background-color: var(--bb-tertiary-bg);
  border-color: var(--bb-border-color-strong);
}

.bb-status-endpoint-list {
  display: grid;
  gap: 10px;
}

.bb-status-endpoint-item {
  padding: 0.8125rem 14px;
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
  background-color: var(--bb-body-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bb-status-endpoint-item code {
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
}

.badge.bb-status-method {
  background-color: var(--bb-success-light);
  color: var(--bb-success);
  border: 0;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1100px) {
  .bb-status-subscribe-hero-content {
    grid-template-columns: 1fr;
  }
  .bb-status-subscribe-shell {
    grid-template-columns: 1fr;
  }
  .bb-status-channel-card {
    position: static;
  }
  .bb-status-channel-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-status-subscribe-title {
    font-size: var(--bb-fs-3xl);
  }
  .bb-status-component-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-status-subscribe-hero-wrap {
    padding-top: 20px;
  }
  .bb-status-subscribe-hero {
    padding: 24px 20px;
    min-height: unset;
  }
  .bb-status-subscribe-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-status-subscribe-text {
    font-size: var(--bb-icon-size-md);
  }
  .bb-status-channel-list {
    grid-template-columns: 1fr;
  }
  .bb-status-form-card {
    padding: 18px;
  }
  .bb-status-form-head {
    flex-direction: column;
  }
  .bb-status-submit-row {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-status-primary-button,
  .bb-status-secondary-button {
    width: 100%;
  }
  .bb-status-endpoint-item {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* assets/scss/pages/status/_component.scss */
/* =====================================
   Status Component Detail
   Main CSS component-first
   Page-specific visual layer
===================================== */
/* -------------------------------------
   Hero
------------------------------------- */
.bb-status-component-hero-wrap {
  background-color: var(--bb-body-bg);
  padding: 30px 0 0;
}

.bb-status-component-hero {
  position: relative;
  overflow: hidden;
  min-height: 265px;
  padding: 34px 36px;
  color: var(--bb-white);
  background: radial-gradient(circle at 96% 0%, rgba(var(--bb-warning-rgb), 0.2), transparent 27%), radial-gradient(circle at 0% 100%, rgba(var(--bb-success-rgb), 0.12), transparent 30%), linear-gradient(135deg, var(--bb-color-navy-800) 0%, var(--bb-color-navy-700) 56%, var(--bb-color-navy-700) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bb-status-card-radius);
  box-shadow: var(--bb-shadow-lg);
}

.bb-status-component-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(var(--bb-warning-rgb), 0.12);
  pointer-events: none;
}

.bb-status-component-hero::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(var(--bb-success-rgb), 0.08);
  pointer-events: none;
}

.bb-status-component-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 34px;
  align-items: center;
}

.bb-status-component-back {
  --bb-chip-bg: rgba(255, 255, 255, .08);
  --bb-chip-color: rgba(255, 255, 255, .86);
  --bb-chip-border-color: rgba(255, 255, 255, .12);
  --bb-chip-padding-x: .8rem;
  --bb-chip-padding-y: .35rem;
  --bb-chip-font-size: var(--bb-icon-size-md);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 34px;
  width: fit-content;
  margin-bottom: 1rem;
}

.bb-status-component-back:hover {
  --bb-chip-bg: rgba(255, 255, 255, .12);
  --bb-chip-color: var(--bb-white);
  text-decoration: none;
}

.bb-status-component-eyebrow {
  --bb-chip-bg: rgba(var(--bb-success-rgb), .16);
  --bb-chip-color: color-mix(in srgb, var(--bb-success) 62%, var(--bb-white));
  --bb-chip-border-color: rgba(255, 255, 255, .10);
  --bb-chip-padding-x: .65rem;
  --bb-chip-padding-y: 0.25rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 1.75rem;
  width: fit-content;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bb-status-component-back .material-symbols-outlined,
.bb-status-component-eyebrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-status-component-title {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(31px, 3vw, 40px);
  line-height: var(--bb-line-height-tight);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.035em;
}

.bb-status-component-text {
  margin: 0.875rem 0 0;
  max-width: 47.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.bb-status-component-hero-pill,
.bb-status-component-status-pill {
  --bb-chip-padding-x: .85rem;
  --bb-chip-padding-y: .45rem;
  --bb-chip-font-size: var(--bb-icon-size-md);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 38px;
}

.bb-status-component-hero-pill {
  --bb-chip-bg: rgba(4, 17, 36, .38);
  --bb-chip-color: rgba(255, 255, 255, .88);
  --bb-chip-border-color: rgba(255, 255, 255, .12);
}

.bb-status-component-hero-pill strong {
  color: var(--bb-warning);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-status-pill {
  --bb-chip-bg: rgba(var(--bb-success-rgb), .20);
  --bb-chip-color: color-mix(in srgb, var(--bb-success) 62%, var(--bb-white));
  --bb-chip-border-color: transparent;
}

.bb-status-component-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bb-success);
  display: inline-block;
  flex: 0 0 auto;
}

/* -------------------------------------
   Hero Summary
------------------------------------- */
.bb-status-component-summary-card {
  padding: 1.375rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(0.625rem);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.card.bb-card.bb-status-component-summary-card {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
}

.bb-status-component-summary-title {
  margin: 0 0 18px;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 0.8125rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-summary-row strong {
  color: var(--bb-white);
  font-weight: var(--bb-fw-semibold);
  text-align: right;
}

/* -------------------------------------
   Main Layout
------------------------------------- */
.bb-status-component-main {
  padding: 18px 0 28px;
  margin-top: 30px;
}

.bb-status-component-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.bb-status-component-stack {
  min-width: 0;
  display: grid;
  gap: 1.125rem;
}

.bb-status-component-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* -------------------------------------
   Shared Component Card Text
------------------------------------- */
.bb-status-component-card-header {
  padding: 22px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bb-status-component-section-label {
  --bb-chip-bg: var(--bb-success-light);
  --bb-chip-color: var(--bb-success);
  --bb-chip-border-color: transparent;
  --bb-chip-padding-x: .65rem;
  --bb-chip-padding-y: 0.25rem;
  --bb-chip-font-size: var(--bb-fs-sm);
  --bb-chip-font-weight: var(--bb-fw-bold);
  --bb-chip-min-height: 26px;
  width: fit-content;
  margin-bottom: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-status-component-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
}

.bb-status-component-card-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.015em;
}

.bb-status-component-card-text {
  margin: 8px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Health Summary
------------------------------------- */
.bb-status-component-health-card {
  padding: 22px 24px 24px;
}

.bb-status-component-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.bb-status-component-health-item {
  padding: 16px;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
}

.bb-status-component-health-label {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-component-health-value {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-health-note {
  display: grid;
  gap: 10px;
  margin-top: 0.875rem;
}

.bb-status-component-health-note-item {
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--bb-body-bg);
  border: var(--bb-status-panel-border);
  border-radius: var(--bb-status-panel-radius);
}

.bb-status-component-health-note-item > .material-symbols-outlined {
  width: 34px;
  height: 34px;
  border-radius: var(--bb-status-card-inner-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bb-success);
  background-color: var(--bb-success-light);
  font-size: var(--bb-fs-xl);
}

.bb-status-component-health-note-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-status-component-health-note-item span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Metrics
------------------------------------- */
.bb-status-component-metric-grid {
  padding: 15px 24px 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bb-status-component-metric {
  background-color: var(--bb-tertiary-bg);
  padding: 16px;
}

.bb-status-component-metric-label {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  margin-bottom: 5px;
}

.bb-status-component-metric-value {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -------------------------------------
   Side
------------------------------------- */
.bb-status-component-side-card {
  padding: 20px;
}

.bb-status-component-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.bb-status-component-side-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-side-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--bb-status-card-inner-radius);
  background-color: var(--bb-warning-light);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bb-status-component-side-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-status-component-side-list {
  display: grid;
  gap: 10px;
}

.bb-status-component-side-item {
  display: block;
  background-color: var(--bb-tertiary-bg);
  padding: 0.8125rem;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-status-component-side-item:hover {
  border-color: var(--bb-border-color-strong);
  box-shadow: var(--bb-shadow-xs);
  transform: translateY(-1px);
  color: inherit;
  text-decoration: none;
}

.bb-status-component-side-item-title {
  margin: 0 0 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
}

.bb-status-component-side-item-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-side-item-meta {
  margin-top: 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-side-empty {
  background-color: var(--bb-tertiary-bg);
  padding: 14px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-status-component-side-empty strong,
.bb-status-component-side-empty code {
  color: var(--bb-heading-color);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-status-component-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  .bb-status-component-hero-content {
    grid-template-columns: 1fr;
  }
  .bb-status-component-health-grid,
  .bb-status-component-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-status-component-hero-wrap {
    padding-top: 20px;
  }
  .bb-status-component-hero {
    min-height: unset;
    padding: 24px 20px;
  }
  .bb-status-component-text {
    font-size: var(--bb-icon-size-md);
  }
  .bb-status-component-health-card {
    padding: 18px;
  }
  .bb-status-component-health-grid,
  .bb-status-component-metric-grid {
    grid-template-columns: 1fr;
  }
  .bb-status-component-metric-grid {
    padding: 0 18px 18px;
  }
}
/* 8. Web Bulbulustur Pages */
/* Ana web projesinde hafif layout, auth/form ve ileride sayfa bazlı düzenler burada. */
/* =====================================
   Web Bulbulustur - Layout Light
   Scope: _LayoutLight.cshtml
   Layer: layout/_layout-light.scss

   Purpose:
   - Lightweight web/form pages
   - No legacy theme dependency
   - No jQuery/vendor dependency
   - Main CSS token-driven premium form stage

   Theme:
   - Light / Navy / Dark safe.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - layout/_layout-light.scss owns only this layout's local stage tokens.
===================================== */
/* =====================================
   Layout Light Tokens
===================================== */
.bb-layout-light-page {
  --bb-layout-light-content-width: 32rem;
  --bb-layout-light-header-action-offset: 0;
  --bb-layout-light-bg:
    radial-gradient(
      circle at 50% -8%,
      color-mix(in srgb, var(--bb-primary) 14%, transparent),
      transparent 28rem
    ),
    radial-gradient(
      circle at 16% 26%,
      color-mix(in srgb, var(--bb-info) 6%, transparent),
      transparent 24rem
    ),
    radial-gradient(
      circle at 86% 82%,
      color-mix(in srgb, var(--bb-primary) 8%, transparent),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      var(--bb-body-bg),
      color-mix(in srgb, var(--bb-tertiary-bg) 70%, var(--bb-body-bg))
    );
  --bb-layout-light-card-bg: color-mix(
    in srgb,
    var(--bb-surface-elevated) 96%,
    var(--bb-body-bg)
  );
  --bb-layout-light-card-border: color-mix(
    in srgb,
    var(--bb-border-color) 76%,
    transparent
  );
  --bb-layout-light-card-shadow:
    0 2.25rem 5.5rem color-mix(in srgb, var(--bb-emphasis-color) 9%, transparent),
    0 0.25rem 1rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
  --bb-layout-light-footer-color: color-mix(in srgb, var(--bb-secondary-color) 88%, transparent);
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--bb-body-color);
  background: var(--bb-layout-light-bg);
}

/* =====================================
   Navy Mode Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-layout-light-page {
  --bb-layout-light-bg:
    radial-gradient(
      circle at 50% -8%,
      color-mix(in srgb, var(--bb-primary) 12%, transparent),
      transparent 28rem
    ),
    radial-gradient(
      circle at 16% 26%,
      color-mix(in srgb, var(--bb-info) 9%, transparent),
      transparent 24rem
    ),
    radial-gradient(
      circle at 86% 82%,
      color-mix(in srgb, var(--bb-primary) 7%, transparent),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      var(--bb-body-bg),
      color-mix(in srgb, var(--bb-tertiary-bg) 62%, var(--bb-body-bg))
    );
  --bb-layout-light-card-bg: color-mix(
    in srgb,
    var(--bb-surface-elevated) 92%,
    var(--bb-body-bg)
  );
  --bb-layout-light-card-border: color-mix(
    in srgb,
    var(--bb-border-color) 80%,
    transparent
  );
  --bb-layout-light-card-shadow:
    0 2rem 5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 30%, transparent),
    0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 18%, transparent);
  --bb-layout-light-footer-color: color-mix(in srgb, var(--bb-secondary-color) 84%, transparent);
}

/* =====================================
   Dark Mode Local Tuning
===================================== */
html[data-bs-theme=dark] .bb-layout-light-page {
  --bb-layout-light-bg:
    radial-gradient(
      circle at 50% -8%,
      color-mix(in srgb, var(--bb-primary) 10%, transparent),
      transparent 28rem
    ),
    radial-gradient(
      circle at 16% 26%,
      color-mix(in srgb, var(--bb-info) 7%, transparent),
      transparent 24rem
    ),
    radial-gradient(
      circle at 86% 82%,
      color-mix(in srgb, var(--bb-primary) 6%, transparent),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      var(--bb-body-bg),
      color-mix(in srgb, var(--bb-tertiary-bg) 58%, var(--bb-body-bg))
    );
  --bb-layout-light-card-bg: color-mix(
    in srgb,
    var(--bb-surface-elevated) 90%,
    var(--bb-body-bg)
  );
  --bb-layout-light-card-border: color-mix(
    in srgb,
    var(--bb-border-color) 78%,
    transparent
  );
  --bb-layout-light-card-shadow:
    0 2rem 5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 34%, transparent),
    0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent);
  --bb-layout-light-footer-color: color-mix(in srgb, var(--bb-secondary-color) 82%, transparent);
}

/* =====================================
   Shell
===================================== */
.bb-layout-light-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =====================================
   Header
===================================== */
.bb-layout-light-header {
  flex: 0 0 auto;
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.bb-layout-light-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3rem;
}

.bb-layout-light-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.bb-layout-light-logo {
  display: block;
  width: auto;
  max-width: clamp(11rem, 18vw, 15rem);
  height: auto;
}

.bb-layout-light-header-inner > :not(.bb-layout-light-logo-link) {
  position: absolute;
  top: var(--bb-layout-light-header-action-offset);
  right: 0;
}

/* =====================================
   Main
===================================== */
.bb-layout-light-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.bb-layout-light-main-inner {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bb-layout-light-content-col {
  width: 100%;
  max-width: var(--bb-layout-light-content-width);
}

/* =====================================
   Card
===================================== */
.bb-layout-light-card {
  width: 100%;
  overflow: hidden;
  background-color: var(--bb-layout-light-card-bg);
  border: var(--bb-border-width) solid var(--bb-layout-light-card-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-layout-light-card-shadow);
}

.bb-layout-light-card-body {
  padding: clamp(1.65rem, 4vw, 2.45rem);
}

/* =====================================
   Footer
===================================== */
.bb-layout-light-footer {
  flex: 0 0 auto;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.bb-layout-light-footer-text {
  max-width: 42rem;
  margin: 0 auto;
  color: var(--bb-layout-light-footer-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  text-align: center;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 767.98px) {
  .bb-layout-light-header {
    padding-top: 1rem;
  }
  .bb-layout-light-header-inner {
    justify-content: flex-start;
  }
  .bb-layout-light-header-inner > :not(.bb-layout-light-logo-link) {
    position: static;
    margin-left: auto;
  }
  .bb-layout-light-logo {
    max-width: 11rem;
  }
  .bb-layout-light-main {
    align-items: flex-start;
    padding-top: 1.25rem;
  }
  .bb-layout-light-card-body {
    padding: 1.35rem;
  }
}
@media (max-width: 575.98px) {
  .bb-layout-light-page {
    --bb-layout-light-content-width: 100%;
  }
  .bb-layout-light-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-layout-light-footer {
    padding-bottom: 1.25rem;
  }
}
/* Bulbulustur Home Page*/
/* Sections */
.bb-home-section + .bb-home-section {
  border-top: 1px solid color-mix(in srgb, var(--bb-home-border) 68%, transparent);
}

.bb-home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.bb-home-section-head-left {
  max-width: 860px;
}

.bb-home-section-chip {
  margin-bottom: 0.85rem;
}

.bb-home-section-title {
  max-width: 820px;
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-home-section-text {
  max-width: 47.5rem;
  margin: 0.75rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* Mode cards */
.bb-home-mode-section {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.bb-home-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bb-home-mode-card {
  position: relative;
  overflow: hidden;
  min-height: 17rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--bb-white);
  border: 1px solid color-mix(in srgb, var(--bb-white) 12%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.25rem 3.5rem rgba(15, 23, 42, 0.14);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-home-mode-card::before {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 15rem;
  height: 15rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-home-mode-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.18);
}

.bb-home-mode-card-wholesale {
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-primary) 28%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-color-navy-700) 0%, var(--bb-color-navy-600) 48%, var(--bb-color-blue-800) 100%);
}

.bb-home-mode-card-retail {
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-primary) 26%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-color-ink-100) 0%, var(--bb-color-ink-50) 48%, var(--bb-color-gray-600) 100%);
}

.bb-home-mode-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bb-home-mode-card-badge {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-white) 16%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-home-mode-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bb-white) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-home-mode-card-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-home-mode-card-link:hover {
  opacity: 0.9;
}

.bb-home-mode-card-icon {
  position: relative;
  z-index: 2;
  width: 3.75rem;
  height: 3.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-xl);
}

.bb-home-mode-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-home-mode-card-title {
  position: relative;
  z-index: 2;
  max-width: 35rem;
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-home-mode-card-text {
  position: relative;
  z-index: 2;
  max-width: 37rem;
  margin: 0.7rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 82%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Categories */
.bb-home-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.bb-home-category-card {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  text-align: center;
  text-decoration: none !important;
  color: var(--bb-heading-color);
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-white)) 100%);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-home-category-card:hover {
  transform: translateY(-0.2rem);
  color: var(--bb-heading-color);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-home-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-home-category-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-home-accent-text);
  background-color: var(--bb-home-accent-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-home-category-icon .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

.bb-home-category-card strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

/* Services */
.bb-home-services-section {
  background-color: var(--bb-tertiary-bg);
}

.bb-home-service-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}

.bb-home-service-strip::-webkit-scrollbar {
  height: 0.5rem;
}

.bb-home-service-strip::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-border-color) 84%, var(--bb-secondary-color));
  border-radius: var(--bb-radius-pill);
}

.bb-home-service-card {
  min-width: 16rem;
  max-width: 16rem;
  flex: 0 0 16rem;
  padding: 1.25rem;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-home-service-icon {
  width: 3.375rem;
  height: 3.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-home-accent-text);
  background-color: var(--bb-home-accent-soft);
  border-radius: var(--bb-radius-lg);
}

.bb-home-service-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-home-service-card h3 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h5);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-home-service-card p {
  margin: 0.55rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Why */
.bb-home-why-box {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-2xl);
}

.bb-home-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bb-home-why-card {
  min-height: 100%;
  padding: 1.35rem;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-home-why-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-home-accent-text);
  background-color: var(--bb-home-accent-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-home-why-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-home-why-card h3 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h5);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-home-why-card p {
  margin: 0.55rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Existing component guards */
.bb-home-page img {
  max-width: 100%;
}

.bb-home-page .material-symbols-outlined {
  display: none;
}

/* =====================================
   Homepage Banner Component
===================================== */
.bb-home-banner {
  position: relative;
  z-index: 3;
  padding: 0.875rem clamp(1rem, 2.4vw, 1.875rem);
  color: var(--bb-home-banner-text-color, var(--bb-white));
}

.bb-home-banner-grid {
  min-height: 4.875rem;
  display: grid;
  grid-template-columns: minmax(7rem, 0.22fr) minmax(0, 1fr) minmax(7rem, 0.22fr);
  gap: 1rem;
  align-items: center;
}

.bb-home-banner-media {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bb-home-banner-image {
  width: auto;
  max-width: 100%;
  max-height: 3.5rem;
  display: block;
  object-fit: contain;
}

.bb-home-banner-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bb-home-banner-title {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bb-home-banner-text-color, var(--bb-white));
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-home-banner-subtitle {
  max-width: 100%;
  margin: 0.25rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--bb-home-banner-text-color, var(--bb-white)) 88%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-home-banner-action {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bb-home-banner-btn {
  min-width: 7.5rem;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary);
  border: 1px solid color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--bb-primary) 24%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-home-banner-btn:hover {
  transform: translateY(-0.0625rem);
  color: var(--bb-primary-inverse) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-white));
  box-shadow: 0 0.9rem 2rem color-mix(in srgb, var(--bb-primary) 28%, transparent);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-home-banner {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .bb-home-banner-grid {
    grid-template-columns: minmax(5.5rem, 0.22fr) minmax(0, 1fr) minmax(6rem, 0.22fr);
    gap: 0.75rem;
  }
  .bb-home-banner-image {
    max-height: 3rem;
  }
  .bb-home-banner-btn {
    min-width: 6.75rem;
    min-height: 2.75rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media (max-width: 767.98px) {
  .bb-home-banner-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0.875rem;
  }
  .bb-home-banner-media,
  .bb-home-banner-content,
  .bb-home-banner-action {
    justify-content: center;
    text-align: center;
  }
  .bb-home-banner-title,
  .bb-home-banner-subtitle {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }
  .bb-home-banner-btn {
    width: 100%;
    max-width: 18rem;
  }
}
/* =====================================
   Homepage Hero Slider Component
===================================== */
.bb-home-hero-slider {
  margin-top: 40px;
  position: relative;
  z-index: 3;
  overflow: hidden;
  min-height: clamp(28rem, 46vw, 34rem);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.25rem 3.75rem rgba(15, 23, 42, 0.18);
}

.bb-home-hero-carousel,
.bb-home-hero-carousel-inner,
.bb-home-hero-carousel-item {
  height: 100%;
  min-height: inherit;
}

.bb-home-hero-slide {
  position: relative;
  overflow: hidden;
  min-height: clamp(28rem, 46vw, 34rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem) clamp(4.75rem, 6vw, 5.75rem);
  color: var(--bb-home-hero-slide-text, var(--bb-white));
  background: radial-gradient(circle at 82% 28%, rgba(123, 90, 255, 0.16), transparent 28%), radial-gradient(circle at 18% 85%, rgba(255, 212, 0, 0.08), transparent 22%), var(--bb-home-hero-slide-bg, var(--bb-color-blue-800));
}

.bb-home-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.04) 52%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
}

.bb-home-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 45rem;
}

.bb-home-hero-badge {
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.125rem;
  padding: 0 0.95rem;
  color: var(--bb-home-hero-slide-text, var(--bb-white));
  background-color: color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 16%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
}

.bb-home-hero-title {
  max-width: 44rem;
  margin: 0;
  color: var(--bb-home-hero-slide-text, var(--bb-white));
  font-size: clamp(2.1rem, 3.55vw, 3.55rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-home-hero-text {
  max-width: 39rem;
  min-height: 4.74em;
  margin: 1rem 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 84%, transparent);
  font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
  font-weight: var(--bb-fw-medium);
  line-height: 1.58;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bb-home-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

/* Default slider buttons */
.bb-home-hero-btn-primary,
.bb-home-btn-pop {
  min-width: 10.5rem;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.55rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary);
  border: 1px solid color-mix(in srgb, var(--bb-primary) 86%, var(--bb-dark));
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0.8rem 1.9rem color-mix(in srgb, var(--bb-primary) 25%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-home-hero-btn-primary:hover,
.bb-home-btn-pop:hover {
  transform: translateY(-0.0625rem);
  color: var(--bb-primary-inverse) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-white));
  box-shadow: 0 0.95rem 2.15rem color-mix(in srgb, var(--bb-primary) 30%, transparent);
}

.bb-home-hero-btn-secondary,
.bb-home-btn-soft {
  min-width: 10.5rem;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.55rem;
  color: var(--bb-home-hero-slide-text, var(--bb-white)) !important;
  background-color: color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 14%, transparent);
  border-radius: var(--bb-radius-pill);
  backdrop-filter: blur(0.375rem);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  transition: background-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-home-hero-btn-secondary:hover,
.bb-home-btn-soft:hover {
  transform: translateY(-0.0625rem);
  color: var(--bb-home-hero-slide-text, var(--bb-white)) !important;
  background-color: color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 16%, transparent);
}

.bb-home-hero-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-home-hero-visual-main {
  position: relative;
  width: 100%;
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-home-hero-visual-main::before {
  content: "";
  position: absolute;
  width: clamp(15rem, 28vw, 23rem);
  height: clamp(15rem, 28vw, 23rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--bb-home-hero-slide-text, var(--bb-white)) 14%, transparent) 0%, transparent 72%);
  border-radius: 50%;
  filter: blur(0.5rem);
}

.bb-home-hero-image {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 100%;
  max-height: clamp(18rem, 31vw, 23rem);
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1.25rem 2.5rem rgba(0, 0, 0, 0.18));
}

/* Indicators */
.bb-home-hero-slider-nav {
  position: absolute;
  left: 50%;
  bottom: 1.625rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}

.bb-home-hero-slider-nav [data-bs-target],
.bb-home-hero-slider-dot {
  width: 0.5625rem;
  height: 0.5625rem;
  margin: 0;
  padding: 0;
  background-color: color-mix(in srgb, var(--bb-white) 36%, transparent);
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-home-hero-slider-nav .active,
.bb-home-hero-slider-dot.active {
  width: 1.875rem;
  height: 0.5rem;
  background-color: var(--bb-primary);
}

/* Controls */
.bb-home-hero-control {
  width: 4.5rem;
  opacity: 1;
  z-index: 5;
}

.bb-home-hero-control-prev {
  justify-content: flex-start;
  left: 0.5625rem;
}

.bb-home-hero-control-next {
  justify-content: flex-end;
  right: 0.5625rem;
}

.bb-home-hero-arrow {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: 50%;
  backdrop-filter: blur(0.375rem);
  transition: transform var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-home-hero-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: var(--bb-line-height-tight);
}

.bb-home-hero-control:hover .bb-home-hero-arrow {
  transform: scale(1.04);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 22%, transparent);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-home-hero-slider {
    min-height: auto;
  }
  .bb-home-hero-carousel,
  .bb-home-hero-carousel-inner,
  .bb-home-hero-carousel-item {
    min-height: auto;
  }
  .bb-home-hero-slide {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.25rem 1.75rem 4.75rem;
    text-align: center;
  }
  .bb-home-hero-copy {
    max-width: 100%;
    margin: 0 auto;
  }
  .bb-home-hero-title,
  .bb-home-hero-text {
    max-width: none;
  }
  .bb-home-hero-actions {
    justify-content: center;
  }
  .bb-home-hero-visual-main {
    min-height: 14rem;
  }
  .bb-home-hero-image {
    max-height: 15rem;
  }
  .bb-home-hero-slider-nav {
    bottom: 1.125rem;
  }
}
@media (max-width: 767.98px) {
  .bb-home-hero-slider {
    border-radius: var(--bb-radius-xl);
  }
  .bb-home-hero-slide {
    padding: 2rem 1.25rem 4.5rem;
  }
  .bb-home-hero-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
  .bb-home-hero-text {
    font-size: var(--bb-fs-base);
  }
  .bb-home-hero-actions {
    gap: 0.625rem;
  }
  .bb-home-hero-btn-primary,
  .bb-home-hero-btn-secondary,
  .bb-home-btn-pop,
  .bb-home-btn-soft {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 575.98px) {
  .bb-home-hero-slide {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .bb-home-hero-badge {
    max-width: 100%;
    white-space: normal;
  }
  .bb-home-hero-visual-main {
    min-height: 12rem;
  }
  .bb-home-hero-image {
    max-height: 13rem;
  }
}
/* =====================================
   Homepage B2B Featured Products Component
===================================== */
.bb-home-section-action-link {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 1rem;
  color: var(--bb-heading-color) !important;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-home-section-action-link:hover {
  transform: translateY(-0.0625rem);
  color: var(--bb-primary) !important;
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-home-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-home-section-action-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-home-b2b-featured-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.bb-home-b2b-featured-body {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
}

.bb-home-b2b-featured-title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.65em;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-home-b2b-featured-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-home-section-action-link {
    width: fit-content;
  }
}
@media (max-width: 767.98px) {
  .bb-home-b2b-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}
@media (max-width: 575.98px) {
  .bb-home-section-action-link {
    width: 100%;
  }
  .bb-home-b2b-featured-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   Homepage B2C Featured Products Component
===================================== */
.bb-home-b2c-featured-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.bb-home-b2c-featured-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-home-b2c-featured-card:hover {
  transform: translateY(-0.2rem);
  color: var(--bb-heading-color);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-home-border));
  box-shadow: var(--bb-shadow-sm);
}

/* =====================================
   Homepage New Arrivals Component
===================================== */
.bb-home-new-arrivals-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.bb-home-new-arrival-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-home-border-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-home-new-arrival-card:hover {
  transform: translateY(-0.2rem);
  color: var(--bb-heading-color);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-home-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-home-new-arrival-media {
  position: relative;
  min-height: 9rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-white)) 100%);
  border-bottom: 2px solid var(--bb-primary);
}

.bb-home-new-arrival-media::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 0.55rem;
  height: 0.55rem;
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-home-new-arrival-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform var(--bb-transition-normal);
}

.bb-home-new-arrival-card:hover .bb-home-new-arrival-media img {
  transform: scale(1.035);
}

.bb-home-new-arrival-body {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
}

.bb-home-new-arrival-title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.65em;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-home-new-arrival-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  width: fit-content;
  max-width: 100%;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  color: var(--bb-home-accent-text);
  background-color: var(--bb-home-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-home-new-arrival-meta .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-home-new-arrivals-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-home-new-arrivals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-home-new-arrivals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .bb-home-new-arrival-media {
    min-height: 8.5rem;
  }
}
@media (max-width: 575.98px) {
  .bb-home-new-arrivals-grid {
    grid-template-columns: 1fr;
  }
  .bb-home-new-arrival-media {
    min-height: 11rem;
    aspect-ratio: 16/10;
  }
}
/* Responsive */
@media (max-width: 1199.98px) {
  .bb-home-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-home-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-home-mode-grid {
    grid-template-columns: 1fr;
  }
  .bb-home-mode-card {
    min-height: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-home-section-title {
    font-size: clamp(1.65rem, 7vw, 2.15rem);
  }
  .bb-home-section-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-home-category-grid,
  .bb-home-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .bb-home-category-card {
    min-height: 8rem;
  }
}
@media (max-width: 575.98px) {
  .bb-home-category-grid,
  .bb-home-why-grid {
    grid-template-columns: 1fr;
  }
  .bb-home-service-card {
    min-width: 14.75rem;
    max-width: 14.75rem;
    flex-basis: 14.75rem;
  }
}
/* Section head */
.bb-advert-section-head {
  max-width: 860px;
  margin-bottom: 28px;
}

.bb-advert-section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bb-advert-section-label {
  gap: 0.4375rem;
  margin-bottom: 0.75rem;
}

.bb-advert-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-advert-section-title {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-advert-section-text {
  max-width: 47.5rem;
  color: var(--bb-secondary-color);
}

/* Advert type cards */
.bb-advert-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bb-advert-type-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 38px;
  gap: 0.875rem;
  align-items: center;
  min-height: 130px;
  padding: 20px;
  border: 1px solid var(--bb-advert-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  color: inherit;
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-advert-type-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--bb-advert-accent) 36%, var(--bb-advert-border));
  background-color: color-mix(in srgb, var(--bb-advert-accent) 4%, var(--bb-body-bg));
  box-shadow: var(--bb-shadow-sm);
  color: inherit;
}

.bb-advert-type-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-advert-accent-soft);
  color: var(--bb-advert-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-advert-type-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-advert-type-content {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.bb-advert-type-content strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
}

.bb-advert-type-content span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-advert-type-arrow {
  width: 38px;
  height: 38px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-advert-border-soft);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), color var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-advert-type-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-advert-type-card:hover .bb-advert-type-arrow {
  transform: translateX(3px);
  color: var(--bb-white);
  border-color: var(--bb-dark);
  color: var(--bb-white);
}

.bb-advert-block {
  padding: 64px 0;
  border-top: 1px solid var(--bb-advert-border-soft);
}

.bb-advert-block-muted {
  background-color: var(--bb-tertiary-bg);
}

.bb-advert-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 48px;
  align-items: center;
}

.bb-advert-block-grid-reverse .bb-advert-block-content {
  order: 2;
}

.bb-advert-block-grid-reverse .bb-advert-block-visual {
  order: 1;
}

.bb-advert-block-label {
  gap: 0.4375rem;
  margin-bottom: 14px;
}

.bb-advert-block-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-advert-block-title {
  max-width: 47.5rem;
  margin-bottom: 14px;
  color: var(--bb-heading-color);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-advert-block-lead {
  max-width: 47.5rem;
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-advert-block-text {
  max-width: 820px;
  color: var(--bb-secondary-color);
  line-height: 1.85;
}

.bb-advert-visual-card {
  min-height: 340px;
  padding: 28px;
  border: 1px solid var(--bb-advert-border);
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-advert-accent) 14%, transparent) 0, transparent 32%), var(--bb-body-bg);
  box-shadow: var(--bb-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bb-advert-visual-card-dark {
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-advert-accent) 18%, transparent) 0, transparent 32%), var(--bb-dark);
  color: var(--bb-white);
}

.bb-advert-visual-icon {
  width: 62px;
  height: 62px;
  margin-bottom: auto;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-advert-accent-soft);
  color: var(--bb-advert-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-advert-visual-icon .material-symbols-outlined {
  font-size: var(--bb-h2);
  line-height: 1;
}

.bb-advert-visual-card h3 {
  margin: 24px 0 10px;
  color: inherit;
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-advert-visual-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-advert-visual-card-dark p {
  color: color-mix(in srgb, var(--bb-theme-on-dark) 72%, transparent);
}

/* Feature list */
.bb-advert-feature-list {
  display: grid;
  gap: 0.875rem;
  margin-top: 22px;
}

.bb-advert-feature-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.875rem;
  padding: 16px;
  border: 1px solid var(--bb-advert-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
}

.bb-advert-feature-item > span {
  width: 44px;
  height: 44px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-advert-accent-soft);
  color: var(--bb-advert-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-advert-feature-item .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-advert-feature-item h3 {
  margin: 0 0 5px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-advert-feature-item p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-advert-faq-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--bb-advert-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-advert-detail-block {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  border-top: 1px solid var(--bb-advert-border-soft);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-advert-accent) 8%, transparent) 0, transparent 30%), var(--bb-advert-section-bg, var(--bb-body-bg));
}

.bb-advert-detail-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.bb-advert-detail-block-grid-reverse .bb-advert-detail-block-media {
  order: 2;
}

.bb-advert-detail-block-grid-reverse .bb-advert-detail-block-content {
  order: 1;
}

.bb-advert-detail-block-media {
  min-width: 0;
}

.bb-advert-detail-block-media img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid color-mix(in srgb, var(--bb-advert-border) 72%, transparent);
  box-shadow: var(--bb-shadow-sm);
}

.bb-advert-detail-block-content {
  min-width: 0;
}

.bb-advert-detail-block-label {
  gap: 0.4375rem;
  margin-bottom: 14px;
}

.bb-advert-detail-block-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-advert-detail-block-title {
  max-width: 47.5rem;
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-advert-detail-block-text {
  max-width: 820px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-advert-detail-block-text p:last-child {
  margin-bottom: 0;
}

.bb-advert-detail-block-full {
  max-width: 920px;
  margin: 0 auto;
  padding: 42px;
  border: 1px solid var(--bb-advert-border-soft);
  border-radius: var(--bb-radius-2xl);
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  box-shadow: var(--bb-shadow-xs);
  text-align: center;
}

.bb-advert-detail-block-full .bb-advert-detail-block-title,
.bb-advert-detail-block-full .bb-advert-detail-block-text {
  margin-left: auto;
  margin-right: auto;
}

.bb-advert-detail-empty-card {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 42px;
  border: 1px solid var(--bb-advert-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
  text-align: center;
}

.bb-advert-detail-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-advert-accent-soft);
  color: var(--bb-advert-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-advert-detail-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-advert-detail-empty-card h2 {
  margin: 0 0 10px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-advert-detail-empty-card p {
  max-width: 560px;
  margin: 0 auto 20px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-advert-detail-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--bb-advert-accent) 26%, var(--bb-advert-border));
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-advert-accent) 13%, transparent) 0, transparent 34%), var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-advert-detail-cta-label {
  gap: 0.4375rem;
  margin-bottom: 0.625rem;
}

.bb-advert-detail-cta-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-advert-detail-cta-card h2 {
  margin: 0 0 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: 1.22;
  font-weight: var(--bb-fw-bold);
}

.bb-advert-detail-cta-card p {
  max-width: 720px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-advert-detail-block-grid,
  .bb-advert-detail-block-grid-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bb-advert-detail-block-grid-reverse .bb-advert-detail-block-media,
  .bb-advert-detail-block-grid-reverse .bb-advert-detail-block-content {
    order: initial;
  }
  .bb-advert-detail-cta-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-advert-detail-block {
    padding: 42px 0;
  }
  .bb-advert-detail-block-media img {
    max-height: 320px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-advert-detail-block-full,
  .bb-advert-detail-empty-card,
  .bb-advert-detail-cta-card {
    padding: 1.375rem;
    border-radius: var(--bb-radius-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-advert-detail-cta-card .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 1199.98px) {
  .bb-advert-type-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-advert-block-grid,
  .bb-advert-block-grid-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bb-advert-block-grid-reverse .bb-advert-block-content,
  .bb-advert-block-grid-reverse .bb-advert-block-visual {
    order: initial;
  }
  .bb-advert-visual-card {
    min-height: 280px;
  }
}
@media (max-width: 767.98px) {
  .bb-advert-block {
    padding: 42px 0;
  }
  .bb-advert-type-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .bb-advert-type-arrow {
    grid-column: 2;
  }
  .bb-advert-faq-shell {
    padding: 1.375rem;
    border-radius: var(--bb-radius-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-advert-type-card,
  .bb-advert-visual-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-advert-feature-item {
    grid-template-columns: 1fr;
  }
}
/* Bulbulustur Pages*/
/* =====================================
   Bulbulustur Web Project
   Layer: web.scss

   Purpose:
   - Web project scope tokens
   - Web / B2B / B2C action accents
   - Shared web layout helpers
   - Account shell helpers
   - Compact hero
   - Preferences panel

   Rules:
   - Core theme tokens are consumed, not overwritten.
   - Raw colors come from --bb-color-* palette.
   - Bootstrap base classes may be used.
   - Bulbulustur project-specific classes use bb- prefix.
===================================== */
/* =====================================
   Web Project Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  /* Project surface */
  --bb-web-page-bg: var(--bb-body-bg);
  --bb-web-page-color: var(--bb-body-color);
  --bb-web-link-color: var(--bb-link-color);
  --bb-web-link-hover-color: var(--bb-link-hover-color);
  --bb-web-heading-color: var(--bb-heading-color);
  --bb-web-body-color: var(--bb-body-color);
  --bb-web-muted-color: var(--bb-secondary-color);
  /* Layout */
  --bb-web-section-y: 4.5rem;
  --bb-web-section-y-sm: 3rem;
  --bb-web-card-bg: var(--bb-surface-elevated);
  --bb-web-card-border-color: var(--bb-border-color);
  --bb-web-card-border: var(--bb-border-width) solid var(--bb-web-card-border-color);
  --bb-web-card-radius: var(--bb-radius-2xl);
  --bb-web-card-inner-radius: var(--bb-radius-lg);
  --bb-web-card-shadow: var(--bb-shadow-xs);
  --bb-web-card-padding: 1.5rem;
  --bb-web-panel-bg: var(--bb-surface-elevated);
  --bb-web-panel-border-color: var(--bb-border-color);
  --bb-web-panel-border: var(--bb-border-width) solid var(--bb-web-panel-border-color);
  --bb-web-panel-radius: var(--bb-radius-lg);
  --bb-web-section-soft-bg: var(--bb-surface-soft);
  --bb-web-section-muted-bg: var(--bb-surface-muted);
  /* General web actions */
  --bb-web-action-primary-bg: var(--bb-color-yellow-500);
  --bb-web-action-primary-bg-hover: var(--bb-color-yellow-600);
  --bb-web-action-primary-bg-active: var(--bb-color-yellow-700);
  --bb-web-action-primary-color: var(--bb-color-navy-900);
  --bb-web-action-primary-border: var(--bb-color-yellow-500);
  --bb-web-action-primary-border-hover: var(--bb-color-yellow-600);
  --bb-web-action-primary-shadow: color-mix(in srgb, var(--bb-color-yellow-500) 22%, transparent);
  --bb-web-action-secondary-bg: var(--bb-color-navy-900);
  --bb-web-action-secondary-bg-hover: var(--bb-color-navy-800);
  --bb-web-action-secondary-bg-active: var(--bb-color-navy-700);
  --bb-web-action-secondary-color: var(--bb-color-white);
  --bb-web-action-secondary-border: var(--bb-color-navy-900);
  --bb-web-action-secondary-border-hover: var(--bb-color-navy-800);
  --bb-web-action-secondary-shadow: color-mix(in srgb, var(--bb-color-navy-900) 18%, transparent);
  /* B2B actions */
  --bb-web-b2b-action-primary-bg: var(--bb-web-action-primary-bg);
  --bb-web-b2b-action-primary-bg-hover: var(--bb-web-action-primary-bg-hover);
  --bb-web-b2b-action-primary-bg-active: var(--bb-web-action-primary-bg-active);
  --bb-web-b2b-action-primary-color: var(--bb-web-action-primary-color);
  --bb-web-b2b-action-primary-border: var(--bb-web-action-primary-border);
  --bb-web-b2b-action-primary-border-hover: var(--bb-web-action-primary-border-hover);
  --bb-web-b2b-action-primary-shadow: var(--bb-web-action-primary-shadow);
  --bb-web-b2b-action-secondary-bg: var(--bb-color-blue-600);
  --bb-web-b2b-action-secondary-bg-hover: var(--bb-color-blue-700);
  --bb-web-b2b-action-secondary-bg-active: var(--bb-color-blue-800);
  --bb-web-b2b-action-secondary-color: var(--bb-color-white);
  --bb-web-b2b-action-secondary-border: var(--bb-color-blue-600);
  --bb-web-b2b-action-secondary-border-hover: var(--bb-color-blue-700);
  --bb-web-b2b-action-secondary-shadow: color-mix(in srgb, var(--bb-color-blue-600) 22%, transparent);
  /* B2C actions */
  --bb-web-b2c-action-primary-bg: var(--bb-web-action-primary-bg);
  --bb-web-b2c-action-primary-bg-hover: var(--bb-web-action-primary-bg-hover);
  --bb-web-b2c-action-primary-bg-active: var(--bb-web-action-primary-bg-active);
  --bb-web-b2c-action-primary-color: var(--bb-web-action-primary-color);
  --bb-web-b2c-action-primary-border: var(--bb-web-action-primary-border);
  --bb-web-b2c-action-primary-border-hover: var(--bb-web-action-primary-border-hover);
  --bb-web-b2c-action-primary-shadow: var(--bb-web-action-primary-shadow);
  --bb-web-b2c-action-secondary-bg: var(--bb-color-orange-500);
  --bb-web-b2c-action-secondary-bg-hover: var(--bb-color-orange-600);
  --bb-web-b2c-action-secondary-bg-active: var(--bb-color-orange-700);
  --bb-web-b2c-action-secondary-color: var(--bb-color-white);
  --bb-web-b2c-action-secondary-border: var(--bb-color-orange-500);
  --bb-web-b2c-action-secondary-border-hover: var(--bb-color-orange-600);
  --bb-web-b2c-action-secondary-shadow: color-mix(in srgb, var(--bb-color-orange-500) 22%, transparent);
  /* Account shell */
  --bb-account-accent: var(--bb-primary);
  --bb-account-accent-hover: var(--bb-primary-hover);
  --bb-account-accent-soft: var(--bb-primary-light);
  --bb-account-accent-text: color-mix(in srgb, var(--bb-account-accent) 78%, var(--bb-emphasis-color));
  --bb-account-border: var(--bb-border-color);
  --bb-account-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-account-surface: var(--bb-body-bg);
  --bb-account-surface-soft: var(--bb-tertiary-bg);
  --bb-account-surface-elevated: var(--bb-surface-elevated);
  /* Compact hero */
  --bb-web-compact-hero-overlay-start: color-mix(in srgb, var(--bb-color-navy-900) 78%, transparent);
  --bb-web-compact-hero-overlay-mid: color-mix(in srgb, var(--bb-color-navy-900) 48%, transparent);
  --bb-web-compact-hero-overlay-end: color-mix(in srgb, var(--bb-color-navy-900) 18%, transparent);
  --bb-web-compact-hero-color: var(--bb-color-white);
  /* Preferences */
  --bb-web-preferences-bg: var(--bb-surface-elevated);
  --bb-web-preferences-group-bg: var(--bb-surface-soft);
  --bb-web-preferences-border: var(--bb-border-color);
}

/* =====================================
   Web Project Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] {
  --bb-web-page-bg: var(--bb-body-bg);
  --bb-web-page-color: var(--bb-body-color);
  --bb-web-card-bg: var(--bb-surface-elevated);
  --bb-web-card-border-color: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-web-card-shadow: var(--bb-shadow-xs);
  --bb-web-panel-bg: var(--bb-surface-elevated);
  --bb-web-panel-border-color: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-web-section-soft-bg: var(--bb-surface-soft);
  --bb-web-section-muted-bg: var(--bb-surface-muted);
  --bb-web-action-primary-bg: var(--bb-color-yellow-500);
  --bb-web-action-primary-bg-hover: var(--bb-color-yellow-400);
  --bb-web-action-primary-bg-active: var(--bb-color-yellow-600);
  --bb-web-action-primary-color: var(--bb-color-navy-900);
  --bb-web-action-primary-border: var(--bb-color-yellow-500);
  --bb-web-action-primary-border-hover: var(--bb-color-yellow-400);
  --bb-web-action-primary-shadow: color-mix(in srgb, var(--bb-color-yellow-500) 24%, transparent);
  --bb-web-action-secondary-bg: var(--bb-color-navy-700);
  --bb-web-action-secondary-bg-hover: var(--bb-color-navy-600);
  --bb-web-action-secondary-bg-active: var(--bb-color-navy-800);
  --bb-web-action-secondary-color: var(--bb-color-white);
  --bb-web-action-secondary-border: color-mix(in srgb, var(--bb-color-navy-400) 42%, var(--bb-border-color));
  --bb-web-action-secondary-border-hover: color-mix(in srgb, var(--bb-color-navy-300) 54%, var(--bb-border-color));
  --bb-web-action-secondary-shadow: color-mix(in srgb, var(--bb-color-black) 26%, transparent);
  --bb-web-b2b-action-primary-bg: var(--bb-web-action-primary-bg);
  --bb-web-b2b-action-primary-bg-hover: var(--bb-web-action-primary-bg-hover);
  --bb-web-b2b-action-primary-bg-active: var(--bb-web-action-primary-bg-active);
  --bb-web-b2b-action-primary-color: var(--bb-web-action-primary-color);
  --bb-web-b2b-action-primary-border: var(--bb-web-action-primary-border);
  --bb-web-b2b-action-primary-border-hover: var(--bb-web-action-primary-border-hover);
  --bb-web-b2b-action-primary-shadow: var(--bb-web-action-primary-shadow);
  --bb-web-b2b-action-secondary-bg: var(--bb-color-blue-500);
  --bb-web-b2b-action-secondary-bg-hover: var(--bb-color-blue-400);
  --bb-web-b2b-action-secondary-bg-active: var(--bb-color-blue-600);
  --bb-web-b2b-action-secondary-color: var(--bb-color-white);
  --bb-web-b2b-action-secondary-border: var(--bb-color-blue-500);
  --bb-web-b2b-action-secondary-border-hover: var(--bb-color-blue-400);
  --bb-web-b2b-action-secondary-shadow: color-mix(in srgb, var(--bb-color-blue-500) 28%, transparent);
  --bb-web-b2c-action-primary-bg: var(--bb-web-action-primary-bg);
  --bb-web-b2c-action-primary-bg-hover: var(--bb-web-action-primary-bg-hover);
  --bb-web-b2c-action-primary-bg-active: var(--bb-web-action-primary-bg-active);
  --bb-web-b2c-action-primary-color: var(--bb-web-action-primary-color);
  --bb-web-b2c-action-primary-border: var(--bb-web-action-primary-border);
  --bb-web-b2c-action-primary-border-hover: var(--bb-web-action-primary-border-hover);
  --bb-web-b2c-action-primary-shadow: var(--bb-web-action-primary-shadow);
  --bb-web-b2c-action-secondary-bg: var(--bb-color-orange-500);
  --bb-web-b2c-action-secondary-bg-hover: var(--bb-color-orange-400);
  --bb-web-b2c-action-secondary-bg-active: var(--bb-color-orange-600);
  --bb-web-b2c-action-secondary-color: var(--bb-color-white);
  --bb-web-b2c-action-secondary-border: var(--bb-color-orange-500);
  --bb-web-b2c-action-secondary-border-hover: var(--bb-color-orange-400);
  --bb-web-b2c-action-secondary-shadow: color-mix(in srgb, var(--bb-color-orange-500) 28%, transparent);
  --bb-account-accent-soft: color-mix(in srgb, var(--bb-account-accent) 16%, var(--bb-body-bg));
  --bb-account-accent-text: color-mix(in srgb, var(--bb-account-accent) 88%, var(--bb-emphasis-color));
  --bb-account-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-account-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-web-compact-hero-overlay-start: color-mix(in srgb, var(--bb-color-ink-900) 82%, transparent);
  --bb-web-compact-hero-overlay-mid: color-mix(in srgb, var(--bb-color-ink-900) 56%, transparent);
  --bb-web-compact-hero-overlay-end: color-mix(in srgb, var(--bb-color-ink-900) 24%, transparent);
  --bb-web-preferences-bg: var(--bb-surface-elevated);
  --bb-web-preferences-group-bg: var(--bb-surface-soft);
  --bb-web-preferences-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
}

/* =====================================
   Web Project Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] {
  --bb-web-page-bg: var(--bb-body-bg);
  --bb-web-page-color: var(--bb-body-color);
  --bb-web-card-bg: var(--bb-surface-elevated);
  --bb-web-card-border-color: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-web-card-shadow: var(--bb-shadow-xs);
  --bb-web-panel-bg: var(--bb-surface-elevated);
  --bb-web-panel-border-color: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-web-section-soft-bg: var(--bb-surface-soft);
  --bb-web-section-muted-bg: var(--bb-surface-muted);
  --bb-web-action-primary-bg: var(--bb-color-yellow-500);
  --bb-web-action-primary-bg-hover: var(--bb-color-yellow-400);
  --bb-web-action-primary-bg-active: var(--bb-color-yellow-600);
  --bb-web-action-primary-color: var(--bb-color-navy-900);
  --bb-web-action-primary-border: var(--bb-color-yellow-500);
  --bb-web-action-primary-border-hover: var(--bb-color-yellow-400);
  --bb-web-action-primary-shadow: color-mix(in srgb, var(--bb-color-yellow-500) 24%, transparent);
  --bb-web-action-secondary-bg: var(--bb-color-coal-100);
  --bb-web-action-secondary-bg-hover: var(--bb-color-coal-50);
  --bb-web-action-secondary-bg-active: var(--bb-color-coal-200);
  --bb-web-action-secondary-color: var(--bb-color-white);
  --bb-web-action-secondary-border: color-mix(in srgb, var(--bb-color-white) 14%, var(--bb-border-color));
  --bb-web-action-secondary-border-hover: color-mix(in srgb, var(--bb-color-white) 22%, var(--bb-border-color));
  --bb-web-action-secondary-shadow: color-mix(in srgb, var(--bb-color-black) 34%, transparent);
  --bb-web-b2b-action-primary-bg: var(--bb-web-action-primary-bg);
  --bb-web-b2b-action-primary-bg-hover: var(--bb-web-action-primary-bg-hover);
  --bb-web-b2b-action-primary-bg-active: var(--bb-web-action-primary-bg-active);
  --bb-web-b2b-action-primary-color: var(--bb-web-action-primary-color);
  --bb-web-b2b-action-primary-border: var(--bb-web-action-primary-border);
  --bb-web-b2b-action-primary-border-hover: var(--bb-web-action-primary-border-hover);
  --bb-web-b2b-action-primary-shadow: var(--bb-web-action-primary-shadow);
  --bb-web-b2b-action-secondary-bg: var(--bb-color-blue-500);
  --bb-web-b2b-action-secondary-bg-hover: var(--bb-color-blue-400);
  --bb-web-b2b-action-secondary-bg-active: var(--bb-color-blue-600);
  --bb-web-b2b-action-secondary-color: var(--bb-color-white);
  --bb-web-b2b-action-secondary-border: var(--bb-color-blue-500);
  --bb-web-b2b-action-secondary-border-hover: var(--bb-color-blue-400);
  --bb-web-b2b-action-secondary-shadow: color-mix(in srgb, var(--bb-color-blue-500) 28%, transparent);
  --bb-web-b2c-action-primary-bg: var(--bb-web-action-primary-bg);
  --bb-web-b2c-action-primary-bg-hover: var(--bb-web-action-primary-bg-hover);
  --bb-web-b2c-action-primary-bg-active: var(--bb-web-action-primary-bg-active);
  --bb-web-b2c-action-primary-color: var(--bb-web-action-primary-color);
  --bb-web-b2c-action-primary-border: var(--bb-web-action-primary-border);
  --bb-web-b2c-action-primary-border-hover: var(--bb-web-action-primary-border-hover);
  --bb-web-b2c-action-primary-shadow: var(--bb-web-action-primary-shadow);
  --bb-web-b2c-action-secondary-bg: var(--bb-color-orange-500);
  --bb-web-b2c-action-secondary-bg-hover: var(--bb-color-orange-400);
  --bb-web-b2c-action-secondary-bg-active: var(--bb-color-orange-600);
  --bb-web-b2c-action-secondary-color: var(--bb-color-white);
  --bb-web-b2c-action-secondary-border: var(--bb-color-orange-500);
  --bb-web-b2c-action-secondary-border-hover: var(--bb-color-orange-400);
  --bb-web-b2c-action-secondary-shadow: color-mix(in srgb, var(--bb-color-orange-500) 28%, transparent);
  --bb-account-accent-soft: color-mix(in srgb, var(--bb-account-accent) 15%, var(--bb-body-bg));
  --bb-account-accent-text: color-mix(in srgb, var(--bb-account-accent) 86%, var(--bb-emphasis-color));
  --bb-account-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-account-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-web-compact-hero-overlay-start: color-mix(in srgb, var(--bb-color-ink-900) 86%, transparent);
  --bb-web-compact-hero-overlay-mid: color-mix(in srgb, var(--bb-color-ink-900) 60%, transparent);
  --bb-web-compact-hero-overlay-end: color-mix(in srgb, var(--bb-color-ink-900) 28%, transparent);
  --bb-web-preferences-bg: var(--bb-surface-elevated);
  --bb-web-preferences-group-bg: var(--bb-surface-soft);
  --bb-web-preferences-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
}

/* =====================================
   Web Project Scope
===================================== */
.bb-web-page {
  min-height: 100vh;
  background-color: var(--bb-web-page-bg);
  color: var(--bb-web-page-color);
}

/* =====================================
   Bootstrap Container Bridge
===================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: 30px;
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1200px;
  }
}
@media (min-width: 1480px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1430px;
  }
}
/* =====================================
   Web Container
===================================== */
.bb-web-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .bb-web-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .bb-web-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .bb-web-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .bb-web-container {
    max-width: 1200px;
  }
}
@media (min-width: 1480px) {
  .bb-web-container {
    max-width: 1430px;
  }
}
/* =====================================
   Web Project Action Buttons
===================================== */
.bb-web-btn-primary,
.bb-web-btn-secondary,
.bb-b2b-btn-primary,
.bb-b2b-btn-secondary,
.bb-b2c-btn-primary,
.bb-b2c-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.25rem;
  border: var(--bb-border-width) solid transparent;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-btn-primary:hover,
.bb-web-btn-secondary:hover,
.bb-b2b-btn-primary:hover,
.bb-b2b-btn-secondary:hover,
.bb-b2c-btn-primary:hover,
.bb-b2c-btn-secondary:hover {
  text-decoration: none !important;
  transform: translateY(-1px);
}

.bb-web-btn-primary:active,
.bb-web-btn-secondary:active,
.bb-b2b-btn-primary:active,
.bb-b2b-btn-secondary:active,
.bb-b2c-btn-primary:active,
.bb-b2c-btn-secondary:active {
  transform: translateY(0);
}

.bb-web-btn-primary .material-symbols-outlined,
.bb-web-btn-secondary .material-symbols-outlined,
.bb-b2b-btn-primary .material-symbols-outlined,
.bb-b2b-btn-secondary .material-symbols-outlined,
.bb-b2c-btn-primary .material-symbols-outlined,
.bb-b2c-btn-secondary .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-btn-primary {
  color: var(--bb-web-action-primary-color) !important;
  background-color: var(--bb-web-action-primary-bg);
  border-color: var(--bb-web-action-primary-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-action-primary-shadow);
}

.bb-web-btn-primary:hover,
.bb-web-btn-primary:focus {
  color: var(--bb-web-action-primary-color) !important;
  background-color: var(--bb-web-action-primary-bg-hover);
  border-color: var(--bb-web-action-primary-border-hover);
}

.bb-web-btn-secondary {
  color: var(--bb-web-action-secondary-color) !important;
  background-color: var(--bb-web-action-secondary-bg);
  border-color: var(--bb-web-action-secondary-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-action-secondary-shadow);
}

.bb-web-btn-secondary:hover,
.bb-web-btn-secondary:focus {
  color: var(--bb-web-action-secondary-color) !important;
  background-color: var(--bb-web-action-secondary-bg-hover);
  border-color: var(--bb-web-action-secondary-border-hover);
}

.bb-b2b-btn-primary {
  color: var(--bb-web-b2b-action-primary-color) !important;
  background-color: var(--bb-web-b2b-action-primary-bg);
  border-color: var(--bb-web-b2b-action-primary-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-b2b-action-primary-shadow);
}

.bb-b2b-btn-primary:hover,
.bb-b2b-btn-primary:focus {
  color: var(--bb-web-b2b-action-primary-color) !important;
  background-color: var(--bb-web-b2b-action-primary-bg-hover);
  border-color: var(--bb-web-b2b-action-primary-border-hover);
}

.bb-b2b-btn-secondary {
  color: var(--bb-web-b2b-action-secondary-color) !important;
  background-color: var(--bb-web-b2b-action-secondary-bg);
  border-color: var(--bb-web-b2b-action-secondary-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-b2b-action-secondary-shadow);
}

.bb-b2b-btn-secondary:hover,
.bb-b2b-btn-secondary:focus {
  color: var(--bb-web-b2b-action-secondary-color) !important;
  background-color: var(--bb-web-b2b-action-secondary-bg-hover);
  border-color: var(--bb-web-b2b-action-secondary-border-hover);
}

.bb-b2c-btn-primary {
  color: var(--bb-web-b2c-action-primary-color) !important;
  background-color: var(--bb-web-b2c-action-primary-bg);
  border-color: var(--bb-web-b2c-action-primary-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-b2c-action-primary-shadow);
}

.bb-b2c-btn-primary:hover,
.bb-b2c-btn-primary:focus {
  color: var(--bb-web-b2c-action-primary-color) !important;
  background-color: var(--bb-web-b2c-action-primary-bg-hover);
  border-color: var(--bb-web-b2c-action-primary-border-hover);
}

.bb-b2c-btn-secondary {
  color: var(--bb-web-b2c-action-secondary-color) !important;
  background-color: var(--bb-web-b2c-action-secondary-bg);
  border-color: var(--bb-web-b2c-action-secondary-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-b2c-action-secondary-shadow);
}

.bb-b2c-btn-secondary:hover,
.bb-b2c-btn-secondary:focus {
  color: var(--bb-web-b2c-action-secondary-color) !important;
  background-color: var(--bb-web-b2c-action-secondary-bg-hover);
  border-color: var(--bb-web-b2c-action-secondary-border-hover);
}

.bb-web-btn-primary.disabled,
.bb-web-btn-primary:disabled,
.bb-web-btn-secondary.disabled,
.bb-web-btn-secondary:disabled,
.bb-b2b-btn-primary.disabled,
.bb-b2b-btn-primary:disabled,
.bb-b2b-btn-secondary.disabled,
.bb-b2b-btn-secondary:disabled,
.bb-b2c-btn-primary.disabled,
.bb-b2c-btn-primary:disabled,
.bb-b2c-btn-secondary.disabled,
.bb-b2c-btn-secondary:disabled {
  pointer-events: none;
  opacity: var(--bb-disabled-opacity);
  box-shadow: none;
  transform: none;
}

/* =====================================
   Web Project Utilities
===================================== */
.bb-web-section {
  padding: var(--bb-web-section-y) 0;
}

.bb-web-section-sm {
  padding: var(--bb-web-section-y-sm) 0;
}

.bb-web-section-soft {
  background-color: var(--bb-web-section-soft-bg);
}

.bb-web-section-muted {
  background-color: var(--bb-web-section-muted-bg);
}

.bb-web-card {
  background-color: var(--bb-web-card-bg);
  border: var(--bb-web-card-border);
  border-radius: var(--bb-web-card-radius);
  box-shadow: var(--bb-web-card-shadow);
}

.bb-web-panel {
  background-color: var(--bb-web-panel-bg);
  border: var(--bb-web-panel-border);
  border-radius: var(--bb-web-panel-radius);
}

.bb-web-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-web-muted-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-web-eyebrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-title {
  color: var(--bb-web-heading-color);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.bb-web-lead {
  color: var(--bb-web-muted-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-content);
}

.bb-web-text {
  color: var(--bb-web-muted-color);
  line-height: var(--bb-line-height-content);
}

.bb-web-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bb-web-dark-section {
  background-color: var(--bb-theme-dark);
  color: var(--bb-theme-on-dark);
}

.bb-web-dark-section .bb-web-title,
.bb-web-dark-section h1,
.bb-web-dark-section h2,
.bb-web-dark-section h3,
.bb-web-dark-section h4,
.bb-web-dark-section h5,
.bb-web-dark-section h6 {
  color: var(--bb-theme-on-dark);
}

.bb-web-dark-section .bb-web-text,
.bb-web-dark-section .bb-web-lead {
  color: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
}

/* =====================================
   Web Account Shell
===================================== */
.bb-account-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-shell-section {
  padding: 1.75rem 0 3.5rem;
}

.bb-account-layout {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: flex-start;
}

.bb-account-sidebar {
  position: sticky;
  top: 1.5rem;
  min-width: 0;
}

.bb-account-main {
  min-width: 0;
}

.bb-account-panel {
  padding: 1.625rem;
  border: var(--bb-border-width) solid var(--bb-account-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-account-surface);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.375rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--bb-border-width) solid var(--bb-account-border-soft);
}

.bb-account-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.875rem;
  padding: 0 0.6875rem;
  margin-bottom: 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-account-accent-soft);
  color: var(--bb-account-accent-text);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-panel-title {
  margin: 0 0 0.4375rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-account-panel-text {
  max-width: 45rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Web Account Cards / Tables
===================================== */
.bb-account-table-card,
.bb-account-empty-card,
.bb-account-form-card,
.bb-account-info-card {
  border: var(--bb-border-width) solid var(--bb-account-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-account-surface);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-table-card {
  overflow: hidden;
}

.bb-account-table {
  margin-bottom: 0;
  vertical-align: middle;
}

.bb-account-table thead th {
  padding: 0.9375rem 1.125rem;
  border-bottom: var(--bb-border-width) solid var(--bb-account-border);
  background-color: var(--bb-account-surface-soft);
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bb-account-table tbody td {
  padding: 1.0625rem 1.125rem;
  border-bottom: var(--bb-border-width) solid var(--bb-account-border-soft);
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-table tbody tr:last-child td {
  border-bottom: 0;
}

.bb-account-table-main-link {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-account-table-main-link:hover {
  color: var(--bb-link-color);
}

.bb-account-table-muted {
  color: var(--bb-secondary-color);
}

/* =====================================
   Web Account Empty State
===================================== */
.bb-account-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  padding: 2.125rem;
  text-align: center;
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-account-accent) 16%, transparent) 0, transparent 32%), var(--bb-account-surface);
}

.bb-account-empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-account-accent-soft);
  color: var(--bb-account-accent-text);
}

.bb-account-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-empty-card h3 {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-account-empty-card p {
  max-width: 35rem;
  margin-bottom: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Web Account Form Helpers
===================================== */
.bb-account-form-card {
  padding: 1.5rem;
}

.bb-account-form-section {
  padding: 1.5rem 0;
  border-bottom: var(--bb-border-width) solid var(--bb-account-border-soft);
}

.bb-account-form-section:first-child {
  padding-top: 0;
}

.bb-account-form-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bb-account-form-section-grid {
  display: grid;
  grid-template-columns: 13.75rem minmax(0, 1fr);
  gap: 2.125rem;
  align-items: flex-start;
}

.bb-account-form-section-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-account-form-section-text {
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-account-form-grid-full {
  grid-column: 1/-1;
}

.bb-account-form-help {
  margin-top: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-form-note {
  padding: 1.125rem;
  border: var(--bb-border-width) solid var(--bb-account-border);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-account-surface-soft);
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-form-note strong {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Web Account Offcanvas
===================================== */
.bb-account-sidebar-offcanvas {
  --bs-offcanvas-width: 20rem;
}

.bb-account-sidebar-offcanvas .offcanvas-body {
  background-color: var(--bb-account-surface-soft);
}

/* =====================================
   Web Account Sidebar Navigation
===================================== */
.bb-account-nav {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-account-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-account-surface);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-nav-head {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 1.125rem;
  border-bottom: var(--bb-border-width) solid var(--bb-account-border-soft);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-account-accent) 16%, transparent) 0, transparent 32%), linear-gradient(135deg, var(--bb-account-surface) 0%, var(--bb-account-accent-soft) 100%);
}

.bb-account-nav-head-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-account-accent);
  color: var(--bb-black);
}

.bb-account-nav-head-icon .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--bb-black);
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 28;
}

.bb-account-nav-head strong {
  display: block;
  margin-bottom: 0.1875rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-account-nav-head span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-account-nav-group {
  padding: 0.625rem;
}

.bb-account-nav-group-title {
  padding: 0.4375rem 0.625rem 0.5rem;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-2xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-account-nav-list {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bb-account-nav-divider {
  height: var(--bb-border-width);
  margin: 0 0.625rem;
  background-color: var(--bb-account-border-soft);
}

.bb-account-nav-link {
  display: grid;
  grid-template-columns: 1.875rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  min-height: 2.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-account-nav-link-icon {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-md);
  color: var(--bb-tertiary-color);
  background-color: transparent;
  font-size: var(--bb-fs-xl);
  line-height: 1;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal);
}

.bb-account-nav-link span:last-child {
  min-width: 0;
}

.bb-account-nav-link:hover {
  background-color: var(--bb-account-surface-soft);
  color: var(--bb-heading-color);
  transform: translateX(0.125rem);
}

.bb-account-nav-link:hover .bb-account-nav-link-icon {
  color: var(--bb-heading-color);
}

.bb-account-nav-link.active,
.bb-account-nav-link[aria-current=page] {
  background-color: var(--bb-account-accent-soft);
  color: var(--bb-heading-color);
  box-shadow: inset 0.1875rem 0 0 var(--bb-account-accent);
}

.bb-account-nav-link.active .bb-account-nav-link-icon,
.bb-account-nav-link[aria-current=page] .bb-account-nav-link-icon {
  background-color: var(--bb-account-accent);
  color: var(--bb-primary-inverse);
}

/* =====================================
   Web Compact Hero
===================================== */
.bb-web-compact-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(14rem, 28vw, 22rem);
  padding: clamp(2rem, 4.5vw, 3.75rem) 0;
  display: flex;
  align-items: center;
  color: var(--bb-web-compact-hero-color);
  background: linear-gradient(90deg, var(--bb-web-compact-hero-overlay-start) 0%, var(--bb-web-compact-hero-overlay-mid) 56%, var(--bb-web-compact-hero-overlay-end) 100%), var(--bb-web-compact-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bb-web-compact-hero-content {
  max-width: 44rem;
}

.bb-web-compact-hero-chip {
  margin-bottom: 0.75rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}

.bb-web-compact-hero-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-web-compact-hero-title {
  margin: 0;
  color: var(--bb-web-compact-hero-color);
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-web-compact-hero-title strong,
.bb-web-compact-hero-title b {
  color: var(--bb-primary);
  font-weight: var(--bb-fw-bold);
}

.bb-web-compact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bb-web-compact-hero-btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-web-compact-hero-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* =====================================
   Web Preferences Panel
===================================== */
.bb-web-preferences-panel {
  --bs-offcanvas-width: 26rem;
  color: var(--bb-body-color);
  background-color: var(--bb-web-preferences-bg);
  border-left: var(--bb-border-width) solid var(--bb-web-preferences-border);
}

.bb-web-preferences-panel-head {
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-web-preferences-border);
}

.bb-web-preferences-panel-kicker {
  display: inline-flex;
  margin-bottom: 0.375rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-web-preferences-panel-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-preferences-panel-body {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.25rem;
}

.bb-web-preferences-group {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: var(--bb-border-width) solid var(--bb-web-preferences-border);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-web-preferences-group-bg);
}

.bb-web-preferences-group-head {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
}

.bb-web-preferences-group-head > .material-symbols-outlined {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-primary-clarity);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-icon-size-md);
}

.bb-web-preferences-group-head strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-preferences-group-head span {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Web Theme Choices
===================================== */
.bb-web-theme-choice-list {
  display: grid;
  gap: 0.75rem;
}

.bb-web-theme-choice {
  position: relative;
  width: 100%;
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr) 1.25rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  color: var(--bb-body-color);
  background-color: var(--bb-surface-elevated);
  border: var(--bb-border-width) solid var(--bb-web-preferences-border);
  border-radius: var(--bb-radius-xl);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-theme-choice:hover {
  color: var(--bb-heading-color);
  border-color: var(--bb-border-color-strong);
  box-shadow: var(--bb-shadow-xs);
}

.bb-web-theme-choice:active {
  transform: translateY(1px);
}

.bb-web-theme-choice-icon {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-primary-clarity);
  border-radius: var(--bb-radius-lg);
}

.bb-web-theme-choice-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-theme-choice-content {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.bb-web-theme-choice-content strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-theme-choice-content small {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-web-theme-choice-check {
  opacity: 0;
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
  transition: opacity var(--bb-transition-fast);
}

.bb-web-theme-choice.is-active {
  border-color: color-mix(in srgb, var(--bb-primary) 60%, var(--bb-border-color));
  box-shadow: 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-primary) 24%, transparent) inset, var(--bb-shadow-xs);
}

.bb-web-theme-choice.is-active .bb-web-theme-choice-check {
  opacity: 1;
}

.bb-web-theme-choice.is-active .bb-web-theme-choice-icon {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
}

.bb-web-preferences-note {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-web-preferences-note .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-account-layout {
    grid-template-columns: 1fr;
  }
  .bb-account-panel-head {
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-account-shell-section {
    padding-top: 1.25rem;
    padding-bottom: 2.25rem;
  }
  .bb-account-panel {
    padding: 1.125rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-account-form-section-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .bb-account-form-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-empty-card {
    min-height: 17.5rem;
    padding: 1.5rem;
  }
  .bb-web-section {
    padding: 3rem 0;
  }
  .bb-web-section-sm {
    padding: 2.25rem 0;
  }
  .bb-web-lead {
    font-size: var(--bb-icon-size-md);
  }
  .bb-web-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-web-actions .btn,
  .bb-web-actions .bb-web-btn-primary,
  .bb-web-actions .bb-web-btn-secondary,
  .bb-web-actions .bb-b2b-btn-primary,
  .bb-web-actions .bb-b2b-btn-secondary,
  .bb-web-actions .bb-b2c-btn-primary,
  .bb-web-actions .bb-b2c-btn-secondary {
    width: 100%;
  }
  .bb-web-compact-hero {
    min-height: 13rem;
    padding: 2.25rem 0;
  }
  .bb-web-compact-hero-content {
    max-width: 100%;
  }
  .bb-web-compact-hero-title {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
  }
  .bb-web-compact-hero-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Web Page Showcase Carrier
   Slider / vitrin alanları için dış sayfa ritmi.
   Slider component tasarımına karışmaz.
===================================== */
.bb-page-showcase {
  position: relative;
  padding-top: 2rem;
}

.bb-page-showcase--home {
  padding-top: 2rem;
  padding-bottom: 0;
}

.bb-page-showcase--tight {
  padding-top: 0.75rem;
}

.bb-page-showcase--wide {
  padding-top: 1.5rem;
}

.bb-page-showcase--flush {
  padding-top: 0;
}

.bb-page-showcase--last {
  padding-bottom: 3rem;
}

.bb-page-showcase > .bb-web-container {
  position: relative;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-page-showcase {
    padding-top: 0.875rem;
  }
  .bb-page-showcase--wide {
    padding-top: 1.25rem;
  }
  .bb-page-showcase--last {
    padding-bottom: 2.5rem;
  }
}
@media (max-width: 575.98px) {
  .bb-page-showcase {
    padding-top: 0.75rem;
  }
  .bb-page-showcase--wide {
    padding-top: 1rem;
  }
  .bb-page-showcase--last {
    padding-bottom: 2rem;
  }
}
/* =====================================
   Page Hero System
   Shared hero skeleton for Bulbulustur web pages

   Amaç:
   - Tüm normal web sayfalarına minimum premium hero sahnesi vermek.
   - Hero içinde breadcrumb, chip, action, sağ card ve info-card ihtiyacını merkezi çözmek.
   - Sayfa özel hero CSS ihtiyacını azaltmak.
   - Section'a makyaj yazmadan hero karakterini merkezi sistemde toplamak.
===================================== */
/* -------------------------------------
   Base Hero
------------------------------------- */
.bb-hero {
  --bb-hero-title-max-width: 56rem;
  --bb-hero-lead-max-width: 48rem;
  --bb-hero-text-max-width: 47.5rem;
  --bb-hero-aside-width: 22.5rem;
  --bb-hero-grid-gap: 2.375rem;
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0 clamp(1.625rem, 2.5vw, 2.375rem);
  color: var(--bb-body-color);
  background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--bb-primary-light) 92%, transparent) 0, transparent 27%), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 92%, var(--bb-surface-elevated)) 0%, color-mix(in srgb, var(--bb-secondary-bg) 86%, var(--bb-surface-elevated)) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-hero .bb-web-container {
  position: relative;
  z-index: 2;
}

/* -------------------------------------
   Background Variants
------------------------------------- */
.bb-hero-plain {
  background: var(--bb-body-bg);
  border-bottom-color: var(--bb-border-color);
}

.bb-hero-soft {
  background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--bb-primary-light) 94%, transparent) 0, transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 92%, var(--bb-surface-elevated)) 0%, var(--bb-body-bg) 100%);
  border-bottom-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-hero-muted {
  background: radial-gradient(circle at 90% 14%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
  border-bottom-color: var(--bb-border-color);
}

.bb-hero-dark {
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 28%), linear-gradient(135deg, #0f2747 0%, #123764 48%, #1f2d3d 100%);
  color: var(--bb-white);
  border-bottom-color: color-mix(in srgb, var(--bb-white) 12%, transparent);
}

.bb-hero-dark .bb-hero-label,
.bb-hero-dark .bb-hero-title,
.bb-hero-dark .bb-hero-lead,
.bb-hero-dark .bb-hero-text {
  color: var(--bb-white);
}

.bb-hero-dark .bb-hero-lead,
.bb-hero-dark .bb-hero-text {
  opacity: 0.86;
}

/* -------------------------------------
   Size Variants
------------------------------------- */
.bb-hero-compact {
  padding-top: clamp(2.75rem, 4vw, 3.75rem);
  padding-bottom: clamp(3rem, 4.5vw, 4.25rem);
}

.bb-hero-spacious {
  padding-top: clamp(5rem, 7vw, 7rem);
  padding-bottom: clamp(5.5rem, 7vw, 7.5rem);
}

.bb-hero-flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* -------------------------------------
   Decorative Layer
------------------------------------- */
.bb-hero::before,
.bb-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero::before {
  top: -4.375rem;
  right: -3.125rem;
  width: 16.25rem;
  height: 16.25rem;
  background-color: color-mix(in srgb, var(--bb-coal-300) 6%, transparent);
}

.bb-hero::after {
  top: 8.125rem;
  right: 8.75rem;
  width: 10.625rem;
  height: 10.625rem;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-hero-muted::before {
  background-color: color-mix(in srgb, var(--bb-coal-300) 4%, transparent);
}

.bb-hero-muted::after {
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

.bb-hero-dark::before {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
}

.bb-hero-dark::after {
  background-color: color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-hero-plain::before,
.bb-hero-plain::after,
.bb-hero-no-decor::before,
.bb-hero-no-decor::after {
  display: none;
}

/* -------------------------------------
   Layout
------------------------------------- */
.bb-hero-inner {
  min-width: 0;
}

.bb-hero-grid,
.bb-hero-split .bb-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(310px, 0.74fr);
  gap: var(--bb-hero-grid-gap);
  align-items: center;
}

.bb-hero-highlight-layout .bb-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
  gap: 2rem;
  align-items: center;
}

.bb-hero-centered .bb-hero-inner,
.bb-hero-centered .bb-hero-content {
  text-align: center;
}

.bb-hero-centered .bb-hero-content {
  max-width: 54rem;
  margin-right: auto;
  margin-left: auto;
}

.bb-hero-content,
.bb-hero-copy,
.bb-hero-aside,
.bb-hero-media,
.bb-hero-highlight,
.bb-hero-card,
.bb-hero-info-card {
  min-width: 0;
}

.bb-hero-content {
  position: relative;
  z-index: 2;
}

.bb-hero-aside {
  position: relative;
  z-index: 2;
  width: min(100%, var(--bb-hero-aside-width));
  justify-self: end;
}

.bb-hero-aside-start {
  justify-self: start;
}

.bb-hero-aside-center {
  justify-self: center;
}

.bb-hero-aside-stretch {
  width: 100%;
  justify-self: stretch;
}

/* -------------------------------------
   Boxed Hero
------------------------------------- */
.bb-hero-boxed {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.bb-hero-box {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background-color: color-mix(in srgb, var(--bb-body-bg) 92%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-hero-dark .bb-hero-box {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

/* -------------------------------------
   Content Rhythm
------------------------------------- */
.bb-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-hero-label .material-symbols-outlined,
.bb-hero-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-hero-title {
  max-width: var(--bb-hero-title-max-width);
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.bb-hero-lead {
  max-width: var(--bb-hero-lead-max-width);
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.45vw, 1.15rem);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-hero-text {
  max-width: var(--bb-hero-text-max-width);
  margin: 0.875rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Hero Breadcrumb
   Hero varsa breadcrumb burada planlanır.
   Slider varsa breadcrumb kullanılmaz.
------------------------------------- */
.bb-hero-breadcrumb {
  width: fit-content;
  max-width: 100%;
  min-height: 2.375rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.25rem 0.5rem;
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-body-bg) 82%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  overflow-x: auto;
  scrollbar-width: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  --bb-breadcrumb-font-size: var(--bb-fs-sm);
  --bb-breadcrumb-color: var(--bb-secondary-color);
  --bb-breadcrumb-active-color: var(--bb-heading-color);
  --bb-breadcrumb-link-hover-color: var(--bb-primary);
}

.bb-hero-breadcrumb::-webkit-scrollbar {
  display: none;
}

.bb-hero-breadcrumb .bb-breadcrumb,
.bb-hero-breadcrumb .breadcrumb {
  min-width: max-content;
  margin-bottom: 0;
}

.bb-hero-breadcrumb-list {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 3px 0 0 0;
  list-style: none;
}

.bb-hero-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-breadcrumb-font-size);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bb-hero-breadcrumb-link,
.bb-hero-breadcrumb-current,
.bb-hero-breadcrumb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.3rem 0.55rem;
  color: var(--bb-secondary-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-breadcrumb-font-size);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.bb-hero-breadcrumb-link:hover,
.bb-hero-breadcrumb-chip:hover {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 70%, transparent);
}

.bb-hero-breadcrumb-current,
.bb-hero-breadcrumb-chip-active {
  gap: 0.35rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 78%, transparent);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-breadcrumb-font-size);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-hero-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: color-mix(in srgb, var(--bb-secondary-color) 72%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-hero-breadcrumb-link .material-symbols-outlined,
.bb-hero-breadcrumb-current .material-symbols-outlined,
.bb-hero-breadcrumb-chip .material-symbols-outlined,
.bb-hero-breadcrumb-link .material-symbols-outlined,
.bb-hero-breadcrumb-current .material-symbols-outlined,
.bb-hero-breadcrumb-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-hero-dark .bb-hero-breadcrumb {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

.bb-hero-dark .bb-hero-breadcrumb-link,
.bb-hero-dark .bb-hero-breadcrumb-current,
.bb-hero-dark .bb-hero-breadcrumb-chip {
  color: color-mix(in srgb, var(--bb-white) 82%, transparent);
}

.bb-hero-dark .bb-hero-breadcrumb-link:hover,
.bb-hero-dark .bb-hero-breadcrumb-chip:hover,
.bb-hero-dark .bb-hero-breadcrumb-current,
.bb-hero-dark .bb-hero-breadcrumb-chip-active {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 12%, transparent);
}

/* -------------------------------------
   Hero Chips
------------------------------------- */
.bb-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.125rem;
}

.bb-hero-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.4rem 0.8rem;
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 72%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.bb-hero-chip .material-symbols-outlined,
.bb-hero-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-hero-chip-primary {
  color: color-mix(in srgb, var(--bb-primary) 46%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-hero-chip-soft {
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-body-bg) 84%, transparent);
}

.bb-hero-chip-muted {
  color: var(--bb-tertiary-color);
  background-color: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-white));
}

.bb-hero-chip-success {
  color: color-mix(in srgb, var(--bb-success) 58%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-success) 12%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-success) 22%, var(--bb-border-color));
}

.bb-hero-chip-warning {
  color: color-mix(in srgb, var(--bb-warning) 58%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 14%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-warning) 24%, var(--bb-border-color));
}

.bb-hero-dark .bb-hero-chip {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

/* -------------------------------------
   Actions / Buttons / Meta / Quick Links
------------------------------------- */
.bb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.4rem;
}

.bb-hero-btn,
.bb-hero-actions .btn {
  min-height: 3.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-hero-btn .material-symbols-outlined,
.bb-hero-actions .material-symbols-outlined,
.bb-hero-btn .material-symbols-outlined,
.bb-hero-actions .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-hero-btn-primary {
  color: color-mix(in srgb, var(--bb-coal-300) 88%, var(--bb-black));
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-hero-btn-primary:hover {
  color: color-mix(in srgb, var(--bb-coal-300) 88%, var(--bb-black));
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
  border-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
}

.bb-hero-btn-secondary {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 76%, transparent);
  border-color: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
}

.bb-hero-btn-secondary:hover {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-surface-elevated);
  border-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
}

.bb-hero-btn-soft {
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-body-bg) 82%, transparent);
  border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-hero-btn-soft:hover {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-surface-elevated);
}

.bb-hero-dark .bb-hero-btn-secondary,
.bb-hero-dark .bb-hero-btn-soft {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

.bb-hero-dark .bb-hero-btn-secondary:hover,
.bb-hero-dark .bb-hero-btn-soft:hover {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 14%, transparent);
}

.bb-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.bb-hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.bb-hero-quick-link {
  text-decoration: none !important;
}

/* -------------------------------------
   Hero Card
------------------------------------- */
.bb-hero-card {
  width: 100%;
  padding: 1.375rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 78%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 86%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.375rem 2.625rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.bb-hero-card-head-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-hero-card-icon-container {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 52%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-white));
  border-radius: var(--bb-radius-xl);
}

.bb-hero-card-icon,
.bb-hero-card-icon-container .material-symbols-outlined,
.bb-hero-card-icon-container .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-hero-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  min-height: 1.75rem;
  padding: 0.35rem 0.65rem;
  color: color-mix(in srgb, var(--bb-primary) 46%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-hero-card-content {
  min-width: 0;
}

.bb-hero-card-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-hero-card-text {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-hero-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-hero-dark .bb-hero-card {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
  box-shadow: 0 1.375rem 2.625rem color-mix(in srgb, var(--bb-black) 18%, transparent);
}

.bb-hero-dark .bb-hero-card-title {
  color: var(--bb-white);
}

.bb-hero-dark .bb-hero-card-text {
  color: color-mix(in srgb, var(--bb-white) 74%, transparent);
}

.bb-hero-dark .bb-hero-card-icon-container {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 12%, transparent);
}

.bb-hero-dark .bb-hero-card-chip {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

/* -------------------------------------
   Hero Info Card
   Sağ aside içinde kısa bilgi kartı.
------------------------------------- */
.bb-hero-info-card {
  width: 100%;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 1.125rem;
  color: var(--bb-body-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 82%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-hero-info-card-icon-container {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 52%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-white));
  border-radius: var(--bb-radius-xl);
}

.bb-hero-info-card-icon,
.bb-hero-info-card-icon-container .material-symbols-outlined,
.bb-hero-info-card-icon-container .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-hero-info-card-content {
  min-width: 0;
}

.bb-hero-info-card-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0.75rem;
  min-height: 1.625rem;
  margin-bottom: 0.45rem;
  padding: 0.3rem 0.6rem;
  color: color-mix(in srgb, var(--bb-primary) 46%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-hero-info-card-title {
  display: block;
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-hero-info-card-text {
  display: block;
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-hero-dark .bb-hero-info-card {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

.bb-hero-dark .bb-hero-info-card-icon-container {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 12%, transparent);
}

.bb-hero-dark .bb-hero-info-card-chip {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
}

.bb-hero-dark .bb-hero-info-card-title {
  color: var(--bb-white);
}

.bb-hero-dark .bb-hero-info-card-text {
  color: color-mix(in srgb, var(--bb-white) 74%, transparent);
}

/* -------------------------------------
   Hero Card List
------------------------------------- */
.bb-hero-card-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bb-hero-card-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  color: var(--bb-body-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 62%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: var(--bb-radius-lg);
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-hero-card-list-item:hover {
  transform: translateY(-1px);
  color: var(--bb-body-color);
  background-color: var(--bb-surface-elevated);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-hero-card-list-icon {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
}

.bb-hero-card-list-icon .material-symbols-outlined,
.bb-hero-card-list-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-hero-card-list-content {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.bb-hero-card-list-content strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-hero-card-list-content span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-hero-dark .bb-hero-card-list-item {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 13%, transparent);
}

.bb-hero-dark .bb-hero-card-list-item:hover {
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 12%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-white));
}

.bb-hero-dark .bb-hero-card-list-content strong {
  color: var(--bb-white);
}

.bb-hero-dark .bb-hero-card-list-content span {
  color: color-mix(in srgb, var(--bb-white) 74%, transparent);
}

/* -------------------------------------
   Media
------------------------------------- */
.bb-hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-hero-grid,
  .bb-hero-split .bb-hero-inner,
  .bb-hero-highlight-layout .bb-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-hero-aside {
    width: min(100%, var(--bb-hero-aside-width));
    justify-self: start;
  }
  .bb-hero::after {
    right: 5rem;
  }
}
@media (max-width: 991.98px) {
  .bb-hero::before {
    right: -7rem;
  }
  .bb-hero::after {
    right: 2.5rem;
    top: 9rem;
    width: 8.5rem;
    height: 8.5rem;
  }
}
@media (max-width: 767.98px) {
  .bb-hero {
    padding-top: 2.75rem;
    padding-bottom: 3.75rem;
  }
  .bb-hero-compact {
    padding-top: 2rem;
    padding-bottom: 2.75rem;
  }
  .bb-hero-spacious {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }
  .bb-hero-flush {
    padding-top: 0;
    padding-bottom: 0;
  }
  .bb-hero::before {
    top: -6rem;
    right: -8rem;
    width: 14rem;
    height: 14rem;
  }
  .bb-hero::after {
    top: auto;
    right: -3.5rem;
    bottom: -4.5rem;
    width: 10rem;
    height: 10rem;
  }
  .bb-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-hero-btn,
  .bb-hero-actions .btn {
    width: 100%;
  }
  .bb-hero-aside {
    width: 100%;
  }
  .bb-hero-card {
    margin-top: 0.25rem;
  }
  .bb-hero-card-head {
    align-items: flex-start;
  }
}
@media (max-width: 575.98px) {
  .bb-hero {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
  }
  .bb-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
  }
  .bb-hero-lead {
    font-size: var(--bb-fs-base);
  }
  .bb-hero-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-hero-box,
  .bb-hero-card {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-hero-info-card {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding: 1rem;
  }
  .bb-hero-info-card-icon-container,
  .bb-hero-card-icon-container {
    width: 2.75rem;
    height: 2.75rem;
  }
  .bb-hero-card-list-item {
    padding: 0.6875rem;
  }
  .bb-hero-breadcrumb {
    min-height: 2.125rem;
    padding: 0.2rem 0.4rem;
  }
  .bb-hero-breadcrumb-link,
  .bb-hero-breadcrumb-current,
  .bb-hero-breadcrumb-chip {
    min-height: 1.65rem;
    padding: 0.275rem 0.5rem;
    font-size: var(--bb-fs-2xs);
  }
  .bb-hero-chip {
    min-height: 1.875rem;
    padding: 0.35rem 0.65rem;
    font-size: var(--bb-fs-2xs);
  }
}
/* -------------------------------------
   Hero Visual
   Sağ aside içinde dekoratif ikon / logo / görsel odak alanı.
   Bilgi kartı değildir. İçerik anlatımı için bb-hero-card kullanılır.
------------------------------------- */
.bb-hero-visual {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bb-hero-visual::before {
  content: "";
  position: absolute;
  right: -2.25rem;
  bottom: -2.75rem;
  z-index: -1;
  width: clamp(8.5rem, 15vw, 12.5rem);
  height: clamp(8.5rem, 15vw, 12.5rem);
  background-color: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero-visual-card {
  position: relative;
  overflow: hidden;
  width: clamp(11rem, 19vw, 17rem);
  aspect-ratio: 1/1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 74%, var(--bb-dark));
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--bb-primary) 12%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-white) 72%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 84%, transparent);
  border-radius: 50%;
  box-shadow: 0 1.625rem 3.75rem color-mix(in srgb, var(--bb-primary) 14%, transparent);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-hero-visual-card::after {
  content: "";
  position: absolute;
  right: -2.875rem;
  bottom: -3.25rem;
  width: 9.5rem;
  height: 9.5rem;
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero-visual-icon,
.bb-hero-visual-card .material-symbols-outlined,
.bb-hero-visual-card .material-symbols-outlined {
  position: relative;
  z-index: 1;
  color: currentColor;
  font-size: clamp(3.25rem, 7vw, 5rem);
  line-height: 1;
}

.bb-hero-visual-card-soft {
  color: color-mix(in srgb, var(--bb-primary) 70%, var(--bb-dark));
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--bb-primary) 10%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-body-bg) 78%, transparent);
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.375rem 3.25rem color-mix(in srgb, var(--bb-coal-300) 7%, transparent);
}

.bb-hero-visual-card-primary {
  color: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-dark));
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--bb-white) 42%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-primary-light) 72%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  box-shadow: 0 1.625rem 3.75rem color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-hero-visual-card-muted {
  color: var(--bb-secondary-color);
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--bb-white) 52%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  box-shadow: var(--bb-shadow-sm);
}

.bb-hero-visual-image,
.bb-hero-visual-logo {
  position: relative;
  z-index: 1;
  max-width: 58%;
  max-height: 58%;
  display: block;
  object-fit: contain;
}

.bb-hero-dark .bb-hero-visual::before {
  background-color: color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-hero-dark .bb-hero-visual-card {
  color: var(--bb-white);
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--bb-primary) 18%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
  box-shadow: 0 1.625rem 3.75rem color-mix(in srgb, var(--bb-black) 18%, transparent);
}

.bb-hero-dark .bb-hero-visual-card::after {
  background-color: color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-hero-visual {
    justify-content: flex-start;
  }
  .bb-hero-visual-card {
    width: clamp(10rem, 28vw, 14rem);
  }
}
@media (max-width: 767.98px) {
  .bb-hero-visual {
    justify-content: center;
  }
  .bb-hero-visual::before {
    right: 50%;
    bottom: -2rem;
    transform: translateX(50%);
    width: 8rem;
    height: 8rem;
  }
  .bb-hero-visual-card {
    width: min(13rem, 58vw);
  }
  .bb-hero-visual-icon,
  .bb-hero-visual-card .material-symbols-outlined,
  .bb-hero-visual-card .material-symbols-outlined {
    font-size: clamp(2.875rem, 12vw, 4.25rem);
  }
}
@media (max-width: 575.98px) {
  .bb-hero-visual-card {
    width: min(11.5rem, 62vw);
  }
}
/* =====================================
   Web Marketplace Section System
   B2B/B2C/Home/List/Search/Campaign shared carrier
===================================== */
.bb-section {
  margin-top: 3rem;
}

.bb-section:first-child {
  margin-bottom: 0;
}

.bb-section--tight {
  margin-bottom: 2.125rem;
}

/* -------------------------------------
   Stage / visual carrier
------------------------------------- */
.bb-page-stage {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-page-stage > * {
  position: relative;
  z-index: 2;
}

.bb-page-stage--plain {
  background-color: var(--bb-body-bg);
}

.bb-page-stage--soft {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-page-stage--peach {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-page-stage--deal {
  background: radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--bb-primary) 6%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-page-stage--green {
  background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--bb-success) 11%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--bb-success) 5%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-page-stage--sky {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-info) 10%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-info) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-page-stage--purple {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-color-purple-500) 9%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-color-purple-500) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-page-stage--dark {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 16%, transparent), transparent 28%), linear-gradient(135deg, #0f2747 0%, #123764 48%, #1f2d3d 100%);
  border-color: color-mix(in srgb, var(--bb-white) 12%, transparent);
  color: var(--bb-white);
}

.bb-page-stage--dark .bb-section-title,
.bb-page-stage--dark .bb-section-text,
.bb-page-stage--dark .bb-section-label {
  color: var(--bb-white);
}

.bb-page-stage--grid::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 9.375rem;
  background-image: linear-gradient(color-mix(in srgb, var(--bb-coal-300) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bb-coal-300) 4%, transparent) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), transparent 82%);
  pointer-events: none;
}

.bb-page-stage--dark.bb-page-stage--grid::after {
  background-image: linear-gradient(color-mix(in srgb, var(--bb-white) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bb-white) 7%, transparent) 1px, transparent 1px);
}

/* -------------------------------------
   Shared section head
------------------------------------- */
.bb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}

.bb-section-head-main,
.bb-section-head > div {
  min-width: 0;
}

.bb-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.625rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bb-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.bb-section-text {
  max-width: 51.25rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Section action
------------------------------------- */
.bb-section-action {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.35rem;
  color: var(--bb-white, var(--bb-white));
  background-color: var(--bb-emphasis-color);
  border: var(--bb-border-width) solid var(--bb-emphasis-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-emphasis-color) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent);
  transition: transform var(--bb-transition-fast), color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-section-action:hover,
.bb-section-action:focus {
  color: var(--bb-white, var(--bb-white));
  background-color: color-mix(in srgb, var(--bb-emphasis-color) 86%, var(--bb-primary));
  border-color: color-mix(in srgb, var(--bb-emphasis-color) 82%, var(--bb-primary));
  transform: translateY(-1px);
  box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--bb-emphasis-color) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent);
}

.bb-section-action .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-section-action:hover .material-symbols-outlined,
.bb-section-action:focus .material-symbols-outlined {
  transform: translateX(0.1875rem);
}

/* -------------------------------------
   Component host
------------------------------------- */
.bb-page-component-host {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bb-page-component-host--spaced {
  margin-top: 0.5rem;
}

.bb-page-component-host--after-head {
  margin-top: 1.5rem;
}

.bb-page-component-host--content-groups {
  display: block;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-section {
    margin-top: 2.375rem;
  }
  .bb-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-page-stage {
    padding: 1.375rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-section-link {
    width: fit-content;
  }
}
@media (max-width: 575.98px) {
  .bb-section {
    margin-top: 1.875rem;
  }
  .bb-page-stage {
    padding: 1rem;
    border-radius: var(--bb-radius);
  }
  .bb-section-link {
    width: 100%;
  }
}
/* =====================================
   Web Header Top - Main CSS Pilot
   Scope:
   - Header top layout
   - RFQ top action
   - Auth links
   - B2B / B2C trade switch
   Not included:
   - Account dropdown menu styles
   - Language dropdown styles
   - Generic dropdown menu styles
===================================== */
/* =====================================
   Header Shell
===================================== */
.bb-web-header {
  position: relative;
  z-index: 1040;
}

/* =====================================
   Header Top Tokens
   Top header is always brand-yellow based.
   Text/icon color must stay readable on yellow in both themes.
===================================== */
.bb-web-header-top {
  --bb-web-header-top-bg: var(--bb-header-top-bg, var(--bb-primary));
  --bb-web-header-top-color: var(--bb-header-top-color, var(--bb-primary-inverse));
  --bb-web-header-top-muted-color: var(--bb-header-top-muted-color, color-mix(in srgb, var(--bb-primary-inverse) 74%, transparent));
  --bb-web-header-top-border-color: var(--bb-header-top-border-color, color-mix(in srgb, var(--bb-primary-inverse) 12%, transparent));
  --bb-web-header-top-action-bg: var(--bb-header-top-action-bg, color-mix(in srgb, var(--bb-primary-inverse) 8%, transparent));
  --bb-web-header-top-action-hover-bg: var(--bb-header-top-action-hover-bg, color-mix(in srgb, var(--bb-primary-inverse) 12%, transparent));
  --bb-web-header-top-action-border-color: color-mix(in srgb, var(--bb-primary-inverse) 14%, transparent);
  --bb-web-header-top-action-hover-border-color: color-mix(in srgb, var(--bb-primary-inverse) 22%, transparent);
  --bb-web-header-top-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--bb-primary-inverse) 8%, transparent);
  position: relative;
  z-index: 1100;
  display: none;
  padding-top: 0.625rem;
  background-color: var(--bb-web-header-top-bg);
  color: var(--bb-web-header-top-color);
  border-bottom: var(--bb-border-width) solid var(--bb-web-header-top-border-color);
}

/* =====================================
   Overflow / Dropdown Stack
===================================== */
.bb-web-header-top .bb-web-container,
.bb-web-header-top-inner,
.bb-web-header-top-nav,
.bb-web-header-top-item {
  overflow: visible;
}

.bb-web-header-top .dropdown,
.bb-web-header-top .dropup {
  position: relative;
  z-index: 1110;
}

.bb-web-header-top .dropdown-menu {
  z-index: 1120;
}

/* =====================================
   Layout
===================================== */
.bb-web-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.bb-web-header-top-left,
.bb-web-header-top-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bb-web-header-top-right {
  margin-left: auto;
}

.bb-web-header-top-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.bb-web-header-top-item {
  position: relative;
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
}

.bb-web-header-top-item + .bb-web-header-top-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--bb-border-width);
  height: 1.125rem;
  transform: translateY(-50%);
  background-color: var(--bb-web-header-top-border-color);
}

/* =====================================
   Header Top Base Link
===================================== */
.bb-web-header-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-web-header-top-color);
  background-color: transparent;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-header-top-link:hover,
.bb-web-header-top-link:focus {
  color: var(--bb-web-header-top-color);
  text-decoration: none;
  outline: 0;
}

.bb-web-header-top a,
.bb-web-header-top button,
.bb-web-header-top .dropdown-toggle {
  color: var(--bb-web-header-top-color);
}

.bb-web-header-top .text-muted,
.bb-web-header-top-muted {
  color: var(--bb-web-header-top-muted-color) !important;
}

/* =====================================
   Header Top Icon
===================================== */
.bb-web-header-top-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
}

.bb-web-header-top-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   RFQ Top Action
===================================== */
.bb-web-header-rfq-link {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  color: var(--bb-web-header-top-color);
  background-color: var(--bb-white);
  border: var(--bb-border-width) solid var(--bb-web-header-top-action-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-header-rfq-link:hover,
.bb-web-header-rfq-link:focus {
  color: var(--bb-web-header-top-color);
  background-color: var(--bb-web-header-top-action-hover-bg);
  border-color: var(--bb-web-header-top-action-hover-border-color);
  box-shadow: var(--bb-web-header-top-shadow);
  text-decoration: none;
  outline: 0;
}

.bb-web-header-rfq-link:active {
  transform: translateY(1px);
}

.bb-web-header-rfq-link .bb-web-header-top-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.bb-web-header-rfq-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Auth Links
===================================== */
.bb-web-header-auth-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
}

.bb-web-header-auth-sep {
  color: var(--bb-web-header-top-muted-color);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Trade Switch - B2B / B2C
===================================== */
.bb-trade-switch {
  --bb-trade-switch-accent: var(--bb-primary);
  --bb-trade-switch-accent-inverse: var(--bb-primary-inverse);
  --bb-trade-switch-home-bg: var(--bb-coal-500);
  --bb-trade-switch-home-bg-hover: var(--bb-coal-400);
  --bb-trade-switch-home-color: var(--bb-white);
  --bb-trade-switch-home-border: color-mix(in srgb, var(--bb-white) 10%, transparent);
  --bb-trade-switch-home-icon-bg: color-mix(in srgb, var(--bb-white) 9%, transparent);
  --bb-trade-switch-home-icon-border: color-mix(in srgb, var(--bb-white) 10%, transparent);
  --bb-trade-switch-area-bg: var(--bb-surface-elevated);
  --bb-trade-switch-area-bg-hover: var(--bb-surface-soft);
  --bb-trade-switch-area-color: var(--bb-heading-color);
  --bb-trade-switch-area-border: var(--bb-border-color);
  --bb-trade-switch-area-border-hover: var(--bb-border-color-strong);
  --bb-trade-switch-area-icon-bg: color-mix(in srgb, var(--bb-heading-color) 7%, transparent);
  --bb-trade-switch-area-icon-border: color-mix(in srgb, var(--bb-heading-color) 10%, transparent);
  --bb-trade-switch-shadow-soft: var(--bb-shadow-xs);
  --bb-trade-switch-shadow-strong: var(--bb-shadow-sm);
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-trade-switch-item {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.125rem;
  border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
  text-decoration: none;
  transition: background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-trade-switch-item::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.5rem;
  z-index: -1;
  height: 0.875rem;
  border-radius: var(--bb-radius-pill);
  background: color-mix(in srgb, var(--bb-heading-color) 8%, transparent);
  filter: blur(0.625rem);
  opacity: 1;
  pointer-events: none;
}

.bb-trade-switch-icon {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-trade-switch-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-trade-switch-text {
  color: currentColor;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* =====================================
   Trade Switch - Home Variant
   Both switches dark.
===================================== */
.bb-trade-switch.is-home .bb-trade-switch-item {
  color: var(--bb-trade-switch-home-color);
  background-color: var(--bb-trade-switch-home-bg);
  border: var(--bb-border-width) solid var(--bb-trade-switch-home-border);
  box-shadow: var(--bb-trade-switch-shadow-soft);
}

.bb-trade-switch.is-home .bb-trade-switch-icon {
  color: var(--bb-trade-switch-accent);
  background-color: var(--bb-trade-switch-home-icon-bg);
  border: var(--bb-border-width) solid var(--bb-trade-switch-home-icon-border);
}

.bb-trade-switch.is-home .bb-trade-switch-item:hover,
.bb-trade-switch.is-home .bb-trade-switch-item:focus {
  color: var(--bb-trade-switch-home-color);
  background-color: var(--bb-trade-switch-home-bg-hover);
  box-shadow: var(--bb-trade-switch-shadow-strong);
  text-decoration: none;
  outline: 0;
}

.bb-trade-switch.is-home .bb-trade-switch-item:hover .bb-trade-switch-icon,
.bb-trade-switch.is-home .bb-trade-switch-item:focus .bb-trade-switch-icon {
  color: var(--bb-trade-switch-accent);
  background-color: color-mix(in srgb, var(--bb-white) 12%, transparent);
}

.bb-trade-switch.is-home .bb-trade-switch-item.is-active {
  background-color: var(--bb-trade-switch-home-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-trade-switch-home-border));
  box-shadow: 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-primary) 36%, transparent) inset, var(--bb-trade-switch-shadow-strong);
}

.bb-trade-switch.is-home .bb-trade-switch-item.is-active .bb-trade-switch-icon {
  color: var(--bb-trade-switch-accent);
  background-color: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 26%, transparent);
}

/* =====================================
   Trade Switch - Area Variant
   Light/dark surface aware.
===================================== */
.bb-trade-switch.is-area .bb-trade-switch-item {
  color: var(--bb-trade-switch-area-color);
  background-color: var(--bb-trade-switch-area-bg);
  border: var(--bb-border-width) solid var(--bb-trade-switch-area-border);
}

.bb-trade-switch.is-area .bb-trade-switch-icon {
  color: var(--bb-trade-switch-area-color);
  background-color: var(--bb-trade-switch-area-icon-bg);
  border: var(--bb-border-width) solid var(--bb-trade-switch-area-icon-border);
}

.bb-trade-switch.is-area .bb-trade-switch-item:hover,
.bb-trade-switch.is-area .bb-trade-switch-item:focus {
  color: var(--bb-trade-switch-area-color);
  background-color: var(--bb-trade-switch-area-bg-hover);
  border-color: var(--bb-trade-switch-area-border-hover);
  box-shadow: var(--bb-trade-switch-shadow-strong);
  text-decoration: none;
  outline: 0;
}

.bb-trade-switch.is-area .bb-trade-switch-item:hover .bb-trade-switch-icon,
.bb-trade-switch.is-area .bb-trade-switch-item:focus .bb-trade-switch-icon {
  background-color: color-mix(in srgb, var(--bb-heading-color) 10%, transparent);
}

.bb-trade-switch.is-area .bb-trade-switch-item.is-active {
  background-color: var(--bb-trade-switch-area-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-trade-switch-area-border));
  box-shadow: 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-primary) 20%, transparent) inset, var(--bb-trade-switch-shadow-strong);
}

.bb-trade-switch.is-area .bb-trade-switch-item.is-active .bb-trade-switch-icon {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

/* =====================================
   Focus
===================================== */
.bb-trade-switch-item:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bb-focus-ring-width, 0.2rem) color-mix(in srgb, var(--bb-primary) 35%, transparent), var(--bb-trade-switch-shadow-strong);
}

/* =====================================
   Responsive
===================================== */
@media (min-width: 1200px) {
  .bb-web-header-top {
    display: block;
  }
}
@media (max-width: 1399.98px) {
  .bb-web-header-top-inner {
    gap: 1rem;
  }
  .bb-web-header-top-item {
    padding: 0 0.625rem;
  }
}
@media (max-width: 991.98px) {
  .bb-trade-switch {
    gap: 0.625rem;
  }
  .bb-trade-switch-item {
    min-height: 3rem;
    padding: 0 1rem;
    gap: 0.625rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-trade-switch-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-trade-switch-icon {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
  }
  .bb-trade-switch-icon .material-symbols-outlined {
    font-size: var(--bb-icon-size-sm);
  }
}
@media (max-width: 767.98px) {
  .bb-trade-switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }
  .bb-trade-switch-item {
    width: 100%;
    justify-content: center;
  }
  .bb-trade-switch-text {
    font-size: var(--bb-fs-sm);
  }
}
/* =====================================
   Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-web-header-top-link,
  .bb-web-header-rfq-link,
  .bb-trade-switch-item,
  .bb-trade-switch-icon {
    transition: none;
  }
  .bb-web-header-rfq-link:active {
    transform: none;
  }
}
/* =====================================
   Web Bulbulustur - Location Dropdown
   Scope: Header location / delivery address dropdown
   Layer: web/components/_web-location-dropdown.scss

   Purpose:
   - Header location trigger and dropdown menu.
   - Prepared for future location / delivery area selection.
   - Same positioning rhythm as account and language dropdowns.
   - Bootstrap dropdown compatible.
   - No hard-coded color.
   - No fallback color.
===================================== */
/* =====================================
   Light Mode Local Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-web-location-trigger-height: 2.875rem;
  --bb-web-location-trigger-padding-x: 0.875rem;
  --bb-web-location-trigger-gap: 0.625rem;
  --bb-web-location-trigger-color: var(--bb-heading-color);
  --bb-web-location-trigger-bg: var(--bb-body-bg);
  --bb-web-location-trigger-bg-hover: var(--bb-secondary-bg);
  --bb-web-location-trigger-border: var(--bb-border-color);
  --bb-web-location-trigger-border-hover: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-web-location-trigger-shadow:
      0 0.375rem 0.875rem color-mix(in srgb, var(--bb-black) 6%, transparent);
  --bb-web-location-trigger-shadow-hover:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-web-location-trigger-shadow-active:
      0 0.75rem 1.625rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-web-location-icon-size: 2rem;
  --bb-web-location-arrow-size: 1.125rem;
  --bb-web-location-icon-color: var(--bb-primary);
  --bb-web-location-icon-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-web-location-icon-border: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-web-location-title-color: var(--bb-heading-color);
  --bb-web-location-text-color: var(--bb-secondary-color);
  --bb-web-location-menu-width: 22rem;
  --bb-web-location-menu-bg: var(--bb-body-bg);
  --bb-web-location-menu-border: var(--bb-border-color);
  --bb-web-location-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 14%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 8%, transparent);
  --bb-web-location-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 18%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-web-location-panel-bg: var(--bb-secondary-bg);
  --bb-web-location-panel-border: var(--bb-border-color);
  --bb-web-location-action-color: var(--bb-primary);
  --bb-web-location-action-color-hover: var(--bb-page-accent-hover);
}

/* =====================================
   Navy Mode Local Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-web-location-trigger-bg: var(--bb-surface-elevated);
  --bb-web-location-trigger-bg-hover: var(--bb-surface-soft);
  --bb-web-location-trigger-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-location-trigger-border-hover: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  --bb-web-location-trigger-shadow:
      0 0.375rem 0.875rem color-mix(in srgb, var(--bb-black) 18%, transparent);
  --bb-web-location-trigger-shadow-hover:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-location-trigger-shadow-active:
      0 0.75rem 1.625rem color-mix(in srgb, var(--bb-black) 30%, transparent);
  --bb-web-location-icon-bg: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-web-location-icon-border: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
  --bb-web-location-menu-bg: var(--bb-surface-elevated);
  --bb-web-location-menu-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-web-location-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 32%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-web-location-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 38%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-location-panel-bg: var(--bb-surface-soft);
  --bb-web-location-panel-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
}

/* =====================================
   Dark Mode Local Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-web-location-trigger-bg: var(--bb-surface-elevated);
  --bb-web-location-trigger-bg-hover: var(--bb-surface-soft);
  --bb-web-location-trigger-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-location-trigger-border-hover: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-web-location-trigger-shadow:
      0 0.375rem 0.875rem color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-web-location-trigger-shadow-hover:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 28%, transparent);
  --bb-web-location-trigger-shadow-active:
      0 0.75rem 1.625rem color-mix(in srgb, var(--bb-black) 34%, transparent);
  --bb-web-location-icon-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-web-location-icon-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-web-location-menu-bg: var(--bb-surface-elevated);
  --bb-web-location-menu-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-web-location-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 36%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-location-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 42%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 28%, transparent);
  --bb-web-location-panel-bg: var(--bb-surface-soft);
  --bb-web-location-panel-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
}

/* =====================================
   Wrapper
===================================== */
.bb-web-location-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* =====================================
   Trigger
===================================== */
.bb-web-location-trigger {
  min-height: var(--bb-web-location-trigger-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-web-location-trigger-gap);
  padding: 0 var(--bb-web-location-trigger-padding-x);
  color: var(--bb-web-location-trigger-color);
  background-color: var(--bb-web-location-trigger-bg);
  border: var(--bb-border-width) solid var(--bb-web-location-trigger-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-web-location-trigger-shadow);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-location-trigger:hover,
.bb-web-location-trigger:focus {
  color: var(--bb-web-location-trigger-color);
  background-color: var(--bb-web-location-trigger-bg-hover);
  border-color: var(--bb-web-location-trigger-border-hover);
  box-shadow: var(--bb-web-location-trigger-shadow-hover);
  text-decoration: none;
  outline: 0;
}

.bb-web-location-trigger[aria-expanded=true] {
  color: var(--bb-web-location-trigger-color);
  background-color: var(--bb-web-location-trigger-bg-hover);
  border-color: var(--bb-web-location-trigger-border-hover);
  box-shadow: var(--bb-web-location-trigger-shadow-active);
  text-decoration: none;
  outline: 0;
}

.bb-web-location-trigger::after {
  display: none !important;
}

/* =====================================
   Trigger Icon
===================================== */
.bb-web-location-trigger-icon {
  width: var(--bb-web-location-icon-size);
  height: var(--bb-web-location-icon-size);
  flex: 0 0 var(--bb-web-location-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-location-icon-color);
  background-color: var(--bb-web-location-icon-bg);
  border: var(--bb-border-width) solid var(--bb-web-location-icon-border);
  border-radius: var(--bb-radius-lg);
  line-height: 1;
}

.bb-web-location-trigger-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Trigger Copy
===================================== */
.bb-web-location-trigger-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.bb-web-location-trigger-title {
  display: block;
  color: var(--bb-web-location-title-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1.15;
}

.bb-web-location-trigger-text {
  display: block;
  overflow: hidden;
  max-width: 9.5rem;
  color: var(--bb-web-location-text-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================
   Trigger Arrow
===================================== */
.bb-web-location-arrow {
  width: var(--bb-web-location-arrow-size);
  height: var(--bb-web-location-arrow-size);
  flex: 0 0 var(--bb-web-location-arrow-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-location-text-color);
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-web-location-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-location-trigger[aria-expanded=true] .bb-web-location-arrow {
  transform: rotate(180deg);
}

/* =====================================
   Menu
===================================== */
.bb-web-location-menu {
  min-width: var(--bb-web-location-menu-width);
  max-width: var(--bb-web-location-menu-width);
  padding: 0.75rem;
  overflow: hidden;
  background-color: var(--bb-web-location-menu-bg);
  border: var(--bb-border-width) solid var(--bb-web-location-menu-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-web-location-menu-shadow);
}

.bb-web-location-menu.show {
  box-shadow: var(--bb-web-location-menu-shadow-active);
}

/* =====================================
   Menu Head
===================================== */
.bb-web-location-menu-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.875rem;
  margin-bottom: 0.625rem;
  border-bottom: var(--bb-border-width) solid var(--bb-web-location-panel-border);
}

.bb-web-location-menu-head-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-location-icon-color);
  background-color: var(--bb-web-location-icon-bg);
  border: var(--bb-border-width) solid var(--bb-web-location-icon-border);
  border-radius: var(--bb-radius-lg);
}

.bb-web-location-menu-head-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-location-menu-title {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-location-menu-text {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Current Location Panel
===================================== */
.bb-web-location-current {
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem;
  margin-bottom: 0.75rem;
  background-color: var(--bb-web-location-panel-bg);
  border: var(--bb-border-width) solid var(--bb-web-location-panel-border);
  border-radius: var(--bb-radius-lg);
}

.bb-web-location-current-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-web-location-current-value {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-location-current-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  color: var(--bb-web-location-action-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none;
}

.bb-web-location-current-action:hover,
.bb-web-location-current-action:focus {
  color: var(--bb-web-location-action-color-hover);
  text-decoration: none;
  outline: 0;
}

.bb-web-location-current-action .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Form
===================================== */
.bb-web-location-form {
  display: grid;
  gap: 0.875rem;
  padding: 0.25rem;
}

.bb-web-location-form-group {
  display: grid;
  gap: 0.375rem;
}

.bb-web-location-label {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1.2;
}

.bb-web-location-help-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-content);
}

.bb-web-location-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

.bb-web-location-actions .btn {
  min-height: 2.625rem;
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Compact / Header Utility Variant
===================================== */
.bb-web-location-dropdown.is-compact {
  --bb-web-location-trigger-height: 2.5rem;
  --bb-web-location-trigger-padding-x: 0.75rem;
  --bb-web-location-icon-size: 1.875rem;
}

.bb-web-location-dropdown.is-compact .bb-web-location-trigger-title {
  display: none;
}

.bb-web-location-dropdown.is-compact .bb-web-location-trigger-text {
  max-width: 8rem;
}

/* =====================================
   Mobile
===================================== */
@media (max-width: 575.98px) {
  .bb-web-location-dropdown {
    --bb-web-location-menu-width: calc(100vw - 1.5rem);
  }
  .bb-web-location-trigger {
    width: var(--bb-web-location-trigger-height);
    padding: 0;
    border-radius: var(--bb-radius-pill);
  }
  .bb-web-location-trigger-copy,
  .bb-web-location-arrow {
    display: none;
  }
  .bb-web-location-trigger-icon {
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
  }
  .bb-web-location-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-web-location-actions .btn {
    width: 100%;
  }
}
/* =====================================
   Web Bulbulustur - Account Dropdown
   Scope: Header account dropdown
   Layer: web/components/_web-header-account-dropdown.scss

   Purpose:
   - User account trigger and Bootstrap dropdown menu.
   - Same dropdown positioning rhythm as language dropdown.
   - Popper / Bootstrap calculates position.
   - No hard-coded color.
   - No fallback color.
===================================== */
/* =====================================
   Light Mode Local Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-web-account-trigger-height: 2.5rem;
  --bb-web-account-trigger-padding-x: 0.75rem;
  --bb-web-account-trigger-gap: 0.625rem;
  --bb-web-account-trigger-color: var(--bb-heading-color);
  --bb-web-account-trigger-bg: transparent;
  --bb-web-account-trigger-bg-hover: color-mix(in srgb, var(--bb-body-bg) 22%, transparent);
  --bb-web-account-trigger-border: transparent;
  --bb-web-account-trigger-border-hover: color-mix(in srgb, var(--bb-heading-color) 14%, transparent);
  --bb-web-account-trigger-shadow-hover:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black) 9%, transparent);
  --bb-web-account-trigger-shadow-active:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-web-account-avatar-size: 2.125rem;
  --bb-web-account-avatar-bg: var(--bb-primary);
  --bb-web-account-avatar-color: var(--bb-heading-color);
  --bb-web-account-avatar-border: color-mix(in srgb, var(--bb-heading-color) 12%, transparent);
  --bb-web-account-arrow-size: 1.125rem;
  --bb-web-account-menu-width: 17rem;
  --bb-web-account-menu-offset-y: 0;
  --bb-web-account-menu-bg: var(--bb-body-bg);
  --bb-web-account-menu-border: var(--bb-border-color);
  --bb-web-account-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 14%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 8%, transparent);
  --bb-web-account-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 18%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-web-account-menu-head-bg: color-mix(in srgb, var(--bb-body-bg) 96%, var(--bb-primary) 4%);
  --bb-web-account-menu-head-border: var(--bb-border-color);
  --bb-web-account-menu-avatar-size: 2.75rem;
  --bb-web-account-menu-avatar-bg: var(--bb-primary);
  --bb-web-account-menu-avatar-color: var(--bb-heading-color);
  --bb-web-account-item-height: 2.625rem;
  --bb-web-account-item-color: var(--bb-heading-color);
  --bb-web-account-item-bg: transparent;
  --bb-web-account-item-bg-hover: var(--bb-secondary-bg);
  --bb-web-account-item-icon-color: var(--bb-secondary-color);
  --bb-web-account-danger-bg-hover: color-mix(in srgb, var(--bb-danger) 8%, var(--bb-body-bg));
}

/* =====================================
   Navy Mode Local Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-web-account-trigger-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 72%, transparent);
  --bb-web-account-trigger-border-hover: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-web-account-trigger-shadow-hover:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-web-account-trigger-shadow-active:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 26%, transparent);
  --bb-web-account-menu-bg: var(--bb-surface-elevated);
  --bb-web-account-menu-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-web-account-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 32%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-web-account-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 38%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-account-menu-head-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-primary) 8%);
  --bb-web-account-menu-head-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-account-item-bg-hover: var(--bb-surface-soft);
  --bb-web-account-danger-bg-hover: color-mix(in srgb, var(--bb-danger) 12%, transparent);
}

/* =====================================
   Dark Mode Local Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-web-account-trigger-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 68%, transparent);
  --bb-web-account-trigger-border-hover: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-account-trigger-shadow-hover:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-account-trigger-shadow-active:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 30%, transparent);
  --bb-web-account-menu-bg: var(--bb-surface-elevated);
  --bb-web-account-menu-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-web-account-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 36%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-account-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 42%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 28%, transparent);
  --bb-web-account-menu-head-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-primary) 7%);
  --bb-web-account-menu-head-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-account-item-bg-hover: var(--bb-surface-soft);
  --bb-web-account-danger-bg-hover: color-mix(in srgb, var(--bb-danger) 11%, transparent);
}

/* =====================================
   Wrapper
===================================== */
.bb-web-account-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* =====================================
   Trigger
===================================== */
.bb-web-account-trigger {
  min-height: var(--bb-web-account-trigger-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-web-account-trigger-gap);
  padding: 0 var(--bb-web-account-trigger-padding-x) 0 0.625rem;
  color: var(--bb-web-account-trigger-color);
  background-color: var(--bb-web-account-trigger-bg);
  border: var(--bb-border-width) solid var(--bb-web-account-trigger-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-account-trigger:hover,
.bb-web-account-trigger:focus {
  color: var(--bb-web-account-trigger-color);
  background-color: var(--bb-web-account-trigger-bg-hover);
  border-color: var(--bb-web-account-trigger-border-hover);
  box-shadow: var(--bb-web-account-trigger-shadow-hover);
  text-decoration: none;
  outline: 0;
}

.bb-web-account-trigger[aria-expanded=true] {
  color: var(--bb-web-account-trigger-color);
  background-color: var(--bb-web-account-trigger-bg-hover);
  border-color: var(--bb-web-account-trigger-border-hover);
  box-shadow: var(--bb-web-account-trigger-shadow-active);
  text-decoration: none;
  outline: 0;
}

.bb-web-account-trigger::after {
  display: none !important;
}

/* =====================================
   Trigger Avatar
===================================== */
.bb-web-account-avatar {
  width: var(--bb-web-account-avatar-size);
  height: var(--bb-web-account-avatar-size);
  flex: 0 0 var(--bb-web-account-avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-account-avatar-color);
  background-color: var(--bb-web-account-avatar-bg);
  border: var(--bb-border-width) solid var(--bb-web-account-avatar-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
}

.bb-web-account-current {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

/* =====================================
   Trigger Arrow
===================================== */
.bb-web-account-arrow {
  width: var(--bb-web-account-arrow-size);
  height: var(--bb-web-account-arrow-size);
  flex: 0 0 var(--bb-web-account-arrow-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-web-account-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-account-trigger[aria-expanded=true] .bb-web-account-arrow {
  transform: rotate(180deg);
}

/* =====================================
   Menu
===================================== */
.bb-web-account-menu {
  min-width: var(--bb-web-account-menu-width);
  max-width: var(--bb-web-account-menu-width);
  padding: 0.5rem;
  margin-top: var(--bb-web-account-menu-offset-y) !important;
  overflow: hidden;
  background-color: var(--bb-web-account-menu-bg);
  border: var(--bb-border-width) solid var(--bb-web-account-menu-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-web-account-menu-shadow);
}

.bb-web-account-menu.show {
  box-shadow: var(--bb-web-account-menu-shadow-active);
}

/* =====================================
   Menu Header
===================================== */
.bb-web-account-menu-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.875rem;
  margin: -0.5rem -0.5rem 0.5rem;
  background-color: var(--bb-web-account-menu-head-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-web-account-menu-head-border);
}

.bb-web-account-menu-avatar {
  width: var(--bb-web-account-menu-avatar-size);
  height: var(--bb-web-account-menu-avatar-size);
  flex: 0 0 var(--bb-web-account-menu-avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-account-menu-avatar-color);
  background-color: var(--bb-web-account-menu-avatar-bg);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
}

.bb-web-account-menu-member {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bb-web-account-menu-name {
  display: block;
  margin: 0 0 0.25rem;
  overflow: hidden;
  color: var(--bb-heading-color);
  font-size: calc(var(--bb-fs-md) + 0.0625rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-web-account-menu-meta {
  display: block;
  overflow: hidden;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================
   Items
===================================== */
.bb-web-account-item {
  min-height: var(--bb-web-account-item-height);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  color: var(--bb-web-account-item-color);
  background-color: var(--bb-web-account-item-bg);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-heading);
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-web-account-item:hover,
.bb-web-account-item:focus {
  color: var(--bb-web-account-item-color);
  background-color: var(--bb-web-account-item-bg-hover);
  text-decoration: none;
  outline: 0;
}

.bb-web-account-item-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-account-item-icon-color);
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-web-account-item-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-account-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================
   Divider
===================================== */
.bb-web-account-menu .dropdown-divider {
  margin: 0.5rem -0.5rem;
  border-top: var(--bb-border-width) solid var(--bb-web-account-menu-border);
  opacity: 1;
}

/* =====================================
   Danger Item
===================================== */
.bb-web-account-item.is-danger {
  color: var(--bb-danger);
  font-weight: var(--bb-fw-bold);
}

.bb-web-account-item.is-danger .bb-web-account-item-icon {
  color: var(--bb-danger);
}

.bb-web-account-item.is-danger:hover,
.bb-web-account-item.is-danger:focus {
  color: var(--bb-danger);
  background-color: var(--bb-web-account-danger-bg-hover);
}

/* =====================================
   Mobile
===================================== */
@media (max-width: 575.98px) {
  .bb-web-header-account-dropdown {
    --bb-web-account-trigger-height: 2.25rem;
    --bb-web-account-trigger-padding-x: 0;
    --bb-web-account-avatar-size: 2.25rem;
    --bb-web-account-menu-width: 15.625rem;
  }
  .bb-web-account-current,
  .bb-web-account-arrow {
    display: none;
  }
  .bb-web-account-trigger {
    width: var(--bb-web-account-trigger-height);
    padding: 0;
  }
  .bb-web-account-menu-avatar {
    --bb-web-account-menu-avatar-size: 2.5rem;
  }
}
/* =====================================
   Web Bulbulustur - Header Main
   Scope: Main CSS Pilot Header
   Layer: web/components/_web-header.scss

   Purpose:
   - Main marketplace header.
   - Logo, category host, search, actions, basket integration, mobile controls and sidebar.
   - Mega menu layer safety.
   - Logo light / dark image switching.
   - Optional logo brush accent.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - This file owns only header-local tokens.
===================================== */
/* =====================================
   Header Local Tokens - Light Default
===================================== */
.bb-web-header {
  --bb-web-header-bg: var(--bb-body-bg);
  --bb-web-header-main-bg: var(--bb-body-bg);
  --bb-web-header-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-header-shadow:
      0 0.0625rem 0 color-mix(in srgb, var(--bb-color-coal-400) 3%, transparent),
      0 0.625rem 1.625rem color-mix(in srgb, var(--bb-color-coal-400) 5.5%, transparent);
  --bb-web-header-bottom-fade:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-color-coal-400) 4.5%, transparent),
          transparent
      );
  --bb-web-header-main-padding-y: 0.625rem;
  --bb-web-header-inner-min-height: 6rem;
  --bb-web-header-inner-gap: 1.5rem;
  --bb-web-header-brand-gap: 1.375rem;
  --bb-web-header-logo-height: 3rem;
  --bb-web-header-logo-mobile-height: 2.125rem;
  --bb-web-header-search-bg: var(--bb-body-bg);
  --bb-web-header-search-border: var(--bb-primary);
  --bb-web-header-search-border-focus: var(--bb-primary);
  --bb-web-header-search-shadow-focus: 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-web-header-search-input-color: var(--bb-heading-color);
  --bb-web-header-search-placeholder: var(--bb-secondary-color);
  --bb-web-header-search-select-color: var(--bb-secondary-color);
  --bb-web-header-search-select-bg: var(--bb-body-bg);
  --bb-web-header-search-select-border: var(--bb-border-color);
  --bb-web-header-action-color: var(--bb-heading-color);
  --bb-web-header-action-bg: var(--bb-body-bg);
  --bb-web-header-action-bg-hover: var(--bb-tertiary-bg);
  --bb-web-header-action-border: var(--bb-border-color);
  --bb-web-header-action-border-hover: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  --bb-web-header-action-shadow-hover: var(--bb-shadow-xs);
  --bb-web-header-badge-bg: var(--bb-primary);
  --bb-web-header-badge-color: var(--bb-primary-inverse);
  --bb-web-header-badge-border: var(--bb-body-bg);
  --bb-web-header-sidebar-bg: var(--bb-body-bg);
  --bb-web-header-sidebar-shadow: var(--bb-shadow-lg);
  --bb-web-header-sidebar-border: var(--bb-border-color);
  --bb-web-header-sidebar-link-bg: var(--bb-body-bg);
  --bb-web-header-sidebar-link-bg-hover: var(--bb-tertiary-bg);
  --bb-web-header-sidebar-link-border: var(--bb-border-color);
  --bb-web-header-sidebar-link-border-hover: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  --bb-web-header-sidebar-overlay-bg: color-mix(in srgb, var(--bb-color-coal-300) 52%, transparent);
  --bb-web-header-logo-brush-opacity: 0.22;
  --bb-web-header-logo-brush-bg:
      linear-gradient(
          90deg,
          transparent 0%,
          color-mix(in srgb, var(--bb-primary) 64%, transparent) 8%,
          color-mix(in srgb, var(--bb-primary) 72%, transparent) 46%,
          color-mix(in srgb, var(--bb-primary) 52%, transparent) 82%,
          transparent 100%
      );
}

/* =====================================
   Header Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-web-header {
  --bb-web-header-bg: var(--bb-header-bg);
  --bb-web-header-main-bg: var(--bb-header-bg);
  --bb-web-header-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-web-header-shadow:
      0 0.0625rem 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 4%, transparent),
      0 0.625rem 1.625rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-web-header-bottom-fade:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
          transparent
      );
  --bb-web-header-search-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-web-header-search-border: var(--bb-primary);
  --bb-web-header-search-border-focus: var(--bb-primary);
  --bb-web-header-search-shadow-focus: 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 13%, transparent);
  --bb-web-header-search-select-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-web-header-search-select-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-header-action-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-web-header-action-bg-hover: var(--bb-surface-soft);
  --bb-web-header-action-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-header-action-border-hover: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-web-header-action-shadow-hover: 0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 20%, transparent);
  --bb-web-header-badge-border: var(--bb-header-bg);
  --bb-web-header-sidebar-bg: var(--bb-surface-elevated);
  --bb-web-header-sidebar-shadow:
      0 1.25rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 34%, transparent);
  --bb-web-header-sidebar-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-header-sidebar-link-bg: var(--bb-surface-elevated);
  --bb-web-header-sidebar-link-bg-hover: var(--bb-surface-soft);
  --bb-web-header-sidebar-link-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-header-sidebar-link-border-hover: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-web-header-sidebar-overlay-bg: color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 58%, transparent);
  --bb-web-header-logo-brush-opacity: 0.18;
}

/* =====================================
   Header Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-web-header {
  --bb-web-header-bg: var(--bb-header-bg);
  --bb-web-header-main-bg: var(--bb-header-bg);
  --bb-web-header-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-web-header-shadow:
      0 0.0625rem 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 4%, transparent),
      0 0.625rem 1.625rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent);
  --bb-web-header-bottom-fade:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent),
          transparent
      );
  --bb-web-header-search-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-web-header-search-border: var(--bb-primary);
  --bb-web-header-search-border-focus: var(--bb-primary);
  --bb-web-header-search-shadow-focus: 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 11%, transparent);
  --bb-web-header-search-select-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-web-header-search-select-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-header-action-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-web-header-action-bg-hover: var(--bb-surface-soft);
  --bb-web-header-action-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-header-action-border-hover: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  --bb-web-header-action-shadow-hover: 0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-web-header-badge-border: var(--bb-header-bg);
  --bb-web-header-sidebar-bg: var(--bb-surface-elevated);
  --bb-web-header-sidebar-shadow:
      0 1.25rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 38%, transparent);
  --bb-web-header-sidebar-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-header-sidebar-link-bg: var(--bb-surface-elevated);
  --bb-web-header-sidebar-link-bg-hover: var(--bb-surface-soft);
  --bb-web-header-sidebar-link-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-web-header-sidebar-link-border-hover: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  --bb-web-header-sidebar-overlay-bg: color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 62%, transparent);
  --bb-web-header-logo-brush-opacity: 0.16;
}

/* =====================================
   Header Base / Layer Order
===================================== */
.bb-web-header {
  position: relative;
  z-index: 1040;
  background-color: var(--bb-web-header-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-web-header-border);
  box-shadow: var(--bb-web-header-shadow);
}

.bb-web-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.125rem;
  height: 1.125rem;
  pointer-events: none;
  background: var(--bb-web-header-bottom-fade);
}

.bb-web-header-main {
  position: relative;
  z-index: 1040;
  background-color: var(--bb-web-header-main-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-web-header-border);
}

.bb-web-header-main,
.bb-web-header-main .bb-web-container,
.bb-web-header-main-shell,
.bb-web-header-inner,
.bb-web-header-brand-wrap,
.bb-web-header-category-host,
.bb-web-header-category {
  overflow: visible;
}

.bb-web-header-main-shell {
  position: relative;
  z-index: 1;
  padding: var(--bb-web-header-main-padding-y) 0;
}

.bb-category-menu-root,
.bb-category-menu-panel {
  position: relative;
  z-index: 1050;
}

/* =====================================
   Main Header Grid
===================================== */
.bb-web-header-inner {
  min-height: var(--bb-web-header-inner-min-height);
  display: grid;
  grid-template-columns: auto minmax(22.5rem, 1fr) auto;
  align-items: center;
  gap: var(--bb-web-header-inner-gap);
}

.bb-web-header-brand-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bb-web-header-brand-gap);
}

/* =====================================
   Header Logo
===================================== */
.bb-web-header-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 0.125rem;
  text-decoration: none;
}

.bb-web-header-logo-has-brush {
  isolation: isolate;
}

.bb-web-header-logo-img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: var(--bb-web-header-logo-height);
  max-width: 100%;
  object-fit: contain;
}

.bb-web-header-logo-img-light {
  display: block;
}

.bb-web-header-logo-img-dark {
  display: none;
}

html[data-bs-theme=navy] .bb-web-header-logo-img-light,
html[data-bs-theme=dark] .bb-web-header-logo-img-light {
  display: none;
}

html[data-bs-theme=navy] .bb-web-header-logo-img-dark,
html[data-bs-theme=dark] .bb-web-header-logo-img-dark {
  display: block;
}

/* =====================================
   Logo Background Brush
   Soft mason-brush style accent
===================================== */
.bb-web-header-logo-brush {
  position: absolute;
  left: -0.125rem;
  right: 0.125rem;
  top: 52%;
  z-index: 1;
  height: 0.9rem;
  background: var(--bb-web-header-logo-brush-bg);
  opacity: var(--bb-web-header-logo-brush-opacity);
  border-radius: var(--bb-radius-pill);
  transform: rotate(-8deg) skewX(-10deg);
  transform-origin: center;
  pointer-events: none;
}

.bb-web-header-logo-brush::before,
.bb-web-header-logo-brush::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.2rem;
  height: 0.45rem;
  background: inherit;
  border-radius: inherit;
  pointer-events: none;
}

.bb-web-header-logo-brush::before {
  top: -0.2rem;
  opacity: 0.42;
  transform: translateX(0.35rem) rotate(2deg);
}

.bb-web-header-logo-brush::after {
  bottom: -0.16rem;
  opacity: 0.34;
  transform: translateX(-0.25rem) rotate(-2deg);
}

/* =====================================
   Category Host
===================================== */
.bb-web-header-category-host {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.bb-web-header-category {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* =====================================
   Search
===================================== */
.bb-web-header-search {
  min-width: 0;
  width: 100%;
}

.bb-web-header-search-form {
  width: 100%;
  margin: 0;
}

.bb-web-header-search-group {
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--bb-web-header-search-bg);
  border: 0.125rem solid var(--bb-web-header-search-border);
  border-radius: var(--bb-radius-pill);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-header-search-group:focus-within {
  border-color: var(--bb-web-header-search-border-focus);
  box-shadow: var(--bb-web-header-search-shadow-focus);
}

.bb-web-header-search-input {
  min-width: 0;
  height: 3rem;
  flex: 1 1 auto;
  padding: 0 1.375rem;
  color: var(--bb-web-header-search-input-color);
  background-color: transparent;
  border: 0;
  border-radius: var(--bb-radius-none);
  box-shadow: none !important;
  font-size: var(--bb-fs-sm);
}

.bb-web-header-search-input::placeholder {
  color: var(--bb-web-header-search-placeholder);
}

.bb-web-header-search-input:focus {
  background-color: transparent;
  border: 0;
  box-shadow: none !important;
}

.bb-web-header-search-select {
  width: 10rem;
  min-width: 10rem;
  height: 3rem;
  color: var(--bb-web-header-search-select-color);
  background-color: var(--bb-web-header-search-select-bg);
  border: 0;
  border-left: var(--bb-border-width) solid var(--bb-web-header-search-select-border);
  border-radius: var(--bb-radius-none);
  box-shadow: none !important;
  font-size: var(--bb-fs-sm);
}

.bb-web-header-search-select:focus {
  border-left-color: var(--bb-web-header-search-select-border);
  box-shadow: none !important;
}

.bb-web-header-search-button {
  width: 3.625rem;
  min-width: 3.625rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border: 0;
  border-radius: var(--bb-radius-none);
  transition: background-color var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-web-header-search-button:hover,
.bb-web-header-search-button:focus {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary-hover);
}

.bb-web-header-search-button .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

/* =====================================
   Header Actions
===================================== */
.bb-web-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bb-web-header-utility-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-web-header-utility-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.bb-web-header-utility-chip {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  color: var(--bb-web-header-action-color);
  background-color: var(--bb-web-header-action-bg);
  border: var(--bb-border-width) solid var(--bb-web-header-action-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-header-utility-chip:hover {
  color: var(--bb-web-header-action-color);
  background-color: var(--bb-web-header-action-bg-hover);
  border-color: var(--bb-web-header-action-border-hover);
  box-shadow: var(--bb-web-header-action-shadow-hover);
  text-decoration: none;
  transform: translateY(-0.0625rem);
}

:root,
html[data-bs-theme=light] {
  --bb-web-header-suppliers-chip-bg:
      linear-gradient(
          135deg,
          var(--bb-color-red-500) 0%,
          var(--bb-color-orange-600) 100%
      );
  --bb-web-header-suppliers-chip-bg-hover:
      linear-gradient(
          135deg,
          var(--bb-color-red-600) 0%,
          var(--bb-color-orange-700) 100%
      );
  --bb-web-header-suppliers-chip-color: var(--bb-white);
  --bb-web-header-suppliers-chip-border: color-mix(in srgb, var(--bb-color-red-600) 72%, var(--bb-border-color));
  --bb-web-header-suppliers-chip-shadow: color-mix(in srgb, var(--bb-color-red-500) 26%, transparent);
  --bb-web-header-suppliers-chip-highlight: color-mix(in srgb, var(--bb-white) 20%, transparent);
}

html[data-bs-theme=navy] {
  --bb-web-header-suppliers-chip-bg:
      linear-gradient(
          135deg,
          var(--bb-color-red-400) 0%,
          var(--bb-color-orange-500) 100%
      );
  --bb-web-header-suppliers-chip-bg-hover:
      linear-gradient(
          135deg,
          var(--bb-color-red-500) 0%,
          var(--bb-color-orange-600) 100%
      );
  --bb-web-header-suppliers-chip-color: var(--bb-white);
  --bb-web-header-suppliers-chip-border: color-mix(in srgb, var(--bb-color-red-400) 54%, var(--bb-border-color));
  --bb-web-header-suppliers-chip-shadow: color-mix(in srgb, var(--bb-color-red-400) 20%, transparent);
  --bb-web-header-suppliers-chip-highlight: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

html[data-bs-theme=dark] {
  --bb-web-header-suppliers-chip-bg:
      linear-gradient(
          135deg,
          var(--bb-color-red-400) 0%,
          var(--bb-color-orange-500) 100%
      );
  --bb-web-header-suppliers-chip-bg-hover:
      linear-gradient(
          135deg,
          var(--bb-color-red-500) 0%,
          var(--bb-color-orange-600) 100%
      );
  --bb-web-header-suppliers-chip-color: var(--bb-white);
  --bb-web-header-suppliers-chip-border: color-mix(in srgb, var(--bb-color-red-400) 50%, var(--bb-border-color));
  --bb-web-header-suppliers-chip-shadow: color-mix(in srgb, var(--bb-color-red-400) 18%, transparent);
  --bb-web-header-suppliers-chip-highlight: color-mix(in srgb, var(--bb-white) 12%, transparent);
}

.bb-web-header-utility-chip-suppliers {
  position: relative;
  isolation: isolate;
  min-height: 2.625rem;
  padding: 0 1.125rem;
  color: var(--bb-web-header-suppliers-chip-color);
  background: var(--bb-web-header-suppliers-chip-bg);
  border-color: var(--bb-web-header-suppliers-chip-border);
  border-radius: var(--bb-radius-sm);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.01em;
  box-shadow: 0 0.5rem 1.125rem var(--bb-web-header-suppliers-chip-shadow), inset 0 1px 0 var(--bb-web-header-suppliers-chip-highlight);
}

.bb-web-header-utility-chip-suppliers::before {
  content: "";
  position: absolute;
  inset: 0.1875rem;
  z-index: -1;
  border-radius: calc(var(--bb-radius-sm) - 0.125rem);
  background: linear-gradient(180deg, var(--bb-web-header-suppliers-chip-highlight) 0%, transparent 56%);
  opacity: 0.36;
  pointer-events: none;
}

.bb-web-header-utility-chip-suppliers:hover,
.bb-web-header-utility-chip-suppliers:focus {
  color: var(--bb-web-header-suppliers-chip-color);
  background: var(--bb-web-header-suppliers-chip-bg-hover);
  border-color: var(--bb-web-header-suppliers-chip-border);
  box-shadow: 0 0.75rem 1.5rem var(--bb-web-header-suppliers-chip-shadow), inset 0 1px 0 var(--bb-web-header-suppliers-chip-highlight);
  transform: translateY(-0.0625rem);
  text-decoration: none;
  outline: 0;
}

.bb-web-header-utility-circle,
.bb-web-header-icon-button {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-header-action-color);
  background-color: var(--bb-web-header-action-bg);
  border: var(--bb-border-width) solid var(--bb-web-header-action-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: none;
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-header-utility-circle:hover,
.bb-web-header-icon-button:hover {
  color: var(--bb-web-header-action-color);
  background-color: var(--bb-web-header-action-bg-hover);
  border-color: var(--bb-web-header-action-border-hover);
  box-shadow: var(--bb-web-header-action-shadow-hover);
  text-decoration: none;
  transform: translateY(-0.0625rem);
}

.bb-web-header-utility-circle .material-symbols-outlined,
.bb-web-header-icon-button .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-header-action-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  z-index: 2;
  min-width: 1.1875rem;
  height: 1.1875rem;
  padding: 0 0.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-header-badge-color);
  background-color: var(--bb-web-header-badge-bg);
  border: 0.125rem solid var(--bb-web-header-badge-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* =====================================
   Basket Component Integration
===================================== */
.bb-web-header-utility-item-basket {
  position: relative;
}

.bb-web-header-utility-item-basket #basketInvoker {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--bb-web-header-action-color) !important;
  background-color: var(--bb-web-header-action-bg) !important;
  border: var(--bb-border-width) solid var(--bb-web-header-action-border) !important;
  border-radius: var(--bb-radius-pill) !important;
  box-shadow: none;
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-header-utility-item-basket #basketInvoker:hover {
  color: var(--bb-web-header-action-color) !important;
  background-color: var(--bb-web-header-action-bg-hover) !important;
  border-color: var(--bb-web-header-action-border-hover) !important;
  box-shadow: var(--bb-web-header-action-shadow-hover);
  transform: translateY(-0.0625rem);
}

.bb-web-header-utility-item-basket #basketInvoker .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-header-utility-item-basket #headerBasketCount {
  position: absolute !important;
  top: -0.25rem !important;
  right: -0.25rem !important;
  left: auto !important;
  width: auto !important;
  min-width: 1.1875rem !important;
  height: 1.1875rem !important;
  padding: 0 0.3125rem !important;
  color: var(--bb-web-header-badge-color) !important;
  background-color: var(--bb-web-header-badge-bg) !important;
  border: 0.125rem solid var(--bb-web-header-badge-border) !important;
  border-radius: var(--bb-radius-pill) !important;
  font-size: var(--bb-fs-2xs) !important;
  font-weight: var(--bb-fw-bold) !important;
  line-height: 1 !important;
}

/* =====================================
   Mobile Controls / Mobile Search
===================================== */
.bb-web-header-mobile-controls {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.bb-web-header-mobile-search {
  display: none;
  padding: 0.875rem 0 1.125rem;
  border-top: var(--bb-border-width) solid var(--bb-web-header-border);
}

.bb-web-header-mobile-search.is-open {
  display: block;
}

/* =====================================
   Sidebar
===================================== */
.bb-web-header-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1120;
  width: min(88vw, 24.375rem);
  background-color: var(--bb-web-header-sidebar-bg);
  box-shadow: var(--bb-web-header-sidebar-shadow);
  transform: translateX(-105%);
  transition: transform var(--bb-transition-normal);
}

.bb-web-header-sidebar.is-open {
  transform: translateX(0);
}

.bb-web-header-sidebar-head {
  min-height: 4.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: var(--bb-border-width) solid var(--bb-web-header-sidebar-border);
}

.bb-web-header-sidebar-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bb-web-header-sidebar-logo img {
  display: block;
  width: auto;
  height: 2.375rem;
}

.bb-web-header-sidebar-body {
  height: calc(100vh - 4.625rem);
  overflow-y: auto;
  padding: 1.25rem;
}

.bb-web-header-sidebar-category {
  margin-bottom: 1.5rem;
}

.bb-web-header-sidebar-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-web-header-sidebar-menu li + li {
  margin-top: 0.625rem;
}

.bb-web-header-sidebar-link {
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-heading-color);
  background-color: var(--bb-web-header-sidebar-link-bg);
  border: var(--bb-border-width) solid var(--bb-web-header-sidebar-link-border);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-web-header-sidebar-link:hover {
  color: var(--bb-heading-color);
  background-color: var(--bb-web-header-sidebar-link-bg-hover);
  border-color: var(--bb-web-header-sidebar-link-border-hover);
  text-decoration: none;
}

.bb-web-header-sidebar-link .material-symbols-outlined {
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Sidebar Overlay
===================================== */
.bb-web-header-overlay {
  position: fixed;
  inset: 0;
  z-index: 1110;
  display: block;
  opacity: 0;
  visibility: hidden;
  background-color: var(--bb-web-header-sidebar-overlay-bg);
  transition: opacity var(--bb-transition-normal), visibility var(--bb-transition-normal);
}

.bb-web-header-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

body.bb-web-sidebar-open {
  overflow: hidden;
}

/* =====================================
   Desktop Helpers
===================================== */
.is-desktop-only {
  display: inline-flex;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1399.98px) {
  .bb-web-header {
    --bb-web-header-inner-gap: 1.125rem;
    --bb-web-header-brand-gap: 1.125rem;
    --bb-web-header-logo-height: 2.375rem;
  }
  .bb-web-header-search-select {
    width: 9.0625rem;
    min-width: 9.0625rem;
  }
  .bb-web-header-utility-list {
    gap: 0.4375rem;
  }
  .bb-web-header-utility-chip {
    padding: 0 0.875rem;
  }
}
@media (max-width: 1199.98px) {
  .bb-web-header {
    --bb-web-header-inner-min-height: 4.75rem;
    --bb-web-header-logo-height: 2.25rem;
  }
  .bb-web-header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
  }
  .bb-web-header-mobile-controls {
    display: inline-flex;
  }
  .bb-web-header-category-host,
  .bb-web-header-search,
  .is-desktop-only {
    display: none !important;
  }
  .bb-web-header-brand-wrap {
    justify-content: center;
    gap: 0;
  }
  .bb-web-header-actions {
    justify-content: flex-end;
  }
  .bb-web-header-utility-list {
    gap: 0.5rem;
  }
}
@media (max-width: 767.98px) {
  .bb-web-header {
    --bb-web-header-inner-min-height: 4.375rem;
    --bb-web-header-logo-height: var(--bb-web-header-logo-mobile-height);
    --bb-web-header-logo-brush-opacity: 0.18;
  }
  .bb-web-header-inner {
    gap: 0.75rem;
  }
  .bb-web-header-logo-brush {
    height: 0.75rem;
  }
  .bb-web-header-utility-circle,
  .bb-web-header-icon-button,
  .bb-web-header-utility-item-basket #basketInvoker {
    width: 2.375rem;
    height: 2.375rem;
  }
  .bb-web-header-sidebar {
    width: min(92vw, 23.125rem);
  }
}
@media (max-width: 575.98px) {
  .bb-web-header {
    --bb-web-header-inner-gap: 0.5rem;
    --bb-web-header-logo-height: 2rem;
  }
  .bb-web-header-utility-list {
    gap: 0.375rem;
  }
  .bb-web-header-utility-circle,
  .bb-web-header-icon-button,
  .bb-web-header-utility-item-basket #basketInvoker {
    width: 2.25rem;
    height: 2.25rem;
  }
  .bb-web-header-utility-circle .material-symbols-outlined,
  .bb-web-header-icon-button .material-symbols-outlined,
  .bb-web-header-utility-item-basket #basketInvoker .material-symbols-outlined {
    font-size: var(--bb-icon-size-sm);
  }
}
/* =====================================
   Category Menu Top - Main CSS Pilot
   Clean Rebuild
   Component: _CategoryMenuTopMainCssPilot
===================================== */
/* =====================================
   Root / Layer
===================================== */
html[data-bs-theme=dark] .bb-category-menu-side-item-icon,
html[data-bs-theme=navy] .bb-category-menu-side-item-icon {
  color: color-mix(in srgb, var(--bb-primary) 92%, var(--bb-emphasis-color));
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--bb-primary) 22%, transparent), transparent 1.65rem), color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
}

.bb-category-menu-root {
  position: static;
  display: inline-flex;
  align-items: center;
  --bb-category-overlay-top: 0px;
  --bb-category-panel-z: 1080;
  --bb-category-overlay-z: 1070;
  --bb-category-panel-width: 1430px;
}

/* =====================================
   Trigger
===================================== */
.bb-category-menu-trigger {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-category-menu-trigger:hover,
.bb-category-menu-trigger:focus {
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-category-menu-root.is-open .bb-category-menu-trigger {
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-category-menu-trigger-icon,
.bb-category-menu-trigger-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bb-category-menu-trigger-icon .material-symbols-outlined,
.bb-category-menu-trigger-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-category-menu-trigger-label {
  color: inherit;
  white-space: nowrap;
}

.bb-category-menu-trigger-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  color: var(--bb-web-white);
  background-color: var(--bb-color-beige-500);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-category-menu-trigger-arrow {
  transition: transform var(--bb-transition-fast);
}

.bb-category-menu-root.is-open .bb-category-menu-trigger-arrow {
  transform: rotate(180deg);
}

/* =====================================
   Overlay
   Header main altından başlar.
   JS --bb-category-overlay-top değerini header bottom'a set eder.
===================================== */
.bb-category-menu-overlay {
  position: fixed;
  top: var(--bb-category-overlay-top);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--bb-category-overlay-z);
  background-color: rgba(17, 24, 39, 0.58);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--bb-transition-normal), visibility var(--bb-transition-normal);
}

.bb-category-menu-root.is-open .bb-category-menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.bb-category-menu-open {
  overflow: hidden;
}

/* =====================================
   Panel
   Trigger genişliğine sıkışmaz.
   Viewport merkezinde container genişliğinde açılır.
===================================== */
.bb-category-menu-panel {
  position: fixed;
  top: var(--bb-category-overlay-top);
  left: 50%;
  z-index: var(--bb-category-panel-z);
  width: min(var(--bb-category-panel-width), 100vw - 48px);
  max-width: min(var(--bb-category-panel-width), 100vw - 48px);
  max-height: calc(100vh - var(--bb-category-overlay-top) - 24px);
  overflow: hidden;
  color: var(--bb-body-color);
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: 0 0 var(--bb-radius-2xl) var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  transition: opacity var(--bb-transition-normal), visibility var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-category-menu-root.is-open .bb-category-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* =====================================
   Panel Head
===================================== */
.bb-category-menu-panel-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  background-color: var(--bb-body-bg);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-category-menu-panel-head-text {
  min-width: 0;
}

.bb-category-menu-panel-title {
  display: block;
  margin: 0 0 5px;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.02em;
}

.bb-category-menu-panel-subtitle {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Mode Switch
===================================== */
.bb-category-menu-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 7px;
  background-color: var(--bb-secondary-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
}

.bb-category-menu-mode {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 18px;
  color: var(--bb-secondary-color);
  background-color: transparent;
  border: 0;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-category-menu-mode:hover {
  color: var(--bb-heading-color);
  text-decoration: none;
}

.bb-category-menu-mode.is-active {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  box-shadow: var(--bb-shadow-xs);
}

.bb-category-menu-mode .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Panel Body
===================================== */
.bb-category-menu-panel-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  max-height: calc(100vh - var(--bb-category-overlay-top) - 100px);
  background-color: var(--bb-body-bg);
}

/* =====================================
   Left Side
===================================== */
.bb-category-menu-side {
  min-height: 0;
  background-color: var(--bb-secondary-bg);
  border-right: 1px solid var(--bb-border-color);
}

.bb-category-menu-side-scroll {
  max-height: calc(100vh - var(--bb-category-overlay-top) - 100px);
  overflow-y: auto;
  padding: 14px;
}

.bb-category-menu-side-scroll::-webkit-scrollbar {
  width: 10px;
}

.bb-category-menu-side-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.bb-category-menu-side-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-secondary-color) 30%, transparent);
  border: 2px solid transparent;
  border-radius: var(--bb-radius-pill);
  background-clip: padding-box;
}

.bb-category-menu-side-item {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  color: var(--bb-heading-color);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--bb-radius-xl);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-category-menu-side-item + .bb-category-menu-side-item {
  margin-top: 8px;
}

.bb-category-menu-side-item:hover .bb-category-menu-side-item-icon,
.bb-category-menu-side-item.is-active .bb-category-menu-side-item-icon,
.bb-category-menu-side-item.active .bb-category-menu-side-item-icon {
  color: var(--bb-emphasis-color);
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--bb-primary) 28%, transparent), transparent 1.8rem), color-mix(in srgb, var(--bb-primary) 18%, var(--bb-body-bg));
  border-color: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--bb-body-bg) 76%, transparent), 0 0.5rem 1rem color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-category-menu-side-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  color: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 1.65rem), color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--bb-body-bg) 70%, transparent), 0 0.375rem 0.875rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

.bb-category-menu-side-item-icon .material-symbols-outlined {
  color: currentColor;
  font-size: 1.375rem;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.bb-category-menu-side-item-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-category-menu-side-item-text {
  min-width: 0;
  color: inherit;
  line-height: var(--bb-line-height-base);
}

.bb-category-menu-side-item-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
}

.bb-category-menu-side-item-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* =====================================
   Stage / Content Visibility
   Sadece aktif kategori görünsün.
===================================== */
.bb-category-menu-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  background-color: var(--bb-body-bg);
  overflow: hidden;
}

.bb-category-menu-panel .bb-category-menu-content {
  display: none !important;
}

.bb-category-menu-panel .bb-category-menu-content.is-active {
  display: block !important;
}

.bb-category-menu-content {
  height: 100%;
  max-height: calc(100vh - var(--bb-category-overlay-top) - 100px);
  overflow-y: auto;
  padding: 28px 30px 32px;
  background-color: var(--bb-body-bg);
}

.bb-category-menu-content::-webkit-scrollbar {
  width: 10px;
}

.bb-category-menu-content::-webkit-scrollbar-track {
  background: transparent;
}

.bb-category-menu-content::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-secondary-color) 28%, transparent);
  border: 2px solid transparent;
  border-radius: var(--bb-radius-pill);
  background-clip: padding-box;
}

/* =====================================
   Content Head
===================================== */
.bb-category-menu-content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.bb-category-menu-content-title {
  margin: 0 0 7px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-category-menu-content-subtitle {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-category-menu-content-link {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.bb-category-menu-content-link:hover {
  color: var(--bb-primary);
  text-decoration: underline;
}

/* =====================================
   Columns
===================================== */
.bb-category-menu-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  align-items: start;
  gap: 30px 42px;
}

.bb-category-menu-column {
  min-width: 0;
}

.bb-category-menu-column-title {
  display: inline-flex;
  margin: 0 0 11px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-base);
  text-decoration: none;
}

.bb-category-menu-column-title:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

.bb-category-menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-category-menu-links li + li {
  margin-top: 8px;
}

.bb-category-menu-links a {
  display: inline-flex;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  text-decoration: none;
  transition: color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-category-menu-links a:hover {
  color: var(--bb-heading-color);
  text-decoration: none;
  transform: translateX(2px);
}

.bb-category-menu-more-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  text-decoration: none;
}

.bb-category-menu-more-link:hover {
  color: var(--bb-primary);
  text-decoration: underline;
}

/* =====================================
   Empty State
===================================== */
.bb-category-menu-empty-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  background-color: var(--bb-secondary-bg);
  border: 1px dashed var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
}

.bb-category-menu-empty-state .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-category-menu-empty-state h3 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-category-menu-empty-state p {
  max-width: 520px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1479.98px) {
  .bb-category-menu-root {
    --bb-category-panel-width: 1200px;
  }
  .bb-category-menu-columns {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 26px 30px;
  }
  .bb-category-menu-content-title {
    font-size: var(--bb-fs-2xl);
  }
}
@media (max-width: 1199.98px) {
  .bb-category-menu-root {
    display: none;
  }
}
/* =====================================
   Web Mobile Category Menu
   Main CSS Pilot
===================================== */
.bb-mobile-category-menu {
  width: 100%;
}

.bb-mobile-category-menu-list,
.bb-mobile-category-submenu,
.bb-mobile-category-third-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-mobile-category-menu-item {
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-mobile-category-menu-toggle,
.bb-mobile-category-menu-link,
.bb-mobile-category-submenu-toggle,
.bb-mobile-category-submenu-link,
.bb-mobile-category-third-menu-link {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background-color: transparent;
  color: var(--bb-heading-color);
  text-align: left;
  text-decoration: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-mobile-category-menu-toggle,
.bb-mobile-category-menu-link {
  padding: 12px 0;
}

.bb-mobile-category-submenu {
  padding: 4px 0 10px 12px;
}

.bb-mobile-category-submenu-item {
  border-left: 1px solid var(--bb-border-color);
}

.bb-mobile-category-submenu-toggle,
.bb-mobile-category-submenu-link {
  padding: 10px 0 10px 14px;
  color: var(--bb-secondary-color);
  font-weight: var(--bb-fw-medium);
}

.bb-mobile-category-third-menu {
  padding: 2px 0 8px 18px;
}

.bb-mobile-category-third-menu-item {
  border-left: 1px dashed var(--bb-border-color);
}

.bb-mobile-category-third-menu-link {
  min-height: 38px;
  padding: 8px 0 8px 14px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-normal);
}

.bb-mobile-category-menu-toggle:hover,
.bb-mobile-category-menu-link:hover,
.bb-mobile-category-submenu-toggle:hover,
.bb-mobile-category-submenu-link:hover,
.bb-mobile-category-third-menu-link:hover {
  color: var(--bb-primary);
  text-decoration: none;
}

.bb-mobile-category-menu-text {
  min-width: 0;
}

.bb-mobile-category-menu-icon {
  flex: 0 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xl);
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-mobile-category-menu-toggle:not(.collapsed) .bb-mobile-category-menu-icon,
.bb-mobile-category-submenu-toggle:not(.collapsed) .bb-mobile-category-menu-icon {
  transform: rotate(180deg);
}

/* =====================================
   Web Basket Dropdown
   Bootstrap 5 dropdown + main.css dropdown polish
===================================== */
/* =====================================
   Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-basket-dropdown-bg: var(--bb-surface-elevated);
  --bb-basket-dropdown-bg-soft: var(--bb-tertiary-bg);
  --bb-basket-dropdown-color: var(--bb-body-color);
  --bb-basket-dropdown-heading-color: var(--bb-emphasis-color);
  --bb-basket-dropdown-muted-color: var(--bb-secondary-color);
  --bb-basket-dropdown-border-color: var(--bb-border-color);
  --bb-basket-dropdown-border-color-soft: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-dropdown-border-color-strong: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-basket-dropdown-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-emphasis-color) 18%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent);
  --bb-basket-dropdown-head-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 8rem
      ),
      var(--bb-surface-elevated);
  --bb-basket-dropdown-icon-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-basket-dropdown-icon-border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-basket-dropdown-item-hover-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-primary) 4%, transparent),
          transparent
      );
  --bb-basket-dropdown-image-bg: var(--bb-body-bg);
  --bb-basket-dropdown-image-border-color: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-basket-dropdown-remove-color: color-mix(in srgb, var(--bb-secondary-color) 82%, var(--bb-emphasis-color));
  --bb-basket-dropdown-remove-bg: var(--bb-tertiary-bg);
  --bb-basket-dropdown-remove-border-color: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-basket-dropdown-remove-hover-color: var(--bb-danger);
  --bb-basket-dropdown-remove-hover-bg: color-mix(in srgb, var(--bb-danger) 10%, var(--bb-body-bg));
  --bb-basket-dropdown-remove-hover-border-color: color-mix(in srgb, var(--bb-danger) 24%, var(--bb-border-color));
  --bb-basket-dropdown-actions-bg:
      linear-gradient(
          180deg,
          var(--bb-tertiary-bg) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 70%, var(--bb-body-bg)) 100%
      );
  --bb-basket-dropdown-empty-icon-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-basket-dropdown-empty-icon-border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  --bb-basket-dropdown-scrollbar-thumb-bg: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
}

html[data-bs-theme=navy] {
  --bb-basket-dropdown-bg: var(--bb-surface-elevated);
  --bb-basket-dropdown-bg-soft: var(--bb-tertiary-bg);
  --bb-basket-dropdown-color: var(--bb-body-color);
  --bb-basket-dropdown-heading-color: var(--bb-emphasis-color);
  --bb-basket-dropdown-muted-color: var(--bb-secondary-color);
  --bb-basket-dropdown-border-color: var(--bb-border-color);
  --bb-basket-dropdown-border-color-soft: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-basket-dropdown-border-color-strong: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-basket-dropdown-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 34%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 18%, transparent);
  --bb-basket-dropdown-head-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 8rem
      ),
      var(--bb-surface-elevated);
  --bb-basket-dropdown-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-basket-dropdown-icon-border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-basket-dropdown-item-hover-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-primary) 5%, transparent),
          transparent
      );
  --bb-basket-dropdown-image-bg: color-mix(in srgb, var(--bb-body-bg) 88%, var(--bb-white) 4%);
  --bb-basket-dropdown-image-border-color: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-basket-dropdown-remove-color: color-mix(in srgb, var(--bb-secondary-color) 82%, var(--bb-emphasis-color));
  --bb-basket-dropdown-remove-bg: color-mix(in srgb, var(--bb-tertiary-bg) 80%, var(--bb-body-bg));
  --bb-basket-dropdown-remove-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-dropdown-remove-hover-color: var(--bb-danger);
  --bb-basket-dropdown-remove-hover-bg: color-mix(in srgb, var(--bb-danger) 12%, var(--bb-body-bg));
  --bb-basket-dropdown-remove-hover-border-color: color-mix(in srgb, var(--bb-danger) 26%, var(--bb-border-color));
  --bb-basket-dropdown-actions-bg:
      linear-gradient(
          180deg,
          var(--bb-tertiary-bg) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)) 100%
      );
  --bb-basket-dropdown-empty-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-basket-dropdown-empty-icon-border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-basket-dropdown-scrollbar-thumb-bg: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
}

html[data-bs-theme=dark] {
  --bb-basket-dropdown-bg: var(--bb-surface-elevated);
  --bb-basket-dropdown-bg-soft: var(--bb-tertiary-bg);
  --bb-basket-dropdown-color: var(--bb-body-color);
  --bb-basket-dropdown-heading-color: var(--bb-emphasis-color);
  --bb-basket-dropdown-muted-color: var(--bb-secondary-color);
  --bb-basket-dropdown-border-color: var(--bb-border-color);
  --bb-basket-dropdown-border-color-soft: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-basket-dropdown-border-color-strong: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-basket-dropdown-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 36%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-basket-dropdown-head-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-primary) 13%, transparent),
          transparent 8rem
      ),
      var(--bb-surface-elevated);
  --bb-basket-dropdown-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-basket-dropdown-icon-border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-basket-dropdown-item-hover-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-primary) 5%, transparent),
          transparent
      );
  --bb-basket-dropdown-image-bg: color-mix(in srgb, var(--bb-body-bg) 88%, var(--bb-white) 4%);
  --bb-basket-dropdown-image-border-color: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-basket-dropdown-remove-color: color-mix(in srgb, var(--bb-secondary-color) 82%, var(--bb-emphasis-color));
  --bb-basket-dropdown-remove-bg: color-mix(in srgb, var(--bb-tertiary-bg) 80%, var(--bb-body-bg));
  --bb-basket-dropdown-remove-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-dropdown-remove-hover-color: var(--bb-danger);
  --bb-basket-dropdown-remove-hover-bg: color-mix(in srgb, var(--bb-danger) 12%, var(--bb-body-bg));
  --bb-basket-dropdown-remove-hover-border-color: color-mix(in srgb, var(--bb-danger) 26%, var(--bb-border-color));
  --bb-basket-dropdown-actions-bg:
      linear-gradient(
          180deg,
          var(--bb-tertiary-bg) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)) 100%
      );
  --bb-basket-dropdown-empty-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-basket-dropdown-empty-icon-border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-basket-dropdown-scrollbar-thumb-bg: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
}

/* =====================================
   Structure
===================================== */
.bb-basket-dropdown {
  position: relative;
}

.bb-basket-dropdown-trigger {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-heading-color);
  background-color: transparent;
  border: 0;
  border-radius: var(--bb-radius-pill);
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-basket-dropdown-trigger:hover,
.bb-basket-dropdown-trigger[aria-expanded=true] {
  color: var(--bb-primary);
  background-color: var(--bb-tertiary-bg);
}

.bb-basket-dropdown-trigger .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-basket-dropdown-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* =====================================
   Dropdown Panel
===================================== */
.bb-basket-dropdown-menu {
  width: min(410px, 100vw - 24px);
  padding: 0;
  overflow: hidden;
  color: var(--bb-basket-dropdown-color);
  background-color: var(--bb-basket-dropdown-bg);
  border: var(--bb-border-width) solid var(--bb-basket-dropdown-border-color-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-basket-dropdown-shadow);
}

.bb-basket-dropdown-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.9375rem;
  background: var(--bb-basket-dropdown-head-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-basket-dropdown-border-color-soft);
}

.bb-basket-dropdown-head-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-basket-dropdown-icon-bg);
  border: var(--bb-border-width) solid var(--bb-basket-dropdown-icon-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-basket-dropdown-head-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-basket-dropdown-head-copy {
  min-width: 0;
}

.bb-basket-dropdown-head-copy strong {
  display: block;
  color: var(--bb-basket-dropdown-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-basket-dropdown-head-copy span {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-basket-dropdown-muted-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   List
===================================== */
.bb-basket-dropdown-list {
  display: block;
  max-height: 390px;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--bb-basket-dropdown-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--bb-basket-dropdown-scrollbar-thumb-bg) transparent;
}

.bb-basket-dropdown-list::-webkit-scrollbar {
  width: 0.375rem;
}

.bb-basket-dropdown-list::-webkit-scrollbar-track {
  background-color: transparent;
}

.bb-basket-dropdown-list::-webkit-scrollbar-thumb {
  background-color: var(--bb-basket-dropdown-scrollbar-thumb-bg);
  border-radius: var(--bb-radius-pill);
}

/* =====================================
   Item
===================================== */
.bb-basket-dropdown-item {
  min-width: 0;
  padding: 0.875rem 0;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) 2.25rem;
  gap: 0.875rem;
  align-items: center;
  border-bottom: var(--bb-border-width) solid var(--bb-basket-dropdown-border-color-soft);
}

.bb-basket-dropdown-item:last-child {
  border-bottom: 0;
}

.bb-basket-dropdown-item:hover {
  background: var(--bb-basket-dropdown-item-hover-bg);
}

/* =====================================
   Product Image
===================================== */
.bb-basket-dropdown-product-image-link {
  width: 4.25rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none !important;
}

.bb-basket-dropdown-product-image {
  width: 4rem;
  height: 4rem;
  padding: 0.25rem;
  display: block;
  object-fit: contain;
  background-color: var(--bb-basket-dropdown-image-bg);
  border: var(--bb-border-width) solid var(--bb-basket-dropdown-image-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

/* =====================================
   Product Text
===================================== */
.bb-basket-dropdown-product-body {
  min-width: 0;
}

.bb-basket-dropdown-product-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-basket-dropdown-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.45;
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-basket-dropdown-product-title:hover {
  color: var(--bb-primary);
}

.bb-basket-dropdown-product-price {
  margin-top: 0.375rem;
  color: var(--bb-basket-dropdown-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.2;
}

/* =====================================
   Remove Button
===================================== */
.bb-basket-dropdown-remove {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-basket-dropdown-remove-color);
  background-color: var(--bb-basket-dropdown-remove-bg);
  border: var(--bb-border-width) solid var(--bb-basket-dropdown-remove-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-basket-dropdown-remove:hover {
  color: var(--bb-basket-dropdown-remove-hover-color);
  background-color: var(--bb-basket-dropdown-remove-hover-bg);
  border-color: var(--bb-basket-dropdown-remove-hover-border-color);
  transform: scale(1.04);
}

.bb-basket-dropdown-remove .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Actions
===================================== */
.bb-basket-dropdown-actions {
  padding: 0.875rem 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--bb-basket-dropdown-actions-bg);
  border-top: var(--bb-border-width) solid var(--bb-basket-dropdown-border-color-strong);
}

.bb-basket-dropdown-actions .btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-lg);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Empty
===================================== */
.bb-basket-dropdown-empty {
  padding: 2rem 1.25rem 1.25rem;
  text-align: center;
  background-color: var(--bb-basket-dropdown-bg);
}

.bb-basket-dropdown-empty-icon {
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-basket-dropdown-empty-icon-bg);
  border: var(--bb-border-width) solid var(--bb-basket-dropdown-empty-icon-border-color);
  border-radius: var(--bb-radius-2xl);
}

.bb-basket-dropdown-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-basket-dropdown-empty-title {
  margin: 0;
  color: var(--bb-basket-dropdown-heading-color);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-basket-dropdown-empty-text {
  max-width: 16rem;
  margin: 0.625rem auto 1rem;
  color: var(--bb-basket-dropdown-muted-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Web Footer - Main CSS Pilot
   Sade koyu kurumsal footer
   Token-first | bb- prefix | dark/light safe
===================================== */
.bb-web-footer {
  position: relative;
  overflow: hidden;
  color: var(--bb-footer-color);
  background-color: var(--bb-footer-bg);
}

.bb-web-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 0.1875rem;
  background: var(--bb-footer-topline-gradient);
  pointer-events: none;
}

.bb-web-footer-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--bb-primary) 7%, transparent) 0, transparent 26rem), linear-gradient(180deg, color-mix(in srgb, var(--bb-white) 3%, transparent) 0%, transparent 18%);
  opacity: 1;
}

.bb-web-footer-main {
  position: relative;
  z-index: 1;
  padding: 3rem 0 2.25rem;
}

.bb-web-footer-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding: 0 0 2.625rem;
  margin-bottom: 2.875rem;
  border-bottom: var(--bb-border-width) solid var(--bb-footer-border-color);
}

.bb-web-footer-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wider, 0.08em);
  text-transform: uppercase;
}

.bb-web-footer-topline-title {
  max-width: 52rem;
  margin: 0;
  color: var(--bb-footer-heading-color);
  font-size: clamp(var(--bb-fs-2xl), 2.4vw, var(--bb-h2));
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.03em);
}

.bb-web-footer-topline-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-web-footer-cta {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  padding: 0 1.125rem;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border: var(--bb-border-width) solid var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--bb-footer-shadow-accent);
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-footer-cta:hover,
.bb-web-footer-cta:focus {
  color: var(--bb-primary-inverse);
  background-color: color-mix(in srgb, var(--bb-primary) 92%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-primary) 92%, var(--bb-white));
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 1rem 2.125rem color-mix(in srgb, var(--bb-primary) 20%, transparent);
  outline: 0;
}

.bb-web-footer-cta.is-secondary {
  color: var(--bb-footer-heading-color);
  background-color: var(--bb-footer-surface);
  border-color: var(--bb-footer-border-color-strong);
  box-shadow: none;
}

.bb-web-footer-cta.is-secondary:hover,
.bb-web-footer-cta.is-secondary:focus {
  color: var(--bb-footer-heading-color);
  background-color: var(--bb-footer-surface-hover);
  border-color: var(--bb-footer-border-color-strong);
  box-shadow: none;
}

.bb-web-footer-cta .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Main Grid
===================================== */
.bb-web-footer-grid {
  display: grid;
  grid-template-columns: minmax(18.75rem, 33%) minmax(0, 1fr);
  gap: 3.625rem;
  align-items: start;
}

.bb-web-footer-brand-col {
  min-width: 0;
}

.bb-web-footer-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.bb-web-footer-logo {
  width: auto;
  height: 2.75rem;
  display: block;
}

.bb-web-footer-logo.is-dark {
  display: none;
}

.bb-web-footer-tagline {
  max-width: 26.25rem;
  margin: 0 0 0.75rem;
  color: var(--bb-footer-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-web-footer-description {
  max-width: 26.875rem;
  margin: 0;
  color: var(--bb-footer-muted-color);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-content);
}

.bb-web-footer-trust {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

.bb-web-footer-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--bb-footer-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-web-footer-trust-item .material-symbols-outlined {
  width: 2.8125rem;
  height: 2.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-footer-accent-surface);
  border: var(--bb-border-width) solid var(--bb-footer-accent-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Social
===================================== */
.bb-web-footer-social {
  margin-top: 2rem;
}

.bb-web-footer-social-label {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--bb-footer-subtle-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-web-footer-social-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-web-footer-social-item {
  display: inline-flex;
  align-items: center;
}

.bb-web-footer-social-material {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-footer-social-link,
.bb-web-footer-social a {
  width: 2.625rem;
  height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-footer-link-color);
  background-color: var(--bb-footer-surface);
  border: var(--bb-border-width) solid var(--bb-footer-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-footer-social-link:hover,
.bb-web-footer-social-link:focus,
.bb-web-footer-social a:hover,
.bb-web-footer-social a:focus {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
  transform: translateY(-1px);
  box-shadow: var(--bb-footer-shadow-accent);
  text-decoration: none;
  outline: 0;
}

/* =====================================
   Link Grid
===================================== */
.bb-web-footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(9.375rem, 1fr));
  gap: 2.125rem;
}

.bb-web-footer-link-col {
  min-width: 0;
}

.bb-web-footer-title {
  margin: 0 0 1.0625rem;
  color: var(--bb-footer-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-wider, 0.08em);
  text-transform: uppercase;
}

.bb-web-footer-title.is-spaced {
  margin-top: 2.125rem;
}

.bb-web-footer-list {
  display: grid;
  gap: 0.6875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-web-footer-list li {
  min-width: 0;
}

.bb-web-footer-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  max-width: 100%;
  color: var(--bb-footer-link-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-ui);
  line-height: var(--bb-line-height-base);
  text-decoration: none;
  transition: color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-footer-list a::after {
  content: "arrow_forward";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  font-family: "Material Symbols Outlined";
  font-size: var(--bb-icon-size-sm);
  font-weight: var(--bb-fw-normal);
  line-height: 1;
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-footer-list a:hover,
.bb-web-footer-list a:focus {
  color: var(--bb-footer-link-hover-color);
  text-decoration: none;
  transform: translateX(0.125rem);
  outline: 0;
}

.bb-web-footer-list a:hover::after,
.bb-web-footer-list a:focus::after {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================
   Utility Buttons
===================================== */
.bb-web-footer-utility,
.bb-web-footer-settings {
  display: grid;
  gap: 0.875rem;
  margin-top: 1.875rem;
}

.bb-web-footer-cookie-button {
  min-height: 3rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0 1rem;
  color: var(--bb-footer-heading-color);
  background-color: var(--bb-footer-surface);
  border: var(--bb-border-width) solid var(--bb-footer-border-color);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-action);
  line-height: 1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-footer-cookie-button:hover,
.bb-web-footer-cookie-button:focus {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
  transform: translateY(-1px);
  box-shadow: var(--bb-footer-shadow-accent);
  text-decoration: none;
  outline: 0;
}

.bb-web-footer-cookie-button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-web-footer-cookie-button .material-symbols-outlined {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-web-footer-cookie-button:hover .material-symbols-outlined,
.bb-web-footer-cookie-button:focus .material-symbols-outlined {
  transform: translateX(0.125rem);
}

/* =====================================
   Language Dropup
===================================== */
.bb-web-footer-language {
  position: relative;
}

.bb-web-footer-language-trigger {
  min-height: 2.875rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0 0.875rem;
  color: var(--bb-footer-heading-color);
  background-color: var(--bb-footer-surface);
  border: var(--bb-border-width) solid var(--bb-footer-border-color);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-footer-language-trigger:hover,
.bb-web-footer-language-trigger:focus,
.bb-web-footer-language-trigger[aria-expanded=true] {
  color: var(--bb-footer-heading-color);
  background-color: var(--bb-footer-surface-hover);
  border-color: var(--bb-footer-border-color-strong);
  text-decoration: none;
  outline: 0;
}

.bb-web-footer-language-trigger::after {
  display: none !important;
}

.bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-footer-language-arrow {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--bb-transition-fast);
}

.bb-web-footer-language-trigger[aria-expanded=true] .bb-web-footer-language-arrow {
  transform: rotate(180deg);
}

.bb-web-footer-language-menu {
  min-width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem !important;
  background-color: var(--bb-footer-bg-soft);
  border: var(--bb-border-width) solid var(--bb-footer-border-color-strong);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-lg);
}

.bb-web-footer-language-menu .dropdown-item {
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  padding: 0.5625rem 0.625rem;
  color: var(--bb-footer-link-color);
  background-color: transparent;
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-web-footer-language-menu .dropdown-item:hover,
.bb-web-footer-language-menu .dropdown-item:focus,
.bb-web-footer-language-menu .dropdown-item.active {
  color: var(--bb-footer-heading-color);
  background-color: var(--bb-footer-surface-hover);
  text-decoration: none;
}

/* =====================================
   Midline
===================================== */
.bb-web-footer-midline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3.375rem;
  padding-top: 1.875rem;
  border-top: var(--bb-border-width) solid var(--bb-footer-border-color);
}

.bb-web-footer-company {
  display: grid;
  gap: 0.3125rem;
}

.bb-web-footer-company strong {
  color: var(--bb-footer-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-extrabold);
}

.bb-web-footer-company span {
  color: var(--bb-footer-subtle-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-web-footer-payment {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bb-web-footer-payment-item {
  width: 4.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--bb-white) 94%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-web-footer-payment-item img {
  max-width: 3.875rem;
  max-height: 2rem;
  display: block;
  object-fit: contain;
}

/* =====================================
   Bottom
===================================== */
.bb-web-footer-bottom {
  position: relative;
  z-index: 1;
  background-color: var(--bb-footer-bottom-bg);
  border-top: var(--bb-border-width) solid var(--bb-footer-border-color);
}

.bb-web-footer-bottom-inner {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.bb-web-footer-copy,
.bb-web-footer-bottom-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--bb-footer-subtle-color);
  font-size: var(--bb-fs-sm);
}

.bb-web-footer-copy strong {
  color: var(--bb-footer-color);
  font-weight: var(--bb-fw-bold);
}

.bb-web-footer-copy a,
.bb-web-footer-bottom-links a {
  color: var(--bb-footer-link-color);
  text-decoration: none;
  transition: color var(--bb-transition-fast);
}

.bb-web-footer-copy a:hover,
.bb-web-footer-copy a:focus,
.bb-web-footer-bottom-links a:hover,
.bb-web-footer-bottom-links a:focus {
  color: var(--bb-footer-link-hover-color);
  text-decoration: none;
  outline: 0;
}

.bb-web-footer-bottom-links {
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}

.bb-web-footer-bottom-links a {
  position: relative;
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  white-space: nowrap;
}

.bb-web-footer-bottom-links a + a {
  margin-left: 0.625rem;
  padding-left: 0.75rem;
}

.bb-web-footer-bottom-links a + a::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  color: var(--bb-footer-subtle-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  transform: translateY(-50%);
}

/* =====================================
   Go Top
===================================== */
.bb-web-go-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1040;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-lg);
  text-decoration: none;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-go-top:hover,
.bb-web-go-top:focus {
  color: var(--bb-primary-inverse);
  transform: translateY(-0.125rem);
  box-shadow: var(--bb-shadow-lg);
  text-decoration: none;
  outline: 0;
}

.bb-web-go-top .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

/* =====================================
   Preferences Panel
===================================== */
.bb-web-preferences-panel {
  --bs-offcanvas-width: 26rem;
  color: var(--bb-body-color);
  background-color: var(--bb-surface-elevated);
  border-left: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-web-preferences-panel-head {
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-web-preferences-panel-kicker {
  display: inline-flex;
  margin-bottom: 0.375rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: var(--bb-letter-spacing-wide, 0.06em);
  text-transform: uppercase;
}

.bb-web-preferences-panel-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-preferences-panel-body {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.25rem;
}

.bb-web-preferences-group {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-surface-soft);
}

.bb-web-preferences-group-head {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
}

.bb-web-preferences-group-head > .material-symbols-outlined {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-primary-clarity);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-icon-size-md);
}

.bb-web-preferences-group-head strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-web-preferences-group-head span {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-web-theme-choice-list {
  display: grid;
  gap: 0.75rem;
}

.bb-web-theme-choice {
  width: 100%;
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr) 1.25rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  color: var(--bb-body-color);
  background-color: var(--bb-surface-elevated);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-web-theme-choice:hover {
  color: var(--bb-heading-color);
  border-color: var(--bb-border-color-strong);
  box-shadow: var(--bb-shadow-xs);
}

.bb-web-theme-choice:active {
  transform: translateY(0.0625rem);
}

.bb-web-theme-choice .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-theme-choice.is-active {
  border-color: color-mix(in srgb, var(--bb-primary) 60%, var(--bb-border-color));
  box-shadow: 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-primary) 24%, transparent) inset, var(--bb-shadow-xs);
}

.bb-web-preferences-note {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-web-preferences-note .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-web-footer-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .bb-web-footer-brand-col {
    max-width: 42.5rem;
  }
  .bb-web-footer-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-web-footer-topline {
    grid-template-columns: 1fr;
  }
  .bb-web-footer-topline-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-web-footer-main {
    padding: 3.375rem 0 1.75rem;
  }
  .bb-web-footer-topline {
    margin-bottom: 2.125rem;
    padding-bottom: 1.875rem;
  }
  .bb-web-footer-topline-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .bb-web-footer-cta {
    width: 100%;
  }
  .bb-web-footer-links-grid {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
  .bb-web-footer-midline,
  .bb-web-footer-bottom-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-web-footer-payment {
    justify-content: flex-start;
  }
  .bb-web-go-top {
    right: 1rem;
    bottom: 1rem;
  }
}
/* =====================================
   Web Bulbulustur - Language Dropdown
   Scope: Header language dropdown
   Layer: web/components/_web-language-dropdown.scss

   Purpose:
   - Header language trigger and Bootstrap dropdown menu.
   - Same positioning rhythm as account dropdown.
   - Popper / Bootstrap calculates position.
   - No hard-coded color.
   - No fallback color.
===================================== */
/* =====================================
   Light Mode Local Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-web-language-trigger-height: 2.5rem;
  --bb-web-language-trigger-padding-x: 0.75rem;
  --bb-web-language-trigger-gap: 0.5rem;
  --bb-web-language-trigger-color: var(--bb-heading-color);
  --bb-web-language-trigger-bg: transparent;
  --bb-web-language-trigger-bg-hover: color-mix(in srgb, var(--bb-body-bg) 22%, transparent);
  --bb-web-language-trigger-border: transparent;
  --bb-web-language-trigger-border-hover: color-mix(in srgb, var(--bb-heading-color) 14%, transparent);
  --bb-web-language-trigger-shadow-hover:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black) 9%, transparent);
  --bb-web-language-trigger-shadow-active:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-web-language-icon-size: 1.25rem;
  --bb-web-language-arrow-size: 1.125rem;
  --bb-web-language-menu-width: 15rem;
  --bb-web-language-menu-offset-y: 0;
  --bb-web-language-menu-bg: var(--bb-body-bg);
  --bb-web-language-menu-border: var(--bb-border-color);
  --bb-web-language-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 14%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 8%, transparent);
  --bb-web-language-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 18%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-web-language-item-height: 2.75rem;
  --bb-web-language-item-color: var(--bb-heading-color);
  --bb-web-language-item-bg: transparent;
  --bb-web-language-item-bg-hover: var(--bb-secondary-bg);
  --bb-web-language-item-icon-bg: var(--bb-tertiary-bg);
  --bb-web-language-item-icon-border: var(--bb-border-color);
}

/* =====================================
   Navy Mode Local Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-web-language-trigger-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 72%, transparent);
  --bb-web-language-trigger-border-hover: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-web-language-trigger-shadow-hover:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-web-language-trigger-shadow-active:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 26%, transparent);
  --bb-web-language-menu-bg: var(--bb-surface-elevated);
  --bb-web-language-menu-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-web-language-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 32%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-web-language-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 38%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-language-item-bg-hover: var(--bb-surface-soft);
  --bb-web-language-item-icon-bg: var(--bb-surface-soft);
  --bb-web-language-item-icon-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
}

/* =====================================
   Dark Mode Local Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-web-language-trigger-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 68%, transparent);
  --bb-web-language-trigger-border-hover: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-web-language-trigger-shadow-hover:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-language-trigger-shadow-active:
      0 0.625rem 1.375rem color-mix(in srgb, var(--bb-black) 30%, transparent);
  --bb-web-language-menu-bg: var(--bb-surface-elevated);
  --bb-web-language-menu-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-web-language-menu-shadow:
      0 1.125rem 2.875rem color-mix(in srgb, var(--bb-black) 36%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-web-language-menu-shadow-active:
      0 1.375rem 3.25rem color-mix(in srgb, var(--bb-black) 42%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black) 28%, transparent);
  --bb-web-language-item-bg-hover: var(--bb-surface-soft);
  --bb-web-language-item-icon-bg: var(--bb-surface-soft);
  --bb-web-language-item-icon-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
}

/* =====================================
   Wrapper
===================================== */
.bb-web-language-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* =====================================
   Trigger
===================================== */
.bb-web-language-trigger {
  min-height: var(--bb-web-language-trigger-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-web-language-trigger-gap);
  padding: 0 var(--bb-web-language-trigger-padding-x);
  color: var(--bb-web-language-trigger-color);
  background-color: var(--bb-web-language-trigger-bg);
  border: var(--bb-border-width) solid var(--bb-web-language-trigger-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-web-language-trigger:hover,
.bb-web-language-trigger:focus {
  color: var(--bb-web-language-trigger-color);
  background-color: var(--bb-web-language-trigger-bg-hover);
  border-color: var(--bb-web-language-trigger-border-hover);
  box-shadow: var(--bb-web-language-trigger-shadow-hover);
  text-decoration: none;
  outline: 0;
}

.bb-web-language-trigger[aria-expanded=true] {
  color: var(--bb-web-language-trigger-color);
  background-color: var(--bb-web-language-trigger-bg-hover);
  border-color: var(--bb-web-language-trigger-border-hover);
  box-shadow: var(--bb-web-language-trigger-shadow-active);
  text-decoration: none;
  outline: 0;
}

.bb-web-language-trigger::after {
  display: none !important;
}

/* =====================================
   Trigger Icon
===================================== */
.bb-web-language-trigger-icon {
  width: var(--bb-web-language-icon-size);
  height: var(--bb-web-language-icon-size);
  flex: 0 0 var(--bb-web-language-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
}

.bb-web-language-trigger-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-language-current {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

/* =====================================
   Trigger Arrow
===================================== */
.bb-web-language-arrow {
  width: var(--bb-web-language-arrow-size);
  height: var(--bb-web-language-arrow-size);
  flex: 0 0 var(--bb-web-language-arrow-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-web-language-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-web-language-trigger[aria-expanded=true] .bb-web-language-arrow {
  transform: rotate(180deg);
}

/* =====================================
   Menu
===================================== */
.bb-web-language-menu {
  min-width: var(--bb-web-language-menu-width);
  max-width: var(--bb-web-language-menu-width);
  padding: 0.5rem;
  margin-top: var(--bb-web-language-menu-offset-y) !important;
  overflow: hidden;
  background-color: var(--bb-web-language-menu-bg);
  border: var(--bb-border-width) solid var(--bb-web-language-menu-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-web-language-menu-shadow);
}

.bb-web-language-menu.show {
  box-shadow: var(--bb-web-language-menu-shadow-active);
}

/* =====================================
   Items
===================================== */
.bb-web-language-item {
  min-height: var(--bb-web-language-item-height);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  color: var(--bb-web-language-item-color);
  background-color: var(--bb-web-language-item-bg);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-heading);
  text-decoration: none;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-web-language-item:hover,
.bb-web-language-item:focus {
  color: var(--bb-web-language-item-color);
  background-color: var(--bb-web-language-item-bg-hover);
  text-decoration: none;
  outline: 0;
}

.bb-web-language-item-flag-wrap {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bb-web-language-item-icon-bg);
  border: var(--bb-border-width) solid var(--bb-web-language-item-icon-border);
  border-radius: var(--bb-radius-pill);
}

.bb-web-language-flag {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  object-fit: contain;
}

.bb-web-language-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================
   Mobile
===================================== */
@media (max-width: 575.98px) {
  .bb-web-language-dropdown {
    --bb-web-language-trigger-height: 2.25rem;
    --bb-web-language-trigger-padding-x: 0.625rem;
    --bb-web-language-menu-width: 13.75rem;
  }
  .bb-web-language-current {
    display: none;
  }
  .bb-web-language-trigger {
    width: var(--bb-web-language-trigger-height);
    padding: 0;
  }
}
/* =====================================
   Ask Seller Question
   FormLight page-specific
   Uses Main CSS: bb-chip, buttons, form-control
===================================== */
.bb-ask-seller-question-page {
  width: 100%;
}

.bb-ask-seller-question-head {
  max-width: 45rem;
  margin-bottom: 1.5rem;
}

.bb-ask-seller-question-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-ask-seller-question-text {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Layout */
.bb-ask-seller-question-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.45fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Product card */
.bb-ask-seller-question-product {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--bb-primary) 13%, transparent), transparent 34%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-ask-seller-question-product-media {
  min-height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-ask-seller-question-product-media img {
  display: block;
  width: 100%;
  max-height: 17rem;
  object-fit: contain;
}

.bb-ask-seller-question-product-body {
  padding: 1rem 1.125rem;
}

.bb-ask-seller-question-product-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-ask-seller-question-product-name {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

/* Form card */
.bb-ask-seller-question-form-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-ask-seller-question-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bb-ask-seller-question-form-head {
  margin-bottom: 1rem;
}

.bb-ask-seller-question-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-ask-seller-question-form-head p {
  max-width: 42rem;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-ask-seller-question-textarea {
  min-height: 11rem;
  resize: vertical;
}

.bb-ask-seller-question-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-ask-seller-question-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-ask-seller-question-actions {
  margin-top: 1rem;
}

.bb-ask-seller-question-actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-ask-seller-question-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Success */
.bb-ask-seller-question-success {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.bb-ask-seller-question-success-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.875rem;
  color: var(--bb-success);
  background-color: var(--bb-success-light);
  border-radius: var(--bb-radius-lg);
}

.bb-ask-seller-question-success-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-ask-seller-question-success h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-ask-seller-question-success p {
  max-width: 34rem;
  margin: 0.5rem auto 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* FormLight width override for this page */
.bb-layout-light-page:has(.bb-ask-seller-question-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 74rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-ask-seller-question-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-ask-seller-question-layout {
    grid-template-columns: 1fr;
  }
  .bb-ask-seller-question-product {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
  }
  .bb-ask-seller-question-product-media {
    min-height: 12rem;
    border-bottom: 0;
    border-right: var(--bb-border-width) solid var(--bb-border-color);
  }
  .bb-ask-seller-question-product-media img {
    max-height: 10rem;
  }
}
@media (max-width: 575.98px) {
  .bb-ask-seller-question-layout {
    gap: 1rem;
  }
  .bb-ask-seller-question-product {
    display: flex;
  }
  .bb-ask-seller-question-product-media {
    min-height: 13rem;
    border-right: 0;
    border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  }
  .bb-ask-seller-question-form-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-ask-seller-question-actions .btn {
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Product Complaint / Product Report
   FormLight page-specific
   Uses Main CSS: bb-chip, buttons, form-control, form-select
===================================== */
.bb-product-complaint-page {
  width: 100%;
}

.bb-product-complaint-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.bb-product-complaint-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-product-complaint-text {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-product-complaint-product-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-product-complaint-product-chip .material-symbols-outlined {
  color: var(--bb-danger);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-product-complaint-product-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Layout */
.bb-product-complaint-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Info card */
.bb-product-complaint-info-card {
  position: relative;
  overflow: hidden;
  padding: 1.375rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-danger) 34%, transparent), transparent 32%), radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 88%, var(--bb-danger)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-product-complaint-info-card::after {
  content: "";
  position: absolute;
  right: -3.75rem;
  bottom: -4.375rem;
  width: 10.625rem;
  height: 10.625rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-product-complaint-info-card > * {
  position: relative;
  z-index: 2;
}

.bb-product-complaint-info-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-product-complaint-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-product-complaint-info-card h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-product-complaint-info-card p {
  margin: 0.625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-product-complaint-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-product-complaint-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: color-mix(in srgb, var(--bb-white) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-product-complaint-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-product-complaint-support-link {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0 1rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-product-complaint-support-link:hover {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
}

.bb-product-complaint-support-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Form card */
.bb-product-complaint-form-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-product-complaint-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bb-product-complaint-form-head {
  margin-bottom: 1rem;
}

.bb-product-complaint-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-product-complaint-form-head p {
  max-width: 42rem;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-product-complaint-textarea {
  min-height: 10.5rem;
  resize: vertical;
}

.bb-product-complaint-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-product-complaint-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-product-complaint-actions {
  margin-top: 1rem;
}

.bb-product-complaint-actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-product-complaint-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Success */
.bb-product-complaint-success {
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.bb-product-complaint-success-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.875rem;
  color: var(--bb-success);
  background-color: var(--bb-success-light);
  border-radius: var(--bb-radius-lg);
}

.bb-product-complaint-success-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-product-complaint-success h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-product-complaint-success p {
  max-width: 34rem;
  margin: 0.5rem auto 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* FormLight width override for this page */
.bb-layout-light-page:has(.bb-product-complaint-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 70rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-product-complaint-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-product-complaint-layout {
    grid-template-columns: 1fr;
  }
  .bb-product-complaint-info-card {
    min-height: auto;
  }
}
@media (max-width: 575.98px) {
  .bb-product-complaint-layout {
    gap: 1rem;
  }
  .bb-product-complaint-form-card,
  .bb-product-complaint-info-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-product-complaint-support-link,
  .bb-product-complaint-actions .btn {
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Bulbulustur Product Card Family
   Shared B2B / B2C / Deal / Sponsored
   v1.15 Premium polish
   Scope: .bb-product-card
===================================== */
/* =====================================
   Product Card Mode Tokens
===================================== */
.bb-product-card {
  --bb-product-card-radius: var(--bb-radius-xl);
  --bb-product-card-bg: var(--bb-body-bg);
  --bb-product-card-color: var(--bb-body-color);
  --bb-product-card-title-color: var(--bb-heading-color);
  --bb-product-card-text-color: color-mix(in srgb, var(--bb-secondary-color) 88%, var(--bb-body-color));
  --bb-product-card-muted-color: color-mix(in srgb, var(--bb-secondary-color) 78%, var(--bb-body-color));
  --bb-product-card-border-color: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-product-card-border-color-hover: color-mix(
      in srgb,
      var(--bb-product-card-accent) 18%,
      var(--bb-product-card-border-color)
  );
  --bb-product-card-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--bb-black, #000000) 4.5%, transparent);
  --bb-product-card-shadow-hover: 0 0.85rem 1.75rem color-mix(in srgb, var(--bb-black, #000000) 7.5%, transparent);
  --bb-product-card-media-padding: 0.95rem;
  --bb-product-card-body-padding: 1rem;
  --bb-product-card-image-height: 13.9rem;
  --bb-product-card-image-bg: var(--bb-white);
  --bb-product-card-image-frame-bg:
      radial-gradient(
          circle at 50% 45%,
          color-mix(in srgb, var(--bb-product-card-image-bg) 92%, var(--bb-border-color)) 0%,
          var(--bb-product-card-image-bg) 72%
      );
  --bb-product-card-accent: var(--bb-page-accent, var(--bb-primary));
  --bb-product-card-accent-soft: var(--bb-page-accent-soft, var(--bb-primary-light));
  --bb-product-card-accent-strong: var(--bb-page-accent-strong, var(--bb-primary-active));
  --bb-product-card-accent-inverse: var(--bb-page-accent-inverse, var(--bb-primary-inverse));
  --bb-product-card-price-color: var(--bb-heading-color);
  --bb-product-card-sale-color: var(--bb-color-red-600);
  --bb-product-card-sale-color-hover: var(--bb-color-red-700);
  --bb-product-card-old-price-color: color-mix(in srgb, var(--bb-secondary-color) 72%, transparent);
  --bb-product-card-action-bg: var(--bb-primary);
  --bb-product-card-action-bg-hover: var(--bb-primary-active);
  --bb-product-card-action-color: var(--bb-primary-inverse);
  --bb-product-card-action-border-color: var(--bb-primary);
  --bb-product-card-tool-size: 2.35rem;
  --bb-product-card-tool-radius: var(--bb-radius-lg);
  --bb-product-card-tool-bg: color-mix(in srgb, var(--bb-white) 88%, transparent);
  --bb-product-card-tool-bg-hover: var(--bb-white);
  --bb-product-card-tool-border-color: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-product-card-tool-shadow: 0 0.35rem 0.95rem color-mix(in srgb, var(--bb-black, #000000) 5.5%, transparent);
  --bb-product-card-tool-shadow-hover: 0 0.55rem 1.2rem color-mix(in srgb, var(--bb-black, #000000) 8.5%, transparent);
  --bb-product-card-quick-view-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, transparent);
  --bb-product-card-quick-view-bg-hover: var(--bb-surface-elevated);
  --bb-product-card-quick-view-border-color: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-product-card-quick-view-shadow: 0 0.5rem 1.15rem color-mix(in srgb, var(--bb-black, #000000) 7%, transparent);
  --bb-product-card-title-min-height: 2.75rem;
  --bb-product-card-price-min-height: 3.55rem;
  --bb-product-card-meta-min-height: 1.95rem;
  --bb-product-card-action-height: 2.85rem;
  --bb-product-card-action-font-size: var(--bb-fs-base);
  --bb-product-card-b2b-accent: var(--bb-color-ink-700);
  --bb-product-card-b2b-accent-soft: var(--bb-color-navy-50);
  --bb-product-card-b2b-accent-strong: var(--bb-color-ink-900);
  --bb-product-card-b2b-accent-inverse: var(--bb-white);
  --bb-product-card-deal-accent: var(--bb-color-red-600);
  --bb-product-card-deal-accent-soft: color-mix(in srgb, var(--bb-product-card-deal-accent) 12%, var(--bb-body-bg));
  --bb-product-card-deal-accent-strong: var(--bb-color-red-700);
  --bb-product-card-sponsored-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 4%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 44%,
          var(--bb-body-bg) 100%
      );
}

html[data-bs-theme=navy] .bb-product-card {
  --bb-product-card-bg: var(--bb-surface-elevated);
  --bb-product-card-image-bg: var(--bb-surface-elevated);
  --bb-product-card-image-frame-bg:
      radial-gradient(
          circle at 50% 45%,
          color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-border-color)) 0%,
          var(--bb-surface-elevated) 74%
      );
  --bb-product-card-border-color: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-product-card-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.16);
  --bb-product-card-shadow-hover: 0 0.85rem 1.75rem rgba(0, 0, 0, 0.24);
  --bb-product-card-old-price-color: var(--bb-tertiary-color);
  --bb-product-card-tool-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, transparent);
  --bb-product-card-tool-bg-hover: var(--bb-surface-elevated);
  --bb-product-card-tool-border-color: var(--bb-border-color);
  --bb-product-card-tool-shadow: 0 0.35rem 0.95rem rgba(0, 0, 0, 0.18);
  --bb-product-card-tool-shadow-hover: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.24);
  --bb-product-card-quick-view-bg: var(--bb-product-card-tool-bg);
  --bb-product-card-quick-view-bg-hover: var(--bb-product-card-tool-bg-hover);
  --bb-product-card-quick-view-border-color: var(--bb-product-card-tool-border-color);
  --bb-product-card-quick-view-shadow: 0 0.5rem 1.15rem rgba(0, 0, 0, 0.2);
  --bb-product-card-b2b-accent: color-mix(in srgb, var(--bb-color-ink-50) 74%, var(--bb-emphasis-color));
  --bb-product-card-b2b-accent-soft: color-mix(in srgb, var(--bb-color-ink-50) 18%, var(--bb-body-bg));
  --bb-product-card-b2b-accent-strong: color-mix(in srgb, var(--bb-white) 12%, var(--bb-color-ink-50));
  --bb-product-card-b2b-accent-inverse: var(--bb-white);
  --bb-product-card-deal-accent-soft: color-mix(in srgb, var(--bb-color-red-600) 16%, var(--bb-body-bg));
  --bb-product-card-sponsored-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 6%, var(--bb-body-bg)) 0%,
          var(--bb-product-card-bg) 44%,
          var(--bb-product-card-bg) 100%
      );
}

html[data-bs-theme=dark] .bb-product-card {
  --bb-product-card-bg: var(--bb-surface-bg, var(--bb-surface-elevated));
  --bb-product-card-image-bg: var(--bb-surface-elevated);
  --bb-product-card-image-frame-bg:
      radial-gradient(
          circle at 50% 45%,
          color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-border-color)) 0%,
          var(--bb-surface-elevated) 74%
      );
  --bb-product-card-border-color: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-product-card-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
  --bb-product-card-shadow-hover: 0 0.85rem 1.75rem rgba(0, 0, 0, 0.26);
  --bb-product-card-old-price-color: var(--bb-tertiary-color);
  --bb-product-card-tool-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, transparent);
  --bb-product-card-tool-bg-hover: var(--bb-surface-elevated);
  --bb-product-card-tool-border-color: var(--bb-border-color);
  --bb-product-card-tool-shadow: 0 0.35rem 0.95rem rgba(0, 0, 0, 0.2);
  --bb-product-card-tool-shadow-hover: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.26);
  --bb-product-card-quick-view-bg: var(--bb-product-card-tool-bg);
  --bb-product-card-quick-view-bg-hover: var(--bb-product-card-tool-bg-hover);
  --bb-product-card-quick-view-border-color: var(--bb-product-card-tool-border-color);
  --bb-product-card-quick-view-shadow: 0 0.5rem 1.15rem rgba(0, 0, 0, 0.22);
  --bb-product-card-b2b-accent: color-mix(in srgb, var(--bb-color-ink-50) 70%, var(--bb-emphasis-color));
  --bb-product-card-b2b-accent-soft: color-mix(in srgb, var(--bb-color-ink-50) 20%, var(--bb-body-bg));
  --bb-product-card-b2b-accent-strong: color-mix(in srgb, var(--bb-white) 14%, var(--bb-color-ink-50));
  --bb-product-card-b2b-accent-inverse: var(--bb-white);
  --bb-product-card-deal-accent-soft: color-mix(in srgb, var(--bb-color-red-600) 18%, var(--bb-body-bg));
  --bb-product-card-sponsored-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg)) 0%,
          var(--bb-product-card-bg) 44%,
          var(--bb-product-card-bg) 100%
      );
}

/* =====================================
   Product Card Badge Mode Tokens
===================================== */
html[data-bs-theme=navy] .bb-product-card-badge-interest,
html[data-bs-theme=navy] .bb-product-card-badge-success,
html[data-bs-theme=dark] .bb-product-card-badge-interest,
html[data-bs-theme=dark] .bb-product-card-badge-success {
  --bb-product-card-badge-color: var(--bb-color-green-300);
  --bb-product-card-badge-bg: rgba(20, 131, 91, 0.16);
  --bb-product-card-badge-border-color: rgba(126, 224, 189, 0.18);
}

html[data-bs-theme=navy] .bb-product-card-badge-moq,
html[data-bs-theme=navy] .bb-product-card-badge-info,
html[data-bs-theme=dark] .bb-product-card-badge-moq,
html[data-bs-theme=dark] .bb-product-card-badge-info {
  --bb-product-card-badge-color: var(--bb-color-turquoise-300);
  --bb-product-card-badge-bg: rgba(23, 125, 145, 0.16);
  --bb-product-card-badge-border-color: rgba(123, 217, 234, 0.18);
}

html[data-bs-theme=navy] .bb-product-card-badge-wholesale,
html[data-bs-theme=navy] .bb-product-card-badge-sponsored,
html[data-bs-theme=dark] .bb-product-card-badge-wholesale,
html[data-bs-theme=dark] .bb-product-card-badge-sponsored {
  --bb-product-card-badge-color: var(--bb-body-color);
  --bb-product-card-badge-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, transparent);
  --bb-product-card-badge-border-color: var(--bb-border-color);
}

html[data-bs-theme=navy] .bb-product-card-badge-verified,
html[data-bs-theme=dark] .bb-product-card-badge-verified {
  --bb-product-card-badge-color: var(--bb-color-turquoise-300);
  --bb-product-card-badge-bg: rgba(20, 122, 102, 0.16);
  --bb-product-card-badge-border-color: rgba(126, 224, 201, 0.18);
}

/* =====================================
   Base
===================================== */
.bb-product-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--bb-product-card-color);
  background-color: var(--bb-product-card-bg);
  border: var(--bb-border-width) solid var(--bb-product-card-border-color);
  border-radius: var(--bb-product-card-radius);
  box-shadow: var(--bb-product-card-shadow);
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--bb-product-card-border-color-hover);
  box-shadow: var(--bb-product-card-shadow-hover);
}

.bb-product-card:focus-within {
  border-color: var(--bb-product-card-border-color-hover);
  box-shadow: var(--bb-product-card-shadow-hover);
}

/* =====================================
   Media
===================================== */
.bb-product-card-media {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: calc(var(--bb-product-card-image-height) + var(--bb-product-card-media-padding));
  padding: var(--bb-product-card-media-padding) var(--bb-product-card-media-padding) 0;
  overflow: hidden;
}

.bb-product-card-image-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.bb-product-card-image-frame {
  position: relative;
  width: 100%;
  height: var(--bb-product-card-image-height);
  max-height: var(--bb-product-card-image-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bb-product-card-image-frame-bg);
  border-radius: calc(var(--bb-product-card-radius) - 0.38rem);
}

.bb-product-card-image-frame img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
  transition: transform var(--bb-transition-normal), filter var(--bb-transition-normal);
}

.bb-product-card:hover .bb-product-card-image-frame img {
  transform: scale(1.022);
  filter: saturate(1.025);
}

/* =====================================
   Badges
===================================== */
.bb-product-card-badges,
.bb-product-card-badge-area {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  max-width: calc(100% - 7.75rem);
}

.bb-product-card-badge,
.bb-product-card-chip,
.bb-product-card-pill {
  min-height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.58rem;
  color: var(--bb-product-card-badge-color, var(--bb-product-card-accent-strong));
  background-color: var(--bb-product-card-badge-bg, color-mix(in srgb, var(--bb-product-card-accent) 10%, var(--bb-white)));
  border: var(--bb-border-width) solid var(--bb-product-card-badge-border-color, color-mix(in srgb, var(--bb-product-card-accent) 14%, transparent));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bb-product-card-badge .material-symbols-outlined,
.bb-product-card-chip .material-symbols-outlined,
.bb-product-card-pill .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-product-card-badge-deal,
.bb-product-card-badge-opportunity {
  --bb-product-card-badge-color: var(--bb-white);
  --bb-product-card-badge-bg: var(--bb-color-red-500);
  --bb-product-card-badge-border-color: var(--bb-color-red-500);
}

.bb-product-card-badge-b2b {
  --bb-product-card-badge-color: var(--bb-white);
  --bb-product-card-badge-bg: var(--bb-color-ink-50);
  --bb-product-card-badge-border-color: var(--bb-color-ink-50);
}

.bb-product-card-badge-sponsored {
  --bb-product-card-badge-color: color-mix(in srgb, var(--bb-secondary-color) 88%, var(--bb-heading-color));
  --bb-product-card-badge-bg: color-mix(in srgb, var(--bb-body-bg) 92%, var(--bb-border-color));
  --bb-product-card-badge-border-color: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
}

.bb-product-card-badge-interest,
.bb-product-card-badge-success {
  --bb-product-card-badge-color: var(--bb-color-green-700);
  --bb-product-card-badge-bg: var(--bb-color-green-50);
  --bb-product-card-badge-border-color: var(--bb-color-green-100);
}

.bb-product-card-badge-moq,
.bb-product-card-badge-info {
  --bb-product-card-badge-color: var(--bb-color-turquoise-700);
  --bb-product-card-badge-bg: var(--bb-color-turquoise-50);
  --bb-product-card-badge-border-color: var(--bb-color-turquoise-100);
}

.bb-product-card-badge-wholesale {
  --bb-product-card-badge-color: color-mix(in srgb, var(--bb-heading-color) 82%, var(--bb-secondary-color));
  --bb-product-card-badge-bg: color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-border-color));
  --bb-product-card-badge-border-color: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
}

.bb-product-card-badge-verified {
  --bb-product-card-badge-color: var(--bb-color-turquoise-800);
  --bb-product-card-badge-bg: var(--bb-color-green-50);
  --bb-product-card-badge-border-color: var(--bb-color-green-100);
}

/* =====================================
   Tools
   Favorite / Similar / Remove / Future actions
===================================== */
.bb-product-card-tools {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bb-product-card-tool,
.bb-product-card-favorite,
.bb-product-card-remove {
  width: var(--bb-product-card-tool-size);
  height: var(--bb-product-card-tool-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: color-mix(in srgb, var(--bb-secondary-color) 88%, var(--bb-heading-color));
  background-color: var(--bb-product-card-tool-bg);
  border: var(--bb-border-width) solid var(--bb-product-card-tool-border-color);
  border-radius: var(--bb-product-card-tool-radius);
  box-shadow: var(--bb-product-card-tool-shadow);
  backdrop-filter: blur(0.625rem);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--bb-transition-fast), color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-product-card-tool:hover,
.bb-product-card-favorite:hover,
.bb-product-card-remove:hover {
  transform: translateY(-1px);
  background-color: var(--bb-product-card-tool-bg-hover);
  box-shadow: var(--bb-product-card-tool-shadow-hover);
}

.bb-product-card-favorite:hover {
  color: var(--bb-danger);
  border-color: color-mix(in srgb, var(--bb-danger) 24%, var(--bb-border-color));
}

.bb-product-card-similar-trigger:hover,
.bb-product-card-compare:hover {
  color: var(--bb-product-card-accent-strong);
  border-color: color-mix(in srgb, var(--bb-product-card-accent) 24%, var(--bb-border-color));
}

.bb-product-card-remove:hover {
  color: var(--bb-danger);
  border-color: color-mix(in srgb, var(--bb-danger) 24%, var(--bb-border-color));
}

.bb-product-card-tool .material-symbols-outlined,
.bb-product-card-favorite .material-symbols-outlined,
.bb-product-card-remove .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-product-card-media > .bb-product-card-favorite {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
}

/* =====================================
   Quick View
===================================== */
.bb-product-card-quick-view {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--bb-secondary-color) 88%, var(--bb-heading-color));
  background-color: var(--bb-product-card-quick-view-bg);
  border: var(--bb-border-width) solid var(--bb-product-card-quick-view-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-product-card-quick-view-shadow);
  backdrop-filter: blur(0.625rem);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast), transform var(--bb-transition-fast), color var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-product-card:hover .bb-product-card-quick-view,
.bb-product-card:focus-within .bb-product-card-quick-view {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bb-product-card-quick-view:hover {
  color: var(--bb-heading-color);
  background-color: var(--bb-product-card-quick-view-bg-hover);
  border-color: color-mix(in srgb, var(--bb-product-card-accent) 20%, var(--bb-border-color));
}

.bb-product-card-quick-view .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Body
===================================== */
.bb-product-card-body {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.72rem;
  padding: var(--bb-product-card-body-padding);
}

.bb-product-card-category,
.bb-product-card-kicker {
  display: block;
  min-height: 1.25rem;
  color: var(--bb-product-card-muted-color);
  font-size: var(--bb-fs-sm, 0.875rem);
  font-weight: var(--bb-fw-medium);
  line-height: 1.4;
}

.bb-product-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: var(--bb-product-card-title-min-height);
  margin: 0;
  overflow: hidden;
  color: var(--bb-product-card-title-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.012em);
  text-decoration: none;
  transition: color var(--bb-transition-fast);
}

.bb-product-card-title:hover {
  color: var(--bb-product-card-accent-strong);
}

/* =====================================
   Rating / Trust micro rows
===================================== */
.bb-product-card-rating,
.bb-product-card-trust,
.bb-product-card-supplier {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--bb-product-card-text-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-heading);
}

.bb-product-card-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: var(--bb-color-orange-500);
  line-height: 1;
}

.bb-product-card-rating-stars .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-product-card-rating-count,
.bb-product-card-trust-note,
.bb-product-card-supplier-name {
  color: var(--bb-product-card-muted-color);
}

.bb-product-card-supplier-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================
   Price
===================================== */
.bb-product-card-price-box {
  min-height: var(--bb-product-card-price-min-height);
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.bb-product-card-price-current {
  color: var(--bb-product-card-price-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.026em;
}

.bb-product-card-price-box-discounted .bb-product-card-price-current,
.bb-product-card-deal .bb-product-card-price-current {
  color: var(--bb-product-card-sale-color);
}

.bb-product-card-price-box-discounted .bb-product-card-price-current:hover,
.bb-product-card-deal .bb-product-card-price-current:hover {
  color: var(--bb-product-card-sale-color-hover);
}

.bb-product-card-price-currency,
.bb-product-card-currency {
  font-size: var(--bb-fs-sm);
  font-weight: inherit;
}

.bb-product-card-price-old {
  color: var(--bb-product-card-old-price-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-tight);
  text-decoration: line-through;
}

.bb-product-card-price-note,
.bb-product-card-commercial-note {
  color: var(--bb-product-card-muted-color);
  font-size: var(--bb-fs-sm, 0.875rem);
  line-height: var(--bb-line-height-base);
}

.bb-product-card-commercial-note {
  font-weight: var(--bb-fw-medium);
}

/* =====================================
   Meta
===================================== */
.bb-product-card-meta {
  min-height: var(--bb-product-card-meta-min-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.bb-product-card-meta .bb-product-card-badge,
.bb-product-card-meta .bb-product-card-chip,
.bb-product-card-meta .bb-product-card-pill {
  min-height: 1.55rem;
  padding: 0.24rem 0.52rem;
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Actions
===================================== */
.bb-product-card-actions {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
}

.bb-product-card-primary-action,
.bb-product-card-secondary-action,
.bb-product-card-b2b-action {
  min-height: var(--bb-product-card-action-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-product-card-action-font-size);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  text-align: center;
  text-decoration: none;
  transition: transform var(--bb-transition-fast), color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-product-card-primary-action {
  flex: 1 1 auto;
  color: var(--bb-product-card-action-color);
  background-color: var(--bb-product-card-action-bg);
  border: var(--bb-border-width) solid var(--bb-product-card-action-border-color);
  box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--bb-product-card-action-bg) 22%, transparent);
}

.bb-product-card-primary-action:hover {
  transform: translateY(-1px);
  color: var(--bb-product-card-action-color);
  background-color: var(--bb-product-card-action-bg-hover);
  border-color: var(--bb-product-card-action-bg-hover);
  box-shadow: 0 0.7rem 1.25rem color-mix(in srgb, var(--bb-product-card-action-bg) 28%, transparent);
}

.bb-product-card-primary-action:focus-visible,
.bb-product-card-secondary-action:focus-visible,
.bb-product-card-b2b-action:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--bb-product-card-accent) 22%, transparent), 0 0.55rem 1.2rem color-mix(in srgb, var(--bb-product-card-accent) 22%, transparent);
}

.bb-product-card-secondary-action {
  flex: 0 0 auto;
  min-width: 5.75rem;
  color: var(--bb-product-card-accent-strong);
  background-color: color-mix(in srgb, var(--bb-product-card-accent) 7%, var(--bb-body-bg));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-product-card-accent) 18%, var(--bb-border-color));
}

.bb-product-card-secondary-action:hover {
  transform: translateY(-1px);
  color: var(--bb-product-card-accent-strong);
  background-color: color-mix(in srgb, var(--bb-product-card-accent) 11%, var(--bb-body-bg));
  border-color: color-mix(in srgb, var(--bb-product-card-accent) 28%, var(--bb-border-color));
}

.bb-product-card-actions-dual .bb-product-card-primary-action {
  flex: 1 1 auto;
}

.bb-product-card-actions-dual .bb-product-card-secondary-action {
  flex: 0 0 auto;
}

/* =====================================
   B2C Variant
===================================== */
.bb-product-card-b2c {
  --bb-product-card-accent: var(--bb-primary);
  --bb-product-card-accent-soft: var(--bb-primary-light);
  --bb-product-card-accent-strong: var(--bb-primary-active);
  --bb-product-card-accent-inverse: var(--bb-primary-inverse);
  --bb-product-card-action-bg: var(--bb-primary);
  --bb-product-card-action-bg-hover: var(--bb-primary-active);
  --bb-product-card-action-color: var(--bb-primary-inverse);
  --bb-product-card-action-border-color: var(--bb-primary);
}

/* =====================================
   B2B Variant
===================================== */
.bb-product-card-b2b {
  --bb-product-card-accent: var(--bb-product-card-b2b-accent);
  --bb-product-card-accent-soft: var(--bb-product-card-b2b-accent-soft);
  --bb-product-card-accent-strong: var(--bb-product-card-b2b-accent-strong);
  --bb-product-card-accent-inverse: var(--bb-product-card-b2b-accent-inverse);
  --bb-product-card-action-bg: var(--bb-primary);
  --bb-product-card-action-bg-hover: var(--bb-primary-active);
  --bb-product-card-action-color: var(--bb-primary-inverse);
  --bb-product-card-action-border-color: var(--bb-primary);
  border-color: color-mix(in srgb, var(--bb-product-card-accent) 14%, var(--bb-border-color));
}

.bb-product-card-b2b:hover {
  border-color: color-mix(in srgb, var(--bb-product-card-accent) 24%, var(--bb-border-color));
}

.bb-product-card-b2b .bb-product-card-title:hover {
  color: var(--bb-product-card-accent-strong);
}

.bb-product-card-b2b .bb-product-card-badge-b2b {
  --bb-product-card-badge-color: var(--bb-white);
  --bb-product-card-badge-bg: var(--bb-product-card-accent);
  --bb-product-card-badge-border-color: var(--bb-product-card-accent);
}

.bb-product-card-b2b .bb-product-card-primary-action,
.bb-product-card-b2b-action {
  color: var(--bb-product-card-action-color);
  background-color: var(--bb-product-card-action-bg);
  border: var(--bb-border-width) solid var(--bb-product-card-action-border-color);
}

.bb-product-card-b2b .bb-product-card-primary-action:hover,
.bb-product-card-b2b-action:hover {
  color: var(--bb-product-card-action-color);
  background-color: var(--bb-product-card-action-bg-hover);
  border-color: var(--bb-product-card-action-bg-hover);
}

.bb-product-card-b2b .bb-product-card-price-current {
  color: var(--bb-heading-color);
}

/* =====================================
   B2B Trust Slot
===================================== */
.bb-product-card-b2b-trust {
  min-height: 1.55rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bb-product-card-muted-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-product-card-b2b-trust .material-symbols-outlined {
  color: var(--bb-color-green-700);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-product-card-b2b-trust strong {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

.bb-product-card-b2b .bb-product-card-b2b-chip {
  color: var(--bb-navy-700);
  background-color: color-mix(in srgb, var(--bb-navy-50) 58%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-navy-500) 28%, var(--bb-border-color));
}

/* =====================================
   Deal Variant
===================================== */
.bb-product-card-deal {
  --bb-product-card-accent: var(--bb-product-card-deal-accent);
  --bb-product-card-accent-soft: var(--bb-product-card-deal-accent-soft);
  --bb-product-card-accent-strong: var(--bb-product-card-deal-accent-strong);
  --bb-product-card-sale-color: var(--bb-product-card-deal-accent);
  border-color: color-mix(in srgb, var(--bb-product-card-accent) 18%, var(--bb-border-color));
}

.bb-product-card-deal .bb-product-card-media {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-product-card-accent) 4.5%, transparent) 0%, transparent 72%);
}

/* =====================================
   Sponsored Variant
===================================== */
.bb-product-card-sponsored {
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  background: var(--bb-product-card-sponsored-bg);
}

.bb-product-card-sponsored:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
}

/* =====================================
   Featured Variant
===================================== */
.bb-product-card-featured {
  box-shadow: 0 0.65rem 1.35rem rgba(15, 23, 42, 0.06);
}

.bb-product-card-featured:hover {
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.09);
}

/* =====================================
   Compact Variant
===================================== */
.bb-product-card-compact {
  --bb-product-card-image-height: 11.25rem;
  --bb-product-card-title-min-height: 2.45rem;
  --bb-product-card-price-min-height: 3.1rem;
  --bb-product-card-meta-min-height: 1.7rem;
}

.bb-product-card-compact .bb-product-card-media {
  padding: 0.8rem 0.8rem 0;
}

.bb-product-card-compact .bb-product-card-body {
  gap: 0.55rem;
  padding: 0.875rem;
}

.bb-product-card-compact .bb-product-card-title {
  font-size: var(--bb-fs-sm);
}

.bb-product-card-compact .bb-product-card-price-current {
  font-size: var(--bb-fs-xl);
}

.bb-product-card-compact .bb-product-card-actions {
  padding-top: 0.75rem;
}

/* =====================================
   Horizontal Variant
===================================== */
.bb-product-card-horizontal {
  flex-direction: row;
  align-items: stretch;
}

.bb-product-card-horizontal .bb-product-card-media {
  width: 8.5rem;
  flex: 0 0 8.5rem;
  min-height: auto;
  padding: 0.75rem;
}

.bb-product-card-horizontal .bb-product-card-image-frame {
  height: 100%;
  min-height: 8.5rem;
  max-height: none;
}

.bb-product-card-horizontal .bb-product-card-body {
  padding: 0.875rem;
}

.bb-product-card-horizontal .bb-product-card-quick-view {
  display: none;
}

.bb-product-card-horizontal .bb-product-card-badges,
.bb-product-card-horizontal .bb-product-card-badge-area,
.bb-product-card-horizontal .bb-product-card-tools {
  display: none;
}

.bb-product-card-horizontal .bb-product-card-title,
.bb-product-card-horizontal .bb-product-card-price-box,
.bb-product-card-horizontal .bb-product-card-meta {
  min-height: auto;
}

/* =====================================
   Product Card Grid
===================================== */
.bb-product-card-grid {
  --bb-product-card-grid-gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-product-card-grid-gap);
}

.bb-product-card-grid-compact {
  --bb-product-card-grid-gap: 0.875rem;
}

.bb-product-card-grid-related {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-product-card-grid-dense {
  --bb-product-card-grid-gap: 0.875rem;
}

.bb-product-card-grid-showcase {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* =====================================
   Responsive
===================================== */
@media (min-width: 768px) {
  .bb-product-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-product-card-grid-related {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-product-card-grid-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .bb-product-card-grid {
    --bb-product-card-grid-gap: 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-product-card-grid-related {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bb-product-card-grid-dense {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bb-product-card-grid-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .bb-product-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-product-card {
    --bb-product-card-image-height: 13.25rem;
  }
}
@media (max-width: 575.98px) {
  .bb-product-card {
    --bb-product-card-radius: var(--bb-radius-lg);
    --bb-product-card-media-padding: 0.75rem;
    --bb-product-card-body-padding: 0.875rem;
    --bb-product-card-image-height: 12.35rem;
    --bb-product-card-tool-size: 2.22rem;
    --bb-product-card-action-height: 2.72rem;
    --bb-product-card-action-font-size: var(--bb-fs-sm);
  }
  .bb-product-card:hover {
    transform: none;
  }
  .bb-product-card-media {
    min-height: calc(var(--bb-product-card-image-height) + var(--bb-product-card-media-padding));
  }
  .bb-product-card-body {
    gap: 0.65rem;
  }
  .bb-product-card-badges,
  .bb-product-card-badge-area {
    top: 0.875rem;
    left: 0.875rem;
    max-width: calc(100% - 6.75rem);
  }
  .bb-product-card-badge,
  .bb-product-card-chip,
  .bb-product-card-pill {
    min-height: 1.5rem;
    padding: 0.23rem 0.48rem;
    font-size: var(--bb-fs-2xs);
  }
  .bb-product-card-tools {
    top: 0.875rem;
    right: 0.875rem;
    gap: 0.28rem;
  }
  .bb-product-card-tool,
  .bb-product-card-favorite,
  .bb-product-card-remove {
    border-radius: var(--bb-radius);
    box-shadow: 0 0.3rem 0.75rem rgba(15, 23, 42, 0.055);
  }
  .bb-product-card-tool .material-symbols-outlined,
  .bb-product-card-favorite .material-symbols-outlined,
  .bb-product-card-remove .material-symbols-outlined {
    font-size: var(--bb-icon-size-sm);
  }
  .bb-product-card-category,
  .bb-product-card-kicker {
    font-size: var(--bb-fs-xs);
  }
  .bb-product-card-title {
    min-height: 2.5rem;
    font-size: var(--bb-fs-sm);
    line-height: var(--bb-line-height-base);
  }
  .bb-product-card-price-current {
    font-size: var(--bb-fs-xl);
  }
  .bb-product-card-price-note,
  .bb-product-card-commercial-note {
    font-size: var(--bb-fs-xs);
  }
  .bb-product-card-actions {
    padding-top: 0.85rem;
  }
  .bb-product-card-primary-action,
  .bb-product-card-secondary-action,
  .bb-product-card-b2b-action {
    width: 100%;
    min-height: var(--bb-product-card-action-height);
  }
  .bb-product-card-secondary-action {
    min-width: 0;
  }
  .bb-product-card-actions-dual {
    flex-direction: column;
    gap: 0.55rem;
  }
  .bb-product-card-quick-view {
    display: none;
  }
  .bb-product-card-horizontal {
    flex-direction: column;
  }
  .bb-product-card-horizontal .bb-product-card-media {
    width: auto;
    flex: 0 0 auto;
  }
  .bb-product-card-horizontal .bb-product-card-image-frame {
    height: var(--bb-product-card-image-height);
    min-height: 0;
  }
  .bb-product-card-horizontal .bb-product-card-badges,
  .bb-product-card-horizontal .bb-product-card-badge-area,
  .bb-product-card-horizontal .bb-product-card-tools {
    display: flex;
  }
}
@media (max-width: 389.98px) {
  .bb-product-card {
    --bb-product-card-image-height: 11.35rem;
    --bb-product-card-tool-size: 2.08rem;
    --bb-product-card-action-height: 2.65rem;
  }
  .bb-product-card-tools {
    gap: 0.24rem;
  }
  .bb-product-card-badges,
  .bb-product-card-badge-area {
    max-width: calc(100% - 6.45rem);
  }
  .bb-product-card-title {
    font-size: var(--bb-fs-sm);
  }
  .bb-product-card-price-current {
    font-size: var(--bb-fs-xl);
  }
  .bb-product-card-meta .bb-product-card-badge,
  .bb-product-card-meta .bb-product-card-chip,
  .bb-product-card-meta .bb-product-card-pill {
    font-size: var(--bb-fs-2xs);
  }
}
/* =====================================
   Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-product-card,
  .bb-product-card-image-frame img,
  .bb-product-card-tool,
  .bb-product-card-favorite,
  .bb-product-card-remove,
  .bb-product-card-quick-view,
  .bb-product-card-primary-action,
  .bb-product-card-secondary-action,
  .bb-product-card-b2b-action {
    transition: none;
  }
  .bb-product-card:hover,
  .bb-product-card:hover .bb-product-card-image-frame img,
  .bb-product-card-tool:hover,
  .bb-product-card-favorite:hover,
  .bb-product-card-remove:hover,
  .bb-product-card-primary-action:hover,
  .bb-product-card-secondary-action:hover,
  .bb-product-card-b2b-action:hover {
    transform: none;
  }
}
/* =====================================
   Bulbulustur Cookie Consent Banner
   Scope: _CookieConsentBanner.cshtml

   Purpose:
   - Floating cookie consent component
   - No conflict with /cookie settings page
   - Token-driven
   - Light / Navy / Dark compatible
===================================== */
/* =====================================
   Cookie Banner Mode Tokens
===================================== */
.bb-cookie-banner {
  --bb-cookie-banner-max-width: 74rem;
  --bb-cookie-banner-offset: clamp(2.5rem, 5vw, 4.5rem);
  --bb-cookie-banner-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 95%,
      var(--bb-body-bg)
  );
  --bb-cookie-banner-border-color: color-mix(
      in srgb,
      var(--bb-primary) 24%,
      var(--bb-border-color)
  );
  --bb-cookie-banner-title-color: var(--bb-emphasis-color);
  --bb-cookie-banner-text-color: color-mix(
      in srgb,
      var(--bb-secondary-color) 88%,
      var(--bb-emphasis-color)
  );
  --bb-cookie-banner-icon-size: 4.25rem;
  --bb-cookie-banner-icon-bg: color-mix(
      in srgb,
      var(--bb-primary) 18%,
      var(--bb-body-bg)
  );
  --bb-cookie-banner-icon-color: color-mix(
      in srgb,
      var(--bb-primary) 88%,
      var(--bb-emphasis-color)
  );
  --bb-cookie-banner-icon-border: color-mix(
      in srgb,
      var(--bb-primary) 34%,
      transparent
  );
  --bb-cookie-banner-icon-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 40%, transparent),
      0 1rem 2rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-cookie-banner-card-bg:
      radial-gradient(
          circle at 4% 28%,
          color-mix(in srgb, var(--bb-primary) 18%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 88% 64%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 20rem
      ),
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-cookie-banner-bg) 96%, var(--bb-primary)),
          var(--bb-cookie-banner-bg) 48%,
          color-mix(in srgb, var(--bb-cookie-banner-bg) 90%, var(--bb-primary))
      );
  --bb-cookie-banner-card-glow:
      radial-gradient(
          circle at center,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 68%
      );
  --bb-cookie-banner-card-inner-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 42%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--bb-black, var(--bb-black)) 4%, transparent);
  --bb-cookie-banner-shadow:
      0 2.75rem 6rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 24%, transparent),
      0 1rem 2rem color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent),
      0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 30%, transparent);
  --bb-cookie-banner-manage-bg: var(--bb-emphasis-color);
  --bb-cookie-banner-manage-color: var(--bb-body-bg);
  --bb-cookie-banner-manage-border: var(--bb-emphasis-color);
  --bb-cookie-banner-manage-hover-bg: color-mix(in srgb, var(--bb-emphasis-color) 88%, var(--bb-primary));
  --bb-cookie-banner-manage-hover-color: var(--bb-body-bg);
  --bb-cookie-banner-manage-hover-border: var(--bb-cookie-banner-manage-hover-bg);
  --bb-cookie-banner-reject-color: #e73543;
  --bb-cookie-banner-reject-hover: #c92634;
  --bb-cookie-banner-accept-color: #16d77a;
  --bb-cookie-banner-accept-hover: #10bf6a;
}

html[data-bs-theme=navy] .bb-cookie-banner {
  --bb-cookie-banner-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 90%,
      var(--bb-body-bg)
  );
  --bb-cookie-banner-border-color: color-mix(
      in srgb,
      var(--bb-primary) 22%,
      var(--bb-border-color)
  );
  --bb-cookie-banner-text-color: color-mix(
      in srgb,
      var(--bb-secondary-color) 86%,
      var(--bb-emphasis-color)
  );
  --bb-cookie-banner-icon-bg: color-mix(
      in srgb,
      var(--bb-primary) 15%,
      var(--bb-body-bg)
  );
  --bb-cookie-banner-icon-border: color-mix(
      in srgb,
      var(--bb-primary) 30%,
      var(--bb-border-color)
  );
  --bb-cookie-banner-icon-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 9%, transparent),
      0 1rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent);
  --bb-cookie-banner-card-bg:
      radial-gradient(
          circle at 4% 28%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 88% 64%,
          color-mix(in srgb, var(--bb-info) 10%, transparent),
          transparent 20rem
      ),
      var(--bb-cookie-banner-bg);
  --bb-cookie-banner-card-glow:
      radial-gradient(
          circle at center,
          color-mix(in srgb, var(--bb-primary) 11%, transparent),
          transparent 68%
      );
  --bb-cookie-banner-card-inner-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 9%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--bb-black, var(--bb-black)) 12%, transparent);
  --bb-cookie-banner-shadow:
      0 2.75rem 6rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 48%, transparent),
      0 1rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 28%, transparent),
      0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent);
  --bb-cookie-banner-reject-color: #ff4d5a;
  --bb-cookie-banner-reject-hover: #e73543;
  --bb-cookie-banner-accept-color: #25e28a;
  --bb-cookie-banner-accept-hover: #16d77a;
}

html[data-bs-theme=dark] .bb-cookie-banner {
  --bb-cookie-banner-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 88%,
      var(--bb-body-bg)
  );
  --bb-cookie-banner-border-color: color-mix(
      in srgb,
      var(--bb-primary) 22%,
      var(--bb-border-color)
  );
  --bb-cookie-banner-text-color: color-mix(
      in srgb,
      var(--bb-secondary-color) 86%,
      var(--bb-emphasis-color)
  );
  --bb-cookie-banner-icon-bg: color-mix(
      in srgb,
      var(--bb-primary) 14%,
      var(--bb-body-bg)
  );
  --bb-cookie-banner-icon-border: color-mix(
      in srgb,
      var(--bb-primary) 28%,
      var(--bb-border-color)
  );
  --bb-cookie-banner-icon-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent),
      0 1rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 24%, transparent);
  --bb-cookie-banner-card-bg:
      radial-gradient(
          circle at 4% 28%,
          color-mix(in srgb, var(--bb-primary) 15%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 88% 64%,
          color-mix(in srgb, var(--bb-info) 9%, transparent),
          transparent 20rem
      ),
      var(--bb-cookie-banner-bg);
  --bb-cookie-banner-card-glow:
      radial-gradient(
          circle at center,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 68%
      );
  --bb-cookie-banner-card-inner-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--bb-black, var(--bb-black)) 14%, transparent);
  --bb-cookie-banner-shadow:
      0 2.75rem 6rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 58%, transparent),
      0 1rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 7%, transparent);
  --bb-cookie-banner-reject-color: #ff4d5a;
  --bb-cookie-banner-reject-hover: #e73543;
  --bb-cookie-banner-accept-color: #25e28a;
  --bb-cookie-banner-accept-hover: #16d77a;
}

/* =====================================
   Root
===================================== */
.bb-cookie-banner {
  position: fixed;
  left: 50%;
  bottom: var(--bb-cookie-banner-offset);
  z-index: 1080;
  width: min(100% - 2rem, var(--bb-cookie-banner-max-width));
  transform: translateX(-50%);
  pointer-events: none;
}

/* =====================================
   Card
===================================== */
.bb-cookie-banner-card {
  position: relative;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  color: var(--bb-cookie-banner-title-color);
  background: var(--bb-cookie-banner-card-bg);
  border: var(--bb-border-width) solid var(--bb-cookie-banner-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-cookie-banner-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.bb-cookie-banner-card::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  z-index: -1;
  border-radius: calc(var(--bb-radius-2xl) + 0.5rem);
  background: var(--bb-cookie-banner-card-glow);
  filter: blur(18px);
  opacity: 0.9;
}

.bb-cookie-banner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--bb-cookie-banner-card-inner-shadow);
}

/* =====================================
   Icon
===================================== */
.bb-cookie-banner-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-cookie-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-cookie-banner-icon-size);
  height: var(--bb-cookie-banner-icon-size);
  color: var(--bb-cookie-banner-icon-color);
  background-color: var(--bb-cookie-banner-icon-bg);
  border: var(--bb-border-width) solid var(--bb-cookie-banner-icon-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-cookie-banner-icon-shadow);
}

.bb-cookie-banner-icon .material-symbols-outlined {
  font-size: 2.125rem;
  line-height: 1;
}

/* =====================================
   Content
===================================== */
.bb-cookie-banner-content {
  min-width: 0;
}

.bb-cookie-banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.bb-cookie-banner-title {
  margin: 0 0 0.425rem;
  color: var(--bb-cookie-banner-title-color);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.025em);
}

.bb-cookie-banner-text {
  max-width: 58rem;
  margin: 0;
  color: var(--bb-cookie-banner-text-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

.bb-cookie-banner-link {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

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

/* =====================================
   Close
===================================== */
.bb-cookie-banner-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--bb-secondary-color);
  background-color: transparent;
  border: 0;
  border-radius: var(--bb-radius-pill);
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-cookie-banner-close:hover {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-tertiary-bg) 86%, transparent);
}

.bb-cookie-banner-close .material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
}

/* =====================================
   Actions
===================================== */
.bb-cookie-banner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  white-space: nowrap;
}

.bb-cookie-banner-btn {
  min-height: 3.35rem;
  padding-right: 1.45rem;
  padding-left: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-cookie-banner-btn:hover {
  transform: translateY(-1px);
}

.bb-cookie-banner-btn .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.bb-cookie-banner-manage {
  --bb-btn-bg: var(--bb-cookie-banner-manage-bg);
  --bb-btn-color: var(--bb-cookie-banner-manage-color);
  --bb-btn-border-color: var(--bb-cookie-banner-manage-border);
  --bb-btn-hover-bg: var(--bb-cookie-banner-manage-hover-bg);
  --bb-btn-hover-color: var(--bb-cookie-banner-manage-hover-color);
  --bb-btn-hover-border-color: var(--bb-cookie-banner-manage-hover-border);
  box-shadow: 0 1rem 2rem color-mix(in srgb, var(--bb-emphasis-color) 14%, transparent), 0 0 0 0.125rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent);
}

.bb-cookie-banner-reject {
  --bb-btn-bg: var(--bb-cookie-banner-reject-color);
  --bb-btn-color: var(--bb-black, var(--bb-black));
  --bb-btn-border-color: var(--bb-cookie-banner-reject-color);
  --bb-btn-hover-bg: var(--bb-cookie-banner-reject-hover);
  --bb-btn-hover-color: var(--bb-black, var(--bb-black));
  --bb-btn-hover-border-color: var(--bb-cookie-banner-reject-hover);
  box-shadow: 0 1.1rem 2rem color-mix(in srgb, var(--bb-cookie-banner-reject-color) 34%, transparent), 0 0 0 0.25rem color-mix(in srgb, var(--bb-cookie-banner-reject-color) 10%, transparent);
}

.bb-cookie-banner-accept {
  --bb-btn-bg: var(--bb-cookie-banner-accept-color);
  --bb-btn-color: var(--bb-black, var(--bb-black));
  --bb-btn-border-color: var(--bb-cookie-banner-accept-color);
  --bb-btn-hover-bg: var(--bb-cookie-banner-accept-hover);
  --bb-btn-hover-color: var(--bb-black, var(--bb-black));
  --bb-btn-hover-border-color: var(--bb-cookie-banner-accept-hover);
  box-shadow: 0 1.25rem 2.25rem color-mix(in srgb, var(--bb-cookie-banner-accept-color) 38%, transparent), 0 0 0 0.25rem color-mix(in srgb, var(--bb-cookie-banner-accept-color) 12%, transparent);
}

.bb-cookie-banner-reject,
.bb-cookie-banner-reject:hover,
.bb-cookie-banner-reject:focus,
.bb-cookie-banner-reject:active,
.bb-cookie-banner-accept,
.bb-cookie-banner-accept:hover,
.bb-cookie-banner-accept:focus,
.bb-cookie-banner-accept:active {
  color: var(--bb-black, var(--bb-black));
}

/* =====================================
   State
===================================== */
.bb-cookie-banner.is-hidden {
  display: none;
}

.bb-cookie-banner.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(0.75rem);
  transition: opacity var(--bb-transition-normal), transform var(--bb-transition-normal);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-cookie-banner-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bb-cookie-banner-actions {
    grid-column: 1/-1;
    justify-content: stretch;
    white-space: normal;
  }
  .bb-cookie-banner-btn {
    flex: 1 1 0;
  }
}
@media (max-width: 575.98px) {
  .bb-cookie-banner {
    --bb-cookie-banner-offset: 1rem;
  }
  .bb-cookie-banner-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-cookie-banner-visual {
    display: none;
  }
  .bb-cookie-banner-close {
    display: inline-flex;
  }
  .bb-cookie-banner-title {
    padding-right: 2rem;
    font-size: var(--bb-fs-lg);
  }
  .bb-cookie-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bb-cookie-banner-manage {
    grid-column: 1/-1;
  }
  .bb-cookie-banner-btn {
    width: 100%;
    min-height: 2.875rem;
  }
}
.bb-b2b-product-featureds {
  padding-top: var(--bb-section-space-lg, 3.625rem);
}

.bb-b2b-product-featureds-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.125rem;
}

.bb-b2b-product-featureds-copy {
  min-width: 0;
  max-width: 48.75rem;
}

.bb-b2b-product-featureds-label {
  margin-bottom: 0.625rem;
}

.bb-b2b-product-featureds-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5625rem, 2.5vw, 2.125rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.04em;
}

.bb-b2b-product-featureds-text {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-medium);
}

.bb-b2b-product-featureds-count {
  min-height: 2.375rem;
  padding: 0 0.8125rem;
  border-radius: var(--bb-radius-pill);
  border: var(--bb-border-width) solid var(--bb-border-color);
  background-color: var(--bb-body-bg);
  color: var(--bb-emphasis-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  box-shadow: var(--bb-shadow-xs);
  white-space: nowrap;
}

.bb-b2b-product-featureds-shell {
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--bb-page-accent, var(--bb-primary)) 10%, transparent), transparent 28%), linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg, var(--bb-light)) 100%);
  padding: 1.125rem;
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-product-featureds-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2b-product-featureds-empty {
  border: var(--bb-border-width) dashed var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  background: radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--bb-primary) 12%, transparent), transparent 32%), var(--bb-body-bg);
  padding: 1.875rem;
  text-align: center;
}

.bb-b2b-product-featureds-empty-icon {
  width: 3.375rem;
  height: 3.375rem;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-primary-light);
  color: var(--bb-emphasis-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
}

.bb-b2b-product-featureds-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-b2b-product-featureds-empty strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  margin-bottom: 0.4375rem;
}

.bb-b2b-product-featureds-empty p {
  max-width: 32.5rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-medium);
}

@media (max-width: 1199.98px) {
  .bb-b2b-product-featureds-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-product-featureds {
    padding-top: var(--bb-section-space-md, 2.625rem);
  }
  .bb-b2b-product-featureds-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-product-featureds-head {
    display: block;
  }
  .bb-b2b-product-featureds-count {
    margin-top: 0.75rem;
  }
  .bb-b2b-product-featureds-shell {
    padding: 0.75rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-product-featureds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6875rem;
  }
}
/* Bulbulustur Us Pages*/
/* =====================================
   Us About Page
   Corporate content sections.
===================================== */
.bb-us-about-page {
  --bb-us-about-accent: var(--bb-primary);
  --bb-us-about-accent-soft: var(--bb-primary-light);
  --bb-us-about-accent-text: color-mix(in srgb, var(--bb-primary) 58%, var(--bb-dark));
  --bb-us-about-border: var(--bb-border-color);
  --bb-us-about-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-body-bg));
  background-color: var(--bb-body-bg);
  color: var(--bb-body-color);
}

.bb-us-about-block {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-us-about-accent) 8%, transparent) 0, transparent 30%), var(--bb-us-about-section-bg, var(--bb-body-bg));
}

.bb-us-about-block + .bb-us-about-block {
  border-top: 1px solid var(--bb-us-about-border-soft);
}

.bb-us-about-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.bb-us-about-block-grid-reverse .bb-us-about-block-media {
  order: 2;
}

.bb-us-about-block-grid-reverse .bb-us-about-block-content {
  order: 1;
}

.bb-us-about-block-media {
  min-width: 0;
}

.bb-us-about-block-media img {
  width: 100%;
  max-height: 480px;
  display: block;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--bb-us-about-border) 72%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-us-about-block-content {
  min-width: 0;
}

.bb-us-about-block-label {
  gap: 0.4375rem;
  margin-bottom: 14px;
}

.bb-us-about-block-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-us-about-block-title {
  max-width: 47.5rem;
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-us-about-block-text {
  max-width: 820px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-us-about-block-text p:last-child {
  margin-bottom: 0;
}

.bb-us-about-block-text h1,
.bb-us-about-block-text h2,
.bb-us-about-block-text h3,
.bb-us-about-block-text h4,
.bb-us-about-block-text h5,
.bb-us-about-block-text h6 {
  margin-top: 1.35em;
  margin-bottom: 0.65em;
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-us-about-block-text h1:first-child,
.bb-us-about-block-text h2:first-child,
.bb-us-about-block-text h3:first-child,
.bb-us-about-block-text h4:first-child,
.bb-us-about-block-text h5:first-child,
.bb-us-about-block-text h6:first-child {
  margin-top: 0;
}

.bb-us-about-block-text a {
  color: var(--bb-link-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-us-about-block-text a:hover {
  text-decoration: underline;
}

.bb-us-about-block-text ul,
.bb-us-about-block-text ol {
  display: grid;
  gap: 12px;
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.bb-us-about-block-text li {
  position: relative;
  margin: 0;
  padding-left: 28px;
}

.bb-us-about-block-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background-color: var(--bb-us-about-accent);
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-us-about-accent) 14%, transparent);
}

.bb-us-about-block-text ol {
  counter-reset: bb-us-about-counter;
}

.bb-us-about-block-text ol li {
  counter-increment: bb-us-about-counter;
}

.bb-us-about-block-text ol li::before {
  content: counter(bb-us-about-counter);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-us-about-accent-text);
  background-color: var(--bb-us-about-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* Full text block */
.bb-us-about-block-full {
  max-width: 960px;
  margin: 0 auto;
  padding: 42px;
  text-align: center;
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  border: 1px solid var(--bb-us-about-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-us-about-block-full .bb-us-about-block-title,
.bb-us-about-block-full .bb-us-about-block-text {
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-us-about-block {
    padding: 48px 0;
  }
  .bb-us-about-block-grid,
  .bb-us-about-block-grid-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bb-us-about-block-grid-reverse .bb-us-about-block-media,
  .bb-us-about-block-grid-reverse .bb-us-about-block-content {
    order: initial;
  }
  .bb-us-about-block-media img {
    max-height: 380px;
  }
  .bb-us-about-block-full {
    padding: 30px;
  }
}
@media (max-width: 575.98px) {
  .bb-us-about-block {
    padding: 36px 0;
  }
  .bb-us-about-block-media img {
    max-height: 300px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-us-about-block-full {
    padding: 1.375rem;
    border-radius: var(--bb-radius-xl);
  }
}
/* =====================================
   Bulbulustur Web - Blog Index Page
   Scope: .bb-blog-page
===================================== */
/* =====================================
   Blog Page Mode Tokens
===================================== */
.bb-blog-page {
  --bb-blog-page-bg: var(--bb-body-bg);
  --bb-blog-surface: var(--bb-surface-elevated);
  --bb-blog-surface-soft: var(--bb-tertiary-bg);
  --bb-blog-surface-glass: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  --bb-blog-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-card-border-strong: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  --bb-blog-accent: var(--bb-primary);
  --bb-blog-accent-hover: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-blog-accent-text: color-mix(in srgb, var(--bb-primary) 64%, var(--bb-emphasis-color));
  --bb-blog-accent-soft: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-blog-accent-border: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-blog-warm: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-blog-orange-soft: color-mix(in srgb, var(--bb-warning, var(--bb-primary)) 10%, var(--bb-body-bg));
  --bb-blog-blue-soft: color-mix(in srgb, var(--bb-info, var(--bb-primary)) 10%, var(--bb-body-bg));
  --bb-blog-green-soft: color-mix(in srgb, var(--bb-success, var(--bb-primary)) 10%, var(--bb-body-bg));
  --bb-blog-purple-soft: color-mix(in srgb, var(--bb-purple, var(--bb-primary)) 10%, var(--bb-body-bg));
  --bb-blog-dark-surface: color-mix(in srgb, var(--bb-emphasis-color) 94%, var(--bb-primary));
  --bb-blog-on-dark: var(--bb-theme-on-dark, var(--bb-white));
  --bb-blog-hero-title-max-width: 40rem;
  --bb-blog-hero-lead-max-width: 42rem;
  --bb-blog-hero-grid-gap: clamp(2rem, 4.5vw, 4rem);
  --bb-blog-hero-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 28%, transparent) 0,
          transparent 32%
      ),
      radial-gradient(
          circle at 0% 100%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 58%,
          color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg)) 100%
      );
  --bb-blog-hero-orb-start: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-blog-hero-orb-end: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-blog-featured-surface: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  --bb-blog-featured-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-blog-featured-overlay: linear-gradient(
      180deg,
      transparent 55%,
      color-mix(in srgb, var(--bb-coal-300) 18%, transparent) 100%
  );
  --bb-blog-special-dark-bg: var(--bb-coal-300, var(--bb-emphasis-color));
  --bb-blog-special-on-dark: var(--bb-theme-on-dark, var(--bb-white));
  --bb-blog-special-card-bg: var(--bb-surface-elevated);
  --bb-blog-special-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-special-card-title-color: var(--bb-heading-color, var(--bb-emphasis-color));
  --bb-blog-special-card-text-color: var(--bb-secondary-color);
  --bb-blog-special-label-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-body-bg));
  --bb-blog-special-label-border: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-blog-special-label-color: var(--bb-blog-accent-text);
  --bb-blog-special-bg:
      radial-gradient(
          circle at 90% 12%,
          color-mix(in srgb, var(--bb-primary) 20%, transparent) 0,
          transparent 30%
      ),
      linear-gradient(
          135deg,
          var(--bb-blog-special-dark-bg) 0%,
          color-mix(in srgb, var(--bb-blog-special-dark-bg) 86%, var(--bb-info, var(--bb-primary))) 100%
      );
  --bb-blog-subscribe-bg:
      radial-gradient(
          circle at 88% 8%,
          color-mix(in srgb, var(--bb-primary) 24%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-blog-warm) 0%,
          var(--bb-body-bg) 100%
      );
}

html[data-bs-theme=navy] .bb-blog-page {
  --bb-blog-surface: var(--bb-surface-elevated);
  --bb-blog-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-blog-surface-glass: color-mix(in srgb, var(--bb-body-bg) 78%, transparent);
  --bb-blog-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-card-border-strong: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
  --bb-blog-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-blog-accent-text: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-blog-accent-hover: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-blog-warm: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg));
  --bb-blog-orange-soft: color-mix(in srgb, var(--bb-warning, var(--bb-primary)) 8%, var(--bb-body-bg));
  --bb-blog-blue-soft: color-mix(in srgb, var(--bb-info, var(--bb-primary)) 8%, var(--bb-body-bg));
  --bb-blog-green-soft: color-mix(in srgb, var(--bb-success, var(--bb-primary)) 8%, var(--bb-body-bg));
  --bb-blog-purple-soft: color-mix(in srgb, var(--bb-purple, var(--bb-primary)) 8%, var(--bb-body-bg));
  --bb-blog-hero-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 20%, transparent) 0,
          transparent 32%
      ),
      radial-gradient(
          circle at 0% 100%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 58%,
          color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg)) 100%
      );
  --bb-blog-hero-orb-start: color-mix(in srgb, var(--bb-primary) 13%, transparent);
  --bb-blog-hero-orb-end: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  --bb-blog-featured-surface: color-mix(in srgb, var(--bb-body-bg) 78%, transparent);
  --bb-blog-featured-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-blog-featured-overlay: linear-gradient(
      180deg,
      transparent 50%,
      color-mix(in srgb, var(--bb-black) 38%, transparent) 100%
  );
  --bb-blog-special-dark-bg: var(--bb-body-bg);
  --bb-blog-special-on-dark: var(--bb-emphasis-color);
  --bb-blog-special-card-bg: var(--bb-surface-elevated);
  --bb-blog-special-card-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-blog-special-bg:
      radial-gradient(
          circle at 90% 12%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent) 0,
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-primary)) 0%,
          color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-primary)) 100%
      );
}

html[data-bs-theme=dark] .bb-blog-page {
  --bb-blog-surface: var(--bb-surface-elevated);
  --bb-blog-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg));
  --bb-blog-surface-glass: color-mix(in srgb, var(--bb-body-bg) 72%, transparent);
  --bb-blog-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-card-border-strong: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-blog-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-blog-accent-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-blog-accent-hover: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-blog-warm: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-body-bg));
  --bb-blog-orange-soft: color-mix(in srgb, var(--bb-warning, var(--bb-primary)) 7%, var(--bb-body-bg));
  --bb-blog-blue-soft: color-mix(in srgb, var(--bb-info, var(--bb-primary)) 7%, var(--bb-body-bg));
  --bb-blog-green-soft: color-mix(in srgb, var(--bb-success, var(--bb-primary)) 7%, var(--bb-body-bg));
  --bb-blog-purple-soft: color-mix(in srgb, var(--bb-purple, var(--bb-primary)) 7%, var(--bb-body-bg));
  --bb-blog-hero-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 18%, transparent) 0,
          transparent 32%
      ),
      radial-gradient(
          circle at 0% 100%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-primary) 6%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 58%,
          color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg)) 100%
      );
  --bb-blog-hero-orb-start: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-blog-hero-orb-end: color-mix(in srgb, var(--bb-primary) 7%, transparent);
  --bb-blog-featured-surface: color-mix(in srgb, var(--bb-body-bg) 72%, transparent);
  --bb-blog-featured-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-blog-featured-overlay: linear-gradient(
      180deg,
      transparent 50%,
      color-mix(in srgb, var(--bb-black) 42%, transparent) 100%
  );
  --bb-blog-special-dark-bg: var(--bb-body-bg);
  --bb-blog-special-on-dark: var(--bb-emphasis-color);
  --bb-blog-special-card-bg: var(--bb-surface-elevated);
  --bb-blog-special-card-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-blog-special-bg:
      radial-gradient(
          circle at 90% 12%,
          color-mix(in srgb, var(--bb-primary) 15%, transparent) 0,
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-primary)) 0%,
          color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-primary)) 100%
      );
}

/* =====================================
   Page Shell
===================================== */
.bb-blog-page {
  min-height: 100%;
  color: var(--bb-body-color);
  background-color: var(--bb-blog-page-bg);
}

/* =====================================
   Blog Index Page Hero
===================================== */
.bb-hero.bb-blog-page-hero,
.bb-blog-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 5vw, 5rem);
  padding-bottom: clamp(4.75rem, 7vw, 6.25rem);
  background: var(--bb-blog-hero-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-hero.bb-blog-page-hero {
  --bb-hero-title-max-width: var(--bb-blog-hero-title-max-width);
  --bb-hero-lead-max-width: var(--bb-blog-hero-lead-max-width);
  --bb-hero-aside-width: 42rem;
  --bb-hero-grid-gap: var(--bb-blog-hero-grid-gap);
}

.bb-hero.bb-blog-page-hero::before,
.bb-blog-hero::before {
  content: "";
  position: absolute;
  right: -7.5rem;
  top: -8.125rem;
  width: 21.25rem;
  height: 21.25rem;
  background-color: var(--bb-blog-hero-orb-start);
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero.bb-blog-page-hero::after,
.bb-blog-hero::after {
  content: "";
  position: absolute;
  left: -8.75rem;
  bottom: -11.25rem;
  width: 22.5rem;
  height: 22.5rem;
  background-color: var(--bb-blog-hero-orb-end);
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero.bb-blog-page-hero .bb-web-container,
.bb-blog-hero .bb-web-container {
  position: relative;
  z-index: 2;
}

/* =====================================
   Blog Hero Breadcrumb
===================================== */
.bb-blog-page-hero-breadcrumb {
  position: relative;
  z-index: 2;
  padding-right: 18px;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.bb-blog-page-hero-breadcrumb .bb-breadcrumb,
.bb-blog-page-hero-breadcrumb-list {
  width: fit-content;
  max-width: 100%;
  min-height: 2.625rem;
  padding: 0.35rem 0.875rem;
  display: flex;
  align-items: center;
  overflow-x: auto;
  background-color: color-mix(in srgb, var(--bb-blog-surface) 86%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-blog-page-hero-breadcrumb .breadcrumb-item,
.bb-blog-page-hero-breadcrumb .breadcrumb-item a {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none;
}

.bb-blog-page-hero-breadcrumb .breadcrumb-item.active {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Blog Hero Layout
===================================== */
.bb-blog-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(31rem, 1.12fr);
  gap: var(--bb-blog-hero-grid-gap);
  align-items: center;
}

.bb-blog-hero-copy {
  min-width: 0;
}

.bb-blog-eyebrow,
.bb-blog-featured-label,
.bb-blog-section-kicker,
.bb-blog-special-kicker,
.bb-blog-special-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-eyebrow {
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem 0.25rem 0.35rem;
  margin-bottom: 1.25rem;
  color: var(--bb-blog-accent-text);
  background-color: var(--bb-blog-accent-soft);
  border: var(--bb-border-width) solid var(--bb-blog-accent-border);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-sm);
}

.bb-blog-eyebrow .material-symbols-outlined {
  width: 1.625rem;
  height: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-blog-hero-title {
  max-width: var(--bb-blog-hero-title-max-width);
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(3.5rem, 7vw, 5.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 0.94;
  letter-spacing: -0.07em;
}

.bb-blog-hero-title span {
  color: var(--bb-blog-accent-text);
}

.bb-blog-hero-text {
  max-width: var(--bb-blog-hero-lead-max-width);
  margin: 1.35rem 0 0;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.85;
}

/* =====================================
   Blog Search
===================================== */
.bb-blog-search-card,
.bb-blog-subscribe-card-form {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-blog-surface);
  border: 1px solid var(--bb-blog-card-border);
  box-shadow: var(--bb-shadow-sm);
}

.bb-blog-search-card {
  position: relative;
  max-width: 33rem;
  min-height: 4rem;
  margin-top: 1.75rem;
  padding: 0.5rem 0.5rem 0.5rem 4.125rem;
}

.bb-blog-search-icon {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: 50%;
}

.bb-blog-search-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-blog-search-input,
.bb-blog-subscribe-card-input {
  width: 100%;
  min-width: 0;
  color: var(--bb-heading-color);
  background-color: transparent;
  border: 0;
  outline: 0;
  box-shadow: none !important;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-medium);
}

.bb-blog-search-input {
  height: 3rem;
  padding: 0;
}

.bb-blog-search-input::placeholder,
.bb-blog-subscribe-card-input::placeholder {
  color: var(--bb-secondary-color);
}

.bb-blog-search-button,
.bb-blog-subscribe-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-blog-dark-surface);
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  cursor: pointer;
}

.bb-blog-search-button {
  min-width: 7.25rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  gap: 0.45rem;
}

.bb-blog-search-button:hover,
.bb-blog-subscribe-card-button:hover {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 90%, black);
}

.bb-blog-search-button .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Blog Featured Card
===================================== */
.bb-blog-featured-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(18rem, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  min-height: 380px;
  padding: 1.375rem;
  overflow: hidden;
  background-color: var(--bb-blog-featured-surface);
  border: var(--bb-border-width) solid var(--bb-blog-featured-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-blog-featured-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}

.bb-blog-featured-label {
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0;
  color: var(--bb-blog-accent-text);
  background-color: var(--bb-blog-accent-soft);
  border: var(--bb-border-width) solid var(--bb-blog-accent-border);
  font-size: var(--bb-fs-sm);
}

.bb-blog-featured-label .material-symbols-outlined {
  color: var(--bb-blog-accent-hover);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-blog-featured-title {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 1rem 0 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.07;
  letter-spacing: -0.05em;
}

.bb-blog-featured-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-blog-featured-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-blog-mini-dot {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-flex;
  flex: 0 0 auto;
  background-color: var(--bb-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-blog-featured-cta,
.bb-blog-read-more,
.bb-blog-view-all {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-featured-cta {
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  min-height: 3rem;
  margin-top: auto;
  padding: 0 1.25rem;
  color: var(--bb-white) !important;
  background-color: var(--bb-blog-dark-surface);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
}

.bb-blog-featured-cta:hover {
  color: var(--bb-white) !important;
  background-color: color-mix(in srgb, var(--bb-coal-300) 90%, black);
}

.bb-blog-featured-cta .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-blog-featured-media {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 336px;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-blog-featured-media img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
}

.bb-blog-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bb-blog-featured-overlay);
  pointer-events: none;
}

.bb-blog-featured-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 2rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-blog-surface);
  border: var(--bb-border-width) dashed var(--bb-blog-card-border-strong);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Blog Categories Card
===================================== */
.bb-blog-category-section {
  position: relative;
  z-index: 5;
}

.bb-blog-category-card {
  margin-top: -5.25rem;
  padding: 1.25rem;
  background-color: var(--bb-blog-surface);
  border: var(--bb-border-width) solid var(--bb-blog-card-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-blog-category-row {
  min-width: 0;
  display: block;
}

.bb-blog-category-card h2,
.bb-blog-category-card .bb-blog-category-title {
  margin: 0 0 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-blog-category-card .bb-chip,
.bb-blog-category-card a,
.bb-blog-category-card button {
  text-decoration: none;
}

.bb-blog-category-card .material-symbols-outlined {
  color: currentColor;
  line-height: 1;
}

/* =====================================
   Categories / Main
===================================== */
.bb-blog-section-head,
.bb-blog-special-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 24px;
}

.bb-blog-section-kicker {
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  margin-bottom: 0.625rem;
  background-color: var(--bb-blog-accent-soft);
  color: var(--bb-blog-accent-text);
  font-size: var(--bb-fs-xs);
}

.bb-blog-section-kicker .material-symbols-outlined,
.bb-blog-special-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
}

.bb-blog-section-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.035em;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-section-text {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-blog-view-all {
  gap: 6px;
  color: var(--bb-heading-color) !important;
  font-size: var(--bb-fs-sm);
  white-space: nowrap;
}

.bb-blog-view-all:hover,
.bb-blog-read-more:hover {
  color: var(--bb-link-color) !important;
}

.bb-blog-view-all .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

/* =====================================
   Blog Cards Compatibility
===================================== */
.bb-blog-grid,
.bb-blog-special-grid,
.bb-blog-hub-grid {
  display: grid;
}

.bb-blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.bb-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 428px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-surface);
  border: 1px solid var(--bb-blog-card-border);
  box-shadow: var(--bb-shadow-xs);
  overflow: hidden;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--bb-blog-card-border-strong);
  box-shadow: var(--bb-shadow-sm);
}

.bb-blog-card-media {
  position: relative;
  height: 210px;
  background-color: var(--bb-tertiary-bg);
  overflow: hidden;
}

.bb-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--bb-transition-normal);
}

.bb-blog-card:hover .bb-blog-card-media img {
  transform: scale(1.035);
}

.bb-blog-card-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-blog-surface) 74%, transparent);
  color: var(--bb-heading-color);
  border: 1px solid color-mix(in srgb, var(--bb-blog-surface) 62%, transparent);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-blog-card-badge .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  color: var(--bb-blog-accent-hover);
}

.bb-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}

.bb-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  margin-bottom: 0.625rem;
}

.bb-blog-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 58px;
  max-height: 58px;
  overflow: hidden;
  margin: 0 0 10px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: 1.38;
  letter-spacing: -0.02em;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-card-link {
  color: inherit !important;
  text-decoration: none !important;
}

.bb-blog-card-link:hover .bb-blog-card-title {
  color: var(--bb-link-color);
}

.bb-blog-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  min-height: 74px;
  max-height: 74px;
  overflow: hidden;
  margin: 0 0 16px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-blog-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bb-blog-read-more {
  gap: 6px;
  color: var(--bb-heading-color) !important;
  font-size: var(--bb-fs-sm);
}

.bb-blog-read-more .material-symbols-outlined {
  font-size: var(--bb-fs-md);
}

/* =====================================
   Special Shelf
===================================== */
.bb-blog-special-section {
  position: relative;
  overflow: hidden;
  margin: 46px 0;
  padding: 30px;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-blog-special-on-dark) 10%, transparent);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-blog-special-bg);
  color: var(--bb-blog-special-on-dark);
  box-shadow: var(--bb-shadow-lg);
}

.bb-blog-special-head {
  margin-bottom: 22px;
}

.bb-blog-special-kicker {
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  margin-bottom: 9px;
  background-color: color-mix(in srgb, var(--bb-blog-special-on-dark) 12%, transparent);
  color: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-blog-special-on-dark));
  font-size: var(--bb-fs-xs);
  line-height: 1;
}

.bb-blog-special-kicker .material-symbols-outlined,
.bb-blog-special-kicker .material-icons {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-blog-special-title {
  margin: 0;
  color: var(--bb-blog-special-on-dark);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.03em;
}

.bb-blog-special-text {
  max-width: 720px;
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--bb-blog-special-on-dark) 72%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-blog-special-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bb-blog-special-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-blog-special-on-dark) 18%, transparent);
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-blog-special-on-dark) 9%, transparent);
  color: var(--bb-blog-special-on-dark);
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-blog-special-control:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bb-primary) 40%, transparent);
  background-color: color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-blog-special-control .material-symbols-outlined,
.bb-blog-special-control .material-icons {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-blog-special-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-blog-special-card {
  display: flex;
  flex-direction: column;
  min-height: 370px;
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-blog-special-card-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-special-card-bg);
  color: var(--bb-body-color);
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-blog-special-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-lg);
}

.bb-blog-special-media {
  height: 180px;
  background-color: var(--bb-tertiary-bg);
}

.bb-blog-special-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-blog-special-body {
  padding: 17px;
}

.bb-blog-special-label {
  min-height: 26px;
  padding: 0 9px;
  margin-bottom: 0.625rem;
  border: var(--bb-border-width) solid var(--bb-blog-special-label-border);
  background-color: var(--bb-blog-special-label-bg);
  color: var(--bb-blog-special-label-color);
  font-size: var(--bb-fs-xs);
  line-height: 1;
}

.bb-blog-special-card-title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 54px;
  max-height: 54px;
  margin: 0 0 8px;
  color: var(--bb-blog-special-card-title-color);
  font-size: var(--bb-h5);
  line-height: 1.48;
  font-weight: var(--bb-fw-bold);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-blog-special-card-text {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bb-blog-special-card-text-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =====================================
   Pagination
===================================== */
.bb-blog-pagination-wrap {
  margin-top: 34px;
  margin-bottom: 48px;
  padding: 14px 16px;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid var(--bb-blog-card-border);
  background-color: var(--bb-blog-surface);
  box-shadow: var(--bb-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
}

.bb-blog-page-notify {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-page-notify::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bb-blog-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-blog-accent) 16%, transparent);
}

.bb-blog-pagination {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bb-blog-pagination-link,
.bb-blog-pagination-arrow {
  min-width: 38px;
  height: 38px;
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-border-color);
  background-color: var(--bb-blog-surface);
  color: var(--bb-body-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-blog-pagination-link:hover,
.bb-blog-pagination-arrow:hover {
  background-color: var(--bb-blog-accent-soft);
  border-color: var(--bb-blog-accent-border);
  color: var(--bb-heading-color) !important;
}

.bb-blog-pagination-link.active {
  background-color: var(--bb-blog-dark-surface);
  border-color: var(--bb-blog-dark-surface);
  color: var(--bb-white) !important;
}

.bb-blog-pagination-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
}

/* =====================================
   Hub
===================================== */
.bb-blog-hub-section {
  padding: 48px 0 38px;
}

.bb-blog-hub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.bb-blog-hub-card {
  position: relative;
  min-height: 168px;
  padding: 20px;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid var(--bb-blog-card-border);
  background-color: var(--bb-blog-surface);
  box-shadow: var(--bb-shadow-xs);
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-blog-hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--bb-blog-card-border-strong);
  box-shadow: var(--bb-shadow-sm);
}

.bb-blog-hub-card:nth-child(1) {
  background: linear-gradient(135deg, var(--bb-blog-surface) 0%, var(--bb-blog-orange-soft) 100%);
}

.bb-blog-hub-card:nth-child(2) {
  background: linear-gradient(135deg, var(--bb-blog-surface) 0%, var(--bb-blog-blue-soft) 100%);
}

.bb-blog-hub-card:nth-child(3) {
  background: linear-gradient(135deg, var(--bb-blog-surface) 0%, var(--bb-blog-green-soft) 100%);
}

.bb-blog-hub-card:nth-child(4) {
  background: linear-gradient(135deg, var(--bb-blog-surface) 0%, var(--bb-blog-purple-soft) 100%);
}

.bb-blog-hub-icon {
  width: 2.625rem;
  height: 42px;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-blog-surface);
  border: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-blog-dark-surface);
  margin-bottom: 14px;
}

.bb-blog-hub-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
}

.bb-blog-hub-title {
  margin: 0 0 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h5);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-hub-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Subscribe / Empty
===================================== */
.bb-blog-subscribe-section {
  padding: 0;
}

.bb-blog-subscribe-card {
  margin-top: 0;
  padding: 32px;
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-blog-subscribe-bg);
  border: 1px solid color-mix(in srgb, var(--bb-blog-accent) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: 22px;
  align-items: center;
}

.bb-blog-subscribe-card-title {
  margin: 0 0 9px;
  color: var(--bb-heading-color);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-subscribe-card-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
  margin: 0;
}

.bb-blog-subscribe-card-form {
  padding: 0.5rem;
}

.bb-blog-subscribe-card-input {
  height: 42px;
  padding: 0 12px;
}

.bb-blog-subscribe-card-button {
  min-width: 124px;
  height: 42px;
  padding: 0 18px;
}

.bb-blog-empty-card {
  min-height: 320px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-surface);
  border: 1px solid var(--bb-blog-card-border);
  box-shadow: var(--bb-shadow-sm);
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 34px;
}

.bb-blog-empty-icon {
  width: 128px;
  height: 128px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-blog-dark-surface);
}

.bb-blog-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
}

.bb-blog-empty-title {
  margin: 0 0 10px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-empty-text {
  max-width: 47.5rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-blog-hero-inner,
  .bb-blog-featured-card,
  .bb-blog-subscribe-card {
    grid-template-columns: 1fr;
  }
  .bb-blog-featured-media {
    min-height: 320px;
  }
  .bb-blog-featured-media img {
    min-height: 22rem;
  }
  .bb-blog-grid,
  .bb-blog-special-grid,
  .bb-blog-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-hero.bb-blog-page-hero,
  .bb-blog-hero {
    padding-bottom: 5.25rem;
  }
  .bb-blog-featured-card {
    grid-template-columns: 1fr;
  }
  .bb-blog-featured-media {
    order: -1;
  }
  .bb-blog-featured-media img {
    min-height: 20rem;
    max-height: 24rem;
  }
  .bb-blog-category-card {
    margin-top: -2.25rem;
  }
}
@media (max-width: 767.98px) {
  .bb-hero.bb-blog-page-hero,
  .bb-blog-hero {
    padding-top: 2.75rem;
    padding-bottom: 4.25rem;
  }
  .bb-blog-hero-title {
    font-size: clamp(3rem, 13vw, 4.35rem);
  }
  .bb-blog-search-card {
    max-width: 100%;
    padding: 0.5rem;
    flex-wrap: wrap;
    border-radius: var(--bb-radius-xl);
  }
  .bb-blog-search-icon {
    position: static;
    transform: none;
    width: 2.75rem;
    height: 2.75rem;
  }
  .bb-blog-search-input {
    width: calc(100% - 3.5rem);
    flex: 1 1 0;
    height: 44px;
    padding: 0 12px;
    background-color: var(--bb-tertiary-bg);
    border-radius: var(--bb-radius-lg);
  }
  .bb-blog-search-button {
    width: 100%;
    min-width: auto;
    padding-inline: 1rem;
  }
  .bb-blog-featured-card {
    padding: 1rem;
    min-height: 0;
    border-radius: var(--bb-radius-xl);
  }
  .bb-blog-featured-media {
    min-height: 220px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-blog-category-card {
    margin-top: -1.5rem;
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-blog-section-head,
  .bb-blog-special-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-blog-grid,
  .bb-blog-special-grid,
  .bb-blog-hub-grid {
    grid-template-columns: 1fr;
  }
  .bb-blog-card {
    min-height: 0;
  }
  .bb-blog-card-media {
    height: 205px;
  }
  .bb-blog-special-section {
    margin: 2.25rem 0;
    padding: 20px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-blog-special-card {
    min-height: 0;
  }
  .bb-blog-special-media {
    height: 205px;
  }
  .bb-blog-pagination-wrap {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 38px;
  }
  .bb-blog-subscribe-card {
    padding: 1.375rem;
  }
  .bb-blog-subscribe-card-form {
    border-radius: var(--bb-radius-xl);
    align-items: stretch;
    flex-direction: column;
  }
  .bb-blog-subscribe-card-button {
    width: 100%;
  }
  .bb-blog-empty-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}
@media (max-width: 575.98px) {
  .bb-blog-featured-title {
    font-size: clamp(1.7rem, 9vw, 2.45rem);
  }
}
/* =====================================
   Bulbulustur Web - Blog Detail
   Scope: .bb-blog-detail-page
===================================== */
/* =====================================
   Blog Detail Mode Tokens
===================================== */
.bb-blog-detail-page {
  --bb-blog-detail-page-bg: var(--bb-body-bg);
  --bb-blog-detail-surface: var(--bb-surface-elevated);
  --bb-blog-detail-surface-soft: var(--bb-tertiary-bg);
  --bb-blog-detail-surface-glass: color-mix(in srgb, var(--bb-body-bg) 84%, transparent);
  --bb-blog-detail-card-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-blog-detail-cover-border: color-mix(in srgb, var(--bb-border-color) 95%, transparent);
  --bb-blog-detail-accent: var(--bb-primary);
  --bb-blog-detail-accent-hover: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-blog-detail-accent-text: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-emphasis-color));
  --bb-blog-detail-accent-soft: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-blog-detail-accent-border: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-blog-detail-warm: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-blog-detail-orange-glow: color-mix(in srgb, var(--bb-primary) 13%, transparent);
  --bb-blog-detail-dark-surface: color-mix(in srgb, var(--bb-emphasis-color) 94%, var(--bb-primary));
  --bb-blog-detail-on-dark: var(--bb-theme-on-dark, var(--bb-white));
  --bb-blog-detail-hero-bg:
      radial-gradient(
          circle at 84% 10%,
          color-mix(in srgb, var(--bb-blog-detail-accent) 34%, transparent) 0,
          transparent 31%
      ),
      linear-gradient(
          135deg,
          var(--bb-blog-detail-warm) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-blog-detail-hero-orb-start: color-mix(in srgb, var(--bb-blog-detail-accent) 18%, transparent);
  --bb-blog-detail-cover-overlay: linear-gradient(
      180deg,
      transparent 52%,
      color-mix(in srgb, var(--bb-coal-300) 28%, transparent) 100%
  );
  --bb-blog-detail-cta-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-blog-detail-accent) 25%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-coal-300) 0%,
          color-mix(in srgb, var(--bb-coal-300) 86%, var(--bb-info)) 100%
      );
  --bb-blog-detail-subscribe-bg:
      radial-gradient(
          circle at 88% 8%,
          color-mix(in srgb, var(--bb-blog-detail-accent) 24%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-blog-detail-warm) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-blog-detail-author-bg:
      radial-gradient(
          circle at 94% 12%,
          color-mix(in srgb, var(--bb-primary) 20%, transparent) 0,
          transparent 34%
      ),
      var(--bb-blog-detail-surface);
  --bb-blog-detail-author-avatar-bg:
      linear-gradient(
          135deg,
          var(--bb-emphasis-color) 0%,
          color-mix(in srgb, var(--bb-emphasis-color) 82%, var(--bb-primary)) 100%
      );
  --bb-blog-detail-author-avatar-border: color-mix(in srgb, var(--bb-white) 70%, transparent);
}

html[data-bs-theme=navy] .bb-blog-detail-page {
  --bb-blog-detail-page-bg: var(--bb-body-bg);
  --bb-blog-detail-surface: var(--bb-surface-elevated);
  --bb-blog-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-blog-detail-surface-glass: color-mix(in srgb, var(--bb-body-bg) 76%, transparent);
  --bb-blog-detail-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-detail-cover-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-blog-detail-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-blog-detail-accent-text: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-blog-detail-accent-hover: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-blog-detail-warm: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg));
  --bb-blog-detail-orange-glow: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-blog-detail-hero-bg:
      radial-gradient(
          circle at 84% 10%,
          color-mix(in srgb, var(--bb-blog-detail-accent) 24%, transparent) 0,
          transparent 31%
      ),
      linear-gradient(
          135deg,
          var(--bb-blog-detail-warm) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-blog-detail-hero-orb-start: color-mix(in srgb, var(--bb-blog-detail-accent) 13%, transparent);
  --bb-blog-detail-cover-overlay: linear-gradient(
      180deg,
      transparent 48%,
      color-mix(in srgb, var(--bb-black) 42%, transparent) 100%
  );
  --bb-blog-detail-author-bg:
      radial-gradient(
          circle at 94% 12%,
          color-mix(in srgb, var(--bb-primary) 17%, transparent) 0,
          transparent 34%
      ),
      var(--bb-blog-detail-surface);
  --bb-blog-detail-author-avatar-bg:
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-emphasis-color) 90%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-primary) 28%, var(--bb-body-bg)) 100%
      );
  --bb-blog-detail-author-avatar-border: color-mix(in srgb, var(--bb-white) 18%, transparent);
}

html[data-bs-theme=dark] .bb-blog-detail-page {
  --bb-blog-detail-page-bg: var(--bb-body-bg);
  --bb-blog-detail-surface: var(--bb-surface-elevated);
  --bb-blog-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg));
  --bb-blog-detail-surface-glass: color-mix(in srgb, var(--bb-body-bg) 72%, transparent);
  --bb-blog-detail-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-detail-cover-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-blog-detail-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-blog-detail-accent-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-blog-detail-accent-hover: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-blog-detail-warm: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-body-bg));
  --bb-blog-detail-orange-glow: color-mix(in srgb, var(--bb-primary) 9%, transparent);
  --bb-blog-detail-hero-bg:
      radial-gradient(
          circle at 84% 10%,
          color-mix(in srgb, var(--bb-blog-detail-accent) 22%, transparent) 0,
          transparent 31%
      ),
      linear-gradient(
          135deg,
          var(--bb-blog-detail-warm) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-blog-detail-hero-orb-start: color-mix(in srgb, var(--bb-blog-detail-accent) 12%, transparent);
  --bb-blog-detail-cover-overlay: linear-gradient(
      180deg,
      transparent 48%,
      color-mix(in srgb, var(--bb-black) 46%, transparent) 100%
  );
  --bb-blog-detail-author-bg:
      radial-gradient(
          circle at 94% 12%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent) 0,
          transparent 34%
      ),
      var(--bb-blog-detail-surface);
  --bb-blog-detail-author-avatar-bg:
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-emphasis-color) 88%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-primary) 24%, var(--bb-body-bg)) 100%
      );
  --bb-blog-detail-author-avatar-border: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

/* =====================================
   Page Shell
===================================== */
.bb-blog-detail-page {
  min-height: 100%;
  color: var(--bb-body-color);
  background-color: var(--bb-blog-detail-page-bg);
}

/* =====================================
   Hero + Breadcrumb
===================================== */
.bb-blog-detail-hero {
  position: relative;
  overflow: hidden;
  background: var(--bb-blog-detail-hero-bg);
}

.bb-blog-detail-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -130px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background-color: var(--bb-blog-detail-hero-orb-start);
  pointer-events: none;
}

.bb-blog-detail-hero::after {
  content: "";
  position: absolute;
  left: -140px;
  bottom: -180px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background-color: var(--bb-blog-detail-orange-glow);
  pointer-events: none;
}

.bb-blog-detail-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
  gap: 38px;
  align-items: center;
}

.bb-blog-detail-hero-copy {
  min-width: 0;
}

.bb-blog-detail-eyebrow,
.bb-blog-detail-meta-pill,
.bb-blog-detail-cover-badge,
.bb-blog-detail-cta-label,
.bb-blog-detail-section-kicker,
.bb-blog-detail-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--bb-radius-pill);
}

.bb-blog-detail-eyebrow {
  gap: 0.5rem;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 18px;
  background-color: var(--bb-blog-detail-surface);
  border: 1px solid color-mix(in srgb, var(--bb-blog-detail-accent) 48%, var(--bb-border-color));
  color: var(--bb-blog-detail-accent-text);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  box-shadow: var(--bb-shadow-xs);
}

.bb-blog-detail-eyebrow .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  color: var(--bb-blog-detail-accent-hover);
}

.bb-blog-detail-title {
  max-width: 820px;
  margin: 0 0 18px;
  color: var(--bb-heading-color);
  font-size: clamp(2.25rem, 4.8vw, 4.125rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: var(--bb-fw-extrabold);
}

.bb-blog-detail-spot {
  max-width: 47.5rem;
  margin: 0 0 24px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1.82;
}

.bb-blog-detail-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-detail-meta-pill {
  gap: 0.4375rem;
  min-height: 34px;
  padding: 0 12px;
  background-color: var(--bb-blog-detail-surface);
  border: 1px solid var(--bb-border-color);
  color: var(--bb-body-color);
  box-shadow: var(--bb-shadow-xs);
}

.bb-blog-detail-meta-pill .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  color: var(--bb-blog-detail-accent-hover);
}

.bb-blog-detail-meta-pill:empty {
  display: none;
}

.bb-blog-detail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bb-blog-detail-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-blog-detail-accent) 16%, transparent);
  flex: 0 0 auto;
}

.bb-blog-detail-cover-card {
  position: relative;
  min-height: 420px;
  padding: 14px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-detail-surface-glass);
  border: 1px solid var(--bb-blog-detail-cover-border);
  box-shadow: var(--bb-shadow-lg);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  overflow: hidden;
}

.bb-blog-detail-cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 392px;
  border-radius: var(--bb-radius-xl);
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
}

.bb-blog-detail-cover img {
  width: 100%;
  height: 100%;
  min-height: 392px;
  object-fit: cover;
  display: block;
}

.bb-blog-detail-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bb-blog-detail-cover-overlay);
  pointer-events: none;
}

.bb-blog-detail-cover-badge {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0 14px;
  background-color: color-mix(in srgb, var(--bb-blog-detail-surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-blog-detail-cover-badge .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  color: var(--bb-blog-detail-accent-hover);
}

/* =====================================
   Shell Layout
===================================== */
.bb-blog-detail-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 780px) 290px;
  gap: 32px;
  align-items: start;
}

.bb-blog-detail-side {
  position: sticky;
  top: 25px;
  align-self: start;
}

.bb-blog-detail-main {
  min-width: 0;
}

.bb-blog-detail-side-card,
.bb-blog-detail-article-card,
.bb-blog-detail-tags-card,
.bb-blog-detail-right-card,
.bb-blog-detail-related-section,
.bb-blog-subscribe-card {
  background-color: var(--bb-blog-detail-surface);
  border: 1px solid var(--bb-blog-detail-card-border);
  box-shadow: var(--bb-shadow-xs);
}

.bb-blog-detail-side-card {
  padding: 20px;
  border-radius: var(--bb-radius-2xl);
}

.bb-blog-detail-side-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 14px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-detail-side-title .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  color: var(--bb-blog-detail-accent-hover);
}

/* =====================================
   TOC / Share
===================================== */
.bb-blog-detail-toc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bb-blog-detail-toc a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-secondary-color) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  text-decoration: none !important;
  border-left: 3px solid transparent;
}

.bb-blog-detail-toc a:hover {
  background-color: var(--bb-blog-detail-accent-soft);
  color: var(--bb-heading-color) !important;
  border-left-color: var(--bb-blog-detail-accent);
}

.bb-blog-detail-toc-link-child {
  padding-left: 20px !important;
  font-size: var(--bb-fs-2xs) !important;
}

.bb-blog-detail-toc-empty {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  margin: 0;
}

.bb-blog-detail-share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bb-border-color);
}

.bb-blog-detail-share-link {
  width: 36px;
  height: 36px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  color: var(--bb-heading-color) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-detail-share-link:hover {
  background-color: var(--bb-blog-detail-accent-soft);
  border-color: var(--bb-blog-detail-accent-border);
}

/* =====================================
   Article
===================================== */
.bb-blog-detail-article-card {
  padding: 34px;
  border-radius: var(--bb-radius-2xl);
}

.bb-blog-detail-content {
  color: var(--bb-body-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1.88;
}

.bb-blog-detail-content h1,
.bb-blog-detail-content h2,
.bb-blog-detail-content h3,
.bb-blog-detail-content h4,
.bb-blog-detail-content h5,
.bb-blog-detail-content h6 {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.028em;
  margin-top: 34px;
  margin-bottom: 14px;
}

.bb-blog-detail-content h1 {
  font-size: clamp(2rem, 3vw, 2.375rem);
  line-height: var(--bb-line-height-heading);
}

.bb-blog-detail-content h2 {
  font-size: clamp(1.75rem, 2.8vw, 2rem);
  line-height: var(--bb-line-height-heading);
  padding-top: 8px;
}

.bb-blog-detail-content h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.5625rem);
  line-height: 1.24;
}

.bb-blog-detail-content h4 {
  font-size: var(--bb-h4);
  line-height: 1.32;
}

.bb-blog-detail-content p {
  margin: 0 0 20px;
}

.bb-blog-detail-content a {
  color: var(--bb-link-color);
  font-weight: var(--bb-fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bb-blog-detail-content ul,
.bb-blog-detail-content ol {
  padding-left: 24px;
  margin: 0 0 24px;
}

.bb-blog-detail-content li {
  margin-bottom: 9px;
}

.bb-blog-detail-content blockquote {
  position: relative;
  margin: 32px 0;
  padding: 26px 28px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-detail-content blockquote::before {
  content: "format_quote";
  font-family: "Material Symbols Outlined";
  position: absolute;
  right: 22px;
  top: 16px;
  color: color-mix(in srgb, var(--bb-blog-detail-accent) 55%, transparent);
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-blog-detail-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 30px auto;
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-blog-detail-content figure {
  margin: 34px 0;
}

.bb-blog-detail-content figure img {
  margin-bottom: 0.75rem;
}

.bb-blog-detail-content figcaption {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  text-align: center;
}

.bb-blog-detail-content table {
  width: 100%;
  margin: 30px 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  overflow: hidden;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-blog-detail-content th {
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-detail-content th,
.bb-blog-detail-content td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bb-border-color);
  vertical-align: top;
}

.bb-blog-detail-content tr:last-child td {
  border-bottom: 0;
}

/* =====================================
   Article Content Blocks
===================================== */
.bb-blog-detail-content-block {
  position: relative;
  padding-top: 8px;
  margin-bottom: 38px;
  scroll-margin-top: 105px;
}

.bb-blog-detail-content-block:last-child {
  margin-bottom: 0;
}

.bb-blog-detail-content-block-title {
  margin: 0 0 12px;
  color: var(--bb-heading-color);
  font-size: clamp(1.75rem, 2.8vw, 2rem);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-detail-content-block-subtitle {
  margin: 0 0 20px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-detail-content-block-picture {
  margin: 24px 0 26px;
  overflow: hidden;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  box-shadow: var(--bb-shadow-sm);
}

.bb-blog-detail-content-block-picture img {
  width: 100%;
  max-height: 430px;
  object-fit: cover;
  display: block;
}

.bb-blog-detail-empty-content {
  padding: 24px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Article Notes Compatibility
===================================== */
.bb-blog-detail-content .bb-article-note,
.bb-blog-detail-content .bb-article-info,
.bb-blog-detail-content .bb-article-warning {
  margin: 30px 0;
  padding: 22px 24px;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid var(--bb-border-color);
  color: var(--bb-body-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-blog-detail-content .bb-article-note {
  background-color: var(--bb-blog-detail-accent-soft);
  border-color: color-mix(in srgb, var(--bb-blog-detail-accent) 28%, var(--bb-border-color));
}

.bb-blog-detail-content .bb-article-info {
  background-color: var(--bb-info-light);
  border-color: color-mix(in srgb, var(--bb-info) 28%, var(--bb-border-color));
}

.bb-blog-detail-content .bb-article-warning {
  background-color: var(--bb-warning-light, color-mix(in srgb, var(--bb-warning) 14%, var(--bb-body-bg)));
  border-color: color-mix(in srgb, var(--bb-warning) 28%, var(--bb-border-color));
}

/* =====================================
   Tags / Side Cards
===================================== */
.bb-blog-detail-after-article {
  margin-top: 22px;
}

.bb-blog-detail-tags-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: var(--bb-radius-2xl);
}

.bb-blog-detail-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bb-blog-detail-tag {
  min-height: 32px;
  padding: 0 11px;
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-detail-tag-link {
  text-decoration: none !important;
}

.bb-blog-detail-tag-link:hover {
  color: var(--bb-link-color);
}

.bb-blog-detail-right-card {
  margin-bottom: 18px;
  padding: 18px;
  border-radius: var(--bb-radius-2xl);
  overflow: hidden;
}

.bb-blog-detail-cta-card {
  background: var(--bb-blog-detail-cta-bg);
  color: var(--bb-white);
  border: 0;
}

.bb-blog-detail-cta-label {
  width: fit-content;
  min-height: 26px;
  padding: 0 9px;
  margin-bottom: 0.625rem;
  background-color: color-mix(in srgb, var(--bb-blog-detail-on-dark) 11%, transparent);
  color: color-mix(in srgb, var(--bb-blog-detail-accent) 36%, var(--bb-blog-detail-on-dark));
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-detail-cta-title {
  margin: 0 0 8px;
  color: var(--bb-white);
  font-size: var(--bb-h5);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-detail-cta-text {
  margin: 0 0 15px;
  color: color-mix(in srgb, var(--bb-blog-detail-on-dark) 72%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-blog-detail-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-blog-detail-accent);
  color: var(--bb-primary-inverse) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-blog-detail-cta-link .material-symbols-outlined {
  font-size: var(--bb-fs-md);
}

/* =====================================
   Related / Subscribe
===================================== */
.bb-blog-detail-section {
  margin-top: 34px;
}

.bb-blog-detail-related-section {
  margin-top: 0;
  padding: 34px;
  border-radius: var(--bb-radius-2xl);
}

.bb-blog-detail-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 24px;
}

.bb-blog-detail-section-kicker {
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  margin-bottom: 9px;
  background-color: var(--bb-blog-detail-accent-soft);
  color: var(--bb-blog-detail-accent-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-detail-section-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
}

.bb-blog-detail-section-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-detail-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-blog-subscribe-section {
  padding: 36px 0 0;
}

.bb-blog-subscribe-card {
  margin-top: 0;
  padding: 32px;
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-blog-detail-subscribe-bg);
  border-color: color-mix(in srgb, var(--bb-blog-detail-accent) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: 22px;
  align-items: center;
}

.bb-blog-subscribe-card-title {
  margin: 0 0 9px;
  color: var(--bb-heading-color);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-subscribe-card-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
  margin: 0;
}

.bb-blog-subscribe-card-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-blog-detail-surface);
  border: 1px solid var(--bb-border-color);
  box-shadow: var(--bb-shadow-xs);
}

.bb-blog-subscribe-card-input {
  width: 100%;
  height: 42px;
  border: 0;
  outline: none;
  padding: 0 12px;
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  min-width: 0;
  background-color: transparent;
}

.bb-blog-subscribe-card-button {
  min-width: 124px;
  height: 42px;
  border: 0;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-blog-detail-dark-surface);
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  padding: 0 18px;
}

/* =====================================
   Empty
===================================== */
.bb-blog-empty-card {
  min-height: 320px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-detail-surface);
  border: 1px solid var(--bb-blog-detail-card-border);
  box-shadow: var(--bb-shadow-sm);
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 34px;
}

.bb-blog-empty-icon {
  width: 128px;
  height: 128px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-blog-detail-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-blog-detail-dark-surface);
}

.bb-blog-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
}

.bb-blog-empty-title {
  margin: 0 0 10px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-blog-empty-text {
  max-width: 47.5rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Blog Detail Author Card
===================================== */
.bb-blog-author-card {
  position: relative;
  display: grid;
  grid-template-columns: 5.375rem minmax(0, 1fr);
  gap: 1.125rem;
  align-items: center;
  overflow: hidden;
  padding: 1.375rem;
  border: var(--bb-border-width) solid var(--bb-blog-detail-card-border);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-blog-detail-author-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-blog-author-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.375rem;
  bottom: 1.375rem;
  width: 0.25rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-primary);
}

.bb-blog-author-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 5.375rem;
  height: 5.375rem;
  border: var(--bb-border-width) solid var(--bb-blog-detail-author-avatar-border);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-blog-detail-author-avatar-bg);
  box-shadow: var(--bb-shadow-sm);
}

.bb-blog-author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-blog-author-avatar .material-symbols-outlined,
.bb-blog-author-avatar .material-icons {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-2xl, 2.375rem);
  line-height: 1;
}

.bb-blog-author-body {
  min-width: 0;
}

.bb-blog-author-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.625rem;
  padding: 0 0.625rem;
  margin-bottom: 0.5625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-blog-detail-accent-soft);
  color: var(--bb-blog-detail-accent-text);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-blog-author-label .material-symbols-outlined,
.bb-blog-author-label .material-icons {
  color: var(--bb-blog-detail-accent-hover);
  font-size: var(--bb-icon-size-sm, 0.9375rem);
  line-height: 1;
}

.bb-blog-author-name {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-lg);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
}

.bb-blog-author-name a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color var(--bb-transition-normal);
}

.bb-blog-author-name a:hover {
  color: var(--bb-blog-detail-accent-hover) !important;
}

.bb-blog-author-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-blog-author-footnote {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.75rem;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-blog-author-footnote .material-symbols-outlined,
.bb-blog-author-footnote .material-icons {
  color: var(--bb-blog-detail-accent-hover);
  font-size: var(--bb-icon-size-sm, 0.9375rem);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-blog-detail-hero-inner,
  .bb-blog-detail-layout,
  .bb-blog-subscribe-card {
    grid-template-columns: 1fr;
  }
  .bb-blog-detail-side {
    position: static;
  }
  .bb-blog-detail-left-side {
    order: 1;
  }
  .bb-blog-detail-main {
    order: 2;
  }
  .bb-blog-detail-right-side {
    order: 3;
  }
  .bb-blog-detail-toc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-blog-detail-right-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
  }
  .bb-blog-detail-right-card {
    margin-bottom: 0;
  }
}
@media (max-width: 767.98px) {
  .bb-blog-detail-title {
    font-size: var(--bb-h2);
  }
  .bb-blog-detail-spot {
    font-size: var(--bb-fs-base);
  }
  .bb-blog-detail-cover-card {
    min-height: 0;
    padding: 12px;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-blog-detail-cover,
  .bb-blog-detail-cover img {
    min-height: 240px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-blog-detail-cover-badge {
    left: 22px;
    bottom: 22px;
  }
  .bb-blog-detail-article-card,
  .bb-blog-detail-related-section {
    padding: 1.375rem;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-blog-detail-content {
    font-size: var(--bb-fs-base);
    line-height: 1.82;
  }
  .bb-blog-detail-content h1 {
    font-size: var(--bb-h2);
  }
  .bb-blog-detail-content h2,
  .bb-blog-detail-content-block-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-blog-detail-content h3 {
    font-size: var(--bb-fs-xl);
  }
  .bb-blog-detail-content-block-subtitle {
    font-size: var(--bb-fs-base);
  }
  .bb-blog-detail-toc,
  .bb-blog-detail-right-side,
  .bb-blog-detail-related-grid {
    grid-template-columns: 1fr;
  }
  .bb-blog-subscribe-section {
    padding-top: 25px;
  }
  .bb-blog-subscribe-card {
    padding: 1.375rem;
  }
  .bb-blog-subscribe-card-form {
    border-radius: var(--bb-radius-xl);
    align-items: stretch;
    flex-direction: column;
  }
  .bb-blog-subscribe-card-button {
    width: 100%;
  }
  .bb-blog-empty-card {
    grid-template-columns: 1fr;
    padding: 1.375rem;
  }
  .bb-blog-empty-icon {
    width: 5rem;
    height: 5rem;
  }
  .bb-blog-author-card {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .bb-blog-author-avatar {
    width: 4.875rem;
    height: 4.875rem;
  }
  .bb-blog-author-name {
    font-size: var(--bb-fs-base);
  }
}
.bb-service-content-section {
  padding-top: 6px;
}

.bb-service-block {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-service-accent) 8%, transparent) 0, transparent 30%), var(--bb-service-section-bg, var(--bb-body-bg));
}

.bb-service-block + .bb-service-block {
  border-top: 1px solid var(--bb-service-border-soft);
}

.bb-service-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.bb-service-block-grid-reverse .bb-service-block-media {
  order: 2;
}

.bb-service-block-grid-reverse .bb-service-block-content {
  order: 1;
}

.bb-service-block-media {
  min-width: 0;
}

.bb-service-block-media img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid color-mix(in srgb, var(--bb-service-border) 72%, transparent);
  box-shadow: var(--bb-shadow-sm);
}

.bb-service-block-content {
  min-width: 0;
}

.bb-service-block-label,
.bb-service-faq-label {
  gap: 0.4375rem;
  margin-bottom: 14px;
}

.bb-service-block-label .material-symbols-outlined,
.bb-service-faq-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-service-block-title {
  max-width: 47.5rem;
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.035em;
}

.bb-service-block-subtitle {
  max-width: 47.5rem;
  margin-bottom: 14px;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-service-block-subtitle p,
.bb-service-block-subtitle h1,
.bb-service-block-subtitle h2,
.bb-service-block-subtitle h3,
.bb-service-block-subtitle h4,
.bb-service-block-subtitle h5,
.bb-service-block-subtitle h6 {
  margin-bottom: 0;
}

.bb-service-block-text {
  max-width: 820px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-service-block-text p:last-child {
  margin-bottom: 0;
}

.bb-service-block-full {
  max-width: 920px;
  margin: 0 auto;
  padding: 42px;
  border: 1px solid var(--bb-service-border-soft);
  border-radius: var(--bb-radius-2xl);
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  box-shadow: var(--bb-shadow-xs);
  text-align: center;
}

.bb-service-block-full .bb-service-block-title,
.bb-service-block-full .bb-service-block-subtitle,
.bb-service-block-full .bb-service-block-text {
  margin-left: auto;
  margin-right: auto;
}

.bb-service-faq-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--bb-service-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-service-faq-head {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bb-service-border-soft);
  text-align: center;
}

.bb-service-faq-title {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.025em;
}

.bb-service-faq-text {
  max-width: 680px;
  margin: 0 auto;
  color: var(--bb-secondary-color);
}

.bb-service-faq-content {
  min-width: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-service-block {
    padding: 48px 0;
  }
  .bb-service-block-grid,
  .bb-service-block-grid-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bb-service-block-grid-reverse .bb-service-block-media,
  .bb-service-block-grid-reverse .bb-service-block-content {
    order: initial;
  }
  .bb-service-block-media img {
    max-height: 380px;
  }
  .bb-service-block-full {
    padding: 30px;
  }
}
@media (max-width: 575.98px) {
  .bb-service-content-section {
    padding-top: 24px;
  }
  .bb-service-block {
    padding: 36px 0;
  }
  .bb-service-block-media img {
    max-height: 300px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-service-block-full,
  .bb-service-faq-shell {
    padding: 1.375rem;
    border-radius: var(--bb-radius-xl);
  }
}
/* =====================================
   Bulbulustur Web - News
   Scope: .bb-news-page
===================================== */
/* =====================================
   News Mode Tokens
===================================== */
.bb-news-page {
  --bb-news-page-bg: var(--bb-body-bg);
  --bb-news-surface: var(--bb-surface-elevated);
  --bb-news-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-body-bg));
  --bb-news-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-news-border-strong: color-mix(in srgb, var(--bb-border-color) 92%, var(--bb-body-bg));
  --bb-news-logo-bg: color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-body-bg));
  --bb-news-media-card-bg: var(--bb-surface-elevated);
  --bb-news-primary-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-news-primary-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-news-primary-border: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-news-primary-orb: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-news-hero-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 17rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-news-media-resources-bg:
      radial-gradient(
          circle at 90% 0%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 18rem
      ),
      var(--bb-news-media-card-bg);
  --bb-news-subscribe-icon-shadow:
      0 1rem 2rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-news-subscribe-button-shadow:
      0 0.85rem 1.75rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-news-shadow-soft:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-news-shadow-strong:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
  --bb-news-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-emphasis-color) 12%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
}

html[data-bs-theme=navy] .bb-news-page {
  --bb-news-page-bg: var(--bb-body-bg);
  --bb-news-surface: var(--bb-surface-elevated);
  --bb-news-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg));
  --bb-news-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-news-border-strong: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-news-logo-bg: color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg));
  --bb-news-media-card-bg: var(--bb-surface-elevated);
  --bb-news-primary-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-news-primary-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-news-primary-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-news-primary-orb: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-news-hero-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 13%, transparent),
          transparent 17rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-news-media-resources-bg:
      radial-gradient(
          circle at 90% 0%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 18rem
      ),
      var(--bb-news-media-card-bg);
  --bb-news-shadow-soft:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-news-shadow-strong:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-news-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 13%, transparent);
}

html[data-bs-theme=dark] .bb-news-page {
  --bb-news-page-bg: var(--bb-body-bg);
  --bb-news-surface: var(--bb-surface-elevated);
  --bb-news-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-news-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-news-border-strong: color-mix(in srgb, var(--bb-border-color) 92%, transparent);
  --bb-news-logo-bg: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-news-media-card-bg: var(--bb-surface-elevated);
  --bb-news-primary-soft: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-body-bg));
  --bb-news-primary-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-news-primary-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-news-primary-orb: color-mix(in srgb, var(--bb-primary) 9%, transparent);
  --bb-news-hero-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 17rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-news-media-resources-bg:
      radial-gradient(
          circle at 90% 0%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 18rem
      ),
      var(--bb-news-media-card-bg);
  --bb-news-shadow-soft:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-news-shadow-strong:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 28%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-news-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black) 30%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 15%, transparent);
}

/* =====================================
   Page Base
===================================== */
.bb-news-page {
  min-height: 100%;
  color: var(--bb-body-color);
  background-color: var(--bb-news-page-bg);
}

/* =====================================
   News Hero
===================================== */
.bb-news-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bb-news-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-news-border);
}

.bb-news-hero::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 9vw, 8rem);
  bottom: -4rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background-color: var(--bb-news-primary-orb);
  pointer-events: none;
}

.bb-news-hero-content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.bb-news-hero-chip {
  margin-bottom: 0.85rem;
}

.bb-news-hero-chip .material-symbols-outlined,
.bb-news-hero-chip i {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
  font-style: normal;
}

.bb-news-hero-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.bb-news-hero-text {
  max-width: 44rem;
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Featured News
===================================== */
.bb-news-featured-section {
  position: relative;
  z-index: 3;
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2.25rem, 5vw, 4rem);
  background-color: var(--bb-news-page-bg);
}

.bb-news-featured-card {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-news-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-news-surface);
  box-shadow: var(--bb-news-shadow-strong);
}

.bb-news-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.9fr);
  min-height: 24rem;
}

.bb-news-featured-media {
  position: relative;
  display: block;
  min-height: 22rem;
  overflow: hidden;
  background-color: var(--bb-news-logo-bg);
  text-decoration: none !important;
}

.bb-news-featured-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.35rem;
  background-color: var(--bb-primary);
}

.bb-news-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  object-fit: contain;
  transition: transform var(--bb-transition-normal);
}

.bb-news-featured-card:hover .bb-news-featured-media img {
  transform: scale(1.025);
}

.bb-news-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.bb-news-featured-chip {
  width: max-content;
  margin-bottom: 1rem;
}

.bb-news-featured-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3.1vw, 2.45rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.bb-news-featured-text {
  max-width: 33rem;
  margin: 0.9rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-news-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  width: max-content;
  margin-top: 1.5rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-news-featured-link .material-symbols-outlined,
.bb-news-featured-link i {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-style: normal;
}

/* =====================================
   News Blocks
===================================== */
.bb-news-list-section {
  padding-top: clamp(1rem, 3vw, 2rem);
}

.bb-news-press-section {
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

.bb-news-media-section {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.bb-news-block {
  min-width: 0;
}

.bb-news-block-head,
.bb-news-media-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.375rem;
}

.bb-news-block-title,
.bb-news-media-title {
  margin: 0.55rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.04em;
}

.bb-news-block-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
  white-space: nowrap;
}

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

.bb-news-block-link .material-symbols-outlined,
.bb-news-block-link i {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-style: normal;
}

/* =====================================
   News Cards
===================================== */
.bb-news-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.bb-news-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: var(--bb-border-width) solid var(--bb-news-border);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-news-surface);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-news-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--bb-news-primary-border);
  box-shadow: var(--bb-news-shadow-hover);
}

.bb-news-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: var(--bb-news-logo-bg);
  text-decoration: none !important;
}

.bb-news-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.28rem;
  background-color: var(--bb-primary);
}

.bb-news-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 3vw, 2rem);
  object-fit: contain;
  transition: transform var(--bb-transition-normal);
}

.bb-news-card:hover .bb-news-card-media img {
  transform: scale(1.025);
}

.bb-news-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.bb-news-card-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 1.625rem;
  padding: 0 0.55rem;
  margin-bottom: 0.65rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-news-primary-soft);
  color: var(--bb-news-primary-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-news-card-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.bb-news-card-title a {
  color: inherit;
  text-decoration: none !important;
}

.bb-news-card-title a:hover {
  color: var(--bb-primary);
}

.bb-news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: max-content;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

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

.bb-news-card-link .material-symbols-outlined,
.bb-news-card-link i {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-style: normal;
}

/* =====================================
   Media Resources
===================================== */
.bb-news-media-resources-shell {
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: var(--bb-border-width) solid var(--bb-news-border);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-news-media-resources-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-news-media-resources-shell img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 16rem);
  max-height: 5rem;
  object-fit: contain;
}

.bb-news-media-resources-shell a {
  color: inherit;
  text-decoration: none !important;
}

.bb-news-media-resources-shell > * {
  min-width: 0;
}

.bb-news-media-resources-shell .row {
  row-gap: 1.25rem;
}

.bb-news-media-resources-shell .col,
.bb-news-media-resources-shell [class*=col-] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================
   News Subscribe
===================================== */
.bb-news-subscribe-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.55fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--bb-border-width) solid var(--bb-news-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-news-surface);
  box-shadow: var(--bb-news-shadow-soft);
}

.bb-news-subscribe-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bb-news-subscribe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-primary);
  color: var(--bb-dark);
  box-shadow: var(--bb-news-subscribe-icon-shadow);
}

.bb-news-subscribe-icon .material-symbols-outlined,
.bb-news-subscribe-icon i {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
  font-style: normal;
}

.bb-news-subscribe-copy {
  min-width: 0;
}

.bb-news-subscribe-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-news-subscribe-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-news-subscribe-text strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-news-subscribe-form {
  min-width: 0;
}

.bb-news-subscribe-input-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0.35rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
}

.bb-news-subscribe-input {
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.75rem 1rem;
  border: 0;
  outline: 0;
  background-color: transparent;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-medium);
  line-height: 1.4;
}

.bb-news-subscribe-input::placeholder {
  color: color-mix(in srgb, var(--bb-secondary-color) 58%, transparent);
}

.bb-news-subscribe-input:focus {
  box-shadow: none;
}

.bb-news-subscribe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.75rem 1.15rem;
  border: var(--bb-border-width) solid var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-primary);
  color: var(--bb-dark);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-news-subscribe-button:hover {
  transform: translateY(-0.0625rem);
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  border-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  box-shadow: var(--bb-news-subscribe-button-shadow);
}

/* =====================================
   News Detail Side Cards Compatibility
===================================== */
.bb-news-detail-contact,
.bb-news-detail-source {
  min-width: 0;
  padding: 1rem;
  border: var(--bb-border-width) solid var(--bb-news-border);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-news-surface);
  box-shadow: var(--bb-shadow-xs);
}

.bb-news-detail-contact {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.85rem;
}

.bb-news-detail-source {
  grid-column: 2;
  margin-top: 1rem;
}

.bb-news-detail-contact-row,
.bb-news-detail-source {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-news-detail-contact-row strong,
.bb-news-detail-source strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-news-detail-contact-row a,
.bb-news-detail-source a {
  color: var(--bb-news-primary-text);
  font-weight: var(--bb-fw-bold);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.bb-news-detail-contact-row a:hover,
.bb-news-detail-source a:hover {
  color: var(--bb-primary);
  text-decoration: underline;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-news-featured-grid,
  .bb-news-subscribe-card,
  .bb-news-detail-article {
    grid-template-columns: 1fr;
  }
  .bb-news-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-news-block-head,
  .bb-news-media-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-news-featured-media {
    min-height: 18rem;
  }
  .bb-news-detail-contact {
    position: static;
    order: 2;
  }
  .bb-news-detail-source {
    grid-column: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-news-detail-cover {
    border-radius: var(--bb-radius-xl);
  }
  .bb-news-detail-cover img {
    max-height: 24rem;
  }
  .bb-news-detail-content,
  .bb-news-detail-content p {
    font-size: var(--bb-fs-base);
  }
}
@media (max-width: 575.98px) {
  .bb-news-hero {
    padding: 2.5rem 0;
  }
  .bb-news-featured-card,
  .bb-news-card,
  .bb-news-media-resources-shell,
  .bb-news-subscribe-card,
  .bb-news-detail-contact,
  .bb-news-detail-source {
    border-radius: var(--bb-radius-xl);
  }
  .bb-news-card-grid {
    grid-template-columns: 1fr;
  }
  .bb-news-featured-media {
    min-height: 15rem;
  }
  .bb-news-featured-media img,
  .bb-news-card-media img {
    padding: 1.25rem;
  }
  .bb-news-subscribe-content {
    align-items: flex-start;
  }
  .bb-news-subscribe-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-news-subscribe-input-group {
    grid-template-columns: 1fr;
    padding: 0.45rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-news-subscribe-input {
    min-height: 2.8rem;
    text-align: center;
  }
  .bb-news-subscribe-button {
    width: 100%;
    border-radius: var(--bb-radius);
  }
  .bb-news-detail-title {
    font-size: var(--bb-fs-3xl);
  }
}
/* =====================================
   Bulbulustur Web - News All
   Newsroom archive page
===================================== */
/* -------------------------------------
   Hero
------------------------------------- */
.bb-news-all-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 16%, transparent), transparent 17rem), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-body-bg)) 0%, var(--bb-body-bg) 100%);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-news-all-hero::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 9vw, 8rem);
  bottom: -4rem;
  width: 11rem;
  height: 11rem;
  background-color: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-news-all-hero-content {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.bb-news-all-hero-chip {
  margin-bottom: 0.85rem;
}

.bb-news-all-hero-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-news-all-hero-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.bb-news-all-hero-text {
  max-width: 44rem;
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.85;
}

/* -------------------------------------
   Head
------------------------------------- */
.bb-news-all-section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.bb-news-all-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bb-news-all-title {
  margin: 0.55rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-news-all-page-notify {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* -------------------------------------
   Grid
------------------------------------- */
.bb-news-all-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* -------------------------------------
   Card
------------------------------------- */
.bb-news-all-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--bb-coal-300) 4%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 2%, transparent);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-news-all-card:hover {
  transform: translateY(-0.1875rem);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: 0 1.35rem 3rem color-mix(in srgb, var(--bb-coal-300) 7%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 3%, transparent);
}

.bb-news-all-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  text-decoration: none;
}

.bb-news-all-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.28rem;
  background-color: var(--bb-primary);
}

.bb-news-all-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease;
}

.bb-news-all-card:hover .bb-news-all-card-media img {
  transform: scale(1.035);
}

.bb-news-all-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem;
}

.bb-news-all-card-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.55rem;
  color: color-mix(in srgb, var(--bb-coal-300) 86%, var(--bb-primary));
  background-color: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-white));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-news-all-card-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-news-all-card-title a {
  color: inherit;
  text-decoration: none;
}

.bb-news-all-card-title a:hover {
  color: var(--bb-primary);
}

.bb-news-all-card-link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem;
  width: max-content;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-news-all-card-link:hover {
  color: var(--bb-primary);
}

.bb-news-all-card-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* -------------------------------------
   Pagination
------------------------------------- */
.bb-news-all-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-news-all-empty {
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--bb-coal-300) 4%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 2%, transparent);
}

.bb-news-all-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-news-all-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-news-all-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-news-all-empty p {
  max-width: 34rem;
  margin: 0.625rem auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-news-all-empty-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-news-all-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-news-all-head,
  .bb-news-all-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .bb-news-all-hero {
    padding: 2.5rem 0;
  }
  .bb-news-all-grid {
    grid-template-columns: 1fr;
  }
  .bb-news-all-card,
  .bb-news-all-empty {
    border-radius: var(--bb-radius-lg);
  }
  .bb-news-all-empty-link {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Bulbulustur Web - News Detail
   Scope: .bb-news-detail-page
===================================== */
/* =====================================
   News Detail Mode Tokens
===================================== */
.bb-news-detail-page {
  --bb-news-detail-page-bg: var(--bb-body-bg);
  --bb-news-detail-surface: var(--bb-surface-elevated);
  --bb-news-detail-surface-soft: var(--bb-tertiary-bg);
  --bb-news-detail-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-news-detail-border-strong: color-mix(in srgb, var(--bb-border-color) 92%, var(--bb-body-bg));
  --bb-news-detail-title-color: var(--bb-emphasis-color);
  --bb-news-detail-text-color: var(--bb-body-color);
  --bb-news-detail-muted-color: var(--bb-secondary-color);
  --bb-news-detail-subtle-color: var(--bb-tertiary-color);
  --bb-news-detail-link-color: color-mix(in srgb, var(--bb-primary) 76%, var(--bb-emphasis-color));
  --bb-news-detail-link-hover-color: var(--bb-primary);
  --bb-news-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg));
  --bb-news-detail-primary-border: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-news-detail-primary-text: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-news-detail-primary-orb: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  --bb-news-detail-hero-bg:
      radial-gradient(
          circle at 84% 12%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-news-detail-cover-bg: var(--bb-tertiary-bg);
  --bb-news-detail-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-news-detail-side-bg: var(--bb-surface-elevated);
}

html[data-bs-theme=navy] .bb-news-detail-page {
  --bb-news-detail-page-bg: var(--bb-body-bg);
  --bb-news-detail-surface: var(--bb-surface-elevated);
  --bb-news-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 80%, var(--bb-body-bg));
  --bb-news-detail-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-news-detail-border-strong: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-news-detail-link-color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-news-detail-link-hover-color: var(--bb-primary);
  --bb-news-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-news-detail-primary-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-news-detail-primary-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-news-detail-primary-orb: color-mix(in srgb, var(--bb-primary) 7%, transparent);
  --bb-news-detail-hero-bg:
      radial-gradient(
          circle at 84% 12%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-primary)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-news-detail-cover-bg: color-mix(in srgb, var(--bb-black) 62%, var(--bb-body-bg));
  --bb-news-detail-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-news-detail-side-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-black));
}

html[data-bs-theme=dark] .bb-news-detail-page {
  --bb-news-detail-page-bg: var(--bb-body-bg);
  --bb-news-detail-surface: var(--bb-surface-elevated);
  --bb-news-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-body-bg));
  --bb-news-detail-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-news-detail-border-strong: color-mix(in srgb, var(--bb-border-color) 92%, transparent);
  --bb-news-detail-link-color: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-news-detail-link-hover-color: var(--bb-primary);
  --bb-news-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-news-detail-primary-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-news-detail-primary-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-news-detail-primary-orb: color-mix(in srgb, var(--bb-primary) 7%, transparent);
  --bb-news-detail-hero-bg:
      radial-gradient(
          circle at 84% 12%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-body-bg) 96%, var(--bb-primary)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-news-detail-cover-bg: color-mix(in srgb, var(--bb-black) 72%, var(--bb-body-bg));
  --bb-news-detail-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-news-detail-side-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-black));
}

/* =====================================
   Page Base
===================================== */
.bb-news-detail-page {
  min-height: 100%;
  color: var(--bb-news-detail-text-color);
  background-color: var(--bb-news-detail-page-bg);
}

/* =====================================
   Detail Hero
===================================== */
.bb-news-detail-page .bb-hero,
.bb-news-detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.25rem, 5vw, 4rem);
  background: var(--bb-news-detail-hero-bg);
  border-bottom: 0;
}

.bb-news-detail-page .bb-hero::before,
.bb-news-detail-hero::before {
  content: "";
  position: absolute;
  right: -7rem;
  top: -8rem;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background-color: var(--bb-news-detail-primary-orb);
  pointer-events: none;
}

.bb-news-detail-hero-content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin-inline: auto;
}

.bb-news-detail-label {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  margin-bottom: 1.25rem;
  border: var(--bb-border-width) solid var(--bb-news-detail-primary-border);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-news-detail-primary-soft);
  color: var(--bb-news-detail-primary-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-news-detail-title {
  max-width: 46rem;
  margin: 0;
  color: var(--bb-news-detail-title-color);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.065em;
  overflow-wrap: anywhere;
}

.bb-news-detail-subtitle {
  max-width: 42rem;
  margin: 1.125rem 0 0;
  color: var(--bb-news-detail-muted-color);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: var(--bb-line-height-loose);
}

.bb-news-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.bb-news-detail-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: var(--bb-border-width) solid var(--bb-news-detail-border);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-news-detail-surface);
  color: var(--bb-news-detail-muted-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-news-detail-meta-pill .material-symbols-outlined,
.bb-news-detail-meta-pill i {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  font-style: normal;
  line-height: 1;
}

/* =====================================
   Cover
===================================== */
.bb-news-detail-cover-section {
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding: 0 0 clamp(2rem, 5vw, 4rem);
}

.bb-news-detail-cover {
  overflow: hidden;
  max-width: 74rem;
  margin-inline: auto;
  border: var(--bb-border-width) solid var(--bb-news-detail-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-news-detail-cover-bg);
  box-shadow: var(--bb-news-detail-shadow);
}

.bb-news-detail-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}

/* =====================================
   Article Layout
===================================== */
.bb-news-detail-content-section {
  padding-top: 0;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.bb-news-detail-article {
  display: grid;
  grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 46rem) minmax(10rem, 0.22fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: 74rem;
  margin-inline: auto;
}

.bb-news-detail-content {
  grid-column: 2;
  min-width: 0;
  color: var(--bb-news-detail-text-color);
  font-size: var(--bb-fs-base);
  line-height: 1.95;
}

/* =====================================
   Article Typography
===================================== */
.bb-news-detail-content > *:first-child {
  margin-top: 0;
}

.bb-news-detail-content > *:last-child {
  margin-bottom: 0;
}

.bb-news-detail-content p {
  margin: 0 0 1.25rem;
  color: var(--bb-news-detail-text-color);
  font-size: var(--bb-fs-base);
  line-height: 1.95;
}

.bb-news-detail-content strong,
.bb-news-detail-content b {
  color: var(--bb-news-detail-title-color);
  font-weight: var(--bb-fw-bold);
}

.bb-news-detail-content h1,
.bb-news-detail-content h2,
.bb-news-detail-content h3,
.bb-news-detail-content h4 {
  color: var(--bb-news-detail-title-color);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.045em;
}

.bb-news-detail-content h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.bb-news-detail-content h3 {
  margin: 2.25rem 0 0.85rem;
  font-size: clamp(1.45rem, 2.25vw, 1.85rem);
}

.bb-news-detail-content h4 {
  margin: 1.75rem 0 0.75rem;
  font-size: var(--bb-fs-lg);
}

.bb-news-detail-content a {
  color: var(--bb-news-detail-link-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.bb-news-detail-content a:hover {
  color: var(--bb-news-detail-link-hover-color);
  text-decoration: underline;
}

.bb-news-detail-content ul,
.bb-news-detail-content ol {
  padding-left: 1.25rem;
  margin: 0 0 1.35rem;
}

.bb-news-detail-content li {
  margin-bottom: 0.5rem;
  color: var(--bb-news-detail-text-color);
  line-height: var(--bb-line-height-loose);
}

.bb-news-detail-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 0.25rem solid var(--bb-primary);
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-news-detail-surface-soft);
  color: var(--bb-news-detail-title-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

.bb-news-detail-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  border-radius: var(--bb-radius-xl);
}

/* =====================================
   Left / Right Meta Rail
===================================== */
.bb-news-detail-contact {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.bb-news-detail-contact::before {
  content: "Basın İletişimi";
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-news-detail-subtle-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-news-detail-contact-row {
  padding-top: 0.85rem;
  border-top: var(--bb-border-width) solid var(--bb-news-detail-border);
  color: var(--bb-news-detail-muted-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-news-detail-contact-row strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bb-news-detail-title-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-news-detail-contact-row a {
  color: var(--bb-news-detail-muted-color);
  font-weight: var(--bb-fw-semibold);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.bb-news-detail-contact-row a:hover {
  color: var(--bb-news-detail-link-hover-color);
  text-decoration: underline;
}

.bb-news-detail-source {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 6rem;
  min-width: 0;
  padding: 0.85rem 0 0;
  border: 0;
  border-top: var(--bb-border-width) solid var(--bb-news-detail-border);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--bb-news-detail-muted-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-news-detail-source strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-news-detail-title-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-news-detail-source a {
  color: var(--bb-news-detail-muted-color);
  font-weight: var(--bb-fw-semibold);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.bb-news-detail-source a:hover {
  color: var(--bb-news-detail-link-hover-color);
  text-decoration: underline;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-news-detail-article {
    grid-template-columns: minmax(0, 44rem) minmax(12rem, 0.28fr);
    max-width: 64rem;
  }
  .bb-news-detail-content {
    grid-column: 1;
  }
  .bb-news-detail-contact {
    grid-column: 2;
  }
  .bb-news-detail-source {
    grid-column: 2;
    grid-row: auto;
    margin-top: 1.25rem;
  }
}
@media (max-width: 991.98px) {
  .bb-news-detail-hero-content {
    max-width: 100%;
  }
  .bb-news-detail-article {
    grid-template-columns: 1fr;
    max-width: 46rem;
  }
  .bb-news-detail-content,
  .bb-news-detail-contact,
  .bb-news-detail-source {
    grid-column: 1;
  }
  .bb-news-detail-contact,
  .bb-news-detail-source {
    position: static;
  }
  .bb-news-detail-contact {
    order: 2;
    padding: 1rem;
    border: var(--bb-border-width) solid var(--bb-news-detail-border);
    border-radius: var(--bb-radius-xl);
    background-color: var(--bb-news-detail-side-bg);
    box-shadow: var(--bb-shadow-xs);
  }
  .bb-news-detail-source {
    padding: 1rem;
    border: var(--bb-border-width) solid var(--bb-news-detail-border);
    border-radius: var(--bb-radius-xl);
    background-color: var(--bb-news-detail-side-bg);
    box-shadow: var(--bb-shadow-xs);
  }
}
@media (max-width: 767.98px) {
  .bb-news-detail-page .bb-hero,
  .bb-news-detail-hero {
    padding: 2.5rem 0 2rem;
  }
  .bb-news-detail-title {
    font-size: clamp(2.05rem, 10vw, 3.25rem);
    letter-spacing: -0.055em;
  }
  .bb-news-detail-cover {
    border-radius: var(--bb-radius-xl);
  }
  .bb-news-detail-cover img {
    max-height: 26rem;
  }
  .bb-news-detail-content,
  .bb-news-detail-content p {
    font-size: var(--bb-fs-base);
  }
}
@media (max-width: 575.98px) {
  .bb-news-detail-cover-section {
    padding-bottom: 2rem;
  }
  .bb-news-detail-cover {
    border-radius: var(--bb-radius-lg);
  }
  .bb-news-detail-content h2 {
    font-size: var(--bb-fs-2xl);
  }
  .bb-news-detail-content h3 {
    font-size: var(--bb-fs-xl);
  }
  .bb-news-detail-contact,
  .bb-news-detail-source {
    border-radius: var(--bb-radius-lg);
  }
}
/* =====================================
   Bulbulustur Web - Team / Our Team
   Layer: pages/about/_team.scss

   Purpose:
   - Our team page
   - Team detail page
   - Default bb-hero omurgası üzerine page-specific polish
   - Light / Navy / Dark safe
===================================== */
/* =====================================
   Team Local Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-team-accent: var(--bb-primary);
  --bb-team-accent-soft: color-mix(in srgb, var(--bb-team-accent) 13%, var(--bb-body-bg));
  --bb-team-accent-text: color-mix(in srgb, var(--bb-team-accent) 78%, var(--bb-heading-color));
  --bb-team-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-team-dark: var(--bb-brand-navy);
  --bb-team-dark-2: color-mix(in srgb, var(--bb-brand-navy) 86%, var(--bb-primary));
  --bb-team-dark-3: color-mix(in srgb, var(--bb-brand-navy) 74%, var(--bb-info));
  --bb-team-hero-on-dark: var(--bb-theme-on-dark);
  --bb-team-hero-muted-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  --bb-team-hero-subtle-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 12%, transparent);
  --bb-team-hero-border-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 14%, transparent);
}

/* =====================================
   Navy Mode Local Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-team-accent-soft: color-mix(in srgb, var(--bb-team-accent) 16%, var(--bb-body-bg));
  --bb-team-accent-text: color-mix(in srgb, var(--bb-team-accent) 88%, var(--bb-emphasis-color));
  --bb-team-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-team-dark: color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-brand-navy));
  --bb-team-dark-2: color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-primary));
  --bb-team-dark-3: color-mix(in srgb, var(--bb-surface-elevated) 70%, var(--bb-info));
  --bb-team-hero-muted-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 80%, transparent);
  --bb-team-hero-subtle-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 13%, transparent);
  --bb-team-hero-border-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 15%, transparent);
}

/* =====================================
   Dark Mode Local Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-team-accent-soft: color-mix(in srgb, var(--bb-team-accent) 15%, var(--bb-body-bg));
  --bb-team-accent-text: color-mix(in srgb, var(--bb-team-accent) 86%, var(--bb-emphasis-color));
  --bb-team-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-team-dark: color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-brand-navy));
  --bb-team-dark-2: color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-primary));
  --bb-team-dark-3: color-mix(in srgb, var(--bb-surface-elevated) 72%, var(--bb-info));
  --bb-team-hero-muted-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 80%, transparent);
  --bb-team-hero-subtle-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 13%, transparent);
  --bb-team-hero-border-on-dark: color-mix(in srgb, var(--bb-theme-on-dark) 15%, transparent);
}

/* =====================================
   Our Team Page Hero
   /about/ourteam
===================================== */
.bb-hero.bb-hero-dark.bb-ourteam-page-hero {
  --bb-hero-title-max-width: 54rem;
  --bb-hero-lead-max-width: 48rem;
  --bb-hero-aside-width: 22.5rem;
  --bb-hero-grid-gap: clamp(2.25rem, 5vw, 4.25rem);
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.25rem, 6vw, 5.75rem);
  padding-bottom: clamp(4.75rem, 6vw, 6.25rem);
  color: var(--bb-team-hero-on-dark);
  background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--bb-team-accent) 20%, transparent) 0, transparent 31%), radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--bb-team-accent) 10%, transparent) 0, transparent 30%), linear-gradient(135deg, var(--bb-team-dark) 0%, var(--bb-team-dark-2) 48%, var(--bb-team-dark-3) 100%);
  border-bottom-color: var(--bb-team-hero-border-on-dark);
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero::before {
  content: "";
  position: absolute;
  top: -6.875rem;
  right: -5.625rem;
  width: 21.25rem;
  height: 21.25rem;
  background-color: color-mix(in srgb, var(--bb-team-hero-on-dark) 6%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero::after {
  content: "";
  position: absolute;
  left: -7.5rem;
  bottom: -8.75rem;
  width: 24.375rem;
  height: 24.375rem;
  background-color: color-mix(in srgb, var(--bb-team-accent) 11%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-container {
  position: relative;
  z-index: 2;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-content {
  min-width: 0;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-label {
  gap: 0.45rem;
  min-height: 2rem;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  color: color-mix(in srgb, var(--bb-team-hero-on-dark) 88%, transparent);
  background-color: color-mix(in srgb, var(--bb-team-hero-on-dark) 11%, transparent);
  border: var(--bb-border-width) solid var(--bb-team-hero-border-on-dark);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-label .material-symbols-outlined {
  color: var(--bb-team-accent);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-title {
  color: var(--bb-team-hero-on-dark);
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-text {
  margin-top: 1rem;
  color: var(--bb-team-hero-muted-on-dark);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.85;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions {
  margin-top: 1.625rem;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions .bb-hero-btn-primary {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-team-accent);
  border-color: var(--bb-team-accent);
  box-shadow: 0 0.875rem 1.75rem color-mix(in srgb, var(--bb-team-accent) 18%, transparent);
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions .bb-hero-btn-primary:hover {
  color: var(--bb-primary-inverse);
  background-color: color-mix(in srgb, var(--bb-team-accent) 88%, var(--bb-brand-navy));
  border-color: color-mix(in srgb, var(--bb-team-accent) 88%, var(--bb-brand-navy));
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions .bb-hero-btn-secondary {
  color: color-mix(in srgb, var(--bb-team-hero-on-dark) 90%, transparent);
  background-color: transparent;
  border-color: transparent;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions .bb-hero-btn-secondary:hover {
  color: var(--bb-team-hero-on-dark);
  background-color: color-mix(in srgb, var(--bb-team-hero-on-dark) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-team-hero-on-dark) 14%, transparent);
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-aside {
  align-self: center;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card {
  position: relative;
  overflow: hidden;
  padding: 1.625rem;
  color: var(--bb-team-hero-on-dark);
  background-color: color-mix(in srgb, var(--bb-team-hero-on-dark) 10%, transparent);
  border-color: var(--bb-team-hero-border-on-dark);
  box-shadow: var(--bb-shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card::after {
  content: "";
  position: absolute;
  right: -4.375rem;
  bottom: -5.625rem;
  width: 13.125rem;
  height: 13.125rem;
  background-color: color-mix(in srgb, var(--bb-team-accent) 14%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-head,
.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-content,
.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-actions {
  position: relative;
  z-index: 1;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-head {
  margin-bottom: 1rem;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-team-accent);
  border-radius: var(--bb-radius-xl);
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-icon {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-title {
  color: var(--bb-team-hero-on-dark);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card-text {
  color: color-mix(in srgb, var(--bb-team-hero-on-dark) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Section Head
===================================== */
.bb-team-section-head {
  max-width: 52.5rem;
  margin-bottom: 2rem;
}

.bb-team-section-head-center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.bb-team-section-label {
  gap: 0.4375rem;
  margin-bottom: 0.75rem;
  color: var(--bb-team-accent-text);
  background-color: var(--bb-team-accent-soft);
}

.bb-team-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-team-section-title {
  margin-bottom: 0.75rem;
  font-size: clamp(1.85rem, 3vw, 2.7rem);
}

.bb-team-section-text {
  margin-bottom: 0;
}

/* =====================================
   Founder
===================================== */
.bb-team-founder-section {
  background-color: var(--bb-body-bg);
}

.bb-team-founder-card {
  display: grid;
  grid-template-columns: 23.75rem minmax(0, 1fr);
  gap: 2.125rem;
  align-items: stretch;
  padding: 1.5rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-team-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-team-founder-media {
  overflow: hidden;
  min-height: 28.75rem;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-team-founder-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-team-founder-content {
  min-width: 0;
  padding: 0.625rem 0.5rem;
}

.bb-team-founder-role {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  margin-bottom: 0.875rem;
  padding: 0 0.75rem;
  color: var(--bb-team-accent-text);
  background-color: var(--bb-team-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-team-founder-content h2 {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-team-founder-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-team-founder-text p {
  margin-bottom: 0.9375rem;
}

.bb-team-founder-text p:last-child {
  margin-bottom: 0;
}

/* =====================================
   Quote
===================================== */
.bb-team-quote-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 4.375rem minmax(0, 1fr);
  gap: 1.125rem;
  margin-top: 1.625rem;
  padding: 1.75rem;
  color: var(--bb-team-hero-on-dark);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-team-accent) 18%, transparent) 0, transparent 32%), linear-gradient(135deg, var(--bb-team-dark) 0%, var(--bb-team-dark-2) 100%);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-team-quote-mark {
  color: var(--bb-team-accent);
  font-size: var(--bb-fs-display-xl);
  font-weight: var(--bb-fw-bold);
  line-height: 0.9;
}

.bb-team-quote-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.bb-team-quote-card h2,
.bb-team-quote-card h3 {
  margin: 0 0 0.5rem;
  color: var(--bb-team-hero-on-dark);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: -0.025em;
}

.bb-team-quote-card p {
  margin: 0;
  color: color-mix(in srgb, var(--bb-team-hero-on-dark) 72%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Members
===================================== */
.bb-team-cofounder-section {
  background-color: var(--bb-tertiary-bg);
}

.bb-team-member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.bb-team-member-card {
  display: block;
  overflow: hidden;
  height: 100%;
  color: inherit;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-team-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-team-member-card:hover {
  transform: translateY(-0.25rem);
  border-color: color-mix(in srgb, var(--bb-team-accent) 46%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-team-member-media {
  overflow: hidden;
  height: 19.375rem;
  background-color: var(--bb-tertiary-bg);
}

.bb-team-member-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-transition-normal);
}

.bb-team-member-card:hover .bb-team-member-media img {
  transform: scale(1.035);
}

.bb-team-member-body {
  padding: 1.25rem;
  text-align: center;
}

.bb-team-member-body h3 {
  margin-bottom: 0.375rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-team-member-body span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Team Detail Content
===================================== */
.bb-team-detail-content {
  min-width: 0;
}

.bb-team-detail-label {
  gap: 0.4375rem;
  margin-bottom: 1rem;
}

.bb-team-detail-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-team-detail-title {
  max-width: 47.5rem;
  margin-bottom: 0.875rem;
  color: var(--bb-heading-color);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.bb-team-detail-role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2.25rem;
  margin-bottom: 1.5rem;
  padding: 0 0.875rem;
  color: var(--bb-team-accent-text);
  background-color: var(--bb-team-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-team-detail-about {
  max-width: 51.25rem;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.9;
}

.bb-team-detail-about p:last-child {
  margin-bottom: 0;
}

.bb-team-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.875rem;
}

.bb-team-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.bb-team-detail-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Team Detail Visual
===================================== */
.bb-team-detail-visual {
  min-width: 0;
}

.bb-team-detail-photo-card {
  position: relative;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  border: var(--bb-border-width) solid var(--bb-team-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-team-detail-photo-card::before {
  content: "";
  position: absolute;
  inset: 1.125rem -1.125rem -1.125rem 1.125rem;
  z-index: -1;
  background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--bb-team-accent) 24%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-team-accent) 10%, transparent);
  border-radius: var(--bb-radius-2xl);
}

.bb-team-detail-photo {
  overflow: hidden;
  aspect-ratio: 4/5;
  background-color: var(--bb-tertiary-bg);
  border-radius: calc(var(--bb-radius-2xl) - 0.375rem);
}

.bb-team-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}

.bb-team-detail-photo-caption {
  display: grid;
  gap: 0.1875rem;
  padding: 1rem 0.25rem 0.125rem;
}

.bb-team-detail-photo-caption strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-team-detail-photo-caption span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Team Detail Page Hero
   /about/team/{...}
===================================== */
.bb-team-detail-page-hero {
  --bb-hero-title-max-width: 46rem;
  --bb-hero-lead-max-width: 48rem;
  --bb-hero-aside-width: 29rem;
  --bb-hero-grid-gap: clamp(2.25rem, 5vw, 5rem);
  padding-top: clamp(2.75rem, 4vw, 3.75rem);
  padding-bottom: clamp(3.5rem, 5vw, 4.75rem);
}

.bb-team-detail-page-hero-content {
  min-width: 0;
}

.bb-team-detail-page-hero-breadcrumb {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.bb-team-detail-page-hero-chips {
  margin-top: 0;
  margin-bottom: 1.05rem;
}

.bb-team-detail-page-hero-team-chip {
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-body-bg) 78%, transparent);
  border-color: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  box-shadow: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-team-detail-page-hero-team-chip .material-symbols-outlined {
  color: var(--bb-tertiary-color);
}

.bb-team-detail-page-hero-role-chip {
  color: var(--bb-team-accent-text);
  background-color: var(--bb-team-accent-soft);
  border-color: color-mix(in srgb, var(--bb-team-accent) 22%, var(--bb-border-color));
}

.bb-team-detail-page-hero-title {
  color: var(--bb-heading-color);
  font-size: clamp(3rem, 6.25vw, 5rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.bb-team-detail-page-hero-about {
  max-width: 52rem;
  margin-top: 1.75rem;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.9;
}

.bb-team-detail-page-hero-about p {
  margin-bottom: 0.95rem;
}

.bb-team-detail-page-hero-about p:last-child {
  margin-bottom: 0;
}

.bb-team-detail-page-hero-actions {
  margin-top: 2rem;
}

.bb-team-detail-page-hero-back-btn {
  min-height: 2.75rem;
  padding-right: 0;
  padding-left: 0;
  color: var(--bb-heading-color);
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.bb-team-detail-page-hero-back-btn:hover {
  color: var(--bb-primary);
  background-color: transparent;
  border-color: transparent;
}

.bb-team-detail-page-hero-aside {
  align-self: center;
}

.bb-team-detail-page-hero-photo-card {
  position: relative;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-team-detail-page-hero-photo-card::before {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  z-index: -1;
  width: 10rem;
  height: 10rem;
  background-color: color-mix(in srgb, var(--bb-team-accent) 14%, transparent);
  border-radius: var(--bb-radius-2xl);
}

.bb-team-detail-page-hero-photo {
  overflow: hidden;
  aspect-ratio: 4/5;
  background-color: var(--bb-tertiary-bg);
  border-radius: calc(var(--bb-radius-2xl) - 0.375rem);
}

.bb-team-detail-page-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}

.bb-team-detail-page-hero-photo-caption {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0.25rem 0.125rem;
}

.bb-team-detail-page-hero-photo-caption strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-team-detail-page-hero-photo-caption span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-aside {
    justify-self: start;
  }
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card {
    max-width: 32.5rem;
  }
  .bb-team-founder-card {
    grid-template-columns: 1fr;
  }
  .bb-team-founder-media {
    min-height: 24rem;
  }
  .bb-team-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-team-detail-page-hero-aside {
    justify-self: start;
  }
  .bb-team-detail-page-hero-photo-card {
    max-width: 28rem;
  }
}
@media (max-width: 991.98px) {
  .bb-team-member-grid {
    gap: 1.25rem;
  }
  .bb-team-quote-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero {
    padding-top: 3.25rem;
    padding-bottom: 3.75rem;
  }
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-title {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
  }
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-card {
    display: none;
  }
  .bb-team-founder-card {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-team-founder-media {
    min-height: 20rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-team-member-grid {
    grid-template-columns: 1fr;
  }
  .bb-team-detail-title {
    font-size: clamp(2.25rem, 13vw, 3.6rem);
  }
  .bb-team-detail-about {
    font-size: var(--bb-fs-base);
    line-height: var(--bb-line-height-loose);
  }
  .bb-team-detail-photo-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-team-detail-photo {
    border-radius: calc(var(--bb-radius-xl) - 0.25rem);
  }
  .bb-team-detail-page-hero {
    padding-top: 2.25rem;
    padding-bottom: 3.25rem;
  }
  .bb-team-detail-page-hero-title {
    font-size: clamp(2.45rem, 13vw, 3.75rem);
  }
  .bb-team-detail-page-hero-about {
    margin-top: 1.35rem;
    font-size: var(--bb-fs-base);
    line-height: var(--bb-line-height-loose);
  }
  .bb-team-detail-page-hero-photo-card {
    max-width: 100%;
    border-radius: var(--bb-radius-xl);
  }
  .bb-team-detail-page-hero-photo {
    border-radius: calc(var(--bb-radius-xl) - 0.25rem);
  }
}
@media (max-width: 575.98px) {
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero {
    padding-top: 2.75rem;
    padding-bottom: 3.25rem;
  }
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions {
    margin-top: 1.375rem;
  }
  .bb-hero.bb-hero-dark.bb-ourteam-page-hero .bb-ourteam-page-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .bb-team-section-head {
    margin-bottom: 1.5rem;
  }
  .bb-team-quote-card {
    padding: 1.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-team-detail-page-hero-chips {
    gap: 0.45rem;
  }
  .bb-team-detail-page-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/* =====================================
   Contact Page
   Merkezi bb-hero / bb-section omurgasına uyumlu saf contact stilleri.
   Root hero ve section makyajı yoktur.
===================================== */
/* =====================================
   Contact Hero
   <section class="bb-hero"> içinde çalışan iç hero componentleri.
===================================== */
.bb-contact-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(22.5rem, 0.85fr);
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

.bb-contact-hero-content {
  min-width: 0;
}

.bb-contact-hero-content > .bb-hero-label {
  width: fit-content;
  min-height: 2rem;
  margin-bottom: 1rem;
  padding: 0;
  color: var(--bb-tertiary-color);
  background-color: transparent;
  border: 0;
  box-shadow: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-contact-hero-title {
  max-width: 47.5rem;
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-contact-hero-lead {
  max-width: 45rem;
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: var(--bb-line-height-content);
}

.bb-contact-hero-actions {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.bb-contact-hero-actions .btn {
  min-height: 2.875rem;
  padding-inline: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-lg);
  font-weight: var(--bb-fw-semibold);
}

.bb-contact-hero-actions .btn-outline-secondary {
  color: var(--bb-heading-color);
  background-color: transparent;
  border-color: transparent;
}

.bb-contact-hero-actions .btn-outline-secondary:hover {
  color: var(--bb-heading-color);
  background-color: color-mix(in srgb, var(--bb-body-bg) 74%, transparent);
  border-color: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
}

.bb-contact-hero-aside {
  min-width: 0;
}

.bb-contact-hero-box {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-contact-hero-pattern {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 16.25rem;
  height: 16.25rem;
  background-color: var(--bb-warning-clarity);
  border-radius: 50%;
  pointer-events: none;
}

.bb-contact-hero-pattern::after {
  content: "";
  position: absolute;
  left: -5rem;
  bottom: -3.75rem;
  width: 11.25rem;
  height: 11.25rem;
  background-color: var(--bb-dark-light);
  border-radius: 50%;
}

.bb-contact-hero-box-title,
.bb-contact-mini-stat {
  position: relative;
  z-index: 1;
}

.bb-contact-hero-box-title {
  margin: 0 0 1.25rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-contact-mini-stat {
  padding: 0.875rem 0;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-contact-mini-stat:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bb-contact-mini-stat strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-mini-stat span {
  display: block;
  margin-top: 0.1875rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Contact Channels Head
===================================== */
.bb-contact-section-head {
  max-width: 53.75rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.bb-contact-section-title {
  margin: 0 0 0.875rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-contact-section-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Contact Channel Cards
===================================== */
.bb-contact-card {
  height: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--bb-warning);
  box-shadow: var(--bb-shadow-sm);
}

.bb-contact-card-label {
  display: inline-block;
  margin-bottom: 0.875rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-contact-card-title {
  margin: 0 0 0.875rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-card-text {
  flex: 1 1 auto;
  min-height: 5.25rem;
  margin: 0 0 1.5rem;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

.bb-contact-card-action {
  margin-top: auto;
}

.bb-contact-card-action .btn {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-md);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Contact Direct Access
   Eski "alternative" alanının temiz adı.
   Section makyajı değildir, içerideki component shell'dir.
===================================== */
.bb-contact-direct-access {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--bb-white);
  background: radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--bb-warning) 12%, transparent) 0, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 96%, var(--bb-info)) 0%, var(--bb-coal-400) 100%);
  border-radius: var(--bb-radius-2xl);
}

.bb-contact-direct-access::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  width: 16rem;
  height: 16rem;
  background-color: color-mix(in srgb, var(--bb-warning) 10%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-contact-direct-access-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 3rem);
  align-items: stretch;
}

.bb-contact-direct-access .bb-web-title {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.045em;
}

.bb-contact-direct-access-text {
  max-width: 32.5rem;
  margin-top: 1.5rem;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  line-height: var(--bb-line-height-content);
}

.bb-contact-direct-access-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.bb-contact-direct-access-card {
  height: 100%;
  padding: 1.5rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
}

.bb-contact-direct-access-card-title {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-direct-access-card-line {
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  line-height: 1.9;
}

.bb-contact-direct-access-card .btn {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-md);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Contact FAQ
===================================== */
.bb-contact-faq-wrap {
  max-width: 55rem;
  margin: 0 auto;
}

.bb-contact-faq-wrap .bb-accordion-icon.material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-contact-faq-item {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-contact-faq-item:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.bb-contact-faq-question {
  margin-bottom: 0.5rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-faq-answer {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Contact Form Topbar
===================================== */
.bb-contact-form-topbar {
  position: relative;
  overflow: hidden;
  padding: 1.125rem 0 1.375rem;
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-contact-form-accent) 13%, transparent) 0, transparent 28%), linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-contact-form-border-soft);
}

.bb-contact-form-topbar::before {
  content: "";
  position: absolute;
  right: -5.625rem;
  top: -6.25rem;
  width: 16.25rem;
  height: 16.25rem;
  background-color: color-mix(in srgb, var(--bb-contact-form-accent) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-contact-form-topbar .bb-web-container {
  position: relative;
  z-index: 2;
}

.bb-contact-form-topbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16.25rem, 22.5rem);
  gap: 1.875rem;
  align-items: end;
}

.bb-contact-form-kicker {
  gap: 0.4375rem;
  margin-bottom: 0.625rem;
}

.bb-contact-form-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-contact-form-title {
  max-width: 55rem;
  margin-bottom: 0.5rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-contact-form-lead {
  max-width: 47.5rem;
  margin-bottom: 0;
  color: var(--bb-secondary-color);
}

.bb-contact-form-topbar-note {
  padding: 1rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  border: var(--bb-border-width) solid var(--bb-contact-form-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-contact-form-topbar-note > span {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-contact-form-accent-text);
  background-color: var(--bb-contact-form-accent-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-contact-form-topbar-note .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-contact-form-topbar-note strong {
  display: block;
  margin-bottom: 0.1875rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-form-topbar-note p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Contact Form Layout
===================================== */
.bb-contact-form-layout {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: flex-start;
}

.bb-contact-form-aside {
  position: sticky;
  top: 1.5rem;
  display: grid;
  gap: 0.875rem;
  min-width: 0;
  min-height: 0;
}

.bb-contact-form-main {
  min-width: 0;
  min-height: 0;
}

.bb-contact-form-info-card,
.bb-contact-form-note-card,
.bb-contact-form-help-card,
.bb-contact-form-card {
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-contact-form-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-contact-form-info-card,
.bb-contact-form-note-card,
.bb-contact-form-help-card {
  padding: 1.125rem;
}

.bb-contact-form-info-card {
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-contact-form-accent) 12%, transparent) 0, transparent 34%), var(--bb-body-bg);
}

.bb-contact-form-info-icon,
.bb-contact-form-help-icon {
  width: 3.125rem;
  height: 3.125rem;
  margin-bottom: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-contact-form-accent-text);
  background-color: var(--bb-contact-form-accent-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-contact-form-info-icon .material-symbols-outlined,
.bb-contact-form-help-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-contact-form-info-card h2,
.bb-contact-form-note-card h3,
.bb-contact-form-help-card h3 {
  margin: 0 0 0.5625rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
  line-height: 1.22;
}

.bb-contact-form-info-card p,
.bb-contact-form-help-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-contact-form-note-card ul {
  display: grid;
  gap: 0.625rem;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.bb-contact-form-note-card li {
  position: relative;
  padding-left: 1.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-contact-form-note-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--bb-contact-form-accent);
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bb-contact-form-accent) 14%, transparent);
}

.bb-contact-form-help-card .btn {
  width: 100%;
  margin-top: 0.75rem;
}

/* =====================================
   Contact Form Card
===================================== */
.bb-contact-form-card {
  overflow: hidden;
}

.bb-contact-form-card-head {
  padding: 1.375rem 1.625rem;
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-contact-form-accent) 8%, transparent) 0, transparent 34%), var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-contact-form-border-soft);
}

.bb-contact-form-card-label {
  gap: 0.4375rem;
  margin-bottom: 0.5625rem;
}

.bb-contact-form-card-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-contact-form-card-head h2 {
  margin: 0 0 0.375rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-contact-form-card-head p {
  max-width: 45rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-contact-form-alert {
  margin: 1.5rem 1.625rem 0;
  padding: 0.875rem 1rem;
  color: var(--bb-info);
  background-color: var(--bb-info-light);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 28%, var(--bb-contact-form-border));
  border-radius: var(--bb-radius-xl);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-form-card form,
.bb-contact-form {
  display: block;
  padding: 1.5rem 1.625rem 1.625rem;
}

.bb-contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.125rem;
}

.bb-contact-form-field {
  min-width: 0;
}

.bb-contact-form-field-full {
  grid-column: 1/-1;
}

.bb-contact-form-label {
  display: inline-flex;
  margin-bottom: 0.4375rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-form-label span {
  margin-left: 0.1875rem;
  color: var(--bb-danger);
}

.bb-contact-form-field .form-control {
  min-height: 2.75rem;
}

.bb-contact-textarea {
  min-height: 8.125rem;
  resize: vertical;
}

.bb-contact-form-check {
  padding: 0.75rem 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-contact-form-border-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-contact-form-check .form-check-input {
  flex: 0 0 auto;
  margin-top: 0.25rem;
}

.bb-contact-form-check .form-check-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-contact-form-submit-row {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding-top: 0.125rem;
}

.bb-contact-form-submit-row .btn {
  min-width: 11.25rem;
}

.bb-contact-form-submit-note {
  max-width: 35rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Contact Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-contact-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-contact-hero-aside {
    max-width: 32.5rem;
  }
  .bb-contact-form-layout {
    grid-template-columns: 18.125rem minmax(0, 1fr);
  }
}
@media (max-width: 991.98px) {
  .bb-contact-direct-access-grid,
  .bb-contact-form-topbar-inner,
  .bb-contact-form-layout {
    grid-template-columns: 1fr;
  }
  .bb-contact-direct-access-card-grid {
    grid-template-columns: 1fr;
  }
  .bb-contact-form-aside {
    position: static;
  }
  .bb-contact-form-topbar-note {
    max-width: 28.75rem;
  }
}
@media (max-width: 767.98px) {
  .bb-contact-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-contact-hero-actions .btn {
    width: 100%;
  }
  .bb-contact-hero-aside {
    max-width: 100%;
  }
  .bb-contact-section-head {
    text-align: left;
  }
  .bb-contact-section-text {
    font-size: var(--bb-icon-size-md);
  }
  .bb-contact-card {
    padding: 1.25rem;
  }
  .bb-contact-card-text {
    min-height: auto;
  }
  .bb-contact-direct-access {
    padding: 1.5rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-contact-form-topbar {
    padding: 1.375rem 0 1.75rem;
  }
  .bb-contact-form-card-head,
  .bb-contact-form-card form,
  .bb-contact-form {
    padding: 1.375rem;
  }
  .bb-contact-form-alert {
    margin: 1.375rem 1.375rem 0;
  }
  .bb-contact-form-grid {
    grid-template-columns: 1fr;
  }
  .bb-contact-form-submit-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-contact-form-submit-row .btn {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-contact-hero-box,
  .bb-contact-card,
  .bb-contact-direct-access,
  .bb-contact-direct-access-card,
  .bb-contact-form-card,
  .bb-contact-form-info-card,
  .bb-contact-form-note-card,
  .bb-contact-form-help-card,
  .bb-contact-form-topbar-note {
    border-radius: var(--bb-radius-xl);
  }
}
/* =====================================
   Bulbulustur Web - IBAN / Bank Accounts Page
   Layer: pages/web/_ibans.scss

   Purpose:
   - Havale / EFT banka hesapları sayfası.
   - Hero, owner card, payment warning, bank account cards,
     copy button and bottom security note.
   - Bank cards modernized for Main CSS new world.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor root:
   - .bb-ibans-page

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only IBAN page local tokens.
===================================== */
/* =====================================
   IBAN Page Local Tokens - Light Default
===================================== */
.bb-ibans-page {
  --bb-ibans-accent: var(--bb-primary);
  --bb-ibans-accent-hover: var(--bb-primary-hover);
  --bb-ibans-accent-soft: var(--bb-primary-light);
  --bb-ibans-accent-strong: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-ibans-success: var(--bb-success);
  --bb-ibans-success-soft: var(--bb-success-light);
  --bb-ibans-success-text: color-mix(in srgb, var(--bb-success) 76%, var(--bb-emphasis-color));
  --bb-ibans-page-bg: var(--bb-body-bg);
  --bb-ibans-surface: var(--bb-surface-elevated);
  --bb-ibans-surface-soft: var(--bb-tertiary-bg);
  --bb-ibans-surface-muted: var(--bb-secondary-bg);
  --bb-ibans-heading: var(--bb-emphasis-color);
  --bb-ibans-text: var(--bb-body-color);
  --bb-ibans-muted: var(--bb-secondary-color);
  --bb-ibans-subtle: var(--bb-tertiary-color);
  --bb-ibans-border: var(--bb-border-color);
  --bb-ibans-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-ibans-border-strong: color-mix(in srgb, var(--bb-border-color) 92%, transparent);
  --bb-ibans-shadow-xs: var(--bb-shadow-xs);
  --bb-ibans-shadow-sm: var(--bb-shadow-sm);
  --bb-ibans-shadow-lg: var(--bb-shadow-lg);
  --bb-ibans-hero-color: var(--bb-white);
  --bb-ibans-hero-muted: color-mix(in srgb, var(--bb-white) 82%, transparent);
  --bb-ibans-hero-border: color-mix(in srgb, var(--bb-white) 12%, transparent);
  --bb-ibans-hero-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-coal-300, #0f1219) 90%, transparent) 0%,
          color-mix(in srgb, var(--bb-coal-300, #0f1219) 76%, transparent) 48%,
          color-mix(in srgb, var(--bb-coal-300, #0f1219) 56%, transparent) 100%
      ),
      radial-gradient(
          circle at 88% 18%,
          color-mix(in srgb, var(--bb-ibans-accent) 28%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-coal-400, #0c0f15) 0%,
          var(--bb-coal-300, #0f1219) 48%,
          color-mix(in srgb, var(--bb-success) 32%, var(--bb-coal-300, #0f1219)) 100%
      );
  --bb-ibans-hero-overlay:
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-black) 24%, transparent) 0%,
          transparent 42%
      ),
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-ibans-accent) 20%, transparent) 0,
          transparent 28%
      );
  --bb-ibans-hero-orb: color-mix(in srgb, var(--bb-ibans-accent) 14%, transparent);
  --bb-ibans-eyebrow-bg: var(--bb-ibans-accent);
  --bb-ibans-eyebrow-color: var(--bb-primary-inverse);
  --bb-ibans-eyebrow-border: color-mix(in srgb, var(--bb-ibans-accent) 80%, var(--bb-border-color));
  --bb-ibans-eyebrow-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-ibans-accent) 20%, transparent);
  --bb-ibans-owner-bg: color-mix(in srgb, var(--bb-white) 10%, transparent);
  --bb-ibans-owner-border: color-mix(in srgb, var(--bb-white) 16%, transparent);
  --bb-ibans-owner-muted: color-mix(in srgb, var(--bb-white) 68%, transparent);
  --bb-ibans-owner-orb: color-mix(in srgb, var(--bb-ibans-accent) 12%, transparent);
  --bb-ibans-alert-bg:
      radial-gradient(
          circle at 95% 10%,
          color-mix(in srgb, var(--bb-ibans-accent) 18%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-ibans-surface) 0%,
          color-mix(in srgb, var(--bb-ibans-accent) 8%, var(--bb-body-bg)) 100%
      );
  --bb-ibans-alert-border: color-mix(in srgb, var(--bb-ibans-accent) 42%, var(--bb-border-color));
  --bb-ibans-alert-code-bg: var(--bb-dark);
  --bb-ibans-alert-code-color: var(--bb-dark-inverse);
  --bb-ibans-section-label-bg: var(--bb-ibans-success-soft);
  --bb-ibans-section-label-color: var(--bb-ibans-success-text);
  --bb-iban-card-bg: var(--bb-ibans-surface);
  --bb-iban-card-border: var(--bb-ibans-border);
  --bb-iban-card-border-hover: color-mix(in srgb, var(--bb-ibans-accent) 56%, var(--bb-border-color));
  --bb-iban-card-shadow: var(--bb-ibans-shadow-xs);
  --bb-iban-card-shadow-hover: var(--bb-ibans-shadow-sm);
  --bb-iban-logo-bg: color-mix(in srgb, var(--bb-surface-soft) 82%, var(--bb-body-bg));
  --bb-iban-logo-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-iban-owner-bg: color-mix(in srgb, var(--bb-tertiary-bg) 86%, var(--bb-body-bg));
  --bb-iban-owner-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-iban-box-bg: color-mix(in srgb, var(--bb-tertiary-bg) 86%, var(--bb-body-bg));
  --bb-iban-box-border: color-mix(in srgb, var(--bb-secondary-color) 42%, var(--bb-border-color));
  --bb-iban-box-color: var(--bb-heading-color);
  --bb-iban-copy-bg: var(--bb-dark);
  --bb-iban-copy-bg-hover: var(--bb-emphasis-color);
  --bb-iban-copy-color: var(--bb-dark-inverse);
  --bb-ibans-bottom-note-bg: var(--bb-ibans-surface);
  --bb-ibans-bottom-note-border: var(--bb-ibans-border);
  color: var(--bb-ibans-text);
  background-color: var(--bb-ibans-page-bg);
}

/* =====================================
   IBAN Page Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-ibans-page {
  --bb-ibans-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-ibans-accent-strong: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-ibans-success-soft: color-mix(in srgb, var(--bb-success) 16%, var(--bb-body-bg));
  --bb-ibans-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-ibans-surface: var(--bb-surface-elevated);
  --bb-ibans-surface-soft: var(--bb-surface-soft);
  --bb-ibans-surface-muted: var(--bb-surface-muted);
  --bb-ibans-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-ibans-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-ibans-border-strong: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-ibans-hero-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-body-bg) 88%, var(--bb-black)) 0%,
          color-mix(in srgb, var(--bb-body-bg) 76%, transparent) 48%,
          color-mix(in srgb, var(--bb-body-bg) 58%, transparent) 100%
      ),
      radial-gradient(
          circle at 88% 18%,
          color-mix(in srgb, var(--bb-ibans-accent) 20%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 92%, var(--bb-black)) 0%,
          color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-body-bg)) 56%,
          color-mix(in srgb, var(--bb-success) 18%, var(--bb-body-bg)) 100%
      );
  --bb-ibans-hero-overlay:
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-black) 26%, transparent) 0%,
          transparent 42%
      ),
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-ibans-accent) 14%, transparent) 0,
          transparent 28%
      );
  --bb-ibans-hero-orb: color-mix(in srgb, var(--bb-ibans-accent) 10%, transparent);
  --bb-ibans-owner-bg: color-mix(in srgb, var(--bb-white) 8%, transparent);
  --bb-ibans-owner-border: color-mix(in srgb, var(--bb-white) 12%, transparent);
  --bb-ibans-owner-muted: color-mix(in srgb, var(--bb-white) 62%, transparent);
  --bb-ibans-alert-bg:
      radial-gradient(
          circle at 95% 10%,
          color-mix(in srgb, var(--bb-ibans-accent) 12%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-ibans-surface) 0%,
          color-mix(in srgb, var(--bb-ibans-accent) 8%, var(--bb-body-bg)) 100%
      );
  --bb-ibans-alert-border: color-mix(in srgb, var(--bb-ibans-accent) 32%, var(--bb-border-color));
  --bb-ibans-alert-code-bg: color-mix(in srgb, var(--bb-emphasis-color) 88%, var(--bb-body-bg));
  --bb-ibans-alert-code-color: var(--bb-body-bg);
  --bb-iban-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-iban-card-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-iban-card-border-hover: color-mix(in srgb, var(--bb-ibans-accent) 38%, var(--bb-border-color));
  --bb-iban-card-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-iban-card-shadow-hover:
      0 1.125rem 2.5rem color-mix(in srgb, var(--bb-black) 28%, transparent);
  --bb-iban-logo-bg: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-iban-logo-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-iban-owner-bg: color-mix(in srgb, var(--bb-surface-soft) 82%, var(--bb-body-bg));
  --bb-iban-owner-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-iban-box-bg: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-iban-box-border: color-mix(in srgb, var(--bb-secondary-color) 32%, var(--bb-border-color));
  --bb-iban-copy-bg: var(--bb-primary);
  --bb-iban-copy-bg-hover: var(--bb-primary-hover);
  --bb-iban-copy-color: var(--bb-primary-inverse);
  --bb-ibans-bottom-note-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-ibans-bottom-note-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
}

/* =====================================
   IBAN Page Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-ibans-page {
  --bb-ibans-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-ibans-accent-strong: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-ibans-success-soft: color-mix(in srgb, var(--bb-success) 15%, var(--bb-body-bg));
  --bb-ibans-success-text: color-mix(in srgb, var(--bb-success) 84%, var(--bb-emphasis-color));
  --bb-ibans-surface: var(--bb-surface-elevated);
  --bb-ibans-surface-soft: var(--bb-surface-soft);
  --bb-ibans-surface-muted: var(--bb-surface-muted);
  --bb-ibans-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-ibans-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-ibans-border-strong: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-ibans-hero-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-body-bg) 90%, var(--bb-black)) 0%,
          color-mix(in srgb, var(--bb-body-bg) 78%, transparent) 48%,
          color-mix(in srgb, var(--bb-body-bg) 60%, transparent) 100%
      ),
      radial-gradient(
          circle at 88% 18%,
          color-mix(in srgb, var(--bb-ibans-accent) 18%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-black)) 0%,
          color-mix(in srgb, var(--bb-surface-elevated) 74%, var(--bb-body-bg)) 56%,
          color-mix(in srgb, var(--bb-success) 15%, var(--bb-body-bg)) 100%
      );
  --bb-ibans-hero-overlay:
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-black) 28%, transparent) 0%,
          transparent 42%
      ),
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-ibans-accent) 12%, transparent) 0,
          transparent 28%
      );
  --bb-ibans-hero-orb: color-mix(in srgb, var(--bb-ibans-accent) 9%, transparent);
  --bb-ibans-owner-bg: color-mix(in srgb, var(--bb-white) 7%, transparent);
  --bb-ibans-owner-border: color-mix(in srgb, var(--bb-white) 11%, transparent);
  --bb-ibans-owner-muted: color-mix(in srgb, var(--bb-white) 60%, transparent);
  --bb-ibans-alert-bg:
      radial-gradient(
          circle at 95% 10%,
          color-mix(in srgb, var(--bb-ibans-accent) 11%, transparent) 0,
          transparent 32%
      ),
      linear-gradient(
          135deg,
          var(--bb-ibans-surface) 0%,
          color-mix(in srgb, var(--bb-ibans-accent) 7%, var(--bb-body-bg)) 100%
      );
  --bb-ibans-alert-border: color-mix(in srgb, var(--bb-ibans-accent) 30%, var(--bb-border-color));
  --bb-ibans-alert-code-bg: color-mix(in srgb, var(--bb-emphasis-color) 86%, var(--bb-body-bg));
  --bb-ibans-alert-code-color: var(--bb-body-bg);
  --bb-iban-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-iban-card-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-iban-card-border-hover: color-mix(in srgb, var(--bb-ibans-accent) 34%, var(--bb-border-color));
  --bb-iban-card-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-iban-card-shadow-hover:
      0 1.125rem 2.5rem color-mix(in srgb, var(--bb-black) 30%, transparent);
  --bb-iban-logo-bg: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-iban-logo-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-iban-owner-bg: color-mix(in srgb, var(--bb-surface-soft) 80%, var(--bb-body-bg));
  --bb-iban-owner-border: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-iban-box-bg: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-iban-box-border: color-mix(in srgb, var(--bb-secondary-color) 30%, var(--bb-border-color));
  --bb-iban-copy-bg: var(--bb-primary);
  --bb-iban-copy-bg-hover: var(--bb-primary-hover);
  --bb-iban-copy-color: var(--bb-primary-inverse);
  --bb-ibans-bottom-note-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-ibans-bottom-note-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

/* =====================================
   Hero
===================================== */
.bb-hero.bb-hero-dark.bb-ibans-page-hero {
  --bb-hero-title-max-width: 47.5rem;
  --bb-hero-lead-max-width: 48rem;
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 6vw, 5.25rem);
  padding-bottom: clamp(4.25rem, 6vw, 5.5rem);
  color: var(--bb-ibans-hero-color);
  background: var(--bb-ibans-hero-bg);
  border-bottom-color: var(--bb-ibans-hero-border);
}

.bb-hero.bb-hero-dark.bb-ibans-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bb-ibans-hero-overlay);
  pointer-events: none;
}

.bb-hero.bb-hero-dark.bb-ibans-page-hero::after {
  content: "";
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 20rem;
  height: 20rem;
  background-color: var(--bb-ibans-hero-orb);
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero.bb-hero-dark.bb-ibans-page-hero .bb-container {
  position: relative;
  z-index: 2;
}

.bb-ibans-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.bb-ibans-hero-content {
  min-width: 0;
}

.bb-ibans-eyebrow {
  width: fit-content;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.875rem;
  color: var(--bb-ibans-eyebrow-color);
  background-color: var(--bb-ibans-eyebrow-bg);
  border-color: var(--bb-ibans-eyebrow-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-ibans-eyebrow-shadow);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.bb-ibans-eyebrow .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-ibans-hero-title {
  max-width: var(--bb-hero-title-max-width);
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--bb-ibans-hero-color);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.bb-ibans-hero-lead {
  max-width: var(--bb-hero-lead-max-width);
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--bb-ibans-hero-muted);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Owner Card
===================================== */
.bb-ibans-owner-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  color: var(--bb-ibans-hero-color);
  background-color: var(--bb-ibans-owner-bg);
  border: var(--bb-border-width) solid var(--bb-ibans-owner-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-ibans-owner-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 13rem;
  height: 13rem;
  background-color: var(--bb-ibans-owner-orb);
  border-radius: 50%;
  pointer-events: none;
}

.bb-ibans-owner-icon,
.bb-ibans-owner-label,
.bb-ibans-owner-name {
  position: relative;
  z-index: 1;
}

.bb-ibans-owner-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-ibans-owner-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-ibans-owner-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-ibans-owner-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-ibans-owner-name {
  display: block;
  color: var(--bb-ibans-hero-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Main
===================================== */
.bb-ibans-main {
  padding-top: 2rem;
}

.bb-ibans-alert {
  display: grid;
  grid-template-columns: 2.875rem minmax(0, 1fr);
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  background: var(--bb-ibans-alert-bg);
  border: var(--bb-border-width) solid var(--bb-ibans-alert-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-ibans-alert-icon {
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-ibans-alert-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-ibans-alert strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-ibans-heading);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-ibans-alert p {
  margin: 0;
  color: var(--bb-ibans-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-ibans-alert-code {
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0 0.625rem;
  color: var(--bb-ibans-alert-code-color);
  background-color: var(--bb-ibans-alert-code-bg);
  border-radius: var(--bb-radius-md);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* =====================================
   Section Head
===================================== */
.bb-ibans-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bb-ibans-section-label {
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 0.625rem;
  padding: 0 0.75rem;
  color: var(--bb-ibans-section-label-color);
  background-color: var(--bb-ibans-section-label-bg);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-ibans-section-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-ibans-section-title {
  margin: 0;
  color: var(--bb-ibans-heading);
  font-size: clamp(1.65rem, 2.5vw, 2.1rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-ibans-section-text {
  max-width: 47.5rem;
  margin: 0.5rem 0 0;
  color: var(--bb-ibans-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Bank Cards
===================================== */
.bb-ibans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.bb-iban-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: var(--bb-iban-card-bg);
  border: var(--bb-border-width) solid var(--bb-iban-card-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-iban-card-shadow);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-iban-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--bb-primary), color-mix(in srgb, var(--bb-primary) 58%, var(--bb-success)), transparent);
  opacity: 0.9;
  pointer-events: none;
}

.bb-iban-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--bb-iban-card-border-hover);
  box-shadow: var(--bb-iban-card-shadow-hover);
}

.bb-iban-card-inner {
  position: relative;
  z-index: 1;
  padding: 1.375rem;
}

.bb-iban-card-top {
  display: grid;
  grid-template-columns: 5.125rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.125rem;
}

.bb-iban-bank-logo {
  width: 5.125rem;
  height: 5.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bb-iban-logo-bg);
  border: var(--bb-border-width) solid var(--bb-iban-logo-border);
  border-radius: var(--bb-radius-xl);
}

.bb-iban-bank-logo img {
  display: block;
  max-width: 4.125rem;
  max-height: 4.125rem;
  object-fit: contain;
  transition: transform var(--bb-transition-normal);
}

.bb-iban-card:hover .bb-iban-bank-logo img {
  transform: scale(1.05);
}

.bb-iban-bank-content {
  min-width: 0;
}

.bb-iban-bank-name {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-ibans-heading);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-iban-bank-branch {
  display: block;
  color: var(--bb-ibans-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-iban-owner-mini {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: var(--bb-iban-owner-bg);
  border: var(--bb-border-width) solid var(--bb-iban-owner-border);
  border-radius: var(--bb-radius-lg);
}

.bb-iban-owner-mini span {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-ibans-subtle);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-iban-owner-mini strong {
  display: block;
  color: var(--bb-ibans-text);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-iban-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
  color: var(--bb-ibans-text);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-iban-label .material-symbols-outlined {
  color: var(--bb-ibans-success);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-iban-box {
  margin-bottom: 0.875rem;
  padding: 0.875rem;
  color: var(--bb-iban-box-color);
  background-color: var(--bb-iban-box-bg);
  border: var(--bb-border-width) dashed var(--bb-iban-box-border);
  border-radius: var(--bb-radius-lg);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  letter-spacing: 0.04em;
  word-break: break-word;
}

.bb-iban-copy-btn {
  width: 100%;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--bb-iban-copy-color);
  background-color: var(--bb-iban-copy-bg);
  border: 0;
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  transition: background-color var(--bb-transition-normal), transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-iban-copy-btn:hover {
  color: var(--bb-iban-copy-color);
  background-color: var(--bb-iban-copy-bg-hover);
  box-shadow: var(--bb-shadow-xs);
  transform: translateY(-1px);
}

.bb-iban-copy-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-iban-card-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  color: var(--bb-ibans-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

.bb-iban-card-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-ibans-success);
  font-size: var(--bb-icon-size-sm);
  line-height: var(--bb-line-height-heading);
}

/* =====================================
   Bottom Note
===================================== */
.bb-ibans-bottom-note {
  margin-top: 1.5rem;
  padding: 1.25rem;
  color: var(--bb-ibans-muted);
  background-color: var(--bb-ibans-bottom-note-bg);
  border: var(--bb-border-width) solid var(--bb-ibans-bottom-note-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-ibans-bottom-note strong {
  color: var(--bb-ibans-heading);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-ibans-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-ibans-owner-card {
    max-width: 32.5rem;
  }
  .bb-ibans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-hero.bb-hero-dark.bb-ibans-page-hero {
    padding-top: 3rem;
    padding-bottom: 3.75rem;
  }
  .bb-ibans-owner-card {
    display: none;
  }
  .bb-ibans-hero-title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .bb-ibans-main {
    padding-top: 1.5rem;
  }
  .bb-ibans-alert {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.875rem;
    padding: 1rem;
  }
  .bb-ibans-alert-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bb-radius-md);
  }
  .bb-ibans-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-ibans-grid {
    grid-template-columns: 1fr;
  }
  .bb-iban-card-inner {
    padding: 1.125rem;
  }
  .bb-iban-card-top {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }
  .bb-iban-bank-logo {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-iban-bank-logo img {
    max-width: 3.375rem;
    max-height: 3.375rem;
  }
  .bb-iban-bank-name {
    font-size: var(--bb-icon-size-md);
  }
}
/* =====================================
   Hero
===================================== */
.bb-story-detail-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 18%, var(--bb-primary-light) 0, transparent 26%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-secondary-bg) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-story-detail-hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-coal-300) 6%, transparent);
}

.bb-story-detail-hero::after {
  content: "";
  position: absolute;
  right: 120px;
  top: 120px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-story-detail-hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.bb-story-detail-label {
  margin-bottom: 14px;
}

.bb-story-detail-title {
  max-width: 920px;
  margin-bottom: 18px;
  font-size: clamp(2rem, 4vw, 3.35rem);
}

.bb-story-detail-text {
  max-width: 860px;
  margin-bottom: 0;
}

/* =====================================
   Top Stats
===================================== */
.bb-story-detail-top-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 32px;
}

.bb-story-detail-top-stat {
  min-width: 180px;
  margin-right: 32px;
  margin-bottom: 1rem;
  padding-right: 20px;
  border-right: 1px solid var(--bb-border-color);
}

.bb-story-detail-top-stat:last-child {
  border-right: 0;
}

.bb-story-detail-top-stat strong {
  display: block;
  margin-bottom: 7px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h1);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-top-stat span {
  display: block;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Shell / Layout
===================================== */
.bb-story-detail-shell {
  background-color: var(--bb-body-bg);
}

.bb-story-detail-cover {
  overflow: hidden;
  margin-bottom: 32px;
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-story-detail-cover img {
  width: 100%;
  display: block;
}

.bb-story-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}

.bb-story-detail-main {
  min-width: 0;
}

.bb-story-detail-sidebar {
  position: sticky;
  top: 100px;
  min-width: 0;
}

/* =====================================
   Sidebar
===================================== */
.bb-story-detail-side-card {
  padding: 24px;
  margin-bottom: 20px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-story-detail-side-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-side-title {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-info-row {
  padding: 0.8125rem 0;
  border-top: 1px solid var(--bb-border-color);
}

.bb-story-detail-info-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bb-story-detail-info-row strong {
  display: block;
  margin-bottom: 5px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bb-story-detail-info-row span {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-story-detail-instory-title {
  margin-bottom: 14px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-instory-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.bb-story-detail-instory-list li {
  margin-bottom: 0.75rem;
}

.bb-story-detail-instory-list li:last-child {
  margin-bottom: 0;
}

.bb-story-detail-instory-list a {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
}

.bb-story-detail-instory-list a:hover {
  color: var(--bb-link-color);
}

/* =====================================
   Content
===================================== */
.bb-story-detail-section {
  margin-bottom: 48px;
}

.bb-story-detail-section:last-child {
  margin-bottom: 0;
}

.bb-story-detail-section-label {
  display: inline-block;
  margin-bottom: 11px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bb-story-detail-section-title {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.03em;
}

.bb-story-detail-paragraph,
.bb-story-detail-section p {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 2;
}

.bb-story-detail-paragraph {
  margin-bottom: 1rem;
}

.bb-story-detail-paragraph:last-child,
.bb-story-detail-section p:last-child {
  margin-bottom: 0;
}

/* =====================================
   Quote
===================================== */
.bb-story-detail-quote {
  margin: 32px 0;
  padding: 28px;
  background: linear-gradient(135deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border: 1px solid var(--bb-border-color);
  border-left: 4px solid var(--bb-link-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-story-detail-quote-mark {
  margin-bottom: 0.75rem;
  color: var(--bb-link-color);
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-quote-text {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

.bb-story-detail-quote-person {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Metrics
===================================== */
.bb-story-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.bb-story-detail-metric-card {
  padding: 20px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-story-detail-metric-card strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-metric-card span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-story-detail-banner {
  margin-top: 48px;
}

/* =====================================
   Related Story Compatibility
   _StoryRelated component çıktısı için local sayfa scope'u.
===================================== */
.bb-story-detail-related-title {
  margin-bottom: 24px;
  color: var(--bb-heading-color);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.03em;
}

.bb-story-detail-related-card {
  overflow: hidden;
  height: 100%;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-story-detail-related-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-story-detail-related-image {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.bb-story-detail-related-body {
  padding: 20px;
}

.bb-story-detail-related-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.bb-story-detail-related-card h4 {
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-story-detail-related-card p {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-story-detail-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}
@media (max-width: 991.98px) {
  .bb-story-detail-layout {
    grid-template-columns: 1fr;
  }
  .bb-story-detail-sidebar {
    position: static;
  }
  .bb-story-detail-metrics {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-story-detail-top-stat {
    min-width: 100%;
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }
  .bb-story-detail-side-card,
  .bb-story-detail-quote {
    padding: 20px;
  }
  .bb-story-detail-cover {
    margin-bottom: 24px;
  }
  .bb-story-detail-section {
    margin-bottom: 36px;
  }
}
/* =====================================
   Hero
===================================== */
.bb-stories-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 16%, var(--bb-primary-light) 0, transparent 28%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-secondary-bg) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-stories-hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -40px;
  width: 16.25rem;
  height: 260px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-coal-300) 7%, transparent);
}

.bb-stories-hero::after {
  content: "";
  position: absolute;
  top: 80px;
  right: 140px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-stories-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}

.bb-stories-hero-content {
  min-width: 0;
}

.bb-stories-label {
  margin-bottom: 14px;
}

.bb-stories-hero-title {
  max-width: 640px;
  margin-bottom: 20px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.bb-stories-hero-text {
  max-width: 640px;
  margin-bottom: 0;
}

.bb-stories-hero-actions {
  margin-top: 32px;
}

.bb-stories-featured-wrap {
  min-width: 0;
}

/* =====================================
   Featured Story Compatibility
   _FeaturedStory component çıktısı için local sayfa scope'u.
===================================== */
.bb-stories-featured-card {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  background: linear-gradient(135deg, var(--bb-color-blue-700) 0%, var(--bb-color-navy-800) 100%);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-stories-featured-shape-1,
.bb-stories-featured-shape-2 {
  position: absolute;
  border-radius: 50%;
}

.bb-stories-featured-shape-1 {
  top: -20px;
  left: -40px;
  width: 180px;
  height: 180px;
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
}

.bb-stories-featured-shape-2 {
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, transparent);
}

.bb-stories-featured-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 36px;
  color: var(--bb-white);
}

.bb-stories-featured-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 12%, transparent);
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.bb-stories-featured-title {
  margin-bottom: 1rem;
  color: var(--bb-white);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-stories-featured-text {
  max-width: 560px;
  margin-bottom: 24px;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 88%, transparent);
  font-size: var(--bb-fs-base);
  line-height: 1.9;
}

.bb-stories-featured-stats {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.bb-stories-featured-stat {
  min-width: 140px;
  margin-right: 24px;
  margin-bottom: 1rem;
}

.bb-stories-featured-stat strong {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-white);
  font-size: var(--bb-h2);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-stories-featured-stat span {
  display: block;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 80%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-stories-featured-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 18%, transparent);
}

.bb-stories-featured-logos span {
  color: color-mix(in srgb, var(--bb-theme-on-dark) 72%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  margin-right: 20px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.03em;
}

/* =====================================
   Filter
===================================== */
.bb-stories-filter-section {
  padding-bottom: 0;
}

.bb-stories-filter-wrap {
  padding: 20px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-stories-filter-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  padding: 10px 16px;
  margin-right: 12px;
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-stories-filter-chip-active {
  background-color: var(--bb-info-light);
  border-color: color-mix(in srgb, var(--bb-info) 30%, var(--bb-border-color));
  color: var(--bb-info);
}

/* =====================================
   Story Cards
===================================== */
.bb-stories-section-title {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.03em;
}

.bb-stories-text {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.95;
}

.bb-stories-card,
.bb-stories-feature-grid-card {
  overflow: hidden;
  height: 100%;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-stories-card {
  padding: 1.375rem;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-stories-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-stories-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.bb-stories-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-stories-card-link {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}

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

.bb-stories-card-logo {
  margin-bottom: 14px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-stories-card-title {
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-stories-card-text {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.9;
}

.bb-stories-card-image {
  height: 220px;
  border-radius: var(--bb-radius-xl);
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
}

.bb-stories-card-metric {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
}

.bb-stories-card-metric strong {
  margin-right: 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-stories-card-metric span {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-stories-card-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
}

.bb-stories-card-tags span {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  margin-right: 8px;
  margin-bottom: 0.5rem;
}

/* =====================================
   Commented Featured Grid Compatibility
===================================== */
.bb-stories-feature-grid-image {
  position: relative;
  height: 240px;
  background-size: cover;
  background-position: center;
}

.bb-stories-feature-grid-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 43, 87, 0.08) 0%, rgba(2, 43, 87, 0.45) 100%);
}

.bb-stories-feature-grid-body {
  padding: 24px;
}

.bb-stories-banner-section {
  padding-top: 0;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-stories-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bb-stories-featured-card {
    min-height: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-stories-featured-content {
    padding: 24px;
  }
  .bb-stories-filter-wrap {
    padding: 16px;
  }
  .bb-stories-card {
    padding: 18px;
  }
  .bb-stories-card-image {
    height: 190px;
  }
  .bb-stories-card-top {
    flex-direction: column;
  }
}
/* =====================================
   Hero
===================================== */
.bb-community-topic-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 18%, var(--bb-primary-light) 0, transparent 26%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-secondary-bg) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-community-topic-hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-coal-300) 6%, transparent);
}

.bb-community-topic-hero::after {
  content: "";
  position: absolute;
  right: 120px;
  top: 120px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-community-topic-hero .bb-web-container {
  position: relative;
  z-index: 2;
}

.bb-community-topic-title {
  max-width: 960px;
  margin-top: 12px;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.bb-community-topic-submeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.bb-community-topic-submeta span {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
}

/* =====================================
   Layout
===================================== */
.bb-community-topic-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.bb-community-topic-main {
  min-width: 0;
}

/* =====================================
   Shared Cards
===================================== */
.bb-community-topic-card {
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-topic-post {
  padding: 24px;
  margin-bottom: 32px;
}

.bb-community-topic-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bb-community-topic-post-user {
  display: flex;
  align-items: flex-start;
}

.bb-community-topic-avatar {
  width: 46px;
  height: 46px;
  margin-right: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--bb-primary);
  color: var(--bb-primary-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-community-topic-avatar-secondary {
  background-color: var(--bb-secondary-bg);
  color: var(--bb-heading-color);
}

.bb-community-topic-user-name {
  margin-bottom: 3px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-community-topic-user-meta {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-community-topic-post-time {
  margin-left: 16px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  white-space: nowrap;
}

.bb-community-topic-post-body {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.95;
}

.bb-community-topic-post-body p:last-child {
  margin-bottom: 0;
}

.bb-community-topic-post-body ul {
  padding-left: 20px;
  margin-bottom: 1rem;
}

.bb-community-topic-post-body li {
  line-height: 1.9;
  margin-bottom: 6px;
}

.bb-community-topic-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--bb-border-color);
}

.bb-community-topic-action {
  margin-right: 16px;
  margin-bottom: 7px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Comments Component Compatibility
===================================== */
.bb-community-topic-replies-title {
  margin-top: 32px;
  margin-bottom: 20px;
  color: var(--bb-heading-color);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.03em;
}

.bb-community-topic-reply-card {
  padding: 22px 24px;
  margin-bottom: 1rem;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-topic-reply-card:last-child {
  margin-bottom: 0;
}

.bb-community-topic-reply-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

/* =====================================
   Reply Box
===================================== */
.bb-community-topic-reply-box {
  padding: 24px;
  margin-top: 24px;
}

.bb-community-topic-reply-box h2 {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
}

.bb-community-topic-reply-box .form-control {
  min-height: 150px;
  resize: vertical;
}

.bb-community-topic-reply-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.bb-community-topic-reply-message {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

/* =====================================
   Sidebar Compatibility
===================================== */
.bb-community-topic-side-card {
  padding: 24px;
  margin-bottom: 20px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-topic-side-card h4 {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-community-topic-side-row {
  padding: 0.8125rem 0;
  border-top: 1px solid var(--bb-border-color);
}

.bb-community-topic-side-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.bb-community-topic-side-row strong {
  display: block;
  margin-bottom: 5px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bb-community-topic-side-row span {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-community-topic-side-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.bb-community-topic-side-list li {
  padding: 12px 0;
  border-top: 1px solid var(--bb-border-color);
}

.bb-community-topic-side-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.bb-community-topic-side-list a {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
  text-decoration: none;
}

.bb-community-topic-side-list a:hover {
  color: var(--bb-link-color);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-community-topic-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-community-topic-post,
  .bb-community-topic-reply-box,
  .bb-community-topic-reply-card,
  .bb-community-topic-side-card {
    padding: 20px;
  }
  .bb-community-topic-post-header {
    flex-direction: column;
  }
  .bb-community-topic-post-time {
    margin-left: 0;
    margin-top: 11px;
  }
  .bb-community-topic-reply-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-community-topic-reply-footer .btn {
    width: 100%;
  }
}
/* =====================================
   Hero
===================================== */
.bb-community-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 18%, var(--bb-primary-light) 0, transparent 26%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-secondary-bg) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-community-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-coal-300) 6%, transparent);
}

.bb-community-hero::after {
  content: "";
  position: absolute;
  right: 110px;
  top: 120px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-community-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  align-items: center;
}

.bb-community-hero-content {
  min-width: 0;
}

.bb-community-label {
  margin-bottom: 14px;
}

.bb-community-title {
  max-width: 47.5rem;
  margin-bottom: 18px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.bb-community-text {
  max-width: 47.5rem;
  margin-bottom: 0;
}

.bb-community-search-wrap {
  position: relative;
  margin-top: 32px;
  max-width: 720px;
}

.bb-community-search-wrap .form-control {
  height: 58px;
  border-radius: var(--bb-radius-pill);
  padding-left: 20px;
  padding-right: 56px;
  border-color: var(--bb-border-color);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-md);
}

.bb-community-search-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
}

.bb-community-hero-card {
  position: relative;
  z-index: 2;
  padding: 28px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-community-hero-card h2 {
  margin-bottom: 14px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-community-hero-card p {
  margin-bottom: 20px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-community-hero-note {
  color: var(--bb-tertiary-color) !important;
  font-size: var(--bb-fs-sm) !important;
  line-height: 1.8 !important;
  margin-top: 16px;
  margin-bottom: 0 !important;
}

/* =====================================
   Component Compatibility: Categories
===================================== */
.bb-community-section {
  background-color: var(--bb-body-bg);
}

.bb-community-section-head {
  max-width: 820px;
  margin-bottom: 32px;
}

.bb-community-section-title {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.bb-community-section-text {
  margin-bottom: 0;
}

.bb-community-category-card {
  height: 100%;
  padding: 24px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-community-category-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-community-category-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-xl);
}

.bb-community-category-icon .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

.bb-community-category-title {
  margin-bottom: 11px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-community-category-text {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.9;
}

.bb-community-category-meta {
  display: flex;
  flex-wrap: wrap;
}

.bb-community-category-meta span {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  margin-right: 8px;
  margin-bottom: 0.5rem;
}

/* =====================================
   Discussion Layout
===================================== */
.bb-community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.bb-community-main {
  min-width: 0;
}

.bb-community-discussion-list {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px 120px;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bb-border-color);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-community-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 150px;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--bb-border-color);
  align-items: center;
}

.bb-community-topic-row:last-child {
  border-bottom: 0;
}

.bb-community-topic-main {
  min-width: 0;
}

.bb-community-topic-title {
  margin-bottom: 0.5rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-community-topic-title a {
  color: var(--bb-heading-color);
  text-decoration: none;
}

.bb-community-topic-title a:hover {
  color: var(--bb-link-color);
}

.bb-community-topic-text {
  margin-bottom: 13px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-community-topic-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.bb-community-topic-meta span {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  margin-right: 14px;
  margin-bottom: 6px;
}

.bb-community-topic-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  margin-right: 8px !important;
  margin-bottom: 6px !important;
}

.bb-community-topic-stat {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-community-topic-stat small {
  display: block;
  margin-top: 4px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Pagination
===================================== */
.bb-community-pagination {
  margin-top: 20px;
}

.bb-community-page-notify {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  margin-bottom: 0.75rem;
}

.bb-community-pagination .page-link {
  color: var(--bb-heading-color);
  border-color: var(--bb-border-color);
}

.bb-community-pagination .page-item.active .page-link {
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
  color: var(--bb-primary-inverse);
}

.bb-community-pagination .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

/* =====================================
   Sidebar Compatibility
===================================== */
.bb-community-side-card {
  padding: 24px;
  margin-bottom: 20px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-side-card h4 {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-community-side-card p {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-community-side-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.bb-community-side-list li {
  padding: 12px 0;
  border-top: 1px solid var(--bb-border-color);
}

.bb-community-side-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.bb-community-side-list a {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
  text-decoration: none;
}

.bb-community-side-list a:hover {
  color: var(--bb-link-color);
}

/* =====================================
   Highlight Cards
===================================== */
.bb-community-highlight-section {
  padding-top: 0;
}

.bb-community-highlight-card {
  overflow: hidden;
  height: 100%;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-community-highlight-top {
  min-height: 170px;
  background: linear-gradient(135deg, var(--bb-info-light) 0%, color-mix(in srgb, var(--bb-info) 16%, var(--bb-body-bg)) 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.bb-community-highlight-top h3 {
  margin-bottom: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-community-highlight-body {
  padding: 1.375rem;
}

.bb-community-highlight-body p {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-community-highlight-link {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

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

/* =====================================
   CTA Compatibility
===================================== */
.bb-community-cta {
  position: relative;
  overflow: hidden;
  padding: 36px;
  background: linear-gradient(135deg, var(--bb-color-navy-800) 0%, var(--bb-color-blue-900) 100%);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-community-cta::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 5%, transparent);
  border-radius: 50%;
}

.bb-community-cta::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 170px;
  height: 170px;
  background-color: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  border-radius: 50%;
}

.bb-community-cta h3,
.bb-community-cta p,
.bb-community-cta-actions {
  position: relative;
  z-index: 2;
}

.bb-community-cta h3 {
  margin-bottom: 13px;
  color: var(--bb-white);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-community-cta p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 84%, transparent);
  font-size: var(--bb-fs-base);
  line-height: 1.9;
}

.bb-community-banner-section {
  padding-top: 0;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-community-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bb-community-topic-row {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
}
@media (max-width: 767.98px) {
  .bb-community-hero-card,
  .bb-community-category-card,
  .bb-community-side-card,
  .bb-community-highlight-body,
  .bb-community-cta {
    padding: 20px;
  }
  .bb-community-topic-row {
    padding: 20px;
  }
  .bb-community-highlight-top {
    min-height: 140px;
    padding: 20px;
  }
}
/* =====================================
   Bulbulustur Web - Roadmap Page
   Scope: .bb-roadmap-page
===================================== */
/* =====================================
   Roadmap Page Mode Tokens
===================================== */
.bb-roadmap-page {
  --bb-roadmap-page-bg: var(--bb-body-bg);
  --bb-roadmap-surface: var(--bb-body-bg);
  --bb-roadmap-surface-soft: var(--bb-tertiary-bg);
  --bb-roadmap-border: var(--bb-border-color, rgba(148, 163, 184, .28));
  --bb-roadmap-border-soft: color-mix(in srgb, var(--bb-border-color, rgba(148, 163, 184, .28)) 82%, transparent);
  --bb-roadmap-planned: var(--bb-secondary-color);
  --bb-roadmap-progress: var(--bb-primary);
  --bb-roadmap-completed: var(--bb-success);
  --bb-roadmap-planned-soft: color-mix(in srgb, var(--bb-roadmap-planned) 14%, transparent);
  --bb-roadmap-progress-soft: color-mix(in srgb, var(--bb-roadmap-progress) 20%, transparent);
  --bb-roadmap-completed-soft: color-mix(in srgb, var(--bb-roadmap-completed) 16%, transparent);
  --bb-roadmap-progress-text: color-mix(in srgb, var(--bb-roadmap-progress) 62%, var(--bb-emphasis-color, #1f2937));
  --bb-roadmap-completed-text: color-mix(in srgb, var(--bb-roadmap-completed) 78%, var(--bb-emphasis-color, #1f2937));
  --bb-roadmap-hero-bg:
      radial-gradient(
          circle at 86% 18%,
          color-mix(in srgb, var(--bb-roadmap-progress) 18%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-roadmap-progress) 9%, var(--bb-body-bg)) 0%,
          var(--bb-tertiary-bg) 100%
      );
  --bb-roadmap-card-shadow: var(--bb-shadow-xs, 0 10px 24px rgba(15, 23, 42, .05));
  --bb-roadmap-card-shadow-hover: var(--bb-shadow-sm, 0 16px 34px rgba(15, 23, 42, .08));
}

html[data-bs-theme=navy] .bb-roadmap-page {
  --bb-roadmap-page-bg: var(--bb-body-bg);
  --bb-roadmap-surface: var(--bb-surface-elevated);
  --bb-roadmap-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-body-bg));
  --bb-roadmap-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-roadmap-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-roadmap-planned-soft: color-mix(in srgb, var(--bb-roadmap-planned) 20%, transparent);
  --bb-roadmap-progress-soft: color-mix(in srgb, var(--bb-roadmap-progress) 24%, transparent);
  --bb-roadmap-completed-soft: color-mix(in srgb, var(--bb-roadmap-completed) 21%, transparent);
  --bb-roadmap-progress-text: color-mix(in srgb, var(--bb-roadmap-progress) 82%, var(--bb-emphasis-color));
  --bb-roadmap-completed-text: color-mix(in srgb, var(--bb-roadmap-completed) 78%, var(--bb-emphasis-color));
  --bb-roadmap-hero-bg:
      radial-gradient(
          circle at 86% 18%,
          color-mix(in srgb, var(--bb-roadmap-progress) 14%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-roadmap-progress) 6%, var(--bb-body-bg)) 0%,
          var(--bb-tertiary-bg) 100%
      );
  --bb-roadmap-card-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-roadmap-card-shadow-hover:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
}

html[data-bs-theme=dark] .bb-roadmap-page {
  --bb-roadmap-page-bg: var(--bb-body-bg);
  --bb-roadmap-surface: var(--bb-surface-elevated);
  --bb-roadmap-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-roadmap-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-roadmap-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-roadmap-planned-soft: color-mix(in srgb, var(--bb-roadmap-planned) 22%, transparent);
  --bb-roadmap-progress-soft: color-mix(in srgb, var(--bb-roadmap-progress) 24%, transparent);
  --bb-roadmap-completed-soft: color-mix(in srgb, var(--bb-roadmap-completed) 22%, transparent);
  --bb-roadmap-progress-text: color-mix(in srgb, var(--bb-roadmap-progress) 82%, var(--bb-white));
  --bb-roadmap-completed-text: color-mix(in srgb, var(--bb-roadmap-completed) 78%, var(--bb-white));
  --bb-roadmap-hero-bg:
      radial-gradient(
          circle at 86% 18%,
          color-mix(in srgb, var(--bb-roadmap-progress) 13%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-roadmap-progress) 5%, var(--bb-body-bg)) 0%,
          var(--bb-tertiary-bg) 100%
      );
  --bb-roadmap-card-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-roadmap-card-shadow-hover:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 30%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
}

/* =====================================
   Page Shell
===================================== */
.bb-roadmap-page {
  min-height: 100%;
  color: var(--bb-body-color);
  background-color: var(--bb-roadmap-page-bg);
}

/* =====================================
   Hero
===================================== */
.bb-roadmap-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bb-roadmap-border-soft);
  background: var(--bb-roadmap-hero-bg);
}

.bb-roadmap-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.bb-roadmap-label {
  margin-bottom: 14px;
}

.bb-roadmap-hero-title {
  max-width: 760px;
  margin-bottom: 18px;
}

.bb-roadmap-hero-lead {
  max-width: 780px;
  margin-bottom: 14px;
}

.bb-roadmap-hero-text {
  max-width: 760px;
  margin-bottom: 0;
}

/* =====================================
   Intro / Legend
===================================== */
.bb-roadmap-intro-section {
  padding-bottom: 24px;
}

.bb-roadmap-section-head {
  max-width: 820px;
  margin-bottom: 24px;
}

.bb-roadmap-section-title {
  margin-bottom: 14px;
}

.bb-roadmap-section-text {
  margin-bottom: 0;
}

.bb-roadmap-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bb-roadmap-filter {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--bb-roadmap-border);
  border-radius: var(--bb-radius-pill, 999px);
  background-color: var(--bb-roadmap-surface);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm, 0.875rem);
  font-weight: var(--bb-fw-semibold, 600);
  box-shadow: var(--bb-roadmap-card-shadow);
}

.bb-roadmap-filter-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
}

.bb-roadmap-filter-dot-planned {
  background-color: var(--bb-roadmap-planned);
}

.bb-roadmap-filter-dot-progress {
  background-color: var(--bb-roadmap-progress);
}

.bb-roadmap-filter-dot-completed {
  background-color: var(--bb-roadmap-completed);
}

/* =====================================
   Timeline
===================================== */
.bb-roadmap-timeline-section {
  padding-top: 24px;
}

.bb-roadmap-timeline {
  position: relative;
  padding-left: 32px;
}

.bb-roadmap-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 2px;
  height: 100%;
  background-color: var(--bb-roadmap-border);
}

.bb-roadmap-item {
  position: relative;
  margin-bottom: 28px;
}

.bb-roadmap-item:last-child {
  margin-bottom: 0;
}

.bb-roadmap-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 24px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 3px solid var(--bb-roadmap-page-bg);
  border-radius: 50%;
  background-color: var(--bb-roadmap-planned);
  box-shadow: 0 0 0 1px var(--bb-roadmap-border);
}

.bb-roadmap-item-planned::before {
  background-color: var(--bb-roadmap-planned);
}

.bb-roadmap-item-progress::before {
  background-color: var(--bb-roadmap-progress);
}

.bb-roadmap-item-completed::before {
  background-color: var(--bb-roadmap-completed);
}

/* =====================================
   Cards
===================================== */
.bb-roadmap-card {
  padding: 24px;
  border: 1px solid var(--bb-roadmap-border);
  border-radius: var(--bb-radius-2xl, 1rem);
  background-color: var(--bb-roadmap-surface);
  box-shadow: var(--bb-roadmap-card-shadow);
  transition: transform var(--bb-transition-normal, 0.2s ease), box-shadow var(--bb-transition-normal, 0.2s ease), border-color var(--bb-transition-normal, 0.2s ease);
}

.bb-roadmap-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bb-roadmap-card-shadow-hover);
}

.bb-roadmap-item-planned .bb-roadmap-card {
  border-left: 4px solid var(--bb-roadmap-planned);
}

.bb-roadmap-item-progress .bb-roadmap-card {
  border-left: 4px solid var(--bb-roadmap-progress);
}

.bb-roadmap-item-completed .bb-roadmap-card {
  border-left: 4px solid var(--bb-roadmap-completed);
}

.bb-roadmap-quarter {
  margin-bottom: 10px;
  color: var(--bb-secondary-color, #64748b);
  font-size: var(--bb-fs-sm, 0.875rem);
  font-weight: var(--bb-fw-semibold, 600);
}

.bb-roadmap-status {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--bb-radius-pill, 999px);
  font-size: var(--bb-fs-sm, 0.875rem);
  font-weight: var(--bb-fw-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-roadmap-status-planned {
  background-color: var(--bb-roadmap-planned-soft);
  color: var(--bb-secondary-color, #64748b);
}

.bb-roadmap-status-progress {
  background-color: var(--bb-roadmap-progress-soft);
  color: var(--bb-roadmap-progress-text);
}

.bb-roadmap-status-completed {
  background-color: var(--bb-roadmap-completed-soft);
  color: var(--bb-roadmap-completed-text);
}

.bb-roadmap-title {
  margin-bottom: 12px;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold, 700);
  letter-spacing: -0.02em;
}

.bb-roadmap-text {
  color: var(--bb-secondary-color, #64748b);
  font-size: var(--bb-fs-base, 1rem);
  line-height: var(--bb-line-height-loose, 1.75);
}

.bb-roadmap-text p:last-child {
  margin-bottom: 0;
}

.bb-roadmap-banner-section {
  padding-top: 0;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 767.98px) {
  .bb-roadmap-timeline {
    padding-left: 24px;
  }
  .bb-roadmap-item::before {
    left: -28px;
  }
  .bb-roadmap-card {
    padding: 20px;
  }
  .bb-roadmap-filter {
    width: 100%;
  }
}
/* =====================================
   Hero
===================================== */
.bb-ir-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 18%, var(--bb-primary-light) 0, transparent 26%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-secondary-bg) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-ir-hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 16.25rem;
  height: 260px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-coal-300) 6%, transparent);
}

.bb-ir-hero::after {
  content: "";
  position: absolute;
  right: 140px;
  top: 130px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-ir-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 48px;
  align-items: center;
}

.bb-ir-hero-content {
  min-width: 0;
}

.bb-ir-label {
  margin-bottom: 14px;
}

.bb-ir-title {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(2rem, 4vw, 3.35rem);
}

.bb-ir-text {
  max-width: 47.5rem;
  margin-bottom: 0;
}

.bb-ir-actions {
  margin-top: 32px;
}

/* =====================================
   Snapshot
===================================== */
.bb-ir-snapshot {
  position: relative;
  z-index: 2;
  padding: 26px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-ir-snapshot h2 {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-ir-snapshot-row {
  padding: 14px 0;
  border-top: 1px solid var(--bb-border-color);
}

.bb-ir-snapshot-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bb-ir-snapshot-row strong {
  display: block;
  margin-bottom: 5px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bb-ir-snapshot-row span {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Shared
===================================== */
.bb-ir-section-head {
  max-width: 820px;
  margin-bottom: 32px;
}

.bb-ir-section-title {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.bb-ir-section-text {
  margin-bottom: 0;
}

.bb-ir-overview-section {
  padding-bottom: 32px;
}

.bb-ir-overview-card {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-ir-overview-card p:last-child {
  margin-bottom: 0;
}

/* =====================================
   Highlight Cards
===================================== */
.bb-ir-highlight-card,
.bb-ir-resource-card,
.bb-ir-update-card {
  height: 100%;
  padding: 24px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-ir-highlight-card strong {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-ir-highlight-card h3,
.bb-ir-resource-card h3,
.bb-ir-update-card h3 {
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-ir-highlight-card p,
.bb-ir-resource-card p,
.bb-ir-update-card p {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.9;
}

/* =====================================
   Resource Cards
===================================== */
.bb-ir-resource-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-ir-resource-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
  color: inherit;
}

.bb-ir-resource-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-heading-color);
}

.bb-ir-resource-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
}

.bb-ir-resource-card p {
  margin-bottom: 1rem;
}

.bb-ir-resource-link {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

.bb-ir-resource-card:hover .bb-ir-resource-link {
  color: var(--bb-link-color);
}

/* =====================================
   Founder
===================================== */
.bb-ir-founder {
  padding: 32px;
  background: linear-gradient(135deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-ir-founder-quote {
  margin-bottom: 1rem;
  color: var(--bb-link-color);
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-ir-founder h3 {
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-ir-founder p {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.95;
}

.bb-ir-founder p:last-child {
  margin-bottom: 0;
}

/* =====================================
   Hidden Quarter Block
===================================== */
.bb-ir-quarter-hidden {
  display: none;
}

.bb-ir-quarter {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bb-color-navy-800) 0%, var(--bb-color-blue-900) 100%);
}

.bb-ir-quarter::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-ir-quarter .bb-web-container {
  position: relative;
  z-index: 2;
}

.bb-ir-quarter-head {
  max-width: 960px;
  margin: 0 auto 32px;
  text-align: center;
}

.bb-ir-quarter .bb-ir-section-title,
.bb-ir-quarter .bb-ir-section-text {
  color: var(--bb-white);
}

.bb-ir-quarter-card {
  height: 100%;
  padding: 1.375rem;
  text-align: center;
  background-color: color-mix(in srgb, var(--bb-body-bg) 96%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-ir-quarter-card-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-heading-color);
}

.bb-ir-quarter-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
}

.bb-ir-quarter-card h3 {
  margin-bottom: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h5);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Banner
===================================== */
/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-ir-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bb-ir-snapshot {
    max-width: 560px;
  }
}
@media (max-width: 767.98px) {
  .bb-ir-snapshot,
  .bb-ir-overview-card,
  .bb-ir-highlight-card,
  .bb-ir-resource-card,
  .bb-ir-founder,
  .bb-ir-quarter-card {
    padding: 20px;
  }
}
.bb-company-label {
  margin-bottom: 14px;
}

.bb-company-title {
  margin-bottom: 18px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.bb-company-text {
  max-width: 720px;
  margin-bottom: 0;
}

/* =====================================
   Layout
===================================== */
.bb-company-info-section {
  background-color: transparent;
}

.bb-company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.85fr);
  gap: 24px;
  margin-top: 24px;
}

/* =====================================
   Cards
===================================== */
.bb-company-card {
  height: 100%;
  padding: 26px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-company-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bb-shadow-sm);
}

.bb-company-card-primary {
  border-color: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

.bb-company-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.bb-company-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-primary-light);
  color: color-mix(in srgb, var(--bb-primary) 58%, var(--bb-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bb-company-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-company-card-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
}

/* =====================================
   Fields
===================================== */
.bb-company-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-company-field-list {
  display: grid;
  gap: 16px;
}

.bb-company-field {
  min-width: 0;
}

.bb-company-field span {
  display: block;
  margin-bottom: 7px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-company-field strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bb-company-address p {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
  font-weight: var(--bb-fw-semibold);
}

.bb-company-address p:last-child {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

/* =====================================
   Banner
===================================== */
.bb-company-banner-section {
  padding-bottom: 0;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-company-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-company-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-company-card {
    padding: 20px;
  }
  .bb-company-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-company-card-head {
    align-items: flex-start;
  }
}
/* =====================================
   Hero
===================================== */
.bb-draugr-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-draugr-dark) 6%, transparent) 0, transparent 30%), radial-gradient(circle at 4% 92%, color-mix(in srgb, var(--bb-draugr-accent) 14%, transparent) 0, transparent 28%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-secondary-bg) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-draugr-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-draugr-dark) 5%, transparent);
}

.bb-draugr-hero::after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-draugr-accent) 12%, transparent);
}

.bb-draugr-hero .bb-web-container {
  position: relative;
  z-index: 2;
}

.bb-draugr-hero-copy {
  min-width: 0;
}

.bb-draugr-label {
  margin-bottom: 1rem;
}

.bb-draugr-hero-title {
  max-width: 47.5rem;
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
}

.bb-draugr-hero-text {
  max-width: 720px;
  margin-bottom: 0;
  line-height: 1.9;
}

.bb-draugr-hero-actions {
  margin-top: 28px;
}

/* =====================================
   Hero Visual
===================================== */
.bb-draugr-hero-visual {
  position: relative;
  min-height: 480px;
}

.bb-draugr-hero-screen {
  position: absolute;
  inset: 20px 20px 20px 40px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-coal-300) 94%, var(--bb-info)) 0%, var(--bb-coal-400) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-draugr-hero-topbar {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
}

.bb-draugr-hero-dot {
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 26%, transparent);
}

.bb-draugr-hero-layout {
  padding: 26px;
}

.bb-draugr-hero-menu {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.bb-draugr-hero-menu span {
  display: inline-block;
  width: 72px;
  height: 12px;
  margin-right: 10px;
  margin-bottom: 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 12%, transparent);
}

.bb-draugr-hero-banner {
  height: 140px;
  margin-bottom: 20px;
  border-radius: var(--bb-radius-xl);
  background: linear-gradient(135deg, var(--bb-draugr-purple) 0%, color-mix(in srgb, var(--bb-draugr-purple) 70%, var(--bb-draugr-blue)) 45%, var(--bb-draugr-cyan) 100%);
}

.bb-draugr-hero-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-draugr-hero-card {
  padding: 16px;
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-draugr-hero-card strong {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-hero-card span {
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 0.5rem;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 12%, transparent);
}

.bb-draugr-hero-card span:last-child {
  margin-bottom: 0;
}

.bb-draugr-line-85 {
  width: 85% !important;
}

.bb-draugr-line-82 {
  width: 82% !important;
}

.bb-draugr-line-75 {
  width: 75% !important;
}

.bb-draugr-line-70 {
  width: 70% !important;
}

.bb-draugr-line-60 {
  width: 60% !important;
}

.bb-draugr-line-58 {
  width: 58% !important;
}

.bb-draugr-line-55 {
  width: 55% !important;
}

.bb-draugr-line-48 {
  width: 48% !important;
}

.bb-draugr-floating-card {
  position: absolute;
  z-index: 5;
  max-width: 220px;
  padding: 18px;
  background-color: color-mix(in srgb, var(--bb-body-bg) 95%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-draugr-floating-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-floating-card span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-draugr-floating-card-1 {
  top: -5px;
  left: 0;
}

.bb-draugr-floating-card-2 {
  right: -10px;
  bottom: 10px;
}

/* =====================================
   Strip
===================================== */
.bb-draugr-strip {
  position: relative;
  z-index: 6;
  margin-top: -44px;
}

.bb-draugr-strip-shell {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-draugr-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bb-draugr-strip-item {
  height: 100%;
  padding: 24px 20px;
  border-right: 1px solid var(--bb-border-color);
}

.bb-draugr-strip-item:last-child {
  border-right: 0;
}

.bb-draugr-strip-item strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h2);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-strip-item span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Shared Sections
===================================== */
.bb-draugr-section {
  background-color: var(--bb-body-bg);
}

.bb-draugr-section-tight {
  padding-top: 0;
}

.bb-draugr-split {
  margin: 60px 0 60px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  gap: 48px;
  align-items: center;
}

.bb-draugr-section-head {
  max-width: 47.5rem;
}

.bb-draugr-section-head-wide {
  max-width: 860px;
  margin-bottom: 34px;
}

.bb-draugr-section-label {
  margin-bottom: 14px;
}

.bb-draugr-section-title {
  margin-bottom: 1rem;
  font-size: clamp(1.9rem, 3vw, 3rem);
}

.bb-draugr-section-text {
  color: var(--bb-secondary-color);
  line-height: 1.9;
}

.bb-draugr-section-text p:last-child {
  margin-bottom: 0;
}

/* =====================================
   Intro / Cards
===================================== */
.bb-draugr-intro-panel,
.bb-draugr-service-card,
.bb-draugr-flow-card,
.bb-draugr-difference-card {
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-draugr-intro-panel {
  padding: 24px;
}

.bb-draugr-intro-card {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--bb-border-color);
}

.bb-draugr-intro-card:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.bb-draugr-intro-card h3,
.bb-draugr-flow-card h3,
.bb-draugr-difference-card h3 {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-intro-card p,
.bb-draugr-flow-card p,
.bb-draugr-difference-card p {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

/* =====================================
   Services
===================================== */
.bb-draugr-service-grid,
.bb-draugr-difference-grid {
  display: grid;
  gap: 24px;
}

.bb-draugr-service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-draugr-service-card,
.bb-draugr-flow-card,
.bb-draugr-difference-card {
  height: 100%;
  padding: 24px;
}

.bb-draugr-service-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-draugr-blue-soft);
  color: color-mix(in srgb, var(--bb-draugr-blue) 70%, var(--bb-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-draugr-service-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-draugr-service-title {
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-service-text {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

/* =====================================
   Flow
===================================== */
.bb-draugr-flow-shell {
  padding: 24px;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-draugr-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-draugr-flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.625rem;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-pill);
  color: var(--bb-white);
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Dark Highlight
===================================== */
.bb-draugr-dark {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 96%, var(--bb-info)) 0%, var(--bb-coal-400) 100%);
  color: var(--bb-white);
}

.bb-draugr-dark-copy {
  color: var(--bb-white);
}

.bb-draugr-dark-copy h1,
.bb-draugr-dark-copy h2,
.bb-draugr-dark-copy h3,
.bb-draugr-dark-copy h4,
.bb-draugr-dark-copy h5,
.bb-draugr-dark-copy h6 {
  color: var(--bb-white);
}

.bb-draugr-dark-copy p,
.bb-draugr-dark-copy li {
  color: color-mix(in srgb, var(--bb-theme-on-dark) 82%, transparent);
  line-height: 1.9;
}

.bb-draugr-list {
  padding-left: 18px;
  margin-bottom: 0;
}

.bb-draugr-highlight-visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-theme-on-dark) 5%, transparent) 0%, color-mix(in srgb, var(--bb-theme-on-dark) 2%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 9%, transparent);
  border-radius: var(--bb-radius-2xl);
}

.bb-draugr-highlight-ring {
  position: absolute;
  width: 16.25rem;
  height: 260px;
  border: 1px solid color-mix(in srgb, var(--bb-draugr-purple) 34%, transparent);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bb-draugr-highlight-ring::before,
.bb-draugr-highlight-ring::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid color-mix(in srgb, var(--bb-draugr-blue) 26%, transparent);
  border-radius: 50%;
}

.bb-draugr-highlight-ring::after {
  inset: 40px;
}

.bb-draugr-highlight-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  padding: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bb-draugr-purple) 0%, var(--bb-draugr-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bb-white);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--bb-draugr-blue) 25%, transparent);
}

.bb-draugr-highlight-card {
  position: absolute;
  width: 200px;
  padding: 16px;
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 9%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-draugr-highlight-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-white);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-highlight-card span {
  display: block;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-draugr-highlight-card-1 {
  top: 20px;
  left: 20px;
}

.bb-draugr-highlight-card-2 {
  top: 30px;
  right: 20px;
}

.bb-draugr-highlight-card-3 {
  bottom: 20px;
  left: 35px;
}

.bb-draugr-highlight-card-4 {
  bottom: 35px;
  right: 20px;
}

/* =====================================
   Difference / Bottom
===================================== */
.bb-draugr-difference-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bb-draugr-banner-section {
  padding-top: 0;
}

.bb-draugr-faq-section {
  padding-top: 0;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-draugr-hero-grid,
  .bb-draugr-split {
    grid-template-columns: 1fr;
  }
  .bb-draugr-hero-visual {
    min-height: 420px;
  }
  .bb-draugr-service-grid,
  .bb-draugr-flow-grid,
  .bb-draugr-difference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-draugr-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-draugr-strip-item:nth-child(2) {
    border-right: 0;
  }
  .bb-draugr-strip-item:nth-child(1),
  .bb-draugr-strip-item:nth-child(2) {
    border-bottom: 1px solid var(--bb-border-color);
  }
}
@media (max-width: 991.98px) {
  .bb-draugr-floating-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .bb-draugr-hero-screen {
    position: relative;
    inset: auto;
    min-height: 360px;
  }
  .bb-draugr-strip {
    margin-top: 28px;
  }
  .bb-draugr-highlight-visual {
    min-height: auto;
  }
  .bb-draugr-highlight-ring,
  .bb-draugr-highlight-core,
  .bb-draugr-highlight-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0 auto 16px;
  }
  .bb-draugr-highlight-card {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .bb-draugr-hero-visual {
    min-height: auto;
  }
  .bb-draugr-hero-cards,
  .bb-draugr-service-grid,
  .bb-draugr-flow-grid,
  .bb-draugr-difference-grid,
  .bb-draugr-strip-grid {
    grid-template-columns: 1fr;
  }
  .bb-draugr-strip-item {
    border-right: 0;
    border-bottom: 1px solid var(--bb-border-color);
  }
  .bb-draugr-strip-item:last-child {
    border-bottom: 0;
  }
  .bb-draugr-intro-panel,
  .bb-draugr-service-card,
  .bb-draugr-flow-card,
  .bb-draugr-difference-card,
  .bb-draugr-flow-shell {
    padding: 20px;
  }
  .bb-draugr-hero-layout {
    padding: 20px;
  }
  .bb-draugr-hero-banner {
    height: 110px;
  }
}
/* =====================================
   Draugr Dark Surface
   Section makyajı değildir.
   İçerideki koyu component / highlight alanları için kullanılır.
===================================== */
.bb-draugr-dark {
  position: relative;
  overflow: hidden;
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-draugr-accent, var(--bb-primary)) 16%, transparent) 0, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 96%, var(--bb-info)) 0%, var(--bb-coal-400) 100%);
}

.bb-draugr-dark::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  width: 16rem;
  height: 16rem;
  background-color: color-mix(in srgb, var(--bb-draugr-accent, var(--bb-primary)) 10%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-draugr-dark > * {
  position: relative;
  z-index: 1;
}

.bb-draugr-dark-copy {
  color: var(--bb-white);
}

.bb-draugr-dark-copy h1,
.bb-draugr-dark-copy h2,
.bb-draugr-dark-copy h3,
.bb-draugr-dark-copy h4,
.bb-draugr-dark-copy h5,
.bb-draugr-dark-copy h6 {
  color: var(--bb-white);
}

.bb-draugr-dark-copy p,
.bb-draugr-dark-copy li {
  color: color-mix(in srgb, var(--bb-theme-on-dark) 82%, transparent);
  line-height: 1.9;
}

.bb-draugr-dark .btn-outline-secondary {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
  border-color: color-mix(in srgb, var(--bb-theme-on-dark) 14%, transparent);
}

.bb-draugr-dark .btn-outline-secondary:hover {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 13%, transparent);
  border-color: color-mix(in srgb, var(--bb-theme-on-dark) 20%, transparent);
}

/* =====================================
   Dark Highlight
===================================== */
.bb-draugr-dark {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 96%, var(--bb-info)) 0%, var(--bb-coal-400) 100%);
  color: var(--bb-white);
}

.bb-draugr-dark-copy {
  color: var(--bb-white);
}

.bb-draugr-dark-copy h1,
.bb-draugr-dark-copy h2,
.bb-draugr-dark-copy h3,
.bb-draugr-dark-copy h4,
.bb-draugr-dark-copy h5,
.bb-draugr-dark-copy h6 {
  color: var(--bb-white);
}

.bb-draugr-dark-copy p,
.bb-draugr-dark-copy li {
  color: color-mix(in srgb, var(--bb-theme-on-dark) 82%, transparent);
  line-height: 1.9;
}

.bb-draugr-list {
  padding-left: 18px;
  margin-bottom: 0;
}

.bb-draugr-highlight-visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-theme-on-dark) 5%, transparent) 0%, color-mix(in srgb, var(--bb-theme-on-dark) 2%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 9%, transparent);
}

.bb-draugr-highlight-ring {
  position: absolute;
  width: 16.25rem;
  height: 260px;
  border: 1px solid color-mix(in srgb, var(--bb-draugr-purple) 34%, transparent);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bb-draugr-highlight-ring::before,
.bb-draugr-highlight-ring::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid color-mix(in srgb, var(--bb-draugr-blue) 26%, transparent);
  border-radius: 50%;
}

.bb-draugr-highlight-ring::after {
  inset: 40px;
}

.bb-draugr-highlight-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  padding: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bb-draugr-purple) 0%, var(--bb-draugr-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bb-white);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--bb-draugr-blue) 25%, transparent);
}

.bb-draugr-highlight-card {
  position: absolute;
  width: 200px;
  padding: 16px;
  background-color: color-mix(in srgb, var(--bb-theme-on-dark) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-theme-on-dark) 9%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-draugr-highlight-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-white);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-draugr-highlight-card span {
  display: block;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-draugr-highlight-card-1 {
  top: 20px;
  left: 20px;
}

.bb-draugr-highlight-card-2 {
  top: 30px;
  right: 20px;
}

.bb-draugr-highlight-card-3 {
  bottom: 20px;
  left: 35px;
}

.bb-draugr-highlight-card-4 {
  bottom: 35px;
  right: 20px;
}

/* =====================================
   Bulbulustur Web - Us Whitepaper
   Technical documents page
===================================== */
/* -------------------------------------
   Hero
------------------------------------- */
.bb-whitepaper-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(5rem, 9vw, 8rem);
  background: radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 16rem), radial-gradient(circle at 80% 52%, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 12rem), linear-gradient(180deg, color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-tertiary-bg)) 0%, var(--bb-tertiary-bg) 100%);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-whitepaper-hero::before {
  content: "";
  position: absolute;
  top: -6rem;
  right: -4rem;
  width: 18rem;
  height: 18rem;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-whitepaper-hero::after {
  content: "";
  position: absolute;
  right: 9rem;
  bottom: 4rem;
  width: 8.75rem;
  height: 8.75rem;
  background-color: color-mix(in srgb, var(--bb-primary) 13%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-whitepaper-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.bb-whitepaper-hero-content {
  max-width: 54rem;
}

.bb-whitepaper-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 0.42rem 0.65rem;
  color: color-mix(in srgb, var(--bb-coal-300) 88%, var(--bb-primary));
  background-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-white));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-whitepaper-hero-title {
  max-width: 48rem;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.bb-whitepaper-hero-text {
  max-width: 58rem;
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.85;
}

.bb-whitepaper-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bb-whitepaper-hero-actions .btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  border-radius: var(--bb-radius);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Snapshot Panel
------------------------------------- */
.bb-whitepaper-mini-panel {
  position: relative;
  z-index: 2;
  padding: clamp(1.15rem, 2.4vw, 1.5rem);
  background-color: color-mix(in srgb, var(--bb-body-bg) 90%, transparent);
  backdrop-filter: blur(0.625rem);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--bb-coal-300) 7%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 3%, transparent);
}

.bb-whitepaper-mini-panel-title {
  margin-bottom: 1rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-whitepaper-mini-stat-list {
  display: grid;
}

.bb-whitepaper-mini-stat {
  padding-top: 0.9rem;
  margin-top: 0.9rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-whitepaper-mini-stat:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.bb-whitepaper-mini-stat strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.bb-whitepaper-mini-stat span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Founder Note
------------------------------------- */
.bb-whitepaper-founder-section {
  position: relative;
  z-index: 2;
  margin-top: clamp(-4.25rem, -5vw, -3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.bb-whitepaper-founder-card {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--bb-coal-300) 8%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 3%, transparent);
}

.bb-whitepaper-founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(20rem, 0.85fr);
}

.bb-whitepaper-founder-left {
  padding: clamp(1.5rem, 3vw, 2rem);
}

.bb-whitepaper-founder-right {
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: var(--bb-tertiary-bg);
  border-left: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-whitepaper-quote-mark {
  margin-bottom: 0.75rem;
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-4xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
}

.bb-whitepaper-founder-title {
  margin: 0 0 1rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-whitepaper-founder-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.95;
}

.bb-whitepaper-founder-name {
  margin-bottom: 0.35rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-whitepaper-founder-role {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-whitepaper-founder-points {
  padding-left: 1.1rem;
  margin: 0;
}

.bb-whitepaper-founder-points li {
  margin-bottom: 0.35rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Reusable Whitepaper Blocks
   Used by _WhitepaperSections component
------------------------------------- */
.bb-whitepaper-section {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.bb-whitepaper-section-sm {
  padding: clamp(1.5rem, 3vw, 2rem) 0;
}

.bb-whitepaper-title {
  margin: 0 0 1.2rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-whitepaper-subtitle {
  margin: 0 0 1rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-whitepaper-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.9;
}

.bb-whitepaper-stat-card,
.bb-whitepaper-layer-card,
.bb-whitepaper-feature-card,
.bb-whitepaper-business-card,
.bb-whitepaper-future-card,
.bb-whitepaper-option-card {
  height: 100%;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--bb-coal-300) 4%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 2%, transparent);
}

.bb-whitepaper-stat-card,
.bb-whitepaper-layer-card,
.bb-whitepaper-feature-card,
.bb-whitepaper-business-card,
.bb-whitepaper-future-card,
.bb-whitepaper-option-card {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.bb-whitepaper-layer-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-whitepaper-layer-title {
  margin: 0 0 0.75rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-whitepaper-layer-text {
  margin: 0 0 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-whitepaper-list {
  padding-left: 1.1rem;
  margin: 0;
}

.bb-whitepaper-list li {
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-whitepaper-flow-shell {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--bb-coal-300) 5%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 2%, transparent);
}

.bb-whitepaper-flow-card {
  height: 100%;
  padding: 1.25rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-whitepaper-flow-card-title {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-whitepaper-flow-card-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-whitepaper-flow-arrow {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Banner
------------------------------------- */
.bb-whitepaper-banner-wrap {
  padding-top: 1rem;
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-whitepaper-empty {
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-whitepaper-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-whitepaper-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-whitepaper-empty h1 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-whitepaper-empty p {
  max-width: 34rem;
  margin: 0.65rem auto 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-whitepaper-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.45fr);
  }
}
@media (max-width: 991.98px) {
  .bb-whitepaper-hero {
    padding-bottom: 5rem;
  }
  .bb-whitepaper-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-whitepaper-mini-panel {
    max-width: 36rem;
  }
  .bb-whitepaper-founder-section {
    margin-top: -2.5rem;
  }
  .bb-whitepaper-founder-grid {
    grid-template-columns: 1fr;
  }
  .bb-whitepaper-founder-right {
    border-left: 0;
    border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
}
@media (max-width: 767.98px) {
  .bb-whitepaper-hero {
    padding-top: 2.25rem;
    padding-bottom: 4rem;
  }
  .bb-whitepaper-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-whitepaper-hero-actions .btn {
    width: 100%;
  }
  .bb-whitepaper-founder-left,
  .bb-whitepaper-founder-right,
  .bb-whitepaper-mini-panel,
  .bb-whitepaper-flow-shell {
    padding: 1.25rem;
  }
  .bb-whitepaper-founder-card,
  .bb-whitepaper-mini-panel,
  .bb-whitepaper-empty {
    border-radius: var(--bb-radius-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-whitepaper-hero-title {
    font-size: var(--bb-fs-3xl);
  }
  .bb-whitepaper-founder-title {
    font-size: var(--bb-icon-size-xl);
  }
}
.bb-career-content-section {
  padding-top: 36px;
}

.bb-career-block {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-career-accent) 8%, transparent) 0, transparent 30%), var(--bb-career-section-bg, var(--bb-body-bg));
}

.bb-career-block + .bb-career-block {
  border-top: 1px solid var(--bb-career-border-soft);
}

.bb-career-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.bb-career-block-grid-reverse .bb-career-block-media {
  order: 2;
}

.bb-career-block-grid-reverse .bb-career-block-content {
  order: 1;
}

.bb-career-block-media {
  min-width: 0;
}

.bb-career-block-media img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid color-mix(in srgb, var(--bb-career-border) 72%, transparent);
  box-shadow: var(--bb-shadow-sm);
}

.bb-career-block-content {
  min-width: 0;
}

.bb-career-block-label {
  gap: 0.4375rem;
  margin-bottom: 14px;
}

.bb-career-block-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-career-block-title {
  max-width: 47.5rem;
  margin-bottom: 1rem;
  color: var(--bb-heading-color);
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.035em;
}

.bb-career-block-text {
  max-width: 820px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-career-block-text p:last-child {
  margin-bottom: 0;
}

.bb-career-block-text h1,
.bb-career-block-text h2,
.bb-career-block-text h3,
.bb-career-block-text h4,
.bb-career-block-text h5,
.bb-career-block-text h6 {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

.bb-career-block-full {
  max-width: 960px;
  margin: 0 auto;
  padding: 42px;
  border: 1px solid var(--bb-career-border-soft);
  border-radius: var(--bb-radius-2xl);
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  box-shadow: var(--bb-shadow-xs);
  text-align: center;
}

.bb-career-block-full .bb-career-block-title,
.bb-career-block-full .bb-career-block-text {
  margin-left: auto;
  margin-right: auto;
}

.bb-career-subcontent-wrap {
  margin-top: 34px;
}

/* =====================================
   Career Subcontent Component
===================================== */
.bb-career-subcontent-section {
  margin-top: 34px;
}

.bb-career-subcontent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-career-subcontent-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-career-accent) 9%, transparent) 0, transparent 30%), var(--bb-career-subcontent-bg, var(--bb-body-bg));
  border: 1px solid var(--bb-career-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-career-subcontent-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--bb-career-accent) 30%, var(--bb-career-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-career-subcontent-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background-color: var(--bb-tertiary-bg);
  border-bottom: 2px solid var(--bb-primary);
}

.bb-career-subcontent-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--bb-transition-normal);
}

.bb-career-subcontent-card:hover .bb-career-subcontent-media img {
  transform: scale(1.035);
}

.bb-career-subcontent-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.375rem;
}

.bb-career-subcontent-body h3 {
  margin: 0 0 10px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-career-subcontent-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-career-subcontent-text p:last-child {
  margin-bottom: 0;
}

.bb-career-subcontent-text h1,
.bb-career-subcontent-text h2,
.bb-career-subcontent-text h3,
.bb-career-subcontent-text h4,
.bb-career-subcontent-text h5,
.bb-career-subcontent-text h6 {
  margin-top: 1.25em;
  margin-bottom: 0.55em;
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-career-subcontent-text h1:first-child,
.bb-career-subcontent-text h2:first-child,
.bb-career-subcontent-text h3:first-child,
.bb-career-subcontent-text h4:first-child,
.bb-career-subcontent-text h5:first-child,
.bb-career-subcontent-text h6:first-child {
  margin-top: 0;
}

.bb-career-subcontent-text ul,
.bb-career-subcontent-text ol {
  display: grid;
  gap: 10px;
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.bb-career-subcontent-text li {
  position: relative;
  margin: 0;
  padding-left: 24px;
}

.bb-career-subcontent-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  background-color: var(--bb-career-accent);
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-career-accent) 13%, transparent);
}

.bb-career-subcontent-text ol {
  counter-reset: bb-career-subcontent-counter;
}

.bb-career-subcontent-text ol li {
  counter-increment: bb-career-subcontent-counter;
}

.bb-career-subcontent-text ol li::before {
  content: counter(bb-career-subcontent-counter);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-career-accent-text);
  background-color: var(--bb-career-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-career-subcontent-text a {
  color: var(--bb-link-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-career-subcontent-text a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-career-subcontent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-career-subcontent-section {
    margin-top: 24px;
  }
  .bb-career-subcontent-grid {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
  .bb-career-subcontent-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-career-subcontent-body {
    padding: 18px;
  }
}
@media (max-width: 575.98px) {
  .bb-career-subcontent-media {
    aspect-ratio: 16/11;
  }
}
/* =====================================
   Career Jobs Page
   Açık pozisyonlar listesi.
===================================== */
/* Section */
.bb-career-jobs-shell {
  padding: 28px;
  border: 1px solid var(--bb-career-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-career-jobs-head {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bb-career-border-soft);
}

/* Job list */
.bb-career-job-list {
  display: grid;
  gap: 12px;
}

.bb-career-job-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 28px;
  gap: 0.875rem;
  align-items: center;
  min-height: 82px;
  padding: 18px;
  border: 1px solid var(--bb-career-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
  color: inherit;
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-career-job-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-career-accent) 36%, var(--bb-career-border));
  box-shadow: var(--bb-shadow-sm);
  color: inherit;
}

.bb-career-job-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-career-accent-soft);
  color: var(--bb-career-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-career-job-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-career-job-content {
  min-width: 0;
}

.bb-career-job-content strong {
  display: block;
  margin-bottom: 4px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-career-job-content span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
}

.bb-career-job-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-career-job-location .material-symbols-outlined {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-career-job-arrow {
  color: var(--bb-tertiary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-career-job-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Pagination */
.bb-career-jobs-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--bb-career-border-soft);
}

.bb-career-jobs-pagination-info {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-career-jobs-pagination-wrap .page-link .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* Empty */
.bb-career-jobs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 34px;
  text-align: center;
  border: 1px solid var(--bb-career-border-soft);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-tertiary-bg);
}

.bb-career-jobs-empty-icon {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-career-accent-soft);
  color: var(--bb-career-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-career-jobs-empty-icon .material-symbols-outlined {
  font-size: var(--bb-h2);
  line-height: 1;
}

.bb-career-jobs-empty h3 {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-career-jobs-empty p {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Career Job Detail Page
   İş ilanı detay.
===================================== */
.bb-career-job-detail-label {
  gap: 0.4375rem;
  margin-bottom: 0.75rem;
}

.bb-career-job-detail-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-career-job-detail-title {
  max-width: 880px;
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: clamp(2.2rem, 4vw, 3.45rem);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-career-job-detail-text {
  max-width: 740px;
  margin-bottom: 0;
}

.bb-career-job-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.bb-career-job-detail-meta span,
.bb-career-job-detail-meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--bb-career-border-soft);
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 82%, transparent);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-career-job-detail-meta a:hover {
  color: var(--bb-link-color);
  border-color: color-mix(in srgb, var(--bb-career-accent) 36%, var(--bb-career-border));
}

.bb-career-job-detail-meta .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-career-job-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: flex-start;
}

.bb-career-job-detail-content {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.bb-career-job-detail-card,
.bb-career-job-apply-card {
  border: 1px solid var(--bb-career-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-career-job-detail-card {
  overflow: hidden;
}

.bb-career-job-detail-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.875rem;
  align-items: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid var(--bb-career-border-soft);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-career-accent) 10%, transparent) 0, transparent 34%), var(--bb-body-bg);
}

.bb-career-job-detail-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-career-accent-soft);
  color: var(--bb-career-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-career-job-detail-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-career-job-detail-card-head h2 {
  margin: 0 0 5px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-career-job-detail-card-head p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Rich content */
.bb-career-rich-content {
  padding: 24px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-career-rich-content p:last-child {
  margin-bottom: 0;
}

.bb-career-rich-content h1,
.bb-career-rich-content h2,
.bb-career-rich-content h3,
.bb-career-rich-content h4,
.bb-career-rich-content h5,
.bb-career-rich-content h6 {
  margin-top: 1.4em;
  margin-bottom: 0.65em;
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-career-rich-content h1:first-child,
.bb-career-rich-content h2:first-child,
.bb-career-rich-content h3:first-child,
.bb-career-rich-content h4:first-child,
.bb-career-rich-content h5:first-child,
.bb-career-rich-content h6:first-child {
  margin-top: 0;
}

.bb-career-rich-content ul,
.bb-career-rich-content ol {
  display: grid;
  gap: 12px;
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.bb-career-rich-content li {
  position: relative;
  padding-left: 28px;
  margin: 0;
}

.bb-career-rich-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-career-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-career-accent) 14%, transparent);
}

.bb-career-rich-content ol {
  counter-reset: bb-career-counter;
}

.bb-career-rich-content ol li {
  counter-increment: bb-career-counter;
}

.bb-career-rich-content ol li::before {
  content: counter(bb-career-counter);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-career-accent-soft);
  color: var(--bb-career-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-career-rich-content a {
  color: var(--bb-link-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-career-rich-content a:hover {
  text-decoration: underline;
}

/* Aside */
.bb-career-job-detail-aside {
  position: sticky;
  top: 24px;
  min-width: 0;
}

.bb-career-job-apply-card {
  display: grid;
  gap: 0.875rem;
  padding: 1.375rem;
}

.bb-career-job-apply-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-career-accent);
  color: var(--bb-primary-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--bb-career-accent) 18%, transparent);
}

.bb-career-job-apply-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-career-job-apply-card h2 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-career-job-apply-card p {
  margin: 0 0 4px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-career-job-apply-card .btn {
  width: 100%;
}

/* =====================================
   Career Job Detail Page - Revised CTA
===================================== */
.bb-career-job-detail-title {
  max-width: 920px;
}

.bb-career-job-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: flex-start;
}

.bb-career-job-apply-card {
  display: grid;
  gap: 16px;
  padding: 1.375rem;
  border: 1px solid var(--bb-career-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-career-job-apply-kicker {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  padding: 0 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-career-accent-soft);
  color: var(--bb-career-accent-text);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-career-job-apply-card h2 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.015em;
}

.bb-career-job-apply-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--bb-career-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
}

.bb-career-job-apply-list div {
  display: grid;
  gap: 4px;
  padding: 0.8125rem 14px;
  border-bottom: 1px solid var(--bb-career-border-soft);
}

.bb-career-job-apply-list div:last-child {
  border-bottom: 0;
}

.bb-career-job-apply-list span {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-career-job-apply-list strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-career-job-apply-card .btn {
  width: 100%;
}

/* Bottom CTA */
.bb-career-job-bottom-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.125rem;
  align-items: center;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--bb-career-accent) 26%, var(--bb-career-border));
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-career-accent) 13%, transparent) 0, transparent 34%), var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-career-job-bottom-cta h2 {
  margin: 0 0 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-career-job-bottom-cta p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

@media (max-width: 991.98px) {
  .bb-career-job-detail-layout {
    grid-template-columns: 1fr;
  }
  .bb-career-job-detail-aside {
    position: static;
    order: -1;
  }
  .bb-career-job-apply-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767.98px) {
  .bb-career-job-bottom-cta {
    grid-template-columns: 1fr;
  }
  .bb-career-job-bottom-cta .btn {
    width: 100%;
  }
}
/* Responsive */
@media (max-width: 991.98px) {
  .bb-career-job-detail-layout {
    grid-template-columns: 1fr;
  }
  .bb-career-job-detail-aside {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .bb-career-job-detail-card-head,
  .bb-career-rich-content {
    padding: 20px;
  }
}
@media (max-width: 575.98px) {
  .bb-career-job-detail-card,
  .bb-career-job-apply-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-career-job-detail-card-head {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-career-job-card {
    grid-template-columns: 48px minmax(0, 1fr) 28px;
  }
  .bb-career-job-location {
    grid-column: 2/-1;
  }
}
@media (max-width: 767.98px) {
  .bb-career-jobs-shell {
    padding: 20px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-career-job-card {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: flex-start;
  }
  .bb-career-job-icon {
    width: 2.625rem;
    height: 42px;
  }
  .bb-career-job-arrow {
    display: none;
  }
  .bb-career-job-location {
    grid-column: 2;
    white-space: normal;
  }
  .bb-career-jobs-pagination-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 991.98px) {
  .bb-career-block {
    padding: 48px 0;
  }
  .bb-career-block-grid,
  .bb-career-block-grid-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bb-career-block-grid-reverse .bb-career-block-media,
  .bb-career-block-grid-reverse .bb-career-block-content {
    order: initial;
  }
  .bb-career-block-media img {
    max-height: 380px;
  }
  .bb-career-block-full {
    padding: 30px;
  }
}
@media (max-width: 575.98px) {
  .bb-career-content-section {
    padding-top: 24px;
  }
  .bb-career-block {
    padding: 36px 0;
  }
  .bb-career-block-media img {
    max-height: 300px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-career-block-full {
    padding: 1.375rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-career-subcontent-wrap {
    margin-top: 24px;
  }
}
/* =====================================
   Career Jobs Page Hero
   /career/jobs sayfası hero makyajı.
   Default bb-hero omurgası üzerine çalışır.
===================================== */
.bb-career-jobs-page-hero {
  --bb-hero-title-max-width: 48rem;
  --bb-hero-lead-max-width: 50rem;
  --bb-hero-aside-width: 25rem;
  --bb-hero-grid-gap: clamp(2rem, 5vw, 4.75rem);
  padding-top: clamp(2.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 4.5vw, 3.875rem);
}

.bb-career-jobs-page-hero-content {
  min-width: 0;
}

.bb-career-jobs-page-hero-breadcrumb {
  margin-bottom: 2.35rem;
}

.bb-career-jobs-page-hero-label {
  gap: 0.45rem;
  margin-bottom: 0.875rem;
}

.bb-career-jobs-page-hero-label .material-symbols-outlined {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-career-jobs-page-hero-title {
  color: var(--bb-heading-color);
  font-size: clamp(2.35rem, 4.2vw, 3.45rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.bb-career-jobs-page-hero-text {
  max-width: 50rem;
  margin-top: 0.85rem;
  color: var(--bb-secondary-color);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: var(--bb-line-height-content);
}

.bb-career-jobs-page-hero-aside {
  align-self: center;
}

.bb-career-jobs-page-hero-card {
  max-width: 25rem;
  padding: 1.25rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.95rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  border-color: color-mix(in srgb, var(--bb-white) 84%, var(--bb-border-color));
  box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--bb-coal-300) 7%, transparent), 0 0 0 1px color-mix(in srgb, var(--bb-white) 72%, transparent) inset;
}

.bb-career-jobs-page-hero-card-icon-container {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bb-career-accent-soft);
  color: var(--bb-career-accent-text);
  border-radius: var(--bb-radius-xl);
}

.bb-career-jobs-page-hero-card-icon {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-career-jobs-page-hero-card-content {
  min-width: 0;
}

.bb-career-jobs-page-hero-card-title {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-career-jobs-page-hero-card-text {
  margin-top: 0.35rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-career-jobs-page-hero-aside {
    justify-self: start;
  }
  .bb-career-jobs-page-hero-card {
    max-width: 30rem;
  }
}
@media (max-width: 767.98px) {
  .bb-career-jobs-page-hero {
    padding-top: 2.25rem;
    padding-bottom: 2.75rem;
  }
  .bb-career-jobs-page-hero-title {
    font-size: clamp(2rem, 8vw, 2.55rem);
  }
  .bb-career-jobs-page-hero-card {
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-career-jobs-page-hero-card {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding: 1rem;
  }
}
/* =====================================
   Career Job Detail Page Hero
   /career/job detail hero makyajı.
   Default bb-hero omurgası üzerine çalışır.
===================================== */
.bb-career-job-detail-page-hero {
  --bb-hero-title-max-width: 54rem;
  --bb-hero-lead-max-width: 44rem;
  padding-top: clamp(2.75rem, 4vw, 3.75rem);
  padding-bottom: clamp(3.25rem, 4.5vw, 4.25rem);
}

.bb-career-job-detail-page-hero-content {
  min-width: 0;
}

.bb-career-job-detail-page-hero-breadcrumb {
  margin-bottom: 1.5rem;
}

.bb-career-job-detail-page-hero-label {
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.bb-career-job-detail-page-hero-label .material-symbols-outlined {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-career-job-detail-page-hero-title {
  color: var(--bb-heading-color);
  font-size: clamp(2.35rem, 4.4vw, 3.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.bb-career-job-detail-page-hero-text {
  margin-top: 0.9rem;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

.bb-career-job-detail-page-hero-chips {
  margin-top: 1.25rem;
}

.bb-career-job-detail-page-hero-chip {
  text-decoration: none !important;
}

.bb-career-job-detail-page-hero-linkedin-chip {
  color: var(--bb-heading-color);
  background-color: color-mix(in srgb, var(--bb-info) 10%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-info) 22%, var(--bb-border-color));
}

.bb-career-job-detail-page-hero-linkedin-chip:hover {
  color: var(--bb-heading-color);
  border-color: color-mix(in srgb, var(--bb-info) 36%, var(--bb-border-color));
}

@media (max-width: 767.98px) {
  .bb-career-job-detail-page-hero {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
  }
  .bb-career-job-detail-page-hero-title {
    font-size: clamp(2rem, 9vw, 2.85rem);
  }
}
.bb-career-job-detail-card-head .bb-career-job-detail-card-icon {
  --bb-career-job-detail-card-icon-bg: var(
      --bb-career-accent-soft,
      color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated))
  );
  --bb-career-job-detail-card-icon-color: var(
      --bb-career-accent-text,
      color-mix(in srgb, var(--bb-primary) 58%, var(--bb-dark))
  );
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-career-job-detail-card-icon-color);
  background-color: var(--bb-career-job-detail-card-icon-bg);
  background-image: radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--bb-white) 48%, transparent) 0, transparent 40%);
  border: 1px solid color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bb-primary) 8%, transparent), 0 0 0 4px color-mix(in srgb, var(--bb-primary) 6%, transparent);
}

.bb-career-job-detail-card-head .bb-career-job-detail-card-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-job-apply-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 0.9fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

/* Left intro */
.bb-job-apply-intro {
  position: static;
  min-width: 0;
  padding-top: 4px;
}

.bb-job-apply-eyebrow {
  gap: 0.4375rem;
  margin-bottom: 0.75rem;
}

.bb-job-apply-eyebrow .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-job-apply-title {
  max-width: 500px;
  margin: 0 0 14px;
  color: var(--bb-heading-color);
  font-size: clamp(2.55rem, 4.5vw, 3.85rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.bb-job-apply-title::after {
  content: "";
  display: block;
  width: 7rem;
  height: 0.38rem;
  margin-top: -0.12rem;
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
}

.bb-job-apply-text {
  max-width: 470px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  line-height: var(--bb-line-height-base);
}

.bb-job-apply-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 20px;
}

.bb-job-apply-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-job-apply-benefits .material-symbols-outlined {
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 1;
}

/* Position card */
.bb-job-apply-position-card {
  margin-top: 28px;
  padding: 20px;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-job-apply-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.025);
}

.bb-job-apply-position-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 0.75rem;
  padding: 0 0.625rem;
  color: var(--bb-job-apply-accent-text);
  background-color: var(--bb-job-apply-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-job-apply-position-title {
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-job-apply-position-title h1,
.bb-job-apply-position-title h2,
.bb-job-apply-position-title h3,
.bb-job-apply-position-title h4,
.bb-job-apply-position-title h5,
.bb-job-apply-position-title h6,
.bb-job-apply-position-title p {
  margin: 0;
}

.bb-job-apply-position-card p {
  margin: 10px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Form card */
.bb-job-apply-form-card {
  width: 100%;
  max-width: 31rem;
  min-width: 0;
  justify-self: end;
  padding: 20px;
  background-color: color-mix(in srgb, var(--bb-body-bg) 96%, transparent);
  border: 1px solid var(--bb-job-apply-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.065), 0 2px 6px rgba(15, 23, 42, 0.025);
}

.bb-job-apply-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 12px 13px;
  color: color-mix(in srgb, var(--bb-info) 72%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-info) 8%, var(--bb-white));
  border: 1px solid color-mix(in srgb, var(--bb-info) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-job-apply-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-icon-size-sm);
  line-height: var(--bb-line-height-heading);
}

/* Form */
.bb-job-apply-form {
  display: grid;
  gap: 0.875rem;
}

.bb-job-apply-form-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--bb-job-apply-border-soft);
}

.bb-job-apply-form-head h2 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-3xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-job-apply-form-head p {
  max-width: 100%;
  margin: 6px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-job-apply-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.bb-job-apply-field {
  min-width: 0;
}

.bb-job-apply-field-wide {
  grid-column: auto;
}

.bb-job-apply-form .form-label {
  margin-bottom: 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-job-apply-form .form-control,
.bb-job-apply-form .form-select {
  min-height: 44px;
  color: var(--bb-heading-color);
  background-color: var(--bb-body-bg);
  border: 1px solid color-mix(in srgb, var(--bb-border-color) 68%, transparent);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-job-apply-form .form-control::placeholder {
  color: color-mix(in srgb, var(--bb-secondary-color) 78%, transparent);
}

.bb-job-apply-form .form-control:focus,
.bb-job-apply-form .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 70%, var(--bb-border-color));
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--bb-primary) 11%, transparent);
}

.bb-job-apply-input-group .input-group-text {
  min-width: 2.625rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 68%, transparent);
  border-right: 0;
  border-radius: var(--bb-radius-lg) 0 0 var(--bb-radius-lg);
}

.bb-job-apply-input-group .input-group-text .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-job-apply-input-group .form-control {
  border-left: 0;
  border-radius: 0 var(--bb-radius-lg) var(--bb-radius-lg) 0;
}

.bb-job-apply-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  border-color: color-mix(in srgb, var(--bb-primary) 70%, var(--bb-border-color));
}

.bb-job-apply-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Note */
.bb-job-apply-form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 11px 12px;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-job-apply-border-soft);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-job-apply-form-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-job-apply-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-job-apply-submit {
  min-width: 8.75rem;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 1.125rem;
  padding-left: 1.125rem;
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-job-apply-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .bb-job-apply-intro {
    max-width: 47.5rem;
  }
  .bb-job-apply-form-card {
    max-width: 34rem;
    justify-self: start;
  }
  .bb-job-apply-position-card {
    margin-top: 24px;
  }
}
@media (max-width: 767.98px) {
  .bb-job-apply-layout {
    gap: 20px;
  }
  .bb-job-apply-title {
    font-size: clamp(2.15rem, 13vw, 2.25rem);
  }
  .bb-job-apply-title::after {
    width: 6.25rem;
    height: 0.36rem;
  }
  .bb-job-apply-form-card,
  .bb-job-apply-position-card {
    max-width: 100%;
    border-radius: var(--bb-radius-xl);
  }
  .bb-job-apply-actions {
    justify-content: stretch;
  }
  .bb-job-apply-submit {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-job-apply-benefits {
    gap: 10px;
  }
  .bb-job-apply-form-card {
    padding: 16px;
  }
}
/* =====================================
   Type Tabs
===================================== */
.bb-support-condition-tabs-shell {
  background-color: var(--bb-body-bg);
  border-bottom: 1px solid var(--bb-support-condition-border-soft);
}

.bb-support-condition-type-tabs-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.bb-support-condition-type-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 58px;
  white-space: nowrap;
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-support-condition-type-tab {
  position: relative;
  min-height: 58px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--bb-secondary-color) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-semibold);
  flex: 0 0 auto;
  transition: color var(--bb-transition-normal);
}

.bb-support-condition-type-tab:hover {
  color: var(--bb-heading-color) !important;
}

.bb-support-condition-type-tab.is-active {
  color: var(--bb-heading-color) !important;
  font-weight: var(--bb-fw-bold);
}

.bb-support-condition-type-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-heading-color);
}

.bb-support-condition-type-tab .material-symbols-outlined {
  color: var(--bb-support-condition-accent);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-support-condition-type-tab.is-active .material-symbols-outlined {
  color: var(--bb-heading-color);
}

/* =====================================
   Main Layout
===================================== */
.bb-support-condition-shell {
  padding: 28px 0 48px;
}

.bb-support-condition-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.bb-support-condition-left,
.bb-support-condition-right {
  min-width: 0;
}

.bb-support-condition-main {
  min-width: 0;
}

.bb-support-condition-content {
  min-width: 0;
}

/* =====================================
   Sidebar
===================================== */
.bb-support-condition-sidebar {
  position: sticky;
  top: 25px;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-support-condition-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-support-condition-shadow);
}

.bb-support-condition-sidebar-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--bb-support-condition-border-soft);
}

.bb-support-condition-sidebar-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-2xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-support-condition-sidebar-title {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-bold);
}

.bb-support-condition-sidebar-nav {
  padding: 0.5rem;
}

.bb-support-condition-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  margin-bottom: 4px;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-support-condition-sidebar-link i {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-md);
  line-height: 1;
  transition: color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-support-condition-sidebar-link:hover {
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  transform: translateX(2px);
}

.bb-support-condition-sidebar-link:hover i {
  color: var(--bb-heading-color);
  transform: translateX(2px);
}

.bb-support-condition-sidebar-link-active {
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
}

.bb-support-condition-sidebar-link-active i {
  color: var(--bb-primary-inverse);
}

/* =====================================
   Content Hero
===================================== */
.bb-support-condition-hero,
.bb-support-condition-body,
.bb-support-condition-toc {
  background-color: var(--bb-body-bg);
  border: 1px solid var(--bb-support-condition-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-support-condition-shadow);
}

.bb-support-condition-hero {
  padding: 24px;
  margin-bottom: 1rem;
}

.bb-support-condition-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-support-condition-type-chip i {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-support-condition-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.035em;
}

.bb-support-condition-summary {
  max-width: 780px;
  margin: 12px 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-support-condition-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 16px;
}

.bb-support-condition-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--bb-support-condition-border-soft);
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-support-condition-meta-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: var(--bb-radius-sm);
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-support-condition-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--bb-support-condition-accent) 44%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-support-condition-accent-soft);
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-support-condition-alert i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--bb-radius-sm);
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* =====================================
   TOC
===================================== */
.bb-support-condition-toc-wrap {
  position: sticky;
  top: 25px;
}

.bb-support-condition-toc {
  padding: 16px;
  backdrop-filter: blur(8px);
}

.bb-support-condition-toc-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-support-condition-toc-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--bb-radius-sm);
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-support-condition-toc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-support-condition-toc-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 9px 10px;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-support-condition-toc-link::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-support-condition-accent);
}

.bb-support-condition-toc-link:hover {
  background-color: var(--bb-support-condition-accent-soft);
  color: var(--bb-heading-color);
  transform: translateY(-1px);
}

/* =====================================
   Body Content
===================================== */
.bb-support-condition-body {
  padding: 24px;
}

.bb-support-condition-section {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bb-support-condition-border-soft);
  scroll-margin-top: 130px;
}

.bb-support-condition-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.bb-support-condition-section-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--bb-heading-color);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-support-condition-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 31px;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-support-condition-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-support-condition-text p {
  margin-bottom: 14px;
}

.bb-support-condition-text p:last-child {
  margin-bottom: 0;
}

.bb-support-condition-text ul,
.bb-support-condition-text ol {
  margin-top: 12px;
  margin-bottom: 1rem;
  padding-left: 21px;
}

.bb-support-condition-text ul li,
.bb-support-condition-text ol li {
  margin-top: 9px;
  padding-left: 4px;
}

.bb-support-condition-text strong,
.bb-support-condition-text b {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

.bb-support-condition-text a {
  color: var(--bb-link-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bb-link-color) 28%, transparent);
}

.bb-support-condition-text a:hover {
  color: var(--bb-link-hover-color);
  border-bottom-color: color-mix(in srgb, var(--bb-link-hover-color) 55%, transparent);
}

.bb-support-condition-footer-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 16px;
  padding: 0.8125rem 14px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-support-condition-footer-note i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: var(--bb-radius-sm);
  background-color: var(--bb-support-condition-accent);
  color: var(--bb-primary-inverse);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-support-condition-layout {
    grid-template-columns: 1fr;
  }
  .bb-support-condition-sidebar,
  .bb-support-condition-toc-wrap {
    position: static;
  }
  .bb-support-condition-toc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-support-condition-type-tabs {
    gap: 1.125rem;
    min-height: 52px;
  }
  .bb-support-condition-type-tab {
    min-height: 52px;
    font-size: var(--bb-fs-sm);
  }
  .bb-support-condition-shell {
    padding-top: 18px;
    padding-bottom: 32px;
  }
  .bb-support-condition-hero,
  .bb-support-condition-body,
  .bb-support-condition-toc {
    padding: 18px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-support-condition-title {
    font-size: var(--bb-icon-size-xl);
  }
  .bb-support-condition-summary {
    font-size: var(--bb-fs-sm);
  }
  .bb-support-condition-meta-row {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-support-condition-meta-item {
    width: 100%;
  }
  .bb-support-condition-toc-list {
    grid-template-columns: 1fr;
  }
  .bb-support-condition-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    scroll-margin-top: 90px;
  }
  .bb-support-condition-section-title {
    gap: 9px;
  }
  .bb-support-condition-section-number {
    min-width: 28px;
    height: 28px;
  }
}
/* =====================================
   Support Condition Type Tabs
   _SupportConditionTypes component
===================================== */
.bb-support-condition-type-tabs-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.bb-support-condition-type-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 58px;
  white-space: nowrap;
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-support-condition-type-tab {
  position: relative;
  min-height: 58px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--bb-secondary-color) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-semibold);
  flex: 0 0 auto;
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-support-condition-type-tab:hover {
  color: var(--bb-heading-color) !important;
}

.bb-support-condition-type-tab.is-active {
  color: var(--bb-heading-color) !important;
  font-weight: var(--bb-fw-bold);
}

.bb-support-condition-type-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-heading-color);
}

.bb-support-condition-type-tab .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-support-condition-type-tab.is-active .material-symbols-outlined {
  color: var(--bb-heading-color);
}

@media (max-width: 767.98px) {
  .bb-support-condition-type-tabs {
    gap: 1.125rem;
    min-height: 52px;
  }
  .bb-support-condition-type-tab {
    min-height: 52px;
    font-size: var(--bb-fs-sm);
  }
}
/* =====================================
   Bulbulustur Web - Brand Listing
   Marka listeleme / marka vitrin sayfası

   Rules:
   - Layout: _Layout.cshtml
   - Token based
   - Light / Navy / Dark safe
   - No raw color
   - No fallback color
   - Existing Razor compatible
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-brand-page-bg: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-brand-page-surface: var(--bb-body-bg);
  --bb-brand-page-surface-soft: var(--bb-tertiary-bg);
  --bb-brand-page-surface-elevated: var(--bb-surface-elevated);
  --bb-brand-page-heading: var(--bb-emphasis-color);
  --bb-brand-page-text: var(--bb-body-color);
  --bb-brand-page-muted: var(--bb-secondary-color);
  --bb-brand-page-subtle: var(--bb-tertiary-color);
  --bb-brand-page-border: var(--bb-border-color);
  --bb-brand-page-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-brand-page-border-accent: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-brand-page-accent: var(--bb-primary);
  --bb-brand-page-accent-soft: var(--bb-primary-light);
  --bb-brand-page-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-brand-page-accent-inverse: var(--bb-primary-inverse);
  --bb-brand-page-success: var(--bb-success);
  --bb-brand-page-success-soft: color-mix(in srgb, var(--bb-success) 12%, var(--bb-body-bg));
  --bb-brand-page-success-text: color-mix(in srgb, var(--bb-success) 80%, var(--bb-emphasis-color));
  --bb-brand-page-hero-color: var(--bb-theme-on-dark);
  --bb-brand-page-hero-muted: color-mix(in srgb, var(--bb-theme-on-dark) 82%, transparent);
  --bb-brand-page-hero-subtle: color-mix(in srgb, var(--bb-theme-on-dark) 68%, transparent);
  --bb-brand-page-hero-bg:
      radial-gradient(
          circle at 88% 10%,
          color-mix(in srgb, var(--bb-success) 28%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 0% 100%,
          color-mix(in srgb, var(--bb-primary) 20%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-navy-900) 82%, var(--bb-success)) 0%,
          color-mix(in srgb, var(--bb-color-navy-900) 72%, var(--bb-success)) 48%,
          color-mix(in srgb, var(--bb-color-navy-900) 84%, var(--bb-primary)) 100%
      );
  --bb-brand-page-hero-glass: color-mix(in srgb, var(--bb-theme-on-dark) 10%, transparent);
  --bb-brand-page-hero-glass-strong: color-mix(in srgb, var(--bb-theme-on-dark) 14%, transparent);
  --bb-brand-page-hero-border: color-mix(in srgb, var(--bb-theme-on-dark) 14%, transparent);
  --bb-brand-page-shadow-xs: var(--bb-shadow-xs);
  --bb-brand-page-shadow-sm: var(--bb-shadow-sm);
  --bb-brand-page-shadow-lg: var(--bb-shadow-lg);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-brand-page-bg: color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-surface-elevated));
  --bb-brand-page-surface: var(--bb-surface-elevated);
  --bb-brand-page-surface-soft: var(--bb-surface-soft);
  --bb-brand-page-surface-elevated: var(--bb-surface-elevated);
  --bb-brand-page-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-brand-page-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-brand-page-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-brand-page-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-brand-page-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-brand-page-success-soft: color-mix(in srgb, var(--bb-success) 14%, var(--bb-body-bg));
  --bb-brand-page-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-brand-page-hero-bg:
      radial-gradient(
          circle at 88% 10%,
          color-mix(in srgb, var(--bb-success) 24%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 0% 100%,
          color-mix(in srgb, var(--bb-primary) 18%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 72%, var(--bb-success)) 0%,
          color-mix(in srgb, var(--bb-color-navy-900) 76%, var(--bb-success)) 48%,
          color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-primary)) 100%
      );
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-brand-page-bg: color-mix(in srgb, var(--bb-body-bg) 84%, var(--bb-surface-elevated));
  --bb-brand-page-surface: var(--bb-surface-elevated);
  --bb-brand-page-surface-soft: var(--bb-surface-soft);
  --bb-brand-page-surface-elevated: var(--bb-surface-elevated);
  --bb-brand-page-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-brand-page-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-brand-page-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-brand-page-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-brand-page-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-brand-page-success-soft: color-mix(in srgb, var(--bb-success) 13%, var(--bb-body-bg));
  --bb-brand-page-success-text: color-mix(in srgb, var(--bb-success) 84%, var(--bb-emphasis-color));
  --bb-brand-page-hero-bg:
      radial-gradient(
          circle at 88% 10%,
          color-mix(in srgb, var(--bb-success) 22%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 0% 100%,
          color-mix(in srgb, var(--bb-primary) 17%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-success)) 0%,
          color-mix(in srgb, var(--bb-color-navy-900) 78%, var(--bb-success)) 48%,
          color-mix(in srgb, var(--bb-body-bg) 86%, var(--bb-primary)) 100%
      );
}

/* =====================================
   Page Scope
===================================== */
#content:has(.bb-brand-page-hero) {
  background-color: var(--bb-brand-page-bg);
}

#content:has(.bb-brand-page-hero) .bb-wrapper {
  background-color: var(--bb-brand-page-bg);
}

#content:has(.bb-brand-page-hero) .material-symbols-outlined {
  line-height: 1;
}

#content:has(.bb-brand-page-hero) a,
#content:has(.bb-brand-page-hero) button {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal), opacity var(--bb-transition-normal);
}

/* =====================================
   Brand Page Hero
===================================== */
.bb-hero.bb-hero-dark.bb-brand-page-hero {
  --bb-hero-title-max-width: 58rem;
  --bb-hero-lead-max-width: 54rem;
  --bb-hero-aside-width: 24rem;
  --bb-hero-grid-gap: clamp(2rem, 5vw, 4rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(4rem, 6vw, 5.5rem);
  padding-bottom: clamp(5rem, 7vw, 6.5rem);
  color: var(--bb-brand-page-hero-color);
  background: var(--bb-brand-page-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-brand-page-hero-border);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero::before,
.bb-hero.bb-hero-dark.bb-brand-page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--bb-radius-pill);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero::before {
  top: -6.875rem;
  right: -5.625rem;
  width: 21.25rem;
  height: 21.25rem;
  background-color: color-mix(in srgb, var(--bb-brand-page-hero-color) 7%, transparent);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero::after {
  left: -7.5rem;
  bottom: -8.75rem;
  width: 24.375rem;
  height: 24.375rem;
  background-color: color-mix(in srgb, var(--bb-brand-page-accent) 14%, transparent);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-hero-inner {
  position: relative;
  z-index: 2;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-content {
  min-width: 0;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-label {
  gap: 0.45rem;
  width: fit-content;
  min-height: 2rem;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  color: color-mix(in srgb, var(--bb-brand-page-hero-color) 90%, transparent);
  background-color: var(--bb-brand-page-hero-glass);
  border: var(--bb-border-width) solid var(--bb-brand-page-hero-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-brand-page-shadow-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-label .material-symbols-outlined {
  color: var(--bb-brand-page-accent);
  font-size: var(--bb-fs-base);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-title {
  color: var(--bb-brand-page-hero-color);
  font-size: clamp(2.35rem, 5vw, 4rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.04;
  letter-spacing: -0.052em;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-text {
  margin-top: 1rem;
  color: var(--bb-brand-page-hero-muted);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.85;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions .bb-hero-btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding-inline: 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions .bb-hero-btn-primary {
  color: var(--bb-brand-page-accent-inverse);
  background-color: var(--bb-brand-page-accent);
  border-color: var(--bb-brand-page-accent);
  box-shadow: 0 0.875rem 1.75rem color-mix(in srgb, var(--bb-brand-page-accent) 18%, transparent);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions .bb-hero-btn-primary:hover {
  color: var(--bb-brand-page-accent-inverse);
  background-color: color-mix(in srgb, var(--bb-brand-page-accent) 88%, var(--bb-brand-page-heading));
  border-color: color-mix(in srgb, var(--bb-brand-page-accent) 88%, var(--bb-brand-page-heading));
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions .bb-hero-btn-secondary {
  color: color-mix(in srgb, var(--bb-brand-page-hero-color) 88%, transparent);
  background-color: transparent;
  border-color: transparent;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions .bb-hero-btn-secondary:hover {
  color: var(--bb-brand-page-hero-color);
  background-color: var(--bb-brand-page-hero-glass);
  border-color: var(--bb-brand-page-hero-border);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-aside {
  align-self: center;
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  color: var(--bb-brand-page-hero-color);
  background-color: var(--bb-brand-page-hero-glass);
  border: var(--bb-border-width) solid var(--bb-brand-page-hero-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-brand-page-shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-card::after {
  content: "";
  position: absolute;
  right: -4.375rem;
  bottom: -5.625rem;
  width: 13.125rem;
  height: 13.125rem;
  background-color: color-mix(in srgb, var(--bb-brand-page-accent) 16%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-brand-page-hero-card-head,
.bb-brand-page-hero-card-list {
  position: relative;
  z-index: 1;
}

.bb-brand-page-hero-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.bb-brand-page-hero-card-icon-container {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-brand-page-accent-inverse);
  background-color: var(--bb-brand-page-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-brand-page-hero-card-icon {
  font-size: var(--bb-icon-size-lg);
}

.bb-brand-page-hero-card-title {
  margin: 0;
  color: var(--bb-brand-page-hero-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-brand-page-hero-card-list {
  display: grid;
  gap: 0.75rem;
}

.bb-brand-page-hero-card-list-item {
  min-height: 4.625rem;
  padding: 0.875rem;
  background-color: var(--bb-brand-page-hero-glass);
  border: var(--bb-border-width) solid var(--bb-brand-page-hero-border);
  border-radius: var(--bb-radius-xl);
}

.bb-brand-page-hero-card-list-item strong {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--bb-brand-page-hero-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
}

.bb-brand-page-hero-card-list-item span {
  display: block;
  color: var(--bb-brand-page-hero-subtle);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Brand Category Navigation
===================================== */
.bb-brand-nav-shell {
  position: relative;
  z-index: 4;
  margin-top: -3.25rem;
  padding: 1.25rem;
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bb-brand-page-surface) 96%, transparent) 0%, color-mix(in srgb, var(--bb-brand-page-accent) 18%, var(--bb-brand-page-surface-elevated)) 100%);
  border: var(--bb-border-width) solid var(--bb-brand-page-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-brand-page-shadow-lg);
}

.bb-brand-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-brand-nav-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--bb-brand-page-heading);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-brand-nav-title > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-brand-page-accent-text);
  background-color: var(--bb-brand-page-accent-soft);
  border: var(--bb-border-width) solid var(--bb-brand-page-border-accent);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-icon-size-lg);
}

.bb-brand-nav-subtitle {
  display: block;
  margin-top: 0.2rem;
  color: var(--bb-brand-page-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-brand-nav-total {
  min-height: 2rem;
  padding: 0.35rem 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-brand-page-heading);
  background-color: var(--bb-brand-page-surface);
  border: var(--bb-border-width) solid var(--bb-brand-page-border-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-brand-nav-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-brand-nav-item {
  min-height: 7rem;
  padding: 1rem;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  color: var(--bb-brand-page-heading);
  background-color: var(--bb-brand-page-surface);
  border: var(--bb-border-width) solid var(--bb-brand-page-border-soft);
  border-radius: var(--bb-radius-xl);
  text-align: center;
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-brand-nav-item:hover {
  transform: translateY(-2px);
  color: var(--bb-brand-page-heading);
  background-color: var(--bb-brand-page-surface);
  border-color: color-mix(in srgb, var(--bb-brand-page-accent) 32%, var(--bb-brand-page-border));
  box-shadow: var(--bb-brand-page-shadow-sm);
}

.bb-brand-nav-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-brand-page-muted);
  background-color: var(--bb-brand-page-surface-soft);
  border: var(--bb-border-width) solid var(--bb-brand-page-border-soft);
  border-radius: var(--bb-radius-lg);
}

.bb-brand-nav-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-lg);
}

.bb-brand-nav-text {
  color: var(--bb-brand-page-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Brand Sections
===================================== */
.bb-brand-section {
  padding-top: 1.75rem;
  scroll-margin-top: 6.875rem;
}

.bb-brand-section + .bb-brand-section {
  margin-top: 1.25rem;
}

.bb-brand-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.125rem;
}

.bb-brand-section-head-left {
  min-width: 0;
  max-width: 47.5rem;
}

.bb-brand-section-label {
  gap: 0.4375rem;
  width: fit-content;
  margin-bottom: 0.625rem;
  color: var(--bb-brand-page-success-text);
  background-color: var(--bb-brand-page-success-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-brand-page-success) 24%, var(--bb-brand-page-border));
  border-radius: var(--bb-radius-pill);
}

.bb-brand-section-label .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-fs-base);
}

.bb-brand-section-title {
  margin-bottom: 0.5rem;
  color: var(--bb-brand-page-heading);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight);
}

.bb-brand-section-subtitle {
  max-width: 47.5rem;
  margin-bottom: 0;
  color: var(--bb-brand-page-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-brand-section-count {
  min-height: 2.375rem;
  min-width: 3.625rem;
  padding: 0 0.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-brand-page-heading);
  background-color: var(--bb-brand-page-surface);
  border: var(--bb-border-width) solid var(--bb-brand-page-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-brand-page-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

/* =====================================
   Brand Cards
===================================== */
.bb-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-brand-card {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  padding: 0.8125rem;
  color: inherit;
  background-color: var(--bb-brand-page-surface);
  border: var(--bb-border-width) solid var(--bb-brand-page-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-brand-page-shadow-xs);
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-brand-card:hover {
  transform: translateY(-4px);
  color: inherit;
  border-color: color-mix(in srgb, var(--bb-brand-page-accent) 46%, var(--bb-brand-page-border));
  box-shadow: var(--bb-brand-page-shadow-sm);
}

.bb-brand-card-visual {
  height: 7.75rem;
  margin-bottom: 0.75rem;
  padding: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-brand-page-accent) 10%, transparent), transparent 34%), var(--bb-brand-page-surface);
  border: var(--bb-border-width) solid var(--bb-brand-page-border-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-brand-card-visual img {
  max-width: 100%;
  max-height: 4.875rem;
  display: block;
  object-fit: contain;
  transition: transform var(--bb-transition-normal);
}

.bb-brand-card:hover .bb-brand-card-visual img {
  transform: scale(1.045);
}

.bb-brand-card-title {
  display: block;
  min-height: 2.375rem;
  color: var(--bb-brand-page-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-align: center;
}

.bb-brand-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  margin-top: 0.5rem;
  color: var(--bb-brand-page-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-brand-card-footer .material-symbols-outlined {
  color: var(--bb-brand-page-success);
  font-size: var(--bb-fs-sm);
}

.bb-brand-extra-item {
  display: none;
}

.bb-brand-extra-item.is-visible {
  display: block;
}

/* =====================================
   Brand More Button
===================================== */
.bb-brand-more-wrap {
  position: relative;
  margin-top: 1.125rem;
  padding: 0.125rem 0 1.125rem;
  text-align: center;
}

.bb-brand-more-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.4375rem;
  height: var(--bb-border-width);
  background-color: var(--bb-brand-page-border);
}

.bb-brand-more-btn {
  position: relative;
  z-index: 1;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--bb-brand-page-heading);
  background-color: var(--bb-brand-page-surface);
  border: var(--bb-border-width) solid var(--bb-brand-page-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-brand-page-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-brand-more-btn:hover {
  transform: translateY(-2px);
  background-color: var(--bb-brand-page-accent-soft);
  border-color: color-mix(in srgb, var(--bb-brand-page-accent) 46%, var(--bb-brand-page-border));
  box-shadow: var(--bb-brand-page-shadow-sm);
}

.bb-brand-more-btn .material-symbols-outlined {
  width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-brand-page-heading);
  background-color: var(--bb-brand-page-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-md);
  transition: transform var(--bb-transition-normal);
}

.bb-brand-more-btn:hover .material-symbols-outlined {
  transform: translateY(1px);
}

/* =====================================
   Brand Banner
===================================== */
.bb-brand-banner-shell {
  overflow: hidden;
  border-radius: var(--bb-radius-2xl);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-aside {
    justify-self: start;
  }
  .bb-brand-nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-brand-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-hero.bb-hero-dark.bb-brand-page-hero {
    padding-top: 3.25rem;
    padding-bottom: 4.75rem;
  }
  .bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-title {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }
  .bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-card {
    display: none;
  }
  .bb-brand-nav-shell {
    margin-top: -2.75rem;
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-brand-nav-head,
  .bb-brand-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-brand-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-brand-nav-item {
    min-height: 6.25rem;
  }
  .bb-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6875rem;
  }
  .bb-brand-card {
    padding: 0.625rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-brand-card-visual {
    height: 6.75rem;
    padding: 0.8125rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-brand-card-visual img {
    max-height: 4.25rem;
  }
}
@media (max-width: 575.98px) {
  .bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-hero.bb-hero-dark.bb-brand-page-hero .bb-brand-page-hero-actions .bb-hero-btn {
    width: 100%;
  }
  .bb-brand-nav-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   Bulbulustur Web - Brand Detail Page
   Layer: pages/web/_brand-detail.scss

   Rules:
   - Required page root: .bb-brand-detail-page
   - Token based
   - Light / Navy / Dark safe
   - No fallback color tokens
   - No raw hex / rgba
   - Responsive at bottom
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-brand-detail-surface: var(--bb-surface-elevated);
  --bb-brand-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-brand-detail-surface-strong: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-brand-detail-heading: var(--bb-heading-color);
  --bb-brand-detail-text: var(--bb-body-color);
  --bb-brand-detail-muted: var(--bb-secondary-color);
  --bb-brand-detail-subtle: var(--bb-tertiary-color);
  --bb-brand-detail-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-brand-detail-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-brand-detail-accent: var(--bb-primary);
  --bb-brand-detail-accent-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-brand-detail-accent-text: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-emphasis-color));
  --bb-brand-detail-success-soft: color-mix(in srgb, var(--bb-success) 13%, var(--bb-body-bg));
  --bb-brand-detail-success-text: color-mix(in srgb, var(--bb-success) 76%, var(--bb-emphasis-color));
  --bb-brand-detail-info-soft: color-mix(in srgb, var(--bb-info) 11%, var(--bb-body-bg));
  --bb-brand-detail-info-text: color-mix(in srgb, var(--bb-info) 74%, var(--bb-emphasis-color));
  --bb-brand-detail-hero-bg:
      radial-gradient(
          circle at 90% 18%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 18%, transparent),
          transparent 24rem
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 86%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-brand-detail-logo-frame-bg: var(--bb-body-bg);
  --bb-brand-detail-info-head-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 12%, transparent),
          transparent 10rem
      ),
      color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-brand-detail-cta-bg-start: var(--bb-color-coal-400);
  --bb-brand-detail-cta-bg-mid: color-mix(in srgb, var(--bb-color-coal-400) 84%, var(--bb-primary));
  --bb-brand-detail-cta-bg-end: color-mix(in srgb, var(--bb-color-coal-400) 72%, var(--bb-success));
  --bb-brand-detail-cta-text: var(--bb-theme-on-dark);
  --bb-brand-detail-cta-muted: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  --bb-brand-detail-cta-border: color-mix(in srgb, var(--bb-theme-on-dark) 12%, transparent);
  --bb-brand-detail-card-bg: var(--bb-brand-detail-surface-strong);
  --bb-brand-detail-trust-bg: var(--bb-brand-detail-surface-strong);
  --bb-brand-detail-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-brand-detail-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 2%, transparent);
  --bb-brand-detail-card-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      var(--bb-shadow-xs);
  --bb-brand-detail-trust-shadow:
      0 1.5rem 4rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      var(--bb-shadow-xs);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-brand-detail-surface: var(--bb-surface-elevated);
  --bb-brand-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg));
  --bb-brand-detail-surface-strong: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-brand-detail-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-brand-detail-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-brand-detail-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-brand-detail-accent-text: color-mix(in srgb, var(--bb-primary) 90%, var(--bb-emphasis-color));
  --bb-brand-detail-success-soft: color-mix(in srgb, var(--bb-success) 15%, transparent);
  --bb-brand-detail-success-text: color-mix(in srgb, var(--bb-success) 88%, var(--bb-emphasis-color));
  --bb-brand-detail-info-soft: color-mix(in srgb, var(--bb-info) 14%, transparent);
  --bb-brand-detail-info-text: color-mix(in srgb, var(--bb-info) 88%, var(--bb-emphasis-color));
  --bb-brand-detail-hero-bg:
      radial-gradient(
          circle at 90% 18%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 16%, transparent),
          transparent 24rem
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 7%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-brand-detail-logo-frame-bg: color-mix(in srgb, var(--bb-body-bg) 90%, var(--bb-surface-elevated));
  --bb-brand-detail-info-head-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 14%, transparent),
          transparent 10rem
      ),
      color-mix(in srgb, var(--bb-tertiary-bg) 68%, var(--bb-body-bg));
  --bb-brand-detail-cta-bg-start: color-mix(in srgb, var(--bb-body-bg) 86%, var(--bb-color-black));
  --bb-brand-detail-cta-bg-mid: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-primary));
  --bb-brand-detail-cta-bg-end: color-mix(in srgb, var(--bb-body-bg) 74%, var(--bb-success));
  --bb-brand-detail-cta-text: var(--bb-emphasis-color);
  --bb-brand-detail-cta-muted: color-mix(in srgb, var(--bb-emphasis-color) 76%, transparent);
  --bb-brand-detail-cta-border: color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent);
  --bb-brand-detail-card-bg: var(--bb-brand-detail-surface);
  --bb-brand-detail-trust-bg: var(--bb-brand-detail-surface);
  --bb-brand-detail-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-color-black) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-color-black) 12%, transparent);
  --bb-brand-detail-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-color-black) 18%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-color-black) 10%, transparent);
  --bb-brand-detail-card-shadow: var(--bb-brand-detail-shadow-soft);
  --bb-brand-detail-trust-shadow: var(--bb-brand-detail-shadow-soft);
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-brand-detail-surface: var(--bb-surface-elevated);
  --bb-brand-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-brand-detail-surface-strong: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-brand-detail-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-brand-detail-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-brand-detail-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, transparent);
  --bb-brand-detail-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-brand-detail-success-soft: color-mix(in srgb, var(--bb-success) 14%, transparent);
  --bb-brand-detail-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-brand-detail-info-soft: color-mix(in srgb, var(--bb-info) 13%, transparent);
  --bb-brand-detail-info-text: color-mix(in srgb, var(--bb-info) 86%, var(--bb-emphasis-color));
  --bb-brand-detail-hero-bg:
      radial-gradient(
          circle at 90% 18%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 14%, transparent),
          transparent 24rem
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 6%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-soft) 78%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-brand-detail-logo-frame-bg: color-mix(in srgb, var(--bb-body-bg) 92%, var(--bb-surface-elevated));
  --bb-brand-detail-info-head-bg:
      radial-gradient(
          circle at 92% 10%,
          color-mix(in srgb, var(--bb-brand-detail-accent) 13%, transparent),
          transparent 10rem
      ),
      color-mix(in srgb, var(--bb-tertiary-bg) 66%, var(--bb-body-bg));
  --bb-brand-detail-cta-bg-start: color-mix(in srgb, var(--bb-body-bg) 88%, var(--bb-color-black));
  --bb-brand-detail-cta-bg-mid: color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-primary));
  --bb-brand-detail-cta-bg-end: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-success));
  --bb-brand-detail-cta-text: var(--bb-emphasis-color);
  --bb-brand-detail-cta-muted: color-mix(in srgb, var(--bb-emphasis-color) 74%, transparent);
  --bb-brand-detail-cta-border: color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent);
  --bb-brand-detail-card-bg: var(--bb-brand-detail-surface);
  --bb-brand-detail-trust-bg: var(--bb-brand-detail-surface);
  --bb-brand-detail-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-color-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-color-black) 14%, transparent);
  --bb-brand-detail-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-color-black) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-color-black) 10%, transparent);
  --bb-brand-detail-card-shadow: var(--bb-brand-detail-shadow-soft);
  --bb-brand-detail-trust-shadow: var(--bb-brand-detail-shadow-soft);
}

/* =====================================
   Page Scope
===================================== */
.bb-brand-detail-page {
  min-width: 0;
  color: var(--bb-brand-detail-text);
  background-color: var(--bb-body-bg);
}

.bb-brand-detail-page .material-symbols-outlined {
  line-height: 1;
}

.bb-brand-detail-page a,
.bb-brand-detail-page button {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal), opacity var(--bb-transition-normal);
}

/* =====================================
   Hero
===================================== */
.bb-brand-detail-page-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-bottom: clamp(4.25rem, 6vw, 5.5rem);
  background: var(--bb-brand-detail-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-brand-detail-border);
}

.bb-brand-detail-page-hero::before {
  content: "";
  position: absolute;
  right: -6rem;
  top: 7rem;
  width: 17rem;
  height: 17rem;
  background-color: color-mix(in srgb, var(--bb-brand-detail-accent) 13%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-brand-detail-page-hero::after {
  content: "";
  position: absolute;
  left: -8rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 58%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-brand-detail-page-hero > .bb-container {
  position: relative;
  z-index: 2;
}

.bb-brand-detail-page-hero-breadcrumb {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.875rem);
}

.bb-brand-detail-page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}

.bb-brand-detail-page-hero-content {
  min-width: 0;
}

.bb-brand-detail-page-hero-label {
  gap: 0.4375rem;
  margin-bottom: 1rem;
  color: var(--bb-brand-detail-success-text);
  background-color: var(--bb-brand-detail-success-soft);
  border-color: color-mix(in srgb, var(--bb-success) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs), 0 0 0 0.25rem color-mix(in srgb, var(--bb-success) 5%, transparent);
}

.bb-brand-detail-page-hero-label .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-brand-detail-page-hero-title {
  max-width: 54rem;
  margin: 0;
  color: var(--bb-brand-detail-heading);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.03;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.bb-brand-detail-page-hero-motto {
  width: fit-content;
  max-width: 100%;
  margin-top: 0.875rem;
  padding: 0.45rem 0.875rem;
  color: var(--bb-brand-detail-accent-text);
  background-color: var(--bb-brand-detail-accent-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-brand-detail-accent) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-brand-detail-page-hero-text {
  max-width: 58rem;
  margin-top: 1.125rem;
  color: var(--bb-brand-detail-muted);
  font-size: clamp(1rem, 1.25vw, 1.0875rem);
  line-height: 1.8;
}

.bb-brand-detail-page-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bb-brand-detail-page-hero-meta-chip {
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-brand-detail-page-hero-meta-chip .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-brand-detail-page-hero-meta-chip:nth-child(1) {
  color: var(--bb-brand-detail-info-text);
  background-color: var(--bb-brand-detail-info-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 20%, var(--bb-border-color));
}

.bb-brand-detail-page-hero-meta-chip:nth-child(2) {
  color: var(--bb-brand-detail-success-text);
  background-color: var(--bb-brand-detail-success-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 20%, var(--bb-border-color));
}

.bb-brand-detail-page-hero-meta-chip:nth-child(3) {
  color: var(--bb-brand-detail-accent-text);
  background-color: var(--bb-brand-detail-accent-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
}

/* =====================================
   Hero Logo Card
===================================== */
.bb-brand-detail-page-hero-aside {
  min-width: 0;
  justify-self: end;
  width: min(100%, 23rem);
}

.bb-brand-detail-page-hero-logo-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: clamp(0.875rem, 2vw, 1.125rem);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-brand-detail-accent) 11%, transparent), transparent 12rem), color-mix(in srgb, var(--bb-brand-detail-surface) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-brand-detail-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-brand-detail-shadow);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-brand-detail-page-hero-logo-card::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 9rem;
  height: 9rem;
  background-color: color-mix(in srgb, var(--bb-brand-detail-accent) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-brand-detail-page-hero-logo-frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(10.5rem, 15vw, 14rem);
  padding: clamp(1.375rem, 3.5vw, 2.5rem);
  background-color: var(--bb-brand-detail-logo-frame-bg);
  border: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
  border-radius: calc(var(--bb-radius-2xl) - 0.375rem);
}

.bb-brand-detail-page-hero-logo-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(14rem, 78%);
  max-height: 6.25rem;
  object-fit: contain;
}

.bb-brand-detail-page-hero-logo-frame > span {
  color: var(--bb-brand-detail-heading);
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.045em;
  text-align: center;
}

.bb-brand-detail-page-hero-logo-caption {
  display: none;
}

/* =====================================
   Trust Strip
===================================== */
.bb-brand-detail-trust-strip-section {
  position: relative;
  z-index: 4;
  margin-top: -2.75rem;
}

.bb-brand-detail-trust-shell {
  overflow: hidden;
  background-color: var(--bb-brand-detail-trust-bg);
  border: var(--bb-border-width) solid var(--bb-brand-detail-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-brand-detail-trust-shadow);
}

.bb-brand-detail-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bb-brand-detail-trust-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  border-right: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
}

.bb-brand-detail-trust-item:last-child {
  border-right: 0;
}

.bb-brand-detail-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--bb-brand-detail-accent-text);
  background-color: var(--bb-brand-detail-accent-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-brand-detail-accent) 16%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-brand-detail-trust-item:first-child .bb-brand-detail-trust-icon {
  color: var(--bb-brand-detail-success-text);
  background-color: var(--bb-brand-detail-success-soft);
  border-color: color-mix(in srgb, var(--bb-success) 18%, var(--bb-border-color));
}

.bb-brand-detail-trust-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-brand-detail-trust-copy {
  min-width: 0;
}

.bb-brand-detail-trust-copy strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-brand-detail-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-brand-detail-trust-copy span {
  display: block;
  color: var(--bb-brand-detail-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Section Heads
===================================== */
.bb-brand-detail-head,
.bb-brand-detail-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.25rem;
}

.bb-brand-detail-section-title {
  margin: 0;
  color: var(--bb-brand-detail-heading);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.045em;
}

.bb-brand-detail-section-text {
  max-width: 48rem;
  margin: 0.625rem 0 0;
  color: var(--bb-brand-detail-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-brand-detail-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  color: var(--bb-brand-detail-heading);
  white-space: nowrap;
}

.bb-brand-detail-link-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   About / Info
===================================== */
.bb-brand-detail-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: 1.25rem;
  align-items: start;
}

.bb-brand-detail-card {
  min-width: 0;
  background-color: var(--bb-brand-detail-card-bg);
  border: var(--bb-border-width) solid var(--bb-brand-detail-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-brand-detail-card-shadow);
}

.bb-brand-detail-about-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.bb-brand-detail-about-content {
  color: var(--bb-brand-detail-muted);
  font-size: var(--bb-fs-base);
  line-height: 1.85;
}

.bb-brand-detail-about-content > *:first-child {
  margin-top: 0;
}

.bb-brand-detail-about-content > *:last-child {
  margin-bottom: 0;
}

.bb-brand-detail-about-content p {
  margin: 0 0 1rem;
  color: var(--bb-brand-detail-muted);
}

.bb-brand-detail-about-content strong,
.bb-brand-detail-about-content b {
  color: var(--bb-brand-detail-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-brand-detail-info-card {
  overflow: hidden;
}

.bb-brand-detail-info-card-head {
  padding: 1.125rem;
  background: var(--bb-brand-detail-info-head-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
}

.bb-brand-detail-info-card-head strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-brand-detail-heading);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-brand-detail-info-card-head span {
  display: block;
  color: var(--bb-brand-detail-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-brand-detail-info-list {
  display: grid;
  padding: 0.75rem 1.125rem 1.125rem;
}

.bb-brand-detail-info-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 0;
  border-bottom: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
}

.bb-brand-detail-info-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bb-brand-detail-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-brand-detail-heading);
  background-color: var(--bb-brand-detail-surface-soft);
  border: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
  border-radius: var(--bb-radius-lg);
}

.bb-brand-detail-info-item:last-child .bb-brand-detail-info-icon {
  color: var(--bb-brand-detail-success-text);
  background-color: var(--bb-brand-detail-success-soft);
  border-color: color-mix(in srgb, var(--bb-success) 18%, var(--bb-border-color));
}

.bb-brand-detail-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-brand-detail-info-copy {
  min-width: 0;
}

.bb-brand-detail-info-copy strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-brand-detail-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-brand-detail-info-copy span,
.bb-brand-detail-info-copy a {
  display: block;
  color: var(--bb-brand-detail-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
  text-decoration: none !important;
}

.bb-brand-detail-info-copy a:hover {
  color: var(--bb-brand-detail-accent-text);
  text-decoration: underline !important;
}

/* =====================================
   Brand Owner Management CTA
===================================== */
.bb-brand-detail-management-cta {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2rem);
  color: var(--bb-brand-detail-cta-text);
  background: radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 16rem), linear-gradient(135deg, var(--bb-brand-detail-cta-bg-start) 0%, var(--bb-brand-detail-cta-bg-mid) 56%, var(--bb-brand-detail-cta-bg-end) 100%);
  border: var(--bb-border-width) solid var(--bb-brand-detail-cta-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-lg);
}

.bb-brand-detail-management-cta::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  width: 15rem;
  height: 15rem;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-brand-detail-management-cta-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
}

.bb-brand-detail-management-cta-copy {
  min-width: 0;
}

.bb-brand-detail-management-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-brand-detail-cta-text));
  background-color: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-brand-detail-management-cta-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-brand-detail-management-cta h2 {
  margin: 0;
  color: var(--bb-brand-detail-cta-text);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.04em;
}

.bb-brand-detail-management-cta p {
  max-width: 48rem;
  margin: 0.625rem 0 0;
  color: var(--bb-brand-detail-cta-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-brand-detail-management-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.bb-brand-detail-management-cta-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 3rem;
  white-space: nowrap;
}

.bb-brand-detail-management-cta-action .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-brand-detail-management-cta-secondary-action {
  display: none !important;
}

/* =====================================
   Products
===================================== */
.bb-brand-detail-products-section {
  padding-top: clamp(1rem, 3vw, 2rem);
}

.bb-brand-detail-products-host {
  min-width: 0;
}

/* =====================================
   Banner
   Brand detail içinde alttaki genel promo CTA kapalı.
===================================== */
.bb-brand-detail-banner-section {
  display: none;
}

.bb-brand-detail-banner-shell {
  overflow: hidden;
  border-radius: var(--bb-radius-2xl);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-brand-detail-page-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  }
  .bb-brand-detail-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-brand-detail-trust-item:nth-child(2) {
    border-right: 0;
  }
  .bb-brand-detail-trust-item:nth-child(1),
  .bb-brand-detail-trust-item:nth-child(2) {
    border-bottom: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
  }
  .bb-brand-detail-about-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-brand-detail-page-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-brand-detail-page-hero-aside {
    justify-self: start;
    width: min(100%, 24rem);
  }
  .bb-brand-detail-management-cta-content {
    grid-template-columns: 1fr;
  }
  .bb-brand-detail-management-cta-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-brand-detail-page-hero {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
  .bb-brand-detail-page-hero-title {
    font-size: clamp(2.1rem, 10vw, 3.15rem);
  }
  .bb-brand-detail-page-hero-aside {
    width: 100%;
  }
  .bb-brand-detail-page-hero-logo-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-brand-detail-page-hero-logo-frame {
    min-height: 12.25rem;
    padding: 1.75rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-brand-detail-page-hero-logo-frame img {
    max-width: 70%;
    max-height: 6.25rem;
  }
  .bb-brand-detail-trust-strip-section {
    margin-top: -2rem;
  }
  .bb-brand-detail-trust-grid {
    grid-template-columns: 1fr;
  }
  .bb-brand-detail-trust-item {
    border-right: 0;
    border-bottom: var(--bb-border-width) solid var(--bb-brand-detail-border-soft);
  }
  .bb-brand-detail-trust-item:last-child {
    border-bottom: 0;
  }
  .bb-brand-detail-head,
  .bb-brand-detail-products-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-brand-detail-link-btn {
    width: fit-content;
  }
  .bb-brand-detail-about-card {
    padding: 1.25rem;
  }
  .bb-brand-detail-management-cta {
    border-radius: var(--bb-radius-xl);
  }
  .bb-brand-detail-management-cta-action {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-brand-detail-page-hero-meta {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-brand-detail-page-hero-meta-chip {
    width: fit-content;
  }
  .bb-brand-detail-trust-item {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
  .bb-brand-detail-trust-icon,
  .bb-brand-detail-info-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  .bb-brand-detail-management-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
/* =====================================
   Bulbulustur Web - Help Center Landing Page
   Layer: pages/help/_help.scss

   Purpose:
   - Help Center landing page visual atmosphere.
   - Project cards / support category surfaces / landing hero accents.
   - Uses page-local tokens scoped under .bb-help-page.

   Theme:
   - Light / Navy / Dark safe.
   - This file consumes global theme tokens.
   - This file does not override global theme variables.

   Architecture rule:
   - Global color decisions live in base/colors.scss + base/theme.scss.
   - Reusable objects live in components/*.scss.
   - Help landing specific decorative tokens live here.
===================================== */
/* =====================================
   Help Center Landing Tokens
===================================== */
.bb-help-page {
  --bb-help-accent: var(--bb-page-accent);
  --bb-help-accent-hover: var(--bb-page-accent-hover);
  --bb-help-accent-soft: var(--bb-page-accent-soft);
  --bb-help-accent-soft-strong: color-mix(in srgb, var(--bb-help-accent) 24%, var(--bb-body-bg));
  --bb-help-dark-surface: var(--bb-brand-navy);
  --bb-help-dark-surface-hover: color-mix(in srgb, var(--bb-help-dark-surface) 88%, var(--bb-primary));
  --bb-help-on-dark: var(--bb-white);
  --bb-help-support-arrow-hover-color: var(--bb-color-navy-600);
  --bb-help-b2b-surface: color-mix(in srgb, var(--bb-color-blue-50) 88%, var(--bb-body-bg));
  --bb-help-b2b-border: color-mix(in srgb, var(--bb-color-blue-300) 42%, var(--bb-border-color));
  --bb-help-b2b-icon: var(--bb-color-blue-800);
  --bb-help-draugr-surface: color-mix(in srgb, var(--bb-color-purple-50) 88%, var(--bb-body-bg));
  --bb-help-draugr-border: color-mix(in srgb, var(--bb-color-purple-300) 42%, var(--bb-border-color));
  --bb-help-draugr-icon: var(--bb-color-purple-700);
  --bb-help-integration-surface: color-mix(in srgb, var(--bb-color-turquoise-50) 84%, var(--bb-body-bg));
  --bb-help-integration-border: color-mix(in srgb, var(--bb-color-turquoise-300) 36%, var(--bb-border-color));
  --bb-help-integration-icon: var(--bb-color-turquoise-800);
  --bb-help-project-default-surface: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-help-project-default-border: color-mix(in srgb, var(--bb-border-color) 88%, var(--bb-emphasis-color));
  --bb-help-project-default-icon: var(--bb-secondary-color);
  --bb-help-stage-grid-mask:
      linear-gradient(
          to top,
          color-mix(in srgb, var(--bb-black) 20%, transparent),
          transparent 82%
      );
}

/* =====================================
   Navy Mode Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-help-page {
  --bb-help-accent-soft: color-mix(in srgb, var(--bb-help-accent) 16%, transparent);
  --bb-help-accent-soft-strong: color-mix(in srgb, var(--bb-help-accent) 24%, transparent);
  --bb-help-dark-surface: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-help-dark-surface-hover: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-primary));
  --bb-help-support-arrow-hover-color: var(--bb-color-blue-200);
  --bb-help-b2b-surface: color-mix(in srgb, var(--bb-color-blue-400) 13%, var(--bb-body-bg));
  --bb-help-b2b-border: color-mix(in srgb, var(--bb-color-blue-400) 28%, var(--bb-border-color));
  --bb-help-b2b-icon: color-mix(in srgb, var(--bb-color-blue-300) 86%, var(--bb-emphasis-color));
  --bb-help-draugr-surface: color-mix(in srgb, var(--bb-color-purple-400) 14%, var(--bb-body-bg));
  --bb-help-draugr-border: color-mix(in srgb, var(--bb-color-purple-400) 30%, var(--bb-border-color));
  --bb-help-draugr-icon: color-mix(in srgb, var(--bb-color-purple-300) 88%, var(--bb-emphasis-color));
  --bb-help-integration-surface: color-mix(in srgb, var(--bb-color-turquoise-400) 12%, var(--bb-body-bg));
  --bb-help-integration-border: color-mix(in srgb, var(--bb-color-turquoise-400) 28%, var(--bb-border-color));
  --bb-help-integration-icon: color-mix(in srgb, var(--bb-color-turquoise-300) 86%, var(--bb-emphasis-color));
  --bb-help-project-default-surface: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-help-project-default-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-help-project-default-icon: var(--bb-tertiary-color);
}

/* =====================================
   Dark Mode Local Tuning
===================================== */
html[data-bs-theme=dark] .bb-help-page {
  --bb-help-accent-soft: color-mix(in srgb, var(--bb-help-accent) 14%, transparent);
  --bb-help-accent-soft-strong: color-mix(in srgb, var(--bb-help-accent) 22%, transparent);
  --bb-help-dark-surface: color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-body-bg));
  --bb-help-dark-surface-hover: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-primary));
  --bb-help-support-arrow-hover-color: var(--bb-color-blue-200);
  --bb-help-b2b-surface: color-mix(in srgb, var(--bb-color-blue-400) 12%, var(--bb-body-bg));
  --bb-help-b2b-border: color-mix(in srgb, var(--bb-color-blue-400) 26%, var(--bb-border-color));
  --bb-help-b2b-icon: color-mix(in srgb, var(--bb-color-blue-300) 84%, var(--bb-emphasis-color));
  --bb-help-draugr-surface: color-mix(in srgb, var(--bb-color-purple-400) 13%, var(--bb-body-bg));
  --bb-help-draugr-border: color-mix(in srgb, var(--bb-color-purple-400) 28%, var(--bb-border-color));
  --bb-help-draugr-icon: color-mix(in srgb, var(--bb-color-purple-300) 86%, var(--bb-emphasis-color));
  --bb-help-integration-surface: color-mix(in srgb, var(--bb-color-turquoise-400) 11%, var(--bb-body-bg));
  --bb-help-integration-border: color-mix(in srgb, var(--bb-color-turquoise-400) 26%, var(--bb-border-color));
  --bb-help-integration-icon: color-mix(in srgb, var(--bb-color-turquoise-300) 84%, var(--bb-emphasis-color));
  --bb-help-project-default-surface: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-help-project-default-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-help-project-default-icon: var(--bb-tertiary-color);
}

/* =====================================
   Help Hero
===================================== */
.bb-hero.bb-help-hero {
  position: relative;
  overflow: hidden;
  padding-top: 58px;
  padding-bottom: 116px;
  background: radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--bb-body-bg) 92%, transparent), transparent 24%), radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-help-accent) 15%, transparent), transparent 28%), linear-gradient(135deg, var(--bb-help-accent-soft) 0%, var(--bb-help-accent-soft-strong) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--bb-help-accent) 20%, var(--bb-border-color));
}

.bb-help-hero::before,
.bb-help-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bb-help-hero::before {
  left: -90px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  background-color: color-mix(in srgb, var(--bb-body-bg) 44%, transparent);
}

.bb-help-hero::after {
  right: -120px;
  top: -110px;
  width: 300px;
  height: 300px;
  background-color: color-mix(in srgb, var(--bb-body-bg) 24%, transparent);
}

.bb-help-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
}

.bb-help-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 15px;
  margin-bottom: 18px;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 86%, transparent);
  color: color-mix(in srgb, var(--bb-help-accent-hover) 78%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-hero-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-hero-title {
  max-width: 900px;
  margin: 0 auto 14px;
  color: var(--bb-emphasis-color);
  font-size: clamp(2.4rem, 5.6vw, 4.45rem);
  line-height: 0.98;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.055em;
}

.bb-help-hero-title span {
  background: linear-gradient(135deg, var(--bb-help-accent) 0%, var(--bb-help-accent-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bb-help-hero-text {
  max-width: 760px;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-help-hero-search-wrap {
  max-width: 720px;
  margin: 30px auto 0;
}

.bb-help-hero-search-form {
  margin: 0;
}

.bb-help-hero-search {
  position: relative;
  display: block;
  margin: 0;
}

.bb-help-hero-search .material-symbols-outlined {
  position: absolute;
  left: 20px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
  pointer-events: none;
}

.bb-help-hero-search-input {
  width: 100%;
  height: 68px;
  padding: 0 22px 0 58px;
  border: 1px solid color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent);
  border-radius: var(--bb-radius-xl);
  background-color: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  color: var(--bb-body-color);
  font-size: var(--bb-fs-base);
  box-shadow: var(--bb-shadow-sm);
  outline: 0;
  transition: border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-help-hero-search-input:focus {
  border-color: color-mix(in srgb, var(--bb-help-accent) 42%, var(--bb-border-color));
  box-shadow: 0 20px 40px color-mix(in srgb, var(--bb-help-accent) 12%, transparent);
}

.bb-help-hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.bb-help-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--bb-help-dark-surface);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-dark-surface);
  color: var(--bb-white) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-help-chip:hover {
  transform: translateY(-1px);
  border-color: var(--bb-help-accent);
  background-color: var(--bb-help-accent);
  color: var(--bb-white) !important;
  box-shadow: var(--bb-shadow-sm);
}

/* =====================================
   Help Sections
===================================== */
.bb-help-quicknav-wrap {
  position: relative;
  z-index: 5;
  margin-top: -56px;
}

.bb-section.bb-help-section {
  padding-top: 58px;
  padding-bottom: 0;
}

.bb-section.bb-help-section-wide {
  padding-top: 74px;
  padding-bottom: 0;
}

.bb-help-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.bb-help-section-head-left {
  max-width: 780px;
}

.bb-help-section-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bb-help-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.035em;
}

.bb-help-section-text {
  max-width: 760px;
  margin-top: 10px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Help Stage
===================================== */
.bb-help-stage {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-sm);
}

.bb-help-stage > * {
  position: relative;
  z-index: 2;
}

.bb-help-stage-soft {
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
}

.bb-help-stage-grid::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 140px;
  background-image: linear-gradient(color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: var(--bb-help-stage-grid-mask);
  pointer-events: none;
}

/* =====================================
   Help Project Cards
===================================== */
.bb-help-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.bb-help-project-card {
  display: block;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-help-project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-sm);
}

.bb-help-project-card--b2b {
  border-color: var(--bb-help-b2b-border);
  background: linear-gradient(180deg, var(--bb-help-b2b-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-project-card--default {
  border-color: var(--bb-help-project-default-border);
  background: linear-gradient(180deg, var(--bb-help-project-default-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-project-card--default .bb-help-project-icon {
  background-color: var(--bb-help-project-default-surface);
  color: var(--bb-help-project-default-icon);
}

.bb-help-project-card--b2c {
  border-color: color-mix(in srgb, var(--bb-help-accent) 22%, var(--bb-border-color));
  background: linear-gradient(180deg, var(--bb-help-accent-soft) 0%, var(--bb-body-bg) 100%);
}

.bb-help-project-card--draugr {
  border-color: var(--bb-help-draugr-border);
  background: linear-gradient(180deg, var(--bb-help-draugr-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-project-card--integration {
  border-color: var(--bb-help-integration-border);
  background: linear-gradient(180deg, var(--bb-help-integration-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-project-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.bb-help-project-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--bb-radius-lg);
  flex: 0 0 auto;
}

.bb-help-project-card--b2b .bb-help-project-icon {
  background-color: var(--bb-help-b2b-surface);
  color: var(--bb-help-b2b-icon);
}

.bb-help-project-card--b2c .bb-help-project-icon {
  background-color: var(--bb-help-accent-soft);
  color: var(--bb-help-accent-hover);
}

.bb-help-project-card--draugr .bb-help-project-icon {
  background-color: var(--bb-help-draugr-surface);
  color: var(--bb-help-draugr-icon);
}

.bb-help-project-card--integration .bb-help-project-icon {
  background-color: var(--bb-help-integration-surface);
  color: var(--bb-help-integration-icon);
}

.bb-help-project-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-help-project-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-dark-surface);
  color: var(--bb-white);
  flex: 0 0 auto;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-help-project-card:hover .bb-help-project-arrow {
  transform: translateX(2px);
  background-color: var(--bb-help-accent);
}

.bb-help-project-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-project-card h3 {
  margin: 0 0 8px;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-help-project-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Help Video Cards
===================================== */
.bb-help-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.bb-help-video-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit !important;
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal);
}

.bb-help-video-card:hover {
  transform: translateY(-4px);
}

.bb-help-video-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  border-radius: var(--bb-radius-2xl) var(--bb-radius-2xl) 0 0;
  background-color: var(--bb-tertiary-bg);
  box-shadow: var(--bb-shadow-sm);
}

.bb-help-video-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-transition-slow);
}

.bb-help-video-card:hover .bb-help-video-media img {
  transform: scale(1.04);
}

.bb-help-video-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-help-dark-surface) 82%, transparent);
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  backdrop-filter: blur(8px);
}

.bb-help-video-badge .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-help-video-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--bb-border-color);
  border-top: 0;
  border-radius: 0 0 var(--bb-radius-2xl) var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-video-card--warm .bb-help-video-body {
  background: linear-gradient(180deg, var(--bb-help-accent-soft) 0%, var(--bb-body-bg) 100%);
}

.bb-help-video-card--neutral .bb-help-video-body {
  background: linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-body-bg) 100%);
}

.bb-help-video-card--cool .bb-help-video-body {
  background: linear-gradient(180deg, var(--bb-help-b2b-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-video-title {
  min-height: 52px;
  margin: 0 0 10px;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-help-video-text {
  min-height: 96px;
  margin: 0 0 18px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-video-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  margin-top: auto;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-dark-surface);
  color: var(--bb-white) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: background-color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-video-link:hover {
  transform: translateY(-1px);
  background-color: var(--bb-help-accent);
  color: var(--bb-white) !important;
}

.bb-help-video-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Help Topic Cards
===================================== */
.bb-help-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.bb-help-topic-card {
  display: block;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-help-topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-sm);
}

.bb-help-topic-card--warm {
  border-color: color-mix(in srgb, var(--bb-help-accent) 22%, var(--bb-border-color));
  background: linear-gradient(180deg, var(--bb-help-accent-soft) 0%, var(--bb-body-bg) 100%);
}

.bb-help-topic-card--sky {
  border-color: var(--bb-help-b2b-border);
  background: linear-gradient(180deg, var(--bb-help-b2b-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-topic-card--purple {
  border-color: var(--bb-help-draugr-border);
  background: linear-gradient(180deg, var(--bb-help-draugr-surface) 0%, var(--bb-body-bg) 100%);
}

.bb-help-topic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.bb-help-topic-head-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.bb-help-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--bb-radius-lg);
  flex: 0 0 auto;
}

.bb-help-topic-card--warm .bb-help-topic-icon {
  background-color: var(--bb-help-accent-soft);
  color: var(--bb-help-accent-hover);
}

.bb-help-topic-card--sky .bb-help-topic-icon {
  background-color: var(--bb-help-b2b-surface);
  color: var(--bb-help-b2b-icon);
}

.bb-help-topic-card--purple .bb-help-topic-icon {
  background-color: var(--bb-help-draugr-surface);
  color: var(--bb-help-draugr-icon);
}

.bb-help-topic-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-help-topic-title-wrap {
  min-width: 0;
}

.bb-help-topic-arrow {
  margin-top: 2px;
  color: var(--bb-tertiary-color);
  flex: 0 0 auto;
  transition: color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-topic-card:hover .bb-help-topic-arrow {
  transform: translateX(2px);
  color: var(--bb-help-accent);
}

.bb-help-topic-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-topic-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  margin-bottom: 7px;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 70%, transparent);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-help-topic-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-help-topic-text {
  margin: 0 0 14px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-topic-meta {
  display: inline-flex;
  align-items: center;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Help Support Band
===================================== */
.bb-help-support-band {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border: 1px solid color-mix(in srgb, var(--bb-white) 8%, transparent);
  border-radius: var(--bb-radius-2xl);
  background: linear-gradient(135deg, var(--bb-color-gray-900) 0%, var(--bb-color-gray-800) 22%, var(--bb-color-navy-700) 48%, var(--bb-color-navy-600) 76%, var(--bb-color-purple-900) 100%);
  box-shadow: var(--bb-shadow-lg);
}

.bb-help-support-band::before,
.bb-help-support-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bb-help-support-band::before {
  right: -90px;
  top: -90px;
  width: 260px;
  height: 260px;
  background-color: color-mix(in srgb, var(--bb-white) 5%, transparent);
}

.bb-help-support-band::after {
  left: -60px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  background-color: color-mix(in srgb, var(--bb-help-accent) 10%, transparent);
}

.bb-help-support-head,
.bb-help-support-grid {
  position: relative;
  z-index: 2;
}

.bb-help-support-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.bb-help-support-band .bb-help-section-label {
  color: color-mix(in srgb, var(--bb-white) 62%, transparent);
}

.bb-help-support-title {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.045em;
}

.bb-help-support-text {
  max-width: 760px;
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--bb-white) 76%, transparent);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-help-support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.bb-help-support-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 22px;
  border: 1px solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-2xl);
  background-color: color-mix(in srgb, var(--bb-white) 10%, transparent);
  color: inherit !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(12px);
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-help-support-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-white) 24%, transparent);
  background-color: color-mix(in srgb, var(--bb-white) 14%, transparent);
}

.bb-help-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: var(--bb-radius-xl);
  background-color: color-mix(in srgb, var(--bb-help-accent) 18%, transparent);
  color: color-mix(in srgb, var(--bb-help-accent) 30%, var(--bb-white));
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-support-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-help-support-card h3 {
  margin: 0 0 10px;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-help-support-card p {
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--bb-white) 74%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-help-support-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-accent);
  color: var(--bb-white);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--bb-help-accent) 22%, transparent);
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-help-support-card:hover .bb-help-support-arrow {
  transform: translateX(2px);
  background-color: var(--bb-white);
  color: var(--bb-help-support-arrow-hover-color);
}

.bb-help-support-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Help Landing Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-help-project-grid,
  .bb-help-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-help-video-grid,
  .bb-help-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-hero.bb-help-hero {
    padding-top: 42px;
    padding-bottom: 96px;
  }
  .bb-help-quicknav-wrap {
    margin-top: -42px;
  }
  .bb-help-section-head,
  .bb-help-support-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-help-stage,
  .bb-help-support-band {
    padding: 24px;
  }
  .bb-help-video-title,
  .bb-help-video-text {
    min-height: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-hero.bb-help-hero {
    padding-top: 34px;
    padding-bottom: 76px;
  }
  .bb-help-hero-title {
    font-size: clamp(2.05rem, 11vw, 2.75rem);
    letter-spacing: -0.045em;
  }
  .bb-help-hero-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-help-hero-search-input {
    height: 58px;
    font-size: var(--bb-fs-sm);
  }
  .bb-help-quicknav-wrap {
    margin-top: -28px;
  }
  .bb-section.bb-help-section {
    padding-top: 44px;
  }
  .bb-section.bb-help-section-wide {
    padding-top: 56px;
  }
  .bb-help-project-grid,
  .bb-help-support-grid,
  .bb-help-topic-grid,
  .bb-help-video-grid {
    grid-template-columns: 1fr;
  }
  .bb-help-section-title {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }
  .bb-help-support-title {
    font-size: clamp(1.8rem, 8vw, 2.25rem);
  }
}
@media (max-width: 575.98px) {
  .bb-help-stage,
  .bb-help-support-band {
    padding: 20px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-project-card,
  .bb-help-topic-card {
    padding: 20px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-hero-chip-row {
    justify-content: flex-start;
  }
  .bb-help-chip {
    min-height: 38px;
    padding: 8px 14px;
  }
}
/* =====================================
   Help Categories Sidebar Nav
   _HelpCategories component
===================================== */
.bb-help-categories-nav {
  overflow: hidden;
  border: 1px solid var(--bb-help-category-border, var(--bb-border-color));
  border-radius: var(--bb-radius-2xl);
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-categories-nav-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--bb-help-category-border-soft, color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-body-bg)));
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-help-accent) 10%, transparent) 0, transparent 34%), var(--bb-body-bg);
}

.bb-help-categories-nav-icon {
  width: 2.625rem;
  height: 42px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-accent-soft);
  color: color-mix(in srgb, var(--bb-help-accent-hover) 72%, var(--bb-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-help-categories-nav-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-help-categories-nav-title-label {
  display: block;
  margin-bottom: 3px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-help-categories-nav-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-help-categories-nav-list {
  display: grid;
  gap: 4px;
  padding: 12px;
  margin: 0;
  list-style: none;
}

.bb-help-categories-nav-item {
  min-width: 0;
}

.bb-help-categories-nav-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 0.5rem;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px 9px 13px;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-help-categories-nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--bb-radius-pill);
  background-color: transparent;
  transition: background-color var(--bb-transition-normal);
}

.bb-help-categories-nav-link span {
  min-width: 0;
}

.bb-help-categories-nav-link .material-symbols-outlined {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--bb-transition-normal), transform var(--bb-transition-normal), color var(--bb-transition-normal);
}

.bb-help-categories-nav-link:hover,
.bb-help-categories-nav-link.active {
  background-color: var(--bb-help-accent-soft);
  color: color-mix(in srgb, var(--bb-help-accent-hover) 72%, var(--bb-dark));
  transform: translateX(2px);
}

.bb-help-categories-nav-link:hover::before,
.bb-help-categories-nav-link.active::before {
  background-color: var(--bb-help-accent);
}

.bb-help-categories-nav-link:hover .material-symbols-outlined,
.bb-help-categories-nav-link.active .material-symbols-outlined {
  opacity: 1;
  transform: translateX(0);
  color: color-mix(in srgb, var(--bb-help-accent-hover) 72%, var(--bb-dark));
}

/* =====================================
   Help Related Topics
   _HelpRelatedTopics component
===================================== */
.bb-help-related-topics {
  min-width: 0;
}

.bb-help-related-topics-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bb-help-related-topics-item {
  min-width: 0;
}

.bb-help-related-topic-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 14px;
  border: 1px solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-help-related-topic-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-help-accent) 30%, var(--bb-border-color));
  background-color: color-mix(in srgb, var(--bb-help-accent) 5%, var(--bb-body-bg));
  box-shadow: var(--bb-shadow-sm);
}

.bb-help-related-topic-icon {
  width: 2.625rem;
  height: 42px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-accent-soft);
  color: color-mix(in srgb, var(--bb-help-accent-hover) 72%, var(--bb-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-help-related-topic-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-related-topic-text {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.bb-help-related-topic-label {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-help-related-topic-title {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  word-break: break-word;
  transition: color var(--bb-transition-normal);
}

.bb-help-related-topic-arrow {
  width: 36px;
  height: 36px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), color var(--bb-transition-normal);
}

.bb-help-related-topic-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-related-topic-link:hover .bb-help-related-topic-title {
  color: color-mix(in srgb, var(--bb-help-accent-hover) 72%, var(--bb-dark));
}

.bb-help-related-topic-link:hover .bb-help-related-topic-arrow {
  transform: translateX(3px);
  color: var(--bb-white);
  color: var(--bb-white);
}

/* Layout */
.bb-help-article-shell {
  padding: 28px 0 0;
}

.bb-help-article-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.bb-help-article-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 1.125rem;
  min-width: 0;
}

.bb-help-article-main {
  min-width: 0;
}

/* Content */
.bb-help-article-content-wrap {
  min-width: 0;
}

.bb-help-article-content-card,
.bb-help-article-feedback-card,
.bb-help-article-related-card {
  border: 1px solid var(--bb-help-article-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-article-content-card {
  overflow: hidden;
  padding: 32px;
}

.bb-help-article-content-list {
  display: grid;
  gap: 30px;
}

.bb-help-article-content-block {
  min-width: 0;
}

.bb-help-article-content-block + .bb-help-article-content-block {
  padding-top: 30px;
  border-top: 1px solid var(--bb-help-article-border-soft);
}

.bb-help-article-content-picture {
  overflow: hidden;
  margin-bottom: 22px;
  border-radius: var(--bb-radius-2xl);
  border: 1px solid var(--bb-help-article-border-soft);
  background-color: var(--bb-tertiary-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-article-content-picture img {
  width: 100%;
  height: auto;
  display: block;
}

.bb-help-article-content {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.88;
  word-break: break-word;
}

.bb-help-article-content > :first-child,
.bb-help-article-content-text > :first-child {
  margin-top: 0 !important;
}

.bb-help-article-content > :last-child,
.bb-help-article-content-text > :last-child {
  margin-bottom: 0 !important;
}

.bb-help-article-content-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  margin-bottom: 0.75rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-article-accent-soft);
  color: var(--bb-help-article-accent-text);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bb-help-article-content-title {
  margin: 0 0 10px;
  color: var(--bb-heading-color);
  font-size: clamp(1.55rem, 2.8vw, 2.3rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.03em;
}

.bb-help-article-content-subtitle {
  margin: 0 0 18px;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

.bb-help-article-content-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1.88;
}

.bb-help-article-content h1,
.bb-help-article-content h2,
.bb-help-article-content h3,
.bb-help-article-content h4,
.bb-help-article-content h5,
.bb-help-article-content h6,
.bb-help-article-content-text h1,
.bb-help-article-content-text h2,
.bb-help-article-content-text h3,
.bb-help-article-content-text h4,
.bb-help-article-content-text h5,
.bb-help-article-content-text h6 {
  margin-top: 1.45em;
  margin-bottom: 0.65em;
  color: var(--bb-heading-color);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-help-article-content p,
.bb-help-article-content-text p {
  margin-bottom: 18px;
}

.bb-help-article-content ul,
.bb-help-article-content ol,
.bb-help-article-content-text ul,
.bb-help-article-content-text ol {
  margin: 0 0 18px;
  padding-left: 1.35rem;
}

.bb-help-article-content li,
.bb-help-article-content-text li {
  margin-bottom: 0.5rem;
}

.bb-help-article-content a,
.bb-help-article-content-text a {
  color: var(--bb-help-article-accent-text);
  font-weight: var(--bb-fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bb-help-article-content blockquote,
.bb-help-article-content-text blockquote {
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--bb-help-article-accent);
  border-radius: 0 var(--bb-radius-lg) var(--bb-radius-lg) 0;
  background-color: var(--bb-help-article-accent-soft);
  color: var(--bb-heading-color);
}

.bb-help-article-content img,
.bb-help-article-content-text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px 0;
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-help-article-content table,
.bb-help-article-content-text table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 0 0 1px var(--bb-help-article-border-soft);
}

.bb-help-article-content table th,
.bb-help-article-content table td,
.bb-help-article-content-text table th,
.bb-help-article-content-text table td {
  padding: 14px 16px;
  border: 1px solid var(--bb-help-article-border-soft);
  text-align: left;
  vertical-align: top;
}

.bb-help-article-content table th,
.bb-help-article-content-text table th {
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-bold);
}

.bb-help-article-content hr,
.bb-help-article-content-text hr {
  border: 0;
  border-top: 1px solid var(--bb-help-article-border-soft);
  margin: 30px 0;
}

/* Feedback */
.bb-help-article-feedback {
  margin-top: 24px;
}

.bb-help-article-feedback-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 24px 26px;
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-help-article-accent) 10%, transparent) 0, transparent 34%), var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-help-article-accent) 22%, var(--bb-help-article-border));
}

.bb-help-article-feedback-text {
  min-width: 0;
}

.bb-help-article-feedback-label {
  gap: 0.4375rem;
  margin-bottom: 0.5rem;
}

.bb-help-article-feedback-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-help-article-feedback-title {
  margin: 0 0 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
}

.bb-help-article-feedback-desc {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-article-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.bb-help-article-feedback-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
}

.bb-help-article-feedback-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-article-feedback-message {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--bb-radius-lg);
  border: 1px solid color-mix(in srgb, var(--bb-help-article-accent) 22%, var(--bb-help-article-border));
  background-color: var(--bb-body-bg);
  color: var(--bb-help-article-accent-text);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Related */
.bb-help-article-related {
  margin-top: 24px;
}

.bb-help-article-related-card {
  padding: 24px 26px;
}

.bb-help-article-related-head {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bb-help-article-border-soft);
}

.bb-help-article-related-label {
  gap: 0.4375rem;
  margin-bottom: 9px;
}

.bb-help-article-related-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-help-article-related-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.03em;
}

.bb-help-article-related-host {
  min-width: 0;
}

/* Topbar */
.bb-help-search-topbar {
  padding: 22px 0 18px;
  background: radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--bb-help-search-accent) 10%, transparent) 0, transparent 24%), var(--bb-body-bg);
  border-bottom: 1px solid var(--bb-help-search-border-soft);
}

.bb-help-search-topbar-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 520px);
  gap: 24px;
  align-items: end;
}

.bb-help-search-topbar-text {
  min-width: 0;
}

.bb-help-search-topbar-label {
  gap: 0.4375rem;
  margin-bottom: 0.5rem;
}

.bb-help-search-topbar-label .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-help-search-topbar-text h1 {
  margin: 0 0 6px;
  color: var(--bb-heading-color);
  font-size: clamp(1.65rem, 2.7vw, 2.45rem);
  line-height: var(--bb-line-height-tight);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-help-search-topbar-text p {
  max-width: 680px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-help-search-form {
  width: 100%;
}

.bb-help-search-input-group {
  box-shadow: var(--bb-shadow-xs);
}

.bb-help-search-input-group .input-group-text .material-symbols-outlined,
.bb-help-search-clear-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-search-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Layout */
.bb-help-search-results-section {
  padding: 24px 0 64px;
}

.bb-help-search-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.bb-help-search-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.bb-help-search-main {
  min-width: 0;
}

/* Cards */
.bb-help-search-filter-card,
.bb-help-search-contact-card,
.bb-help-search-panel {
  border: 1px solid var(--bb-help-search-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

/* Filter */
.bb-help-search-filter-card {
  overflow: hidden;
}

.bb-help-search-filter-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--bb-help-search-border-soft);
}

.bb-help-search-filter-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-search-accent-soft);
  color: var(--bb-help-search-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-help-search-filter-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-help-search-filter-head span {
  display: block;
  margin-bottom: 3px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-help-search-filter-head strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-help-search-filter-list {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.bb-help-search-filter-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-search-filter-link:hover,
.bb-help-search-filter-link.active {
  background-color: var(--bb-help-search-accent-soft);
  color: var(--bb-help-search-accent-text);
  transform: translateX(2px);
}

.bb-help-search-filter-link strong {
  color: inherit;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Contact */
.bb-help-search-contact-card {
  padding: 18px;
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-help-search-accent) 10%, transparent) 0, transparent 34%), var(--bb-body-bg);
}

.bb-help-search-contact-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0.75rem;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-search-accent-soft);
  color: var(--bb-help-search-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-help-search-contact-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-search-contact-card h2 {
  margin: 0 0 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: 1.22;
  font-weight: var(--bb-fw-bold);
}

.bb-help-search-contact-card p {
  margin: 0 0 14px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-search-contact-card .btn {
  width: 100%;
}

/* Panel */
.bb-help-search-panel {
  overflow: hidden;
}

.bb-help-search-panel-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bb-help-search-border-soft);
  background-color: var(--bb-body-bg);
}

.bb-help-search-panel-label {
  gap: 0.4375rem;
  margin-bottom: 0.5rem;
}

.bb-help-search-panel-label .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-help-search-panel-head h2 {
  margin: 0 0 4px;
  color: var(--bb-heading-color);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.03em;
}

.bb-help-search-panel-head p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Results */
.bb-help-search-result-list {
  display: grid;
}

.bb-help-search-result-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  gap: 0.875rem;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--bb-help-search-border-soft);
  color: inherit !important;
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-help-search-result-item:last-child {
  border-bottom: 0;
}

.bb-help-search-result-item:hover {
  background-color: color-mix(in srgb, var(--bb-help-search-accent) 5%, var(--bb-body-bg));
}

.bb-help-search-result-icon {
  width: 2.625rem;
  height: 42px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-search-accent-soft);
  color: var(--bb-help-search-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-help-search-result-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-help-search-result-content {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.bb-help-search-result-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-help-search-result-title {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.018em;
  transition: color var(--bb-transition-normal);
}

.bb-help-search-result-item:hover .bb-help-search-result-title {
  color: var(--bb-help-search-accent-text);
}

.bb-help-search-result-text {
  display: block;
  max-width: 820px;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-search-result-arrow {
  width: 38px;
  height: 38px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid var(--bb-help-search-border-soft);
  color: var(--bb-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--bb-transition-normal), background-color var(--bb-transition-normal), color var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-help-search-result-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-search-result-item:hover .bb-help-search-result-arrow {
  transform: translateX(3px);
  color: var(--bb-white);
  border-color: var(--bb-dark);
  color: var(--bb-white);
}

/* Empty */
.bb-help-search-empty {
  min-height: 300px;
  padding: 42px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  text-align: center;
}

.bb-help-search-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-help-search-accent-soft);
  color: var(--bb-help-search-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-help-search-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-help-search-empty h2 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-help-search-empty p {
  max-width: 560px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Help Search Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-help-search-topbar-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .bb-help-search-layout {
    grid-template-columns: 1fr;
  }
  .bb-help-search-sidebar {
    position: static;
  }
  .bb-help-search-filter-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-help-search-topbar {
    padding: 18px 0 16px;
  }
  .bb-help-search-results-section {
    padding: 20px 0 48px;
  }
  .bb-help-search-result-item {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: flex-start;
    padding: 18px;
  }
  .bb-help-search-result-arrow {
    grid-column: 2;
    width: 36px;
    height: 36px;
  }
  .bb-help-search-panel-head {
    padding: 18px;
  }
  .bb-help-search-input-group {
    flex-wrap: nowrap;
  }
}
@media (max-width: 575.98px) {
  .bb-help-search-panel,
  .bb-help-search-filter-card,
  .bb-help-search-contact-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-search-result-item {
    grid-template-columns: 1fr;
  }
  .bb-help-search-result-arrow {
    grid-column: 1;
  }
  .bb-help-search-input-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bb-help-search-input-group .btn {
    grid-column: 1/-1;
    width: 100%;
  }
}
/* =====================================
   Help Search Hero Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-help-search-hero-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-help-search-hero-count {
    width: 100%;
    text-align: left;
  }
  .bb-help-search-layout {
    grid-template-columns: 1fr;
  }
  .bb-help-search-sidebar {
    position: static;
  }
  .bb-help-search-filter-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-help-search-hero {
    padding: 26px 0 32px;
  }
  .bb-help-search-section {
    padding: 22px 0 48px;
  }
  .bb-help-search-panel-head,
  .bb-help-search-result-item {
    padding: 20px;
  }
  .bb-help-search-result-item {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: flex-start;
  }
  .bb-help-search-result-arrow {
    grid-column: 2;
    width: 36px;
    height: 36px;
  }
  .bb-help-search-input-group {
    flex-wrap: nowrap;
  }
}
@media (max-width: 575.98px) {
  .bb-help-search-panel,
  .bb-help-search-filter-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-search-result-item {
    grid-template-columns: 1fr;
  }
  .bb-help-search-result-icon {
    width: 2.625rem;
    height: 42px;
  }
  .bb-help-search-result-arrow {
    grid-column: 1;
  }
  .bb-help-search-input-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bb-help-search-input-group .btn {
    grid-column: 1/-1;
    width: 100%;
  }
}
/* =====================================
   Help Article Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-help-article-layout {
    grid-template-columns: 1fr;
  }
  .bb-help-article-sidebar {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-help-article-content-card,
  .bb-help-article-related-card {
    padding: 24px;
  }
  .bb-help-article-feedback-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-help-article-feedback-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-help-article-shell {
    padding-top: 22px;
  }
  .bb-help-article-content-card,
  .bb-help-article-related-card,
  .bb-help-article-feedback-card {
    padding: 20px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-article-feedback-actions,
  .bb-help-article-feedback-actions .btn {
    width: 100%;
  }
}
/* =====================================
   Help Related Topics Responsive
===================================== */
@media (max-width: 575.98px) {
  .bb-help-related-topic-link {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .bb-help-related-topic-arrow {
    grid-column: 2;
  }
}
/* =====================================
   Help Categories Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-help-categories-nav-head {
    padding: 16px;
  }
  .bb-help-categories-nav-list {
    padding: 10px;
  }
  .bb-help-categories-nav-link {
    font-size: var(--bb-fs-sm);
  }
}
/* =====================================
   Bulbulustur Web - Help Details Page
   Layer: pages/help/_help-details.scss

   Purpose:
   - Help article / help details page visual system.
   - Hero, article layout, content card, sidebar, feedback and related areas.
   - Uses page-local tokens scoped under detail classes.
   - No hardcoded colors.
   - No fallback colors.
===================================== */
/* =====================================
   Help Details Tokens
===================================== */
.bb-help-article-page,
.bb-help-detail-page,
.bb-help-article-shell {
  --bb-help-detail-accent: var(--bb-page-accent);
  --bb-help-detail-accent-hover: var(--bb-page-accent-hover);
  --bb-help-detail-accent-soft: var(--bb-page-accent-soft);
  --bb-help-detail-accent-soft-strong: color-mix(in srgb, var(--bb-help-detail-accent) 22%, var(--bb-body-bg));
  --bb-help-detail-surface: var(--bb-body-bg);
  --bb-help-detail-surface-soft: var(--bb-tertiary-bg);
  --bb-help-detail-surface-elevated: var(--bb-surface-elevated);
  --bb-help-detail-surface-warm: color-mix(in srgb, var(--bb-help-detail-accent) 7%, var(--bb-body-bg));
  --bb-help-detail-surface-warm-strong: color-mix(in srgb, var(--bb-help-detail-accent) 12%, var(--bb-body-bg));
  --bb-help-detail-border: var(--bb-border-color);
  --bb-help-detail-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-body-bg));
  --bb-help-detail-border-accent: color-mix(in srgb, var(--bb-help-detail-accent) 24%, var(--bb-border-color));
  --bb-help-detail-heading: var(--bb-emphasis-color);
  --bb-help-detail-text: var(--bb-body-color);
  --bb-help-detail-muted: var(--bb-secondary-color);
  --bb-help-detail-subtle: var(--bb-tertiary-color);
  --bb-help-detail-dark-surface: var(--bb-brand-navy);
  --bb-help-detail-dark-surface-hover: color-mix(in srgb, var(--bb-brand-navy) 86%, var(--bb-help-detail-accent));
  --bb-help-detail-shadow-soft: var(--bb-shadow-xs);
  --bb-help-detail-shadow-card: var(--bb-shadow-sm);
  --bb-help-detail-shadow-strong: var(--bb-shadow-lg);
}

/* =====================================
   Navy Mode Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-help-article-page,
html[data-bs-theme=navy] .bb-help-detail-page,
html[data-bs-theme=navy] .bb-help-article-shell {
  --bb-help-detail-accent-soft: color-mix(in srgb, var(--bb-help-detail-accent) 16%, transparent);
  --bb-help-detail-accent-soft-strong: color-mix(in srgb, var(--bb-help-detail-accent) 24%, transparent);
  --bb-help-detail-surface-warm: color-mix(in srgb, var(--bb-help-detail-accent) 9%, var(--bb-body-bg));
  --bb-help-detail-surface-warm-strong: color-mix(in srgb, var(--bb-help-detail-accent) 15%, var(--bb-body-bg));
  --bb-help-detail-border-soft: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-help-detail-border-accent: color-mix(in srgb, var(--bb-help-detail-accent) 28%, var(--bb-border-color));
  --bb-help-detail-dark-surface: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-help-detail-dark-surface-hover: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-help-detail-accent));
}

/* =====================================
   Dark Mode Local Tuning
===================================== */
html[data-bs-theme=dark] .bb-help-article-page,
html[data-bs-theme=dark] .bb-help-detail-page,
html[data-bs-theme=dark] .bb-help-article-shell {
  --bb-help-detail-accent-soft: color-mix(in srgb, var(--bb-help-detail-accent) 14%, transparent);
  --bb-help-detail-accent-soft-strong: color-mix(in srgb, var(--bb-help-detail-accent) 22%, transparent);
  --bb-help-detail-surface-warm: color-mix(in srgb, var(--bb-help-detail-accent) 8%, var(--bb-body-bg));
  --bb-help-detail-surface-warm-strong: color-mix(in srgb, var(--bb-help-detail-accent) 13%, var(--bb-body-bg));
  --bb-help-detail-border-soft: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-help-detail-border-accent: color-mix(in srgb, var(--bb-help-detail-accent) 26%, var(--bb-border-color));
  --bb-help-detail-dark-surface: color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-body-bg));
  --bb-help-detail-dark-surface-hover: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-help-detail-accent));
}

/* =====================================
   Page Shell
===================================== */
.bb-help-article-page,
.bb-help-detail-page {
  min-width: 0;
  background-color: var(--bb-body-bg);
  color: var(--bb-body-color);
}

.bb-help-article-page a,
.bb-help-detail-page a,
.bb-help-article-shell a {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-article-page .material-symbols-outlined,
.bb-help-detail-page .material-symbols-outlined,
.bb-help-article-shell .material-symbols-outlined {
  line-height: 1;
}

/* =====================================
   Hero
===================================== */
.bb-hero.bb-help-article-hero,
.bb-help-article-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.25rem, 6vw, 5.25rem);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-help-detail-accent) 16%, transparent), transparent 28rem), radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--bb-body-bg) 70%, transparent), transparent 20rem), linear-gradient(135deg, var(--bb-help-detail-accent-soft) 0%, var(--bb-help-detail-accent-soft-strong) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-help-detail-border-accent);
}

.bb-help-article-hero::before,
.bb-help-article-hero::after {
  content: "";
  position: absolute;
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-help-article-hero::before {
  right: -7rem;
  top: -7rem;
  width: 18rem;
  height: 18rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 28%, transparent);
}

.bb-help-article-hero::after {
  left: -8rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  background-color: color-mix(in srgb, var(--bb-help-detail-accent) 7%, transparent);
}

.bb-help-article-hero .bb-container,
.bb-hero.bb-help-article-hero .bb-container {
  position: relative;
  z-index: 2;
}

.bb-help-article-hero-inner {
  max-width: 58rem;
}

.bb-help-article-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 2.25rem;
  padding: 0.5rem 0.875rem;
  margin-bottom: 1rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-help-detail-accent) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 86%, transparent);
  color: color-mix(in srgb, var(--bb-help-detail-accent-hover) 78%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--bb-help-detail-shadow-soft);
}

.bb-help-article-hero-label .material-symbols-outlined,
.bb-help-article-hero-label i {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-article-hero-title {
  max-width: 56rem;
  margin: 0;
  color: var(--bb-help-detail-heading);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.bb-help-article-hero-text {
  max-width: 50rem;
  margin: 1rem 0 0;
  color: var(--bb-help-detail-muted);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-help-article-hero-meta,
.bb-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.bb-help-article-hero-chip,
.bb-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.875rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-body-bg) 82%, transparent);
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 86%, transparent);
  color: var(--bb-help-detail-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none !important;
  box-shadow: var(--bb-help-detail-shadow-soft);
}

.bb-help-article-hero-chip .material-symbols-outlined,
.bb-help-article-hero-chip i,
.bb-hero-chip .material-symbols-outlined,
.bb-hero-chip i {
  color: color-mix(in srgb, var(--bb-help-detail-accent-hover) 72%, var(--bb-emphasis-color));
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Hero Breadcrumb
===================================== */
.bb-help-article-breadcrumb-wrap {
  position: relative;
  z-index: 3;
  margin-bottom: 1.5rem;
}

.bb-help-article-breadcrumb,
.bb-help-article-breadcrumb-wrap .breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.625rem 0.875rem;
  margin: 0;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  box-shadow: var(--bb-help-detail-shadow-soft);
}

.bb-help-article-breadcrumb .breadcrumb-item,
.bb-help-article-breadcrumb-wrap .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--bb-help-detail-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-help-article-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.bb-help-article-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding-right: 0.5rem;
  color: var(--bb-help-detail-subtle);
}

.bb-help-article-breadcrumb a,
.bb-help-article-breadcrumb-wrap .breadcrumb-item a {
  color: var(--bb-help-detail-muted);
  text-decoration: none !important;
}

.bb-help-article-breadcrumb a:hover,
.bb-help-article-breadcrumb-wrap .breadcrumb-item a:hover {
  color: var(--bb-help-detail-accent-hover);
}

.bb-help-article-breadcrumb .breadcrumb-item.active,
.bb-help-article-breadcrumb-wrap .breadcrumb-item.active {
  color: var(--bb-help-detail-heading);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Layout
===================================== */
.bb-help-article-shell {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.bb-help-article-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.bb-help-article-sidebar {
  position: sticky;
  top: 1.5rem;
  min-width: 0;
}

.bb-help-article-main {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

/* =====================================
   Sidebar Support Card
===================================== */
.bb-help-category-support-card {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: 1.25rem;
  border: var(--bb-border-width) solid var(--bb-help-detail-border-accent);
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-help-detail-accent) 14%, transparent), transparent 10rem), linear-gradient(180deg, var(--bb-help-detail-surface-warm) 0%, var(--bb-help-detail-surface) 100%);
  box-shadow: var(--bb-help-detail-shadow-card);
}

.bb-help-category-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-detail-accent-soft);
  color: color-mix(in srgb, var(--bb-help-detail-accent-hover) 76%, var(--bb-emphasis-color));
}

.bb-help-category-support-icon .material-symbols-outlined,
.bb-help-category-support-icon i {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-help-category-support-card h2 {
  margin: 0;
  color: var(--bb-help-detail-heading);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-help-category-support-card p {
  margin: 0.625rem 0 1rem;
  color: var(--bb-help-detail-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-category-support-card .btn {
  width: 100%;
}

/* =====================================
   Article Content
===================================== */
.bb-help-article-content-wrap {
  min-width: 0;
}

.bb-help-article-content-card {
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.125rem);
  border: var(--bb-border-width) solid var(--bb-help-detail-border);
  border-radius: var(--bb-radius-2xl);
  background: linear-gradient(180deg, var(--bb-help-detail-surface-elevated) 0%, var(--bb-help-detail-surface) 100%);
  box-shadow: var(--bb-help-detail-shadow-card);
}

.bb-help-article-content-list {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.bb-help-article-content-block {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: var(--bb-border-width) solid var(--bb-help-detail-border-soft);
}

.bb-help-article-content-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bb-help-article-content-picture {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-help-detail-border-soft);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-help-detail-surface-soft);
  box-shadow: var(--bb-help-detail-shadow-soft);
}

.bb-help-article-content-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.bb-help-article-content {
  min-width: 0;
  color: var(--bb-help-detail-text);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
  word-break: break-word;
}

.bb-help-article-content > :first-child {
  margin-top: 0 !important;
}

.bb-help-article-content > :last-child {
  margin-bottom: 0 !important;
}

.bb-help-article-content-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.375rem 0.625rem;
  margin-bottom: 0.75rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-detail-accent-soft);
  color: color-mix(in srgb, var(--bb-help-detail-accent-hover) 76%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bb-help-article-content-title {
  margin: 0 0 0.75rem;
  color: var(--bb-help-detail-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-help-article-content-subtitle {
  max-width: 48rem;
  margin: 0 0 1rem;
  color: var(--bb-help-detail-muted);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-help-article-content-text {
  color: var(--bb-help-detail-text);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-help-article-content h1,
.bb-help-article-content h2,
.bb-help-article-content h3,
.bb-help-article-content h4,
.bb-help-article-content-text h1,
.bb-help-article-content-text h2,
.bb-help-article-content-text h3,
.bb-help-article-content-text h4 {
  color: var(--bb-help-detail-heading);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-help-article-content h1,
.bb-help-article-content-text h1 {
  margin: 2rem 0 1rem;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.bb-help-article-content h2,
.bb-help-article-content-text h2 {
  margin: 1.875rem 0 0.875rem;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.bb-help-article-content h3,
.bb-help-article-content-text h3 {
  margin: 1.625rem 0 0.75rem;
  font-size: clamp(1.3rem, 2vw, 1.625rem);
}

.bb-help-article-content h4,
.bb-help-article-content-text h4 {
  margin: 1.375rem 0 0.625rem;
  font-size: var(--bb-fs-lg);
}

.bb-help-article-content p,
.bb-help-article-content-text p {
  margin: 0 0 1rem;
  color: var(--bb-help-detail-text);
}

.bb-help-article-content ul,
.bb-help-article-content ol,
.bb-help-article-content-text ul,
.bb-help-article-content-text ol {
  padding-left: 1.35rem;
  margin: 0 0 1rem;
  color: var(--bb-help-detail-text);
}

.bb-help-article-content li,
.bb-help-article-content-text li {
  margin-bottom: 0.5rem;
}

.bb-help-article-content a,
.bb-help-article-content-text a {
  color: var(--bb-help-detail-accent-hover);
  font-weight: var(--bb-fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.bb-help-article-content blockquote,
.bb-help-article-content-text blockquote {
  margin: 1.375rem 0;
  padding: 1.125rem 1.25rem;
  border-left: 0.25rem solid var(--bb-help-detail-accent);
  border-radius: 0 var(--bb-radius-xl) var(--bb-radius-xl) 0;
  background-color: var(--bb-help-detail-surface-warm);
  color: var(--bb-help-detail-text);
}

.bb-help-article-content img,
.bb-help-article-content-text img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-help-detail-shadow-card);
}

.bb-help-article-content table,
.bb-help-article-content-text table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 0 0 var(--bb-border-width) var(--bb-help-detail-border);
  overflow: hidden;
}

.bb-help-article-content table th,
.bb-help-article-content table td,
.bb-help-article-content-text table th,
.bb-help-article-content-text table td {
  padding: 0.875rem 1rem;
  border: var(--bb-border-width) solid var(--bb-help-detail-border);
  text-align: left;
  vertical-align: top;
}

.bb-help-article-content table th,
.bb-help-article-content-text table th {
  background-color: var(--bb-help-detail-surface-soft);
  color: var(--bb-help-detail-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-help-article-content hr,
.bb-help-article-content-text hr {
  margin: 1.875rem 0;
  border: 0;
  border-top: var(--bb-border-width) solid var(--bb-help-detail-border-soft);
}

/* =====================================
   Feedback
===================================== */
.bb-help-article-feedback {
  min-width: 0;
}

.bb-help-article-feedback-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 1.625rem);
  border: var(--bb-border-width) solid var(--bb-help-detail-border-accent);
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--bb-help-detail-accent) 10%, transparent), transparent 12rem), linear-gradient(180deg, var(--bb-help-detail-surface-warm) 0%, var(--bb-help-detail-surface) 100%);
  box-shadow: var(--bb-help-detail-shadow-card);
}

.bb-help-article-feedback-text {
  min-width: 0;
}

.bb-help-article-feedback-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.375rem 0.625rem;
  margin-bottom: 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-help-detail-accent) 12%, var(--bb-body-bg));
  color: color-mix(in srgb, var(--bb-help-detail-accent-hover) 76%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-help-article-feedback-label .material-symbols-outlined,
.bb-help-article-feedback-label i {
  font-size: var(--bb-icon-size-sm);
}

.bb-help-article-feedback-title {
  margin: 0;
  color: var(--bb-help-detail-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-help-article-feedback-desc {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-help-detail-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-article-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bb-help-article-feedback-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.875rem;
  white-space: nowrap;
}

.bb-help-article-feedback-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-help-article-feedback-message {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: var(--bb-border-width) solid var(--bb-help-detail-border-accent);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-detail-surface-elevated);
  color: var(--bb-help-detail-accent-hover);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Related
===================================== */
.bb-help-article-related {
  min-width: 0;
}

.bb-help-article-related-card {
  padding: clamp(1.25rem, 2.5vw, 1.625rem);
  border: var(--bb-border-width) solid var(--bb-help-detail-border);
  border-radius: var(--bb-radius-2xl);
  background: linear-gradient(180deg, var(--bb-help-detail-surface-elevated) 0%, var(--bb-help-detail-surface) 100%);
  box-shadow: var(--bb-help-detail-shadow-soft);
}

.bb-help-article-related-head {
  margin-bottom: 1rem;
}

.bb-help-article-related-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.375rem 0.625rem;
  margin-bottom: 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-detail-surface-soft);
  color: var(--bb-help-detail-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-help-article-related-label .material-symbols-outlined,
.bb-help-article-related-label i {
  color: var(--bb-help-detail-accent-hover);
  font-size: var(--bb-icon-size-sm);
}

.bb-help-article-related-title {
  margin: 0;
  color: var(--bb-help-detail-heading);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-help-article-related-host {
  min-width: 0;
}

/* =====================================
   Legacy Detail Classes Cleanup Bridge
   Temporary until old help-detail classes are removed from _help.scss
===================================== */
.bb-help-categories-nav-support {
  margin-top: 1rem;
}

.bb-help-categories-nav-support-title {
  color: var(--bb-help-detail-heading);
}

.bb-help-categories-nav-support-text {
  color: var(--bb-help-detail-muted);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-help-article-layout {
    grid-template-columns: 1fr;
  }
  .bb-help-article-sidebar {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-help-article-shell {
    padding-top: 2rem;
  }
  .bb-help-article-feedback-card {
    grid-template-columns: 1fr;
  }
  .bb-help-article-feedback-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-hero.bb-help-article-hero,
  .bb-help-article-hero {
    padding-top: 2.25rem;
    padding-bottom: 3.25rem;
  }
  .bb-help-article-hero-title {
    font-size: clamp(2rem, 10vw, 2.75rem);
    letter-spacing: -0.045em;
  }
  .bb-help-article-hero-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-help-article-content-card,
  .bb-help-article-feedback-card,
  .bb-help-article-related-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-article-content-card {
    padding: 1.25rem;
  }
  .bb-help-article-content {
    font-size: var(--bb-fs-sm);
  }
}
@media (max-width: 575.98px) {
  .bb-help-article-breadcrumb,
  .bb-help-article-breadcrumb-wrap .breadcrumb {
    width: 100%;
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-article-feedback-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-help-article-feedback-actions .btn,
  .bb-help-category-support-card .btn {
    width: 100%;
  }
}
/* =====================================
   Bulbulustur Web - Help Category Page
   Layer: pages/help/_help-category.scss

   Purpose:
   - Help category listing page.
   - Category hero, article list, sidebar and empty state.
   - Token based.
   - Light / Navy / Dark safe.
   - No hardcoded colors.
   - No fallback colors.
===================================== */
/* =====================================
   Help Category Tokens
===================================== */
.bb-help-category-page {
  --bb-help-category-accent: var(--bb-page-accent);
  --bb-help-category-accent-hover: var(--bb-page-accent-hover);
  --bb-help-category-accent-soft: var(--bb-page-accent-soft);
  --bb-help-category-accent-soft-strong: color-mix(in srgb, var(--bb-help-category-accent) 22%, var(--bb-body-bg));
  --bb-help-category-surface: var(--bb-body-bg);
  --bb-help-category-surface-soft: var(--bb-tertiary-bg);
  --bb-help-category-surface-elevated: var(--bb-surface-elevated);
  --bb-help-category-surface-warm: color-mix(in srgb, var(--bb-help-category-accent) 7%, var(--bb-body-bg));
  --bb-help-category-surface-warm-strong: color-mix(in srgb, var(--bb-help-category-accent) 12%, var(--bb-body-bg));
  --bb-help-category-border: var(--bb-border-color);
  --bb-help-category-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-body-bg));
  --bb-help-category-border-accent: color-mix(in srgb, var(--bb-help-category-accent) 24%, var(--bb-border-color));
  --bb-help-category-heading: var(--bb-emphasis-color);
  --bb-help-category-text: var(--bb-body-color);
  --bb-help-category-muted: var(--bb-secondary-color);
  --bb-help-category-subtle: var(--bb-tertiary-color);
  --bb-help-category-shadow-soft: var(--bb-shadow-xs);
  --bb-help-category-shadow-card: var(--bb-shadow-sm);
  --bb-help-category-shadow-strong: var(--bb-shadow-lg);
}

/* =====================================
   Navy Mode Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-help-category-page {
  --bb-help-category-accent-soft: color-mix(in srgb, var(--bb-help-category-accent) 16%, transparent);
  --bb-help-category-accent-soft-strong: color-mix(in srgb, var(--bb-help-category-accent) 24%, transparent);
  --bb-help-category-surface-warm: color-mix(in srgb, var(--bb-help-category-accent) 9%, var(--bb-body-bg));
  --bb-help-category-surface-warm-strong: color-mix(in srgb, var(--bb-help-category-accent) 15%, var(--bb-body-bg));
  --bb-help-category-border-soft: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-help-category-border-accent: color-mix(in srgb, var(--bb-help-category-accent) 28%, var(--bb-border-color));
}

/* =====================================
   Dark Mode Local Tuning
===================================== */
html[data-bs-theme=dark] .bb-help-category-page {
  --bb-help-category-accent-soft: color-mix(in srgb, var(--bb-help-category-accent) 14%, transparent);
  --bb-help-category-accent-soft-strong: color-mix(in srgb, var(--bb-help-category-accent) 22%, transparent);
  --bb-help-category-surface-warm: color-mix(in srgb, var(--bb-help-category-accent) 8%, var(--bb-body-bg));
  --bb-help-category-surface-warm-strong: color-mix(in srgb, var(--bb-help-category-accent) 13%, var(--bb-body-bg));
  --bb-help-category-border-soft: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-help-category-border-accent: color-mix(in srgb, var(--bb-help-category-accent) 26%, var(--bb-border-color));
}

/* =====================================
   Page Shell
===================================== */
.bb-help-category-page {
  min-width: 0;
  background-color: var(--bb-body-bg);
  color: var(--bb-body-color);
}

.bb-help-category-page a {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-category-page .material-symbols-outlined {
  line-height: 1;
}

/* =====================================
   Hero
===================================== */
.bb-help-category-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.25rem, 6vw, 5.25rem);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-help-category-accent) 16%, transparent), transparent 28rem), radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--bb-body-bg) 70%, transparent), transparent 20rem), linear-gradient(135deg, var(--bb-help-category-accent-soft) 0%, var(--bb-help-category-accent-soft-strong) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-help-category-border-accent);
}

.bb-help-category-hero::before,
.bb-help-category-hero::after {
  content: "";
  position: absolute;
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-help-category-hero::before {
  right: -7rem;
  top: -7rem;
  width: 18rem;
  height: 18rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 28%, transparent);
}

.bb-help-category-hero::after {
  left: -8rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  background-color: color-mix(in srgb, var(--bb-help-category-accent) 7%, transparent);
}

.bb-help-category-hero .bb-container {
  position: relative;
  z-index: 2;
}

.bb-help-category-hero .bb-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.bb-help-category-hero-label {
  gap: 0.5rem;
  width: fit-content;
  margin-bottom: 1rem;
}

.bb-help-category-hero-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-category-hero-title {
  max-width: 56rem;
  margin: 0;
  color: var(--bb-help-category-heading);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.bb-help-category-hero-text {
  max-width: 50rem;
  margin: 1rem 0 0;
  color: var(--bb-help-category-muted);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-help-category-hero-count,
.bb-hero-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 8rem;
  min-height: 8rem;
  padding: 1rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-help-category-accent) 20%, var(--bb-border-color));
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-help-category-accent) 15%, transparent), transparent 8rem), color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  box-shadow: var(--bb-help-category-shadow-card);
}

.bb-help-category-hero-count strong,
.bb-hero-count strong {
  display: block;
  color: var(--bb-help-category-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
  letter-spacing: -0.045em;
}

.bb-help-category-hero-count span,
.bb-hero-count span {
  display: block;
  margin-top: 0.375rem;
  color: var(--bb-help-category-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =====================================
   Hero Breadcrumb
===================================== */
.bb-help-category-hero-breadcrumb {
  margin-bottom: 1.5rem;
}

/* =====================================
   Main Section
===================================== */
.bb-help-category-section {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.bb-help-category-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.bb-help-category-sidebar {
  position: sticky;
  top: 1.5rem;
  min-width: 0;
}

.bb-help-category-main {
  min-width: 0;
}

/* =====================================
   Support Card
===================================== */
.bb-help-category-support-card {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: 1.25rem;
  border: var(--bb-border-width) solid var(--bb-help-category-border-accent);
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-help-category-accent) 14%, transparent), transparent 10rem), linear-gradient(180deg, var(--bb-help-category-surface-warm) 0%, var(--bb-help-category-surface) 100%);
  box-shadow: var(--bb-help-category-shadow-card);
}

.bb-help-category-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-category-accent-soft);
  color: color-mix(in srgb, var(--bb-help-category-accent-hover) 76%, var(--bb-emphasis-color));
}

.bb-help-category-support-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-help-category-support-card h2 {
  margin: 0;
  color: var(--bb-help-category-heading);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-help-category-support-card p {
  margin: 0.625rem 0 1rem;
  color: var(--bb-help-category-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-help-category-support-card .btn {
  width: 100%;
}

/* =====================================
   Panel
===================================== */
.bb-help-category-panel {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-help-category-border);
  border-radius: var(--bb-radius-2xl);
  background: linear-gradient(180deg, var(--bb-help-category-surface-elevated) 0%, var(--bb-help-category-surface) 100%);
  box-shadow: var(--bb-help-category-shadow-card);
}

.bb-help-category-panel-head {
  padding: clamp(1.25rem, 2.5vw, 1.625rem);
  border-bottom: var(--bb-border-width) solid var(--bb-help-category-border-soft);
  background: radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--bb-help-category-accent) 10%, transparent), transparent 12rem), var(--bb-help-category-surface-elevated);
}

.bb-help-category-panel-label {
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.bb-help-category-panel-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-help-category-panel-title {
  margin: 0;
  color: var(--bb-help-category-heading);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-help-category-panel-text {
  max-width: 46rem;
  margin: 0.5rem 0 0;
  color: var(--bb-help-category-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Article List
===================================== */
.bb-help-category-list {
  display: grid;
  min-width: 0;
}

.bb-help-category-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2.75rem;
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.375rem) clamp(1rem, 2.5vw, 1.625rem);
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: var(--bb-border-width) solid var(--bb-help-category-border-soft);
  background-color: transparent;
  transition: background-color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-category-item:last-child {
  border-bottom: 0;
}

.bb-help-category-item:hover {
  background: linear-gradient(90deg, var(--bb-help-category-surface-warm) 0%, transparent 100%);
  transform: translateX(0.125rem);
}

.bb-help-category-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: var(--bb-border-width) solid var(--bb-help-category-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-help-category-surface-soft);
  color: color-mix(in srgb, var(--bb-help-category-accent-hover) 72%, var(--bb-emphasis-color));
}

.bb-help-category-item-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-help-category-item-main {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.bb-help-category-item-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-category-surface-soft);
  color: var(--bb-help-category-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-help-category-item-title {
  display: block;
  color: var(--bb-help-category-heading);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.02em;
}

.bb-help-category-item:hover .bb-help-category-item-title {
  color: var(--bb-help-category-accent-hover);
}

.bb-help-category-item-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-help-category-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-help-category-item-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--bb-border-width) solid var(--bb-help-category-border-soft);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-help-category-surface-soft);
  color: var(--bb-help-category-heading);
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-help-category-item-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-help-category-item:hover .bb-help-category-item-arrow {
  color: var(--bb-help-category-surface);
  background-color: var(--bb-help-category-heading);
  border-color: var(--bb-help-category-heading);
  transform: translateX(0.1875rem);
}

/* =====================================
   Empty State
===================================== */
.bb-help-category-empty {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.bb-help-category-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-help-category-accent-soft);
  color: color-mix(in srgb, var(--bb-help-category-accent-hover) 76%, var(--bb-emphasis-color));
}

.bb-help-category-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-help-category-empty h2 {
  margin: 0;
  color: var(--bb-help-category-heading);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-help-category-empty p {
  max-width: 34rem;
  margin: 0.625rem auto 1.25rem;
  color: var(--bb-help-category-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-help-category-layout {
    grid-template-columns: 1fr;
  }
  .bb-help-category-sidebar {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-help-category-hero .bb-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-help-category-hero-count,
  .bb-hero-count {
    align-items: flex-start;
    min-width: 100%;
    min-height: auto;
    flex-direction: row;
    justify-content: space-between;
  }
  .bb-help-category-hero-count span,
  .bb-hero-count span {
    margin-top: 0;
  }
}
@media (max-width: 767.98px) {
  .bb-help-category-hero {
    padding-top: 2.25rem;
    padding-bottom: 3.25rem;
  }
  .bb-help-category-hero-title {
    font-size: clamp(2rem, 10vw, 2.75rem);
    letter-spacing: -0.045em;
  }
  .bb-help-category-hero-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-help-category-section {
    padding-top: 2rem;
  }
  .bb-help-category-panel {
    border-radius: var(--bb-radius-xl);
  }
  .bb-help-category-item {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  .bb-help-category-item-arrow {
    display: none;
  }
  .bb-help-category-item-icon {
    width: 2.75rem;
    height: 2.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-help-category-panel-head {
    padding: 1.125rem;
  }
  .bb-help-category-item {
    align-items: start;
    padding: 1rem;
  }
  .bb-help-category-support-card {
    border-radius: var(--bb-radius-xl);
  }
}
/* =====================================
   Bulbulustur Web - Subscription Pricing Page
   Layer: pages/web/_subscription-pricing.scss

   Purpose:
   - Subscription package / pricing comparison visual atmosphere.
   - Pricing hero, package cards, featured plan, comparison table and success markers.
   - Uses page-local tokens scoped under .bb-subscription-pricing-page.

   Theme:
   - Light / Navy / Dark safe.
   - This file consumes global theme tokens.
   - This file does not override global theme variables.

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - Subscription pricing specific decorative tokens live here.
===================================== */
/* =====================================
   Subscription Pricing Tokens
===================================== */
.bb-subscription-pricing-page {
  --bb-pricing-hero-bg:
      radial-gradient(
          circle at 88% 12%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent) 0,
          transparent 30%
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          180deg,
          var(--bb-body-bg) 0%,
          var(--bb-tertiary-bg) 100%
      );
  --bb-pricing-card-bg: var(--bb-surface-elevated);
  --bb-pricing-table-bg: var(--bb-surface-elevated);
  --bb-pricing-muted-border: color-mix(in srgb, var(--bb-border-color) 86%, var(--bb-body-bg));
  --bb-pricing-soft-border: color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-body-bg));
  --bb-pricing-featured-border: var(--bb-primary);
  --bb-pricing-featured-bg: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg));
  --bb-pricing-featured-bg-strong: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-pricing-featured-shadow: 0 1.125rem 2.625rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-pricing-badge-bg: var(--bb-dark);
  --bb-pricing-badge-color: var(--bb-white, var(--bb-color-white));
  --bb-pricing-success-soft: color-mix(in srgb, var(--bb-success) 12%, var(--bb-body-bg));
  --bb-pricing-success-text: color-mix(in srgb, var(--bb-success) 78%, var(--bb-emphasis-color));
  --bb-pricing-info-soft: color-mix(in srgb, var(--bb-info) 11%, var(--bb-body-bg));
  --bb-pricing-info-text: color-mix(in srgb, var(--bb-info) 76%, var(--bb-emphasis-color));
  --bb-pricing-warning-soft: color-mix(in srgb, var(--bb-warning) 12%, var(--bb-body-bg));
  --bb-pricing-warning-text: color-mix(in srgb, var(--bb-warning) 78%, var(--bb-emphasis-color));
  --bb-pricing-heading: var(--bb-heading-color);
  --bb-pricing-text: var(--bb-body-color);
  --bb-pricing-muted: var(--bb-secondary-color);
  --bb-pricing-subtle: var(--bb-tertiary-color);
  --bb-pricing-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-pricing-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 2%, transparent);
}

/* =====================================
   Navy Mode Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-subscription-pricing-page {
  --bb-pricing-hero-bg:
      radial-gradient(
          circle at 88% 12%,
          color-mix(in srgb, var(--bb-primary) 13%, transparent) 0,
          transparent 30%
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-primary) 6%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          180deg,
          var(--bb-body-bg) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg)) 100%
      );
  --bb-pricing-card-bg: var(--bb-surface-elevated);
  --bb-pricing-table-bg: var(--bb-surface-elevated);
  --bb-pricing-muted-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-pricing-soft-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-pricing-featured-bg: color-mix(in srgb, var(--bb-primary) 13%, transparent);
  --bb-pricing-featured-bg-strong: color-mix(in srgb, var(--bb-primary) 20%, transparent);
  --bb-pricing-featured-shadow: 0 1.125rem 2.625rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-pricing-badge-bg: color-mix(in srgb, var(--bb-emphasis-color) 86%, var(--bb-body-bg));
  --bb-pricing-badge-color: var(--bb-body-bg);
  --bb-pricing-success-soft: color-mix(in srgb, var(--bb-success) 15%, transparent);
  --bb-pricing-success-text: color-mix(in srgb, var(--bb-success) 88%, var(--bb-emphasis-color));
  --bb-pricing-info-soft: color-mix(in srgb, var(--bb-info) 14%, transparent);
  --bb-pricing-info-text: color-mix(in srgb, var(--bb-info) 88%, var(--bb-emphasis-color));
  --bb-pricing-warning-soft: color-mix(in srgb, var(--bb-warning) 15%, transparent);
  --bb-pricing-warning-text: color-mix(in srgb, var(--bb-warning) 88%, var(--bb-emphasis-color));
  --bb-pricing-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  --bb-pricing-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 18%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent);
}

/* =====================================
   Dark Mode Local Tuning
===================================== */
html[data-bs-theme=dark] .bb-subscription-pricing-page {
  --bb-pricing-hero-bg:
      radial-gradient(
          circle at 88% 12%,
          color-mix(in srgb, var(--bb-primary) 11%, transparent) 0,
          transparent 30%
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-primary) 5%, transparent) 0,
          transparent 28%
      ),
      linear-gradient(
          180deg,
          var(--bb-body-bg) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 66%, var(--bb-body-bg)) 100%
      );
  --bb-pricing-card-bg: var(--bb-surface-elevated);
  --bb-pricing-table-bg: var(--bb-surface-elevated);
  --bb-pricing-muted-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-pricing-soft-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-pricing-featured-bg: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-pricing-featured-bg-strong: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-pricing-featured-shadow: 0 1.125rem 2.625rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-pricing-badge-bg: color-mix(in srgb, var(--bb-emphasis-color) 88%, var(--bb-body-bg));
  --bb-pricing-badge-color: var(--bb-body-bg);
  --bb-pricing-success-soft: color-mix(in srgb, var(--bb-success) 14%, transparent);
  --bb-pricing-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-pricing-info-soft: color-mix(in srgb, var(--bb-info) 13%, transparent);
  --bb-pricing-info-text: color-mix(in srgb, var(--bb-info) 86%, var(--bb-emphasis-color));
  --bb-pricing-warning-soft: color-mix(in srgb, var(--bb-warning) 14%, transparent);
  --bb-pricing-warning-text: color-mix(in srgb, var(--bb-warning) 86%, var(--bb-emphasis-color));
  --bb-pricing-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 14%, transparent);
  --bb-pricing-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent);
}

/* =====================================
   Hero
===================================== */
.bb-hero.bb-pricing-hero {
  position: relative;
  overflow: hidden;
  background: var(--bb-pricing-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-pricing-hero::before,
.bb-pricing-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bb-pricing-hero::before {
  right: -8rem;
  top: -8rem;
  width: 22rem;
  height: 22rem;
  background-color: color-mix(in srgb, var(--bb-primary) 11%, transparent);
}

.bb-pricing-hero::after {
  left: -9rem;
  bottom: -10rem;
  width: 24rem;
  height: 24rem;
  background-color: color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
}

.bb-pricing-hero > .bb-container {
  position: relative;
  z-index: 2;
}

.bb-pricing-hero-inner {
  max-width: 61.25rem;
  margin: 0 auto;
  text-align: center;
}

.bb-pricing-hero-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.875rem;
  margin-bottom: 1rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  color: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-pricing-hero-title {
  max-width: 58rem;
  margin: 0 auto 1rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(2.1rem, 4.2vw, 3.75rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.045em;
}

.bb-pricing-hero-subtitle {
  max-width: 52.5rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Pricing Cards
===================================== */
.bb-pricing-section {
  background-color: var(--bb-body-bg);
}

.bb-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 2.125rem 1.5rem 1.5rem;
  border: var(--bb-border-width) solid var(--bb-pricing-muted-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-pricing-card-bg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-pricing-card:hover {
  transform: translateY(-0.5rem);
  border-color: color-mix(in srgb, var(--bb-secondary-color) 30%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-pricing-card-featured {
  border-width: 0.125rem;
  border-color: var(--bb-pricing-featured-border);
  background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--bb-primary) 10%, transparent) 0, transparent 28%), var(--bb-pricing-card-bg);
  box-shadow: var(--bb-pricing-featured-shadow);
}

.bb-pricing-badge {
  position: absolute;
  top: -0.8125rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0 0.875rem;
  transform: translateX(-50%);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-pricing-badge-bg);
  color: var(--bb-pricing-badge-color);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: var(--bb-shadow-xs);
}

.bb-pricing-card-head {
  text-align: center;
}

.bb-pricing-plan-name {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-pricing-plan-summary {
  min-height: 2.5rem;
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-price {
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.035em;
}

.bb-price span {
  margin-left: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0;
}

.bb-price-note {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-pricing-divider {
  width: 100%;
  height: var(--bb-border-width);
  margin: 1.375rem 0;
  background-color: var(--bb-pricing-soft-border);
}

.bb-pricing-features {
  flex-grow: 1;
}

.bb-pricing-features ul {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bb-pricing-features li {
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-pricing-features li strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-pricing-check {
  display: inline-flex;
  margin-right: 0.5rem;
  color: var(--bb-pricing-success-text);
  font-weight: var(--bb-fw-bold);
}

.bb-pricing-footer {
  margin-top: 1.5rem;
}

/* =====================================
   Pricing Buttons
===================================== */
.bb-pricing-btn,
.bb-compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-pricing-btn {
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
}

.bb-compare-btn {
  min-width: 8.75rem;
  min-height: 2.625rem;
  padding: 0.6875rem 1.125rem;
}

.bb-pricing-btn:hover,
.bb-compare-btn:hover {
  transform: translateY(-0.0625rem);
}

.bb-pricing-btn-free {
  border: var(--bb-border-width) solid var(--bb-border-color);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-emphasis-color);
}

.bb-pricing-btn-free:hover {
  border-color: var(--bb-border-color);
  background-color: var(--bb-secondary-bg);
  color: var(--bb-emphasis-color);
}

.bb-pricing-btn-lite {
  border: var(--bb-border-width) solid var(--bb-primary);
  background-color: var(--bb-primary);
  color: var(--bb-primary-inverse);
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 22%, transparent);
}

.bb-pricing-btn-lite:hover {
  border-color: var(--bb-primary-hover);
  background-color: var(--bb-primary-hover);
  color: var(--bb-primary-inverse);
  box-shadow: 0 0.875rem 1.75rem color-mix(in srgb, var(--bb-primary) 28%, transparent);
}

.bb-pricing-btn-pro {
  border: var(--bb-border-width) solid var(--bb-primary);
  background-color: var(--bb-pricing-card-bg);
  color: var(--bb-emphasis-color);
}

.bb-pricing-btn-pro:hover {
  border-color: var(--bb-primary);
  background-color: var(--bb-primary);
  color: var(--bb-primary-inverse);
}

/* =====================================
   Compare
===================================== */
.bb-compare-section {
  background-color: var(--bb-tertiary-bg);
}

.bb-compare-head {
  max-width: 58.75rem;
  margin: 0 auto 2.125rem;
  text-align: center;
}

.bb-compare-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.875rem;
  padding: 0 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg));
  color: color-mix(in srgb, var(--bb-primary) 76%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-compare-title {
  margin: 0 0 0.75rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-compare-subtitle {
  max-width: 52.5rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-compare-table-wrap {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-pricing-muted-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-pricing-table-bg);
  box-shadow: var(--bb-shadow-sm);
}

.bb-compare-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  background-color: var(--bb-pricing-table-bg);
}

.bb-compare-table th,
.bb-compare-table td {
  padding: 1.125rem 1rem;
  border-right: var(--bb-border-width) solid var(--bb-pricing-soft-border);
  border-bottom: var(--bb-border-width) solid var(--bb-pricing-soft-border);
  color: var(--bb-body-color);
  text-align: center;
  vertical-align: middle;
}

.bb-compare-table th:last-child,
.bb-compare-table td:last-child {
  border-right: 0;
}

.bb-compare-table thead th {
  padding-top: 1.375rem;
  padding-bottom: 1.375rem;
  background-color: var(--bb-pricing-table-bg);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-compare-table th:first-child,
.bb-compare-table td:first-child {
  width: 31%;
  background-color: var(--bb-pricing-table-bg);
  color: var(--bb-body-color);
  text-align: left;
  font-weight: var(--bb-fw-semibold);
}

.bb-compare-plan-name {
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-compare-plan-price {
  margin-bottom: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-compare-plan-period {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-col-lite {
  background-color: var(--bb-pricing-featured-bg) !important;
  border-left: 0.125rem solid var(--bb-primary) !important;
  border-right: 0.125rem solid var(--bb-primary) !important;
}

.bb-check-icon {
  color: var(--bb-pricing-success-text);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

.bb-cross-icon {
  color: var(--bb-tertiary-color);
  font-weight: var(--bb-fw-bold);
}

.bb-feature-value {
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-compare-group-row td {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-top: var(--bb-border-width) solid var(--bb-pricing-soft-border);
  background-color: var(--bb-secondary-bg) !important;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-feature-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bb-feature-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  cursor: pointer;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal);
}

.bb-feature-tooltip:hover {
  background-color: var(--bb-secondary-bg);
  color: var(--bb-emphasis-color);
}

.bb-compare-footer td {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 0;
  background-color: var(--bb-pricing-table-bg);
}

/* =====================================
   FAQ
===================================== */
.bb-faq-section {
  background-color: var(--bb-body-bg);
}

.bb-pricing-faq-wrap {
  max-width: 55rem;
  margin: 0 auto;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-pricing-hero-subtitle,
  .bb-compare-subtitle {
    font-size: var(--bb-fs-base);
  }
  .bb-pricing-card {
    padding: 2rem 1.375rem 1.375rem;
  }
}
@media (max-width: 767.98px) {
  .bb-pricing-plan-summary {
    min-height: auto;
  }
  .bb-price {
    font-size: var(--bb-fs-3xl);
  }
  .bb-compare-table th,
  .bb-compare-table td {
    padding: 0.875rem 0.75rem;
  }
  .bb-compare-btn {
    min-width: 7.5rem;
  }
}
@media (max-width: 575.98px) {
  .bb-pricing-card,
  .bb-compare-table-wrap {
    border-radius: var(--bb-radius-xl);
  }
  .bb-pricing-hero-label,
  .bb-compare-eyebrow {
    max-width: 100%;
  }
}
/* =====================================
   Account Settings List
   Hesap index / security / preferences tarzı sayfalar.
===================================== */
.bb-account-settings-card {
  overflow: hidden;
  border: 1px solid var(--bb-account-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-settings-section {
  padding: 1.375rem;
  border-bottom: 1px solid var(--bb-account-border-soft);
}

.bb-account-settings-section:last-child {
  border-bottom: 0;
}

.bb-account-settings-section-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.bb-account-settings-section-icon {
  width: 2.625rem;
  height: 42px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-account-accent-soft);
  color: var(--bb-account-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-account-settings-section-icon .material-icons,
.bb-account-settings-section-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-settings-section-head h3 {
  margin: 0 0 5px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-account-settings-section-head p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-settings-list {
  display: grid;
  gap: 10px;
}

.bb-account-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.125rem;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--bb-account-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
}

.bb-account-settings-row-content {
  min-width: 0;
}

.bb-account-settings-row-label {
  display: block;
  margin-bottom: 5px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-settings-row-value {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  word-break: break-word;
}

.bb-account-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-status-success {
  background-color: var(--bb-success-light);
  color: var(--bb-success);
}

.bb-account-status-danger {
  background-color: var(--bb-danger-light);
  color: var(--bb-danger);
}

.bb-account-settings-danger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.125rem;
  align-items: center;
  padding: 1.375rem;
  border-top: 1px solid color-mix(in srgb, var(--bb-danger) 24%, var(--bb-account-border));
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-danger) 10%, transparent) 0, transparent 30%), var(--bb-body-bg);
}

.bb-account-settings-danger h3 {
  margin: 0 0 6px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h4);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-account-settings-danger p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

@media (max-width: 767.98px) {
  .bb-account-settings-section {
    padding: 18px;
  }
  .bb-account-settings-row,
  .bb-account-settings-danger {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .bb-account-settings-row .btn,
  .bb-account-settings-danger .btn {
    width: 100%;
  }
}
/* =====================================
   Account Profile
   FormLight page
   Premium compact revision
===================================== */
.bb-account-profile-page {
  width: 100%;
}

.bb-account-profile-head {
  max-width: 46rem;
  margin-bottom: 1.75rem;
}

.bb-account-profile-chip {
  margin-bottom: 0.875rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-profile-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-profile-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-profile-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-profile-form {
  display: grid;
  gap: 1rem;
}

/* Section */
.bb-account-profile-section {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-white) 98%, transparent) 0%, var(--bb-white) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-profile-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-profile-section-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-profile-section-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-profile-section-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-profile-section-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Grid */
.bb-account-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.125rem;
}

.bb-account-profile-field {
  min-width: 0;
}

.bb-account-profile-field .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Premium input-group treatment */
.bb-account-profile-field .bb-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-profile-field .bb-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-profile-field .bb-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-profile-field .bb-input-group .form-control,
.bb-account-profile-field .bb-input-group .form-select {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-profile-field .bb-input-group .form-control:focus,
.bb-account-profile-field .bb-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-profile-field .bb-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-profile-field .bb-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

/* Make date/select less “browser-default loud” */
.bb-account-profile-field input[type=date].form-control {
  letter-spacing: 0.01em;
}

.bb-account-profile-field .form-select {
  cursor: pointer;
}

/* Actions */
.bb-account-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.bb-account-profile-submit {
  min-width: 11.25rem;
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-profile-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-profile-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 59rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-profile-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

/* Outer light card refinement for this page */
.bb-layout-light-page:has(.bb-account-profile-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-profile-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-profile-section {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-profile-actions {
    justify-content: stretch;
  }
  .bb-account-profile-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-profile-section-head {
    gap: 0.625rem;
  }
  .bb-account-profile-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
  .bb-account-profile-field .bb-input-group .form-control,
  .bb-account-profile-field .bb-input-group .form-select {
    min-height: 2.5rem;
  }
}
/* =====================================
   Bulbulustur Web - Address Form
   Create / Edit shared
===================================== */
.bb-address-form-page {
  width: 100%;
}

.bb-address-form-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-address-form-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-address-form-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-address-form-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-address-form-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-address-form-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-address-form-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-address-form-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Card */
.bb-address-form-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-address-form-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-address-form-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-address-form-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-address-form-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-address-form-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Groups */
.bb-address-form {
  display: grid;
  gap: 1.125rem;
}

.bb-address-form-group {
  padding: 0;
}

.bb-address-form-group + .bb-address-form-group {
  padding-top: 1.125rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-address-form-group-head {
  margin-bottom: 0.875rem;
}

.bb-address-form-group-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-address-form-group-text {
  max-width: 42rem;
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-address-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.125rem;
}

.bb-address-form-field {
  min-width: 0;
}

.bb-address-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-address-form-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-address-form-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-address-form-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-address-form-input-group .form-control,
.bb-address-form-input-group .form-select {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-address-form-input-group .form-control:focus,
.bb-address-form-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-address-form-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-address-form-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-address-form-textarea {
  min-height: 8.75rem;
  resize: vertical;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  box-shadow: none;
}

.bb-address-form-textarea:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-address-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Default switch */
.bb-address-form-default-card {
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-address-form-default-check {
  margin: 0;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.bb-address-form-default-check .form-check-input {
  margin: 0;
  cursor: pointer;
}

.bb-address-form-default-check .form-check-label {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  cursor: pointer;
}

/* Actions */
.bb-address-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.bb-address-form-submit {
  min-width: 12.5rem;
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-address-form-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-address-form-note {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  text-align: center;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-address-form-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 52rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-address-form-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-address-form-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-address-form-grid {
    grid-template-columns: 1fr;
  }
  .bb-address-form-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-address-form-actions {
    justify-content: stretch;
  }
  .bb-address-form-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-address-form-card-head {
    gap: 0.625rem;
  }
  .bb-address-form-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Requests Page
   İade / sipariş talep kartları.
===================================== */
.bb-account-request-list {
  display: grid;
  gap: 1.125rem;
}

.bb-account-request-card {
  overflow: hidden;
  border: 1px solid var(--bb-account-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-account-request-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-account-accent) 36%, var(--bb-account-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-request-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 18px;
  border-bottom: 1px solid var(--bb-account-border-soft);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-account-accent) 10%, transparent) 0, transparent 34%), var(--bb-tertiary-bg);
}

.bb-account-request-head-left {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.bb-account-request-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-account-accent-soft);
  color: var(--bb-account-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-account-request-icon .material-symbols-outlined,
.bb-account-request-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-request-head-left h3 {
  margin: 0 0 4px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-account-request-head-left span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
}

.bb-account-request-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 1.125rem;
  padding: 18px;
}

.bb-account-request-main {
  min-width: 0;
}

.bb-account-request-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 1rem;
}

.bb-account-request-info {
  padding: 14px 16px;
  border: 1px solid var(--bb-account-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
}

.bb-account-request-info span,
.bb-account-request-description span {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-request-info strong {
  display: block;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  word-break: break-word;
}

.bb-account-request-product {
  margin-bottom: 14px;
}

.bb-account-request-product-link {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-account-request-product-link:hover {
  color: var(--bb-link-color);
}

.bb-account-request-description {
  padding: 15px 16px;
  margin-bottom: 1rem;
  border: 1px solid var(--bb-account-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
}

.bb-account-request-description p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-request-gallery {
  padding: 14px;
  border: 1px solid var(--bb-account-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
}

.bb-account-request-gallery-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-request-gallery-head .material-symbols-outlined {
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-request-gallery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bb-account-request-gallery-item {
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid var(--bb-account-border-soft);
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-body-bg);
  display: block;
  text-decoration: none;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-account-request-gallery-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-request-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-account-request-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
}

.bb-account-request-actions .btn {
  width: 100%;
}

@media (max-width: 1199.98px) {
  .bb-account-request-card-body {
    grid-template-columns: 1fr;
  }
  .bb-account-request-actions {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .bb-account-request-actions .btn {
    width: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-account-request-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-request-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-request-actions {
    flex-direction: column;
  }
  .bb-account-request-actions .btn {
    width: 100%;
  }
  .bb-account-request-gallery-item {
    width: 82px;
    height: 82px;
  }
}
/* =====================================
   Account IBAN Page
   Kullanıcı banka hesapları / geri ödeme IBAN kartları.
===================================== */
.bb-account-iban-alert {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.875rem;
  align-items: flex-start;
  padding: 18px;
  margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--bb-warning) 28%, var(--bb-account-border));
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-warning) 12%, transparent) 0, transparent 32%), var(--bb-body-bg);
}

.bb-account-iban-alert-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-warning-light);
  color: color-mix(in srgb, var(--bb-warning) 72%, var(--bb-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-account-iban-alert-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-iban-alert-content strong {
  display: block;
  margin-bottom: 5px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-account-iban-alert-content p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-iban-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-account-iban-card {
  overflow: hidden;
  border: 1px solid var(--bb-account-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-account-iban-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-account-accent) 36%, var(--bb-account-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-iban-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--bb-account-border-soft);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-account-accent) 10%, transparent) 0, transparent 34%), var(--bb-tertiary-bg);
}

.bb-account-iban-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-account-accent-soft);
  color: var(--bb-account-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-account-iban-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-iban-card-head h3 {
  margin: 0 0 4px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-account-iban-card-head span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
}

.bb-account-iban-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 18px 8px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-iban-label .material-symbols-outlined {
  color: var(--bb-success);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-iban-box {
  margin: 0 18px 18px;
  padding: 14px 16px;
  border: 1px solid var(--bb-account-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.025em;
  word-break: break-word;
}

.bb-account-iban-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px 18px;
}

.bb-account-iban-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bb-account-iban-actions .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-iban-copy-btn.is-copied {
  border-color: var(--bb-success);
  color: var(--bb-success);
}

@media (max-width: 991.98px) {
  .bb-account-iban-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-account-iban-alert {
    grid-template-columns: 1fr;
  }
  .bb-account-iban-actions {
    flex-direction: column;
  }
  .bb-account-iban-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/* =====================================
   Account Change Mail
   FormLight page
===================================== */
.bb-account-change-mail-page {
  width: 100%;
}

.bb-account-change-mail-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-change-mail-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-change-mail-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-change-mail-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-change-mail-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-change-mail-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-change-mail-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-account-change-mail-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-change-mail-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-change-mail-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-change-mail-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-change-mail-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-change-mail-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-change-mail-form {
  display: grid;
  gap: 1rem;
}

.bb-account-change-mail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.125rem;
}

.bb-account-change-mail-field {
  min-width: 0;
}

.bb-account-change-mail-field .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Softer input-group treatment */
.bb-account-change-mail-field .bb-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-change-mail-field .bb-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-change-mail-field .bb-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-change-mail-field .bb-input-group .form-control {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-change-mail-field .bb-input-group .form-control:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-change-mail-field .bb-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-change-mail-field .bb-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

/* Note */
.bb-account-change-mail-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-change-mail-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-change-mail-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-change-mail-submit {
  min-width: 11.25rem;
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-change-mail-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-change-mail-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-change-mail-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-change-mail-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-change-mail-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-change-mail-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-change-mail-actions {
    justify-content: stretch;
  }
  .bb-account-change-mail-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-change-mail-card-head {
    gap: 0.625rem;
  }
  .bb-account-change-mail-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Change Password
   FormLight page
===================================== */
.bb-account-change-password-page {
  width: 100%;
}

.bb-account-change-password-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-change-password-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-change-password-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-change-password-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-change-password-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-change-password-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-change-password-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-account-change-password-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-change-password-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-change-password-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-change-password-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-change-password-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-change-password-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-change-password-form {
  display: grid;
  gap: 1rem;
}

.bb-account-change-password-field {
  min-width: 0;
}

.bb-account-change-password-field .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Password group */
.bb-account-password-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-password-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-password-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-password-group .form-control {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  border-right: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-password-group .form-control:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-password-group:focus-within .input-group-text,
.bb-account-password-group:focus-within .bb-account-password-toggle {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-password-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-account-password-toggle {
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
  box-shadow: none !important;
}

.bb-account-password-toggle:hover {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
}

.bb-account-password-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Password meter */
.bb-account-change-password-meter {
  margin-top: 0.625rem;
}

.bb-password-meter-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
}

.bb-password-meter-bar {
  height: 0.375rem;
  background-color: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-pill);
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.bb-password-meter-caption {
  margin-top: 0.45rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-password-meter.is-weak .bb-password-meter-bar:nth-child(1) {
  background-color: var(--bb-danger);
}

.bb-password-meter.is-medium .bb-password-meter-bar:nth-child(-n+2) {
  background-color: var(--bb-warning);
}

.bb-password-meter.is-strong .bb-password-meter-bar:nth-child(-n+3) {
  background-color: var(--bb-primary);
}

.bb-password-meter.is-perfect .bb-password-meter-bar {
  background-color: var(--bb-success);
}

/* Rules */
.bb-account-change-password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-account-change-password-rule {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.375rem;
  padding: 0.5rem 0.625rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-account-change-password-rule .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 70%, transparent);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-change-password-rule.is-valid {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-success) 18%, var(--bb-border-color));
}

.bb-account-change-password-rule.is-valid .material-symbols-outlined {
  color: var(--bb-success);
}

/* Note */
.bb-account-change-password-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-change-password-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-change-password-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-change-password-submit {
  min-width: 11.25rem;
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-change-password-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-change-password-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 46rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-change-password-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-change-password-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-change-password-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-change-password-rules {
    grid-template-columns: 1fr;
  }
  .bb-account-change-password-actions {
    justify-content: stretch;
  }
  .bb-account-change-password-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-change-password-card-head {
    gap: 0.625rem;
  }
  .bb-account-change-password-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Contact Preferences
   FormLight page
===================================== */
.bb-account-contact-preferences-page {
  width: 100%;
}

.bb-account-contact-preferences-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-contact-preferences-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-contact-preferences-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-contact-preferences-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-contact-preferences-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-contact-preferences-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-contact-preferences-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-account-contact-preferences-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-contact-preferences-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-contact-preferences-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-contact-preferences-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-contact-preferences-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-contact-preferences-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-contact-preferences-form {
  display: grid;
  gap: 1rem;
}

/* Preference list */
.bb-account-contact-preferences-list {
  display: grid;
  gap: 0.75rem;
}

.bb-account-contact-preference-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-contact-preference-copy {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bb-account-contact-preference-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-contact-preference-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-contact-preference-copy h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-contact-preference-copy p {
  max-width: 33rem;
  margin: 0.3125rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-contact-preference-control {
  min-width: 7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bb-account-contact-preference-switch {
  min-height: 2rem;
  margin: 0;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bb-account-contact-preference-switch .form-check-input {
  margin: 0;
  cursor: pointer;
}

.bb-account-contact-preference-switch .form-check-label {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  cursor: pointer;
}

/* Note */
.bb-account-contact-preferences-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-contact-preferences-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-contact-preferences-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-contact-preferences-submit {
  min-width: 11.25rem;
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-contact-preferences-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-contact-preferences-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-contact-preferences-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-contact-preferences-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-contact-preference-item {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .bb-account-contact-preference-control {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }
  .bb-account-contact-preferences-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-contact-preferences-actions {
    justify-content: stretch;
  }
  .bb-account-contact-preferences-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-contact-preferences-card-head {
    gap: 0.625rem;
  }
  .bb-account-contact-preferences-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
  .bb-account-contact-preference-copy {
    gap: 0.625rem;
  }
  .bb-account-contact-preference-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Login Activities
   FormLight page
===================================== */
.bb-account-login-activities-page {
  width: 100%;
}

.bb-account-login-activities-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-login-activities-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-login-activities-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-login-activities-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-login-activities-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-login-activities-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-login-activities-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-login-activities-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Card */
.bb-account-login-activities-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-login-activities-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-login-activities-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-login-activities-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-login-activities-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-login-activities-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* List */
.bb-account-login-activities-list {
  display: grid;
  gap: 0.75rem;
}

.bb-account-login-activity-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) minmax(11rem, auto);
  gap: 0.875rem;
  align-items: center;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-login-activity-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-login-activity-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-login-activity-main {
  min-width: 0;
}

.bb-account-login-activity-main h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-login-activity-main span {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-login-activity-device {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-login-activity-device .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-login-activity-device strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

/* Pagination */
.bb-account-login-activities-pagination {
  margin-top: 1.25rem;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-login-activities-page-notify {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-account-login-activities-pagination-items {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-account-login-activities-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-login-activities-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-login-activities-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-login-activities-empty h2 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-login-activities-empty p {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-login-activities-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 54rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-login-activities-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-login-activities-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-login-activities-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-login-activity-item {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
  }
  .bb-account-login-activity-device {
    grid-column: 1/-1;
    justify-content: flex-start;
    width: 100%;
    white-space: normal;
  }
  .bb-account-login-activity-device strong {
    white-space: normal;
  }
  .bb-account-login-activities-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-account-login-activities-page-notify {
    text-align: center;
  }
  .bb-account-login-activities-pagination-items {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-account-login-activities-card-head {
    gap: 0.625rem;
  }
  .bb-account-login-activities-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Disable
   FormLight page
===================================== */
.bb-account-disable-page {
  width: 100%;
}

.bb-account-disable-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-disable-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-disable-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-disable-chip {
  margin-bottom: 0.875rem;
  color: var(--bb-warning) !important;
  background-color: color-mix(in srgb, var(--bb-warning) 14%, transparent) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 20%, transparent);
}

.bb-account-disable-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-disable-title {
  max-width: 42rem;
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-disable-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-disable-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-disable-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-warning);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Warning */
.bb-account-disable-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--bb-warning) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
}

.bb-account-disable-warning-icon {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-warning) 72%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 14%, var(--bb-white));
  border-radius: var(--bb-radius);
}

.bb-account-disable-warning-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-disable-warning h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-disable-warning p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Card */
.bb-account-disable-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-disable-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-disable-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-danger);
  background-color: color-mix(in srgb, var(--bb-danger) 7%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-disable-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-disable-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-disable-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-disable-form {
  display: grid;
  gap: 1rem;
}

.bb-account-disable-field {
  min-width: 0;
}

.bb-account-disable-field .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Input group */
.bb-account-disable-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-danger) 70%, var(--bb-border-color));
}

.bb-account-disable-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-disable-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-disable-input-group .form-select {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-disable-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-danger) 70%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-disable-input-group:focus-within .input-group-text {
  color: var(--bb-danger);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-danger) 70%, var(--bb-border-color));
}

.bb-account-disable-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-danger);
}

/* Confirm */
.bb-account-disable-confirm {
  padding: 0.875rem;
  background-color: color-mix(in srgb, var(--bb-danger) 5%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-disable-confirm-check {
  margin: 0;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.bb-account-disable-confirm-check .form-check-input {
  margin: 0.125rem 0 0;
  cursor: pointer;
}

.bb-account-disable-confirm-check .form-check-label {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  cursor: pointer;
}

/* Actions */
.bb-account-disable-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.bb-account-disable-cancel,
.bb-account-disable-submit {
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-disable-submit {
  min-width: 13.5rem;
}

.bb-account-disable-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-disable-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 50rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-disable-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-disable-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-disable-warning,
  .bb-account-disable-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-disable-actions {
    flex-direction: column-reverse;
  }
  .bb-account-disable-cancel,
  .bb-account-disable-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-disable-card-head,
  .bb-account-disable-warning {
    gap: 0.625rem;
  }
  .bb-account-disable-card-icon,
  .bb-account-disable-warning-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
.bb-account-favorites-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-favorites-chip .material-symbols-outlined,
.bb-account-favorites-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-favorites-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-favorites-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-favorites-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-favorites-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-favorites-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-favorites-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-favorites-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Tabs */
.bb-account-favorites-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.375rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-favorites-tabs .nav-item {
  flex: 1 1 0;
}

.bb-account-favorites-tabs .nav-link {
  width: 100%;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  color: var(--bb-secondary-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-favorites-tabs .nav-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-favorites-tabs .nav-link.active {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-favorites-tab-count {
  min-width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-favorites-tab-content {
  min-width: 0;
}

/* Grid */
.bb-account-favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Favorite card */
.bb-account-favorite-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-favorite-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-favorite-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  text-decoration: none !important;
}

.bb-account-favorite-media img {
  width: 100%;
  height: 100%;
  max-width: 11rem;
  max-height: 11rem;
  display: block;
  object-fit: contain;
  transition: transform 0.24s ease;
}

.bb-account-favorite-card:hover .bb-account-favorite-media img {
  transform: scale(1.035);
}

.bb-account-favorite-market-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 13%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-favorite-market-badge--b2b {
  color: color-mix(in srgb, var(--bb-info) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-info) 8%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-info) 13%, var(--bb-border-color));
}

.bb-account-favorite-body {
  flex: 1 1 auto;
  display: grid;
  gap: 0.875rem;
  padding: 0.95rem;
}

.bb-account-favorite-copy h3 {
  margin: 0;
}

.bb-account-favorite-copy h3 a {
  display: -webkit-box;
  min-height: 2.75rem;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-favorite-copy h3 a:hover {
  color: var(--bb-primary);
}

.bb-account-favorite-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-account-favorite-date .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-favorite-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-favorite-price span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-account-favorite-price strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-favorite-price--muted strong {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-account-favorite-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.bb-account-favorite-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-favorite-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-favorites-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-favorites-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-favorites-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-favorites-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-favorites-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-account-favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-account-favorites-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-favorites-tabs {
    flex-direction: column;
  }
  .bb-account-favorites-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-favorite-media {
    aspect-ratio: 16/10;
  }
  .bb-account-favorite-media img {
    max-width: 13rem;
    max-height: 13rem;
  }
  .bb-account-favorite-actions {
    grid-template-columns: 1fr;
  }
  .bb-account-favorite-action-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-favorite-media {
    aspect-ratio: 16/11;
  }
}
.bb-account-followed-suppliers-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-followed-suppliers-chip .material-symbols-outlined,
.bb-account-followed-suppliers-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-followed-suppliers-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-followed-suppliers-text {
  max-width: 44rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-followed-suppliers-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-followed-suppliers-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-followed-suppliers-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-followed-suppliers-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-followed-suppliers-panel-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Grid */
.bb-account-followed-suppliers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-account-followed-supplier-card {
  min-width: 0;
}

.bb-account-followed-supplier-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit !important;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-followed-supplier-link:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-followed-supplier-logo {
  width: 100%;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-followed-supplier-logo img {
  width: 100%;
  height: 100%;
  max-width: 12rem;
  max-height: 7rem;
  display: block;
  object-fit: contain;
}

.bb-account-followed-supplier-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0.95rem;
}

.bb-account-followed-supplier-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-followed-supplier-body h3 {
  display: -webkit-box;
  min-height: 2.625rem;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-followed-supplier-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: auto;
  padding-top: 0.875rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-followed-supplier-action .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
  transition: transform 0.18s ease;
}

.bb-account-followed-supplier-link:hover .bb-account-followed-supplier-action .material-symbols-outlined {
  transform: translateX(0.125rem);
}

/* Empty */
.bb-account-followed-suppliers-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-followed-suppliers-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-followed-suppliers-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-followed-suppliers-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-followed-suppliers-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-account-followed-suppliers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-account-followed-suppliers-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-followed-suppliers-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-followed-supplier-logo {
    aspect-ratio: 16/8;
  }
}
@media (max-width: 575.98px) {
  .bb-account-followed-supplier-logo {
    aspect-ratio: 16/9;
  }
}
.bb-account-rfq-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-rfq-chip .material-symbols-outlined,
.bb-account-rfq-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-rfq-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-rfq-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-rfq-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-rfq-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-rfq-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-rfq-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-rfq-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* List */
.bb-account-rfq-list {
  display: grid;
  gap: 0.875rem;
}

.bb-account-rfq-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  padding: 0.95rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-rfq-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-rfq-card-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-account-rfq-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-rfq-card-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy meta" "actions actions";
  gap: 0.875rem 1rem;
}

.bb-account-rfq-card-copy {
  grid-area: copy;
  min-width: 0;
}

.bb-account-rfq-card-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-rfq-card-copy h3 {
  margin: 0;
}

.bb-account-rfq-card-copy h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-rfq-card-copy h3 a:hover {
  color: var(--bb-primary);
}

.bb-account-rfq-card-copy p {
  max-width: 38rem;
  margin: 0.4rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-rfq-card-meta {
  grid-area: meta;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bb-account-rfq-card-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-rfq-card-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-top: 0.875rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-rfq-action-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-rfq-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-rfq-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-rfq-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-rfq-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-rfq-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-rfq-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-rfq-card-main {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "meta" "actions";
  }
  .bb-account-rfq-card-meta {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    white-space: normal;
  }
}
@media (max-width: 767.98px) {
  .bb-account-rfq-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-rfq-card {
    grid-template-columns: 1fr;
  }
  .bb-account-rfq-card-actions {
    justify-content: stretch;
    flex-direction: column;
  }
  .bb-account-rfq-action-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-rfq-card-icon {
    width: 3rem;
    height: 3rem;
  }
}
.bb-account-alarms-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-alarms-chip .material-symbols-outlined,
.bb-account-alarms-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-alarms-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-alarms-text {
  max-width: 44rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-alarms-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-alarms-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-alarms-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-alarms-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-alarms-panel-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* List */
.bb-account-alarms-list {
  display: grid;
  gap: 0.875rem;
}

.bb-account-alarm-card {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-alarm-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-alarm-media {
  min-height: 9.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border-right: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  text-decoration: none !important;
}

.bb-account-alarm-media img {
  width: 100%;
  height: 100%;
  max-width: 8rem;
  max-height: 8rem;
  display: block;
  object-fit: contain;
}

.bb-account-alarm-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy meta" "actions actions";
  gap: 0.875rem 1rem;
  align-items: start;
  padding: 1rem;
}

.bb-account-alarm-copy {
  grid-area: copy;
  min-width: 0;
}

.bb-account-alarm-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-alarm-copy h3 {
  margin: 0;
}

.bb-account-alarm-copy h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-alarm-copy h3 a:hover {
  color: var(--bb-primary);
}

.bb-account-alarm-meta {
  grid-area: meta;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bb-account-alarm-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-alarm-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-top: 0.875rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-alarm-detail,
.bb-account-alarm-delete {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-alarm-detail .material-symbols-outlined,
.bb-account-alarm-delete .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-alarms-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-alarms-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-alarms-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-alarms-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-alarms-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-alarm-body {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "meta" "actions";
  }
  .bb-account-alarm-meta {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    white-space: normal;
  }
}
@media (max-width: 767.98px) {
  .bb-account-alarms-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-alarm-card {
    grid-template-columns: 1fr;
  }
  .bb-account-alarm-media {
    min-height: 13rem;
    border-right: 0;
    border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
  .bb-account-alarm-media img {
    max-width: 12rem;
    max-height: 12rem;
  }
  .bb-account-alarm-actions {
    justify-content: stretch;
    flex-direction: column;
  }
  .bb-account-alarm-detail,
  .bb-account-alarm-delete {
    justify-content: center;
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-alarms-shell-section {
    padding-bottom: 2.25rem;
  }
}
.bb-account-reviews-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-reviews-chip .material-symbols-outlined,
.bb-account-reviews-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-reviews-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-reviews-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-reviews-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-reviews-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-reviews-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-reviews-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-reviews-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Tabs */
.bb-account-reviews-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.375rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-reviews-tabs .nav-item {
  flex: 1 1 0;
}

.bb-account-reviews-tabs .nav-link {
  width: 100%;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  color: var(--bb-secondary-color);
  border: 0;
  border-radius: var(--bb-radius);
  background-color: transparent;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-reviews-tabs .nav-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-reviews-tabs .nav-link.active {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-reviews-tab-count {
  min-width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-reviews-tab-content {
  min-width: 0;
}

/* Review list */
.bb-account-reviews-list {
  display: grid;
  gap: 0.875rem;
}

.bb-account-review-card {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: stretch;
  padding: 0.875rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-review-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-review-media {
  width: 6.25rem;
  min-height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-review-media--store {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-info) 8%, transparent), transparent 34%), var(--bb-tertiary-bg);
}

.bb-account-review-media--company {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-coal-300) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
}

.bb-account-review-media img {
  width: 100%;
  height: 100%;
  max-width: 5.25rem;
  max-height: 5.25rem;
  display: block;
  object-fit: contain;
}

.bb-account-review-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: start;
}

.bb-account-review-copy {
  min-width: 0;
}

.bb-account-review-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-review-copy h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

.bb-account-review-copy p {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  overflow-wrap: anywhere;
}

.bb-account-review-meta {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bb-account-review-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-reviews-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-reviews-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-reviews-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-reviews-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-reviews-empty p {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-review-body {
    grid-template-columns: 1fr;
  }
  .bb-account-review-meta {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    white-space: normal;
  }
}
@media (max-width: 767.98px) {
  .bb-account-reviews-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-reviews-tabs {
    flex-direction: column;
  }
  .bb-account-review-card {
    grid-template-columns: 1fr;
  }
  .bb-account-review-media {
    width: 100%;
    min-height: 10rem;
  }
  .bb-account-review-media img {
    max-width: 9rem;
    max-height: 9rem;
  }
}
.bb-account-followed-stores-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-followed-stores-chip .material-symbols-outlined,
.bb-account-followed-stores-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-followed-stores-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-followed-stores-text {
  max-width: 44rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-followed-stores-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-followed-stores-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-followed-stores-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-followed-stores-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-followed-stores-panel-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Grid */
.bb-account-followed-stores-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-account-followed-store-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-followed-store-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-followed-store-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  color: inherit !important;
  text-decoration: none !important;
}

.bb-account-followed-store-logo {
  width: 100%;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-followed-store-logo img {
  width: 100%;
  height: 100%;
  max-width: 12rem;
  max-height: 7rem;
  display: block;
  object-fit: contain;
}

.bb-account-followed-store-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0.95rem;
}

.bb-account-followed-store-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-followed-store-body h3 {
  display: -webkit-box;
  min-height: 2.625rem;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-followed-store-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: auto;
  padding-top: 0.875rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-followed-store-action .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
  transition: transform 0.18s ease;
}

.bb-account-followed-store-link:hover .bb-account-followed-store-action .material-symbols-outlined {
  transform: translateX(0.125rem);
}

.bb-account-followed-store-actions {
  padding: 0 0.95rem 0.95rem;
}

.bb-account-followed-store-remove {
  width: 100%;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-followed-store-remove .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-followed-stores-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-followed-stores-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-followed-stores-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-followed-stores-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-followed-stores-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-account-followed-stores-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-account-followed-stores-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-followed-stores-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-followed-store-logo {
    aspect-ratio: 16/8;
  }
  .bb-account-followed-store-remove {
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-followed-store-logo {
    aspect-ratio: 16/9;
  }
}
.bb-account-coupons-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-coupons-chip .material-symbols-outlined,
.bb-account-coupons-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-coupons-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-coupons-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-coupons-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-coupons-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-coupons-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-coupons-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-coupons-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Coupon grid */
.bb-account-coupons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Coupon card */
.bb-account-coupon-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-coupon-card::before,
.bb-account-coupon-card::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: 50%;
  transform: translateY(-50%);
}

.bb-account-coupon-card::before {
  left: -0.625rem;
}

.bb-account-coupon-card::after {
  right: -0.625rem;
}

.bb-account-coupon-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-coupon-ribbon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-account-coupon-ribbon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-coupon-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding-right: 3.25rem;
}

.bb-account-coupon-code-wrap {
  min-width: 0;
}

.bb-account-coupon-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-coupon-code {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.bb-account-coupon-amount {
  min-width: 6rem;
  display: grid;
  gap: 0.25rem;
  text-align: right;
}

.bb-account-coupon-amount span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-coupon-amount strong {
  color: var(--bb-primary);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
}

.bb-account-coupon-divider {
  height: 1px;
  border-top: 1px dashed color-mix(in srgb, var(--bb-border-color) 92%, transparent);
}

.bb-account-coupon-details {
  display: grid;
  gap: 0.75rem;
}

.bb-account-coupon-detail {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-coupon-detail-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-account-coupon-detail-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-coupon-detail span:not(.material-symbols-outlined) {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-coupon-detail strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bb-account-coupon-footer {
  display: flex;
  justify-content: flex-end;
}

.bb-account-coupon-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-coupon-status .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-coupon-status.is-waiting {
  color: color-mix(in srgb, var(--bb-warning) 74%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 10%, var(--bb-white));
}

.bb-account-coupon-status.is-used {
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
}

.bb-account-coupon-status.is-cancelled {
  color: var(--bb-danger);
  background-color: color-mix(in srgb, var(--bb-danger) 8%, var(--bb-white));
}

.bb-account-coupon-status.is-deleted {
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

/* Empty */
.bb-account-coupons-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-coupons-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-coupons-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-coupons-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-coupons-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-account-coupons-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-account-coupons-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-coupon-main {
    grid-template-columns: 1fr;
    padding-right: 3.25rem;
  }
  .bb-account-coupon-amount {
    text-align: left;
  }
  .bb-account-coupon-footer {
    justify-content: flex-start;
  }
}
@media (max-width: 575.98px) {
  .bb-account-coupon-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-coupon-ribbon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.bb-account-company-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-company-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-company-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-company-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-company-panel {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Summary */
.bb-account-company-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--bb-white);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 32%, transparent), transparent 34%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--bb-warning) 14%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 86%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border-radius: var(--bb-radius-xl);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-company-summary-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.bb-account-company-summary-icon {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-lg);
  backdrop-filter: blur(0.625rem);
}

.bb-account-company-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-company-summary-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-warning);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-account-company-summary h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.bb-account-company-summary p {
  margin: 0.25rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-company-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.bb-account-company-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-company-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Stats */
.bb-account-company-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-account-company-stat-card {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-company-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-company-stat-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-company-stat-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-company-stat-card strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Info cards */
.bb-account-company-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bb-account-company-info-card {
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-company-info-card--wide {
  grid-column: 1/-1;
}

.bb-account-company-info-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-company-info-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-company-info-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-company-info-card-head h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-company-info-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-company-info-list {
  display: grid;
}

.bb-account-company-info-row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-company-info-row:last-child {
  border-bottom: 0;
}

.bb-account-company-info-row span,
.bb-account-company-info-row strong {
  padding: 0.875rem 1rem;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-company-info-row span {
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-right: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  font-weight: var(--bb-fw-bold);
}

.bb-account-company-info-row strong {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  font-weight: var(--bb-fw-bold);
  overflow-wrap: anywhere;
}

.bb-account-company-info-row strong a {
  color: var(--bb-primary);
  text-decoration: none !important;
}

.bb-account-company-info-row strong a:hover {
  text-decoration: underline !important;
}

/* Empty */
.bb-account-company-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-company-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-company-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-company-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-company-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-account-company-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-company-summary-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 991.98px) {
  .bb-account-company-stat-grid,
  .bb-account-company-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-company-info-card--wide {
    grid-column: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-account-company-panel,
  .bb-account-company-summary {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-company-summary-actions {
    width: 100%;
    flex-direction: column;
  }
  .bb-account-company-action-btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--bb-radius);
  }
  .bb-account-company-info-row {
    grid-template-columns: 1fr;
  }
  .bb-account-company-info-row span {
    border-right: 0;
    border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
}
@media (max-width: 575.98px) {
  .bb-account-company-summary-copy {
    align-items: flex-start;
  }
}
.bb-account-subscription-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-subscription-chip .material-symbols-outlined,
.bb-account-subscription-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-subscription-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-subscription-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-subscription-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-subscription-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-subscription-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-subscription-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-subscription-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-subscription-new-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-subscription-new-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Grid */
.bb-account-subscription-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-account-subscription-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 36%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-subscription-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-subscription-card::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  top: -3.5rem;
  width: 8rem;
  height: 8rem;
  background-color: color-mix(in srgb, var(--bb-primary) 6%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-account-subscription-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.bb-account-subscription-card-icon {
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-account-subscription-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-subscription-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-account-subscription-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.875rem;
}

.bb-account-subscription-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-subscription-card-body h3 {
  margin: 0;
}

.bb-account-subscription-card-body h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-subscription-card-body h3 a:hover {
  color: var(--bb-primary);
}

.bb-account-subscription-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-subscription-price span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-subscription-price strong {
  color: var(--bb-primary);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  white-space: nowrap;
}

/* Period */
.bb-account-subscription-period {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-account-subscription-period-item {
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-subscription-period-item > .material-symbols-outlined {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-subscription-period-item span:not(.material-symbols-outlined) {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-subscription-period-item strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bb-account-subscription-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.bb-account-subscription-detail-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-subscription-detail-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-subscription-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-subscription-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-subscription-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-subscription-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-subscription-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-account-subscription-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-account-subscription-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-account-subscription-panel,
  .bb-account-subscription-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-subscription-new-btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--bb-radius);
  }
  .bb-account-subscription-period {
    grid-template-columns: 1fr;
  }
  .bb-account-subscription-price {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-subscription-card-footer {
    justify-content: stretch;
  }
  .bb-account-subscription-detail-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-subscription-card-top {
    align-items: flex-start;
    flex-direction: column;
  }
}
.bb-account-rfq-detail-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-rfq-detail-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-rfq-detail-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-rfq-detail-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-rfq-detail-panel {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Summary */
.bb-account-rfq-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--bb-white);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 32%, transparent), transparent 34%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--bb-warning) 14%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 86%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-rfq-detail-summary-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.bb-account-rfq-detail-summary-icon {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-lg);
  backdrop-filter: blur(0.625rem);
}

.bb-account-rfq-detail-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-rfq-detail-summary-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-warning);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-account-rfq-detail-summary h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.bb-account-rfq-detail-summary p {
  margin: 0.25rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-rfq-detail-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.bb-account-rfq-detail-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-rfq-detail-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Stats */
.bb-account-rfq-detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-account-rfq-detail-stat-card {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-rfq-detail-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-rfq-detail-stat-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-rfq-detail-stat-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-rfq-detail-stat-card strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Detail cards */
.bb-account-rfq-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bb-account-rfq-detail-card {
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-rfq-detail-card--wide {
  grid-column: 1/-1;
}

.bb-account-rfq-detail-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-rfq-detail-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-rfq-detail-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-rfq-detail-card-head h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-rfq-detail-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Description */
.bb-account-rfq-detail-description {
  display: grid;
}

.bb-account-rfq-detail-description-main,
.bb-account-rfq-detail-description-text {
  display: grid;
  gap: 0.375rem;
  padding: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-rfq-detail-description-main:last-child,
.bb-account-rfq-detail-description-text:last-child {
  border-bottom: 0;
}

.bb-account-rfq-detail-description-main span,
.bb-account-rfq-detail-description-text span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-rfq-detail-description-main strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-account-rfq-detail-description-text p {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  overflow-wrap: anywhere;
}

/* Info list */
.bb-account-rfq-detail-info-list {
  display: grid;
}

.bb-account-rfq-detail-info-row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.2fr);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-rfq-detail-info-row:last-child {
  border-bottom: 0;
}

.bb-account-rfq-detail-info-row span,
.bb-account-rfq-detail-info-row strong {
  padding: 0.875rem 1rem;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-rfq-detail-info-row span {
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-right: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  font-weight: var(--bb-fw-bold);
}

.bb-account-rfq-detail-info-row strong {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  font-weight: var(--bb-fw-bold);
  overflow-wrap: anywhere;
}

/* Empty */
.bb-account-rfq-detail-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-rfq-detail-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-rfq-detail-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-rfq-detail-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-rfq-detail-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-account-rfq-detail-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-rfq-detail-summary-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 991.98px) {
  .bb-account-rfq-detail-stat-grid,
  .bb-account-rfq-detail-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-rfq-detail-card--wide {
    grid-column: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-account-rfq-detail-panel,
  .bb-account-rfq-detail-summary {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-rfq-detail-summary-actions {
    width: 100%;
    flex-direction: column;
  }
  .bb-account-rfq-detail-action-btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--bb-radius);
  }
  .bb-account-rfq-detail-info-row {
    grid-template-columns: 1fr;
  }
  .bb-account-rfq-detail-info-row span {
    border-right: 0;
    border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
}
@media (max-width: 575.98px) {
  .bb-account-rfq-detail-summary-copy {
    align-items: flex-start;
  }
}
/* =====================================
   Account Bank Account Form
   FormLight page
===================================== */
.bb-bank-account-form-page {
  width: 100%;
}

.bb-bank-account-form-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-bank-account-form-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-bank-account-form-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-bank-account-form-head {
  max-width: 42rem;
  margin-bottom: 1.5rem;
}

.bb-bank-account-form-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-bank-account-form-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-bank-account-form-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-bank-account-form-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-bank-account-form-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-bank-account-form-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-bank-account-form-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-bank-account-form-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-bank-account-form-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-bank-account-form-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-bank-account-form-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-bank-account-form-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-bank-account-form {
  display: grid;
  gap: 1rem;
}

.bb-bank-account-form-group {
  min-width: 0;
}

.bb-bank-account-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-bank-account-form-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-bank-account-form-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-bank-account-form-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-bank-account-form-input-group .form-control {
  min-height: 2.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.03em;
  box-shadow: none;
  text-transform: uppercase;
}

.bb-bank-account-form-input-group .form-control:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-bank-account-form-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-bank-account-form-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-bank-account-form-hint {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-bank-account-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Warning */
.bb-bank-account-form-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  color: var(--bb-secondary-color);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-bank-account-form-warning > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-bank-account-form-warning strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-bank-account-form-warning p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Actions */
.bb-bank-account-form-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-bank-account-form-submit {
  min-width: 12rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-bank-account-form-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-bank-account-form-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 42rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-bank-account-form-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-bank-account-form-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-bank-account-form-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-bank-account-form-actions {
    justify-content: stretch;
  }
  .bb-bank-account-form-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-bank-account-form-card-head {
    gap: 0.625rem;
  }
  .bb-bank-account-form-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
  .bb-bank-account-form-warning {
    align-items: flex-start;
  }
}
.bb-account-subscription-detail-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-subscription-detail-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-subscription-detail-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-subscription-detail-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-subscription-detail-panel {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Summary */
.bb-account-subscription-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--bb-white);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 32%, transparent), transparent 34%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--bb-warning) 14%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 86%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-subscription-detail-summary-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.bb-account-subscription-detail-summary-icon {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-lg);
  backdrop-filter: blur(0.625rem);
}

.bb-account-subscription-detail-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-subscription-detail-summary-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-warning);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-account-subscription-detail-summary h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.bb-account-subscription-detail-summary p {
  margin: 0.25rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-subscription-detail-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.bb-account-subscription-detail-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-subscription-detail-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Stats */
.bb-account-subscription-detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-account-subscription-detail-stat-card {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-subscription-detail-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-subscription-detail-stat-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-subscription-detail-stat-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-subscription-detail-stat-card strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Detail card */
.bb-account-subscription-detail-card {
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-subscription-detail-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-subscription-detail-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-subscription-detail-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-subscription-detail-card-head h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-subscription-detail-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-subscription-detail-info-list {
  display: grid;
}

.bb-account-subscription-detail-info-row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-subscription-detail-info-row:last-child {
  border-bottom: 0;
}

.bb-account-subscription-detail-info-row span,
.bb-account-subscription-detail-info-row strong {
  padding: 0.875rem 1rem;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-subscription-detail-info-row span {
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-right: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  font-weight: var(--bb-fw-bold);
}

.bb-account-subscription-detail-info-row strong {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  font-weight: var(--bb-fw-bold);
  overflow-wrap: anywhere;
}

.bb-account-subscription-detail-price {
  color: var(--bb-primary) !important;
  font-size: var(--bb-fs-base) !important;
}

/* Empty */
.bb-account-subscription-detail-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-subscription-detail-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-subscription-detail-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-subscription-detail-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-subscription-detail-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-account-subscription-detail-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-subscription-detail-summary-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 991.98px) {
  .bb-account-subscription-detail-stat-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-account-subscription-detail-panel,
  .bb-account-subscription-detail-summary {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-subscription-detail-summary-actions {
    width: 100%;
  }
  .bb-account-subscription-detail-action-btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--bb-radius);
  }
  .bb-account-subscription-detail-info-row {
    grid-template-columns: 1fr;
  }
  .bb-account-subscription-detail-info-row span {
    border-right: 0;
    border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
}
@media (max-width: 575.98px) {
  .bb-account-subscription-detail-summary-copy {
    align-items: flex-start;
  }
}
.bb-account-rfq-offers-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-rfq-offers-chip .material-symbols-outlined,
.bb-account-rfq-offers-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-rfq-offers-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-rfq-offers-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-rfq-offers-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-rfq-offers-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-rfq-offers-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-rfq-offers-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-rfq-offers-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-rfq-offers-back-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-rfq-offers-back-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Offer list */
.bb-account-rfq-offers-list {
  display: grid;
  gap: 0.875rem;
}

.bb-account-rfq-offer-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  padding: 0.95rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-rfq-offer-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-rfq-offer-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-account-rfq-offer-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-rfq-offer-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy meta" "actions actions";
  gap: 0.875rem 1rem;
}

.bb-account-rfq-offer-copy {
  grid-area: copy;
  min-width: 0;
}

.bb-account-rfq-offer-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-rfq-offer-copy h3 {
  margin: 0;
}

.bb-account-rfq-offer-copy h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-rfq-offer-copy h3 a:hover {
  color: var(--bb-primary);
}

.bb-account-rfq-offer-copy p {
  max-width: 42rem;
  margin: 0.4rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-rfq-offer-meta {
  grid-area: meta;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bb-account-rfq-offer-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-rfq-offer-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-top: 0.875rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-rfq-offer-action-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-rfq-offer-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-rfq-offers-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-rfq-offers-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-rfq-offers-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-rfq-offers-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-rfq-offers-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-rfq-offers-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-rfq-offer-main {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "meta" "actions";
  }
  .bb-account-rfq-offer-meta {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    white-space: normal;
  }
}
@media (max-width: 767.98px) {
  .bb-account-rfq-offers-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-rfq-offer-card {
    grid-template-columns: 1fr;
  }
  .bb-account-rfq-offer-actions {
    justify-content: stretch;
    flex-direction: column;
  }
  .bb-account-rfq-offer-action-btn,
  .bb-account-rfq-offers-back-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-rfq-offer-icon {
    width: 3rem;
    height: 3rem;
  }
}
.bb-company-b2b-info-chip,
.bb-company-b2b-info-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-company-b2b-info-chip .material-symbols-outlined,
.bb-company-b2b-info-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-company-b2b-info-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-company-b2b-info-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-company-b2b-info-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-company-b2b-info-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-company-b2b-info-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-company-b2b-info-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Summary */
.bb-company-b2b-info-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-company-b2b-info-summary-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  padding: 1rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-company-b2b-info-summary-card-main {
  grid-column: 1/-1;
}

.bb-company-b2b-info-summary-icon {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-company-b2b-info-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-company-b2b-info-summary-copy {
  min-width: 0;
}

.bb-company-b2b-info-summary-copy span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  line-height: var(--bb-line-height-heading);
  text-transform: uppercase;
}

.bb-company-b2b-info-summary-copy strong {
  display: block;
  margin-top: 0.375rem;
  overflow-wrap: anywhere;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-company-b2b-info-status {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.6875rem;
  color: color-mix(in srgb, var(--bb-warning) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 12%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* Action card */
.bb-company-b2b-info-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-company-b2b-info-action-copy {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.bb-company-b2b-info-action-icon {
  width: 2.875rem;
  height: 2.875rem;
  min-width: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
}

.bb-company-b2b-info-action-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-company-b2b-info-action-copy h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-company-b2b-info-action-copy p {
  max-width: 42rem;
  margin: 0.3125rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-company-b2b-info-panel-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  padding-right: 1.125rem;
  padding-left: 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-company-b2b-info-panel-link .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-company-b2b-info-action-card {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-company-b2b-info-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-company-b2b-info-summary {
    grid-template-columns: 1fr;
  }
  .bb-company-b2b-info-summary-card-main {
    grid-column: auto;
  }
  .bb-company-b2b-info-panel-link {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-company-b2b-info-summary-card,
  .bb-company-b2b-info-action-card {
    padding: 0.875rem;
  }
  .bb-company-b2b-info-summary-icon,
  .bb-company-b2b-info-action-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
  }
}
/* =====================================
   Account Recovery Email
   FormLight page
===================================== */
.bb-account-recovery-email-page {
  width: 100%;
}

.bb-account-recovery-email-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-recovery-email-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-recovery-email-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-account-recovery-email-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-recovery-email-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-recovery-email-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-recovery-email-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-recovery-email-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-recovery-email-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: color-mix(in srgb, var(--bb-info) 72%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-info) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-account-recovery-email-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-account-recovery-email-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-recovery-email-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-recovery-email-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-recovery-email-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-recovery-email-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-recovery-email-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-account-recovery-email-form {
  display: grid;
  gap: 1rem;
}

.bb-account-recovery-email-field {
  min-width: 0;
}

.bb-account-recovery-email-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-recovery-email-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-recovery-email-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-recovery-email-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-recovery-email-input-group .form-control {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-recovery-email-input-group .form-control:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-recovery-email-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-recovery-email-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-account-recovery-email-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Helper */
.bb-account-recovery-email-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-account-recovery-email-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-recovery-email-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-recovery-email-submit {
  min-width: 12.5rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-recovery-email-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-recovery-email-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-recovery-email-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-recovery-email-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-recovery-email-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-recovery-email-actions {
    justify-content: stretch;
  }
  .bb-account-recovery-email-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-recovery-email-card-head {
    gap: 0.625rem;
  }
  .bb-account-recovery-email-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Phone Create
   FormLight page
===================================== */
.bb-account-phone-create-page {
  width: 100%;
}

.bb-account-phone-create-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phone-create-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-phone-create-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-account-phone-create-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-phone-create-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-phone-create-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-phone-create-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-phone-create-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-phone-create-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: color-mix(in srgb, var(--bb-info) 72%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-info) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-account-phone-create-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-account-phone-create-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-phone-create-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-phone-create-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-phone-create-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-phone-create-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-phone-create-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-account-phone-create-form {
  display: grid;
  gap: 1rem;
}

.bb-account-phone-create-field {
  min-width: 0;
}

.bb-account-phone-create-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phone-create-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-phone-create-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-phone-create-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-phone-create-input-group .form-control {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-phone-create-input-group .form-control:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-phone-create-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-phone-create-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-account-phone-create-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Helper */
.bb-account-phone-create-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-account-phone-create-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-phone-create-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-phone-create-submit {
  min-width: 12.5rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-phone-create-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-phone-create-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-phone-create-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-phone-create-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-phone-create-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-phone-create-actions {
    justify-content: stretch;
  }
  .bb-account-phone-create-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-phone-create-card-head {
    gap: 0.625rem;
  }
  .bb-account-phone-create-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Create Review
   FormLight page
===================================== */
.bb-account-create-review-page {
  width: 100%;
}

.bb-account-create-review-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-create-review-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-create-review-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-account-create-review-head {
  max-width: 46rem;
  margin-bottom: 1.5rem;
}

.bb-account-create-review-chip,
.bb-account-create-review-blocked-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-create-review-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-create-review-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-create-review-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Card */
.bb-account-create-review-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

/* Product */
.bb-account-create-review-product {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-create-review-product-media {
  width: 6rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-create-review-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bb-account-create-review-product-copy {
  min-width: 0;
}

.bb-account-create-review-product-copy span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  line-height: var(--bb-line-height-heading);
  text-transform: uppercase;
}

.bb-account-create-review-product-copy strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Form */
.bb-account-create-review-form {
  display: grid;
  gap: 1rem;
}

.bb-account-create-review-field {
  min-width: 0;
}

.bb-account-create-review-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-create-review-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-create-review-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-create-review-input-group .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-create-review-input-group .form-select {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-create-review-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-create-review-input-group:focus-within .input-group-text {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-create-review-rating-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
  padding: 0.8125rem 0.875rem;
  color: color-mix(in srgb, var(--bb-warning) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-account-create-review-rating-preview .material-symbols-outlined {
  color: var(--bb-warning);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 1;
}

.bb-account-create-review-rating-preview span:last-child {
  margin-left: 0.375rem;
  color: var(--bb-secondary-color);
}

.bb-account-create-review-textarea {
  min-height: 9.5rem;
  resize: vertical;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  box-shadow: none;
}

.bb-account-create-review-textarea:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-create-review-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Agreement */
.bb-account-create-review-agreement {
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-create-review-agreement-check {
  margin: 0;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.bb-account-create-review-agreement-check .form-check-input {
  margin: 0.125rem 0 0;
  cursor: pointer;
}

.bb-account-create-review-agreement-check .form-check-label {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
  cursor: pointer;
}

.bb-account-create-review-agreement-check .form-check-label a {
  color: var(--bb-primary);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-account-create-review-agreement-check .form-check-label a:hover {
  text-decoration: underline;
}

/* Actions */
.bb-account-create-review-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-create-review-submit {
  min-width: 12.5rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-create-review-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Blocked */
.bb-account-create-review-blocked {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-account-create-review-blocked-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-create-review-blocked-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-create-review-blocked h1 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-create-review-blocked p {
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-create-review-blocked-link {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-create-review-blocked-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-create-review-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 52rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-create-review-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-create-review-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-create-review-card,
  .bb-account-create-review-blocked {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-create-review-product {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
  .bb-account-create-review-product-media {
    width: 5rem;
    height: 5rem;
  }
  .bb-account-create-review-actions {
    justify-content: stretch;
  }
  .bb-account-create-review-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-create-review-product {
    grid-template-columns: 1fr;
  }
  .bb-account-create-review-product-media {
    width: 100%;
    height: 12rem;
  }
  .bb-account-create-review-rating-preview span:last-child {
    width: 100%;
    margin-top: 0.25rem;
    margin-left: 0;
  }
}
/* =====================================
   Account Subscription Create
   FormLight page
===================================== */
.bb-account-subscription-create-page {
  width: 100%;
}

.bb-account-subscription-create-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-subscription-create-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-subscription-create-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-account-subscription-create-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.bb-account-subscription-create-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-subscription-create-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-subscription-create-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-subscription-create-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-subscription-create-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: color-mix(in srgb, var(--bb-info) 72%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-info) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-account-subscription-create-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Layout */
.bb-account-subscription-create-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Info card */
.bb-account-subscription-create-info-card {
  position: relative;
  overflow: hidden;
  padding: 1.375rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-primary) 34%, transparent), transparent 32%), radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--bb-warning) 16%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 82%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-subscription-create-info-card::after {
  content: "";
  position: absolute;
  right: -3.75rem;
  bottom: -4.375rem;
  width: 10.625rem;
  height: 10.625rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-account-subscription-create-info-card > * {
  position: relative;
  z-index: 2;
}

.bb-account-subscription-create-info-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-account-subscription-create-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-account-subscription-create-info-card h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-subscription-create-info-card p {
  margin: 0.625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-subscription-create-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-account-subscription-create-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: color-mix(in srgb, var(--bb-white) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-account-subscription-create-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-account-subscription-create-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-subscription-create-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-subscription-create-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-subscription-create-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-subscription-create-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-subscription-create-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-account-subscription-create-form {
  display: grid;
  gap: 1rem;
}

.bb-account-subscription-create-field {
  min-width: 0;
}

.bb-account-subscription-create-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-subscription-create-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-subscription-create-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-subscription-create-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-subscription-create-input-group .form-select {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-subscription-create-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-subscription-create-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-subscription-create-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-account-subscription-create-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Helper */
.bb-account-subscription-create-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-account-subscription-create-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-subscription-create-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-subscription-create-submit {
  min-width: 12.5rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-subscription-create-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-subscription-create-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 68rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-subscription-create-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.bb-layout-light-page:has(.bb-account-subscription-create-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-subscription-create-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-account-subscription-create-card,
  .bb-account-subscription-create-info-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-subscription-create-actions {
    justify-content: stretch;
  }
  .bb-account-subscription-create-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-subscription-create-layout {
    gap: 1rem;
  }
  .bb-account-subscription-create-card-head {
    gap: 0.625rem;
  }
  .bb-account-subscription-create-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Phone Verify
   FormLight page
===================================== */
.bb-account-phone-verify-page {
  width: 100%;
}

.bb-account-phone-verify-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phone-verify-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-account-phone-verify-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-account-phone-verify-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-account-phone-verify-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-phone-verify-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-phone-verify-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-phone-verify-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Card */
.bb-account-phone-verify-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-phone-verify-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-phone-verify-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-phone-verify-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-account-phone-verify-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-account-phone-verify-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-account-phone-verify-form {
  display: grid;
  gap: 1rem;
}

.bb-account-phone-verify-field {
  min-width: 0;
}

.bb-account-phone-verify-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phone-verify-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-phone-verify-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-account-phone-verify-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-account-phone-verify-input-group .form-control {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-account-phone-verify-input-group .form-control:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-account-phone-verify-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-account-phone-verify-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

/* Readonly */
.bb-account-phone-verify-input-group-readonly .form-control,
.bb-account-phone-verify-input-group-readonly .input-group-text {
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-white));
}

.bb-account-phone-verify-input-group-readonly .form-control {
  cursor: not-allowed;
}

.bb-account-phone-verify-code-input {
  letter-spacing: 0.18em;
}

/* Validation */
.bb-account-phone-verify-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Helper */
.bb-account-phone-verify-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-account-phone-verify-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-account-phone-verify-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-phone-verify-submit {
  min-width: 12.5rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-phone-verify-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-phone-verify-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-phone-verify-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-phone-verify-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-phone-verify-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-phone-verify-actions {
    justify-content: stretch;
  }
  .bb-account-phone-verify-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-phone-verify-card-head {
    gap: 0.625rem;
  }
  .bb-account-phone-verify-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Account Email Change Info
   FormLight result page
===================================== */
.bb-account-email-change-info-page {
  width: 100%;
}

.bb-account-email-change-info-card {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.25rem);
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--bb-info) 7%, transparent), transparent 30%), var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-account-email-change-info-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-email-change-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-email-change-info-chip {
  margin-bottom: 0.875rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-email-change-info-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-email-change-info-title {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-account-email-change-info-text {
  max-width: 40rem;
  margin: 0.75rem auto 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-email-change-info-message {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  max-width: 40rem;
  margin: 1rem auto 0;
  padding: 0.8125rem 0.875rem;
  color: color-mix(in srgb, var(--bb-info) 72%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-info) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
  text-align: left;
}

.bb-account-email-change-info-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-account-email-change-info-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  max-width: 40rem;
  margin: 1rem auto 0;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
  text-align: left;
}

.bb-account-email-change-info-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-account-email-change-info-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.bb-account-email-change-info-login {
  min-width: 12.5rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-account-email-change-info-login .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-account-email-change-info-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-account-email-change-info-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-account-email-change-info-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-account-email-change-info-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-email-change-info-actions {
    justify-content: stretch;
  }
  .bb-account-email-change-info-login {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-email-change-info-card {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .bb-account-email-change-info-icon {
    width: 4.25rem;
    height: 4.25rem;
  }
  .bb-account-email-change-info-icon .material-symbols-outlined {
    font-size: var(--bb-icon-size-2xl);
  }
}
.bb-account-phones-chip,
.bb-account-phones-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-phones-chip .material-symbols-outlined,
.bb-account-phones-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-phones-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-phones-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-phones-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-phones-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-phones-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-phones-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-phones-add {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  padding-right: 1.125rem;
  padding-left: 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phones-add .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* List */
.bb-account-phones-list {
  display: grid;
  gap: 0.875rem;
}

.bb-account-phone-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-phone-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-phone-icon {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-phone-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-phone-copy {
  min-width: 0;
}

.bb-account-phone-label {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  line-height: var(--bb-line-height-heading);
  text-transform: uppercase;
}

.bb-account-phone-copy strong {
  display: block;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-account-phone-status {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: 0.5rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-phone-status .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-phone-status-verified {
  color: color-mix(in srgb, var(--bb-success) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-success) 10%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 22%, var(--bb-border-color));
}

.bb-account-phone-status-unverified {
  color: color-mix(in srgb, var(--bb-warning) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 12%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 22%, var(--bb-border-color));
}

.bb-account-phone-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

.bb-account-phone-verify,
.bb-account-phone-delete {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phone-verify .material-symbols-outlined,
.bb-account-phone-delete .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-phones-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-phones-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-phones-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-phones-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-phones-empty p {
  max-width: 38rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-phones-empty .btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-phones-empty .btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-phones-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-phones-add {
    width: 100%;
    border-radius: var(--bb-radius);
  }
  .bb-account-phone-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bb-account-phone-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
    padding-top: 0.875rem;
    border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
}
@media (max-width: 767.98px) {
  .bb-account-phones-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-phone-actions {
    flex-direction: column;
  }
  .bb-account-phone-verify,
  .bb-account-phone-delete {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-phone-card {
    grid-template-columns: 1fr;
  }
  .bb-account-phone-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
  }
}
.bb-account-store-access-chip,
.bb-account-store-access-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-store-access-chip .material-symbols-outlined,
.bb-account-store-access-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-store-access-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-store-access-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-store-access-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-store-access-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-store-access-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-store-access-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Summary */
.bb-account-store-access-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-account-store-access-summary-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  padding: 1rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-store-access-summary-card-main {
  grid-column: 1/-1;
}

.bb-account-store-access-summary-icon {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-store-access-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-store-access-summary-copy {
  min-width: 0;
}

.bb-account-store-access-summary-copy > span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  line-height: var(--bb-line-height-heading);
  text-transform: uppercase;
}

.bb-account-store-access-summary-copy strong {
  display: block;
  margin-top: 0.375rem;
  overflow-wrap: anywhere;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

/* Status */
.bb-account-store-access-status {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.6875rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-store-access-status .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-store-access-status-approved {
  color: color-mix(in srgb, var(--bb-success) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-success) 10%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 22%, var(--bb-border-color));
}

.bb-account-store-access-status-pending {
  color: color-mix(in srgb, var(--bb-warning) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 12%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 22%, var(--bb-border-color));
}

.bb-account-store-access-status-muted {
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

/* Action card */
.bb-account-store-access-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-store-access-action-copy {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.bb-account-store-access-action-icon {
  width: 2.875rem;
  height: 2.875rem;
  min-width: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
}

.bb-account-store-access-action-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-store-access-action-copy h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-account-store-access-action-copy p {
  max-width: 42rem;
  margin: 0.3125rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-account-store-access-panel-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  padding-right: 1.125rem;
  padding-left: 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-store-access-panel-link .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Empty */
.bb-account-store-access-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-store-access-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-store-access-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-store-access-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-store-access-empty p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-account-store-access-action-card {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-account-store-access-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-store-access-summary {
    grid-template-columns: 1fr;
  }
  .bb-account-store-access-summary-card-main {
    grid-column: auto;
  }
  .bb-account-store-access-panel-link {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-store-access-summary-card,
  .bb-account-store-access-action-card {
    padding: 0.875rem;
  }
  .bb-account-store-access-summary-icon,
  .bb-account-store-access-action-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
  }
}
/* Hero */
.bb-account-complaints-hero {
  padding: 1.25rem 0 1rem;
}

.bb-account-complaints-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.bb-account-complaints-chip,
.bb-account-complaints-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-danger) 78%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-danger) 7%, var(--bb-white)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 12%, var(--bb-border-color));
}

.bb-account-complaints-chip .material-symbols-outlined,
.bb-account-complaints-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-complaints-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-complaints-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Shell */
.bb-account-complaints-shell-section {
  padding: 0.75rem 0 3rem;
}

/* Panel */
.bb-account-complaints-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-complaints-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-complaints-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-complaints-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* List */
.bb-account-complaints-list {
  display: grid;
  gap: 1rem;
}

.bb-account-complaint-card {
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-complaint-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-danger) 18%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-complaint-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-complaint-head-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-account-complaint-icon {
  width: 2.875rem;
  height: 2.875rem;
  min-width: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-danger);
  background-color: color-mix(in srgb, var(--bb-danger) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-complaint-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-complaint-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-complaint-card-head h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-account-complaint-product {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  margin-top: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-account-complaint-product .material-symbols-outlined {
  color: var(--bb-danger);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-complaint-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.75rem;
  color: color-mix(in srgb, var(--bb-warning) 78%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 12%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-warning) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-account-complaint-status .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* Body */
.bb-account-complaint-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
}

.bb-account-complaint-main {
  min-width: 0;
  display: grid;
  gap: 0.875rem;
}

.bb-account-complaint-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-account-complaint-info {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-complaint-info span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-complaint-info strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-account-complaint-description {
  display: grid;
  gap: 0.375rem;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-complaint-description span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-complaint-description p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Actions */
.bb-account-complaint-actions {
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.625rem;
}

.bb-account-complaint-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-complaint-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-complaints-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-danger) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-complaints-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-danger);
  background-color: color-mix(in srgb, var(--bb-danger) 8%, var(--bb-white));
  border-radius: 50%;
}

.bb-account-complaints-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-complaints-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-complaints-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-complaints-empty .btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-account-complaint-card-body {
    grid-template-columns: 1fr;
  }
  .bb-account-complaint-actions {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (max-width: 991.98px) {
  .bb-account-complaints-hero-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-complaint-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-account-complaints-panel,
  .bb-account-complaint-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-complaint-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-complaint-status {
    white-space: normal;
  }
  .bb-account-complaint-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-complaint-actions {
    flex-direction: column;
  }
  .bb-account-complaint-action-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-complaints-shell-section {
    padding-bottom: 2.25rem;
  }
  .bb-account-complaint-head-left {
    align-items: flex-start;
  }
}
.bb-message-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
}

.bb-message-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Layout
===================================== */
.bb-message-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.bb-message-sidebar {
  position: sticky;
  top: 24px;
  min-width: 0;
}

.bb-message-main {
  min-width: 0;
}

.bb-message-panel {
  padding: 26px;
  border: 1px solid var(--bb-message-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-message-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bb-message-border-soft);
}

.bb-message-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 30px;
  padding: 0 11px;
  margin-bottom: 0.625rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-message-accent-soft);
  color: var(--bb-message-accent-text);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-message-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-message-panel-title {
  margin: 0 0 7px;
  color: var(--bb-heading-color);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-message-panel-text {
  max-width: 720px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Message Nav
===================================== */
.bb-message-nav {
  overflow: hidden;
  border: 1px solid var(--bb-message-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-message-nav-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--bb-message-border-soft);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-message-accent) 14%, transparent) 0, transparent 32%), linear-gradient(135deg, var(--bb-body-bg) 0%, var(--bb-message-accent-soft) 100%);
}

.bb-message-nav-head-icon {
  width: 2.625rem;
  height: 42px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-message-accent);
  color: var(--bb-primary-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-message-nav-head-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-message-nav-head strong {
  display: block;
  margin-bottom: 3px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-message-nav-head span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-message-nav-list {
  display: grid;
  gap: 4px;
  padding: 10px;
  margin: 0;
  list-style: none;
}

.bb-message-nav-link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: var(--bb-radius-lg);
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-message-nav-link .material-symbols-outlined {
  width: 30px;
  height: 30px;
  border-radius: var(--bb-radius-md);
  color: var(--bb-tertiary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-message-nav-link:hover {
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-heading-color);
  transform: translateX(2px);
}

.bb-message-nav-link.active {
  background-color: var(--bb-message-accent-soft);
  color: var(--bb-heading-color);
  box-shadow: inset 3px 0 0 var(--bb-message-accent);
}

.bb-message-nav-link.active .material-symbols-outlined {
  background-color: var(--bb-message-accent);
  color: var(--bb-primary-inverse);
}

/* =====================================
   Inbox List
===================================== */
.bb-message-list {
  display: grid;
  gap: 10px;
}

.bb-message-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 28px;
  gap: 0.875rem;
  align-items: center;
  min-height: 78px;
  padding: 16px;
  border: 1px solid var(--bb-message-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
  color: inherit;
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-message-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-message-accent) 36%, var(--bb-message-border));
  box-shadow: var(--bb-shadow-sm);
  color: inherit;
}

.bb-message-item.is-unread {
  background: radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--bb-message-accent) 10%, transparent) 0, transparent 30%), var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-message-accent) 28%, var(--bb-message-border));
}

.bb-message-item-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-message-accent-soft);
  color: var(--bb-message-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-message-item-avatar .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-message-item-content {
  min-width: 0;
}

.bb-message-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  min-width: 0;
}

.bb-message-item-name {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-message-item-meta {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-message-item-date {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-message-item-arrow {
  color: var(--bb-tertiary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-message-item-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-message-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

.bb-message-status-unread {
  background-color: var(--bb-message-accent-soft);
  color: var(--bb-message-accent-text);
}

.bb-message-status-read {
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-secondary-color);
}

/* =====================================
   Empty
===================================== */
.bb-message-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 34px;
  text-align: center;
  border: 1px solid var(--bb-message-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-message-empty-icon {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-message-accent-soft);
  color: var(--bb-message-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-message-empty-icon .material-symbols-outlined {
  font-size: var(--bb-h2);
  line-height: 1;
}

.bb-message-empty-card h3 {
  margin-bottom: 0.625rem;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-message-empty-card p {
  max-width: 520px;
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Offcanvas
===================================== */
.bb-message-sidebar-offcanvas {
  --bs-offcanvas-width: 320px;
}

.bb-message-sidebar-offcanvas .offcanvas-body {
  background-color: var(--bb-tertiary-bg);
}

/* =====================================
   Message Thread / Reply Page
===================================== */
.bb-message-thread-panel {
  overflow: hidden;
  padding: 0;
}

.bb-message-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 18px 20px;
  border-bottom: 1px solid var(--bb-message-border-soft);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-message-accent) 10%, transparent) 0, transparent 34%), var(--bb-tertiary-bg);
}

.bb-message-thread-user {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  min-width: 0;
}

.bb-message-thread-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: var(--bb-radius-pill);
  border: 1px solid var(--bb-message-border-soft);
  background-color: var(--bb-message-accent-soft);
  color: var(--bb-message-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-message-thread-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-message-thread-avatar .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-message-thread-user strong {
  display: block;
  margin-bottom: 3px;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  line-height: 1.3;
  font-weight: var(--bb-fw-bold);
}

.bb-message-thread-user span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
  font-weight: var(--bb-fw-semibold);
}

.bb-message-thread-menu-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-message-thread-menu-btn .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-message-thread-body {
  background-color: var(--bb-body-bg);
}

/*
   _Messages component içinde #messages-container varsa:
   Bu sayfa özelinde daha modern konuşma alanı yüksekliği veriyoruz.
*/
.bb-message-thread-body #messages-container {
  max-height: 560px;
  overflow-y: auto;
  padding: 20px;
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--bb-message-accent) 7%, transparent) 0, transparent 28%), var(--bb-body-bg);
}

.bb-message-reply-form-wrap {
  padding: 18px 20px;
  border-top: 1px solid var(--bb-message-border-soft);
  background-color: var(--bb-tertiary-bg);
}

.bb-message-reply-input textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

.bb-message-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 767.98px) {
  .bb-message-thread-head {
    align-items: flex-start;
  }
  .bb-message-thread-user {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .bb-message-thread-avatar {
    width: 46px;
    height: 46px;
  }
  .bb-message-thread-body #messages-container {
    max-height: 460px;
    padding: 14px;
  }
  .bb-message-reply-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .bb-message-reply-actions .btn {
    width: 100%;
  }
}
/* =====================================
   _Messages Component
===================================== */
.bb-message-thread-messages {
  max-height: 560px;
  overflow-y: auto;
  padding: 20px;
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--bb-message-accent) 7%, transparent) 0, transparent 28%), var(--bb-body-bg);
}

.bb-message-thread-message-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bb-message-bubble-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-end;
  max-width: 78%;
}

.bb-message-bubble-row--mine {
  grid-template-columns: minmax(0, 1fr) 38px;
  align-self: flex-end;
}

.bb-message-bubble-row--mine .bb-message-bubble-avatar {
  grid-column: 2;
  grid-row: 1;
}

.bb-message-bubble-row--mine .bb-message-bubble-wrap {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-end;
}

.bb-message-bubble-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-message-accent-text);
  background-color: var(--bb-message-accent-soft);
  border: 1px solid color-mix(in srgb, var(--bb-message-accent) 12%, var(--bb-message-border));
  border-radius: var(--bb-radius-pill);
}

.bb-message-bubble-avatar .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-message-bubble-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bb-message-bubble-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}

.bb-message-bubble-meta strong {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-message-bubble-meta span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-message-bubble {
  max-width: 100%;
  padding: 12px 14px;
  color: var(--bb-heading-color);
  background-color: var(--bb-tertiary-bg);
  border: 1px solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: 16px 16px 16px 4px;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-message-bubble-row--mine .bb-message-bubble {
  color: color-mix(in srgb, var(--bb-primary) 58%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
  border-radius: 16px 16px 4px 16px;
}

.bb-message-bubble p:last-child {
  margin-bottom: 0;
}

.bb-message-thread-empty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.bb-message-thread-empty-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-message-accent-text);
  background-color: var(--bb-message-accent-soft);
  border-radius: var(--bb-radius-2xl);
}

.bb-message-thread-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-message-thread-empty h3 {
  margin: 0 0 8px;
  color: var(--bb-heading-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-message-thread-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-message-thread-messages {
    max-height: 460px;
    padding: 14px;
  }
  .bb-message-bubble-row {
    max-width: 100%;
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .bb-message-bubble-row--mine {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  .bb-message-bubble-avatar {
    width: 34px;
    height: 34px;
  }
  .bb-message-bubble {
    padding: 10px 12px;
  }
}
/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-message-layout {
    grid-template-columns: 1fr;
  }
  .bb-message-panel-head {
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-message-panel {
    padding: 18px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-message-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .bb-message-item-date,
  .bb-message-item-arrow {
    grid-column: 2;
  }
  .bb-message-item-date {
    white-space: normal;
  }
}
/* =====================================
   Bulbulustur Web - Basket Page
   Layer: pages/b2c/_basket.scss

   Purpose:
   - Alışveriş sepeti işlem sayfası.
   - Hero kullanılmaz.
   - Kompakt sepet başlığı, ürün listesi, checkout özeti,
     empty state ve favoriler alanını yönetir.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor root:
   - .bb-basket-page

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only basket page local tokens.
===================================== */
/* =====================================
   Basket Local Tokens - Light Default
===================================== */
.bb-basket-page {
  --bb-basket-accent: var(--bb-primary);
  --bb-basket-accent-hover: var(--bb-primary-hover);
  --bb-basket-accent-soft: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-basket-accent-muted: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  --bb-basket-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-basket-accent-inverse: var(--bb-primary-inverse);
  --bb-basket-success: var(--bb-success);
  --bb-basket-success-soft: var(--bb-success-light);
  --bb-basket-success-text: color-mix(in srgb, var(--bb-success) 76%, var(--bb-emphasis-color));
  --bb-basket-danger: var(--bb-danger);
  --bb-basket-danger-soft: color-mix(in srgb, var(--bb-danger) 10%, var(--bb-body-bg));
  --bb-basket-danger-text: color-mix(in srgb, var(--bb-danger) 78%, var(--bb-emphasis-color));
  --bb-basket-page-bg: var(--bb-body-bg);
  --bb-basket-surface: var(--bb-surface-elevated, var(--bb-body-bg));
  --bb-basket-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 86%, var(--bb-body-bg));
  --bb-basket-surface-muted: var(--bb-tertiary-bg);
  --bb-basket-heading: var(--bb-emphasis-color);
  --bb-basket-text: var(--bb-body-color);
  --bb-basket-muted: var(--bb-secondary-color);
  --bb-basket-subtle: var(--bb-tertiary-color);
  --bb-basket-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-basket-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-basket-border-strong: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-basket-page-head-bg:
      radial-gradient(
          circle at 92% 18%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-surface-elevated) 98%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-tertiary-bg) 68%, var(--bb-body-bg))
      );
  --bb-basket-page-head-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-basket-page-head-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 2%, transparent);
  --bb-basket-panel-bg: var(--bb-basket-surface);
  --bb-basket-panel-border: var(--bb-basket-border);
  --bb-basket-panel-shadow: var(--bb-shadow-xs);
  --bb-basket-panel-head-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-basket-accent) 10%, transparent),
          transparent 34%
      ),
      var(--bb-basket-surface);
  --bb-basket-item-bg: var(--bb-basket-surface);
  --bb-basket-item-bg-hover: color-mix(in srgb, var(--bb-primary) 3%, var(--bb-basket-surface));
  --bb-basket-media-bg: color-mix(in srgb, var(--bb-tertiary-bg) 86%, var(--bb-body-bg));
  --bb-basket-media-border: var(--bb-basket-border-soft);
  --bb-basket-qty-bg: var(--bb-basket-surface);
  --bb-basket-qty-btn-bg: var(--bb-tertiary-bg);
  --bb-basket-qty-btn-hover-bg: var(--bb-basket-accent-soft);
  --bb-basket-summary-bg: var(--bb-basket-surface);
  --bb-basket-summary-border: var(--bb-basket-border);
  --bb-basket-summary-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      var(--bb-shadow-xs);
  --bb-basket-checkout-bg: var(--bb-basket-surface);
  --bb-basket-checkout-border: var(--bb-basket-border);
  --bb-basket-checkout-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      var(--bb-shadow-xs);
  --bb-basket-total-bg: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg));
  --bb-basket-total-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-basket-empty-bg: var(--bb-basket-surface);
  --bb-basket-empty-border: var(--bb-basket-border);
  --bb-basket-empty-shadow: var(--bb-shadow-xs);
  --bb-basket-favorite-bg: var(--bb-basket-surface);
  --bb-basket-favorite-border: var(--bb-basket-border);
  --bb-basket-favorite-shadow: var(--bb-shadow-xs);
  color: var(--bb-basket-text);
  background-color: var(--bb-basket-page-bg);
}

/* =====================================
   Basket Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-basket-page {
  --bb-basket-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-basket-accent-muted: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
  --bb-basket-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-basket-success-soft: color-mix(in srgb, var(--bb-success) 15%, var(--bb-body-bg));
  --bb-basket-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-basket-surface: var(--bb-surface-elevated);
  --bb-basket-surface-soft: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-basket-surface-muted: var(--bb-surface-muted);
  --bb-basket-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-basket-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-basket-border-strong: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-basket-page-head-bg:
      radial-gradient(
          circle at 92% 18%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-soft) 78%, var(--bb-body-bg))
      );
  --bb-basket-page-head-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-basket-page-head-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-basket-panel-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-panel-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-panel-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-black) 18%, transparent);
  --bb-basket-panel-head-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-basket-accent) 8%, transparent),
          transparent 34%
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-basket-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-item-bg-hover: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  --bb-basket-media-bg: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-basket-media-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-basket-qty-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-qty-btn-bg: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-basket-qty-btn-hover-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-surface-elevated));
  --bb-basket-summary-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-summary-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-summary-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      var(--bb-shadow-xs);
  --bb-basket-checkout-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-checkout-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-checkout-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      var(--bb-shadow-xs);
  --bb-basket-total-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-body-bg));
  --bb-basket-total-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-basket-empty-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-empty-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-favorite-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-favorite-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

/* =====================================
   Basket Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-basket-page {
  --bb-basket-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-basket-accent-muted: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  --bb-basket-accent-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-basket-success-soft: color-mix(in srgb, var(--bb-success) 14%, var(--bb-body-bg));
  --bb-basket-success-text: color-mix(in srgb, var(--bb-success) 84%, var(--bb-emphasis-color));
  --bb-basket-surface: var(--bb-surface-elevated);
  --bb-basket-surface-soft: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-basket-surface-muted: var(--bb-surface-muted);
  --bb-basket-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-basket-border-soft: color-mix(in srgb, var(--bb-border-color) 68%, transparent);
  --bb-basket-border-strong: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-basket-page-head-bg:
      radial-gradient(
          circle at 92% 18%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-soft) 76%, var(--bb-body-bg))
      );
  --bb-basket-page-head-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-basket-page-head-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-basket-panel-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-panel-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-basket-panel-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-basket-panel-head-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-basket-accent) 7%, transparent),
          transparent 34%
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-basket-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-item-bg-hover: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-surface-elevated));
  --bb-basket-media-bg: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-basket-media-border: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-basket-qty-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-qty-btn-bg: color-mix(in srgb, var(--bb-surface-soft) 82%, var(--bb-body-bg));
  --bb-basket-qty-btn-hover-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-surface-elevated));
  --bb-basket-summary-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-summary-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-basket-summary-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black) 24%, transparent),
      var(--bb-shadow-xs);
  --bb-basket-checkout-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-checkout-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-basket-checkout-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black) 24%, transparent),
      var(--bb-shadow-xs);
  --bb-basket-total-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-basket-total-border: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-basket-empty-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-empty-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-basket-favorite-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-basket-favorite-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

/* =====================================
   Section / Compact Head
===================================== */
.bb-basket-section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bb-basket-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  background: var(--bb-basket-page-head-bg);
  border: var(--bb-border-width) solid var(--bb-basket-page-head-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-basket-page-head-shadow);
}

.bb-basket-page-head-content {
  min-width: 0;
}

.bb-basket-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.875rem;
  padding: 0 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--bb-basket-accent-text);
  background-color: var(--bb-basket-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-basket-page-eyebrow .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-basket-page-head h1 {
  margin: 0;
  color: var(--bb-basket-heading);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.06em;
}

.bb-basket-page-head p {
  max-width: 52rem;
  margin: 0.625rem 0 0;
  color: var(--bb-basket-muted);
  font-size: clamp(var(--bb-fs-base), 1.2vw, var(--bb-fs-lg));
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-basket-page-count {
  min-width: 6.25rem;
  min-height: 6.25rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bb-basket-heading);
  background-color: var(--bb-basket-surface);
  border: var(--bb-border-width) solid var(--bb-basket-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-basket-page-count strong {
  color: var(--bb-basket-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
  letter-spacing: -0.06em;
}

.bb-basket-page-count span {
  margin-top: 0.375rem;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =====================================
   Layout
===================================== */
.bb-basket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: flex-start;
}

.bb-basket-main {
  min-width: 0;
}

.bb-basket-panel,
.bb-basket-checkout-card,
.bb-basket-summary-card,
.bb-basket-coupon-card,
.bb-basket-favorites-card,
.bb-basket-empty-card {
  background-color: var(--bb-basket-panel-bg);
  border: var(--bb-border-width) solid var(--bb-basket-panel-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-basket-panel-shadow);
}

.bb-basket-panel {
  overflow: hidden;
}

/* =====================================
   Basket Panel Head
===================================== */
.bb-basket-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 1.375rem 1.5rem;
  background: var(--bb-basket-panel-head-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-basket-border-soft);
}

.bb-basket-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.875rem;
  padding: 0 0.6875rem;
  margin-bottom: 0.625rem;
  color: var(--bb-basket-accent-text);
  background-color: var(--bb-basket-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-basket-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-basket-panel-head h2 {
  margin: 0;
  color: var(--bb-basket-heading);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-basket-panel-head h2 span {
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Basket List / Item
===================================== */
.bb-basket-list {
  display: grid;
}

.bb-basket-item {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.125rem;
  padding: 1.375rem 1.5rem;
  background-color: var(--bb-basket-item-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-basket-border-soft);
  transition: background-color var(--bb-transition-normal), opacity var(--bb-transition-normal);
}

.bb-basket-item:hover {
  background-color: var(--bb-basket-item-bg-hover);
}

.bb-basket-item:last-child {
  border-bottom: 0;
}

.bb-basket-item.is-busy,
.bb-basket-item.opacity-50 {
  opacity: 0.58;
  pointer-events: none;
}

.bb-basket-item-media {
  width: 8rem;
  height: 8rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bb-basket-media-bg);
  border: var(--bb-border-width) solid var(--bb-basket-media-border);
  border-radius: var(--bb-radius-xl);
  text-decoration: none !important;
}

.bb-basket-item-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bb-basket-item-content {
  min-width: 0;
}

.bb-basket-item-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.125rem;
  align-items: flex-start;
  margin-bottom: 0.625rem;
}

.bb-basket-store-link {
  display: inline-flex;
  margin-bottom: 0.375rem;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  text-decoration: none !important;
}

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

.bb-basket-item h3 {
  margin: 0;
  color: var(--bb-basket-heading);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-basket-item h3 a {
  color: inherit;
  text-decoration: none !important;
}

.bb-basket-item h3 a:hover {
  color: var(--bb-link-color);
}

.bb-basket-price {
  text-align: right;
  white-space: nowrap;
}

.bb-basket-price p {
  margin: 0;
  color: var(--bb-basket-heading);
  font-size: var(--bb-h4);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-basket-variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-bottom: 1rem;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-basket-variant-row strong {
  color: var(--bb-basket-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-basket-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
}

/* =====================================
   Quantity
===================================== */
.bb-basket-qty {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--bb-basket-qty-bg);
  border: var(--bb-border-width) solid var(--bb-basket-border);
  border-radius: var(--bb-radius-pill);
}

.bb-basket-qty-btn {
  width: 2.375rem;
  height: 2.375rem;
  color: var(--bb-basket-heading);
  background-color: var(--bb-basket-qty-btn-bg);
  border: 0;
  cursor: pointer;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  transition: background-color var(--bb-transition-normal), color var(--bb-transition-normal);
}

.bb-basket-qty-btn:hover {
  color: var(--bb-basket-accent-text);
  background-color: var(--bb-basket-qty-btn-hover-bg);
}

.bb-basket-qty-input {
  width: 2.625rem;
  height: 2.375rem;
  color: var(--bb-basket-heading);
  background-color: var(--bb-basket-qty-bg);
  border: 0;
  pointer-events: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-align: center;
}

/* =====================================
   Actions
===================================== */
.bb-basket-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.875rem;
}

.bb-basket-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none !important;
}

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

.bb-basket-action-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Summary / Checkout
===================================== */
.bb-basket-summary-col {
  position: sticky;
  top: 1.5rem;
  display: grid;
  gap: 0.875rem;
  min-width: 0;
}

.bb-basket-checkout-card,
.bb-basket-summary-card,
.bb-basket-coupon-card {
  padding: 1.125rem;
  background-color: var(--bb-basket-checkout-bg);
  border-color: var(--bb-basket-checkout-border);
  box-shadow: var(--bb-basket-checkout-shadow);
}

.bb-basket-summary-card {
  background-color: var(--bb-basket-summary-bg);
  border-color: var(--bb-basket-summary-border);
  box-shadow: var(--bb-basket-summary-shadow);
}

.bb-basket-shipping-note {
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-basket-border-soft);
}

.bb-basket-shipping-note .material-symbols-outlined {
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-basket-success);
  background-color: var(--bb-basket-success-soft);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-basket-shipping-note p {
  margin: 0;
  color: var(--bb-basket-success);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-basket-checkout-btn {
  width: 100%;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-lg);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Empty
===================================== */
.bb-basket-empty-section {
  padding: 3.5rem 0 1.75rem;
}

.bb-basket-empty-card {
  min-height: 22.5rem;
  padding: 2.875rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--bb-basket-empty-bg);
  border-color: var(--bb-basket-empty-border);
  box-shadow: var(--bb-basket-empty-shadow);
}

.bb-basket-empty-icon {
  width: 5.5rem;
  height: 5.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--bb-basket-accent-text);
  background-color: var(--bb-basket-accent-soft);
  border-radius: var(--bb-radius-2xl);
}

.bb-basket-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-basket-empty-card h1 {
  margin-bottom: 0.625rem;
  color: var(--bb-basket-heading);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-basket-empty-card p {
  max-width: 35rem;
  margin-bottom: 1.375rem;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Favorites
===================================== */
.bb-basket-favorites-section {
  padding: 0 0 3.5rem;
}

.bb-basket-favorites-card {
  padding: 1.5rem;
  background-color: var(--bb-basket-favorite-bg);
  border-color: var(--bb-basket-favorite-border);
  box-shadow: var(--bb-basket-favorite-shadow);
}

.bb-basket-favorites {
  min-width: 0;
}

.bb-basket-favorites-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1.125rem;
  border-bottom: var(--bb-border-width) solid var(--bb-basket-border-soft);
}

.bb-basket-favorites-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.875rem;
  padding: 0 0.6875rem;
  margin-bottom: 0.625rem;
  color: var(--bb-basket-accent-text);
  background-color: var(--bb-basket-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-basket-favorites-kicker .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-basket-favorites-head h2 {
  margin: 0 0 0.375rem;
  color: var(--bb-basket-heading);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-basket-favorites-head p {
  margin: 0;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-basket-favorites-carousel {
  --bb-carousel-control-size: 38px;
  --bb-carousel-control-inset: 0.25rem;
  --bb-carousel-control-bg-color: var(--bb-dark);
  --bb-carousel-control-bg-opacity: 0.28;
  --bb-carousel-control-bg-opacity-hover: 0.46;
}

.bb-basket-favorites-carousel .carousel-control-prev,
.bb-basket-favorites-carousel .carousel-control-next {
  color: var(--bb-primary-inverse);
}

.bb-basket-favorites-carousel .carousel-control-prev .material-symbols-outlined,
.bb-basket-favorites-carousel .carousel-control-next .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-basket-favorite-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  padding: 0.125rem;
}

.bb-basket-favorite-card {
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-basket-favorite-bg);
  border: var(--bb-border-width) solid var(--bb-basket-favorite-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-basket-favorite-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-basket-accent) 36%, var(--bb-basket-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-basket-favorite-media {
  width: 100%;
  aspect-ratio: 1/1;
  padding: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bb-basket-media-bg);
  text-decoration: none !important;
}

.bb-basket-favorite-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bb-basket-favorite-body {
  padding: 0.875rem;
  border-top: var(--bb-border-width) solid var(--bb-basket-border-soft);
}

.bb-basket-favorite-body h3 {
  min-height: 2.625rem;
  margin: 0 0 0.625rem;
  color: var(--bb-basket-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-basket-favorite-body h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-basket-favorite-body h3 a:hover {
  color: var(--bb-link-color);
}

.bb-basket-favorite-link {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  color: var(--bb-basket-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

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

.bb-basket-favorite-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-basket-layout {
    grid-template-columns: 1fr;
  }
  .bb-basket-summary-col {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-basket-favorite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-basket-section {
    padding-top: 1.25rem;
  }
  .bb-basket-page-head {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .bb-basket-page-count {
    min-width: 5rem;
    min-height: 5rem;
  }
  .bb-basket-panel-head,
  .bb-basket-item {
    padding: 1.125rem;
  }
  .bb-basket-item {
    grid-template-columns: 5.75rem minmax(0, 1fr);
    gap: 0.875rem;
  }
  .bb-basket-item-media {
    width: 5.75rem;
    height: 5.75rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-basket-item-top {
    grid-template-columns: 1fr;
  }
  .bb-basket-price {
    text-align: left;
  }
  .bb-basket-item-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-basket-actions {
    justify-content: flex-start;
  }
  .bb-basket-favorites-card {
    padding: 1.125rem;
  }
}
@media (max-width: 575.98px) {
  .bb-basket-item {
    grid-template-columns: 1fr;
  }
  .bb-basket-item-media {
    width: 100%;
    height: 11.25rem;
  }
  .bb-basket-actions {
    flex-direction: column;
    gap: 0.625rem;
  }
  .bb-basket-favorites-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-basket-favorites-head .btn {
    width: 100%;
  }
  .bb-basket-favorite-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   Bulbulustur Web - Seller Landing Page
   Layer: pages/web/_seller-landing.scss

   Purpose:
   - Seller acquisition / seller landing visual atmosphere.
   - Hero, trust sections, benefit cards, seller CTA and onboarding surfaces.
   - Uses page-local tokens scoped under .bb-seller-landing-page.

   Theme:
   - Light / Navy / Dark safe.
   - This file consumes global theme tokens.
   - This file does not override global theme variables.

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - Seller landing specific decorative tokens live here.
===================================== */
/* =====================================
   Seller Landing Tokens
===================================== */
.bb-seller-landing-page {
  --bb-seller-accent: var(--bb-primary);
  --bb-seller-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-seller-accent-soft-strong: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-body-bg));
  --bb-seller-accent-text: color-mix(in srgb, var(--bb-primary) 74%, var(--bb-emphasis-color));
  --bb-seller-heading: var(--bb-heading-color);
  --bb-seller-muted: var(--bb-secondary-color);
  --bb-seller-subtle: var(--bb-tertiary-color);
  --bb-seller-soft: var(--bb-tertiary-bg);
  --bb-seller-surface: var(--bb-surface-elevated);
  --bb-seller-surface-soft: var(--bb-surface-soft);
  --bb-seller-surface-muted: var(--bb-surface-muted);
  --bb-seller-border: var(--bb-border-color);
  --bb-seller-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-body-bg));
  --bb-seller-dark: var(--bb-dark);
  --bb-seller-on-dark: var(--bb-white, var(--bb-color-white));
  --bb-seller-on-dark-muted: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 74%, transparent);
  --bb-seller-success-soft: color-mix(in srgb, var(--bb-success) 14%, var(--bb-body-bg));
  --bb-seller-success-text: color-mix(in srgb, var(--bb-success) 76%, var(--bb-emphasis-color));
  --bb-seller-info-soft: color-mix(in srgb, var(--bb-info) 12%, var(--bb-body-bg));
  --bb-seller-info-text: color-mix(in srgb, var(--bb-info) 74%, var(--bb-emphasis-color));
  --bb-seller-warning-soft: color-mix(in srgb, var(--bb-warning) 13%, var(--bb-body-bg));
  --bb-seller-warning-text: color-mix(in srgb, var(--bb-warning) 76%, var(--bb-emphasis-color));
  --bb-seller-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-seller-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 2%, transparent);
}

/* =====================================
   Navy Mode Local Tuning
===================================== */
html[data-bs-theme=navy] .bb-seller-landing-page {
  --bb-seller-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-seller-accent-soft-strong: color-mix(in srgb, var(--bb-primary) 26%, transparent);
  --bb-seller-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-seller-soft: var(--bb-tertiary-bg);
  --bb-seller-surface: var(--bb-surface-elevated);
  --bb-seller-surface-soft: var(--bb-surface-soft);
  --bb-seller-surface-muted: var(--bb-surface-muted);
  --bb-seller-border-soft: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-seller-dark: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-seller-on-dark: var(--bb-emphasis-color);
  --bb-seller-on-dark-muted: color-mix(in srgb, var(--bb-emphasis-color) 72%, transparent);
  --bb-seller-success-soft: color-mix(in srgb, var(--bb-success) 14%, transparent);
  --bb-seller-success-text: color-mix(in srgb, var(--bb-success) 88%, var(--bb-emphasis-color));
  --bb-seller-info-soft: color-mix(in srgb, var(--bb-info) 13%, transparent);
  --bb-seller-info-text: color-mix(in srgb, var(--bb-info) 88%, var(--bb-emphasis-color));
  --bb-seller-warning-soft: color-mix(in srgb, var(--bb-warning) 14%, transparent);
  --bb-seller-warning-text: color-mix(in srgb, var(--bb-warning) 88%, var(--bb-emphasis-color));
  --bb-seller-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  --bb-seller-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 18%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent);
}

/* =====================================
   Dark Mode Local Tuning
===================================== */
html[data-bs-theme=dark] .bb-seller-landing-page {
  --bb-seller-accent-soft: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-seller-accent-soft-strong: color-mix(in srgb, var(--bb-primary) 24%, transparent);
  --bb-seller-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-seller-soft: var(--bb-tertiary-bg);
  --bb-seller-surface: var(--bb-surface-elevated);
  --bb-seller-surface-soft: var(--bb-surface-soft);
  --bb-seller-surface-muted: var(--bb-surface-muted);
  --bb-seller-border-soft: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-seller-dark: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-seller-on-dark: var(--bb-emphasis-color);
  --bb-seller-on-dark-muted: color-mix(in srgb, var(--bb-emphasis-color) 70%, transparent);
  --bb-seller-success-soft: color-mix(in srgb, var(--bb-success) 13%, transparent);
  --bb-seller-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-seller-info-soft: color-mix(in srgb, var(--bb-info) 12%, transparent);
  --bb-seller-info-text: color-mix(in srgb, var(--bb-info) 86%, var(--bb-emphasis-color));
  --bb-seller-warning-soft: color-mix(in srgb, var(--bb-warning) 13%, transparent);
  --bb-seller-warning-text: color-mix(in srgb, var(--bb-warning) 86%, var(--bb-emphasis-color));
  --bb-seller-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 14%, transparent);
  --bb-seller-shadow-soft:
      0 0.875rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent);
}

/* =====================================
   Base
===================================== */
.bb-wrapper a[class*=bb-seller-] {
  text-decoration: none;
}

/* =====================================
   Hero
===================================== */
.bb-seller-hero {
  position: relative;
  overflow: hidden;
  padding-top: 42px;
  padding-bottom: 56px;
  background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--bb-seller-accent) 34%, transparent) 0, transparent 30%), radial-gradient(circle at 8% 90%, color-mix(in srgb, var(--bb-danger) 7%, transparent) 0, transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--bb-seller-accent) 18%, var(--bb-body-bg)) 0%, var(--bb-body-bg) 58%, var(--bb-tertiary-bg) 100%);
  border-bottom: 1px solid var(--bb-seller-border-soft);
}

.bb-seller-hero::before,
.bb-seller-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bb-seller-hero::before {
  right: -140px;
  top: -150px;
  width: 390px;
  height: 390px;
  background-color: color-mix(in srgb, var(--bb-seller-accent) 16%, transparent);
}

.bb-seller-hero::after {
  left: -190px;
  bottom: -210px;
  width: 430px;
  height: 430px;
  background-color: color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent);
}

.bb-seller-hero > .bb-container {
  position: relative;
  z-index: 2;
}

.bb-seller-hero-breadcrumb {
  margin-bottom: 28px;
}

.bb-seller-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(420px, 1.02fr);
  gap: 56px;
  align-items: center;
}

.bb-seller-hero-content {
  min-width: 0;
}

.bb-seller-eyebrow {
  gap: 7px;
  margin-bottom: 18px;
}

.bb-seller-eyebrow .material-symbols-outlined {
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-seller-hero-title {
  max-width: 820px;
  margin-bottom: 18px;
  color: var(--bb-seller-heading);
  font-size: clamp(2.6rem, 5.3vw, 5.1rem);
  line-height: 0.98;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.065em;
}

.bb-seller-hero-title span {
  color: var(--bb-seller-heading);
  background: linear-gradient(180deg, transparent 56%, color-mix(in srgb, var(--bb-seller-accent) 62%, transparent) 56%);
}

.bb-seller-hero-text {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
  font-weight: var(--bb-fw-semibold);
}

.bb-seller-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.bb-seller-hero-actions .btn,
.bb-seller-locomotive-actions .btn,
.bb-seller-fee-action .btn,
.bb-seller-final-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.bb-seller-hero-actions .material-symbols-outlined,
.bb-seller-locomotive-actions .material-symbols-outlined,
.bb-seller-fee-action .material-symbols-outlined,
.bb-seller-final-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Hero Panel
===================================== */
.bb-seller-hero-panel {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--bb-seller-border) 84%, var(--bb-body-bg));
  border-radius: var(--bb-radius-3xl, 2rem);
  background-color: color-mix(in srgb, var(--bb-body-bg) 82%, transparent);
  box-shadow: var(--bb-shadow-lg);
  backdrop-filter: blur(14px);
}

.bb-seller-hero-panel::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 46px;
  z-index: -1;
  width: 74px;
  height: 74px;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-seller-accent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--bb-seller-accent) 34%, transparent);
  transform: rotate(-9deg);
}

.bb-seller-ecosystem-ui {
  overflow: hidden;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-seller-surface);
  box-shadow: var(--bb-shadow-sm);
}

.bb-seller-ui-top {
  padding: 20px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--bb-seller-accent) 16%, var(--bb-seller-border));
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--bb-seller-accent) 32%, transparent) 0, transparent 32%), linear-gradient(135deg, var(--bb-seller-dark) 0%, color-mix(in srgb, var(--bb-seller-dark) 88%, var(--bb-seller-accent)) 100%);
  color: var(--bb-seller-on-dark);
}

.bb-seller-ui-top strong {
  display: block;
  margin-bottom: 5px;
  color: var(--bb-seller-on-dark);
  font-size: var(--bb-fs-lg);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-seller-ui-top span {
  display: block;
  color: var(--bb-seller-on-dark-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-seller-ui-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.bb-seller-ui-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}

.bb-seller-ui-card {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--bb-seller-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-seller-soft);
}

.bb-seller-ui-card-dark {
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-seller-accent) 18%, transparent) 0, transparent 34%), var(--bb-seller-dark);
  color: var(--bb-seller-on-dark);
}

.bb-seller-ui-label {
  display: block;
  margin-bottom: 8px;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-2xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-seller-ui-card-dark .bb-seller-ui-label {
  color: color-mix(in srgb, var(--bb-white) 58%, transparent);
}

.bb-seller-ui-value {
  display: block;
  margin-bottom: 8px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.03em;
}

.bb-seller-ui-card-dark .bb-seller-ui-value {
  color: var(--bb-seller-accent);
}

.bb-seller-ui-text {
  display: block;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-seller-ui-card-dark .bb-seller-ui-text {
  color: var(--bb-seller-on-dark-muted);
}

.bb-seller-mini-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--bb-seller-border-soft);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
}

.bb-seller-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-seller-accent-soft);
  color: var(--bb-seller-accent-text);
}

.bb-seller-mini-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-seller-mini-content {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.bb-seller-mini-title {
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-seller-mini-text {
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-seller-mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-seller-success-soft);
  color: var(--bb-seller-success-text);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Stats
===================================== */
.bb-seller-stat-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
}

.bb-seller-stat {
  min-height: 106px;
  padding: 18px;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(8px);
}

.bb-seller-stat strong {
  display: block;
  margin-bottom: 7px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.025em;
}

.bb-seller-stat span {
  display: block;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Marquee
===================================== */
.bb-seller-marquee-section {
  overflow: hidden;
  padding: 30px 0;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-seller-accent) 14%, transparent), transparent 30%), var(--bb-seller-dark);
  color: var(--bb-seller-on-dark);
}

.bb-seller-marquee-title {
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--bb-white) 74%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.bb-seller-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bb-seller-marquee::before,
.bb-seller-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 90px;
  height: 100%;
  pointer-events: none;
}

.bb-seller-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bb-seller-dark) 0%, transparent 100%);
}

.bb-seller-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bb-seller-dark) 0%, transparent 100%);
}

.bb-seller-marquee-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: bbSellerMarquee 38s linear infinite;
}

.bb-seller-marquee:hover .bb-seller-marquee-track {
  animation-play-state: paused;
}

.bb-seller-logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--bb-white) 16%, transparent);
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-white) 8%, transparent);
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-seller-logo-pill .material-symbols-outlined {
  color: var(--bb-seller-accent);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

@keyframes bbSellerMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* =====================================
   Sections
===================================== */
.bb-seller-section {
  padding: 74px 0;
}

.bb-seller-section-soft {
  background-color: var(--bb-seller-soft);
}

.bb-seller-section-yellow {
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-seller-accent) 24%, transparent) 0, transparent 30%), linear-gradient(135deg, var(--bb-seller-accent-soft) 0%, var(--bb-body-bg) 100%);
}

.bb-seller-section-head {
  max-width: 780px;
  margin-bottom: 32px;
}

.bb-seller-section-head-center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.bb-seller-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 13px;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-seller-accent-soft);
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bb-seller-section-kicker .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-seller-section-title {
  margin: 0;
  color: var(--bb-seller-heading);
  font-size: clamp(2rem, 3.35vw, 3.35rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.045em;
}

.bb-seller-section-text {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Seller Models
===================================== */
.bb-seller-model-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.bb-seller-model-card {
  position: relative;
  overflow: hidden;
  min-height: 292px;
  padding: 22px;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), background-color var(--bb-transition-normal);
}

.bb-seller-model-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -48px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-seller-accent) 12%, transparent);
  pointer-events: none;
}

.bb-seller-model-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-seller-accent) 38%, var(--bb-seller-border));
  background-color: color-mix(in srgb, var(--bb-seller-accent) 4%, var(--bb-body-bg));
  box-shadow: var(--bb-shadow-sm);
}

.bb-seller-model-card-featured {
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-seller-accent) 16%, transparent) 0, transparent 34%), var(--bb-seller-dark);
  color: var(--bb-white);
  border-color: color-mix(in srgb, var(--bb-seller-accent) 35%, var(--bb-seller-dark));
}

.bb-seller-model-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-seller-accent-soft);
  color: var(--bb-seller-accent-text);
}

.bb-seller-model-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-seller-model-title {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-lg);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
}

.bb-seller-model-card-featured .bb-seller-model-title {
  color: var(--bb-white);
}

.bb-seller-model-text {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-seller-model-card-featured .bb-seller-model-text {
  color: var(--bb-seller-on-dark-muted);
}

.bb-seller-model-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-seller-model-card-featured .bb-seller-model-link {
  color: var(--bb-seller-accent);
}

.bb-seller-model-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
  transition: transform var(--bb-transition-normal);
}

.bb-seller-model-card:hover .bb-seller-model-link .material-symbols-outlined {
  transform: translateX(3px);
}

/* =====================================
   Ecosystem
===================================== */
.bb-seller-ecosystem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 24px;
  align-items: stretch;
}

.bb-seller-locomotive-card {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  border: 1px solid color-mix(in srgb, var(--bb-seller-accent) 28%, var(--bb-seller-border));
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-seller-accent) 18%, transparent) 0, transparent 34%), var(--bb-body-bg);
  box-shadow: var(--bb-shadow-sm);
}

.bb-seller-locomotive-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: auto;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-seller-accent-soft);
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-seller-locomotive-title {
  max-width: 780px;
  margin: 28px 0 14px;
  color: var(--bb-seller-heading);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.04;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.05em;
}

.bb-seller-locomotive-text {
  max-width: 820px;
  margin: 0;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-seller-locomotive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bb-seller-ecosystem-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bb-seller-ecosystem-card {
  padding: 20px;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-seller-ecosystem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-seller-accent-soft);
  color: var(--bb-seller-accent-text);
}

.bb-seller-ecosystem-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-seller-ecosystem-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-seller-ecosystem-card p {
  margin: 0;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Compare
===================================== */
.bb-seller-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.bb-seller-compare-card {
  padding: 26px;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-seller-compare-card-dark {
  border-color: color-mix(in srgb, var(--bb-seller-accent) 35%, var(--bb-seller-dark));
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-seller-accent) 18%, transparent) 0, transparent 34%), var(--bb-seller-dark);
  color: var(--bb-white);
}

.bb-seller-compare-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-lg);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-seller-compare-card-dark .bb-seller-compare-title {
  color: var(--bb-white);
}

.bb-seller-compare-title .material-symbols-outlined {
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-seller-compare-card-dark .bb-seller-compare-title .material-symbols-outlined {
  color: var(--bb-seller-accent);
}

.bb-seller-compare-list {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bb-seller-compare-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-seller-compare-card-dark .bb-seller-compare-list li {
  color: var(--bb-seller-on-dark-muted);
}

.bb-seller-compare-list .material-symbols-outlined {
  color: var(--bb-tertiary-color);
  font-size: var(--bb-icon-size-sm);
  line-height: 1.35;
}

.bb-seller-compare-card-dark .bb-seller-compare-list .material-symbols-outlined {
  color: var(--bb-seller-accent);
}

/* =====================================
   Process
===================================== */
.bb-seller-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  counter-reset: seller-step;
}

.bb-seller-step {
  position: relative;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
  counter-increment: seller-step;
}

.bb-seller-step::before {
  content: counter(seller-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-seller-accent);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  line-height: 1;
  font-weight: var(--bb-fw-extrabold);
}

.bb-seller-step strong {
  display: block;
  margin-bottom: 9px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-seller-step p {
  margin: 0;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Fee
===================================== */
.bb-seller-fee-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: 28px;
  align-items: center;
  padding: 34px;
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--bb-seller-accent) 22%, transparent) 0, transparent 34%), var(--bb-seller-dark);
  color: var(--bb-white);
  box-shadow: var(--bb-shadow-lg);
}

.bb-seller-fee-card::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--bb-seller-accent) 18%, transparent);
  pointer-events: none;
}

.bb-seller-fee-content,
.bb-seller-fee-box {
  position: relative;
  z-index: 2;
}

.bb-seller-fee-title {
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(2rem, 3vw, 2.65rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.04em;
}

.bb-seller-fee-text {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--bb-seller-on-dark-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-seller-fee-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.bb-seller-fee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-seller-fee-item .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-seller-accent) 18%, transparent);
  color: var(--bb-seller-accent);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
  flex: 0 0 auto;
}

.bb-seller-fee-box {
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-2xl);
  background-color: color-mix(in srgb, var(--bb-white) 8%, transparent);
  backdrop-filter: blur(10px);
}

.bb-seller-fee-box strong {
  display: block;
  margin-bottom: 9px;
  color: var(--bb-seller-accent);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
}

.bb-seller-fee-box span {
  display: block;
  color: var(--bb-seller-on-dark-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-seller-fee-action {
  margin-top: 18px;
}

/* =====================================
   Resources
===================================== */
.bb-seller-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.bb-seller-resource-card {
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-body-bg);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-seller-resource-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-seller-accent) 34%, var(--bb-seller-border));
  box-shadow: var(--bb-shadow-sm);
}

.bb-seller-resource-card > .material-symbols-outlined {
  display: block;
  margin-bottom: 14px;
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-seller-resource-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
}

.bb-seller-resource-card span:last-child {
  display: block;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   FAQ
===================================== */
.bb-seller-faq-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.bb-seller-faq-card {
  overflow: hidden;
  border: 1px solid var(--bb-seller-border);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-body-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-seller-faq-card + .bb-seller-faq-card {
  margin-top: 12px;
}

.bb-seller-faq-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  gap: 16px;
  padding: 18px 20px;
  border: 0;
  background-color: transparent;
  color: var(--bb-seller-heading);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  text-align: left;
}

.bb-seller-faq-button .material-symbols-outlined {
  color: var(--bb-seller-accent-text);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  transition: transform var(--bb-transition-normal);
}

.bb-seller-faq-button[aria-expanded=true] .material-symbols-outlined {
  transform: rotate(180deg);
}

.bb-seller-faq-body {
  padding: 0 20px 20px;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Final CTA
===================================== */
.bb-seller-final-section {
  padding-bottom: 86px;
}

.bb-seller-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 36px;
  border: 1px solid color-mix(in srgb, var(--bb-seller-accent) 28%, var(--bb-seller-border));
  border-radius: var(--bb-radius-2xl);
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--bb-seller-accent) 18%, transparent) 0, transparent 34%), var(--bb-body-bg);
  box-shadow: var(--bb-shadow-sm);
}

.bb-seller-final-title {
  margin: 0;
  color: var(--bb-seller-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.045em;
}

.bb-seller-final-text {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--bb-seller-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-seller-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1399.98px) {
  .bb-seller-model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-seller-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-seller-hero-inner,
  .bb-seller-ecosystem-grid,
  .bb-seller-fee-card,
  .bb-seller-final-inner {
    grid-template-columns: 1fr;
  }
  .bb-seller-hero-panel {
    max-width: 680px;
  }
  .bb-seller-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-seller-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-seller-final-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 991.98px) {
  .bb-seller-hero {
    padding-top: 34px;
    padding-bottom: 46px;
  }
  .bb-seller-hero-inner {
    gap: 34px;
  }
  .bb-seller-model-grid,
  .bb-seller-ecosystem-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-seller-compare-grid {
    grid-template-columns: 1fr;
  }
  .bb-seller-section {
    padding: 58px 0;
  }
}
@media (max-width: 767.98px) {
  .bb-seller-hero {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .bb-seller-hero-title {
    font-size: clamp(2.25rem, 12vw, 3.65rem);
  }
  .bb-seller-hero-actions .btn,
  .bb-seller-locomotive-actions .btn,
  .bb-seller-final-actions .btn {
    width: 100%;
  }
  .bb-seller-ui-grid,
  .bb-seller-model-grid,
  .bb-seller-ecosystem-side,
  .bb-seller-process,
  .bb-seller-resource-grid {
    grid-template-columns: 1fr;
  }
  .bb-seller-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
  }
  .bb-seller-mini-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .bb-seller-mini-badge {
    grid-column: 2;
    width: fit-content;
  }
  .bb-seller-locomotive-card,
  .bb-seller-fee-card,
  .bb-seller-final-inner {
    padding: 24px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-seller-marquee-title {
    text-align: left;
  }
}
@media (max-width: 575.98px) {
  .bb-seller-hero-panel,
  .bb-seller-ecosystem-ui,
  .bb-seller-stat,
  .bb-seller-model-card,
  .bb-seller-locomotive-card,
  .bb-seller-ecosystem-card,
  .bb-seller-compare-card,
  .bb-seller-step,
  .bb-seller-fee-card,
  .bb-seller-fee-box,
  .bb-seller-resource-card,
  .bb-seller-faq-card,
  .bb-seller-final-inner {
    border-radius: var(--bb-radius-xl);
  }
  .bb-seller-stat-strip {
    grid-template-columns: 1fr;
  }
  .bb-seller-section {
    padding: 46px 0;
  }
  .bb-seller-hero-panel,
  .bb-seller-ui-body,
  .bb-seller-model-card,
  .bb-seller-resource-card {
    padding: 18px;
  }
}
/* =====================================
   Bulbulustur Web - RFQ Create
   Showcase form page
   Layout: left brand surface + right floating form
   PURE CSS
===================================== */
.bb-form-showcase-page {
  min-height: 100vh;
  background-color: var(--bb-body-bg);
}

.bb-rfq-create-page {
  --bb-rfq-primary-bg: var(--bb-color-green-800);
  --bb-rfq-primary-bg-dark: var(--bb-color-green-900);
  --bb-rfq-primary-bg-light: var(--bb-color-green-800);
  --bb-rfq-muted-bg: var(--bb-color-gray-100);
  --bb-rfq-showcase-title: var(--bb-white);
  --bb-rfq-showcase-text: rgba(255, 255, 255, 0.84);
  --bb-rfq-showcase-muted: rgba(255, 255, 255, 0.68);
  --bb-rfq-showcase-soft: rgba(255, 255, 255, 0.1);
  --bb-rfq-showcase-border: rgba(255, 255, 255, 0.16);
  --bb-rfq-stage-max: 1440px;
  --bb-rfq-form-width: 560px;
  --bb-rfq-page-x: clamp(1rem, 4vw, 4.25rem);
  --bb-rfq-page-y: clamp(1rem, 3vw, 2rem);
  --bb-rfq-card-radius: var(--bb-radius-xl, 1.5rem);
  --bb-rfq-form-shadow:
    0 2.25rem 5.75rem color-mix(in srgb, var(--bb-coal-300) 16%, transparent),
    0 0.75rem 2rem color-mix(in srgb, var(--bb-coal-300) 7%, transparent),
    0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 5%, transparent);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--bb-body-color);
}

/* -------------------------------------
   Split background
------------------------------------- */
.bb-rfq-create-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 68% 32%;
  pointer-events: none;
}

.bb-rfq-create-bg-primary {
  background: radial-gradient(circle at 18% 18%, rgba(255, 211, 0, 0.08), transparent 26%), radial-gradient(circle at 74% 52%, rgba(255, 255, 255, 0.05), transparent 30%), linear-gradient(135deg, var(--bb-rfq-primary-bg-light) 0%, var(--bb-rfq-primary-bg) 48%, var(--bb-rfq-primary-bg-dark) 100%);
}

.bb-rfq-create-bg-muted {
  background-color: var(--bb-rfq-muted-bg);
}

/* -------------------------------------
   Top controls
------------------------------------- */
.bb-rfq-create-logo {
  position: relative;
  z-index: 2;
  padding-top: var(--bb-rfq-page-y);
  padding-left: var(--bb-rfq-page-x);
}

.bb-rfq-create-logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bb-rfq-create-logo img {
  display: block;
  width: auto;
  height: clamp(38px, 3.4vw, 48px);
}

.bb-rfq-create-language {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 4;
}

.bb-rfq-create-language .bb-web-footer-language-trigger {
  min-height: 2.5rem;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none;
}

.bb-rfq-create-language .bb-web-footer-language-trigger:hover {
  color: var(--bb-emphasis-color);
}

.bb-rfq-create-language .bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-rfq-create-language .bb-web-footer-language-menu {
  min-width: 11rem;
}

/* -------------------------------------
   Main stage
------------------------------------- */
.bb-rfq-create-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bb-rfq-stage-max);
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4.5rem) var(--bb-rfq-page-x) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bb-rfq-form-width);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

/* -------------------------------------
   Left showcase
------------------------------------- */
.bb-rfq-create-showcase {
  min-width: 0;
  color: var(--bb-rfq-showcase-title);
}

.bb-rfq-create-hero-copy {
  max-width: 720px;
  padding: 0;
  color: var(--bb-rfq-showcase-title);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* -------------------------------------
   RFQ black chip
------------------------------------- */
.bb-rfq-create-rfq-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: 0.9rem;
  padding: 0.55rem 0.8rem 0.35rem 0.8rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 92%, var(--bb-primary));
  border: 1px solid color-mix(in srgb, var(--bb-white) 16%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-icon-size-lg);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--bb-coal-300) 18%, transparent);
}

/* -------------------------------------
   Hero copy
------------------------------------- */
.bb-rfq-create-title {
  max-width: 700px;
  margin: 0;
  color: var(--bb-rfq-showcase-title);
  font-size: clamp(2rem, 3.45vw, 3.45rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-rfq-create-lead {
  max-width: 660px;
  margin: 1rem 0 0 0;
  color: var(--bb-rfq-showcase-text);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Trust chips
------------------------------------- */
.bb-rfq-create-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.bb-rfq-create-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 11%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  backdrop-filter: blur(0.625rem);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--bb-coal-300) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bb-rfq-create-trust-item .material-symbols-outlined {
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-color-green-900);
  background-color: var(--bb-primary);
  border-radius: 50%;
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* -------------------------------------
   Story carousel
------------------------------------- */
.bb-rfq-create-story {
  position: relative;
  max-width: 660px;
  margin-top: clamp(3.25rem, 7vw, 6rem);
  padding-left: 3rem;
}

.bb-rfq-create-story-ribbon {
  position: absolute;
  top: -0.85rem;
  left: 4.35rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  color: var(--bb-color-green-900);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 26%, transparent);
}

.bb-rfq-create-story-carousel {
  position: relative;
  overflow: visible;
}

.bb-rfq-create-story-carousel .carousel-inner {
  overflow: hidden;
  border-radius: var(--bb-radius-xl, 1.5rem);
}

.bb-rfq-create-story-carousel .carousel-item {
  min-height: 100%;
}

.bb-rfq-create-story-card {
  position: relative;
  min-height: 320px;
  padding: 2rem;
  color: var(--bb-rfq-showcase-title);
  background: radial-gradient(circle at top right, rgba(255, 211, 0, 0.13), transparent 34%), rgba(255, 255, 255, 0.1);
  border: 1px solid var(--bb-rfq-showcase-border);
  border-radius: var(--bb-radius-xl, 1.5rem);
  box-shadow: 0 1.5rem 3.25rem color-mix(in srgb, var(--bb-coal-300) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
}

.bb-rfq-create-story-card::before {
  content: "“";
  display: block;
  margin-bottom: 0.75rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-display-lg);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
}

.bb-rfq-create-story-card-chip {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.65rem 0.38rem 0.65rem;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-rfq-create-story-title {
  max-width: 500px;
  margin: 0;
  color: var(--bb-rfq-showcase-title);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-rfq-create-story-quote {
  max-width: 540px;
  margin: 1.25rem 0 0 0;
  color: var(--bb-rfq-showcase-text);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
}

.bb-rfq-create-story-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 1.75rem;
  color: var(--bb-rfq-showcase-title);
}

.bb-rfq-create-story-footer strong {
  color: var(--bb-rfq-showcase-title);
  font-weight: var(--bb-fw-bold);
}

.bb-rfq-create-story-footer span {
  color: var(--bb-rfq-showcase-muted);
  font-size: var(--bb-fs-sm);
}

/* -------------------------------------
   Story carousel dots
------------------------------------- */
.bb-rfq-create-story-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-top: 1rem;
  padding-left: 0.35rem;
}

.bb-rfq-create-story-control {
  display: none !important;
}

.bb-rfq-create-story-indicators {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.bb-rfq-create-story-indicators [data-bs-target] {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-white) 42%, transparent);
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.16s ease, background-color 0.16s ease;
}

.bb-rfq-create-story-indicators .active {
  width: 1.45rem;
  background-color: var(--bb-primary);
}

.bb-rfq-create-story-dots,
.bb-rfq-create-story-media {
  display: none;
}

/* -------------------------------------
   Right form
------------------------------------- */
.bb-rfq-create-form-wrap {
  min-width: 0;
  transform: translateX(-1.75rem);
}

.bb-rfq-create-form-card {
  width: 100%;
  padding: clamp(1.45rem, 2.2vw, 1.85rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 56%, transparent);
  border-radius: var(--bb-rfq-card-radius);
  box-shadow: var(--bb-rfq-form-shadow);
}

.bb-rfq-create-form-header {
  margin-bottom: 1.35rem;
}

.bb-rfq-create-form-title {
  margin: 0;
  color: color-mix(in srgb, var(--bb-emphasis-color) 90%, var(--bb-secondary-color));
  font-size: clamp(1.45rem, 1.85vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-rfq-create-form-text {
  margin: 0.55rem 0 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Form spacing
   Form object styles come from Main CSS Forms.
------------------------------------- */
.bb-rfq-create-form .row {
  margin-bottom: 0.95rem;
}

.bb-rfq-create-form .mb-3 {
  margin-bottom: 0.95rem !important;
}

.bb-rfq-create-form textarea.form-control {
  min-height: 132px;
}

.bb-rfq-create-form .field-validation-error,
.bb-rfq-create-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* -------------------------------------
   Submit action
------------------------------------- */
.bb-rfq-create-actions {
  margin-top: 1.15rem;
}

.bb-rfq-create-actions .btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--bb-primary-inverse) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 96%, var(--bb-surface-elevated)) 0%, var(--bb-primary) 100%) !important;
  border-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300)) !important;
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  box-shadow: 0 0.7rem 1.3rem color-mix(in srgb, var(--bb-primary) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.bb-rfq-create-actions .btn:hover {
  color: var(--bb-primary-inverse) !important;
  background: linear-gradient(180deg, var(--bb-primary) 0%, color-mix(in srgb, var(--bb-primary) 86%, var(--bb-dark)) 100%) !important;
  border-color: color-mix(in srgb, var(--bb-primary) 76%, var(--bb-dark)) !important;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1399.98px) {
  .bb-rfq-create-stage {
    max-width: 1320px;
    grid-template-columns: minmax(0, 1fr) 540px;
    gap: clamp(1.75rem, 4vw, 3.75rem);
  }
  .bb-rfq-create-form-wrap {
    transform: translateX(-1.15rem);
  }
}
@media (max-width: 1199.98px) {
  .bb-rfq-create-bg {
    grid-template-columns: 64% 36%;
  }
  .bb-rfq-create-stage {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
    gap: 2.5rem;
  }
  .bb-rfq-create-form-wrap {
    transform: translateX(0);
  }
  .bb-rfq-create-title {
    font-size: clamp(1.9rem, 3.8vw, 3rem);
  }
  .bb-rfq-create-story {
    padding-left: 1.25rem;
  }
  .bb-rfq-create-story-ribbon {
    left: 2.6rem;
  }
}
@media (max-width: 991.98px) {
  .bb-rfq-create-page {
    overflow: visible;
  }
  .bb-rfq-create-bg {
    position: absolute;
    grid-template-columns: 1fr;
  }
  .bb-rfq-create-bg-muted {
    display: none;
  }
  .bb-rfq-create-language {
    position: absolute;
  }
  .bb-rfq-create-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 2rem;
    padding-top: 2rem;
  }
  .bb-rfq-create-form-card {
    max-width: 680px;
    margin-left: 0;
  }
  .bb-rfq-create-story {
    max-width: 680px;
    padding-left: 0;
  }
  .bb-rfq-create-story-ribbon {
    left: 1rem;
  }
}
@media (max-width: 767.98px) {
  .bb-rfq-create-logo {
    padding-left: 1rem;
  }
  .bb-rfq-create-logo img {
    height: 34px;
  }
  .bb-rfq-create-language {
    top: 1rem;
    right: 1rem;
  }
  .bb-rfq-create-stage {
    padding-inline: 1rem;
  }
  .bb-rfq-create-title {
    font-size: var(--bb-fs-3xl);
  }
  .bb-rfq-create-lead {
    font-size: var(--bb-fs-base);
  }
  .bb-rfq-create-trust {
    gap: 0.625rem;
    margin-top: 1.5rem;
  }
  .bb-rfq-create-trust-item {
    min-height: 2.35rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--bb-fs-sm);
  }
  .bb-rfq-create-story {
    margin-top: 3rem;
  }
  .bb-rfq-create-story-card {
    min-height: 300px;
    padding: 1.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-rfq-create-story-card-chip {
    position: static;
    width: max-content;
    margin-bottom: 0.85rem;
  }
  .bb-rfq-create-story-card::before {
    font-size: var(--bb-icon-size-4xl);
  }
  .bb-rfq-create-story-title {
    font-size: var(--bb-fs-lg);
  }
  .bb-rfq-create-story-quote {
    font-size: var(--bb-fs-sm);
  }
  .bb-rfq-create-form-card {
    padding: 1.25rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-rfq-create-form-title {
    font-size: var(--bb-icon-size-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-rfq-create-language .bb-web-footer-language-trigger span:not(.material-symbols-outlined):not(.bb-web-footer-language-arrow) {
    display: none;
  }
  .bb-rfq-create-stage {
    padding-top: 1.5rem;
  }
  .bb-rfq-create-trust {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-rfq-create-form .row {
    margin-bottom: 0;
  }
  .bb-rfq-create-story-carousel-footer {
    justify-content: center;
    padding-left: 0;
  }
}
/* - Web Bulbulustur Logon Pages */
/* =====================================
   Bulbulustur Web - Login
   Form light page polish
===================================== */
.bb-login-page {
  --bb-login-accent: var(--bb-primary);
  --bb-login-accent-color: var(--bb-dark);
  --bb-login-link-color: var(--bb-primary);
  --bb-login-social-icon-size: 1.75rem;
  position: relative;
}

/* -------------------------------------
   Language
------------------------------------- */
.bb-login-language {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.bb-login-language .bb-web-footer-language-trigger {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none;
}

.bb-login-language .bb-web-footer-language-trigger:hover {
  color: var(--bb-emphasis-color);
}

.bb-login-language .bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-login-card-head {
  margin-bottom: 1.75rem;
}

.bb-login-card-head .badge {
  margin-bottom: 1rem;
}

.bb-login-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-login-text {
  margin: 0.65rem 0 0 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Form
------------------------------------- */
.bb-login-form .form-label {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-login-form .form-control {
  min-height: 2.95rem;
}

.bb-login-form .input-group-text {
  min-width: 2.95rem;
  justify-content: center;
}

.bb-login-form .input-group-text .material-symbols-outlined {
  color: var(--bb-secondary-color);
}

.bb-login-forgot-link {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  text-decoration: none;
}

.bb-login-forgot-link:hover {
  color: var(--bb-login-link-color);
  text-decoration: underline;
}

/* -------------------------------------
   Submit
------------------------------------- */
.bb-login-submit {
  --bb-btn-bg: var(--bb-login-accent);
  --bb-btn-color: var(--bb-login-accent-color);
  --bb-btn-border-color: var(--bb-login-accent);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-login-accent) 88%, var(--bb-dark));
  --bb-btn-hover-color: var(--bb-login-accent-color);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-login-accent) 80%, var(--bb-dark));
  --bb-btn-active-color: var(--bb-login-accent-color);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  min-height: 3.25rem;
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Register row
------------------------------------- */
.bb-login-register {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-login-register a {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-login-register a:hover {
  color: var(--bb-login-link-color);
  text-decoration: underline;
}

/* -------------------------------------
   Separator
------------------------------------- */
.bb-login-separator {
  margin: 1.75rem 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

/* -------------------------------------
   Social login
------------------------------------- */
.bb-login-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bb-login-social-btn {
  --bb-btn-bg: var(--bb-body-bg);
  --bb-btn-color: var(--bb-emphasis-color);
  --bb-btn-border-color: var(--bb-border-color);
  --bb-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-btn-hover-color: var(--bb-emphasis-color);
  --bb-btn-hover-border-color: var(--bb-border-color);
  min-height: 3rem;
  font-weight: var(--bb-fw-semibold);
}

.bb-login-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-login-social-icon-size);
  height: var(--bb-login-social-icon-size);
  border-radius: var(--bb-radius);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-login-social-icon-google {
  color: var(--bb-emphasis-color);
}

.bb-login-social-icon-facebook {
  color: var(--bb-white);
}

/* -------------------------------------
   Layout-light card polish only for login
------------------------------------- */
.bb-layout-light-page:has(.bb-login-page) .bb-layout-light-card {
  border: var(--bb-border-width) solid var(--bb-border-color);
  box-shadow: var(--bb-shadow-sm);
}

.bb-layout-light-page:has(.bb-login-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

/* -------------------------------------
   Layout-light width discipline
   Login should stay compact
------------------------------------- */
.bb-layout-light-page:has(.bb-login-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 30rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-login-page) .bb-layout-light-card {
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-login-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.bb-login-page {
  width: 100%;
}

.bb-login-card-head {
  text-align: left;
}

.bb-login-form {
  width: 100%;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-login-language {
    position: absolute;
  }
  .bb-login-title {
    font-size: var(--bb-icon-size-xl);
  }
  .bb-login-social {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-login-language .bb-web-footer-language-trigger span:not(.material-symbols-outlined):not(.bb-web-footer-language-arrow) {
    display: none;
  }
}
/* =====================================
   Bulbulustur Web - Forgot Password
   Form light page polish
===================================== */
.bb-forgot-page {
  --bb-forgot-accent: var(--bb-primary);
  --bb-forgot-accent-color: var(--bb-dark);
  --bb-forgot-link-color: var(--bb-primary);
  position: relative;
}

/* -------------------------------------
   Language
------------------------------------- */
.bb-forgot-language {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.bb-forgot-language .bb-web-footer-language-trigger {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none;
}

.bb-forgot-language .bb-web-footer-language-trigger:hover {
  color: var(--bb-emphasis-color);
}

.bb-forgot-language .bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-forgot-card-head {
  margin-bottom: 1.75rem;
}

.bb-forgot-card-head .badge {
  margin-bottom: 1rem;
}

.bb-forgot-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-forgot-text {
  margin: 0.65rem 0 0 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Form
------------------------------------- */
.bb-forgot-form .form-label {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-forgot-form .form-control {
  min-height: 2.95rem;
}

.bb-forgot-form .input-group-text {
  min-width: 2.95rem;
  justify-content: center;
}

.bb-forgot-form .input-group-text .material-symbols-outlined {
  color: var(--bb-secondary-color);
}

/* -------------------------------------
   Actions
------------------------------------- */
.bb-forgot-submit {
  --bb-btn-bg: var(--bb-forgot-accent);
  --bb-btn-color: var(--bb-forgot-accent-color);
  --bb-btn-border-color: var(--bb-forgot-accent);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-forgot-accent) 88%, var(--bb-dark));
  --bb-btn-hover-color: var(--bb-forgot-accent-color);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-forgot-accent) 80%, var(--bb-dark));
  --bb-btn-active-color: var(--bb-forgot-accent-color);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  min-height: 3.25rem;
  font-weight: var(--bb-fw-bold);
}

.bb-forgot-secondary-action {
  --bb-btn-bg: var(--bb-body-bg);
  --bb-btn-color: var(--bb-emphasis-color);
  --bb-btn-border-color: var(--bb-border-color);
  --bb-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-btn-hover-color: var(--bb-emphasis-color);
  --bb-btn-hover-border-color: var(--bb-border-color);
  min-height: 3.15rem;
  font-weight: var(--bb-fw-semibold);
}

.bb-forgot-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-forgot-login-link a {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-forgot-login-link a:hover {
  color: var(--bb-forgot-link-color);
  text-decoration: underline;
}

/* -------------------------------------
   Layout-light width discipline
   Forgot password should stay compact
------------------------------------- */
.bb-layout-light-page:has(.bb-forgot-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 30rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-forgot-page) .bb-layout-light-card {
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-forgot-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.bb-forgot-page {
  width: 100%;
}

.bb-forgot-card-head {
  text-align: left;
}

.bb-forgot-form {
  width: 100%;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-forgot-language {
    position: absolute;
  }
  .bb-forgot-title {
    font-size: var(--bb-icon-size-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-forgot-language .bb-web-footer-language-trigger span:not(.material-symbols-outlined):not(.bb-web-footer-language-arrow) {
    display: none;
  }
}
/* =====================================
   Bulbulustur Web - Firstdoor
   Auth form family
===================================== */
.bb-firstdoor-page {
  --bb-firstdoor-accent: var(--bb-primary);
  --bb-firstdoor-accent-color: var(--bb-dark);
  --bb-firstdoor-link-color: var(--bb-primary);
  position: relative;
}

/* -------------------------------------
   Language
------------------------------------- */
.bb-firstdoor-language {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.bb-firstdoor-language .bb-web-footer-language-trigger {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none;
}

.bb-firstdoor-language .bb-web-footer-language-trigger:hover {
  color: var(--bb-emphasis-color);
}

.bb-firstdoor-language .bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-firstdoor-card-head {
  margin-bottom: 1.75rem;
}

.bb-firstdoor-card-head .badge {
  margin-bottom: 1rem;
}

.bb-firstdoor-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-firstdoor-text {
  margin: 0.65rem 0 0 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Form
------------------------------------- */
.bb-firstdoor-form .form-label {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-firstdoor-form .form-control {
  min-height: 2.95rem;
}

.bb-firstdoor-form .input-group-text {
  min-width: 2.95rem;
  justify-content: center;
}

.bb-firstdoor-form .input-group-text .material-symbols-outlined {
  color: var(--bb-secondary-color);
}

/* -------------------------------------
   Actions
------------------------------------- */
.bb-firstdoor-submit {
  --bb-btn-bg: var(--bb-firstdoor-accent);
  --bb-btn-color: var(--bb-firstdoor-accent-color);
  --bb-btn-border-color: var(--bb-firstdoor-accent);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-firstdoor-accent) 88%, var(--bb-dark));
  --bb-btn-hover-color: var(--bb-firstdoor-accent-color);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-firstdoor-accent) 80%, var(--bb-dark));
  --bb-btn-active-color: var(--bb-firstdoor-accent-color);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  min-height: 3.25rem;
  font-weight: var(--bb-fw-bold);
}

.bb-firstdoor-secondary-action {
  --bb-btn-bg: var(--bb-body-bg);
  --bb-btn-color: var(--bb-emphasis-color);
  --bb-btn-border-color: var(--bb-border-color);
  --bb-btn-hover-bg: var(--bb-tertiary-bg);
  --bb-btn-hover-color: var(--bb-emphasis-color);
  --bb-btn-hover-border-color: var(--bb-border-color);
  min-height: 3.15rem;
  font-weight: var(--bb-fw-semibold);
}

.bb-firstdoor-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-firstdoor-login-link a {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-firstdoor-login-link a:hover {
  color: var(--bb-firstdoor-link-color);
  text-decoration: underline;
}

.bb-firstdoor-terms {
  margin-top: 1.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  text-align: center;
}

.bb-firstdoor-terms a {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
}

.bb-firstdoor-terms a:hover {
  color: var(--bb-firstdoor-link-color);
  text-decoration: underline;
}

/* -------------------------------------
   Layout-light width discipline
   Firstdoor should stay compact
------------------------------------- */
.bb-layout-light-page:has(.bb-firstdoor-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 30rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-firstdoor-page) .bb-layout-light-card {
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-firstdoor-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.bb-firstdoor-page {
  width: 100%;
}

.bb-firstdoor-card-head {
  text-align: left;
}

.bb-firstdoor-form {
  width: 100%;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-firstdoor-language {
    position: absolute;
  }
  .bb-firstdoor-title {
    font-size: var(--bb-icon-size-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-firstdoor-language .bb-web-footer-language-trigger span:not(.material-symbols-outlined):not(.bb-web-footer-language-arrow) {
    display: none;
  }
}
/* =====================================
   Bulbulustur Web - Set New Password
   Auth form family
===================================== */
.bb-set-password-page {
  --bb-set-password-accent: var(--bb-primary);
  --bb-set-password-accent-color: var(--bb-dark);
  --bb-set-password-link-color: var(--bb-primary);
  position: relative;
}

/* -------------------------------------
   Language
------------------------------------- */
.bb-set-password-language {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.bb-set-password-language .bb-web-footer-language-trigger {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none;
}

.bb-set-password-language .bb-web-footer-language-trigger:hover {
  color: var(--bb-emphasis-color);
}

.bb-set-password-language .bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-set-password-card-head {
  margin-bottom: 1.75rem;
}

.bb-set-password-card-head .badge {
  margin-bottom: 1rem;
}

.bb-set-password-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-set-password-text {
  margin: 0.65rem 0 0 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Form
------------------------------------- */
.bb-set-password-form .form-label {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-set-password-form .form-control {
  min-height: 2.95rem;
}

.bb-set-password-form .input-group-text {
  min-width: 2.95rem;
  justify-content: center;
}

.bb-set-password-form .input-group-text .material-symbols-outlined {
  color: var(--bb-secondary-color);
}

/* -------------------------------------
   Actions
------------------------------------- */
.bb-set-password-submit {
  --bb-btn-bg: var(--bb-set-password-accent);
  --bb-btn-color: var(--bb-set-password-accent-color);
  --bb-btn-border-color: var(--bb-set-password-accent);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-set-password-accent) 88%, var(--bb-dark));
  --bb-btn-hover-color: var(--bb-set-password-accent-color);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-set-password-accent) 80%, var(--bb-dark));
  --bb-btn-active-color: var(--bb-set-password-accent-color);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  min-height: 3.25rem;
  font-weight: var(--bb-fw-bold);
}

.bb-set-password-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-set-password-login-link a {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
}

.bb-set-password-login-link a:hover {
  color: var(--bb-set-password-link-color);
  text-decoration: underline;
}

/* -------------------------------------
   Layout-light width discipline
   Set password should stay compact
------------------------------------- */
.bb-layout-light-page:has(.bb-set-password-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 30rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-set-password-page) .bb-layout-light-card {
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-set-password-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.bb-set-password-page {
  width: 100%;
}

.bb-set-password-card-head {
  text-align: left;
}

.bb-set-password-form {
  width: 100%;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-set-password-language {
    position: absolute;
  }
  .bb-set-password-title {
    font-size: var(--bb-icon-size-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-set-password-language .bb-web-footer-language-trigger span:not(.material-symbols-outlined):not(.bb-web-footer-language-arrow) {
    display: none;
  }
}
/* =====================================
   Bulbulustur Web - Register
   Auth form family / Important page
===================================== */
.bb-register-page {
  --bb-register-accent: var(--bb-primary);
  --bb-register-accent-color: var(--bb-dark);
  --bb-register-link-color: var(--bb-primary);
  position: relative;
}

/* -------------------------------------
   Language
------------------------------------- */
.bb-register-language {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.bb-register-language .bb-web-footer-language-trigger {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none;
}

.bb-register-language .bb-web-footer-language-trigger:hover {
  color: var(--bb-emphasis-color);
}

.bb-register-language .bb-web-footer-language-trigger .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-register-card-head {
  margin-bottom: 1.75rem;
}

.bb-register-card-head .badge {
  margin-bottom: 1rem;
}

.bb-register-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-3xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-register-text {
  margin: 0.65rem 0 0 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

.bb-register-email-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0.55rem 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-register-email-chip .material-symbols-outlined {
  color: var(--bb-register-link-color);
  font-size: var(--bb-icon-size-sm);
}

/* -------------------------------------
   Sections
------------------------------------- */
.bb-register-section {
  padding: 1rem 0;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-register-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bb-register-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bb-register-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--bb-register-link-color);
  background-color: color-mix(in srgb, var(--bb-register-link-color) 10%, transparent);
  border-radius: var(--bb-radius);
}

.bb-register-section-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-register-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-register-section-text {
  margin: 0.25rem 0 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Form
------------------------------------- */
.bb-register-form .form-label {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-register-form .form-control,
.bb-register-form .form-select {
  min-height: 2.95rem;
}

.bb-register-form .input-group-text {
  min-width: 2.95rem;
  justify-content: center;
}

.bb-register-form .input-group-text .material-symbols-outlined {
  color: var(--bb-secondary-color);
}

/* -------------------------------------
   Actions
------------------------------------- */
.bb-register-actions {
  margin-top: 1.25rem;
}

.bb-register-submit {
  --bb-btn-bg: var(--bb-register-accent);
  --bb-btn-color: var(--bb-register-accent-color);
  --bb-btn-border-color: var(--bb-register-accent);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-register-accent) 88%, var(--bb-dark));
  --bb-btn-hover-color: var(--bb-register-accent-color);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-register-accent) 80%, var(--bb-dark));
  --bb-btn-active-color: var(--bb-register-accent-color);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  width: 100%;
  min-height: 3.25rem;
  font-weight: var(--bb-fw-bold);
}

.bb-register-terms {
  margin-top: 1.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  text-align: center;
}

.bb-register-terms a {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
  text-decoration: none;
}

.bb-register-terms a:hover {
  color: var(--bb-register-link-color);
  text-decoration: underline;
}

/* -------------------------------------
   Layout-light width discipline
   Register needs a medium form canvas
------------------------------------- */
.bb-layout-light-page:has(.bb-register-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 48rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-register-page) .bb-layout-light-card {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-register-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.35rem);
}

.bb-register-page {
  width: 100%;
}

.bb-register-card-head {
  text-align: left;
}

.bb-register-form {
  width: 100%;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-register-language {
    position: absolute;
  }
  .bb-register-title {
    font-size: var(--bb-icon-size-xl);
  }
  .bb-register-section-head {
    gap: 0.65rem;
  }
}
@media (max-width: 575.98px) {
  .bb-register-language .bb-web-footer-language-trigger span:not(.material-symbols-outlined):not(.bb-web-footer-language-arrow) {
    display: none;
  }
  .bb-register-section {
    padding: 0.9rem 0;
  }
}
/* =====================================
   Web Cookie Settings Page
   Scope: .bb-cookie-page

   Purpose:
   - Cookie preference center
   - No banner styles here
   - Token-driven
   - Light / Navy / Dark compatible
===================================== */
/* =====================================
   Cookie Page Mode Tokens
===================================== */
.bb-cookie-page {
  --bb-cookie-page-bg: var(--bb-body-bg);
  --bb-cookie-surface: var(--bb-surface-elevated);
  --bb-cookie-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg));
  --bb-cookie-card-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 98%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg))
      );
  --bb-cookie-card-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-cookie-card-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-cookie-card-shadow-hover:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
  --bb-cookie-intro-bg:
      radial-gradient(
          circle at 94% 18%,
          color-mix(in srgb, var(--bb-primary) 11%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-surface-elevated) 98%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated))
      );
  --bb-cookie-actions-bg:
      radial-gradient(
          circle at 96% 20%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 15rem
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-cookie-item-bg: color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg));
  --bb-cookie-item-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-cookie-toggle-bg: color-mix(in srgb, var(--bb-secondary-color) 26%, var(--bb-border-color));
  --bb-cookie-help-shadow:
      0 1.75rem 4rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 24%, transparent),
      var(--bb-shadow-lg);
}

html[data-bs-theme=navy] .bb-cookie-page {
  --bb-cookie-surface: var(--bb-surface-elevated);
  --bb-cookie-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 68%, var(--bb-body-bg));
  --bb-cookie-card-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg))
      );
  --bb-cookie-card-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-cookie-card-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 14%, transparent);
  --bb-cookie-card-shadow-hover:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 28%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 16%, transparent);
  --bb-cookie-intro-bg:
      radial-gradient(
          circle at 94% 18%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-primary) 5%, var(--bb-body-bg))
      );
  --bb-cookie-actions-bg:
      radial-gradient(
          circle at 96% 20%,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 15rem
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-cookie-item-bg: color-mix(in srgb, var(--bb-tertiary-bg) 66%, var(--bb-body-bg));
  --bb-cookie-item-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-cookie-toggle-bg: color-mix(in srgb, var(--bb-secondary-color) 23%, var(--bb-body-bg));
  --bb-cookie-help-shadow:
      0 1.75rem 4rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 36%, transparent),
      var(--bb-shadow-lg);
}

html[data-bs-theme=dark] .bb-cookie-page {
  --bb-cookie-surface: var(--bb-surface-elevated);
  --bb-cookie-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 62%, var(--bb-body-bg));
  --bb-cookie-card-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-body-bg))
      );
  --bb-cookie-card-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-cookie-card-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 24%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 16%, transparent);
  --bb-cookie-card-shadow-hover:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 30%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent);
  --bb-cookie-intro-bg:
      radial-gradient(
          circle at 94% 18%,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-primary) 5%, var(--bb-body-bg))
      );
  --bb-cookie-actions-bg:
      radial-gradient(
          circle at 96% 20%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 15rem
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-cookie-item-bg: color-mix(in srgb, var(--bb-tertiary-bg) 62%, var(--bb-body-bg));
  --bb-cookie-item-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-cookie-toggle-bg: color-mix(in srgb, var(--bb-secondary-color) 22%, var(--bb-body-bg));
  --bb-cookie-help-shadow:
      0 1.75rem 4rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 42%, transparent),
      var(--bb-shadow-lg);
}

/* =====================================
   Page Shell
===================================== */
.bb-cookie-page {
  min-height: 100%;
  color: var(--bb-body-color);
  background-color: var(--bb-cookie-page-bg);
}

/* =====================================
   Page Hero
===================================== */
.bb-cookie-hero-content {
  position: relative;
  z-index: 2;
  max-width: 58rem;
}

.bb-cookie-label {
  margin-bottom: 0.875rem;
}

.bb-cookie-title {
  margin-bottom: 1rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(var(--bb-fs-3xl), 4vw, var(--bb-fs-display-md));
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-cookie-text {
  max-width: 54rem;
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-lg);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Layout
===================================== */
.bb-cookie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.bb-cookie-main,
.bb-cookie-aside {
  min-width: 0;
}

/* =====================================
   Shared Cards
===================================== */
.bb-cookie-intro-card,
.bb-cookie-card,
.bb-cookie-actions,
.bb-cookie-vendors-card,
.bb-cookie-side-card {
  background: var(--bb-cookie-card-bg);
  border: var(--bb-border-width) solid var(--bb-cookie-card-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-cookie-card-shadow);
}

.bb-cookie-intro-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--bb-cookie-intro-bg);
}

.bb-cookie-intro-card p,
.bb-cookie-actions p,
.bb-cookie-vendors-card p {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Category Cards
===================================== */
.bb-cookie-card {
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-cookie-card:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  box-shadow: var(--bb-cookie-card-shadow-hover);
}

.bb-cookie-card-body {
  padding: clamp(1.25rem, 2.4vw, 1.625rem);
}

.bb-cookie-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-cookie-card-title {
  margin: 0 0 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(var(--bb-fs-xl), 2vw, var(--bb-fs-3xl));
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.025em);
}

.bb-cookie-card-subtitle {
  margin-bottom: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-cookie-card-text {
  margin-bottom: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Status / Toggle
===================================== */
.bb-cookie-status {
  min-width: 7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-cookie-status-required {
  color: color-mix(in srgb, var(--bb-info) 78%, var(--bb-emphasis-color));
  background-color: color-mix(in srgb, var(--bb-info) 12%, var(--bb-body-bg));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-info) 28%, var(--bb-border-color));
}

.bb-cookie-status-enabled {
  color: color-mix(in srgb, var(--bb-success) 78%, var(--bb-emphasis-color));
  background-color: color-mix(in srgb, var(--bb-success) 12%, var(--bb-body-bg));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 28%, var(--bb-border-color));
}

.bb-cookie-status-disabled {
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-cookie-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.bb-cookie-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-cookie-toggle-slider {
  position: relative;
  width: 3.625rem;
  height: 2rem;
  background-color: var(--bb-cookie-toggle-bg);
  border-radius: var(--bb-radius-pill);
  box-shadow: inset 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-border-color) 82%, transparent), 0 0.375rem 1rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent);
  transition: background-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-cookie-toggle-slider::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--bb-surface-elevated);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal);
}

.bb-cookie-toggle input:focus-visible + .bb-cookie-toggle-slider {
  box-shadow: inset 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-border-color) 82%, transparent), 0 0 0 var(--bb-focus-ring-width, 0.25rem) color-mix(in srgb, var(--bb-primary) 28%, transparent);
}

.bb-cookie-toggle input:checked + .bb-cookie-toggle-slider {
  background-color: var(--bb-success);
  box-shadow: inset 0 0 0 var(--bb-border-width) color-mix(in srgb, var(--bb-success) 84%, var(--bb-border-color)), 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-success) 22%, transparent);
}

.bb-cookie-toggle input:checked + .bb-cookie-toggle-slider::before {
  transform: translateX(1.625rem);
}

.bb-cookie-toggle input:disabled + .bb-cookie-toggle-slider {
  opacity: var(--bb-disabled-opacity);
  cursor: not-allowed;
}

/* =====================================
   Details / Cookie Items
===================================== */
.bb-cookie-details {
  margin-top: 1rem;
}

.bb-cookie-collapse-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--bb-transition-fast);
}

.bb-cookie-collapse-link:hover,
.bb-cookie-collapse-link:focus {
  color: var(--bb-primary);
  text-decoration: none;
}

.bb-cookie-item-list {
  display: grid;
  gap: 0.875rem;
  margin-top: 1rem;
}

.bb-cookie-item {
  padding: 1rem;
  background-color: var(--bb-cookie-item-bg);
  border: var(--bb-border-width) solid var(--bb-cookie-item-border);
  border-radius: var(--bb-radius-xl);
}

.bb-cookie-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.bb-cookie-item-head strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-cookie-item-head span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-cookie-item h3 {
  margin: 0 0 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-cookie-item p {
  margin: 0 0 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-cookie-item small {
  display: block;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Actions
===================================== */
.bb-cookie-actions {
  padding: 1.5rem;
  margin-top: 1.5rem;
  background: var(--bb-cookie-actions-bg);
}

.bb-cookie-actions p {
  margin-bottom: 1rem;
}

.bb-cookie-actions .bb-web-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bb-cookie-actions .btn {
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Vendors
===================================== */
.bb-cookie-vendors-card {
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.bb-cookie-vendors-card h2,
.bb-cookie-help-card h2 {
  margin-bottom: 1rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(var(--bb-fs-xl), 2vw, var(--bb-fs-3xl));
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.025em);
}

.bb-cookie-vendors-card p {
  margin-bottom: 1rem;
}

.bb-cookie-vendor-list {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1rem;
  margin-bottom: 0;
}

.bb-cookie-vendor-list li {
  break-inside: avoid;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Help Card
===================================== */
.bb-cookie-help-card {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  padding: 2rem;
  color: var(--bb-theme-on-dark);
  background: radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 12rem), radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--bb-info) 12%, transparent), transparent 16rem), linear-gradient(135deg, var(--bb-coal-300) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-cookie-help-shadow);
}

.bb-cookie-help-card h2,
.bb-cookie-help-card p,
.bb-cookie-help-card .bb-web-actions {
  position: relative;
  z-index: 2;
}

.bb-cookie-help-card h2 {
  color: var(--bb-theme-on-dark);
}

.bb-cookie-help-card p {
  margin-bottom: 1rem;
  color: color-mix(in srgb, var(--bb-theme-on-dark) 82%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-cookie-help-card .bb-web-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* =====================================
   Sidebar
===================================== */
.bb-cookie-side-card {
  position: sticky;
  top: 6.25rem;
  padding: 1.5rem;
}

.bb-cookie-side-card h2 {
  margin-bottom: 1rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-cookie-side-row {
  padding: 0.875rem 0;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
}

.bb-cookie-side-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bb-cookie-side-row strong {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--bb-letter-spacing-wide, 0.05em);
}

.bb-cookie-side-row span {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-cookie-grid {
    grid-template-columns: 1fr;
  }
  .bb-cookie-side-card {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .bb-cookie-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .bb-cookie-intro-card,
  .bb-cookie-card-body,
  .bb-cookie-actions,
  .bb-cookie-vendors-card,
  .bb-cookie-side-card,
  .bb-cookie-help-card {
    padding: 1.25rem;
  }
  .bb-cookie-vendor-list {
    columns: 1;
  }
  .bb-cookie-actions .bb-web-actions,
  .bb-cookie-help-card .bb-web-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bb-cookie-actions .btn,
  .bb-cookie-help-card .btn {
    width: 100%;
  }
}
/* -------------------------------------
   Top nav
------------------------------------- */
.bb-size-guide-nav {
  display: flex;
  align-items: center;
  gap: 1.625rem;
  overflow-x: auto;
  min-height: 3.625rem;
  white-space: nowrap;
  scrollbar-width: thin;
  background-color: color-mix(in srgb, var(--bb-body-bg) 96%, transparent);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-size-guide-nav-link {
  position: relative;
  min-height: 3.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex: 0 0 auto;
  color: var(--bb-secondary-color) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-size-guide-nav-link:hover,
.bb-size-guide-nav-link.is-active {
  color: var(--bb-emphasis-color) !important;
}

.bb-size-guide-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.1875rem;
  background-color: var(--bb-emphasis-color);
  border-radius: var(--bb-radius-pill);
}

.bb-size-guide-nav-link .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* -------------------------------------
   Main layout
------------------------------------- */
.bb-size-guide-main {
  padding: 1.875rem 0 3.5rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
}

.bb-size-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.625rem;
  gap: 1.875rem;
  align-items: flex-start;
}

.bb-size-guide-content {
  min-width: 0;
}

/* -------------------------------------
   Sections
------------------------------------- */
.bb-size-guide-section {
  margin-bottom: 1.375rem;
  padding: 1.625rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  scroll-margin-top: 7.5rem;
}

.bb-size-guide-section.is-soft {
  background: radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 32%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated)) 100%);
  border-color: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
}

.bb-size-guide-section-label {
  margin-bottom: 0.75rem;
}

.bb-size-guide-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-size-guide-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-size-guide-section-text {
  max-width: 47.5rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Tables
------------------------------------- */
.bb-size-guide-table-wrap {
  overflow-x: auto;
  margin-top: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  scrollbar-width: thin;
}

.bb-size-guide-table {
  width: 100%;
  min-width: 47.5rem;
  border-collapse: collapse;
}

.bb-size-guide-table th {
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-align: left;
  white-space: nowrap;
}

.bb-size-guide-table td {
  padding: 0.8125rem 0.875rem;
  color: var(--bb-body-color);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  white-space: nowrap;
}

.bb-size-guide-table tbody tr:last-child td {
  border-bottom: 0;
}

.bb-size-guide-table tbody tr:hover td {
  background-color: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-white));
}

/* -------------------------------------
   Tips
------------------------------------- */
.bb-size-guide-tip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.bb-size-guide-tip-card {
  padding: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-size-guide-tip-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white));
  border-radius: var(--bb-radius-lg);
}

.bb-size-guide-tip-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-size-guide-tip-card strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-size-guide-tip-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Measure list
------------------------------------- */
.bb-size-guide-measure-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.125rem;
}

.bb-size-guide-measure-item {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  gap: 0.8125rem;
  align-items: flex-start;
  padding: 0.9375rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-size-guide-measure-number {
  width: 2.625rem;
  height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-size-guide-measure-item strong {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-size-guide-measure-item p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Side
------------------------------------- */
.bb-size-guide-side {
  position: sticky;
  top: 5rem;
}

.bb-size-guide-side-card {
  margin-bottom: 1rem;
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-size-guide-side-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-size-guide-side-title .material-symbols-outlined {
  width: 1.5625rem;
  height: 1.5625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-size-guide-side-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.bb-size-guide-side-link {
  min-height: 2.625rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  color: var(--bb-body-color) !important;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-size-guide-side-link:hover {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-surface-elevated));
}

.bb-size-guide-side-link .material-symbols-outlined {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-size-guide-note {
  padding: 1rem;
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 32%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-size-guide-note strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-size-guide-note p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-size-guide-layout {
    grid-template-columns: 1fr;
  }
  .bb-size-guide-side {
    position: static;
  }
  .bb-size-guide-tip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-size-guide-action-link {
    width: 100%;
  }
  .bb-size-guide-nav {
    min-height: 3.25rem;
    gap: 1.125rem;
  }
  .bb-size-guide-nav-link {
    min-height: 3.25rem;
    font-size: var(--bb-fs-sm);
  }
  .bb-size-guide-main {
    padding-top: 1.25rem;
    padding-bottom: 2.25rem;
  }
  .bb-size-guide-section {
    padding: 1.125rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-size-guide-section-title {
    font-size: var(--bb-icon-size-lg);
  }
  .bb-size-guide-tip-grid {
    grid-template-columns: 1fr;
  }
  .bb-size-guide-measure-item {
    grid-template-columns: 2.375rem minmax(0, 1fr);
  }
  .bb-size-guide-measure-number {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: var(--bb-radius);
  }
}
.bb-b2c-question-label {
  margin-bottom: 0.8125rem;
}

.bb-b2c-question-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-question-title {
  max-width: 48rem;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-b2c-question-title span {
  color: var(--bb-success);
}

.bb-b2c-question-subtitle {
  max-width: 47.5rem;
  margin: 0.6875rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Summary */
.bb-b2c-question-summary-card {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-sm);
  padding: 1rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-b2c-question-summary-title {
  margin: 0 0 0.75rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-question-summary-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5625rem;
}

.bb-b2c-question-summary-item {
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  padding: 0.625rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-b2c-question-summary-icon {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 22%, var(--bb-white)) 0%, color-mix(in srgb, var(--bb-success) 12%, var(--bb-white)) 100%);
  border-radius: var(--bb-radius);
}

.bb-b2c-question-summary-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-question-summary-item strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-question-summary-item span span {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-question-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.625rem;
  gap: 1.5rem;
  align-items: start;
}

.bb-b2c-question-left {
  min-width: 0;
}

.bb-b2c-question-right {
  position: sticky;
  top: 1.375rem;
  min-width: 0;
}

/* Toolbar */
.bb-b2c-question-toolbar {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  margin-bottom: 1rem;
  padding: 1rem;
}

.bb-b2c-question-toolbar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 0.75rem;
  align-items: center;
}

.bb-b2c-question-search {
  min-width: 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0 0.8125rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-question-search .material-symbols-outlined {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-question-search input {
  width: 100%;
  color: var(--bb-emphasis-color);
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-question-sort {
  min-height: 2.75rem;
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-question-topic-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-top: 0.75rem;
  scrollbar-width: thin;
}

.bb-b2c-question-topic {
  border-width: var(--bb-border-width);
}

/* List */
.bb-b2c-question-list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.bb-b2c-question-card {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  padding: 1.125rem;
}

.bb-b2c-question-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.8125rem;
}

.bb-b2c-question-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-info);
  background-color: var(--bb-info-light);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-question-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-question-card-copy {
  min-width: 0;
  flex: 1;
}

.bb-b2c-question-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-bottom: 0.5rem;
}

.bb-b2c-question-text {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-question-answer-area {
  padding-left: 3.25rem;
}

/* Empty */
.bb-b2c-question-empty {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  padding: 1.75rem;
  text-align: center;
  border-style: dashed;
  background-color: var(--bb-tertiary-bg);
}

.bb-b2c-question-empty-icon {
  width: 3.375rem;
  height: 3.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8125rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white));
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-question-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-b2c-question-empty strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-question-empty p {
  max-width: 35rem;
  margin: 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Sidebar */
.bb-b2c-question-ask-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.25rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--bb-success) 34%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 78%, var(--bb-success)) 0%, var(--bb-success) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 28%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-question-ask-card::after {
  content: "";
  position: absolute;
  right: -2.75rem;
  bottom: -3.625rem;
  width: 9.375rem;
  height: 9.375rem;
  background-color: color-mix(in srgb, var(--bb-primary) 20%, transparent);
  border-radius: 50%;
}

.bb-b2c-question-ask-card h3,
.bb-b2c-question-ask-card p,
.bb-b2c-question-ask-card a {
  position: relative;
  z-index: 2;
}

.bb-b2c-question-ask-card h3 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-question-ask-card p {
  margin: 0.5625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-question-ask-btn {
  width: 100%;
  min-height: 2.6875rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-question-ask-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-question-side-card {
  --bb-card-radius: var(--bb-radius-lg);
  --bb-card-shadow: var(--bb-shadow-xs);
  margin-bottom: 1rem;
  padding: 1.125rem;
}

.bb-b2c-question-side-title {
  margin: 0 0 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-question-side-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-question-side-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.bb-b2c-question-side-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.6875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-question-side-icon {
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white)) 0%, color-mix(in srgb, var(--bb-success) 12%, var(--bb-white)) 100%);
  border-radius: var(--bb-radius);
}

.bb-b2c-question-side-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-question-side-item strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-question-side-item span span {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-question-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2c-question-right {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-question-title {
    font-size: var(--bb-fs-3xl);
  }
  .bb-b2c-question-subtitle {
    font-size: var(--bb-fs-sm);
  }
  .bb-b2c-question-summary-card {
    display: none;
  }
  .bb-b2c-question-toolbar-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-question-topic-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .bb-b2c-question-card-head {
    gap: 0.625rem;
  }
  .bb-b2c-question-answer-area {
    padding-left: 0;
  }
}
/* =====================================
   B2C Other Store Prices
   Component-specific
   Uses Main CSS: bb-card, bb-chip, bb-tiny-slider, buttons
===================================== */
.bb-b2c-other-sellers {
  position: relative;
}

.bb-b2c-other-sellers-summary {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  overflow: hidden;
}

.bb-b2c-other-sellers-summary.is-single {
  --bb-card-body-py: 1rem;
}

.bb-b2c-other-sellers-summary-head {
  align-items: flex-start;
  gap: 1rem;
}

.bb-b2c-other-sellers-summary-copy {
  min-width: 0;
}

.bb-b2c-other-sellers-summary-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-other-sellers-summary.is-single .bb-b2c-other-sellers-summary-title {
  font-size: var(--bb-fs-base);
}

.bb-b2c-other-sellers-summary-text {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-other-sellers-summary-body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Preview */
.bb-b2c-other-sellers-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-b2c-other-sellers-preview-slider {
  --bb-ts-gap: 0.625rem;
  --bb-ts-shadow: none;
  --bb-ts-radius: var(--bb-radius);
}

.bb-b2c-other-sellers-preview-card {
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border-color: var(--bb-border-color);
}

.bb-b2c-other-sellers-single-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
}

.bb-b2c-other-sellers-single-left {
  min-width: 0;
}

.bb-b2c-other-sellers-store-row,
.bb-b2c-other-seller-store-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-bottom: 0.5rem;
}

.bb-b2c-other-sellers-store-name,
.bb-b2c-other-seller-store {
  min-width: 0;
  overflow: hidden;
  color: var(--bb-emphasis-color) !important;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-other-sellers-store-name:hover,
.bb-b2c-other-seller-store:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-other-sellers-price {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2c-other-sellers-delivery-chip {
  width: fit-content;
  margin-top: 0.5rem;
}

.bb-b2c-other-sellers-single-detail-link {
  min-height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  white-space: nowrap;
}

.bb-b2c-other-sellers-single-detail-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-other-sellers-summary-action {
  width: 100%;
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-other-sellers-summary-action .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Drawer */
.bb-b2c-other-sellers-overlay {
  position: fixed;
  inset: 0;
  z-index: 1065;
  background-color: color-mix(in srgb, var(--bb-coal-300) 42%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast);
}

.bb-b2c-other-sellers-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bb-b2c-other-sellers-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1070;
  width: 38.75rem;
  max-width: calc(100vw - 1.5rem);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
  box-shadow: -1.125rem 0 2.875rem color-mix(in srgb, var(--bb-coal-300) 20%, transparent);
  transform: translateX(105%);
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-other-sellers-drawer.is-active {
  transform: translateX(0);
}

.bb-b2c-other-sellers-drawer-head {
  min-height: 5.125rem;
  padding: 1.125rem 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-other-sellers-drawer-title-wrap {
  min-width: 0;
}

.bb-b2c-other-sellers-drawer-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2c-other-sellers-drawer-subtitle {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: 1.4;
}

.bb-b2c-other-sellers-drawer-close {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-other-sellers-drawer-close:hover {
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-other-sellers-drawer-close .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-other-sellers-center-link-wrap {
  padding: 0.875rem 1.375rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) 0%, var(--bb-body-bg) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-other-sellers-center-link {
  width: 100%;
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-other-sellers-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  background-color: var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  overflow-x: auto;
}

.bb-b2c-other-sellers-filter-btn {
  border: 0;
}

.bb-b2c-other-sellers-info-strip {
  padding: 0.75rem 1.375rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-b2c-other-sellers-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.125rem 1.375rem 1.5rem;
}

.bb-b2c-other-sellers-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Seller cards */
.bb-b2c-other-seller-card {
  --bb-card-radius: var(--bb-radius-lg);
  --bb-card-shadow: var(--bb-shadow-xs);
  padding: 1rem;
}

.bb-b2c-other-seller-card.is-recommended {
  border-color: color-mix(in srgb, var(--bb-primary) 35%, var(--bb-border-color));
  background: radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--bb-primary) 12%, transparent), transparent 30%), var(--bb-body-bg);
}

.bb-b2c-other-seller-badge {
  width: fit-content;
  margin-bottom: 0.75rem;
}

.bb-b2c-other-seller-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.bb-b2c-other-seller-left {
  min-width: 0;
}

.bb-b2c-other-seller-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-other-seller-price {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2c-other-seller-price-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

.bb-b2c-other-seller-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5625rem;
  min-width: 9.375rem;
}

.bb-b2c-other-seller-select {
  min-width: 9.0625rem;
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-other-seller-store-link {
  color: var(--bb-secondary-color) !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  text-decoration: underline !important;
}

.bb-b2c-other-seller-store-link:hover {
  color: var(--bb-primary) !important;
}

body.bb-b2c-other-sellers-open {
  overflow: hidden;
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-b2c-other-sellers-summary-head {
    align-items: flex-start;
  }
  .bb-b2c-other-sellers-preview-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-other-sellers-single-card {
    grid-template-columns: 1fr;
  }
  .bb-b2c-other-sellers-single-detail-link {
    width: 100%;
  }
  .bb-b2c-other-sellers-drawer {
    width: 100%;
    max-width: 100%;
  }
  .bb-b2c-other-sellers-drawer-head {
    min-height: 4.75rem;
    padding: 1rem;
  }
  .bb-b2c-other-sellers-drawer-title {
    font-size: var(--bb-fs-xl);
  }
  .bb-b2c-other-sellers-center-link-wrap,
  .bb-b2c-other-sellers-filter-row,
  .bb-b2c-other-sellers-info-strip,
  .bb-b2c-other-sellers-drawer-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .bb-b2c-other-seller-main {
    grid-template-columns: 1fr;
  }
  .bb-b2c-other-seller-right {
    align-items: stretch;
    min-width: 0;
  }
  .bb-b2c-other-seller-select {
    width: 100%;
  }
  .bb-b2c-other-seller-store-link {
    text-align: center;
  }
}
/* =====================================
   Banner Component
   Type-based banner system
===================================== */
.bb-banner {
  --bb-banner-text-color: var(--bb-emphasis-color);
  --bb-banner-bg-image: none;
  position: relative;
  overflow: hidden;
  color: var(--bb-banner-text-color);
  background-image: var(--bb-banner-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--bb-radius-xl);
}

.bb-banner-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bb-banner-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  margin-bottom: 0.875rem;
  padding: 0 0.75rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-banner-title {
  margin: 0;
  color: inherit;
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-banner-text {
  max-width: 42rem;
  margin: 0.875rem 0 0;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bb-banner-actions .btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Type 1
   Large visual CTA
===================================== */
.bb-banner-type-1 {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) 0%, var(--bb-body-bg) 100%), var(--bb-banner-bg-image);
  border: var(--bb-border-width) solid var(--bb-border-color);
  box-shadow: var(--bb-shadow-xs);
}

.bb-banner-type-1-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
  gap: 1.5rem;
  align-items: center;
}

.bb-banner-type-1-visuals {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  align-items: center;
}

.bb-banner-picture {
  overflow: hidden;
  min-height: 13.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-banner-picture img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 13.75rem;
  object-fit: cover;
}

.bb-banner-picture.is-secondary {
  transform: translateY(1.25rem);
}

/* =====================================
   Type 2
   Horizontal CTA box
===================================== */
.bb-banner-type-2 {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--bb-banner-text-color);
  background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 28%), linear-gradient(135deg, var(--bb-coal-300) 0%, color-mix(in srgb, var(--bb-coal-300) 86%, var(--bb-primary)) 100%), var(--bb-banner-bg-image);
  box-shadow: var(--bb-shadow-sm);
}

.bb-banner-type-2 .bb-banner-label {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 14%, transparent);
}

.bb-banner-type-2 .bb-banner-title {
  color: var(--bb-white);
}

.bb-banner-type-2 .bb-banner-text {
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
}

.bb-banner-type-2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
}

.bb-banner-type-2-actions {
  justify-content: flex-end;
  margin-top: 0;
}

/* =====================================
   Type 3
   B2C list CTA v2
===================================== */
.bb-banner-type-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.5rem;
  align-items: center;
  min-height: 15.625rem;
  padding: clamp(1.25rem, 3vw, 1.875rem);
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--bb-primary) 22%, transparent), transparent 28%), radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--bb-warning) 16%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-color-purple-900) 0%, var(--bb-color-purple-900) 45%, var(--bb-color-gray-900) 100%), var(--bb-banner-bg-image);
  box-shadow: 0 1.125rem 2.5rem color-mix(in srgb, var(--bb-coal-300) 18%, transparent);
}

.bb-banner-type-3::before {
  content: "";
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 14.375rem;
  height: 14.375rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 6%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-banner-type-3-copy,
.bb-banner-type-3-panel {
  position: relative;
  z-index: 2;
}

.bb-banner-type-3-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2rem;
  margin-bottom: 0.875rem;
  padding: 0 0.75rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 11%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-banner-type-3-label .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-banner-type-3-title {
  max-width: 40rem;
  margin: 0;
  color: var(--bb-white);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.bb-banner-type-3-text {
  max-width: 41.25rem;
  margin: 0.75rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 82%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-banner-type-3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.125rem;
}

.bb-banner-type-3-actions .btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-banner-type-3-panel {
  display: grid;
  gap: 0.625rem;
}

.bb-banner-type-3-stat {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.375rem;
  padding: 0 0.875rem;
  color: color-mix(in srgb, var(--bb-white) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 13%, transparent);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-banner-type-3-stat .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-banner-type-1-grid,
  .bb-banner-type-2-grid,
  .bb-banner-type-3 {
    grid-template-columns: 1fr;
  }
  .bb-banner-type-2-actions {
    justify-content: flex-start;
  }
  .bb-banner-type-3-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-banner {
    border-radius: var(--bb-radius-lg);
  }
  .bb-banner-type-1-visuals {
    grid-template-columns: 1fr;
  }
  .bb-banner-picture.is-secondary {
    transform: none;
  }
  .bb-banner-actions,
  .bb-banner-type-3-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-banner-actions .btn,
  .bb-banner-type-3-actions .btn {
    width: 100%;
  }
  .bb-banner-type-3-panel {
    grid-template-columns: 1fr;
  }
}
.bb-b2b-category-king-advert {
  --bb-b2b-king-primary: var(--bb-primary);
  --bb-b2b-king-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-king-dark: var(--bb-dark);
  --bb-b2b-king-ink: var(--bb-emphasis-color);
  --bb-b2b-king-muted: var(--bb-secondary-color);
  --bb-b2b-king-border: var(--bb-border-color);
  --bb-b2b-king-yellow: var(--bb-warning);
  --bb-b2b-king-radius-xl: var(--bb-radius-xl);
  --bb-b2b-king-radius-lg: var(--bb-radius-lg);
  --bb-b2b-king-radius: var(--bb-radius);
  --bb-b2b-king-shadow: var(--bb-shadow-xs);
  --bb-b2b-king-shadow-hover: var(--bb-shadow-sm);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(18rem, 23.75rem) minmax(0, 1fr);
  gap: 1.375rem;
  margin-bottom: 1.625rem;
  padding: 1.125rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-warning) 16%, transparent), transparent 30%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) 0%, var(--bb-white) 72%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-b2b-king-border));
  border-radius: var(--bb-b2b-king-radius-xl);
  box-shadow: var(--bb-b2b-king-shadow);
}

.bb-b2b-category-king-advert::after {
  content: "";
  position: absolute;
  right: -5.5rem;
  bottom: -6.5rem;
  width: 15rem;
  height: 15rem;
  background-color: color-mix(in srgb, var(--bb-primary) 6%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-category-king-advert-media,
.bb-b2b-category-king-advert-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bb-b2b-category-king-advert-media {
  min-height: 15rem;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-b2b-king-radius-lg);
}

/* Child carousel compatibility */
.bb-b2b-category-king-advert-media .carousel,
.bb-b2b-category-king-advert-media .carousel-inner,
.bb-b2b-category-king-advert-media .carousel-item {
  height: 100%;
}

.bb-b2b-category-king-advert-media img {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  display: block;
  object-fit: cover;
}

.bb-b2b-category-king-advert-media .carousel-control-prev,
.bb-b2b-category-king-advert-media .carousel-control-next {
  top: 50%;
  width: 2.375rem;
  height: 2.375rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 48%, transparent);
  border-radius: var(--bb-radius);
  opacity: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(0.5rem);
}

.bb-b2b-category-king-advert-media .carousel-control-prev {
  left: 0.625rem;
}

.bb-b2b-category-king-advert-media .carousel-control-next {
  right: 0.625rem;
}

.bb-b2b-category-king-advert-media .carousel-control-prev .material-symbols-outlined,
.bb-b2b-category-king-advert-media .carousel-control-next .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-b2b-category-king-advert-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.875rem;
}

.bb-b2b-category-king-advert-company {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.bb-b2b-category-king-advert-logo {
  width: 5.25rem;
  height: 5.25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-b2b-king-radius);
  text-decoration: none !important;
}

.bb-b2b-category-king-advert-logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.bb-b2b-category-king-advert-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bb-b2b-king-primary-soft);
}

.bb-b2b-category-king-advert-logo-placeholder .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-b2b-category-king-advert-company-info {
  min-width: 0;
}

.bb-b2b-category-king-advert-badge {
  margin-bottom: 0.5rem;
}

.bb-b2b-category-king-advert-badge .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-category-king-advert-company-title {
  margin: 0 0 0.375rem;
  color: var(--bb-b2b-king-ink);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.bb-b2b-category-king-advert-company-title a {
  color: inherit;
  text-decoration: none !important;
}

.bb-b2b-category-king-advert-company-title a:hover {
  color: var(--bb-primary);
}

.bb-b2b-category-king-advert-company-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2b-category-king-advert-company-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bb-b2b-king-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-category-king-advert-company-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-category-king-advert-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  white-space: nowrap;
}

.bb-b2b-category-king-advert-profile-btn {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-category-king-advert-profile-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-category-king-advert-sponsored-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bb-secondary-color) !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-b2b-category-king-advert-sponsored-link:hover {
  color: var(--bb-primary) !important;
}

.bb-b2b-category-king-advert-sponsored-link .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* Products */
.bb-b2b-category-king-advert-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-b2b-category-king-advert-product {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.625rem;
  color: inherit !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  border-radius: var(--bb-b2b-king-radius);
  text-decoration: none !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-category-king-advert-product:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-king-shadow-hover);
}

.bb-b2b-category-king-advert-product-media {
  width: 5.25rem;
  height: 4.625rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 36%, transparent);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius);
}

.bb-b2b-category-king-advert-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0.375rem;
}

.bb-b2b-category-king-advert-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-category-king-advert-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

.bb-b2b-category-king-advert-product-body {
  min-width: 0;
}

.bb-b2b-category-king-advert-product-body strong {
  display: -webkit-box;
  min-height: 2.125rem;
  max-height: 2.125rem;
  overflow: hidden;
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2b-category-king-advert {
    grid-template-columns: 1fr;
  }
  .bb-b2b-category-king-advert-media,
  .bb-b2b-category-king-advert-media img {
    min-height: 13.75rem;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-category-king-advert-company {
    grid-template-columns: 4.75rem minmax(0, 1fr);
  }
  .bb-b2b-category-king-advert-logo {
    width: 4.75rem;
    height: 4.75rem;
  }
  .bb-b2b-category-king-advert-actions {
    grid-column: 1/-1;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-category-king-advert {
    padding: 0.75rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-category-king-advert-company {
    grid-template-columns: 1fr;
  }
  .bb-b2b-category-king-advert-products {
    grid-template-columns: 1fr;
  }
  .bb-b2b-category-king-advert-product {
    grid-template-columns: 4.875rem minmax(0, 1fr);
  }
  .bb-b2b-category-king-advert-product-media {
    width: 4.875rem;
    height: 4.375rem;
  }
  .bb-b2b-category-king-advert-profile-btn {
    width: 100%;
    justify-content: center;
  }
}
/* =====================================
   Bulbulustur Web - B2B Company Profile
   Layer: pages/company/_b2b-company-profile.scss

   Purpose:
   - Supplier profile hero
   - Company profile navigation
   - Company profile content layout
   - Trust side card
   - Component card wrappers

   Rules:
   - Light / Navy / Dark safe
   - Token based
   - No hardcoded fallback colors
   - No legacy template classes
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-b2b-company-profile-accent: var(--bb-primary);
  --bb-b2b-company-profile-accent-hover: var(--bb-primary-hover);
  --bb-b2b-company-profile-accent-soft: var(--bb-primary-light);
  --bb-b2b-company-profile-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-b2b-company-profile-b2b-accent: var(--bb-color-blue-600);
  --bb-b2b-company-profile-b2b-accent-hover: var(--bb-color-blue-700);
  --bb-b2b-company-profile-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-600) 12%, var(--bb-body-bg));
  --bb-b2b-company-profile-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-700) 76%, var(--bb-emphasis-color));
  --bb-b2b-company-profile-page-bg: var(--bb-body-bg);
  --bb-b2b-company-profile-surface: var(--bb-body-bg);
  --bb-b2b-company-profile-surface-soft: var(--bb-tertiary-bg);
  --bb-b2b-company-profile-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-profile-heading: var(--bb-emphasis-color);
  --bb-b2b-company-profile-text: var(--bb-body-color);
  --bb-b2b-company-profile-muted: var(--bb-secondary-color);
  --bb-b2b-company-profile-subtle: var(--bb-tertiary-color);
  --bb-b2b-company-profile-border: var(--bb-border-color);
  --bb-b2b-company-profile-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-company-profile-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-company-profile-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-profile-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-b2b-company-profile-hero-decoration: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-b2b-company-profile-hero-decoration-muted: color-mix(in srgb, var(--bb-tertiary-color) 14%, transparent);
  --bb-b2b-company-profile-logo-bg: var(--bb-body-bg);
  --bb-b2b-company-profile-logo-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-company-profile-shadow-xs: var(--bb-shadow-xs);
  --bb-b2b-company-profile-shadow-sm: var(--bb-shadow-sm);
  --bb-b2b-company-profile-shadow-lg: var(--bb-shadow-lg);
  --bb-b2b-company-profile-trust-bg-start: var(--bb-color-navy-900);
  --bb-b2b-company-profile-trust-bg-end: color-mix(in srgb, var(--bb-color-navy-900) 82%, var(--bb-primary));
  --bb-b2b-company-profile-trust-color: var(--bb-theme-on-dark);
  --bb-b2b-company-profile-trust-muted: color-mix(in srgb, var(--bb-theme-on-dark) 76%, transparent);
  --bb-b2b-company-profile-trust-border: color-mix(in srgb, var(--bb-primary) 26%, transparent);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-b2b-company-profile-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-b2b-company-profile-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2b-company-profile-b2b-accent: var(--bb-color-blue-500);
  --bb-b2b-company-profile-b2b-accent-hover: var(--bb-color-blue-400);
  --bb-b2b-company-profile-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 15%, var(--bb-body-bg));
  --bb-b2b-company-profile-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 88%, var(--bb-emphasis-color));
  --bb-b2b-company-profile-page-bg: var(--bb-body-bg);
  --bb-b2b-company-profile-surface: var(--bb-surface-elevated);
  --bb-b2b-company-profile-surface-soft: var(--bb-surface-soft);
  --bb-b2b-company-profile-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-profile-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-b2b-company-profile-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-company-profile-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2b-company-profile-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-profile-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg));
  --bb-b2b-company-profile-hero-decoration: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-b2b-company-profile-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
  --bb-b2b-company-profile-logo-bg: var(--bb-surface-elevated);
  --bb-b2b-company-profile-logo-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-company-profile-trust-bg-start: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-color-navy-900));
  --bb-b2b-company-profile-trust-bg-end: color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-primary));
  --bb-b2b-company-profile-trust-muted: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  --bb-b2b-company-profile-trust-border: color-mix(in srgb, var(--bb-primary) 30%, transparent);
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-b2b-company-profile-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-b2b-company-profile-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2b-company-profile-b2b-accent: var(--bb-color-blue-500);
  --bb-b2b-company-profile-b2b-accent-hover: var(--bb-color-blue-400);
  --bb-b2b-company-profile-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 14%, var(--bb-body-bg));
  --bb-b2b-company-profile-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 86%, var(--bb-emphasis-color));
  --bb-b2b-company-profile-page-bg: var(--bb-body-bg);
  --bb-b2b-company-profile-surface: var(--bb-surface-elevated);
  --bb-b2b-company-profile-surface-soft: var(--bb-surface-soft);
  --bb-b2b-company-profile-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-profile-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-company-profile-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2b-company-profile-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2b-company-profile-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-profile-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-b2b-company-profile-hero-decoration: color-mix(in srgb, var(--bb-primary) 17%, transparent);
  --bb-b2b-company-profile-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 7%, transparent);
  --bb-b2b-company-profile-logo-bg: var(--bb-surface-elevated);
  --bb-b2b-company-profile-logo-border: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-b2b-company-profile-trust-bg-start: color-mix(in srgb, var(--bb-body-bg) 80%, var(--bb-color-navy-900));
  --bb-b2b-company-profile-trust-bg-end: color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-primary));
  --bb-b2b-company-profile-trust-muted: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  --bb-b2b-company-profile-trust-border: color-mix(in srgb, var(--bb-primary) 28%, transparent);
}

/* =====================================
   Page Scope
===================================== */
.bb-b2b-company-profile-page {
  min-width: 0;
  background-color: var(--bb-b2b-company-profile-page-bg);
  color: var(--bb-b2b-company-profile-text);
}

.bb-b2b-company-profile-page a {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-b2b-company-profile-page .material-symbols-outlined {
  line-height: 1;
}

/* =====================================
   Breadcrumb Section
===================================== */
.bb-b2b-company-profile-breadcrumb-section {
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  background-color: var(--bb-b2b-company-profile-page-bg);
}

/* =====================================
   Hero
===================================== */
.bb-b2b-company-profile-hero {
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--bb-b2b-company-profile-page-bg);
}

.bb-b2b-company-profile-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 13.75rem;
  padding: clamp(1.5rem, 2.7vw, 2rem);
  background: radial-gradient(circle at 88% 16%, var(--bb-b2b-company-profile-hero-decoration), transparent 16rem), radial-gradient(circle at 84% 112%, color-mix(in srgb, var(--bb-b2b-company-profile-accent) 13%, transparent), transparent 13rem), linear-gradient(135deg, var(--bb-b2b-company-profile-hero-bg) 0%, var(--bb-b2b-company-profile-hero-bg-soft) 100%);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-company-profile-shadow-sm);
}

.bb-b2b-company-profile-hero-card::before,
.bb-b2b-company-profile-hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-profile-hero-card::before {
  top: -5.5rem;
  right: -4.5rem;
  width: 15rem;
  height: 15rem;
  background-color: var(--bb-b2b-company-profile-hero-decoration-muted);
}

.bb-b2b-company-profile-hero-card::after {
  right: 9.75rem;
  bottom: -5.5rem;
  width: 12.5rem;
  height: 12.5rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-accent) 15%, transparent);
}

.bb-b2b-company-profile-hero-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 12rem;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: center;
  min-height: 9.75rem;
}

.bb-b2b-company-profile-logo {
  width: 7rem;
  height: 7rem;
  min-width: 7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--bb-b2b-company-profile-accent);
  background-color: var(--bb-b2b-company-profile-logo-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-logo-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-profile-shadow-sm);
  text-decoration: none !important;
}

.bb-b2b-company-profile-logo:hover {
  border-color: var(--bb-b2b-company-profile-border-accent);
  box-shadow: var(--bb-b2b-company-profile-shadow-sm);
}

.bb-b2b-company-profile-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2b-company-profile-logo .material-symbols-outlined {
  color: var(--bb-b2b-company-profile-accent);
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-company-profile-hero-content {
  min-width: 0;
}

.bb-b2b-company-profile-chip {
  width: fit-content;
  margin-bottom: 0.55rem;
  color: var(--bb-b2b-company-profile-accent-text);
  background-color: var(--bb-b2b-company-profile-accent-soft);
  border-color: var(--bb-b2b-company-profile-border-accent);
}

.bb-b2b-company-profile-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-profile-title {
  max-width: 46rem;
  margin: 0;
  color: var(--bb-b2b-company-profile-heading);
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.bb-b2b-company-profile-business-types {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-b2b-company-profile-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  max-width: 46rem;
  margin-top: 0.875rem;
}

.bb-b2b-company-profile-meta-item,
.bb-b2b-company-profile-meta span {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0 0.875rem;
  color: var(--bb-b2b-company-profile-heading);
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-surface) 90%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2b-company-profile-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-company-profile-meta-item .material-symbols-outlined,
.bb-b2b-company-profile-meta span .material-symbols-outlined {
  color: var(--bb-b2b-company-profile-accent);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-b2b-company-profile-actions {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 12rem;
  justify-self: end;
  align-self: center;
}

.bb-b2b-company-profile-action {
  width: 100%;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-inline: 0.875rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-b2b-company-profile-action .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-profile-contact-action,
.bb-b2b-company-profile-actions .bb-b2b-company-profile-action:nth-child(2) {
  color: var(--bb-b2b-company-profile-heading) !important;
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-surface) 94%, transparent) !important;
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-border) !important;
  box-shadow: var(--bb-b2b-company-profile-shadow-xs);
}

.bb-b2b-company-profile-contact-action:hover,
.bb-b2b-company-profile-contact-action:focus,
.bb-b2b-company-profile-actions .bb-b2b-company-profile-action:nth-child(2):hover,
.bb-b2b-company-profile-actions .bb-b2b-company-profile-action:nth-child(2):focus {
  color: var(--bb-b2b-company-profile-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-profile-b2b-accent-soft) !important;
  border-color: color-mix(in srgb, var(--bb-b2b-company-profile-b2b-accent) 34%, var(--bb-b2b-company-profile-border)) !important;
}

.bb-b2b-company-profile-follow-action,
.bb-b2b-company-profile-actions .bb-b2b-company-profile-action:nth-child(3) {
  color: var(--bb-theme-on-dark) !important;
  background-color: var(--bb-color-navy-900) !important;
  border: var(--bb-border-width) solid var(--bb-color-navy-900) !important;
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-color-navy-900) 18%, transparent);
}

.bb-b2b-company-profile-follow-action:hover,
.bb-b2b-company-profile-follow-action:focus,
.bb-b2b-company-profile-actions .bb-b2b-company-profile-action:nth-child(3):hover,
.bb-b2b-company-profile-actions .bb-b2b-company-profile-action:nth-child(3):focus {
  color: var(--bb-theme-on-dark) !important;
  background-color: color-mix(in srgb, var(--bb-color-navy-900) 88%, var(--bb-primary)) !important;
  border-color: color-mix(in srgb, var(--bb-color-navy-900) 88%, var(--bb-primary)) !important;
}

/* =====================================
   Profile Navigation
===================================== */
.bb-b2b-company-profile-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.75rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-profile-shadow-xs);
  scrollbar-width: thin;
}

.bb-b2b-company-profile-nav::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-company-profile-nav::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-accent) 20%, var(--bb-b2b-company-profile-border));
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-profile-nav-item {
  min-width: max-content;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0 0.9375rem;
  color: var(--bb-b2b-company-profile-heading) !important;
  background-color: var(--bb-b2b-company-profile-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-b2b-company-profile-nav-item:hover,
.bb-b2b-company-profile-nav-item.active {
  color: var(--bb-b2b-company-profile-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-profile-b2b-accent-soft);
  border-color: color-mix(in srgb, var(--bb-b2b-company-profile-b2b-accent) 32%, var(--bb-b2b-company-profile-border));
}

.bb-b2b-company-profile-nav-item .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Layout
===================================== */
.bb-b2b-company-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: 1.5rem;
  align-items: start;
}

.bb-b2b-company-profile-main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bb-b2b-company-profile-side-column {
  min-width: 0;
}

.bb-b2b-company-profile-section {
  min-width: 0;
}

.bb-b2b-company-profile-section-head {
  margin-bottom: 0.875rem;
}

.bb-b2b-company-profile-section-label {
  width: fit-content;
  margin-bottom: 0.75rem;
}

.bb-b2b-company-profile-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-profile-section-title {
  margin: 0;
  color: var(--bb-b2b-company-profile-heading);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-profile-section-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-company-profile-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-profile-component-card {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  background-color: var(--bb-b2b-company-profile-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-profile-shadow-xs);
}

.bb-b2b-company-profile-component-card:empty {
  display: none;
}

/* =====================================
   Trust Side Card
===================================== */
.bb-b2b-company-profile-side-card {
  position: sticky;
  top: 6rem;
  overflow: hidden;
  padding: 1.25rem;
  color: var(--bb-b2b-company-profile-trust-color);
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-b2b-company-profile-accent) 30%, transparent), transparent 11rem), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--bb-b2b-company-profile-b2b-accent) 20%, transparent), transparent 10rem), linear-gradient(135deg, var(--bb-b2b-company-profile-trust-bg-start) 0%, var(--bb-b2b-company-profile-trust-bg-end) 100%);
  border: var(--bb-border-width) solid var(--bb-b2b-company-profile-trust-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-profile-shadow-sm);
}

.bb-b2b-company-profile-side-card::after {
  content: "";
  position: absolute;
  right: -4.5rem;
  bottom: -5rem;
  width: 12rem;
  height: 12rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-trust-color) 8%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-b2b-company-profile-side-card > * {
  position: relative;
  z-index: 2;
}

.bb-b2b-company-profile-side-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-b2b-company-profile-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-profile-side-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-b2b-company-profile-side-card h2 {
  margin: 0;
  color: var(--bb-b2b-company-profile-trust-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-profile-side-card p {
  margin: 0.625rem 0 1rem;
  color: var(--bb-b2b-company-profile-trust-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-profile-trust-list {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-b2b-company-profile-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: color-mix(in srgb, var(--bb-b2b-company-profile-trust-color) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-b2b-company-profile-trust-color) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-b2b-company-profile-trust-color) 10%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-company-profile-trust-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-b2b-company-profile-accent);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-company-profile-side-actions {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-b2b-company-profile-side-actions .btn {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Child Component Safety
===================================== */
.bb-b2b-company-profile-component-card .js-slick-carousel,
.bb-b2b-company-profile-component-card .slick-slider {
  max-width: 100%;
}

.bb-b2b-company-profile-component-card img {
  max-width: 100%;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-company-profile-hero-main {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
  .bb-b2b-company-profile-actions {
    grid-column: 1/-1;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    justify-self: start;
    margin-top: 0.75rem;
    padding-left: calc(6.5rem + clamp(1rem, 2.5vw, 1.5rem));
  }
  .bb-b2b-company-profile-action {
    width: auto;
    min-width: 11rem;
  }
  .bb-b2b-company-profile-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-profile-side-card {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-profile-hero-card {
    min-height: auto;
    padding: 1.375rem;
  }
  .bb-b2b-company-profile-title {
    max-width: 100%;
    font-size: clamp(1.75rem, 5.5vw, 2.35rem);
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-profile-breadcrumb-section {
    padding-top: 1rem;
  }
  .bb-b2b-company-profile-hero-main {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
  }
  .bb-b2b-company-profile-logo {
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-profile-meta {
    grid-column: 1/-1;
    justify-content: flex-start;
    margin-top: 0.25rem;
  }
  .bb-b2b-company-profile-actions {
    padding-left: 0;
  }
  .bb-b2b-company-profile-action {
    flex: 1 1 auto;
  }
  .bb-b2b-company-profile-nav {
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-profile-component-card {
    border-radius: var(--bb-radius-lg);
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-profile-hero-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-company-profile-hero-main {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-profile-logo {
    width: 5.75rem;
    height: 5.75rem;
    min-width: 5.75rem;
  }
  .bb-b2b-company-profile-title {
    font-size: clamp(1.65rem, 10vw, 2.2rem);
  }
  .bb-b2b-company-profile-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .bb-b2b-company-profile-meta span {
    min-height: 2.25rem;
    font-size: var(--bb-fs-xs);
  }
  .bb-b2b-company-profile-actions {
    flex-direction: column;
  }
  .bb-b2b-company-profile-action {
    width: 100%;
  }
  .bb-b2b-company-profile-side-card {
    border-radius: var(--bb-radius-lg);
  }
}
/* =====================================
   Bulbulustur Web - B2B Company Home
   Layer: pages/company/_b2b-company-home.scss

   Purpose:
   - Supplier storefront home hero
   - Company storefront navigation
   - Showcase section wrappers
   - Trust / showcase card

   Rules:
   - Light / Navy / Dark safe
   - Token based
   - No hardcoded fallback colors
   - No legacy template classes
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-b2b-company-home-accent: var(--bb-primary);
  --bb-b2b-company-home-accent-hover: var(--bb-primary-hover);
  --bb-b2b-company-home-accent-soft: var(--bb-primary-light);
  --bb-b2b-company-home-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-b2b-company-home-b2b-accent: var(--bb-color-blue-600);
  --bb-b2b-company-home-b2b-accent-hover: var(--bb-color-blue-700);
  --bb-b2b-company-home-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-600) 12%, var(--bb-body-bg));
  --bb-b2b-company-home-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-700) 76%, var(--bb-emphasis-color));
  --bb-b2b-company-home-page-bg: var(--bb-body-bg);
  --bb-b2b-company-home-surface: var(--bb-body-bg);
  --bb-b2b-company-home-surface-soft: var(--bb-tertiary-bg);
  --bb-b2b-company-home-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-home-heading: var(--bb-emphasis-color);
  --bb-b2b-company-home-text: var(--bb-body-color);
  --bb-b2b-company-home-muted: var(--bb-secondary-color);
  --bb-b2b-company-home-subtle: var(--bb-tertiary-color);
  --bb-b2b-company-home-border: var(--bb-border-color);
  --bb-b2b-company-home-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-company-home-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-company-home-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-home-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-b2b-company-home-hero-decoration: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-b2b-company-home-hero-decoration-muted: color-mix(in srgb, var(--bb-tertiary-color) 14%, transparent);
  --bb-b2b-company-home-logo-bg: var(--bb-body-bg);
  --bb-b2b-company-home-logo-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-company-home-shadow-xs: var(--bb-shadow-xs);
  --bb-b2b-company-home-shadow-sm: var(--bb-shadow-sm);
  --bb-b2b-company-home-shadow-lg: var(--bb-shadow-lg);
  --bb-b2b-company-home-trust-bg: color-mix(in srgb, var(--bb-body-bg) 92%, transparent);
  --bb-b2b-company-home-trust-border: color-mix(in srgb, var(--bb-border-color) 76%, var(--bb-primary) 24%);
  --bb-b2b-company-home-trust-heading: var(--bb-emphasis-color);
  --bb-b2b-company-home-trust-text: var(--bb-secondary-color);
  --bb-b2b-company-home-trust-item-bg: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg));
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-b2b-company-home-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-b2b-company-home-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2b-company-home-b2b-accent: var(--bb-color-blue-500);
  --bb-b2b-company-home-b2b-accent-hover: var(--bb-color-blue-400);
  --bb-b2b-company-home-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 15%, var(--bb-body-bg));
  --bb-b2b-company-home-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 88%, var(--bb-emphasis-color));
  --bb-b2b-company-home-page-bg: var(--bb-body-bg);
  --bb-b2b-company-home-surface: var(--bb-surface-elevated);
  --bb-b2b-company-home-surface-soft: var(--bb-surface-soft);
  --bb-b2b-company-home-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-home-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-b2b-company-home-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-company-home-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2b-company-home-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-home-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg));
  --bb-b2b-company-home-hero-decoration: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-b2b-company-home-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
  --bb-b2b-company-home-logo-bg: var(--bb-surface-elevated);
  --bb-b2b-company-home-logo-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-company-home-trust-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  --bb-b2b-company-home-trust-border: color-mix(in srgb, var(--bb-border-color) 76%, var(--bb-primary) 24%);
  --bb-b2b-company-home-trust-heading: var(--bb-emphasis-color);
  --bb-b2b-company-home-trust-text: var(--bb-secondary-color);
  --bb-b2b-company-home-trust-item-bg: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-b2b-company-home-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-b2b-company-home-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2b-company-home-b2b-accent: var(--bb-color-blue-500);
  --bb-b2b-company-home-b2b-accent-hover: var(--bb-color-blue-400);
  --bb-b2b-company-home-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 14%, var(--bb-body-bg));
  --bb-b2b-company-home-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 86%, var(--bb-emphasis-color));
  --bb-b2b-company-home-page-bg: var(--bb-body-bg);
  --bb-b2b-company-home-surface: var(--bb-surface-elevated);
  --bb-b2b-company-home-surface-soft: var(--bb-surface-soft);
  --bb-b2b-company-home-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-home-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-company-home-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2b-company-home-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2b-company-home-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-home-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-b2b-company-home-hero-decoration: color-mix(in srgb, var(--bb-primary) 17%, transparent);
  --bb-b2b-company-home-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 7%, transparent);
  --bb-b2b-company-home-logo-bg: var(--bb-surface-elevated);
  --bb-b2b-company-home-logo-border: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-b2b-company-home-trust-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  --bb-b2b-company-home-trust-border: color-mix(in srgb, var(--bb-border-color) 74%, var(--bb-primary) 26%);
  --bb-b2b-company-home-trust-heading: var(--bb-emphasis-color);
  --bb-b2b-company-home-trust-text: var(--bb-secondary-color);
  --bb-b2b-company-home-trust-item-bg: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
}

/* =====================================
   Page Scope
===================================== */
.bb-b2b-company-home-page {
  min-width: 0;
  background-color: var(--bb-b2b-company-home-page-bg);
  color: var(--bb-b2b-company-home-text);
}

.bb-b2b-company-home-page a {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-b2b-company-home-page .material-symbols-outlined {
  line-height: 1;
}

/* =====================================
   Breadcrumb
===================================== */
.bb-b2b-company-home-breadcrumb-section {
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  background-color: var(--bb-b2b-company-home-page-bg);
}

/* =====================================
   Hero
===================================== */
.bb-b2b-company-home-page .bb-hero {
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--bb-b2b-company-home-page-bg);
}

.bb-b2b-company-home-page .bb-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 24rem;
  padding: clamp(1.5rem, 2.8vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: stretch;
  background: radial-gradient(circle at 88% 16%, var(--bb-b2b-company-home-hero-decoration), transparent 17rem), radial-gradient(circle at 96% 112%, color-mix(in srgb, var(--bb-b2b-company-home-accent) 13%, transparent), transparent 15rem), linear-gradient(135deg, var(--bb-b2b-company-home-hero-bg) 0%, var(--bb-b2b-company-home-hero-bg-soft) 100%);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-company-home-shadow-sm);
}

.bb-b2b-company-home-page .bb-hero-card::before,
.bb-b2b-company-home-page .bb-hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-home-page .bb-hero-card::before {
  top: -5.75rem;
  right: -4.75rem;
  width: 15.75rem;
  height: 15.75rem;
  background-color: var(--bb-b2b-company-home-hero-decoration-muted);
}

.bb-b2b-company-home-page .bb-hero-card::after {
  right: 9rem;
  bottom: -5.5rem;
  width: 13.25rem;
  height: 13.25rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-home-accent) 14%, transparent);
}

.bb-b2b-company-home-page .bb-hero-content,
.bb-b2b-company-home-trust-card {
  position: relative;
  z-index: 2;
}

.bb-b2b-company-home-page .bb-hero-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bb-b2b-company-home-company-line {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  min-width: 0;
}

.bb-b2b-company-home-logo {
  width: 7rem;
  height: 7rem;
  min-width: 7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--bb-b2b-company-home-accent);
  background-color: var(--bb-b2b-company-home-logo-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-logo-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-home-shadow-sm);
  text-decoration: none !important;
}

.bb-b2b-company-home-logo:hover {
  border-color: var(--bb-b2b-company-home-border-accent);
  box-shadow: var(--bb-b2b-company-home-shadow-sm);
}

.bb-b2b-company-home-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2b-company-home-logo .material-symbols-outlined {
  color: var(--bb-b2b-company-home-accent);
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-company-home-company-info {
  min-width: 0;
}

.bb-b2b-company-home-chip {
  width: fit-content;
  margin-bottom: 0.625rem;
  color: var(--bb-b2b-company-home-accent-text);
  background-color: var(--bb-b2b-company-home-accent-soft);
  border-color: var(--bb-b2b-company-home-border-accent);
}

.bb-b2b-company-home-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-home-title {
  max-width: 50rem;
  margin: 0;
  color: var(--bb-b2b-company-home-heading);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.bb-b2b-company-home-business-types {
  max-width: 44rem;
  margin: 0.625rem 0 0;
  color: var(--bb-b2b-company-home-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-home-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
  padding-left: 8.25rem;
}

.bb-b2b-company-home-meta span {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0 0.875rem;
  color: var(--bb-b2b-company-home-heading);
  background-color: color-mix(in srgb, var(--bb-b2b-company-home-surface) 90%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2b-company-home-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-company-home-meta .material-symbols-outlined {
  color: var(--bb-b2b-company-home-accent);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-b2b-company-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-left: 8.25rem;
}

.bb-b2b-company-home-action {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-b2b-company-home-action .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-home-profile-action,
.bb-b2b-company-home-actions .bb-b2b-company-home-action:nth-child(2) {
  color: var(--bb-b2b-company-home-heading) !important;
  background-color: color-mix(in srgb, var(--bb-b2b-company-home-surface) 94%, transparent) !important;
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border) !important;
  box-shadow: var(--bb-b2b-company-home-shadow-xs);
}

.bb-b2b-company-home-profile-action:hover,
.bb-b2b-company-home-profile-action:focus,
.bb-b2b-company-home-actions .bb-b2b-company-home-action:nth-child(2):hover,
.bb-b2b-company-home-actions .bb-b2b-company-home-action:nth-child(2):focus {
  color: var(--bb-b2b-company-home-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-home-b2b-accent-soft) !important;
  border-color: color-mix(in srgb, var(--bb-b2b-company-home-b2b-accent) 34%, var(--bb-b2b-company-home-border)) !important;
}

.bb-b2b-company-home-contact-action,
.bb-b2b-company-home-actions .bb-b2b-company-home-action:nth-child(3) {
  color: var(--bb-theme-on-dark) !important;
  background-color: var(--bb-color-navy-900) !important;
  border: var(--bb-border-width) solid var(--bb-color-navy-900) !important;
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-color-navy-900) 18%, transparent);
}

.bb-b2b-company-home-contact-action:hover,
.bb-b2b-company-home-contact-action:focus,
.bb-b2b-company-home-actions .bb-b2b-company-home-action:nth-child(3):hover,
.bb-b2b-company-home-actions .bb-b2b-company-home-action:nth-child(3):focus {
  color: var(--bb-theme-on-dark) !important;
  background-color: color-mix(in srgb, var(--bb-color-navy-900) 88%, var(--bb-primary)) !important;
  border-color: color-mix(in srgb, var(--bb-color-navy-900) 88%, var(--bb-primary)) !important;
}

/* =====================================
   Trust Card
===================================== */
.bb-b2b-company-home-trust-card {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.35rem;
  color: var(--bb-b2b-company-home-trust-heading);
  background-color: var(--bb-b2b-company-home-trust-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-trust-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-home-shadow-xs);
}

.bb-b2b-company-home-trust-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-b2b-company-home-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-home-trust-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-b2b-company-home-trust-card h2 {
  margin: 0;
  color: var(--bb-b2b-company-home-trust-heading);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-home-trust-card p {
  margin: 0.625rem 0 1rem;
  color: var(--bb-b2b-company-home-trust-text);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-home-trust-list {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-b2b-company-home-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: var(--bb-b2b-company-home-heading);
  background-color: var(--bb-b2b-company-home-trust-item-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border-soft);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-company-home-trust-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-b2b-company-home-accent);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-company-home-follow-btn {
  width: 100%;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1rem;
  color: var(--bb-b2b-company-home-heading) !important;
  background-color: color-mix(in srgb, var(--bb-b2b-company-home-surface) 94%, transparent) !important;
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border) !important;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-company-home-follow-btn:hover,
.bb-b2b-company-home-follow-btn:focus {
  color: var(--bb-b2b-company-home-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-home-b2b-accent-soft) !important;
  border-color: color-mix(in srgb, var(--bb-b2b-company-home-b2b-accent) 34%, var(--bb-b2b-company-home-border)) !important;
}

.bb-b2b-company-home-follow-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Navigation
===================================== */
.bb-b2b-company-home-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.75rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-home-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-home-shadow-xs);
  scrollbar-width: thin;
}

.bb-b2b-company-home-nav::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-company-home-nav::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-b2b-company-home-accent) 20%, var(--bb-b2b-company-home-border));
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-home-nav-item {
  min-width: max-content;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0 0.9375rem;
  color: var(--bb-b2b-company-home-heading) !important;
  background-color: var(--bb-b2b-company-home-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-b2b-company-home-nav-item:hover,
.bb-b2b-company-home-nav-item.active {
  color: var(--bb-b2b-company-home-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-home-b2b-accent-soft);
  border-color: color-mix(in srgb, var(--bb-b2b-company-home-b2b-accent) 32%, var(--bb-b2b-company-home-border));
}

.bb-b2b-company-home-nav-item .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Sections
===================================== */
.bb-b2b-company-home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.bb-b2b-company-home-section-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-company-home-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-home-section-title {
  margin: 0;
  color: var(--bb-b2b-company-home-heading);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-home-section-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-company-home-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-home-component-card {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  background-color: var(--bb-b2b-company-home-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-home-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-home-shadow-xs);
}

.bb-b2b-company-home-component-card:empty {
  display: none;
}

/* =====================================
   Child Component Safety
===================================== */
.bb-b2b-company-home-component-card .js-slick-carousel,
.bb-b2b-company-home-component-card .slick-slider {
  max-width: 100%;
}

.bb-b2b-company-home-component-card img {
  max-width: 100%;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-company-home-page .bb-hero-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .bb-b2b-company-home-trust-card {
    max-width: 42rem;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-home-company-line {
    grid-template-columns: 6.25rem minmax(0, 1fr);
  }
  .bb-b2b-company-home-logo {
    width: 6.25rem;
    height: 6.25rem;
    min-width: 6.25rem;
  }
  .bb-b2b-company-home-meta,
  .bb-b2b-company-home-actions {
    padding-left: 7.5rem;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-home-breadcrumb-section {
    padding-top: 1rem;
  }
  .bb-b2b-company-home-page .bb-hero-card {
    padding: 1.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-company-home-company-line {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
  }
  .bb-b2b-company-home-logo {
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-home-title {
    font-size: clamp(1.65rem, 7.5vw, 2.2rem);
  }
  .bb-b2b-company-home-meta,
  .bb-b2b-company-home-actions {
    padding-left: 0;
  }
  .bb-b2b-company-home-action {
    flex: 1 1 auto;
  }
  .bb-b2b-company-home-component-card {
    border-radius: var(--bb-radius-lg);
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-home-company-line {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-home-logo {
    width: 5.75rem;
    height: 5.75rem;
    min-width: 5.75rem;
  }
  .bb-b2b-company-home-title {
    font-size: clamp(1.55rem, 10vw, 2.05rem);
  }
  .bb-b2b-company-home-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .bb-b2b-company-home-meta span {
    max-width: 100%;
    min-height: 2.25rem;
    font-size: var(--bb-fs-xs);
  }
  .bb-b2b-company-home-actions {
    flex-direction: column;
  }
  .bb-b2b-company-home-action {
    width: 100%;
  }
  .bb-b2b-company-home-trust-card {
    border-radius: var(--bb-radius-lg);
  }
}
/* =====================================
   Company Edit Form
   FormLight page
===================================== */
.bb-company-edit-form-page {
  width: 100%;
}

.bb-company-edit-form-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-company-edit-form-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-company-edit-form-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-company-edit-form-head {
  max-width: 46rem;
  margin-bottom: 1.5rem;
}

.bb-company-edit-form-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-company-edit-form-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-company-edit-form-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-company-edit-form-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-company-edit-form-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-company-edit-form-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-company-edit-form-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
}

.bb-company-edit-form-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-company-edit-form-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-company-edit-form-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-company-edit-form-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-company-edit-form-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-company-edit-form {
  display: grid;
  gap: 1.125rem;
}

.bb-company-edit-form-group {
  padding: 0;
}

.bb-company-edit-form-group + .bb-company-edit-form-group {
  padding-top: 1.125rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-company-edit-form-group-head {
  margin-bottom: 0.875rem;
}

.bb-company-edit-form-group-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-company-edit-form-group-text {
  max-width: 42rem;
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-company-edit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.125rem;
}

.bb-company-edit-form-field {
  min-width: 0;
}

.bb-company-edit-form-field--wide {
  grid-column: 1/-1;
}

.bb-company-edit-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-company-edit-form-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-company-edit-form-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-company-edit-form-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-company-edit-form-input-group .form-control,
.bb-company-edit-form-input-group .form-select {
  min-height: 2.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-company-edit-form-input-group .form-control:focus,
.bb-company-edit-form-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-company-edit-form-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-company-edit-form-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-company-edit-form-textarea {
  min-height: 8.25rem;
  resize: vertical;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  box-shadow: none;
}

.bb-company-edit-form-textarea:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-company-edit-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Note */
.bb-company-edit-form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-company-edit-form-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Actions */
.bb-company-edit-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.bb-company-edit-form-cancel,
.bb-company-edit-form-submit {
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  box-shadow: none;
}

.bb-company-edit-form-submit {
  min-width: 12.5rem;
}

.bb-company-edit-form-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-company-edit-form-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 54rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-company-edit-form-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-company-edit-form-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-company-edit-form-grid {
    grid-template-columns: 1fr;
  }
  .bb-company-edit-form-field--wide {
    grid-column: auto;
  }
  .bb-company-edit-form-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-company-edit-form-actions {
    flex-direction: column-reverse;
  }
  .bb-company-edit-form-cancel,
  .bb-company-edit-form-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-company-edit-form-card-head {
    gap: 0.625rem;
  }
  .bb-company-edit-form-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* Section head */
.bb-b2b-supplier-directory-section-head {
  margin-bottom: 1rem;
}

.bb-b2b-supplier-directory-section-chip {
  margin-bottom: 0.75rem;
}

.bb-b2b-supplier-directory-section-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-supplier-directory-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-supplier-directory-section-text {
  max-width: 50rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

/* Supplier cards */
.bb-b2b-supplier-directory-list {
  display: grid;
  gap: 1.125rem;
}

.bb-b2b-supplier-directory-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22rem);
  gap: 1.125rem;
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-supplier-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.bb-b2b-supplier-directory-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-supplier-shadow-hover);
}

.bb-b2b-supplier-directory-card-main,
.bb-b2b-supplier-directory-card-side {
  min-width: 0;
}

.bb-b2b-supplier-directory-card-header {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-supplier-directory-logo {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  text-decoration: none !important;
}

.bb-b2b-supplier-directory-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bb-b2b-supplier-directory-company-copy {
  min-width: 0;
}

.bb-b2b-supplier-directory-company-title-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.bb-b2b-supplier-directory-company-title {
  min-width: 0;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  overflow-wrap: anywhere;
}

.bb-b2b-supplier-directory-company-title a {
  color: inherit;
  text-decoration: none !important;
}

.bb-b2b-supplier-directory-company-title a:hover {
  color: var(--bb-primary);
}

.bb-b2b-supplier-directory-verify-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-supplier-directory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2b-supplier-directory-meta span {
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0 0.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-b2b-supplier-directory-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-supplier-directory-export {
  margin: 0.75rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-supplier-directory-export strong {
  color: var(--bb-emphasis-color);
}

/* Body */
.bb-b2b-supplier-directory-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
  gap: 1rem;
  padding-top: 1rem;
}

.bb-b2b-supplier-directory-info-zone {
  min-width: 0;
}

.bb-b2b-supplier-directory-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-b2b-supplier-directory-stat {
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-supplier-directory-stat span {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-supplier-directory-stat strong,
.bb-b2b-supplier-directory-stat strong a {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  text-decoration: none !important;
}

.bb-b2b-supplier-directory-detail-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.bb-b2b-supplier-directory-detail-item {
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-supplier-directory-detail-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-b2b-supplier-directory-detail-item strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-b2b-supplier-directory-detail-item small {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

/* Products */
.bb-b2b-supplier-directory-products {
  min-width: 0;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-supplier-directory-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2b-supplier-directory-zone-head span {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-supplier-directory-zone-head a {
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-b2b-supplier-directory-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-b2b-supplier-directory-product {
  min-width: 0;
  color: inherit !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-supplier-directory-product:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-supplier-shadow-hover);
}

.bb-b2b-supplier-directory-product-media {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background-color: var(--bb-body-bg);
}

.bb-b2b-supplier-directory-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bb-b2b-supplier-directory-product-title {
  display: -webkit-box;
  min-height: 2.125rem;
  overflow: hidden;
  padding: 0 0.5rem 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2b-supplier-directory-product-empty {
  grid-column: 1/-1;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) dashed var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-align: center;
}

.bb-b2b-supplier-directory-product-empty .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

/* Side gallery */
.bb-b2b-supplier-directory-card-side {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bb-b2b-supplier-directory-gallery {
  min-width: 0;
}

.bb-b2b-supplier-directory-gallery-carousel,
.bb-b2b-supplier-directory-gallery-inner,
.bb-b2b-supplier-directory-gallery-inner .carousel-item {
  min-height: 16rem;
}

.bb-b2b-supplier-directory-gallery-carousel {
  position: relative;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-supplier-directory-gallery-image {
  width: 100%;
  height: 16rem;
  display: block;
  object-fit: cover;
}

.bb-b2b-supplier-directory-gallery-overlay {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 52%, transparent);
  border-radius: var(--bb-radius-pill);
  backdrop-filter: blur(0.5rem);
  font-size: var(--bb-fs-xs);
  line-height: 1;
}

.bb-b2b-supplier-directory-gallery-overlay strong {
  color: var(--bb-white);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-supplier-directory-gallery-control {
  top: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 48%, transparent);
  border-radius: var(--bb-radius);
  opacity: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(0.5rem);
}

.bb-b2b-supplier-directory-gallery-control:hover {
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-primary) 72%, transparent);
}

.bb-b2b-supplier-directory-gallery-control-prev {
  left: 0.625rem;
}

.bb-b2b-supplier-directory-gallery-control-next {
  right: 0.625rem;
}

.bb-b2b-supplier-directory-gallery-control .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-supplier-directory-gallery-indicators {
  right: auto;
  bottom: 0.75rem;
  left: 0.75rem;
  gap: 0.375rem;
  margin: 0;
}

.bb-b2b-supplier-directory-gallery-indicators [data-bs-target] {
  width: 0.375rem;
  height: 0.375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 62%, transparent);
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
}

.bb-b2b-supplier-directory-gallery-indicators .active {
  width: 1.125rem;
  background-color: var(--bb-warning);
}

.bb-b2b-supplier-directory-gallery-empty {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) dashed var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  text-align: center;
}

.bb-b2b-supplier-directory-gallery-empty .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

/* Actions */
.bb-b2b-supplier-directory-actions {
  display: grid;
  gap: 0.625rem;
}

.bb-b2b-supplier-directory-actions .btn {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-supplier-directory-profile-link {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-supplier-primary-soft);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-supplier-directory-profile-link:hover {
  color: var(--bb-white) !important;
  background-color: var(--bb-primary);
}

.bb-b2b-supplier-directory-profile-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Pagination */
.bb-b2b-supplier-directory-pagination {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-supplier-shadow);
}

.bb-b2b-supplier-directory-page-notify {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-supplier-directory-pagination-items {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-b2b-supplier-directory-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-supplier-directory-empty-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-supplier-primary-soft);
  border-radius: 50%;
}

.bb-b2b-supplier-directory-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-supplier-directory-empty h2 {
  max-width: 36rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-supplier-directory-empty p {
  max-width: 38rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-supplier-directory-card {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  }
  .bb-b2b-supplier-directory-card-body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-supplier-directory-card {
    grid-template-columns: 1fr;
  }
  .bb-b2b-supplier-directory-card-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    align-items: start;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-supplier-directory-card-side {
    grid-template-columns: 1fr;
  }
  .bb-b2b-supplier-directory-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-supplier-directory-card {
    padding: 0.875rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-supplier-directory-card-header {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }
  .bb-b2b-supplier-directory-logo {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--bb-radius);
  }
  .bb-b2b-supplier-directory-company-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-b2b-supplier-directory-stats {
    grid-template-columns: 1fr;
  }
  .bb-b2b-supplier-directory-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-supplier-directory-page-notify {
    text-align: center;
  }
  .bb-b2b-supplier-directory-pagination-items {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-supplier-directory-page {
    padding-bottom: 2.75rem;
  }
  .bb-b2b-supplier-directory-card-header {
    grid-template-columns: 1fr;
  }
  .bb-b2b-supplier-directory-product-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-supplier-directory-gallery-carousel,
  .bb-b2b-supplier-directory-gallery-inner,
  .bb-b2b-supplier-directory-gallery-inner .carousel-item,
  .bb-b2b-supplier-directory-gallery-empty {
    min-height: 13rem;
  }
  .bb-b2b-supplier-directory-gallery-image {
    height: 13rem;
  }
}
/* =====================================
   Supplier Directory Page Hero
   /company/index sayfası hero makyajı.
   Default bb-hero omurgası üzerine çalışır.
===================================== */
.bb-supplier-directory-page-hero {
  --bb-hero-title-max-width: 46rem;
  --bb-hero-text-max-width: 45rem;
  --bb-hero-aside-width: 24rem;
  --bb-hero-grid-gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
}

.bb-supplier-directory-page-hero-box {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--bb-primary) 12%, transparent) 0, transparent 30%), color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.5rem 3.75rem color-mix(in srgb, var(--bb-primary) 9%, transparent);
}

.bb-supplier-directory-page-hero-content {
  min-width: 0;
}

.bb-supplier-directory-page-hero-chips {
  margin-top: 0;
  margin-bottom: 1rem;
}

.bb-supplier-directory-page-hero-chip {
  color: color-mix(in srgb, var(--bb-primary) 58%, var(--bb-dark));
  background-color: var(--bb-primary-light);
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
}

.bb-supplier-directory-page-hero-title {
  color: var(--bb-heading-color);
  font-size: clamp(2.4rem, 4.4vw, 3.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.bb-supplier-directory-page-hero-text {
  margin-top: 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-supplier-directory-page-hero-actions {
  margin-top: 1.5rem;
}

.bb-supplier-directory-page-hero-btn {
  min-width: 11.5rem;
}

.bb-supplier-directory-page-hero-aside {
  align-self: center;
}

.bb-supplier-directory-page-hero-visual {
  justify-content: center;
}

.bb-supplier-directory-page-hero-visual::before {
  right: -2.5rem;
  bottom: -2.5rem;
  width: clamp(8rem, 14vw, 11rem);
  height: clamp(8rem, 14vw, 11rem);
  background-color: color-mix(in srgb, var(--bb-primary) 13%, transparent);
}

.bb-supplier-directory-page-hero-visual-card {
  width: clamp(12rem, 18vw, 16rem);
  color: color-mix(in srgb, var(--bb-primary) 50%, var(--bb-dark));
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--bb-white) 54%, transparent) 0, transparent 34%), color-mix(in srgb, var(--bb-primary-light) 82%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
  box-shadow: 0 1.5rem 3.75rem color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-supplier-directory-page-hero-visual-icon {
  font-size: clamp(3.5rem, 6vw, 4.75rem);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-supplier-directory-page-hero-aside {
    justify-self: start;
  }
  .bb-supplier-directory-page-hero-visual {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-supplier-directory-page-hero {
    padding-top: 1.5rem;
    padding-bottom: 2.25rem;
  }
  .bb-supplier-directory-page-hero-box {
    padding: 1.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-supplier-directory-page-hero-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
  .bb-supplier-directory-page-hero-btn {
    width: 100%;
    min-width: 0;
  }
  .bb-supplier-directory-page-hero-visual {
    display: none;
  }
}
.bb-b2b-company-products-company {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bb-b2b-company-products-logo {
  width: 5.75rem;
  height: 5.75rem;
  min-width: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: var(--bb-b2b-company-products-shadow);
}

.bb-b2b-company-products-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bb-b2b-company-products-logo .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-company-products-copy {
  min-width: 0;
}

.bb-b2b-company-products-chip {
  margin-bottom: 0.75rem;
}

.bb-b2b-company-products-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-products-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
  overflow-wrap: anywhere;
}

.bb-b2b-company-products-text {
  max-width: 48rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-products-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.75rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-products-shadow);
  scrollbar-width: thin;
}

.bb-b2b-company-products-nav::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-company-products-nav::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-products-nav-item {
  min-width: max-content;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0 0.875rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-company-products-nav-item:hover,
.bb-b2b-company-products-nav-item.active {
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-company-products-primary-soft);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
}

.bb-b2b-company-products-nav-item .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-products-mobile-category-list {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding: 0.625rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-products-shadow);
  scrollbar-width: thin;
}

.bb-b2b-company-products-mobile-category-item {
  min-width: max-content;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-company-products-mobile-category-item.active,
.bb-b2b-company-products-mobile-category-item:hover {
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-company-products-primary-soft);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
}

.bb-b2b-company-products-layout {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.bb-b2b-company-products-sidebar {
  min-width: 0;
  position: sticky;
  top: 6rem;
}

.bb-b2b-company-products-content {
  min-width: 0;
}

/* Sidebar */
.bb-b2b-company-products-sidebar-card {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-products-shadow);
}

.bb-b2b-company-products-sidebar-head {
  padding: 0.9375rem 1rem 0.75rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-company-products-sidebar-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-2xs);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-b2b-company-products-sidebar-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-company-products-category-list {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem;
}

.bb-b2b-company-products-category-link {
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.3;
}

.bb-b2b-company-products-category-link:hover,
.bb-b2b-company-products-category-link.active {
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-company-products-primary-soft);
}

.bb-b2b-company-products-category-link .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-products-sidebar-promo {
  margin-top: 1rem;
  padding: 1rem;
  color: var(--bb-white);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 34%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 84%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-company-products-sidebar-promo-icon {
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-products-sidebar-promo-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-company-products-sidebar-promo h3 {
  margin: 0 0 0.375rem;
  color: var(--bb-white);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-company-products-sidebar-promo p {
  margin: 0;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* Toolbar */
.bb-b2b-company-products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-products-shadow);
}

.bb-b2b-company-products-toolbar-copy {
  min-width: 0;
}

.bb-b2b-company-products-toolbar-chip {
  margin-bottom: 0.5rem;
}

.bb-b2b-company-products-toolbar-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-products-toolbar-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-company-products-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-b2b-company-products-view-switch {
  align-items: center;
  gap: 0.375rem;
}

.bb-b2b-company-products-view-btn {
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2b-company-products-view-btn.active {
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-products-primary-soft);
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
}

.bb-b2b-company-products-view-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-products-sort-form {
  margin: 0;
}

.bb-b2b-company-products-sort-select {
  min-width: 13rem;
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* Product grid */
.bb-b2b-company-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-b2b-company-product-shell {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 70%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-products-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-company-product-shell:hover {
  transform: translateY(-0.1875rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-company-products-shadow-hover);
}

.bb-b2b-company-product-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: inherit !important;
  text-decoration: none !important;
}

.bb-b2b-company-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 36%, transparent);
}

.bb-b2b-company-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

/* Pagination wrapper only */
.bb-b2b-company-products-pagination {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-products-shadow);
}

.bb-b2b-company-products-page-notify {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-company-products-pagination-items {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-b2b-company-products-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-company-products-empty-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-products-primary-soft);
  border-radius: 50%;
}

.bb-b2b-company-products-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-company-products-empty h2 {
  max-width: 36rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-products-empty p {
  max-width: 38rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-products-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bb-b2b-company-products-empty-actions .btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-company-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-company-products-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-products-sidebar {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-products-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-company-products-toolbar-actions {
    justify-content: space-between;
  }
  .bb-b2b-company-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-products-company {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2b-company-products-logo {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-products-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-company-products-page-notify {
    text-align: center;
  }
  .bb-b2b-company-products-pagination-items {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-products-page {
    padding-bottom: 2.75rem;
  }
  .bb-b2b-company-products-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-b2b-company-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-products-sort-form,
  .bb-b2b-company-products-sort-select {
    width: 100%;
  }
  .bb-b2b-company-products-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-company-products-empty-actions {
    flex-direction: column;
  }
  .bb-b2b-company-products-empty-actions .btn {
    width: 100%;
  }
}
/* =====================================
   Bulbulustur Web - B2B Company Contact
   Layer: pages/company/_b2b-company-contact.scss

   Purpose:
   - Supplier contact hero
   - Contact page navigation
   - Contact person card
   - Company contact info card
   - Message form side card

   Rules:
   - Light / Navy / Dark safe
   - Token based
   - No hardcoded fallback colors
   - No legacy template classes
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-b2b-company-contact-accent: var(--bb-primary);
  --bb-b2b-company-contact-accent-hover: var(--bb-primary-hover);
  --bb-b2b-company-contact-accent-soft: var(--bb-primary-light);
  --bb-b2b-company-contact-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-b2b-company-contact-b2b-accent: var(--bb-color-blue-600);
  --bb-b2b-company-contact-b2b-accent-hover: var(--bb-color-blue-700);
  --bb-b2b-company-contact-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-600) 12%, var(--bb-body-bg));
  --bb-b2b-company-contact-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-700) 76%, var(--bb-emphasis-color));
  --bb-b2b-company-contact-page-bg: var(--bb-body-bg);
  --bb-b2b-company-contact-surface: var(--bb-body-bg);
  --bb-b2b-company-contact-surface-soft: var(--bb-tertiary-bg);
  --bb-b2b-company-contact-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-contact-heading: var(--bb-emphasis-color);
  --bb-b2b-company-contact-text: var(--bb-body-color);
  --bb-b2b-company-contact-muted: var(--bb-secondary-color);
  --bb-b2b-company-contact-subtle: var(--bb-tertiary-color);
  --bb-b2b-company-contact-border: var(--bb-border-color);
  --bb-b2b-company-contact-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-company-contact-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-company-contact-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-contact-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-b2b-company-contact-hero-decoration: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-b2b-company-contact-hero-decoration-muted: color-mix(in srgb, var(--bb-tertiary-color) 14%, transparent);
  --bb-b2b-company-contact-logo-bg: var(--bb-body-bg);
  --bb-b2b-company-contact-logo-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-company-contact-shadow-xs: var(--bb-shadow-xs);
  --bb-b2b-company-contact-shadow-sm: var(--bb-shadow-sm);
  --bb-b2b-company-contact-shadow-lg: var(--bb-shadow-lg);
  --bb-b2b-company-contact-message-bg-start: var(--bb-color-navy-900);
  --bb-b2b-company-contact-message-bg-end: color-mix(in srgb, var(--bb-color-navy-900) 82%, var(--bb-primary));
  --bb-b2b-company-contact-message-color: var(--bb-theme-on-dark);
  --bb-b2b-company-contact-message-muted: color-mix(in srgb, var(--bb-theme-on-dark) 76%, transparent);
  --bb-b2b-company-contact-message-border: color-mix(in srgb, var(--bb-primary) 26%, transparent);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-b2b-company-contact-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-b2b-company-contact-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2b-company-contact-b2b-accent: var(--bb-color-blue-500);
  --bb-b2b-company-contact-b2b-accent-hover: var(--bb-color-blue-400);
  --bb-b2b-company-contact-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 15%, var(--bb-body-bg));
  --bb-b2b-company-contact-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 88%, var(--bb-emphasis-color));
  --bb-b2b-company-contact-page-bg: var(--bb-body-bg);
  --bb-b2b-company-contact-surface: var(--bb-surface-elevated);
  --bb-b2b-company-contact-surface-soft: var(--bb-surface-soft);
  --bb-b2b-company-contact-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-contact-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-b2b-company-contact-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-company-contact-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2b-company-contact-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-contact-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg));
  --bb-b2b-company-contact-hero-decoration: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-b2b-company-contact-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
  --bb-b2b-company-contact-logo-bg: var(--bb-surface-elevated);
  --bb-b2b-company-contact-logo-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-company-contact-message-bg-start: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-color-navy-900));
  --bb-b2b-company-contact-message-bg-end: color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-primary));
  --bb-b2b-company-contact-message-muted: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  --bb-b2b-company-contact-message-border: color-mix(in srgb, var(--bb-primary) 30%, transparent);
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-b2b-company-contact-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-b2b-company-contact-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2b-company-contact-b2b-accent: var(--bb-color-blue-500);
  --bb-b2b-company-contact-b2b-accent-hover: var(--bb-color-blue-400);
  --bb-b2b-company-contact-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 14%, var(--bb-body-bg));
  --bb-b2b-company-contact-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 86%, var(--bb-emphasis-color));
  --bb-b2b-company-contact-page-bg: var(--bb-body-bg);
  --bb-b2b-company-contact-surface: var(--bb-surface-elevated);
  --bb-b2b-company-contact-surface-soft: var(--bb-surface-soft);
  --bb-b2b-company-contact-surface-elevated: var(--bb-surface-elevated);
  --bb-b2b-company-contact-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-company-contact-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2b-company-contact-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2b-company-contact-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-company-contact-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-b2b-company-contact-hero-decoration: color-mix(in srgb, var(--bb-primary) 17%, transparent);
  --bb-b2b-company-contact-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 7%, transparent);
  --bb-b2b-company-contact-logo-bg: var(--bb-surface-elevated);
  --bb-b2b-company-contact-logo-border: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-b2b-company-contact-message-bg-start: color-mix(in srgb, var(--bb-body-bg) 80%, var(--bb-color-navy-900));
  --bb-b2b-company-contact-message-bg-end: color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-primary));
  --bb-b2b-company-contact-message-muted: color-mix(in srgb, var(--bb-theme-on-dark) 78%, transparent);
  --bb-b2b-company-contact-message-border: color-mix(in srgb, var(--bb-primary) 28%, transparent);
}

/* =====================================
   Page Scope
===================================== */
.bb-b2b-company-contact-page {
  min-width: 0;
  background-color: var(--bb-b2b-company-contact-page-bg);
  color: var(--bb-b2b-company-contact-text);
}

.bb-b2b-company-contact-page a {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-b2b-company-contact-page .material-symbols-outlined {
  line-height: 1;
}

/* =====================================
   Breadcrumb
===================================== */
.bb-b2b-company-contact-page > .bb-container:first-child {
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
}

/* =====================================
   Hero
===================================== */
.bb-b2b-company-contact-page .bb-hero {
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--bb-b2b-company-contact-page-bg);
}

.bb-b2b-company-contact-page .bb-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 13.5rem;
  padding: clamp(1.5rem, 2.7vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  background: radial-gradient(circle at 88% 16%, var(--bb-b2b-company-contact-hero-decoration), transparent 16rem), radial-gradient(circle at 96% 112%, color-mix(in srgb, var(--bb-b2b-company-contact-accent) 13%, transparent), transparent 14rem), linear-gradient(135deg, var(--bb-b2b-company-contact-hero-bg) 0%, var(--bb-b2b-company-contact-hero-bg-soft) 100%);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-company-contact-shadow-sm);
}

.bb-b2b-company-contact-page .bb-hero-card::before,
.bb-b2b-company-contact-page .bb-hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-contact-page .bb-hero-card::before {
  top: -5.75rem;
  right: -4.75rem;
  width: 15.75rem;
  height: 15.75rem;
  background-color: var(--bb-b2b-company-contact-hero-decoration-muted);
}

.bb-b2b-company-contact-page .bb-hero-card::after {
  right: 6.5rem;
  bottom: -5.5rem;
  width: 13.25rem;
  height: 13.25rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-contact-accent) 14%, transparent);
}

.bb-b2b-company-contact-company,
.bb-b2b-company-contact-page .bb-hero-actions {
  position: relative;
  z-index: 2;
}

.bb-b2b-company-contact-company {
  min-width: 0;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.bb-b2b-company-contact-logo {
  width: 6rem;
  height: 6rem;
  min-width: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--bb-b2b-company-contact-accent);
  background-color: var(--bb-b2b-company-contact-logo-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-logo-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-contact-shadow-sm);
  text-decoration: none !important;
}

.bb-b2b-company-contact-logo:hover {
  border-color: var(--bb-b2b-company-contact-border-accent);
  box-shadow: var(--bb-b2b-company-contact-shadow-sm);
}

.bb-b2b-company-contact-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2b-company-contact-logo .material-symbols-outlined {
  color: var(--bb-b2b-company-contact-accent);
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-company-contact-copy {
  min-width: 0;
}

.bb-b2b-company-contact-chip {
  width: fit-content;
  margin-bottom: 0.625rem;
  color: var(--bb-b2b-company-contact-accent-text);
  background-color: var(--bb-b2b-company-contact-accent-soft);
  border-color: var(--bb-b2b-company-contact-border-accent);
}

.bb-b2b-company-contact-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-contact-title {
  max-width: 58rem;
  margin: 0;
  color: var(--bb-b2b-company-contact-heading);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.bb-b2b-company-contact-text {
  max-width: 50rem;
  margin: 0.625rem 0 0;
  color: var(--bb-b2b-company-contact-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-contact-page .bb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.bb-b2b-company-contact-hero-action {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-b2b-company-contact-hero-action .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-contact-profile-action,
.bb-b2b-company-contact-page .bb-hero-actions .bb-b2b-company-contact-hero-action:first-child {
  color: var(--bb-b2b-company-contact-heading) !important;
  background-color: color-mix(in srgb, var(--bb-b2b-company-contact-surface) 94%, transparent) !important;
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border) !important;
  box-shadow: var(--bb-b2b-company-contact-shadow-xs);
}

.bb-b2b-company-contact-profile-action:hover,
.bb-b2b-company-contact-profile-action:focus,
.bb-b2b-company-contact-page .bb-hero-actions .bb-b2b-company-contact-hero-action:first-child:hover,
.bb-b2b-company-contact-page .bb-hero-actions .bb-b2b-company-contact-hero-action:first-child:focus {
  color: var(--bb-b2b-company-contact-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-contact-b2b-accent-soft) !important;
  border-color: color-mix(in srgb, var(--bb-b2b-company-contact-b2b-accent) 34%, var(--bb-b2b-company-contact-border)) !important;
}

/* =====================================
   Navigation
===================================== */
.bb-b2b-company-contact-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.75rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-contact-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-contact-shadow-xs);
  scrollbar-width: thin;
}

.bb-b2b-company-contact-nav::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-company-contact-nav::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-b2b-company-contact-accent) 20%, var(--bb-b2b-company-contact-border));
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-contact-nav-item {
  min-width: max-content;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0 0.9375rem;
  color: var(--bb-b2b-company-contact-heading) !important;
  background-color: var(--bb-b2b-company-contact-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-b2b-company-contact-nav-item:hover,
.bb-b2b-company-contact-nav-item.active {
  color: var(--bb-b2b-company-contact-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-contact-b2b-accent-soft);
  border-color: color-mix(in srgb, var(--bb-b2b-company-contact-b2b-accent) 32%, var(--bb-b2b-company-contact-border));
}

.bb-b2b-company-contact-nav-item .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Layout
===================================== */
.bb-b2b-company-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: 1.5rem;
  align-items: start;
}

.bb-b2b-company-contact-main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bb-b2b-company-contact-side-column {
  min-width: 0;
}

.bb-b2b-company-contact-section-head {
  margin-bottom: 0.875rem;
}

.bb-b2b-company-contact-section-label {
  width: fit-content;
  margin-bottom: 0.75rem;
}

.bb-b2b-company-contact-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-contact-section-title {
  margin: 0;
  color: var(--bb-b2b-company-contact-heading);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-contact-section-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-company-contact-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Person Card
===================================== */
.bb-b2b-company-contact-person-card {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  background-color: var(--bb-b2b-company-contact-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-contact-shadow-xs);
}

.bb-b2b-company-contact-person-media {
  width: 6rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--bb-b2b-company-contact-accent);
  background-color: var(--bb-b2b-company-contact-accent-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-b2b-company-contact-person-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-b2b-company-contact-person-media .material-symbols-outlined {
  font-size: var(--bb-fs-display-md);
  line-height: 1;
}

.bb-b2b-company-contact-person-body {
  min-width: 0;
}

.bb-b2b-company-contact-person-body h3 {
  margin: 0;
  color: var(--bb-b2b-company-contact-heading);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  overflow-wrap: anywhere;
}

.bb-b2b-company-contact-person-position {
  display: block;
  margin-top: 0.375rem;
  color: var(--bb-b2b-company-contact-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-company-contact-person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-b2b-company-contact-person-links a {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.75rem;
  color: var(--bb-b2b-company-contact-heading) !important;
  background-color: var(--bb-b2b-company-contact-surface-soft);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-company-contact-person-links a:hover {
  color: var(--bb-b2b-company-contact-b2b-accent-text) !important;
  background-color: var(--bb-b2b-company-contact-b2b-accent-soft);
  border-color: color-mix(in srgb, var(--bb-b2b-company-contact-b2b-accent) 32%, var(--bb-b2b-company-contact-border));
}

.bb-b2b-company-contact-person-links .material-symbols-outlined {
  color: var(--bb-b2b-company-contact-accent);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* =====================================
   Info Card
===================================== */
.bb-b2b-company-contact-info-card {
  padding: 1.25rem;
  background-color: var(--bb-b2b-company-contact-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-contact-shadow-xs);
}

.bb-b2b-company-contact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2b-company-contact-info-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.875rem;
  background-color: var(--bb-b2b-company-contact-surface-soft);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-border);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-contact-info-item-wide {
  grid-column: 1/-1;
}

.bb-b2b-company-contact-info-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-company-contact-accent);
  background-color: var(--bb-b2b-company-contact-accent-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-company-contact-info-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-company-contact-info-item span:not(.bb-b2b-company-contact-info-icon) {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-b2b-company-contact-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-company-contact-info-item strong {
  display: block;
  color: var(--bb-b2b-company-contact-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

/* =====================================
   Message Card
===================================== */
.bb-b2b-company-contact-message-card {
  position: sticky;
  top: 6rem;
  overflow: hidden;
  padding: 1.25rem;
  color: var(--bb-b2b-company-contact-message-color);
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-b2b-company-contact-accent) 30%, transparent), transparent 11rem), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--bb-b2b-company-contact-b2b-accent) 20%, transparent), transparent 10rem), linear-gradient(135deg, var(--bb-b2b-company-contact-message-bg-start) 0%, var(--bb-b2b-company-contact-message-bg-end) 100%);
  border: var(--bb-border-width) solid var(--bb-b2b-company-contact-message-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-contact-shadow-sm);
}

.bb-b2b-company-contact-message-card::after {
  content: "";
  position: absolute;
  right: -4.5rem;
  bottom: -5rem;
  width: 12rem;
  height: 12rem;
  background-color: color-mix(in srgb, var(--bb-b2b-company-contact-message-color) 8%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-b2b-company-contact-message-card > * {
  position: relative;
  z-index: 2;
}

.bb-b2b-company-contact-message-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-primary-inverse);
  background-color: var(--bb-b2b-company-contact-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-contact-message-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-b2b-company-contact-message-card h2 {
  margin: 0;
  color: var(--bb-b2b-company-contact-message-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-contact-message-card p {
  margin: 0.625rem 0 1rem;
  color: var(--bb-b2b-company-contact-message-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-contact-form .form-label {
  color: var(--bb-b2b-company-contact-message-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-company-contact-textarea {
  min-height: 10.5rem;
  resize: vertical;
}

.bb-b2b-company-contact-submit {
  width: 100%;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-company-contact-submit .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-company-contact-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-contact-message-card {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-contact-page .bb-hero-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .bb-b2b-company-contact-page .bb-hero-actions {
    justify-content: flex-start;
    padding-left: 7.25rem;
  }
  .bb-b2b-company-contact-info-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-contact-page > .bb-container:first-child {
    padding-top: 1rem;
  }
  .bb-b2b-company-contact-page .bb-hero-card {
    padding: 1.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-company-contact-company {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
  }
  .bb-b2b-company-contact-logo {
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-contact-title {
    font-size: clamp(1.65rem, 7.5vw, 2.2rem);
  }
  .bb-b2b-company-contact-page .bb-hero-actions {
    padding-left: 0;
  }
  .bb-b2b-company-contact-hero-action {
    flex: 1 1 auto;
  }
  .bb-b2b-company-contact-person-card {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-contact-person-media {
    width: 5rem;
    height: 5rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-contact-company {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-contact-logo {
    width: 5.75rem;
    height: 5.75rem;
    min-width: 5.75rem;
  }
  .bb-b2b-company-contact-title {
    font-size: clamp(1.55rem, 10vw, 2.05rem);
  }
  .bb-b2b-company-contact-page .bb-hero-actions {
    flex-direction: column;
  }
  .bb-b2b-company-contact-hero-action {
    width: 100%;
  }
  .bb-b2b-company-contact-person-card,
  .bb-b2b-company-contact-info-card,
  .bb-b2b-company-contact-message-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-contact-person-links {
    flex-direction: column;
  }
  .bb-b2b-company-contact-person-links a {
    width: 100%;
  }
}
/* Hero */
.bb-b2b-company-reviews-hero {
  padding: 0.5rem 0 1.25rem;
}

.bb-b2b-company-reviews-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 6%, var(--bb-white)) 0%, var(--bb-white) 74%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-company-reviews-hero-card::after {
  content: "";
  position: absolute;
  right: -5.5rem;
  bottom: -6.5rem;
  width: 15rem;
  height: 15rem;
  background-color: color-mix(in srgb, var(--bb-primary) 6%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-company-reviews-hero-copy,
.bb-b2b-company-reviews-hero-actions {
  position: relative;
  z-index: 2;
}

.bb-b2b-company-reviews-chip {
  margin-bottom: 0.75rem;
}

.bb-b2b-company-reviews-chip .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-reviews-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
  overflow-wrap: anywhere;
}

.bb-b2b-company-reviews-text {
  max-width: 48rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-reviews-hero-actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bb-b2b-company-reviews-hero-action {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2b-company-reviews-hero-action .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Nav */
.bb-b2b-company-reviews-nav-section {
  padding: 0 0 1.25rem;
}

.bb-b2b-company-reviews-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.75rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-reviews-shadow);
  scrollbar-width: thin;
}

.bb-b2b-company-reviews-nav::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-company-reviews-nav::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-company-reviews-nav-item {
  min-width: max-content;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0 0.875rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-company-reviews-nav-item:hover,
.bb-b2b-company-reviews-nav-item.active {
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-company-reviews-primary-soft);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
}

.bb-b2b-company-reviews-nav-item .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-reviews-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.bb-b2b-company-reviews-summary-column,
.bb-b2b-company-reviews-list-column {
  min-width: 0;
}

.bb-b2b-company-reviews-summary-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 6rem;
}

.bb-b2b-company-reviews-summary-card {
  overflow: hidden;
  padding: 1.25rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-reviews-shadow);
}

.bb-b2b-company-reviews-info-card {
  overflow: hidden;
  padding: 1.25rem;
  color: var(--bb-white);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 36%, transparent), transparent 32%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--bb-warning) 14%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 84%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-company-reviews-info-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-reviews-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-b2b-company-reviews-info-card h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-reviews-info-card p {
  margin: 0.625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-reviews-info-list {
  display: grid;
  gap: 0.625rem;
}

.bb-b2b-company-reviews-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: color-mix(in srgb, var(--bb-white) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-company-reviews-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Section head */
.bb-b2b-company-reviews-section-head {
  margin-bottom: 0.875rem;
}

.bb-b2b-company-reviews-section-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-company-reviews-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-reviews-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-reviews-section-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Review list */
.bb-b2b-company-reviews-list {
  display: grid;
  gap: 0.875rem;
}

.bb-b2b-company-review-card {
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-reviews-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.bb-b2b-company-review-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-company-reviews-shadow-hover);
}

.bb-b2b-company-review-card-head {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: start;
}

.bb-b2b-company-review-avatar {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-reviews-primary-soft);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-review-avatar .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-b2b-company-review-person {
  min-width: 0;
}

.bb-b2b-company-review-person h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-company-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bb-b2b-company-review-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-b2b-company-review-meta .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-review-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: color-mix(in srgb, var(--bb-warning) 34%, var(--bb-border-color));
  white-space: nowrap;
}

.bb-b2b-company-review-rating .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.bb-b2b-company-review-rating .material-symbols-outlined.is-filled {
  color: var(--bb-warning);
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.bb-b2b-company-review-content {
  margin: 1rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Pagination */
.bb-b2b-company-reviews-pagination {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-reviews-shadow);
}

.bb-b2b-company-reviews-page-notify {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-company-reviews-pagination-items {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-b2b-company-reviews-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-company-reviews-empty-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-reviews-primary-soft);
  border-radius: 50%;
}

.bb-b2b-company-reviews-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-company-reviews-empty h2 {
  max-width: 36rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-reviews-empty p {
  max-width: 38rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-reviews-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bb-b2b-company-reviews-empty-actions .btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2b-company-reviews-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-reviews-summary-column {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-reviews-hero-card {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-reviews-hero-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-reviews-hero-actions {
    flex-direction: column;
  }
  .bb-b2b-company-reviews-hero-action {
    width: 100%;
  }
  .bb-b2b-company-review-card-head {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  .bb-b2b-company-review-rating {
    grid-column: 1/-1;
  }
  .bb-b2b-company-reviews-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-company-reviews-page-notify {
    text-align: center;
  }
  .bb-b2b-company-reviews-pagination-items {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-reviews-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-b2b-company-reviews-hero-card,
  .bb-b2b-company-reviews-summary-card,
  .bb-b2b-company-reviews-info-card,
  .bb-b2b-company-review-card,
  .bb-b2b-company-reviews-empty {
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-reviews-empty-actions {
    flex-direction: column;
  }
  .bb-b2b-company-reviews-empty-actions .btn {
    width: 100%;
  }
}
/* =====================================
   Company B2B Index Activation
   Layer: pages/account/_company-b2b-index.scss
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-company-b2b-index-page-bg: var(--bb-body-bg);
  --bb-company-b2b-index-surface: var(--bb-body-bg);
  --bb-company-b2b-index-surface-soft: var(--bb-tertiary-bg);
  --bb-company-b2b-index-surface-elevated: var(--bb-surface-elevated);
  --bb-company-b2b-index-heading: var(--bb-emphasis-color);
  --bb-company-b2b-index-text: var(--bb-body-color);
  --bb-company-b2b-index-muted: var(--bb-secondary-color);
  --bb-company-b2b-index-subtle: var(--bb-tertiary-color);
  --bb-company-b2b-index-accent: var(--bb-primary);
  --bb-company-b2b-index-accent-soft: var(--bb-primary-light);
  --bb-company-b2b-index-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-company-b2b-index-b2b-accent: var(--bb-color-blue-600);
  --bb-company-b2b-index-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-600) 12%, var(--bb-body-bg));
  --bb-company-b2b-index-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-700) 76%, var(--bb-emphasis-color));
  --bb-company-b2b-index-border: var(--bb-border-color);
  --bb-company-b2b-index-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-company-b2b-index-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-company-b2b-index-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-company-b2b-index-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-company-b2b-index-hero-decoration: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-company-b2b-index-hero-decoration-muted: color-mix(in srgb, var(--bb-tertiary-color) 14%, transparent);
  --bb-company-b2b-index-shadow-xs: var(--bb-shadow-xs);
  --bb-company-b2b-index-shadow-sm: var(--bb-shadow-sm);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-company-b2b-index-page-bg: var(--bb-body-bg);
  --bb-company-b2b-index-surface: var(--bb-surface-elevated);
  --bb-company-b2b-index-surface-soft: var(--bb-surface-soft);
  --bb-company-b2b-index-surface-elevated: var(--bb-surface-elevated);
  --bb-company-b2b-index-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-company-b2b-index-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-company-b2b-index-b2b-accent: var(--bb-color-blue-500);
  --bb-company-b2b-index-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 15%, var(--bb-body-bg));
  --bb-company-b2b-index-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 88%, var(--bb-emphasis-color));
  --bb-company-b2b-index-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-company-b2b-index-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-company-b2b-index-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-company-b2b-index-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-company-b2b-index-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg));
  --bb-company-b2b-index-hero-decoration: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-company-b2b-index-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 8%, transparent);
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-company-b2b-index-page-bg: var(--bb-body-bg);
  --bb-company-b2b-index-surface: var(--bb-surface-elevated);
  --bb-company-b2b-index-surface-soft: var(--bb-surface-soft);
  --bb-company-b2b-index-surface-elevated: var(--bb-surface-elevated);
  --bb-company-b2b-index-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-company-b2b-index-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-company-b2b-index-b2b-accent: var(--bb-color-blue-500);
  --bb-company-b2b-index-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 14%, var(--bb-body-bg));
  --bb-company-b2b-index-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 86%, var(--bb-emphasis-color));
  --bb-company-b2b-index-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-company-b2b-index-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-company-b2b-index-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-company-b2b-index-hero-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-company-b2b-index-hero-bg-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg));
  --bb-company-b2b-index-hero-decoration: color-mix(in srgb, var(--bb-primary) 17%, transparent);
  --bb-company-b2b-index-hero-decoration-muted: color-mix(in srgb, var(--bb-theme-on-dark) 7%, transparent);
}

/* =====================================
   Page Scope
===================================== */
.bb-company-b2b-index-page {
  width: 100%;
  color: var(--bb-company-b2b-index-text);
  background-color: var(--bb-company-b2b-index-page-bg);
}

.bb-company-b2b-index-page .material-symbols-outlined {
  line-height: 1;
}

/* =====================================
   Back Link
===================================== */
.bb-company-b2b-index-back {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 1rem;
  padding: 0 0.875rem;
  color: var(--bb-company-b2b-index-heading) !important;
  background-color: var(--bb-company-b2b-index-surface-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  box-shadow: var(--bb-company-b2b-index-shadow-xs);
}

.bb-company-b2b-index-back:hover {
  color: var(--bb-company-b2b-index-accent-text) !important;
  background-color: var(--bb-company-b2b-index-accent-soft);
  border-color: var(--bb-company-b2b-index-border-accent);
}

.bb-company-b2b-index-back .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
}

/* =====================================
   Hero
===================================== */
.bb-company-b2b-index-hero {
  position: relative;
  overflow: hidden;
  min-height: 13rem;
  margin-bottom: 1.5rem;
  padding: clamp(1.375rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  gap: 1rem;
  align-items: center;
  background: radial-gradient(circle at 84% 18%, var(--bb-company-b2b-index-hero-decoration-muted), transparent 13rem), radial-gradient(circle at 68% 110%, var(--bb-company-b2b-index-hero-decoration), transparent 12rem), linear-gradient(135deg, var(--bb-company-b2b-index-hero-bg) 0%, var(--bb-company-b2b-index-hero-bg-soft) 100%);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-company-b2b-index-shadow-sm);
}

.bb-company-b2b-index-hero-icon {
  width: 4.5rem;
  height: 4.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  color: var(--bb-company-b2b-index-accent);
  background-color: var(--bb-company-b2b-index-accent-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border-accent);
  border-radius: var(--bb-radius-xl);
}

.bb-company-b2b-index-hero-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
}

.bb-company-b2b-index-hero-content,
.bb-company-b2b-index-hero-icon {
  position: relative;
  z-index: 2;
}

.bb-company-b2b-index-chip {
  width: fit-content;
  margin-bottom: 0.875rem;
  color: var(--bb-company-b2b-index-accent-text) !important;
  background-color: var(--bb-company-b2b-index-accent-soft) !important;
  border-color: var(--bb-company-b2b-index-border-accent);
}

.bb-company-b2b-index-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
}

.bb-company-b2b-index-title {
  max-width: 42rem;
  margin: 0;
  color: var(--bb-company-b2b-index-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.bb-company-b2b-index-text {
  max-width: 42rem;
  margin: 0.75rem 0 0;
  color: var(--bb-company-b2b-index-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-company-b2b-index-hero-icon {
  width: 6rem;
  height: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  color: var(--bb-company-b2b-index-accent);
  background-color: var(--bb-company-b2b-index-accent-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border-accent);
  border-radius: var(--bb-radius-2xl);
}

.bb-company-b2b-index-hero-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
}

/* =====================================
   Layout
===================================== */
.bb-company-b2b-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
  gap: 1.125rem;
  align-items: start;
}

.bb-company-b2b-index-main-card,
.bb-company-b2b-index-side-card {
  padding: clamp(1.125rem, 2.4vw, 1.5rem);
  background-color: var(--bb-company-b2b-index-surface);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-company-b2b-index-shadow-xs);
}

.bb-company-b2b-index-card-head,
.bb-company-b2b-index-side-head {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-company-b2b-index-border-soft);
}

.bb-company-b2b-index-card-icon,
.bb-company-b2b-index-side-icon {
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-company-b2b-index-accent);
  background-color: var(--bb-company-b2b-index-accent-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-company-b2b-index-card-icon .material-symbols-outlined,
.bb-company-b2b-index-side-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-company-b2b-index-card-head h2,
.bb-company-b2b-index-side-head h2 {
  margin: 0;
  color: var(--bb-company-b2b-index-heading);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-company-b2b-index-card-head p,
.bb-company-b2b-index-side-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-company-b2b-index-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Content
===================================== */
.bb-company-b2b-index-content {
  display: grid;
  gap: 0.875rem;
  color: var(--bb-company-b2b-index-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-company-b2b-index-content p {
  margin: 0;
}

.bb-company-b2b-index-content strong {
  color: var(--bb-company-b2b-index-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-company-b2b-index-content a {
  color: var(--bb-company-b2b-index-accent-text);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-company-b2b-index-content a:hover {
  color: var(--bb-company-b2b-index-b2b-accent-text);
  text-decoration: underline !important;
}

/* =====================================
   Benefits
===================================== */
.bb-company-b2b-index-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.bb-company-b2b-index-benefit {
  min-width: 0;
  display: grid;
  gap: 0.625rem;
  padding: 1rem;
  background-color: var(--bb-company-b2b-index-surface-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border);
  border-radius: var(--bb-radius-xl);
}

.bb-company-b2b-index-benefit > span {
  width: 2.625rem;
  height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-company-b2b-index-accent);
  background-color: var(--bb-company-b2b-index-accent-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-company-b2b-index-benefit > span .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-company-b2b-index-benefit h3 {
  margin: 0;
  color: var(--bb-company-b2b-index-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-company-b2b-index-benefit p {
  margin: 0.25rem 0 0;
  color: var(--bb-company-b2b-index-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Form
===================================== */
.bb-company-b2b-index-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: var(--bb-border-width) solid var(--bb-company-b2b-index-border-soft);
}

.bb-company-b2b-index-terms {
  padding: 1rem;
  background-color: var(--bb-company-b2b-index-accent-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border-accent);
  border-radius: var(--bb-radius-xl);
}

.bb-company-b2b-index-terms-check {
  margin: 0;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bb-company-b2b-index-terms-check .form-check-input {
  margin: 0.125rem 0 0;
  cursor: pointer;
}

.bb-company-b2b-index-terms-check .form-check-label {
  color: var(--bb-company-b2b-index-heading);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  cursor: pointer;
}

.bb-company-b2b-index-terms-check .form-check-label strong {
  display: block;
  font-weight: var(--bb-fw-bold);
}

.bb-company-b2b-index-terms-check .form-check-label small {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-company-b2b-index-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-company-b2b-index-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  color: var(--bb-company-b2b-index-muted);
  background-color: var(--bb-company-b2b-index-surface-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-company-b2b-index-note .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-company-b2b-index-accent);
  font-size: var(--bb-icon-size-sm);
}

.bb-company-b2b-index-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-company-b2b-index-submit {
  min-width: 18rem;
  min-height: 3.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-company-b2b-index-submit .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-company-b2b-index-submit:disabled {
  cursor: not-allowed;
  opacity: var(--bb-disabled-opacity);
  box-shadow: none;
}

/* =====================================
   Side Info
===================================== */
.bb-company-b2b-index-info-list {
  display: grid;
  gap: 0.875rem;
}

.bb-company-b2b-index-info-row {
  display: grid;
  gap: 0.375rem;
  padding: 0.875rem;
  background-color: var(--bb-company-b2b-index-surface-soft);
  border: var(--bb-border-width) solid var(--bb-company-b2b-index-border);
  border-radius: var(--bb-radius-lg);
}

.bb-company-b2b-index-info-row span {
  color: var(--bb-company-b2b-index-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-company-b2b-index-info-row strong {
  color: var(--bb-company-b2b-index-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-company-b2b-index-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--bb-radius-pill);
}

.bb-company-b2b-index-status .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
}

.bb-company-b2b-index-status.is-active {
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 10%, var(--bb-company-b2b-index-surface));
}

.bb-company-b2b-index-status.is-passive {
  color: var(--bb-company-b2b-index-muted);
  background-color: var(--bb-company-b2b-index-surface);
}

/* =====================================
   FormLight Width Override
===================================== */
.bb-layout-light-page:has(.bb-company-b2b-index-page) .bb-layout-light-content-col {
  max-width: 54rem;
}

.bb-layout-light-page:has(.bb-company-b2b-index-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.bb-layout-light-page:has(.bb-company-b2b-index-page) .bb-layout-light-card {
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: var(--bb-shadow-lg);
}

/* =====================================
   Responsive
===================================== */
/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-company-b2b-index-layout {
    grid-template-columns: 1fr;
  }
  .bb-company-b2b-index-hero {
    grid-template-columns: 1fr;
  }
  .bb-company-b2b-index-hero-icon {
    justify-self: start;
  }
}
@media (max-width: 767.98px) {
  .bb-company-b2b-index-main-card,
  .bb-company-b2b-index-side-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-company-b2b-index-title {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }
  .bb-company-b2b-index-actions {
    justify-content: stretch;
  }
  .bb-company-b2b-index-submit {
    width: 100%;
    min-width: 0;
    border-radius: var(--bb-radius-pill);
  }
}
@media (max-width: 575.98px) {
  .bb-company-b2b-index-hero {
    border-radius: var(--bb-radius-xl);
  }
  .bb-company-b2b-index-card-head,
  .bb-company-b2b-index-side-head {
    gap: 0.625rem;
  }
  .bb-company-b2b-index-card-icon,
  .bb-company-b2b-index-side-icon {
    width: 2.375rem;
    height: 2.375rem;
    min-width: 2.375rem;
  }
}
/* =====================================
   B2B Company Extended Informations
   Component
===================================== */
.bb-b2b-company-extended-info {
  --bb-b2b-company-info-primary: var(--bb-primary);
  --bb-b2b-company-info-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-company-info-ink: var(--bb-emphasis-color);
  --bb-b2b-company-info-muted: var(--bb-secondary-color);
  --bb-b2b-company-info-border: var(--bb-border-color);
  --bb-b2b-company-info-shadow: var(--bb-shadow-xs);
  display: grid;
  gap: 1rem;
}

.bb-b2b-company-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2b-company-info-card {
  min-width: 0;
  overflow: hidden;
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-info-shadow);
}

.bb-b2b-company-info-card--wide {
  grid-column: 1/-1;
}

.bb-b2b-company-info-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bb-b2b-company-info-icon {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-info-primary-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-company-info-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-company-info-card-head h3 {
  margin: 0;
  color: var(--bb-b2b-company-info-ink);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-company-info-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-b2b-company-info-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

/* Rich text */
.bb-b2b-company-info-richtext {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2b-company-info-richtext p:last-child {
  margin-bottom: 0;
}

.bb-b2b-company-info-richtext ul,
.bb-b2b-company-info-richtext ol {
  padding-left: 1.25rem;
}

.bb-b2b-company-info-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bb-radius);
}

/* Data table */
.bb-b2b-company-info-table {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-company-info-table--two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-b2b-company-info-row {
  display: grid;
  grid-template-columns: minmax(8.75rem, 0.86fr) minmax(0, 1.14fr);
  min-height: 3rem;
  border-bottom: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
}

.bb-b2b-company-info-row:last-child {
  border-bottom: 0;
}

.bb-b2b-company-info-table--two-column .bb-b2b-company-info-row {
  border-right: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
}

.bb-b2b-company-info-table--two-column .bb-b2b-company-info-row:nth-child(2n) {
  border-right: 0;
}

.bb-b2b-company-info-table--two-column .bb-b2b-company-info-row:nth-last-child(-n+2) {
  border-bottom: 0;
}

.bb-b2b-company-info-row span,
.bb-b2b-company-info-row strong {
  padding: 0.8125rem 0.875rem;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-company-info-row span {
  display: flex;
  align-items: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-right: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-company-info-row strong {
  display: flex;
  align-items: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  font-weight: var(--bb-fw-bold);
  overflow-wrap: anywhere;
}

.bb-b2b-company-info-row strong a {
  color: var(--bb-primary);
  text-decoration: none !important;
}

.bb-b2b-company-info-row strong a:hover {
  text-decoration: underline !important;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2b-company-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-info-table--two-column {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-info-table--two-column .bb-b2b-company-info-row {
    border-right: 0;
  }
  .bb-b2b-company-info-table--two-column .bb-b2b-company-info-row:nth-last-child(-n+2) {
    border-bottom: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
  }
  .bb-b2b-company-info-table--two-column .bb-b2b-company-info-row:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-info-card {
    padding: 1rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-info-card-head {
    gap: 0.625rem;
  }
  .bb-b2b-company-info-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
  }
  .bb-b2b-company-info-row {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-info-row span {
    border-right: 0;
    border-bottom: var(--bb-border-width) solid var(--bb-b2b-company-info-border);
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-info-richtext {
    font-size: var(--bb-fs-sm);
  }
}
/* =====================================
   B2B Company Certificates
   Component
===================================== */
.bb-b2b-company-certificates {
  --bb-b2b-company-cert-primary: var(--bb-primary);
  --bb-b2b-company-cert-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-company-cert-ink: var(--bb-emphasis-color);
  --bb-b2b-company-cert-muted: var(--bb-secondary-color);
  --bb-b2b-company-cert-border: var(--bb-border-color);
  --bb-b2b-company-cert-shadow: var(--bb-shadow-xs);
  --bb-b2b-company-cert-shadow-hover: var(--bb-shadow-sm);
  min-width: 0;
}

.bb-b2b-company-certificates-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2b-company-certificates-head-copy {
  max-width: 48rem;
}

.bb-b2b-company-certificates-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-company-certificates-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-certificates-title {
  margin: 0;
  color: var(--bb-b2b-company-cert-ink);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-certificates-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-company-cert-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Carousel */
.bb-b2b-company-certificates-carousel {
  position: relative;
  overflow: hidden;
  padding: 1.125rem 3.25rem 2.75rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-cert-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-cert-shadow);
}

.bb-b2b-company-certificates-carousel-inner {
  overflow: hidden;
}

.bb-b2b-company-certificates-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-b2b-company-certificate-card {
  min-width: 0;
}

.bb-b2b-company-certificate-card-shell {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-cert-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-company-certificate-card-shell:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-company-cert-shadow-hover);
}

.bb-b2b-company-certificate-card-head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  padding: 0.875rem 0.875rem 0.75rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
}

.bb-b2b-company-certificate-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-cert-primary-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-company-certificate-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-company-certificate-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-b2b-company-certificate-card-head h4 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Media */
.bb-b2b-company-certificate-media {
  position: relative;
  min-height: 15rem;
  aspect-ratio: 1/1.22;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem;
  color: inherit !important;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), var(--bb-tertiary-bg);
  text-decoration: none !important;
}

.bb-b2b-company-certificate-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 0.24s ease;
}

.bb-b2b-company-certificate-card-shell:hover .bb-b2b-company-certificate-media img {
  transform: scale(1.025);
}

.bb-b2b-company-certificate-placeholder {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 38%, transparent);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) dashed var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2b-company-certificate-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-b2b-company-certificate-view {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 56%, transparent);
  border-radius: var(--bb-radius);
  backdrop-filter: blur(0.5rem);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.bb-b2b-company-certificate-card-shell:hover .bb-b2b-company-certificate-view {
  transform: translateY(-0.0625rem);
  background-color: var(--bb-primary);
}

.bb-b2b-company-certificate-view .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Controls */
.bb-b2b-company-certificates-control {
  top: 50%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.bb-b2b-company-certificates-control:hover {
  color: var(--bb-primary);
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-company-certificates-control-prev {
  left: 0.625rem;
}

.bb-b2b-company-certificates-control-next {
  right: 0.625rem;
}

.bb-b2b-company-certificates-control .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Indicators */
.bb-b2b-company-certificates-indicators {
  right: 0;
  bottom: 0.8125rem;
  left: 0;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2b-company-certificates-indicators [data-bs-target] {
  width: 0.4375rem;
  height: 0.4375rem;
  min-width: 0.4375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-company-certificates-indicators .active {
  width: 1.375rem;
  background-color: var(--bb-warning);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2b-company-certificates-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-certificates-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2b-company-certificates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-certificates-carousel {
    padding: 0.875rem 2.25rem 2.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-certificates-grid {
    gap: 0.75rem;
  }
  .bb-b2b-company-certificate-media {
    min-height: 13rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-certificates-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-certificate-media {
    min-height: 15rem;
  }
}
/* =====================================
   B2B Company Pictures
   Component
===================================== */
.bb-b2b-company-pictures {
  --bb-b2b-company-pictures-primary: var(--bb-primary);
  --bb-b2b-company-pictures-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-company-pictures-ink: var(--bb-emphasis-color);
  --bb-b2b-company-pictures-muted: var(--bb-secondary-color);
  --bb-b2b-company-pictures-border: var(--bb-border-color);
  --bb-b2b-company-pictures-shadow: var(--bb-shadow-xs);
  --bb-b2b-company-pictures-shadow-hover: var(--bb-shadow-sm);
  min-width: 0;
}

.bb-b2b-company-pictures-carousel {
  position: relative;
  overflow: hidden;
  padding: 1.125rem 3.25rem 2.75rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-pictures-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-pictures-shadow);
}

.bb-b2b-company-pictures-carousel-inner {
  overflow: hidden;
}

.bb-b2b-company-pictures-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-b2b-company-picture-card {
  min-width: 0;
}

.bb-b2b-company-picture-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 13.5rem;
  aspect-ratio: 16/11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-pictures-shadow);
  appearance: none;
  cursor: zoom-in;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-company-picture-button:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-company-pictures-shadow-hover);
}

.bb-b2b-company-picture-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.32s ease;
}

.bb-b2b-company-picture-button:hover img {
  transform: scale(1.045);
}

.bb-b2b-company-picture-placeholder {
  width: 100%;
  height: 100%;
  min-height: 13.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 38%, transparent);
  background-color: var(--bb-body-bg);
}

.bb-b2b-company-picture-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

/* Overlay */
.bb-b2b-company-picture-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--bb-white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-coal-300) 8%, transparent) 0%, color-mix(in srgb, var(--bb-coal-300) 54%, transparent) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.bb-b2b-company-picture-button:hover .bb-b2b-company-picture-overlay {
  opacity: 1;
}

.bb-b2b-company-picture-overlay-icon {
  width: 2.625rem;
  height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-company-picture-overlay-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-company-picture-overlay-text {
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

/* Controls */
.bb-b2b-company-pictures-control {
  top: 50%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.bb-b2b-company-pictures-control:hover {
  color: var(--bb-primary);
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-company-pictures-control-prev {
  left: 0.625rem;
}

.bb-b2b-company-pictures-control-next {
  right: 0.625rem;
}

.bb-b2b-company-pictures-control .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Indicators */
.bb-b2b-company-pictures-indicators {
  right: 0;
  bottom: 0.8125rem;
  left: 0;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2b-company-pictures-indicators [data-bs-target] {
  width: 0.4375rem;
  height: 0.4375rem;
  min-width: 0.4375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-company-pictures-indicators .active {
  width: 1.375rem;
  background-color: var(--bb-warning);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2b-company-pictures-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-pictures-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-pictures-carousel {
    padding: 0.875rem 2.25rem 2.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-company-pictures-grid {
    gap: 0.75rem;
  }
  .bb-b2b-company-picture-button {
    min-height: 12rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-pictures-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-picture-button {
    min-height: 14rem;
  }
}
/* =====================================
   B2B Company Product Special Groups
   Component
===================================== */
.bb-b2b-company-special-groups {
  --bb-b2b-company-special-primary: var(--bb-primary);
  --bb-b2b-company-special-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-company-special-ink: var(--bb-emphasis-color);
  --bb-b2b-company-special-muted: var(--bb-secondary-color);
  --bb-b2b-company-special-border: var(--bb-border-color);
  --bb-b2b-company-special-shadow: var(--bb-shadow-xs);
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.bb-b2b-company-special-group {
  min-width: 0;
}

.bb-b2b-company-special-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2b-company-special-group-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-company-special-group-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-special-group-title {
  margin: 0;
  color: var(--bb-b2b-company-special-ink);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-company-special-group-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-company-special-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-company-special-group-link {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0 0.875rem;
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-company-special-primary-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2b-company-special-group-link:hover {
  color: var(--bb-white) !important;
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-b2b-company-special-group-link .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-company-special-group-body {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-company-special-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-company-special-shadow);
}

/* Temporary compatibility for old child output */
.bb-b2b-company-special-group-body .js-slide {
  min-width: 0;
}

.bb-b2b-company-special-group-body .products-group,
.bb-b2b-company-special-group-body .product-item,
.bb-b2b-company-special-group-body .product-item__outer,
.bb-b2b-company-special-group-body .product-item__inner {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .bb-b2b-company-special-group-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2b-company-special-group-link {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-special-group-body {
    border-radius: var(--bb-radius-lg);
  }
}
/* =====================================
   B2B Company Special Products
   Component
===================================== */
.bb-b2b-company-special-products {
  --bb-b2b-company-special-product-primary: var(--bb-primary);
  --bb-b2b-company-special-product-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-company-special-product-ink: var(--bb-emphasis-color);
  --bb-b2b-company-special-product-muted: var(--bb-secondary-color);
  --bb-b2b-company-special-product-border: var(--bb-border-color);
  --bb-b2b-company-special-product-shadow: var(--bb-shadow-xs);
  --bb-b2b-company-special-product-shadow-hover: var(--bb-shadow-sm);
  min-width: 0;
}

.bb-b2b-company-special-products-carousel {
  position: relative;
  overflow: hidden;
  padding: 0 3.25rem 2.25rem;
}

.bb-b2b-company-special-products-carousel-inner {
  overflow: hidden;
}

.bb-b2b-company-special-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-b2b-company-special-product-card {
  min-width: 0;
}

.bb-b2b-company-special-product-shell {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 70%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-company-special-product-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-company-special-product-shell:hover {
  transform: translateY(-0.1875rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-company-special-product-shadow-hover);
}

.bb-b2b-company-special-product-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: inherit !important;
  text-decoration: none !important;
}

.bb-b2b-company-special-product-media {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 36%), linear-gradient(180deg, var(--bb-tertiary-bg) 0%, var(--bb-white) 100%);
}

.bb-b2b-company-special-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0.875rem;
  transition: transform 0.32s ease;
}

.bb-b2b-company-special-product-shell:hover .bb-b2b-company-special-product-media img {
  transform: scale(1.045);
}

.bb-b2b-company-special-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 36%, transparent);
}

.bb-b2b-company-special-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-b2b-company-special-product-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  min-height: 1.625rem;
  padding: 0.25rem 0.65rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-coal-300) 92%, var(--bb-primary));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
}

.bb-b2b-company-special-product-favorite {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 4;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 78%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 68%, transparent);
  border-radius: 50%;
  box-shadow: 0 0.375rem 0.875rem rgba(16, 24, 40, 0.1);
  backdrop-filter: blur(0.5rem);
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bb-b2b-company-special-product-favorite:hover {
  transform: translateY(-0.0625rem);
  color: var(--bb-danger) !important;
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-company-special-product-favorite .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.bb-b2b-company-special-product-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0.875rem;
}

.bb-b2b-company-special-product-title {
  display: -webkit-box;
  min-height: 2.625rem;
  overflow: hidden;
  margin: 0 0 0.75rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: -0.0125em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2b-company-special-product-price {
  min-height: 2.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2b-company-special-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-b2b-company-special-product-action-text {
  color: var(--bb-dark);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-company-special-product-action-icon {
  width: 1.875rem;
  height: 1.875rem;
  min-width: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-company-special-product-primary-soft);
  border-radius: 50%;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.bb-b2b-company-special-product-action-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-company-special-product-shell:hover .bb-b2b-company-special-product-action-icon {
  transform: translateX(0.125rem);
  color: var(--bb-white);
  background-color: var(--bb-primary);
}

/* Controls */
.bb-b2b-company-special-products-control {
  top: 50%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.bb-b2b-company-special-products-control:hover {
  color: var(--bb-primary);
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-company-special-products-control-prev {
  left: 0.625rem;
}

.bb-b2b-company-special-products-control-next {
  right: 0.625rem;
}

.bb-b2b-company-special-products-control .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Indicators */
.bb-b2b-company-special-products-indicators {
  right: 0;
  bottom: 0.3125rem;
  left: 0;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2b-company-special-products-indicators [data-bs-target] {
  width: 0.4375rem;
  height: 0.4375rem;
  min-width: 0.4375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-company-special-products-indicators .active {
  width: 1.375rem;
  background-color: var(--bb-warning);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-company-special-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-company-special-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-company-special-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-company-special-products-carousel {
    padding: 0 2.25rem 2.25rem;
  }
  .bb-b2b-company-special-products-grid {
    gap: 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-company-special-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-company-special-product-media {
    aspect-ratio: 16/10;
  }
}
/* =====================================
   Community Create
   LayoutLight form page
===================================== */
.bb-community-create-page {
  width: 100%;
}

/* Head */
.bb-community-create-head {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.bb-community-create-head .bb-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-community-create-title {
  margin: 0.75rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-community-create-text {
  max-width: 42rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-community-create-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-community-create-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Layout */
.bb-community-create-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Guide */
.bb-community-create-guide-card {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-community-create-guide-icon {
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 1rem 0;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-community-create-guide-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-community-create-guide-body {
  padding: 1rem;
}

.bb-community-create-guide-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-community-create-guide-body h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-community-create-guide-body p {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-community-create-guide-list {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-community-create-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-community-create-guide-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-heading);
}

.bb-community-create-guide-item span:last-child {
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form card */
.bb-community-create-form-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-community-create-form {
  display: grid;
  gap: 1rem;
}

.bb-community-create-form-head {
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-community-create-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-community-create-form-head p {
  margin: 0.35rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Form */
.bb-community-create-form-group {
  min-width: 0;
}

.bb-community-create-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-community-create-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-community-create-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-community-create-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-community-create-input-group .form-control,
.bb-community-create-input-group .form-select {
  min-height: 2.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-community-create-input-group .form-control:focus,
.bb-community-create-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-community-create-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-community-create-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-community-create-textarea {
  min-height: 13rem;
  resize: vertical;
}

.bb-community-create-hint {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-community-create-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Helper */
.bb-community-create-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  color: var(--bb-secondary-color);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-community-create-helper > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-community-create-helper span:last-child {
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Info grid */
.bb-community-create-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-community-create-info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.625rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-align: center;
}

.bb-community-create-info-item .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Actions */
.bb-community-create-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-community-create-actions .btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 11rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-community-create-actions .btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Result */
.bb-community-create-result-card {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-success) 8%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-community-create-result-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
  border-radius: 50%;
}

.bb-community-create-result-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-community-create-result-card h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-community-create-result-card p {
  max-width: 34rem;
  margin: 0.625rem auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* LayoutLight width discipline */
.bb-layout-light-page:has(.bb-community-create-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 62rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-community-create-page) .bb-layout-light-card {
  width: 100%;
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-community-create-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-community-create-layout {
    grid-template-columns: 1fr;
  }
  .bb-community-create-guide-card {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .bb-community-create-form-card,
  .bb-community-create-guide-card,
  .bb-community-create-result-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-community-create-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-community-create-actions {
    justify-content: stretch;
  }
  .bb-community-create-actions .btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Bulbulustur Web - B2B Home Page
   Layer: pages/b2b/_b2b-home.scss

   Purpose:
   - B2B home / wholesale landing visual stage.
   - Hero host, feature band, shared section headers, legacy product grid compatibility,
     RFQ form compatibility and stats band.
   - Keeps existing class names to avoid breaking old hidden components.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor roots:
   - .bb-b2b-home
   - .bb-b2b-home-hero-section
   - .bb-b2b-feature-band
   - .bb-b2b-section
   - .bb-b2b-products-grid
   - .bb-b2b-stats-band

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only B2B home page local tokens.
===================================== */
/* =====================================
   B2B Home Local Tokens - Light Default
===================================== */
.bb-b2b-home {
  --bb-b2b-home-primary: var(--bb-page-accent, var(--bb-info));
  --bb-b2b-home-primary-dark: color-mix(in srgb, var(--bb-b2b-home-primary) 70%, var(--bb-dark));
  --bb-b2b-home-primary-deep: color-mix(in srgb, var(--bb-b2b-home-primary) 58%, var(--bb-dark));
  --bb-b2b-home-primary-soft: color-mix(in srgb, var(--bb-b2b-home-primary) 10%, var(--bb-body-bg));
  --bb-b2b-home-primary-soft-strong: color-mix(in srgb, var(--bb-b2b-home-primary) 16%, var(--bb-body-bg));
  --bb-b2b-home-ink: var(--bb-heading-color);
  --bb-b2b-home-muted: var(--bb-secondary-color);
  --bb-b2b-home-border: var(--bb-border-color);
  --bb-b2b-home-surface: var(--bb-surface-elevated);
  --bb-b2b-home-surface-soft: var(--bb-surface-soft);
  --bb-b2b-home-yellow: var(--bb-primary);
  --bb-b2b-home-radius-md: var(--bb-radius-lg);
  --bb-b2b-home-radius-lg: var(--bb-radius-xl);
  --bb-b2b-home-radius-xl: var(--bb-radius-2xl);
  --bb-b2b-home-shadow-soft:
      0 0.625rem 1.5rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent);
  --bb-b2b-home-shadow-card:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent);
  --bb-b2b-home-bg:
      radial-gradient(
          circle at top left,
          color-mix(in srgb, var(--bb-b2b-home-primary) 5.5%, transparent),
          transparent 34%
      ),
      var(--bb-b2b-home-surface);
  --bb-b2b-feature-band-bg: color-mix(in srgb, var(--bb-b2b-home-primary-deep) 86%, var(--bb-dark));
  --bb-b2b-feature-band-text: var(--bb-white, var(--bb-color-white));
  --bb-b2b-feature-band-muted: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 76%, transparent);
  --bb-b2b-feature-band-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 12%, transparent);
  --bb-b2b-feature-band-icon-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 10%, transparent);
  --bb-b2b-feature-band-icon-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 14%, transparent);
  --bb-b2b-feature-band-icon-color: var(--bb-primary);
  --bb-b2b-feature-band-shadow:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 18%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent);
  --bb-b2b-section-link-bg: var(--bb-b2b-home-primary-dark);
  --bb-b2b-section-link-color: var(--bb-white, var(--bb-color-white));
  --bb-b2b-product-box-bg: var(--bb-b2b-home-surface);
  --bb-b2b-product-box-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2b-product-box-border-hover: color-mix(in srgb, var(--bb-b2b-home-primary) 18%, var(--bb-border-color));
  --bb-b2b-product-media-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-b2b-home-primary-soft) 55%, transparent),
          color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 96%, transparent)
      );
  --bb-b2b-form-control-bg: color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-body-bg));
  --bb-b2b-form-control-color: var(--bb-heading-color);
  --bb-b2b-form-control-border: transparent;
  --bb-b2b-form-control-bg-focus: var(--bb-surface-elevated);
  --bb-b2b-form-control-border-focus: color-mix(in srgb, var(--bb-b2b-home-primary) 28%, var(--bb-border-color));
  --bb-b2b-form-control-shadow-focus:
      0 0 0 0.25rem color-mix(in srgb, var(--bb-b2b-home-primary) 8%, transparent);
  --bb-b2b-stats-band-bg:
      radial-gradient(
          circle at top left,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          var(--bb-b2b-home-primary-dark) 0%,
          var(--bb-b2b-home-primary-deep) 100%
      );
  --bb-b2b-stats-band-color: var(--bb-white, var(--bb-color-white));
  --bb-b2b-stats-card-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 7%, transparent);
  --bb-b2b-stats-muted: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 78%, transparent);
  --bb-b2b-stats-subtle: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 76%, transparent);
}

/* =====================================
   B2B Home Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-b2b-home {
  --bb-b2b-home-primary-soft: color-mix(in srgb, var(--bb-b2b-home-primary) 13%, transparent);
  --bb-b2b-home-primary-soft-strong: color-mix(in srgb, var(--bb-b2b-home-primary) 19%, transparent);
  --bb-b2b-home-shadow-soft:
      0 0.625rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 20%, transparent);
  --bb-b2b-home-shadow-card:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent);
  --bb-b2b-home-bg:
      radial-gradient(
          circle at top left,
          color-mix(in srgb, var(--bb-b2b-home-primary) 8%, transparent),
          transparent 34%
      ),
      var(--bb-body-bg);
  --bb-b2b-feature-band-bg: color-mix(in srgb, var(--bb-b2b-home-primary-deep) 74%, var(--bb-body-bg));
  --bb-b2b-feature-band-muted: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 72%, transparent);
  --bb-b2b-feature-band-icon-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 8%, transparent);
  --bb-b2b-feature-band-icon-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 10%, transparent);
  --bb-b2b-feature-band-shadow:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 36%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent);
  --bb-b2b-product-box-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-product-box-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-product-box-border-hover: color-mix(in srgb, var(--bb-b2b-home-primary) 24%, var(--bb-border-color));
  --bb-b2b-product-media-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-b2b-home-primary) 10%, transparent),
          color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg))
      );
  --bb-b2b-form-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-b2b-form-control-color: var(--bb-emphasis-color);
  --bb-b2b-form-control-border: color-mix(in srgb, var(--bb-border-color) 68%, transparent);
  --bb-b2b-form-control-bg-focus: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-b2b-form-control-border-focus: color-mix(in srgb, var(--bb-b2b-home-primary) 34%, var(--bb-border-color));
  --bb-b2b-form-control-shadow-focus:
      0 0 0 0.25rem color-mix(in srgb, var(--bb-b2b-home-primary) 12%, transparent);
  --bb-b2b-stats-band-bg:
      radial-gradient(
          circle at top left,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-b2b-home-primary-dark) 86%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-b2b-home-primary-deep) 82%, var(--bb-body-bg)) 100%
      );
  --bb-b2b-stats-card-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 6%, transparent);
}

/* =====================================
   B2B Home Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-b2b-home {
  --bb-b2b-home-primary-soft: color-mix(in srgb, var(--bb-b2b-home-primary) 11%, transparent);
  --bb-b2b-home-primary-soft-strong: color-mix(in srgb, var(--bb-b2b-home-primary) 17%, transparent);
  --bb-b2b-home-shadow-soft:
      0 0.625rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-b2b-home-shadow-card:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 32%, transparent);
  --bb-b2b-home-bg:
      radial-gradient(
          circle at top left,
          color-mix(in srgb, var(--bb-b2b-home-primary) 7%, transparent),
          transparent 34%
      ),
      var(--bb-body-bg);
  --bb-b2b-feature-band-bg: color-mix(in srgb, var(--bb-b2b-home-primary-deep) 72%, var(--bb-body-bg));
  --bb-b2b-feature-band-muted: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 70%, transparent);
  --bb-b2b-feature-band-icon-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 7%, transparent);
  --bb-b2b-feature-band-icon-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 9%, transparent);
  --bb-b2b-feature-band-shadow:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 40%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-b2b-product-box-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-product-box-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-product-box-border-hover: color-mix(in srgb, var(--bb-b2b-home-primary) 22%, var(--bb-border-color));
  --bb-b2b-product-media-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-b2b-home-primary) 9%, transparent),
          color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg))
      );
  --bb-b2b-form-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-b2b-form-control-color: var(--bb-emphasis-color);
  --bb-b2b-form-control-border: color-mix(in srgb, var(--bb-border-color) 64%, transparent);
  --bb-b2b-form-control-bg-focus: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-form-control-border-focus: color-mix(in srgb, var(--bb-b2b-home-primary) 32%, var(--bb-border-color));
  --bb-b2b-form-control-shadow-focus:
      0 0 0 0.25rem color-mix(in srgb, var(--bb-b2b-home-primary) 10%, transparent);
  --bb-b2b-stats-band-bg:
      radial-gradient(
          circle at top left,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-b2b-home-primary-dark) 84%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-b2b-home-primary-deep) 80%, var(--bb-body-bg)) 100%
      );
  --bb-b2b-stats-card-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 5%, transparent);
}

/* =====================================
   Page Root
===================================== */
.bb-b2b-home {
  background: var(--bb-b2b-home-bg);
  color: var(--bb-b2b-home-ink);
  padding-bottom: 4rem;
}

.bb-b2b-home-hero-section {
  padding-top: 1rem;
}

.bb-b2b-banner-wrap {
  padding-top: 0.25rem;
}

/* =====================================
   B2B Feature Band
   Slider bottom info band
===================================== */
.bb-b2b-feature-band {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--bb-b2b-feature-band-text);
  background: radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--bb-color-purple-500) 16%, transparent), transparent 28%), radial-gradient(circle at 18% 85%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 22%), var(--bb-b2b-feature-band-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-b2b-feature-band-border));
  border-radius: var(--bb-b2b-home-radius-xl);
  box-shadow: var(--bb-b2b-feature-band-shadow);
}

.bb-b2b-feature-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 9%, transparent), transparent 48%);
  opacity: 0.7;
}

.bb-b2b-feature-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.bb-b2b-feature-item {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.bb-b2b-feature-icon {
  width: 3.125rem;
  height: 3.125rem;
  min-width: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-feature-band-icon-color);
  background-color: var(--bb-b2b-feature-band-icon-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-feature-band-icon-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 18%, transparent), 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-b2b-feature-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 560, "GRAD" 0, "opsz" 28;
}

.bb-b2b-feature-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bb-b2b-feature-title {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--bb-b2b-feature-band-text);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

.bb-b2b-feature-text {
  display: block;
  color: var(--bb-b2b-feature-band-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-feature-separator {
  display: none;
}

/* =====================================
   Shared Section Header Compatibility
===================================== */
.bb-b2b-section {
  padding-top: 2.125rem;
}

.bb-b2b-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.125rem;
}

.bb-b2b-section-head-left {
  max-width: 55rem;
}

.bb-b2b-section-title {
  margin-bottom: 0.45rem;
  color: var(--bb-b2b-home-ink);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
}

.bb-b2b-section-text {
  margin-bottom: 0;
  color: var(--bb-b2b-home-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2b-section-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.15rem;
  color: var(--bb-b2b-section-link-color) !important;
  background: var(--bb-b2b-section-link-bg);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2b-home-shadow-soft);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2b-section-link:hover {
  color: var(--bb-b2b-section-link-color) !important;
  transform: translateY(-1px);
  box-shadow: var(--bb-b2b-home-shadow-card);
}

/* =====================================
   Existing Product Grid Compatibility
===================================== */
.bb-b2b-products-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2b-product-card {
  display: block;
  color: inherit;
  text-decoration: none !important;
}

.bb-b2b-product-box {
  height: 100%;
  overflow: hidden;
  background: var(--bb-b2b-product-box-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-product-box-border);
  border-radius: var(--bb-b2b-home-radius-lg);
  box-shadow: var(--bb-b2b-home-shadow-soft);
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2b-product-card:hover .bb-b2b-product-box {
  transform: translateY(-2px);
  border-color: var(--bb-b2b-product-box-border-hover);
  box-shadow: var(--bb-b2b-home-shadow-card);
}

.bb-b2b-product-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--bb-b2b-product-media-bg);
}

.bb-b2b-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-transition-slow);
}

.bb-b2b-product-card:hover .bb-b2b-product-media img {
  transform: scale(1.045);
}

.bb-b2b-product-body {
  padding: 0.8125rem 0.8125rem 0.9375rem;
}

.bb-b2b-product-name {
  display: block;
  min-height: 2.375rem;
  margin-bottom: 0.45rem;
  color: var(--bb-b2b-home-ink);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-product-price {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bb-b2b-home-primary);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
}

.bb-b2b-product-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bb-b2b-product-meta span {
  color: var(--bb-b2b-home-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Category Group Compatibility
===================================== */
.bb-b2b-category-group + .bb-b2b-category-group {
  margin-top: 2.125rem;
}

.bb-b2b-category-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}

.bb-b2b-category-title {
  margin-bottom: 0.35rem;
  color: var(--bb-b2b-home-ink);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
}

.bb-b2b-category-text {
  margin-bottom: 0;
  color: var(--bb-b2b-home-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   RFQ Form Compatibility
===================================== */
.bb-b2b-rfq-form-title {
  margin-bottom: 1rem;
  color: var(--bb-b2b-home-ink);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
}

.bb-b2b-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2b-form-group {
  margin-bottom: 0.875rem;
}

.bb-b2b-form-control,
.bb-b2b-form-select,
.bb-b2b-form-textarea {
  min-height: 3.25rem;
  color: var(--bb-b2b-form-control-color);
  background-color: var(--bb-b2b-form-control-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-form-control-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: none !important;
  font-size: var(--bb-fs-sm);
}

.bb-b2b-form-control,
.bb-b2b-form-select {
  padding-right: 1rem;
  padding-left: 1rem;
}

.bb-b2b-form-control:focus,
.bb-b2b-form-select:focus,
.bb-b2b-form-textarea:focus {
  background-color: var(--bb-b2b-form-control-bg-focus);
  border-color: var(--bb-b2b-form-control-border-focus);
  box-shadow: var(--bb-b2b-form-control-shadow-focus) !important;
}

.bb-b2b-form-textarea {
  min-height: 7.25rem;
  padding: 0.875rem 1rem;
  resize: none;
}

/* =====================================
   Stats Band
===================================== */
.bb-b2b-stats-band {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: var(--bb-b2b-stats-band-color);
  background: var(--bb-b2b-stats-band-bg);
}

.bb-b2b-stats-band::before {
  content: "";
  position: absolute;
  left: -6.25rem;
  top: -6.25rem;
  width: 16.25rem;
  height: 16.25rem;
  background: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 4.5%, transparent);
  border-radius: 50%;
}

.bb-b2b-stats-band::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -5.625rem;
  width: 15rem;
  height: 15rem;
  background: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: 50%;
}

/* =====================================
   Stats Component Compatibility
===================================== */
.bb-b2b-stats-wrap {
  position: relative;
  z-index: 2;
  padding-top: 2.625rem;
  padding-bottom: 2.625rem;
}

.bb-b2b-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
  align-items: stretch;
}

.bb-b2b-stats-copy h2 {
  max-width: 32.5rem;
  margin-bottom: 0.9rem;
  color: var(--bb-white, var(--bb-color-white));
  font-size: clamp(2.125rem, 3.4vw, 2.625rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
}

.bb-b2b-stats-copy p {
  max-width: 35rem;
  margin-bottom: 0;
  color: var(--bb-b2b-stats-muted);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-b2b-stat-card {
  min-height: 11.25rem;
  padding: 1.375rem;
  background: var(--bb-b2b-stats-card-bg);
  border-radius: var(--bb-b2b-home-radius-lg);
  box-shadow: var(--bb-b2b-home-shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-b2b-stat-number {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--bb-b2b-home-yellow);
  font-size: var(--bb-icon-size-4xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
}

.bb-b2b-stat-title {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bb-white, var(--bb-color-white));
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-stat-text {
  display: block;
  color: var(--bb-b2b-stats-subtle);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1399.98px) {
  .bb-b2b-products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-feature-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-feature-separator {
    display: none;
  }
  .bb-b2b-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-b2b-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-stats-copy {
    grid-column: span 2;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-home {
    padding-bottom: 2.75rem;
  }
  .bb-b2b-feature-band {
    padding: 1rem;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2b-feature-band-inner {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .bb-b2b-feature-item {
    gap: 0.75rem;
  }
  .bb-b2b-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .bb-b2b-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .bb-b2b-stats-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-stats-copy {
    grid-column: auto;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-product-media {
    aspect-ratio: 16/10;
  }
}
.bb-b2b-product-list-layout {
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.bb-b2b-product-list-sidebar,
.bb-b2b-product-list-content {
  min-width: 0;
}

.bb-b2b-product-list-sidebar {
  position: sticky;
  top: 1rem;
}

/* Toolbar */
.bb-b2b-product-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.375rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--bb-b2b-list-surface);
  border: var(--bb-border-width) solid var(--bb-b2b-list-border);
  border-radius: var(--bb-b2b-list-radius-lg);
  box-shadow: var(--bb-b2b-list-shadow);
}

.bb-b2b-product-list-toolbar-left,
.bb-b2b-product-list-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-b2b-product-list-filter-anchor {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-product-list-filter-anchor .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-product-list-view-switch {
  align-items: center;
  gap: 0.375rem;
}

.bb-b2b-product-list-view-btn {
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2b-product-list-view-btn.active {
  color: var(--bb-primary);
  background-color: var(--bb-b2b-list-primary-soft);
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
}

.bb-b2b-product-list-view-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-product-list-sort-form {
  margin: 0;
}

.bb-b2b-product-list-sort-select {
  min-width: 13rem;
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-product-list-page-mini {
  align-items: center;
  gap: 0.4375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-b2b-product-list-page-mini span {
  min-width: 2.375rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2b-product-list-page-mini a {
  color: var(--bb-emphasis-color);
  text-decoration: none !important;
}

.bb-b2b-product-list-page-mini .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Product grid */
.bb-b2b-product-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Pagination wrapper only */
.bb-b2b-product-list-pagination {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-b2b-list-radius-lg);
  box-shadow: var(--bb-b2b-list-shadow);
}

.bb-b2b-product-list-page-notify {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-product-list-pagination-items {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-b2b-product-list-empty {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  min-height: 18.75rem;
  padding: 2.125rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-b2b-list-radius-xl);
  box-shadow: var(--bb-b2b-list-shadow);
}

.bb-b2b-product-list-empty-icon {
  width: 9.375rem;
  height: 9.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background: linear-gradient(135deg, var(--bb-b2b-list-primary-soft), var(--bb-white));
  border-radius: var(--bb-b2b-list-radius-lg);
}

.bb-b2b-product-list-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-b2b-product-list-empty-copy h1 {
  margin: 0.75rem 0 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
}

.bb-b2b-product-list-empty-copy p {
  max-width: 47.5rem;
  margin-bottom: 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2b-product-list-empty-copy ul {
  margin: 0 0 1.125rem;
  padding-left: 1.125rem;
  color: var(--bb-emphasis-color);
}

.bb-b2b-product-list-empty-copy li {
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2b-product-list-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Category info */
.bb-b2b-product-list-category-info-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-b2b-list-radius-xl);
  box-shadow: var(--bb-b2b-list-shadow);
}

.bb-b2b-product-list-category-info-copy h2 {
  margin: 0.75rem 0 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-product-list-category-info-copy p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2b-product-list-category-info-media {
  overflow: hidden;
  border-radius: var(--bb-b2b-list-radius-lg);
  background-color: var(--bb-tertiary-bg);
}

.bb-b2b-product-list-category-info-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-product-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-product-list-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2b-product-list-sidebar {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-product-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-product-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-product-list-toolbar-left,
  .bb-b2b-product-list-toolbar-right {
    justify-content: space-between;
  }
  .bb-b2b-product-list-category-info-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-product-list-grid {
    gap: 0.75rem;
  }
  .bb-b2b-product-list-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-product-list-page-notify {
    text-align: center;
  }
  .bb-b2b-product-list-pagination-items {
    justify-content: center;
  }
  .bb-b2b-product-list-empty {
    grid-template-columns: 1fr;
    padding: 1.375rem;
  }
  .bb-b2b-product-list-empty-icon {
    width: 6.875rem;
    height: 6.875rem;
  }
  .bb-b2b-product-list-empty-icon .material-symbols-outlined {
    font-size: var(--bb-icon-size-4xl);
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-product-list-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-product-list-sort-form,
  .bb-b2b-product-list-sort-select {
    width: 100%;
  }
  .bb-b2b-product-list-toolbar-right {
    align-items: stretch;
    flex-direction: column;
  }
}
/* =====================================
   Bulbulustur Web - B2B Product Detail Page
   Layer: pages/b2b/_product-detail.scss

   Purpose:
   - B2B product detail page visual stage.
   - Trade identity, gallery, sticky offer card, detail sections,
     order information, lead time tables, customization options and supplier card.
   - Keeps existing class names to avoid breaking hidden/detail components.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor roots:
   - .bb-b2b-detail-page
   - .bb-b2b-detail-hero
   - .bb-b2b-detail-trade-identity
   - .bb-b2b-detail-main-grid
   - .bb-b2b-detail-gallery-card
   - .bb-b2b-detail-offer-card
   - .bb-b2b-detail-section-card
   - .bb-b2b-detail-supplier-card

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only B2B product detail page local tokens.
===================================== */
/* =====================================
   B2B Detail Local Tokens - Light Default
===================================== */
.bb-b2b-detail-page {
  --bb-b2b-detail-accent: var(--bb-page-accent);
  --bb-b2b-detail-accent-strong: var(--bb-page-accent-strong);
  --bb-b2b-detail-accent-soft: var(--bb-page-accent-soft);
  --bb-b2b-detail-ink: var(--bb-heading-color);
  --bb-b2b-detail-muted: var(--bb-secondary-color);
  --bb-b2b-detail-subtle: var(--bb-tertiary-color);
  --bb-b2b-detail-surface: var(--bb-surface-elevated);
  --bb-b2b-detail-surface-soft: var(--bb-tertiary-bg);
  --bb-b2b-detail-border: var(--bb-border-color);
  --bb-b2b-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-b2b-detail-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent),
    0 0.1875rem 0.75rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2b-detail-shadow-soft:
    0 0.5rem 1.25rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent);
  --bb-b2b-detail-trade-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-primary) 4%) 0%,
      var(--bb-surface-elevated) 100%
    );
  --bb-b2b-detail-trade-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2b-detail-trade-shadow: var(--bb-shadow-xs);
  --bb-b2b-detail-trade-logo-bg: var(--bb-body-bg);
  --bb-b2b-detail-trade-logo-color: color-mix(in srgb, var(--bb-primary-active) 74%, var(--bb-emphasis-color) 26%);
  --bb-b2b-detail-trade-logo-border: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-b2b-detail-trade-logo-shadow: inset 0 1px 0 color-mix(in srgb, var(--bb-white) 50%, transparent);
  --bb-b2b-detail-trade-name-color: var(--bb-emphasis-color);
  --bb-b2b-detail-trade-name-hover: color-mix(in srgb, var(--bb-primary-active) 72%, var(--bb-emphasis-color) 28%);
  --bb-b2b-detail-trade-chip-color: color-mix(in srgb, var(--bb-primary-active) 82%, var(--bb-emphasis-color) 18%);
  --bb-b2b-detail-trade-chip-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-surface-elevated));
  --bb-b2b-detail-trade-chip-border: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  --bb-b2b-detail-card-bg: var(--bb-body-bg);
  --bb-b2b-detail-card-border: var(--bb-border-color);
  --bb-b2b-detail-gallery-action-size: 2.75rem;
  --bb-b2b-detail-gallery-action-favorite-height: 2.75rem;
  --bb-b2b-detail-gallery-action-favorite-padding-x: 0.875rem;
  --bb-b2b-detail-gallery-action-gap: 0.5rem;
  --bb-b2b-detail-gallery-action-icon-size: var(--bb-icon-size-md);
  --bb-b2b-detail-gallery-action-count-size: var(--bb-fs-sm);
  --bb-b2b-detail-gallery-action-color: var(--bb-emphasis-color);
  --bb-b2b-detail-gallery-action-color-muted: var(--bb-secondary-color);
  --bb-b2b-detail-gallery-action-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  --bb-b2b-detail-gallery-action-bg-hover: var(--bb-surface-elevated);
  --bb-b2b-detail-gallery-action-border: color-mix(in srgb, var(--bb-white) 68%, transparent);
  --bb-b2b-detail-gallery-action-shadow:
    0 0.5rem 1.25rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent);
  --bb-b2b-detail-gallery-action-radius: var(--bb-radius-lg);
  --bb-b2b-detail-gallery-action-favorite-radius: var(--bb-radius-pill);
  --bb-b2b-detail-gallery-nav-size: 3rem;
  --bb-b2b-detail-gallery-nav-icon-size: var(--bb-icon-size-lg);
  --bb-b2b-detail-gallery-media-radius: var(--bb-radius-lg);
  --bb-b2b-detail-offer-border: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  --bb-b2b-detail-offer-shadow: var(--bb-shadow-sm);
  --bb-b2b-detail-tile-bg: var(--bb-tertiary-bg);
  --bb-b2b-detail-tile-bg-hover: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  --bb-b2b-detail-tile-border-hover: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
}

/* =====================================
   B2B Detail Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-b2b-detail-page {
  --bb-b2b-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-b2b-detail-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-black) 24%, transparent),
    0 0.1875rem 0.75rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-b2b-detail-shadow-soft:
    0 0.5rem 1.25rem color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-b2b-detail-trade-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-primary) 8%) 0%,
      var(--bb-surface-elevated) 100%
    );
  --bb-b2b-detail-trade-border: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-b2b-detail-trade-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-b2b-detail-trade-logo-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-white) 12%);
  --bb-b2b-detail-trade-logo-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-detail-trade-logo-shadow: inset 0 1px 0 color-mix(in srgb, var(--bb-white) 6%, transparent);
  --bb-b2b-detail-trade-chip-bg: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-surface-elevated));
  --bb-b2b-detail-trade-chip-border: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-b2b-detail-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-detail-card-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-detail-gallery-action-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, transparent);
  --bb-b2b-detail-gallery-action-bg-hover: var(--bb-surface-elevated);
  --bb-b2b-detail-gallery-action-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-detail-gallery-action-shadow:
    0 0.5rem 1.25rem color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2b-detail-gallery-media-radius: var(--bb-radius-xl);
  --bb-b2b-detail-offer-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-detail-offer-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2b-detail-tile-bg: var(--bb-surface-soft);
  --bb-b2b-detail-tile-bg-hover: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-detail-tile-border-hover: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
}

/* =====================================
   B2B Detail Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-b2b-detail-page {
  --bb-b2b-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-b2b-detail-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-black) 26%, transparent),
    0 0.1875rem 0.75rem color-mix(in srgb, var(--bb-black) 15%, transparent);
  --bb-b2b-detail-shadow-soft:
    0 0.5rem 1.25rem color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2b-detail-trade-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-primary) 8%) 0%,
      var(--bb-surface-elevated) 100%
    );
  --bb-b2b-detail-trade-border: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  --bb-b2b-detail-trade-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-black) 26%, transparent);
  --bb-b2b-detail-trade-logo-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-white) 12%);
  --bb-b2b-detail-trade-logo-border: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-detail-trade-logo-shadow: inset 0 1px 0 color-mix(in srgb, var(--bb-white) 5%, transparent);
  --bb-b2b-detail-trade-chip-bg: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-surface-elevated));
  --bb-b2b-detail-trade-chip-border: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-b2b-detail-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-detail-card-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-detail-gallery-action-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, transparent);
  --bb-b2b-detail-gallery-action-bg-hover: var(--bb-surface-elevated);
  --bb-b2b-detail-gallery-action-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-detail-gallery-action-shadow:
    0 0.5rem 1.25rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-b2b-detail-gallery-media-radius: var(--bb-radius-xl);
  --bb-b2b-detail-offer-border: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
  --bb-b2b-detail-offer-shadow:
    0 0.75rem 1.875rem color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-b2b-detail-tile-bg: var(--bb-surface-soft);
  --bb-b2b-detail-tile-bg-hover: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
  --bb-b2b-detail-tile-border-hover: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
}

/* =====================================
   Hero
===================================== */
.bb-b2b-detail-hero {
  padding: 0.75rem 0 2.25rem;
}

.bb-b2b-detail-product-head {
  margin-bottom: 1.25rem;
}

/* =====================================
   Trade Identity
===================================== */
.bb-b2b-detail-trade-identity {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  margin-bottom: 1.125rem;
  background: var(--bb-b2b-detail-trade-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-trade-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-detail-trade-shadow);
}

.bb-b2b-detail-trade-identity-logo {
  width: 2.875rem;
  height: 2.875rem;
  min-width: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-detail-trade-logo-color);
  background-color: var(--bb-b2b-detail-trade-logo-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-trade-logo-border);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: var(--bb-b2b-detail-trade-logo-shadow);
}

.bb-b2b-detail-trade-identity-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bb-b2b-detail-trade-identity-logo .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-detail-trade-identity-main {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2b-detail-trade-identity-name {
  color: var(--bb-b2b-detail-trade-name-color) !important;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-decoration: none !important;
}

.bb-b2b-detail-trade-identity-name:hover {
  color: var(--bb-b2b-detail-trade-name-hover) !important;
  text-decoration: none !important;
}

.bb-b2b-detail-trade-identity-type {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.35;
}

.bb-b2b-detail-trade-identity-type::before {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  display: inline-block;
  background-color: color-mix(in srgb, var(--bb-secondary-color) 56%, transparent);
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-detail-trade-identity-chip {
  min-height: 2rem;
  margin-left: auto;
  padding: 0.4375rem 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bb-b2b-detail-trade-chip-color);
  background-color: var(--bb-b2b-detail-trade-chip-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-trade-chip-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-b2b-detail-trade-identity-chip .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-fs-base);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

/* =====================================
   Product Title
===================================== */
.bb-b2b-detail-product-title {
  max-width: 64rem;
  margin: 0;
  color: var(--bb-b2b-detail-ink);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight);
}

/* =====================================
   Main Grid
===================================== */
.bb-b2b-detail-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 27.5rem);
  gap: 1.75rem;
  align-items: start;
}

.bb-b2b-detail-main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* =====================================
   Gallery
===================================== */
.bb-b2b-detail-gallery-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-b2b-detail-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-card-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-detail-shadow);
}

.bb-b2b-detail-gallery-area {
  min-width: 0;
}

/* =====================================
   Gallery Overlay Actions
===================================== */
.bb-b2b-detail-gallery-actions {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.bb-b2b-detail-gallery-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-b2b-detail-gallery-action-gap);
  color: var(--bb-b2b-detail-gallery-action-color) !important;
  background-color: var(--bb-b2b-detail-gallery-action-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-gallery-action-border);
  box-shadow: var(--bb-b2b-detail-gallery-action-shadow);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  text-decoration: none !important;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2b-detail-gallery-action:hover,
.bb-b2b-detail-gallery-action:focus {
  color: var(--bb-b2b-detail-gallery-action-color) !important;
  background-color: var(--bb-b2b-detail-gallery-action-bg-hover);
  text-decoration: none !important;
  transform: translateY(-0.0625rem);
  outline: 0;
}

.bb-b2b-detail-gallery-action .material-symbols-outlined {
  font-size: var(--bb-b2b-detail-gallery-action-icon-size);
  line-height: 1;
}

.bb-b2b-detail-gallery-action--explore {
  width: var(--bb-b2b-detail-gallery-action-size);
  height: var(--bb-b2b-detail-gallery-action-size);
  border-radius: var(--bb-b2b-detail-gallery-action-radius);
}

.bb-b2b-detail-gallery-action--favorite {
  min-width: var(--bb-b2b-detail-gallery-action-favorite-height);
  height: var(--bb-b2b-detail-gallery-action-favorite-height);
  padding: 0 var(--bb-b2b-detail-gallery-action-favorite-padding-x);
  border-radius: var(--bb-b2b-detail-gallery-action-favorite-radius);
}

.bb-b2b-detail-gallery-action-count {
  color: var(--bb-b2b-detail-gallery-action-color);
  font-size: var(--bb-b2b-detail-gallery-action-count-size);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-b2b-detail-gallery-action--favorite:hover .material-symbols-outlined {
  color: var(--bb-danger);
}

/* =====================================
   Gallery Navigation Arrows
===================================== */
.bb-b2b-detail-gallery-area .carousel-control-prev,
.bb-b2b-detail-gallery-area .carousel-control-next,
.bb-b2b-detail-gallery-area .swiper-button-prev,
.bb-b2b-detail-gallery-area .swiper-button-next,
.bb-b2b-detail-gallery-area .tns-controls > button {
  width: var(--bb-b2b-detail-gallery-nav-size) !important;
  height: var(--bb-b2b-detail-gallery-nav-size) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent) !important;
  border-radius: var(--bb-radius-pill) !important;
  box-shadow: var(--bb-b2b-detail-gallery-action-shadow) !important;
}

.bb-b2b-detail-gallery-area .carousel-control-prev-icon,
.bb-b2b-detail-gallery-area .carousel-control-next-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.bb-b2b-detail-gallery-area .swiper-button-prev::after,
.bb-b2b-detail-gallery-area .swiper-button-next::after {
  font-size: var(--bb-b2b-detail-gallery-nav-icon-size) !important;
}

.bb-b2b-detail-gallery-area .tns-controls > button > span,
.bb-b2b-detail-gallery-area .tns-controls > button > i,
.bb-b2b-detail-gallery-area .tns-controls > button .material-symbols-outlined {
  font-size: var(--bb-b2b-detail-gallery-nav-icon-size) !important;
  line-height: 1;
}

/* =====================================
   Gallery Media Radius
===================================== */
.bb-b2b-detail-gallery-area img,
.bb-b2b-detail-gallery-area picture,
.bb-b2b-detail-gallery-area .carousel-inner,
.bb-b2b-detail-gallery-area .carousel-item,
.bb-b2b-detail-gallery-area .swiper,
.bb-b2b-detail-gallery-area .swiper-slide,
.bb-b2b-detail-gallery-area .tns-item {
  border-radius: var(--bb-b2b-detail-gallery-media-radius);
}

/* =====================================
   Offer Card
===================================== */
.bb-b2b-detail-offer-card {
  position: sticky;
  top: 6rem;
  z-index: 4;
  padding: 1.25rem;
  background-color: var(--bb-b2b-detail-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-offer-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-detail-offer-shadow);
}

.bb-b2b-detail-offer-badge-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.bb-b2b-detail-offer-badge .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-detail-offer-price-box {
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-detail-offer-start-price span {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-detail-offer-start-price strong {
  display: inline-block;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.05;
  letter-spacing: var(--bb-letter-spacing-tight);
}

.bb-b2b-detail-offer-start-price small {
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-detail-tier-list {
  display: grid;
  gap: 0.5625rem;
  margin-top: 1rem;
}

.bb-b2b-detail-tier-item {
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--bb-b2b-detail-tile-bg);
  border-radius: var(--bb-radius);
}

.bb-b2b-detail-tier-item span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-detail-tier-item strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2b-detail-offer-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  padding: 1rem 0;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-detail-offer-meta-item {
  min-width: 0;
  padding: 0.75rem;
  background-color: var(--bb-b2b-detail-tile-bg);
  border-radius: var(--bb-radius);
}

.bb-b2b-detail-offer-meta-item span {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-detail-offer-meta-item strong {
  display: block;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-b2b-detail-offer-links {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
}

.bb-b2b-detail-offer-link-item {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-b2b-detail-tile-bg);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-detail-offer-link-item:hover {
  color: var(--bb-primary) !important;
  background-color: var(--bb-b2b-detail-tile-bg-hover);
}

.bb-b2b-detail-offer-link-icon {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-detail-primary-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-detail-offer-link-icon .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-b2b-detail-offer-link-arrow {
  margin-left: auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-detail-offer-actions {
  display: grid;
  gap: 0.625rem;
  padding-top: 0.5rem;
}

.bb-b2b-detail-offer-action {
  min-height: 2.875rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Safe Trading
===================================== */
.bb-b2b-detail-safe-trading {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin-top: 1rem;
  padding: 0.8125rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-b2b-detail-tile-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
}

.bb-b2b-detail-safe-trading:hover {
  border-color: var(--bb-b2b-detail-tile-border-hover);
}

.bb-b2b-detail-safe-trading-icon {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-detail-primary-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-detail-safe-trading-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-detail-safe-trading-copy {
  min-width: 0;
  flex: 1;
}

.bb-b2b-detail-safe-trading-copy strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-detail-safe-trading-copy small {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-detail-safe-trading-arrow {
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Sections
===================================== */
.bb-b2b-detail-section {
  margin-top: 0;
}

.bb-b2b-detail-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.bb-b2b-detail-section-copy {
  max-width: 50rem;
}

.bb-b2b-detail-section-label {
  margin-bottom: 0.625rem;
}

.bb-b2b-detail-section-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-detail-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-detail-section-card {
  overflow: hidden;
  padding: 1.25rem;
  background-color: var(--bb-b2b-detail-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-card-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-detail-shadow);
}

.bb-b2b-detail-description {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-b2b-detail-subsection-title {
  margin: 1.5rem 0 0.875rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

/* =====================================
   Data Grid
===================================== */
.bb-b2b-detail-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-detail-data-row {
  display: grid;
  grid-template-columns: minmax(8.75rem, 0.9fr) minmax(0, 1.1fr);
  min-height: 2.875rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-detail-data-row:nth-last-child(-n+2) {
  border-bottom: 0;
}

.bb-b2b-detail-data-label,
.bb-b2b-detail-data-value {
  padding: 0.75rem 0.8125rem;
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
}

.bb-b2b-detail-data-label {
  color: var(--bb-secondary-color);
  background-color: var(--bb-b2b-detail-tile-bg);
  border-right: var(--bb-border-width) solid var(--bb-border-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-detail-data-value {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  overflow-wrap: anywhere;
}

/* =====================================
   Order Cards
===================================== */
.bb-b2b-order-info-stack {
  display: grid;
  gap: 1rem;
}

.bb-b2b-order-info-card {
  padding: 1.125rem;
  background-color: var(--bb-b2b-detail-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-card-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-detail-shadow);
}

.bb-b2b-order-info-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bb-b2b-order-info-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-detail-primary-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-order-info-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2b-order-info-card h3 {
  margin: 0 0 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-order-info-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-order-info-table {
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-order-info-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6875rem 0;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-order-info-row:last-child {
  border-bottom: 0;
}

.bb-b2b-order-info-row span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
}

.bb-b2b-order-info-row strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-align: right;
}

/* =====================================
   Lead Time Table
===================================== */
.bb-b2b-leadtime-table {
  overflow: hidden;
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2b-leadtime-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
}

.bb-b2b-leadtime-row span,
.bb-b2b-leadtime-row strong {
  padding: 0.6875rem 0.625rem;
  border-right: var(--bb-border-width) solid var(--bb-border-color);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-leadtime-row span:last-child,
.bb-b2b-leadtime-row strong:last-child {
  border-right: 0;
}

.bb-b2b-leadtime-row:last-child span,
.bb-b2b-leadtime-row:last-child strong {
  border-bottom: 0;
}

.bb-b2b-leadtime-head {
  background-color: var(--bb-b2b-detail-tile-bg);
}

.bb-b2b-leadtime-head span {
  color: var(--bb-secondary-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-leadtime-row strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Custom Options
===================================== */
.bb-b2b-custom-option-list {
  display: grid;
  gap: 0.625rem;
}

.bb-b2b-custom-option {
  padding: 0.75rem;
  background-color: var(--bb-b2b-detail-tile-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2b-custom-option span,
.bb-b2b-custom-option strong,
.bb-b2b-custom-option small {
  display: block;
}

.bb-b2b-custom-option span {
  margin-bottom: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-custom-option strong {
  margin-bottom: 0.125rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-custom-option small {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
}

.bb-b2b-order-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.bb-b2b-order-info-action {
  min-height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Supplier Card
===================================== */
.bb-b2b-detail-supplier-card {
  padding: 1.375rem;
  background-color: var(--bb-b2b-detail-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-detail-card-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-detail-shadow);
}

.bb-b2b-detail-supplier-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1.5rem;
  align-items: start;
}

.bb-b2b-detail-supplier-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.bb-b2b-detail-supplier-logo {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-detail-tile-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  text-decoration: none !important;
}

.bb-b2b-detail-supplier-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bb-b2b-detail-supplier-logo .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-b2b-detail-supplier-info {
  min-width: 0;
}

.bb-b2b-detail-supplier-info h3 {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  overflow-wrap: anywhere;
}

.bb-b2b-detail-supplier-info h3 a {
  color: inherit;
  text-decoration: none !important;
}

.bb-b2b-detail-supplier-info h3 a:hover {
  color: var(--bb-primary);
}

.bb-b2b-detail-supplier-info p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-detail-supplier-trust {
  justify-self: end;
  width: 100%;
}

.bb-b2b-detail-supplier-badges {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.bb-b2b-detail-supplier-badges span {
  min-height: 1.625rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-b2b-detail-tile-bg);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-detail-supplier-rating {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

.bb-b2b-detail-supplier-rating strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-3xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-detail-supplier-stars {
  display: block;
  color: var(--bb-warning);
  font-size: var(--bb-fs-sm);
  letter-spacing: 0.0625rem;
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-detail-supplier-rating small {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
}

.bb-b2b-detail-company-picture-host {
  margin-top: 1.375rem;
  padding-top: 1.375rem;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-detail-company-picture-host:empty {
  display: none;
}

.bb-b2b-detail-supplier-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.125rem;
}

.bb-b2b-detail-supplier-actions .btn {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-detail-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1.375rem;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-detail-main-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-detail-offer-card {
    position: static;
  }
  .bb-b2b-detail-supplier-top {
    grid-template-columns: 1fr;
  }
  .bb-b2b-detail-supplier-trust {
    justify-self: stretch;
  }
  .bb-b2b-detail-supplier-badges,
  .bb-b2b-detail-supplier-rating {
    justify-content: flex-start;
  }
  .bb-b2b-detail-data-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-detail-data-row:nth-last-child(-n+2) {
    border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  }
  .bb-b2b-detail-data-row:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-detail-hero {
    padding-top: 0.5rem;
  }
  .bb-b2b-detail-product-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-b2b-detail-trade-identity {
    align-items: flex-start;
    padding: 0.9375rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-detail-trade-identity-main {
    flex: 1 1 calc(100% - 3.5rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .bb-b2b-detail-trade-identity-type::before {
    display: none;
  }
  .bb-b2b-detail-trade-identity-chip {
    margin-left: 3.75rem;
  }
  .bb-b2b-detail-section-card,
  .bb-b2b-order-info-card,
  .bb-b2b-detail-supplier-card {
    padding: 1rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-detail-data-row {
    grid-template-columns: 1fr;
  }
  .bb-b2b-detail-data-label {
    border-right: 0;
    border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  }
  .bb-b2b-leadtime-row {
    grid-template-columns: 1fr;
  }
  .bb-b2b-leadtime-row span,
  .bb-b2b-leadtime-row strong {
    border-right: 0;
  }
  .bb-b2b-order-info-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-b2b-order-info-action {
    width: 100%;
  }
  .bb-b2b-detail-supplier-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-detail-offer-meta-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-detail-supplier-main {
    gap: 0.75rem;
  }
  .bb-b2b-detail-supplier-logo {
    width: 3.875rem;
    height: 3.875rem;
    min-width: 3.875rem;
  }
  .bb-b2b-detail-supplier-info h3 {
    font-size: var(--bb-icon-size-md);
  }
}
/* =====================================
   Bulbulustur Web - B2B Special Category Page
   Layer: pages/b2b/_special-category.scss

   Purpose:
   - B2B special category landing/listing page.
   - Hero, campaign visual, quick navigation, product grid, pagination,
     empty state and bottom banner.
   - Product card anatomy comes from global .bb-product-card family.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor roots:
   - .bb-b2b-special-page
   - .bb-b2b-special-hero
   - .bb-b2b-special-quick-nav
   - .bb-b2b-special-products-section
   - .bb-b2b-special-products-grid

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only B2B special category page local tokens.
===================================== */
/* =====================================
   B2B Special Local Tokens - Light Default
===================================== */
.bb-b2b-special-page {
  --bb-b2b-special-primary: var(--bb-page-accent, var(--bb-info));
  --bb-b2b-special-primary-soft: var(--bb-page-accent-soft, color-mix(in srgb, var(--bb-info) 12%, var(--bb-body-bg)));
  --bb-b2b-special-primary-strong: var(--bb-page-accent-strong, var(--bb-info));
  --bb-b2b-special-navy: var(--bb-navy-800);
  --bb-b2b-special-navy-soft: var(--bb-navy-700);
  --bb-b2b-special-yellow: var(--bb-primary);
  --bb-b2b-special-ink: var(--bb-emphasis-color);
  --bb-b2b-special-muted: var(--bb-secondary-color);
  --bb-b2b-special-subtle: var(--bb-tertiary-color);
  --bb-b2b-special-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-special-radius-md: var(--bb-radius-xl);
  --bb-b2b-special-radius-lg: var(--bb-radius-2xl);
  --bb-b2b-special-radius-xl: calc(var(--bb-radius-2xl) + 0.25rem);
  --bb-b2b-special-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent);
  --bb-b2b-special-shadow-hover:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent);
  --bb-b2b-special-page-bg: var(--bb-body-bg);
  --bb-b2b-special-page-color: var(--bb-body-color);
  --bb-b2b-special-hero-text: var(--bb-white, var(--bb-color-white));
  --bb-b2b-special-hero-bg-token: var(--bb-b2b-special-hero-bg, var(--bb-b2b-special-navy));
  --bb-b2b-special-hero-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-b2b-special-hero-bg-token) 88%, var(--bb-black, var(--bb-color-black))),
          color-mix(in srgb, var(--bb-b2b-special-hero-bg-token) 70%, transparent)
      ),
      var(--bb-b2b-special-hero-image),
      radial-gradient(
          circle at 86% 18%,
          color-mix(in srgb, var(--bb-b2b-special-yellow) 20%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          135deg,
          var(--bb-b2b-special-navy),
          var(--bb-b2b-special-navy-soft)
      );
  --bb-b2b-special-hero-orb-left-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 8%, transparent);
  --bb-b2b-special-hero-orb-right-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 7%, transparent);
  --bb-b2b-special-hero-label-color: var(--bb-white, var(--bb-color-white));
  --bb-b2b-special-hero-label-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 14%, transparent);
  --bb-b2b-special-hero-label-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 20%, transparent);
  --bb-b2b-special-hero-label-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 20%, transparent);
  --bb-b2b-special-hero-text-muted: color-mix(in srgb, currentColor 88%, transparent);
  --bb-b2b-special-hero-primary-btn-color: var(--bb-emphasis-color);
  --bb-b2b-special-hero-primary-btn-bg: var(--bb-b2b-special-yellow);
  --bb-b2b-special-hero-primary-btn-border: color-mix(in srgb, var(--bb-b2b-special-yellow) 86%, var(--bb-emphasis-color));
  --bb-b2b-special-hero-primary-btn-shadow:
      0 1rem 2rem color-mix(in srgb, var(--bb-b2b-special-yellow) 24%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 24%, transparent);
  --bb-b2b-special-hero-light-btn-color: var(--bb-white, var(--bb-color-white));
  --bb-b2b-special-hero-light-btn-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 13%, transparent);
  --bb-b2b-special-hero-light-btn-bg-hover: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 18%, transparent);
  --bb-b2b-special-hero-light-btn-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 18%, transparent);
  --bb-b2b-special-hero-light-btn-shadow:
      0 1rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 10%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 14%, transparent);
  --bb-b2b-special-hero-picture-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 11%, transparent);
  --bb-b2b-special-hero-picture-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 22%, transparent);
  --bb-b2b-special-hero-picture-shadow:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 18%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 20%, transparent);
  --bb-b2b-special-hero-picture-filter:
      drop-shadow(
          0 1.25rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 18%, transparent)
      );
  --bb-b2b-special-hero-placeholder-color: var(--bb-white, var(--bb-color-white));
  --bb-b2b-special-hero-placeholder-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 12%, transparent);
  --bb-b2b-special-quick-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  --bb-b2b-special-quick-card-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-special-quick-card-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 42%, transparent);
  --bb-b2b-special-quick-scrollbar-thumb: color-mix(in srgb, var(--bb-border-color) 72%, var(--bb-secondary-color));
  --bb-b2b-special-quick-item-color: var(--bb-b2b-special-ink);
  --bb-b2b-special-quick-item-bg: color-mix(in srgb, var(--bb-surface-soft) 74%, var(--bb-body-bg));
  --bb-b2b-special-quick-item-bg-hover: var(--bb-surface-elevated);
  --bb-b2b-special-quick-item-bg-active: color-mix(in srgb, var(--bb-b2b-special-primary) 8%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-item-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2b-special-quick-item-border-hover: color-mix(in srgb, var(--bb-b2b-special-primary) 20%, var(--bb-border-color));
  --bb-b2b-special-quick-item-border-active: color-mix(in srgb, var(--bb-b2b-special-primary) 24%, var(--bb-border-color));
  --bb-b2b-special-quick-item-shadow-hover:
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent);
  --bb-b2b-special-quick-item-shadow-active:
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-b2b-special-primary) 8%, transparent);
  --bb-b2b-special-quick-icon-color: color-mix(in srgb, var(--bb-b2b-special-primary) 82%, var(--bb-emphasis-color));
  --bb-b2b-special-quick-icon-bg: color-mix(in srgb, var(--bb-b2b-special-primary) 10%, var(--bb-white, var(--bb-color-white)));
  --bb-b2b-special-quick-icon-border: color-mix(in srgb, var(--bb-b2b-special-primary) 12%, var(--bb-border-color));
  --bb-b2b-special-pagination-bg: var(--bb-surface-elevated);
  --bb-b2b-special-pagination-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-special-pagination-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent);
  --bb-b2b-special-empty-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-b2b-special-primary) 7%, transparent),
          transparent 18rem
      ),
      var(--bb-surface-elevated);
  --bb-b2b-special-empty-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2b-special-empty-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent);
  --bb-b2b-special-empty-icon-color: var(--bb-b2b-special-primary);
  --bb-b2b-special-empty-icon-bg: color-mix(in srgb, var(--bb-b2b-special-primary) 10%, var(--bb-body-bg));
  position: relative;
  overflow: hidden;
  color: var(--bb-b2b-special-page-color);
  background-color: var(--bb-b2b-special-page-bg);
}

/* =====================================
   B2B Special Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-b2b-special-page {
  --bb-b2b-special-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-special-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent);
  --bb-b2b-special-shadow-hover:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent);
  --bb-b2b-special-hero-bg-token: var(--bb-b2b-special-hero-bg, var(--bb-color-navy-900));
  --bb-b2b-special-hero-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-b2b-special-hero-bg-token) 88%, var(--bb-black, var(--bb-color-black))),
          color-mix(in srgb, var(--bb-b2b-special-hero-bg-token) 66%, transparent)
      ),
      var(--bb-b2b-special-hero-image),
      radial-gradient(
          circle at 86% 18%,
          color-mix(in srgb, var(--bb-b2b-special-yellow) 13%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-navy-900) 80%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-color-blue-800) 36%, var(--bb-body-bg))
      );
  --bb-b2b-special-quick-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, transparent);
  --bb-b2b-special-quick-card-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-special-quick-card-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 7%, transparent);
  --bb-b2b-special-quick-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-b2b-special-quick-item-bg-hover: color-mix(in srgb, var(--bb-b2b-special-primary) 15%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-item-bg-active: color-mix(in srgb, var(--bb-b2b-special-primary) 15%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-item-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-special-quick-item-border-hover: color-mix(in srgb, var(--bb-b2b-special-primary) 28%, var(--bb-border-color));
  --bb-b2b-special-quick-item-border-active: color-mix(in srgb, var(--bb-b2b-special-primary) 28%, var(--bb-border-color));
  --bb-b2b-special-quick-icon-color: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 86%, var(--bb-b2b-special-primary));
  --bb-b2b-special-quick-icon-bg: color-mix(in srgb, var(--bb-b2b-special-primary) 24%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-icon-border: color-mix(in srgb, var(--bb-b2b-special-primary) 20%, var(--bb-border-color));
  --bb-b2b-special-pagination-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-special-pagination-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-special-pagination-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 20%, transparent);
  --bb-b2b-special-empty-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-b2b-special-primary) 8%, transparent),
          transparent 18rem
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-special-empty-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-special-empty-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent);
  --bb-b2b-special-empty-icon-bg: color-mix(in srgb, var(--bb-b2b-special-primary) 14%, transparent);
}

/* =====================================
   B2B Special Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-b2b-special-page {
  --bb-b2b-special-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-special-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-b2b-special-shadow-hover:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 30%, transparent);
  --bb-b2b-special-hero-bg-token: var(--bb-b2b-special-hero-bg, var(--bb-color-navy-900));
  --bb-b2b-special-hero-bg:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-b2b-special-hero-bg-token) 88%, var(--bb-black, var(--bb-color-black))),
          color-mix(in srgb, var(--bb-b2b-special-hero-bg-token) 66%, transparent)
      ),
      var(--bb-b2b-special-hero-image),
      radial-gradient(
          circle at 86% 18%,
          color-mix(in srgb, var(--bb-b2b-special-yellow) 12%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-navy-900) 82%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-color-blue-800) 34%, var(--bb-body-bg))
      );
  --bb-b2b-special-quick-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, transparent);
  --bb-b2b-special-quick-card-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-special-quick-card-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 6%, transparent);
  --bb-b2b-special-quick-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-body-bg));
  --bb-b2b-special-quick-item-bg-hover: color-mix(in srgb, var(--bb-b2b-special-primary) 14%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-item-bg-active: color-mix(in srgb, var(--bb-b2b-special-primary) 14%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-item-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2b-special-quick-item-border-hover: color-mix(in srgb, var(--bb-b2b-special-primary) 28%, var(--bb-border-color));
  --bb-b2b-special-quick-item-border-active: color-mix(in srgb, var(--bb-b2b-special-primary) 28%, var(--bb-border-color));
  --bb-b2b-special-quick-icon-color: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 86%, var(--bb-b2b-special-primary));
  --bb-b2b-special-quick-icon-bg: color-mix(in srgb, var(--bb-b2b-special-primary) 24%, var(--bb-surface-elevated));
  --bb-b2b-special-quick-icon-border: color-mix(in srgb, var(--bb-b2b-special-primary) 20%, var(--bb-border-color));
  --bb-b2b-special-pagination-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-special-pagination-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-special-pagination-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent);
  --bb-b2b-special-empty-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-b2b-special-primary) 7%, transparent),
          transparent 18rem
      ),
      color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-special-empty-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-special-empty-shadow:
      0 0.875rem 2rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-b2b-special-empty-icon-bg: color-mix(in srgb, var(--bb-b2b-special-primary) 12%, transparent);
}

/* =====================================
   Hero
===================================== */
.bb-b2b-special-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.75rem, 5vw, 4.25rem);
  padding-bottom: clamp(4.25rem, 7vw, 6.25rem);
  color: var(--bb-b2b-special-hero-text);
  background: var(--bb-b2b-special-hero-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bb-b2b-special-hero::before {
  content: "";
  position: absolute;
  left: -7rem;
  bottom: -8rem;
  width: 18rem;
  height: 18rem;
  background-color: var(--bb-b2b-special-hero-orb-left-bg);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-special-hero::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -7rem;
  width: 17rem;
  height: 17rem;
  background-color: var(--bb-b2b-special-hero-orb-right-bg);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-special-hero .bb-container {
  position: relative;
  z-index: 2;
}

.bb-b2b-special-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(18rem, 0.94fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.bb-b2b-special-hero-copy {
  min-width: 0;
  max-width: 48rem;
}

.bb-b2b-special-hero-label {
  margin-bottom: 1.125rem;
  color: var(--bb-b2b-special-hero-label-color);
  background-color: var(--bb-b2b-special-hero-label-bg);
  border-color: var(--bb-b2b-special-hero-label-border);
  box-shadow: var(--bb-b2b-special-hero-label-shadow);
}

.bb-b2b-special-hero-label .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-special-hero-title {
  max-width: 48rem;
  margin: 0 0 1rem;
  color: currentColor;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 0.98;
  letter-spacing: var(--bb-letter-spacing-tight, -0.055em);
}

.bb-b2b-special-hero-text {
  max-width: 45rem;
  margin: 0 0 1.375rem;
  color: var(--bb-b2b-special-hero-text-muted);
  font-size: clamp(var(--bb-fs-sm), 1.2vw, var(--bb-fs-lg));
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-special-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.bb-b2b-special-hero-btn {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-right: 1.35rem;
  padding-left: 1.35rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-b2b-special-hero-btn .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-special-hero-actions .btn-primary {
  color: var(--bb-b2b-special-hero-primary-btn-color);
  background-color: var(--bb-b2b-special-hero-primary-btn-bg);
  border-color: var(--bb-b2b-special-hero-primary-btn-border);
  box-shadow: var(--bb-b2b-special-hero-primary-btn-shadow);
}

.bb-b2b-special-hero-actions .btn-light {
  color: var(--bb-b2b-special-hero-light-btn-color);
  background-color: var(--bb-b2b-special-hero-light-btn-bg);
  border-color: var(--bb-b2b-special-hero-light-btn-border);
  box-shadow: var(--bb-b2b-special-hero-light-btn-shadow);
}

.bb-b2b-special-hero-actions .btn-light:hover,
.bb-b2b-special-hero-actions .btn-light:focus {
  color: var(--bb-b2b-special-hero-light-btn-color);
  background-color: var(--bb-b2b-special-hero-light-btn-bg-hover);
}

.bb-b2b-special-hero-visual {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-special-hero-picture {
  position: relative;
  width: min(100%, 25rem);
  min-height: clamp(15rem, 24vw, 21rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  background-color: var(--bb-b2b-special-hero-picture-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-special-hero-picture-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-special-hero-picture-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-b2b-special-hero-picture img {
  display: block;
  max-width: 100%;
  max-height: clamp(14rem, 22vw, 19rem);
  object-fit: contain;
  filter: var(--bb-b2b-special-hero-picture-filter);
}

.bb-b2b-special-hero-placeholder {
  width: 6rem;
  height: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-special-hero-placeholder-color);
  background-color: var(--bb-b2b-special-hero-placeholder-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-b2b-special-hero-placeholder .material-symbols-outlined {
  font-size: 3rem;
  line-height: 1;
}

/* =====================================
   Quick Nav
===================================== */
.bb-b2b-special-quick-nav {
  position: relative;
  z-index: 5;
  margin-top: -2.75rem;
}

.bb-b2b-special-quick-nav-card {
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.25rem);
  background-color: var(--bb-b2b-special-quick-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-special-quick-card-border);
  border-radius: var(--bb-b2b-special-radius-xl);
  box-shadow: var(--bb-b2b-special-quick-card-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bb-b2b-special-quick-nav-head {
  margin-bottom: 0.875rem;
}

.bb-b2b-special-quick-nav-eyebrow {
  display: inline-flex;
  margin-bottom: 0.4rem;
  color: var(--bb-b2b-special-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide, 0.075em);
  text-transform: uppercase;
}

.bb-b2b-special-quick-nav-title {
  margin: 0;
  color: var(--bb-b2b-special-ink);
  font-size: clamp(var(--bb-fs-base), 1.3vw, var(--bb-fs-xl));
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2b-special-quick-nav-list {
  display: flex;
  gap: 0.875rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.bb-b2b-special-quick-nav-list::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-special-quick-nav-list::-webkit-scrollbar-thumb {
  background-color: var(--bb-b2b-special-quick-scrollbar-thumb);
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-special-quick-nav-item {
  min-width: 9.5rem;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  color: var(--bb-b2b-special-quick-item-color) !important;
  background-color: var(--bb-b2b-special-quick-item-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-special-quick-item-border);
  border-radius: var(--bb-b2b-special-radius-md);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-base);
  text-align: center;
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2b-special-quick-nav-item:hover,
.bb-b2b-special-quick-nav-item:focus {
  transform: translateY(-2px);
  background-color: var(--bb-b2b-special-quick-item-bg-hover);
  border-color: var(--bb-b2b-special-quick-item-border-hover);
  box-shadow: var(--bb-b2b-special-quick-item-shadow-hover);
}

.bb-b2b-special-quick-nav-item.active {
  background-color: var(--bb-b2b-special-quick-item-bg-active);
  border-color: var(--bb-b2b-special-quick-item-border-active);
  box-shadow: var(--bb-b2b-special-quick-item-shadow-active);
}

.bb-b2b-special-quick-nav-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-special-quick-icon-color);
  background-color: var(--bb-b2b-special-quick-icon-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-special-quick-icon-border);
  border-radius: 1rem;
}

.bb-b2b-special-quick-nav-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* =====================================
   Products Section
===================================== */
.bb-b2b-special-section-head {
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem);
}

.bb-b2b-special-section-copy {
  max-width: 54rem;
}

.bb-b2b-special-section-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-special-section-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-special-section-title {
  color: var(--bb-b2b-special-ink);
}

.bb-b2b-special-section-text {
  max-width: 54rem;
  color: var(--bb-b2b-special-muted);
}

/* =====================================
   Product Grid
===================================== */
.bb-b2b-special-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.25vw, 1.125rem);
  align-items: stretch;
}

.bb-b2b-special-products-grid .bb-product-card {
  height: 100%;
}

/* =====================================
   Pagination
===================================== */
.bb-b2b-special-pagination {
  margin-top: 1.375rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-b2b-special-pagination-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-special-pagination-border);
  border-radius: var(--bb-b2b-special-radius-lg);
  box-shadow: var(--bb-b2b-special-pagination-shadow);
}

.bb-b2b-special-pagination-summary {
  color: var(--bb-b2b-special-ink);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-special-pagination-list {
  display: flex;
  justify-content: flex-end;
}

/* =====================================
   Empty State
===================================== */
.bb-b2b-special-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: var(--bb-b2b-special-empty-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-special-empty-border);
  border-radius: var(--bb-b2b-special-radius-xl);
  box-shadow: var(--bb-b2b-special-empty-shadow);
}

.bb-b2b-special-empty-icon {
  width: 4.25rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.125rem;
  color: var(--bb-b2b-special-empty-icon-color);
  background-color: var(--bb-b2b-special-empty-icon-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-b2b-special-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2b-special-empty-title {
  margin: 0 0 0.65rem;
  color: var(--bb-b2b-special-ink);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-special-empty-text {
  max-width: 35rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-b2b-special-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-special-empty-btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-extrabold);
}

/* =====================================
   Bottom Banner
===================================== */
.bb-b2b-special-bottom-banner {
  padding-top: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1399.98px) {
  .bb-b2b-special-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-special-hero-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-special-hero-visual {
    justify-content: flex-start;
  }
  .bb-b2b-special-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-special-quick-nav {
    margin-top: -2.125rem;
  }
  .bb-b2b-special-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-special-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-special-pagination-summary {
    text-align: center;
  }
  .bb-b2b-special-pagination-list {
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-special-hero {
    padding-top: 2rem;
    padding-bottom: 4.5rem;
  }
  .bb-b2b-special-hero-title {
    font-size: clamp(2rem, 13vw, 3rem);
  }
  .bb-b2b-special-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-special-hero-btn {
    width: 100%;
  }
  .bb-b2b-special-quick-nav {
    margin-top: -1.75rem;
  }
  .bb-b2b-special-quick-nav-card {
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2b-special-products-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-special-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-special-hero-picture {
    width: 100%;
    min-height: 13rem;
  }
}
/* =====================================
   Bulbulustur Web - B2B Category Page
   Layer: pages/b2b/_category-page.scss

   Purpose:
   - B2B category detail page visual stage.
   - Hero, quick navigation, shared category stages, content groups and product grid host.
   - Uses page-local tokens scoped under .bb-b2b-category-page.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor roots:
   - .bb-b2b-category-page
   - .bb-b2b-category-hero
   - .bb-b2b-category-quicknav
   - .bb-b2b-category-stage
   - .bb-b2b-category-content-groups
   - .bb-b2b-category-component-host-*

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only B2B category page local tokens.
===================================== */
/* =====================================
   B2B Category Local Tokens - Light Default
===================================== */
.bb-b2b-category-page {
  --bb-b2b-category-accent: var(--bb-page-accent, var(--bb-info));
  --bb-b2b-category-accent-strong: var(--bb-page-accent-strong, var(--bb-info));
  --bb-b2b-category-accent-soft: var(--bb-page-accent-soft, color-mix(in srgb, var(--bb-info) 12%, var(--bb-body-bg)));
  --bb-b2b-category-accent-text: color-mix(in srgb, var(--bb-b2b-category-accent-strong) 78%, var(--bb-emphasis-color));
  --bb-b2b-category-deep-blue: color-mix(in srgb, var(--bb-b2b-category-accent-strong) 84%, var(--bb-dark));
  --bb-b2b-category-deep-blue-text: var(--bb-white, var(--bb-color-white));
  --bb-b2b-category-hero-bg:
      radial-gradient(
          circle at 88% 14%,
          color-mix(in srgb, var(--bb-b2b-category-accent) 11%, transparent),
          transparent 19rem
      ),
      radial-gradient(
          circle at 70% 76%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 20rem
      ),
      radial-gradient(
          circle at 10% 88%,
          color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 64%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-blue-50) 92%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-color-blue-100) 58%, var(--bb-body-bg))
      );
  --bb-b2b-category-hero-before-bg: color-mix(in srgb, var(--bb-b2b-category-accent) 12%, transparent);
  --bb-b2b-category-hero-after-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 64%, transparent);
  --bb-b2b-category-label-bg: color-mix(in srgb, var(--bb-success) 92%, var(--bb-emphasis-color));
  --bb-b2b-category-label-color: var(--bb-white, var(--bb-color-white));
  --bb-b2b-category-label-border: color-mix(in srgb, var(--bb-success) 82%, var(--bb-white, var(--bb-color-white)));
  --bb-b2b-category-label-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-success) 18%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 18%, transparent);
  --bb-b2b-category-hero-light-btn-bg: var(--bb-white, var(--bb-color-white));
  --bb-b2b-category-hero-light-btn-bg-hover: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 92%, var(--bb-primary));
  --bb-b2b-category-hero-light-btn-color: var(--bb-emphasis-color);
  --bb-b2b-category-hero-light-btn-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2b-category-hero-light-btn-border-hover: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  --bb-b2b-category-hero-light-btn-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 72%, transparent);
  --bb-b2b-category-hero-tag-bg: var(--bb-white, var(--bb-color-white));
  --bb-b2b-category-hero-tag-color: color-mix(in srgb, var(--bb-emphasis-color) 72%, var(--bb-secondary-color));
  --bb-b2b-category-hero-tag-icon-color: var(--bb-emphasis-color);
  --bb-b2b-category-hero-tag-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2b-category-hero-tag-shadow:
      0 0.5rem 1.125rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 60%, transparent);
  --bb-b2b-category-panel-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, transparent);
  --bb-b2b-category-panel-border: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 68%, var(--bb-border-color));
  --bb-b2b-category-panel-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 46%, transparent);
  --bb-b2b-category-panel-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-b2b-category-panel-item-bg-hover: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-surface-elevated));
  --bb-b2b-category-panel-item-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2b-category-panel-item-border-hover: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-b2b-category-panel-item-shadow-hover:
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent);
  --bb-b2b-category-icon-color: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 78%, var(--bb-emphasis-color) 22%);
  --bb-b2b-category-icon-bg: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 14%, var(--bb-white, var(--bb-color-white)) 86%);
  --bb-b2b-category-icon-bg-hover: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 18%, var(--bb-white, var(--bb-color-white)) 82%);
  --bb-b2b-category-icon-border: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 14%, var(--bb-border-color) 86%);
  --bb-b2b-category-icon-border-hover: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 22%, var(--bb-border-color) 78%);
  --bb-b2b-category-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 42%, transparent);
  --bb-b2b-category-stage-bg: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-b2b-category-stage-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-category-stage-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2b-category-stage-soft-bg:
      radial-gradient(
          circle at 92% 8%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 12% 92%,
          color-mix(in srgb, var(--bb-b2b-category-accent) 6%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-soft) 64%, var(--bb-body-bg)),
          var(--bb-b2b-category-stage-bg)
      );
  --bb-b2b-category-stage-grid-color: color-mix(in srgb, var(--bb-emphasis-color) 3.5%, transparent);
  --bb-b2b-category-quicknav-stage-bg: var(--bb-white, var(--bb-color-white));
  --bb-b2b-category-quicknav-stage-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2b-category-quicknav-stage-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2b-category-quicknav-label-bg: var(--bb-b2b-category-deep-blue);
  --bb-b2b-category-quicknav-label-color: var(--bb-b2b-category-deep-blue-text);
  --bb-b2b-category-quicknav-label-border: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 86%, var(--bb-white, var(--bb-color-white)));
  --bb-b2b-category-quicknav-label-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-b2b-category-deep-blue) 16%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 14%, transparent);
  --bb-b2b-category-quicknav-icon-color: var(--bb-b2b-category-deep-blue);
  --bb-b2b-category-quicknav-icon-bg: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 9%, var(--bb-white, var(--bb-color-white)));
  --bb-b2b-category-quicknav-icon-border: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 14%, var(--bb-border-color));
  --bb-b2b-category-content-stage-bg:
      radial-gradient(
          circle at 96% 8%,
          color-mix(in srgb, var(--bb-primary) 5%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 98%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-soft) 42%, var(--bb-body-bg))
      );
  --bb-b2b-category-content-stage-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2b-category-content-stage-shadow:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-emphasis-color) 2%, transparent);
  --bb-b2b-category-description-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
}

/* =====================================
   B2B Category Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-b2b-category-page {
  --bb-b2b-category-hero-bg:
      radial-gradient(
          circle at 88% 14%,
          color-mix(in srgb, var(--bb-b2b-category-accent) 10%, transparent),
          transparent 19rem
      ),
      radial-gradient(
          circle at 70% 76%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 20rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-blue-950, var(--bb-color-navy-900)) 70%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-b2b-category-deep-blue) 36%, var(--bb-body-bg))
      );
  --bb-b2b-category-hero-before-bg: color-mix(in srgb, var(--bb-b2b-category-accent) 8%, transparent);
  --bb-b2b-category-hero-after-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 5%, transparent);
  --bb-b2b-category-label-bg: color-mix(in srgb, var(--bb-success) 76%, var(--bb-emphasis-color));
  --bb-b2b-category-label-border: color-mix(in srgb, var(--bb-success) 54%, var(--bb-border-color));
  --bb-b2b-category-hero-light-btn-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-b2b-category-hero-light-btn-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-primary));
  --bb-b2b-category-hero-light-btn-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-category-hero-tag-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-b2b-category-hero-tag-icon-color: var(--bb-body-color);
  --bb-b2b-category-hero-tag-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-category-panel-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, transparent);
  --bb-b2b-category-panel-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-category-panel-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 7%, transparent);
  --bb-b2b-category-panel-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-body-bg));
  --bb-b2b-category-panel-item-bg-hover: color-mix(in srgb, var(--bb-b2b-category-accent) 9%, var(--bb-surface-elevated));
  --bb-b2b-category-panel-item-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-category-icon-color: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 90%, var(--bb-b2b-category-accent) 10%);
  --bb-b2b-category-icon-bg: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 26%, var(--bb-surface-elevated) 74%);
  --bb-b2b-category-icon-bg-hover: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 30%, var(--bb-surface-elevated) 70%);
  --bb-b2b-category-icon-border: color-mix(in srgb, var(--bb-b2b-category-accent) 20%, var(--bb-border-color) 80%);
  --bb-b2b-category-icon-border-hover: color-mix(in srgb, var(--bb-b2b-category-accent) 28%, var(--bb-border-color) 72%);
  --bb-b2b-category-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 5%, transparent);
  --bb-b2b-category-stage-bg: color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg));
  --bb-b2b-category-stage-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-category-stage-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 14%, transparent);
  --bb-b2b-category-stage-soft-bg:
      radial-gradient(
          circle at 92% 8%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 12% 92%,
          color-mix(in srgb, var(--bb-b2b-category-accent) 6%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 80%, var(--bb-body-bg)),
          var(--bb-b2b-category-stage-bg)
      );
  --bb-b2b-category-quicknav-stage-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-category-quicknav-stage-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-category-quicknav-icon-color: color-mix(in srgb, var(--bb-primary) 74%, var(--bb-white, var(--bb-color-white)));
  --bb-b2b-category-quicknav-icon-bg: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 24%, var(--bb-surface-elevated));
  --bb-b2b-category-quicknav-icon-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-category-content-stage-bg:
      radial-gradient(
          circle at 96% 8%,
          color-mix(in srgb, var(--bb-primary) 6%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 82%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg))
      );
  --bb-b2b-category-content-stage-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-category-content-stage-shadow:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  --bb-b2b-category-description-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

/* =====================================
   B2B Category Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-b2b-category-page {
  --bb-b2b-category-hero-bg:
      radial-gradient(
          circle at 88% 14%,
          color-mix(in srgb, var(--bb-b2b-category-accent) 9%, transparent),
          transparent 19rem
      ),
      radial-gradient(
          circle at 70% 76%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 20rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-blue-950, var(--bb-color-navy-900)) 74%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-b2b-category-deep-blue) 34%, var(--bb-body-bg))
      );
  --bb-b2b-category-hero-before-bg: color-mix(in srgb, var(--bb-b2b-category-accent) 8%, transparent);
  --bb-b2b-category-hero-after-bg: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 4%, transparent);
  --bb-b2b-category-label-bg: color-mix(in srgb, var(--bb-success) 74%, var(--bb-emphasis-color));
  --bb-b2b-category-label-border: color-mix(in srgb, var(--bb-success) 52%, var(--bb-border-color));
  --bb-b2b-category-hero-light-btn-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-category-hero-light-btn-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-primary));
  --bb-b2b-category-hero-light-btn-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-category-hero-tag-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-category-hero-tag-icon-color: var(--bb-body-color);
  --bb-b2b-category-hero-tag-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-category-panel-bg: color-mix(in srgb, var(--bb-surface-elevated) 82%, transparent);
  --bb-b2b-category-panel-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-category-panel-shadow:
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 6%, transparent);
  --bb-b2b-category-panel-item-bg: color-mix(in srgb, var(--bb-surface-elevated) 80%, var(--bb-body-bg));
  --bb-b2b-category-panel-item-bg-hover: color-mix(in srgb, var(--bb-b2b-category-accent) 8%, var(--bb-surface-elevated));
  --bb-b2b-category-panel-item-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2b-category-icon-color: color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 90%, var(--bb-b2b-category-accent) 10%);
  --bb-b2b-category-icon-bg: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 24%, var(--bb-surface-elevated) 76%);
  --bb-b2b-category-icon-bg-hover: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 28%, var(--bb-surface-elevated) 72%);
  --bb-b2b-category-icon-border: color-mix(in srgb, var(--bb-b2b-category-accent) 18%, var(--bb-border-color) 82%);
  --bb-b2b-category-icon-border-hover: color-mix(in srgb, var(--bb-b2b-category-accent) 26%, var(--bb-border-color) 74%);
  --bb-b2b-category-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 4%, transparent);
  --bb-b2b-category-stage-bg: color-mix(in srgb, var(--bb-surface-elevated) 84%, var(--bb-body-bg));
  --bb-b2b-category-stage-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-category-stage-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 15%, transparent);
  --bb-b2b-category-stage-soft-bg:
      radial-gradient(
          circle at 92% 8%,
          color-mix(in srgb, var(--bb-primary) 6%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 12% 92%,
          color-mix(in srgb, var(--bb-b2b-category-accent) 5%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-body-bg)),
          var(--bb-b2b-category-stage-bg)
      );
  --bb-b2b-category-quicknav-stage-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-category-quicknav-stage-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-category-quicknav-icon-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-white, var(--bb-color-white)));
  --bb-b2b-category-quicknav-icon-bg: color-mix(in srgb, var(--bb-b2b-category-deep-blue) 22%, var(--bb-surface-elevated));
  --bb-b2b-category-quicknav-icon-border: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-border-color));
  --bb-b2b-category-content-stage-bg:
      radial-gradient(
          circle at 96% 8%,
          color-mix(in srgb, var(--bb-primary) 5%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 80%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-surface-elevated) 86%, var(--bb-body-bg))
      );
  --bb-b2b-category-content-stage-border: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-b2b-category-content-stage-shadow:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
      0 0.25rem 0.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 13%, transparent);
  --bb-b2b-category-description-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

/* =====================================
   Hero
===================================== */
.bb-b2b-category-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.475rem, 4.4vw, 3.575rem);
  padding-bottom: clamp(3.95rem, 6.9vw, 5.8rem);
  background: var(--bb-b2b-category-hero-bg);
}

.bb-b2b-category-hero::before {
  content: "";
  position: absolute;
  right: -7rem;
  top: -8rem;
  width: 22rem;
  height: 22rem;
  background-color: var(--bb-b2b-category-hero-before-bg);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-category-hero::after {
  content: "";
  position: absolute;
  left: -7rem;
  bottom: -8rem;
  width: 18rem;
  height: 18rem;
  background-color: var(--bb-b2b-category-hero-after-bg);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-category-hero .bb-container {
  position: relative;
  z-index: 2;
}

.bb-b2b-category-hero .bb-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.72fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.bb-b2b-category-hero .bb-hero-content {
  min-width: 0;
}

.bb-b2b-category-hero .bb-hero-title {
  max-width: 48rem;
}

.bb-b2b-category-hero .bb-hero-text {
  max-width: 47rem;
}

/* =====================================
   Hero Label
===================================== */
.bb-b2b-category-hero-label {
  margin-bottom: 1.125rem;
  color: var(--bb-b2b-category-label-color);
  background-color: var(--bb-b2b-category-label-bg);
  border-color: var(--bb-b2b-category-label-border);
  box-shadow: var(--bb-b2b-category-label-shadow);
}

.bb-b2b-category-hero-label .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Hero Actions
===================================== */
.bb-b2b-category-hero-btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-category-hero-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-category-hero .bb-hero-actions .btn-light {
  color: var(--bb-b2b-category-hero-light-btn-color);
  background-color: var(--bb-b2b-category-hero-light-btn-bg);
  border-color: var(--bb-b2b-category-hero-light-btn-border);
  box-shadow: var(--bb-b2b-category-hero-light-btn-shadow);
}

.bb-b2b-category-hero .bb-hero-actions .btn-light:hover,
.bb-b2b-category-hero .bb-hero-actions .btn-light:focus {
  color: var(--bb-b2b-category-hero-light-btn-color);
  background-color: var(--bb-b2b-category-hero-light-btn-bg-hover);
  border-color: var(--bb-b2b-category-hero-light-btn-border-hover);
}

/* =====================================
   Hero Quick Chips
===================================== */
.bb-b2b-category-hero .bb-hero-quick-links {
  margin-top: 1.5rem;
}

.bb-b2b-category-hero-tag {
  color: var(--bb-b2b-category-hero-tag-color);
  background-color: var(--bb-b2b-category-hero-tag-bg);
  border-color: var(--bb-b2b-category-hero-tag-border);
  font-weight: var(--bb-fw-semibold);
  box-shadow: var(--bb-b2b-category-hero-tag-shadow);
}

.bb-b2b-category-hero-tag .material-symbols-outlined {
  color: var(--bb-b2b-category-hero-tag-icon-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Hero Quick Panel
===================================== */
.bb-b2b-category-hero .bb-hero-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 29rem;
  justify-self: end;
  align-self: center;
  padding: clamp(1rem, 2vw, 1.25rem);
  background-color: var(--bb-b2b-category-panel-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-category-panel-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-category-panel-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bb-b2b-category-hero .bb-hero-panel-head {
  margin-bottom: 1rem;
}

.bb-b2b-category-hero .bb-hero-panel-eyebrow {
  display: inline-flex;
  margin-bottom: 0.35rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide, 0.06em);
  text-transform: uppercase;
}

.bb-b2b-category-hero .bb-hero-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(var(--bb-fs-base), 1.3vw, var(--bb-fs-xl));
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.12;
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2b-category-hero .bb-hero-panel-list {
  display: grid;
  gap: 0.75rem;
}

.bb-b2b-category-hero .bb-hero-panel-item {
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-category-panel-item-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-category-panel-item-border);
  border-radius: var(--bb-radius-xl);
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2b-category-hero .bb-hero-panel-item:hover {
  transform: translateY(-1px);
  background-color: var(--bb-b2b-category-panel-item-bg-hover);
  border-color: var(--bb-b2b-category-panel-item-border-hover);
  box-shadow: var(--bb-b2b-category-panel-item-shadow-hover);
}

/* =====================================
   Shared Icon Container
===================================== */
.bb-b2b-category-hero .bb-hero-panel-icon,
.bb-b2b-category-start-link-icon {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-category-icon-color);
  background-color: var(--bb-b2b-category-icon-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-category-icon-border);
  border-radius: 1.125rem;
  box-shadow: var(--bb-b2b-category-icon-shadow);
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2b-category-hero .bb-hero-panel-item:hover .bb-hero-panel-icon,
.bb-b2b-category-start-link:hover .bb-b2b-category-start-link-icon {
  transform: translateY(-1px);
  background-color: var(--bb-b2b-category-icon-bg-hover);
  border-color: var(--bb-b2b-category-icon-border-hover);
}

.bb-b2b-category-hero .bb-hero-panel-icon .material-symbols-outlined,
.bb-b2b-category-start-link-icon .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-b2b-category-hero .bb-hero-panel-content {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.bb-b2b-category-hero .bb-hero-panel-content strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-category-hero .bb-hero-panel-content span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Page Sections
===================================== */
.bb-b2b-category-quicknav {
  position: relative;
  z-index: 5;
  margin-top: clamp(-3.4rem, -4vw, -2.75rem);
}

.bb-b2b-category-component-host {
  position: relative;
  z-index: 2;
}

.bb-b2b-category-component-host-subcategories {
  margin-top: 0.25rem;
}

.bb-b2b-category-component-host-content-groups,
.bb-b2b-category-component-host-slider,
.bb-b2b-category-component-host-brands,
.bb-b2b-category-component-host-campaign,
.bb-b2b-category-component-host-guide {
  min-width: 0;
}

.bb-section-external {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

#category-slider.bb-section-external {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.bb-b2b-category-content-groups-anchor {
  position: relative;
}

#category-content-groups.bb-section-external {
  padding-top: 0;
  padding-bottom: 0;
}

/* =====================================
   Shared Category Stage
===================================== */
.bb-b2b-category-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.35vw, 1.65rem);
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 18rem), var(--bb-b2b-category-stage-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-category-stage-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-category-stage-shadow);
}

.bb-b2b-category-stage > * {
  position: relative;
  z-index: 2;
}

.bb-b2b-category-stage-soft {
  background: var(--bb-b2b-category-stage-soft-bg);
}

.bb-b2b-category-stage-grid::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 8.5rem;
  background-image: linear-gradient(var(--bb-b2b-category-stage-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--bb-b2b-category-stage-grid-color) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent 82%);
  pointer-events: none;
}

/* =====================================
   Quicknav Stage
===================================== */
.bb-b2b-category-quicknav .bb-b2b-category-stage,
.bb-b2b-category-quicknav .bb-b2b-category-stage-soft {
  background: var(--bb-b2b-category-quicknav-stage-bg);
  border-color: var(--bb-b2b-category-quicknav-stage-border);
  box-shadow: var(--bb-b2b-category-quicknav-stage-shadow);
}

.bb-b2b-category-quicknav .bb-b2b-category-stage-grid::after {
  display: none;
}

.bb-b2b-category-quicknav .bb-section-label {
  color: var(--bb-b2b-category-quicknav-label-color);
  background-color: var(--bb-b2b-category-quicknav-label-bg);
  border-color: var(--bb-b2b-category-quicknav-label-border);
  box-shadow: var(--bb-b2b-category-quicknav-label-shadow);
}

.bb-b2b-category-quicknav .bb-section-label .material-symbols-outlined {
  color: currentColor;
}

.bb-b2b-category-quicknav .bb-b2b-category-stage [class*=icon] {
  color: var(--bb-b2b-category-quicknav-icon-color);
  background-color: var(--bb-b2b-category-quicknav-icon-bg);
  border-color: var(--bb-b2b-category-quicknav-icon-border);
}

.bb-b2b-category-quicknav .bb-b2b-category-stage [class*=icon] .material-symbols-outlined,
.bb-b2b-category-quicknav .bb-b2b-category-stage a .material-symbols-outlined,
.bb-b2b-category-quicknav .bb-b2b-category-stage button .material-symbols-outlined {
  color: var(--bb-b2b-category-quicknav-icon-color);
  font-size: 2.35rem;
  line-height: 1;
}

/* =====================================
   B2B Category Content Groups
   Scope: _B2BProductCategoryContentGroups
   Card visuals come from .bb-product-card
===================================== */
.bb-b2b-category-content-groups {
  position: relative;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bb-b2b-category-content-groups-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.bb-b2b-category-content-group-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2vw, 1.5rem);
  background: var(--bb-b2b-category-content-stage-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-category-content-stage-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-category-content-stage-shadow);
}

.bb-b2b-category-content-group-stage::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  z-index: 0;
  width: 15rem;
  height: 15rem;
  background-color: color-mix(in srgb, var(--bb-primary) 4%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-category-content-group-stage > * {
  position: relative;
  z-index: 2;
}

.bb-b2b-category-content-group-head {
  margin-bottom: clamp(1.125rem, 2vw, 1.5rem);
}

.bb-b2b-category-content-group-products {
  min-width: 0;
}

.bb-b2b-category-content-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.25vw, 1rem);
  align-items: stretch;
}

.bb-b2b-category-content-products-grid .bb-product-card,
.bb-b2b-category-content-products-grid .bb-product-card-shell {
  height: 100%;
}

.bb-b2b-category-content-products-grid .bb-product-card-media {
  min-height: 13rem;
}

.bb-b2b-category-content-products-grid .bb-product-card-title {
  min-height: 2.7em;
}

.bb-b2b-category-content-products-grid .bb-product-card-actions {
  margin-top: auto;
}

.bb-b2b-category-content-products-grid .bb-product-card-favorite {
  top: 0.75rem;
  right: 0.75rem;
  bottom: auto;
  left: auto;
}

.bb-b2b-category-content-products-grid .bb-product-card-primary-action {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
}

/* =====================================
   Category Description
===================================== */
.bb-b2b-category-description {
  margin-top: 1.375rem;
  padding-top: 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: 1.85;
  border-top: var(--bb-border-width) solid var(--bb-b2b-category-description-border);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1399.98px) {
  .bb-b2b-category-content-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-category-hero .bb-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-b2b-category-hero .bb-hero-panel {
    max-width: 42rem;
    justify-self: start;
  }
  .bb-b2b-category-content-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-category-stage {
    padding: 1.25rem;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2b-category-quicknav {
    margin-top: -2rem;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-category-hero .bb-hero-panel-item {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  .bb-b2b-category-hero .bb-hero-panel-icon,
  .bb-b2b-category-start-link-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    border-radius: 0.95rem;
  }
  .bb-b2b-category-quicknav {
    margin-top: -1.5rem;
  }
  .bb-section-external {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .bb-b2b-category-content-groups {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .bb-b2b-category-content-group-stage {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-category-content-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-category-stage,
  .bb-b2b-category-content-group-stage {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-category-hero .bb-hero-panel {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-category-content-products-grid {
    grid-template-columns: 1fr;
  }
}
/* Section */
.bb-b2b-history-products-shell {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

/* Grid */
.bb-b2b-history-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* Pagination wrapper only */
.bb-b2b-history-pagination {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-history-shadow);
}

.bb-b2b-history-pagination-info {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-history-pagination-list {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-b2b-history-empty {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-history-empty-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-history-primary-soft);
  border-radius: 50%;
}

.bb-b2b-history-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-history-empty-chip {
  margin-bottom: 0.875rem;
}

.bb-b2b-history-empty-title {
  max-width: 36rem;
  margin: 0 auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-history-empty-text {
  max-width: 38rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-history-empty-btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-history-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-history-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-history-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-history-products-shell {
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-history-products-grid {
    gap: 0.75rem;
  }
  .bb-b2b-history-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-history-pagination-info {
    text-align: center;
  }
  .bb-b2b-history-pagination-list {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-history-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-history-product-media {
    aspect-ratio: 16/10;
  }
}
/* =====================================
   Wholesale Last Price Request
   FormLight page-specific
===================================== */
.bb-wholesale-last-price-page {
  width: 100%;
}

.bb-wholesale-last-price-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.bb-wholesale-last-price-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-wholesale-last-price-text {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-wholesale-last-price-product-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-last-price-product-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-wholesale-last-price-product-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Layout */
.bb-wholesale-last-price-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Info card */
.bb-wholesale-last-price-info-card {
  position: relative;
  overflow: hidden;
  padding: 1.375rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-primary) 34%, transparent), transparent 32%), radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--bb-warning) 16%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 82%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-wholesale-last-price-info-card::after {
  content: "";
  position: absolute;
  right: -3.75rem;
  bottom: -4.375rem;
  width: 10.625rem;
  height: 10.625rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-wholesale-last-price-info-card > * {
  position: relative;
  z-index: 2;
}

.bb-wholesale-last-price-info-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-wholesale-last-price-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-wholesale-last-price-info-card h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-wholesale-last-price-info-card p {
  margin: 0.625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Product summary */
.bb-wholesale-last-price-product-summary {
  margin-top: 1rem;
  padding: 0.875rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-radius: var(--bb-radius);
}

.bb-wholesale-last-price-summary-label {
  display: block;
  margin-bottom: 0.375rem;
  color: color-mix(in srgb, var(--bb-white) 62%, transparent);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-wholesale-last-price-product-summary strong {
  display: block;
  color: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-last-price-product-summary small {
  display: block;
  margin-top: 0.25rem;
  color: color-mix(in srgb, var(--bb-white) 66%, transparent);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* Info list */
.bb-wholesale-last-price-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-wholesale-last-price-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: color-mix(in srgb, var(--bb-white) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-last-price-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Form card */
.bb-wholesale-last-price-form-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-last-price-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bb-wholesale-last-price-form-head {
  margin-bottom: 1rem;
}

.bb-wholesale-last-price-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-wholesale-last-price-form-head p {
  max-width: 42rem;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-last-price-input {
  min-height: 2.75rem;
}

.bb-wholesale-last-price-textarea {
  min-height: 10.5rem;
  resize: vertical;
}

.bb-wholesale-last-price-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-last-price-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-wholesale-last-price-actions {
  margin-top: 1rem;
}

.bb-wholesale-last-price-actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-wholesale-last-price-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Result */
.bb-wholesale-last-price-result {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-last-price-result-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-lg);
}

.bb-wholesale-last-price-result-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-wholesale-last-price-result h2 {
  margin: 0 0 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-wholesale-last-price-result p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-wholesale-last-price-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 70rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-wholesale-last-price-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-wholesale-last-price-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-wholesale-last-price-layout {
    gap: 1rem;
  }
  .bb-wholesale-last-price-form-card,
  .bb-wholesale-last-price-info-card,
  .bb-wholesale-last-price-result {
    border-radius: var(--bb-radius-lg);
  }
  .bb-wholesale-last-price-result {
    grid-template-columns: 1fr;
  }
  .bb-wholesale-last-price-actions .btn {
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Wholesale Sample Request
   FormLight page-specific
===================================== */
.bb-wholesale-sample-request-page {
  width: 100%;
}

.bb-wholesale-sample-request-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.bb-wholesale-sample-request-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-wholesale-sample-request-text {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-wholesale-sample-request-product-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-sample-request-product-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-wholesale-sample-request-product-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-wholesale-sample-request-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-sample-request-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Layout */
.bb-wholesale-sample-request-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Product card */
.bb-wholesale-sample-request-product-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-sample-request-product-media {
  position: relative;
  min-height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-wholesale-sample-request-product-media img {
  width: 100%;
  height: 100%;
  max-height: 15rem;
  display: block;
  object-fit: contain;
}

.bb-wholesale-sample-request-product-placeholder {
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 38%, transparent);
  background-color: var(--bb-body-bg);
  border-radius: var(--bb-radius-xl);
}

.bb-wholesale-sample-request-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-fs-display-lg);
  line-height: 1;
}

.bb-wholesale-sample-request-product-body {
  padding: 1.25rem;
}

.bb-wholesale-sample-request-product-eyebrow {
  display: block;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.bb-wholesale-sample-request-product-body h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-wholesale-sample-request-product-meta {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-wholesale-sample-request-product-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-sample-request-product-meta-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
}

/* Form card */
.bb-wholesale-sample-request-form-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-sample-request-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bb-wholesale-sample-request-form-head {
  margin-bottom: 1rem;
}

.bb-wholesale-sample-request-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-wholesale-sample-request-form-head p {
  max-width: 42rem;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-sample-request-input {
  min-height: 2.75rem;
}

.bb-wholesale-sample-request-textarea {
  min-height: 10.5rem;
  resize: vertical;
}

.bb-wholesale-sample-request-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-sample-request-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-wholesale-sample-request-actions {
  margin-top: 1rem;
}

.bb-wholesale-sample-request-actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-wholesale-sample-request-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-wholesale-sample-request-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 70rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-wholesale-sample-request-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-wholesale-sample-request-layout {
    grid-template-columns: 1fr;
  }
  .bb-wholesale-sample-request-product-media {
    min-height: 13rem;
  }
}
@media (max-width: 575.98px) {
  .bb-wholesale-sample-request-layout {
    gap: 1rem;
  }
  .bb-wholesale-sample-request-form-card,
  .bb-wholesale-sample-request-product-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-wholesale-sample-request-actions .btn {
    border-radius: var(--bb-radius);
  }
}
/* Quick nav */
.bb-b2b-product-special-quicknav {
  position: relative;
  z-index: 5;
  margin-top: -2.625rem;
}

.bb-b2b-product-special-quicknav-card {
  overflow: hidden;
  padding: 1.125rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 96%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(0.75rem);
}

.bb-b2b-product-special-quicknav-head {
  margin-bottom: 0.875rem;
}

.bb-b2b-product-special-quicknav-eyebrow {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-b2b-product-special-quicknav-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-product-special-quicknav-list {
  display: flex;
  gap: 0.875rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.bb-b2b-product-special-quicknav-list::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2b-product-special-quicknav-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-product-special-quicknav-item {
  min-width: 9.5rem;
  max-width: 9.5rem;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  text-align: center;
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-product-special-quicknav-item:hover {
  transform: translateY(-0.125rem);
  background-color: var(--bb-surface-elevated);
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2b-product-special-quicknav-item.active {
  background-color: var(--bb-b2b-product-special-primary-soft);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
}

.bb-b2b-product-special-quicknav-icon {
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-product-special-primary-soft);
  border-radius: var(--bb-radius);
}

.bb-b2b-product-special-quicknav-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Products */
.bb-b2b-product-special-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bb-b2b-product-special-section-copy {
  max-width: 53.75rem;
}

.bb-b2b-product-special-section-chip {
  margin-bottom: 0.75rem;
}

.bb-b2b-product-special-section-chip .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-product-special-section-title {
  margin-bottom: 0.45rem;
  color: var(--bb-b2b-product-special-ink);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2b-product-special-section-text {
  max-width: 53.75rem;
  margin-bottom: 0;
  color: var(--bb-b2b-product-special-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2b-product-special-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Pagination wrapper only */
.bb-b2b-product-special-pagination {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-b2b-product-special-shadow);
}

.bb-b2b-product-special-pagination-summary {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-product-special-pagination-list {
  display: flex;
  justify-content: flex-end;
}

/* Empty */
.bb-b2b-product-special-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2b-product-special-empty-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-product-special-primary-soft);
  border-radius: 50%;
}

.bb-b2b-product-special-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-b2b-product-special-empty-title {
  max-width: 36rem;
  margin: 0 auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-product-special-empty-text {
  max-width: 38rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-product-special-empty-btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Bottom banner */
.bb-b2b-product-special-bottom-banner {
  padding-top: 2rem;
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-product-special-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-product-special-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-product-special-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-product-special-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-product-special-quicknav {
    margin-top: -1.625rem;
  }
  .bb-b2b-product-special-quicknav-card {
    padding: 0.875rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-product-special-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2b-product-special-pagination-summary {
    text-align: center;
  }
  .bb-b2b-product-special-pagination-list {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-product-special-products-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   Wholesale Customize
   FormLight page-specific
===================================== */
.bb-wholesale-customize-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.bb-wholesale-customize-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-wholesale-customize-text {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-wholesale-customize-product-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-product-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-wholesale-customize-product-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-wholesale-customize-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-customize-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Layout */
.bb-wholesale-customize-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Product card */
.bb-wholesale-customize-product-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-customize-product-media {
  position: relative;
  min-height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-wholesale-customize-product-media img {
  width: 100%;
  height: 100%;
  max-height: 15rem;
  display: block;
  object-fit: contain;
}

.bb-wholesale-customize-product-placeholder {
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 38%, transparent);
  background-color: var(--bb-body-bg);
  border-radius: var(--bb-radius-xl);
}

.bb-wholesale-customize-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-fs-display-lg);
  line-height: 1;
}

.bb-wholesale-customize-product-body {
  padding: 1.25rem;
}

.bb-wholesale-customize-product-eyebrow {
  display: block;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.bb-wholesale-customize-product-body h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-wholesale-customize-product-meta {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-wholesale-customize-product-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-product-meta-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
}

/* Form card */
.bb-wholesale-customize-form-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-customize-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bb-wholesale-customize-form-head {
  margin-bottom: 1rem;
}

.bb-wholesale-customize-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-wholesale-customize-form-head p {
  max-width: 42rem;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-textarea {
  min-height: 11rem;
  resize: vertical;
}

.bb-wholesale-customize-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-customize-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-wholesale-customize-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.bb-wholesale-customize-info-item {
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-wholesale-customize-actions {
  margin-top: 1rem;
}

.bb-wholesale-customize-actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-wholesale-customize-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-wholesale-customize-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 70rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-wholesale-customize-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-wholesale-customize-layout {
    grid-template-columns: 1fr;
  }
  .bb-wholesale-customize-product-media {
    min-height: 13rem;
  }
}
@media (max-width: 767.98px) {
  .bb-wholesale-customize-info-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-wholesale-customize-layout {
    gap: 1rem;
  }
  .bb-wholesale-customize-form-card,
  .bb-wholesale-customize-product-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-wholesale-customize-actions .btn {
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Bulbulustur Web - B2B Featured Products Page
   Layer: pages/b2b/_featured-products.scss

   Purpose:
   - B2B featured products listing page visual stage.
   - Hero, quick navigation, product grid, pagination, empty state and bottom banner.
   - Uses page-local tokens scoped under .bb-b2b-featured-products-page.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor roots:
   - .bb-b2b-featured-products-page
   - .bb-b2b-featured-products-hero
   - .bb-b2b-featured-products-quicknav
   - .bb-b2b-featured-products-list
   - .bb-b2b-featured-products-bottom-banner

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only B2B featured products page local tokens.
===================================== */
/* =====================================
   B2B Featured Products Local Tokens - Light Default
===================================== */
.bb-b2b-featured-products-page {
  --bb-b2b-featured-accent: var(--bb-page-accent, var(--bb-info));
  --bb-b2b-featured-accent-soft: var(--bb-page-accent-soft, color-mix(in srgb, var(--bb-info) 12%, var(--bb-body-bg)));
  --bb-b2b-featured-accent-strong: var(--bb-page-accent-strong, var(--bb-info));
  --bb-b2b-featured-hero-bg:
      radial-gradient(
          circle at 88% 18%,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 20rem
      ),
      radial-gradient(
          circle at 12% 82%,
          color-mix(in srgb, var(--bb-b2b-featured-accent) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)),
          var(--bb-body-bg)
      );
  --bb-b2b-featured-hero-picture-bg:
      radial-gradient(
          circle at 42% 34%,
          color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 96%, transparent),
          color-mix(in srgb, var(--bb-primary) 7%, var(--bb-white, var(--bb-color-white))) 68%,
          color-mix(in srgb, var(--bb-primary) 12%, var(--bb-white, var(--bb-color-white))) 100%
      );
  --bb-b2b-featured-hero-picture-border: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  --bb-b2b-featured-hero-picture-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 72%, transparent),
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent);
  --bb-b2b-featured-placeholder-bg: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg));
  --bb-b2b-featured-placeholder-color: var(--bb-primary);
  --bb-b2b-featured-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-b2b-featured-card-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2b-featured-card-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2b-featured-quicknav-item-bg: var(--bb-tertiary-bg);
  --bb-b2b-featured-quicknav-item-bg-hover: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg));
  --bb-b2b-featured-quicknav-item-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2b-featured-quicknav-item-border-hover: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-featured-quicknav-item-shadow-hover:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-b2b-featured-quicknav-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-b2b-featured-quicknav-icon-color: var(--bb-primary);
  --bb-b2b-featured-list-bg:
      linear-gradient(
          180deg,
          var(--bb-body-bg),
          color-mix(in srgb, var(--bb-tertiary-bg) 44%, var(--bb-body-bg))
      );
  --bb-b2b-featured-bottom-banner-bg: color-mix(in srgb, var(--bb-tertiary-bg) 44%, var(--bb-body-bg));
  --bb-b2b-featured-count-bg: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-b2b-featured-count-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2b-featured-pagination-bg: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-b2b-featured-pagination-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-featured-empty-bg: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-b2b-featured-empty-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-featured-empty-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent),
      var(--bb-shadow-xs);
  --bb-b2b-featured-empty-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-b2b-featured-empty-icon-color: var(--bb-primary);
}

/* =====================================
   B2B Featured Products Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-b2b-featured-products-page {
  --bb-b2b-featured-hero-bg:
      radial-gradient(
          circle at 88% 18%,
          color-mix(in srgb, var(--bb-primary) 11%, transparent),
          transparent 20rem
      ),
      radial-gradient(
          circle at 12% 82%,
          color-mix(in srgb, var(--bb-b2b-featured-accent) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 70%, var(--bb-body-bg)),
          var(--bb-body-bg)
      );
  --bb-b2b-featured-hero-picture-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-featured-hero-picture-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-featured-hero-picture-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 6%, transparent),
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent);
  --bb-b2b-featured-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-featured-card-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-featured-card-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  --bb-b2b-featured-quicknav-item-bg: var(--bb-surface-soft);
  --bb-b2b-featured-quicknav-item-bg-hover: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-surface-elevated));
  --bb-b2b-featured-quicknav-item-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-featured-quicknav-item-border-hover: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2b-featured-quicknav-icon-bg: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-b2b-featured-list-bg:
      linear-gradient(
          180deg,
          var(--bb-body-bg),
          color-mix(in srgb, var(--bb-surface-elevated) 46%, var(--bb-body-bg))
      );
  --bb-b2b-featured-bottom-banner-bg:
      linear-gradient(
          180deg,
          var(--bb-body-bg),
          color-mix(in srgb, var(--bb-surface-elevated) 46%, var(--bb-body-bg))
      );
  --bb-b2b-featured-count-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-featured-count-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-featured-pagination-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-featured-pagination-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-featured-empty-bg: color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg));
  --bb-b2b-featured-empty-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2b-featured-empty-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent),
      var(--bb-shadow-xs);
}

/* =====================================
   B2B Featured Products Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-b2b-featured-products-page {
  --bb-b2b-featured-hero-bg:
      radial-gradient(
          circle at 88% 18%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 20rem
      ),
      radial-gradient(
          circle at 12% 82%,
          color-mix(in srgb, var(--bb-b2b-featured-accent) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 68%, var(--bb-body-bg)),
          var(--bb-body-bg)
      );
  --bb-b2b-featured-hero-picture-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-featured-hero-picture-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-featured-hero-picture-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-color-white)) 5%, transparent),
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 26%, transparent);
  --bb-b2b-featured-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-featured-card-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-featured-card-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 13%, transparent);
  --bb-b2b-featured-quicknav-item-bg: var(--bb-surface-soft);
  --bb-b2b-featured-quicknav-item-bg-hover: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-featured-quicknav-item-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-featured-quicknav-item-border-hover: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2b-featured-quicknav-icon-bg: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-b2b-featured-list-bg:
      linear-gradient(
          180deg,
          var(--bb-body-bg),
          color-mix(in srgb, var(--bb-surface-elevated) 44%, var(--bb-body-bg))
      );
  --bb-b2b-featured-bottom-banner-bg:
      linear-gradient(
          180deg,
          var(--bb-body-bg),
          color-mix(in srgb, var(--bb-surface-elevated) 44%, var(--bb-body-bg))
      );
  --bb-b2b-featured-count-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-featured-count-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-featured-pagination-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-featured-pagination-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-featured-empty-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg));
  --bb-b2b-featured-empty-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2b-featured-empty-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 24%, transparent),
      var(--bb-shadow-xs);
}

/* =====================================
   Hero
===================================== */
.bb-b2b-featured-products-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.25rem, 4vw, 4rem);
  padding-bottom: clamp(2.25rem, 4vw, 4rem);
  background: var(--bb-b2b-featured-hero-bg);
}

.bb-b2b-featured-products-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.bb-b2b-featured-products-hero-content {
  min-width: 0;
}

.bb-b2b-featured-products-breadcrumb-wrap {
  margin-bottom: 1.125rem;
}

.bb-b2b-featured-products-breadcrumb {
  margin-bottom: 0;
}

.bb-b2b-featured-products-hero-chip {
  margin-bottom: 1rem;
}

.bb-b2b-featured-products-hero-chip .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-featured-products-hero-title {
  max-width: 46rem;
  margin: 0 0 1rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
  letter-spacing: var(--bb-letter-spacing-tight, -0.055em);
}

.bb-b2b-featured-products-hero-text {
  max-width: 42rem;
  margin: 0 0 1.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-featured-products-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bb-b2b-featured-products-hero-btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-featured-products-hero-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-featured-products-hero-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-featured-products-hero-picture {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-b2b-featured-hero-picture-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-featured-hero-picture-border);
  border-radius: 50%;
  box-shadow: var(--bb-b2b-featured-hero-picture-shadow);
}

.bb-b2b-featured-products-hero-placeholder {
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-featured-placeholder-color);
  background-color: var(--bb-b2b-featured-placeholder-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-b2b-featured-products-hero-placeholder .material-symbols-outlined {
  font-size: 4rem;
  line-height: 1;
}

/* =====================================
   Quick Nav
===================================== */
.bb-b2b-featured-products-quicknav {
  position: relative;
  z-index: 3;
  margin-top: -1.5rem;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.bb-b2b-featured-products-quicknav-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.25rem);
  background-color: var(--bb-b2b-featured-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-featured-card-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-featured-card-shadow);
}

.bb-b2b-featured-products-quicknav-head {
  min-width: 0;
}

.bb-b2b-featured-products-quicknav-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide, 0.06em);
  text-transform: uppercase;
}

.bb-b2b-featured-products-quicknav-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(var(--bb-fs-lg), 1.6vw, var(--bb-fs-2xl));
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.025em);
}

.bb-b2b-featured-products-quicknav-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-b2b-featured-products-quicknav-item {
  min-width: 0;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-featured-quicknav-item-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-featured-quicknav-item-border);
  border-radius: var(--bb-radius-xl);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2b-featured-products-quicknav-item:hover,
.bb-b2b-featured-products-quicknav-item.active {
  transform: translateY(-1px);
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-featured-quicknav-item-bg-hover);
  border-color: var(--bb-b2b-featured-quicknav-item-border-hover);
  box-shadow: var(--bb-b2b-featured-quicknav-item-shadow-hover);
}

.bb-b2b-featured-products-quicknav-icon {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2b-featured-quicknav-icon-color);
  background-color: var(--bb-b2b-featured-quicknav-icon-bg);
  border-radius: var(--bb-radius-lg);
}

.bb-b2b-featured-products-quicknav-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Product List Section
===================================== */
.bb-b2b-featured-products-list {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--bb-b2b-featured-list-bg);
}

.bb-b2b-featured-products-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.bb-b2b-featured-products-section-copy {
  max-width: 50rem;
  min-width: 0;
}

.bb-b2b-featured-products-section-chip {
  margin-bottom: 0.875rem;
}

.bb-b2b-featured-products-section-chip .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-featured-products-section-title {
  margin: 0 0 0.65rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.06;
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-b2b-featured-products-section-text {
  max-width: 42rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-featured-products-count {
  min-height: 2.5rem;
  padding: 0.65rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-featured-count-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-featured-count-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Product Grid
   Global bb-product-card ailesini taşır.
===================================== */
.bb-b2b-featured-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.5vw, 1.125rem);
  align-items: stretch;
}

.bb-b2b-featured-products-grid .bb-product-card {
  height: 100%;
}

.bb-b2b-featured-products-grid .bb-product-card-title {
  min-height: 2.6em;
}

.bb-b2b-featured-products-grid .bb-product-card-actions {
  margin-top: auto;
}

/* =====================================
   Pagination
===================================== */
.bb-b2b-featured-products-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1rem;
  background-color: var(--bb-b2b-featured-pagination-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-featured-pagination-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2b-featured-products-pagination-summary {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-featured-products-pagination-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* =====================================
   Empty
===================================== */
.bb-b2b-featured-products-empty {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  background-color: var(--bb-b2b-featured-empty-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-featured-empty-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-featured-empty-shadow);
}

.bb-b2b-featured-products-empty-icon {
  width: 4.25rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-b2b-featured-empty-icon-color);
  background-color: var(--bb-b2b-featured-empty-icon-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-b2b-featured-products-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2b-featured-products-empty-title {
  margin: 0 0 0.65rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-featured-products-empty-text {
  margin: 0 0 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-featured-products-empty-btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Bottom Banner
===================================== */
.bb-b2b-featured-products-bottom-banner {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--bb-b2b-featured-bottom-banner-bg);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1399.98px) {
  .bb-b2b-featured-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-featured-products-hero-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-featured-products-hero-media {
    display: none;
  }
  .bb-b2b-featured-products-quicknav-card {
    grid-template-columns: 1fr;
  }
  .bb-b2b-featured-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-featured-products-quicknav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-featured-products-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-featured-products-hero {
    padding-top: 1.75rem;
    padding-bottom: 2.25rem;
  }
  .bb-b2b-featured-products-hero-title {
    font-size: var(--bb-fs-3xl);
    line-height: 1.08;
  }
  .bb-b2b-featured-products-hero-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-b2b-featured-products-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bb-b2b-featured-products-hero-btn {
    width: 100%;
  }
  .bb-b2b-featured-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }
  .bb-b2b-featured-products-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2b-featured-products-pagination-list {
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-featured-products-quicknav-list {
    grid-template-columns: 1fr;
  }
  .bb-b2b-featured-products-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2B Home Hero Slider
   Scope: .bb-b2b-homepage-slider-layout
   Token-driven | Light / Navy / Dark compatible
===================================== */
/* =====================================
   B2B Home Hero Slider Mode Tokens
===================================== */
.bb-b2b-homepage-slider-layout {
  --bb-b2b-slider-radius-xl: var(--bb-radius-2xl);
  --bb-b2b-slider-bg:
      radial-gradient(
          circle at 82% 28%,
          rgba(123, 90, 255, 0.16),
          transparent 28%
      ),
      radial-gradient(
          circle at 18% 85%,
          rgba(255, 212, 0, 0.08),
          transparent 22%
      ),
      var(--bb-home-hero-slide-bg, var(--bb-color-blue-800));
  --bb-b2b-slider-border: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
  --bb-b2b-slider-shadow:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 10%, transparent);
  --bb-b2b-slider-slide-orb-one: color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent);
  --bb-b2b-slider-slide-orb-two: color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent);
  --bb-b2b-slider-label-bg: color-mix(in srgb, var(--bb-black, var(--bb-black)) 78%, var(--bb-color-blue-800));
  --bb-b2b-slider-label-border: color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent);
  --bb-b2b-slider-label-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent);
  --bb-b2b-slider-text-color: color-mix(in srgb, var(--bb-white, var(--bb-white)) 82%, transparent);
  --bb-b2b-slider-chip-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 7%, transparent);
  --bb-b2b-slider-chip-border: color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent);
  --bb-b2b-slider-chip-color: color-mix(in srgb, var(--bb-white, var(--bb-white)) 78%, transparent);
  --bb-b2b-slider-chip-one-color: var(--bb-color-green-300);
  --bb-b2b-slider-chip-one-bg: rgba(32, 110, 74, 0.16);
  --bb-b2b-slider-chip-one-border: rgba(101, 216, 154, 0.2);
  --bb-b2b-slider-chip-two-color: var(--bb-color-blue-300);
  --bb-b2b-slider-chip-two-bg: rgba(56, 102, 196, 0.16);
  --bb-b2b-slider-chip-two-border: rgba(129, 164, 238, 0.22);
  --bb-b2b-slider-chip-three-color: var(--bb-color-yellow-300);
  --bb-b2b-slider-chip-three-bg: rgba(148, 117, 17, 0.16);
  --bb-b2b-slider-chip-three-border: rgba(255, 214, 93, 0.22);
  --bb-b2b-slider-btn-shadow:
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent);
  --bb-b2b-slider-primary-btn-shadow:
      0 1rem 2rem color-mix(in srgb, var(--bb-primary) 34%, transparent),
      0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-b2b-slider-light-btn-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 13%, transparent);
  --bb-b2b-slider-light-btn-border: color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent);
  --bb-b2b-slider-light-btn-bg-hover: color-mix(in srgb, var(--bb-white, var(--bb-white)) 19%, transparent);
  --bb-b2b-slider-light-btn-border-hover: color-mix(in srgb, var(--bb-white, var(--bb-white)) 16%, transparent);
  --bb-b2b-slider-light-btn-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent),
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 12%, transparent);
  --bb-b2b-slider-picture-bg:
      radial-gradient(
          circle at 42% 34%,
          color-mix(in srgb, var(--bb-white, var(--bb-white)) 96%, transparent),
          color-mix(in srgb, var(--bb-primary) 8%, var(--bb-white, var(--bb-white))) 68%,
          color-mix(in srgb, var(--bb-primary) 13%, var(--bb-white, var(--bb-white))) 100%
      );
  --bb-b2b-slider-picture-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 72%, transparent),
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent);
  --bb-b2b-slider-picture-filter:
      drop-shadow(0 1rem 1.4rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent));
  --bb-b2b-slider-placeholder-bg: color-mix(in srgb, var(--bb-surface-elevated) 74%, transparent);
  --bb-b2b-slider-placeholder-color: color-mix(in srgb, var(--bb-primary) 42%, transparent);
  --bb-b2b-slider-network-border: color-mix(in srgb, var(--bb-primary) 22%, transparent);
  --bb-b2b-slider-network-dot-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-b2b-slider-dot-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 30%, transparent);
  --bb-b2b-slider-dot-active-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--bb-primary) 24%, transparent);
  --bb-b2b-slider-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 18%, transparent);
  --bb-b2b-slider-control-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 28%, transparent);
  --bb-b2b-slider-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent);
  --bb-b2b-slider-control-shadow-hover:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent),
      0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
}

html[data-bs-theme=navy] .bb-b2b-homepage-slider-layout {
  --bb-b2b-slider-bg:
      radial-gradient(
          circle at 82% 28%,
          rgba(123, 90, 255, 0.14),
          transparent 28%
      ),
      radial-gradient(
          circle at 18% 85%,
          rgba(255, 212, 0, 0.065),
          transparent 22%
      ),
      color-mix(in srgb, var(--bb-color-blue-800) 78%, var(--bb-body-bg));
  --bb-b2b-slider-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-slider-shadow:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 32%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 20%, transparent);
  --bb-b2b-slider-picture-bg:
      radial-gradient(
          circle at 42% 34%,
          color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg)) 68%,
          color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg)) 100%
      );
  --bb-b2b-slider-picture-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 9%, transparent),
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 21%, transparent);
  --bb-b2b-slider-dot-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 27%, transparent);
  --bb-b2b-slider-dot-active-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--bb-primary) 26%, transparent);
  --bb-b2b-slider-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 20%, transparent);
  --bb-b2b-slider-control-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 30%, transparent);
  --bb-b2b-slider-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 26%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent);
}

html[data-bs-theme=dark] .bb-b2b-homepage-slider-layout {
  --bb-b2b-slider-bg:
      radial-gradient(
          circle at 82% 28%,
          rgba(123, 90, 255, 0.13),
          transparent 28%
      ),
      radial-gradient(
          circle at 18% 85%,
          rgba(255, 212, 0, 0.06),
          transparent 22%
      ),
      color-mix(in srgb, var(--bb-color-blue-800) 74%, var(--bb-body-bg));
  --bb-b2b-slider-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2b-slider-shadow:
      0 1.5rem 3.5rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 36%, transparent),
      0 0.25rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent);
  --bb-b2b-slider-picture-bg:
      radial-gradient(
          circle at 42% 34%,
          color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg)),
          color-mix(in srgb, var(--bb-primary) 8%, var(--bb-body-bg)) 68%,
          color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg)) 100%
      );
  --bb-b2b-slider-picture-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent),
      0 1.25rem 3rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent);
  --bb-b2b-slider-dot-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 26%, transparent);
  --bb-b2b-slider-dot-active-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--bb-primary) 26%, transparent);
  --bb-b2b-slider-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 20%, transparent);
  --bb-b2b-slider-control-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 30%, transparent);
  --bb-b2b-slider-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 28%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent);
}

/* =====================================
   Layout
===================================== */
.bb-b2b-homepage-slider-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 22vw, 21rem);
  gap: 1rem;
  align-items: stretch;
}

.bb-b2b-homepage-slider-layout [type=button]:not(:disabled),
.bb-b2b-homepage-slider-layout [type=reset]:not(:disabled),
.bb-b2b-homepage-slider-layout [type=submit]:not(:disabled),
.bb-b2b-homepage-slider-layout button:not(:disabled) {
  cursor: pointer;
}

.bb-b2b-homepage-slider-carousel {
  position: relative;
  min-width: 0;
  min-height: 28rem;
  overflow: hidden;
  background: var(--bb-b2b-slider-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-slider-border);
  border-radius: var(--bb-b2b-slider-radius-xl);
  box-shadow: var(--bb-b2b-slider-shadow);
}

.bb-b2b-homepage-slider-inner,
.bb-b2b-homepage-slider-item {
  height: 100%;
}

/* =====================================
   Slide
===================================== */
.bb-b2b-homepage-slider-slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 28rem;
  overflow: hidden;
  padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(4.75rem, 6vw, 5.5rem);
}

.bb-b2b-homepage-slider-slide::before {
  content: "";
  position: absolute;
  top: -8rem;
  right: -5rem;
  z-index: 1;
  width: 20rem;
  height: 20rem;
  background-color: var(--bb-b2b-slider-slide-orb-one);
  border-radius: 50%;
}

.bb-b2b-homepage-slider-slide::after {
  content: "";
  position: absolute;
  left: -5.5rem;
  bottom: -7.5rem;
  z-index: 1;
  width: 15rem;
  height: 15rem;
  background-color: var(--bb-b2b-slider-slide-orb-two);
  border-radius: 50%;
}

/* =====================================
   Copy
===================================== */
.bb-b2b-homepage-slider-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 48rem;
  padding-left: clamp(0.375rem, 1vw, 0.875rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bb-b2b-homepage-slider-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.9rem;
  color: var(--bb-white, var(--bb-white));
  background-color: var(--bb-b2b-slider-label-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-slider-label-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-tight, -0.01em);
  box-shadow: var(--bb-b2b-slider-label-shadow);
}

.bb-b2b-homepage-slider-label .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-homepage-slider-title {
  max-width: 42rem;
  margin: 0 0 1rem;
  color: var(--bb-white, var(--bb-white)) !important;
  font-size: clamp(2rem, 3.05vw, 2.875rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.bb-b2b-homepage-slider-title *,
.bb-b2b-homepage-slider-title strong,
.bb-b2b-homepage-slider-title span,
.bb-b2b-homepage-slider-title h1,
.bb-b2b-homepage-slider-title h2,
.bb-b2b-homepage-slider-title h3 {
  color: inherit !important;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.bb-b2b-homepage-slider-text {
  max-width: 39rem;
  margin: 0 0 1.125rem;
  color: var(--bb-b2b-slider-text-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-medium);
  line-height: 1.65;
}

.bb-b2b-homepage-slider-text strong,
.bb-b2b-homepage-slider-text span {
  color: inherit;
  font: inherit;
  font-weight: inherit;
}

.bb-b2b-homepage-slider-text h1,
.bb-b2b-homepage-slider-text h2,
.bb-b2b-homepage-slider-text h3,
.bb-b2b-homepage-slider-text h4 {
  display: none !important;
}

/* =====================================
   Pills / Actions
===================================== */
.bb-b2b-homepage-slider-pills {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 39rem;
  margin-bottom: 1rem;
}

.bb-b2b-homepage-slider-actions {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
}

.bb-b2b-homepage-slider-pills .bb-chip {
  color: var(--bb-b2b-slider-chip-color);
  background-color: var(--bb-b2b-slider-chip-bg);
  border-color: var(--bb-b2b-slider-chip-border);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-b2b-homepage-slider-pills .bb-chip:nth-child(1) {
  color: var(--bb-b2b-slider-chip-one-color);
  background-color: var(--bb-b2b-slider-chip-one-bg);
  border-color: var(--bb-b2b-slider-chip-one-border);
}

.bb-b2b-homepage-slider-pills .bb-chip:nth-child(2) {
  color: var(--bb-b2b-slider-chip-two-color);
  background-color: var(--bb-b2b-slider-chip-two-bg);
  border-color: var(--bb-b2b-slider-chip-two-border);
}

.bb-b2b-homepage-slider-pills .bb-chip:nth-child(3) {
  color: var(--bb-b2b-slider-chip-three-color);
  background-color: var(--bb-b2b-slider-chip-three-bg);
  border-color: var(--bb-b2b-slider-chip-three-border);
}

.bb-b2b-homepage-slider-pills .material-symbols-outlined {
  font-size: var(--bb-fs-md);
}

/* =====================================
   Buttons
===================================== */
.bb-b2b-homepage-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding-right: 1.35rem;
  padding-left: 1.35rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold, var(--bb-fw-bold));
  box-shadow: var(--bb-b2b-slider-btn-shadow);
}

.bb-b2b-homepage-slider-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.btn.btn-primary.bb-b2b-homepage-slider-btn {
  color: var(--bb-dark, var(--bb-color-gray-900));
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
  box-shadow: var(--bb-b2b-slider-primary-btn-shadow);
}

.btn.btn-primary.bb-b2b-homepage-slider-btn:hover,
.btn.btn-primary.bb-b2b-homepage-slider-btn:focus {
  color: var(--bb-dark, var(--bb-color-gray-900));
  background-color: color-mix(in srgb, var(--bb-primary) 90%, var(--bb-white, var(--bb-white)));
  border-color: color-mix(in srgb, var(--bb-primary) 90%, var(--bb-white, var(--bb-white)));
}

.btn.btn-light.bb-b2b-homepage-slider-btn {
  color: var(--bb-white, var(--bb-white));
  background-color: var(--bb-b2b-slider-light-btn-bg);
  border-color: var(--bb-b2b-slider-light-btn-border);
  box-shadow: var(--bb-b2b-slider-light-btn-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn.btn-light.bb-b2b-homepage-slider-btn:hover,
.btn.btn-light.bb-b2b-homepage-slider-btn:focus {
  color: var(--bb-white, var(--bb-white));
  background-color: var(--bb-b2b-slider-light-btn-bg-hover);
  border-color: var(--bb-b2b-slider-light-btn-border-hover);
}

/* =====================================
   Visual
===================================== */
.bb-b2b-homepage-slider-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24rem;
  padding: 1rem 1.5rem 1rem 0;
}

.bb-b2b-homepage-slider-picture-card {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 20.5rem);
  aspect-ratio: 1/1;
  padding: 1.5rem;
  background: var(--bb-b2b-slider-picture-bg);
  border-radius: 50%;
  box-shadow: var(--bb-b2b-slider-picture-shadow);
}

.bb-b2b-homepage-slider-picture-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--bb-b2b-slider-picture-filter);
}

.bb-b2b-homepage-slider-picture-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--bb-b2b-slider-placeholder-color);
  background: var(--bb-b2b-slider-placeholder-bg);
  border-radius: 50%;
}

.bb-b2b-homepage-slider-picture-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
}

/* =====================================
   Network
===================================== */
.bb-b2b-homepage-slider-network {
  position: absolute;
  inset: 1.25rem 1.5rem 1.25rem 0;
  z-index: 1;
  pointer-events: none;
}

.bb-b2b-homepage-slider-network-ring {
  position: absolute;
  border: var(--bb-border-width) dashed var(--bb-b2b-slider-network-border);
  border-radius: 50%;
}

.bb-b2b-homepage-slider-network-ring-one {
  inset: 12%;
}

.bb-b2b-homepage-slider-network-ring-two {
  inset: 27%;
}

.bb-b2b-homepage-slider-network-dot {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--bb-primary);
  border-radius: 50%;
  box-shadow: var(--bb-b2b-slider-network-dot-shadow);
}

.bb-b2b-homepage-slider-network-dot-one {
  top: 22%;
  left: 26%;
}

.bb-b2b-homepage-slider-network-dot-two {
  top: 31%;
  right: 18%;
}

.bb-b2b-homepage-slider-network-dot-three {
  right: 12%;
  bottom: 38%;
}

.bb-b2b-homepage-slider-network-dot-four {
  left: 33%;
  bottom: 22%;
}

/* =====================================
   Indicators
===================================== */
.bb-b2b-homepage-slider-indicators {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 1.25rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  margin: 0;
  transform: translateX(-50%);
}

.bb-b2b-homepage-slider-indicators [data-bs-target],
.bb-b2b-homepage-slider-dot {
  width: 0.5rem;
  min-width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  background: var(--bb-b2b-slider-dot-bg);
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2b-homepage-slider-indicators .active,
.bb-b2b-homepage-slider-dot.active {
  width: 1.625rem;
  background: var(--bb-primary);
  box-shadow: var(--bb-b2b-slider-dot-active-shadow);
}

/* =====================================
   Controls
===================================== */
.bb-b2b-homepage-slider-control {
  top: 50%;
  z-index: 6;
  width: 3.125rem;
  height: 3.125rem;
  align-items: center;
  justify-content: center;
  color: var(--bb-white, var(--bb-white));
  background-color: var(--bb-b2b-slider-control-bg);
  border: 0;
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2b-slider-control-shadow);
  opacity: 0.9;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity var(--bb-transition-fast), background-color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-b2b-homepage-slider-control:hover,
.bb-b2b-homepage-slider-control:focus {
  color: var(--bb-white, var(--bb-white));
  background-color: var(--bb-b2b-slider-control-bg-hover);
  box-shadow: var(--bb-b2b-slider-control-shadow-hover);
  opacity: 1;
  transform: translateY(-50%) scale(1.045);
}

.bb-b2b-homepage-slider-control-prev {
  left: 1.25rem;
}

.bb-b2b-homepage-slider-control-next {
  right: 1.25rem;
}

.bb-b2b-homepage-slider-control .material-symbols-outlined {
  font-size: 1.875rem;
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-homepage-slider-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-homepage-slider-carousel,
  .bb-b2b-homepage-slider-slide {
    min-height: auto;
  }
  .bb-b2b-homepage-slider-slide {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .bb-b2b-homepage-slider-copy {
    max-width: 100%;
    padding-left: 0;
  }
  .bb-b2b-homepage-slider-visual {
    min-height: auto;
    padding: 0.5rem 1rem 3rem;
  }
  .bb-b2b-homepage-slider-picture-card {
    width: min(100%, 17.5rem);
    padding: 1.5rem;
  }
  .bb-b2b-homepage-slider-network {
    inset: 0 1.5rem 2.5rem;
  }
  .bb-b2b-homepage-slider-indicators {
    position: static;
    width: 100%;
    padding: 0 1.5rem 1.25rem;
    transform: none;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-homepage-slider-slide {
    text-align: left;
    padding: 1.25rem;
  }
  .bb-b2b-homepage-slider-title {
    font-size: var(--bb-fs-3xl);
    line-height: 1.08;
  }
  .bb-b2b-homepage-slider-text {
    font-size: var(--bb-fs-sm);
    line-height: var(--bb-line-height-content);
  }
  .bb-b2b-homepage-slider-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-b2b-homepage-slider-btn {
    width: 100%;
    justify-content: center;
  }
  .bb-b2b-homepage-slider-pills {
    display: none;
  }
  .bb-b2b-homepage-slider-visual {
    padding: 0 1.125rem 3.25rem;
  }
  .bb-b2b-homepage-slider-picture-card {
    width: min(100%, 16.875rem);
    padding: 1.5rem;
  }
}
/* =====================================
   B2B Homepage Vertical Spotlight
   Scope: .bb-b2b-homepage-spotlight
   Token-driven | Light / Navy / Dark compatible
===================================== */
/* =====================================
   B2B Homepage Spotlight Mode Tokens
===================================== */
.bb-b2b-homepage-spotlight {
  --bb-b2b-spotlight-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 97%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-bg-soft: color-mix(
      in srgb,
      var(--bb-primary) 4%,
      var(--bb-b2b-spotlight-bg)
  );
  --bb-b2b-spotlight-border: color-mix(
      in srgb,
      var(--bb-border-color) 82%,
      transparent
  );
  --bb-b2b-spotlight-ink: var(--bb-emphasis-color);
  --bb-b2b-spotlight-muted: var(--bb-secondary-color);
  --bb-b2b-spotlight-card-bg:
      radial-gradient(
          circle at 96% 82%,
          color-mix(in srgb, var(--bb-b2b-spotlight-card-accent) 8%, transparent),
          transparent 5.75rem
      ),
      linear-gradient(
          135deg,
          var(--bb-b2b-spotlight-bg),
          var(--bb-b2b-spotlight-bg-soft)
      );
  --bb-b2b-spotlight-card-orb: color-mix(
      in srgb,
      var(--bb-b2b-spotlight-card-accent) 6%,
      var(--bb-tertiary-bg)
  );
  --bb-b2b-spotlight-card-border-hover: color-mix(
      in srgb,
      var(--bb-b2b-spotlight-card-accent) 22%,
      var(--bb-border-color)
  );
  --bb-b2b-spotlight-card-shadow:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2b-spotlight-card-shadow-hover:
      0 1.25rem 2.75rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
  --bb-b2b-spotlight-icon-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 10%,
      transparent
  );
  --bb-b2b-spotlight-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent),
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-emphasis-color) 14%, transparent);
}

html[data-bs-theme=navy] .bb-b2b-homepage-spotlight {
  --bb-b2b-spotlight-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 90%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-bg-soft: color-mix(
      in srgb,
      var(--bb-primary) 5%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-border: color-mix(
      in srgb,
      var(--bb-border-color) 78%,
      transparent
  );
  --bb-b2b-spotlight-card-bg:
      radial-gradient(
          circle at 96% 82%,
          color-mix(in srgb, var(--bb-b2b-spotlight-card-accent) 7.5%, transparent),
          transparent 5.75rem
      ),
      linear-gradient(
          135deg,
          var(--bb-b2b-spotlight-bg),
          var(--bb-b2b-spotlight-bg-soft)
      );
  --bb-b2b-spotlight-card-orb: color-mix(
      in srgb,
      var(--bb-b2b-spotlight-card-accent) 7.5%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-card-shadow:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 12%, transparent);
  --bb-b2b-spotlight-card-shadow-hover:
      0 1.25rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 28%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 14%, transparent);
  --bb-b2b-spotlight-icon-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 9%,
      transparent
  );
  --bb-b2b-spotlight-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent),
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 20%, transparent);
}

html[data-bs-theme=dark] .bb-b2b-homepage-spotlight {
  --bb-b2b-spotlight-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 88%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-bg-soft: color-mix(
      in srgb,
      var(--bb-primary) 5%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-border: color-mix(
      in srgb,
      var(--bb-border-color) 78%,
      transparent
  );
  --bb-b2b-spotlight-card-bg:
      radial-gradient(
          circle at 96% 82%,
          color-mix(in srgb, var(--bb-b2b-spotlight-card-accent) 7%, transparent),
          transparent 5.75rem
      ),
      linear-gradient(
          135deg,
          var(--bb-b2b-spotlight-bg),
          var(--bb-b2b-spotlight-bg-soft)
      );
  --bb-b2b-spotlight-card-orb: color-mix(
      in srgb,
      var(--bb-b2b-spotlight-card-accent) 8%,
      var(--bb-body-bg)
  );
  --bb-b2b-spotlight-card-shadow:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 24%, transparent),
      0 0.25rem 0.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 14%, transparent);
  --bb-b2b-spotlight-card-shadow-hover:
      0 1.25rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 30%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 16%, transparent);
  --bb-b2b-spotlight-icon-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 8%,
      transparent
  );
  --bb-b2b-spotlight-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent),
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent);
}

/* =====================================
   Layout
===================================== */
.bb-b2b-homepage-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  height: 100%;
  min-width: 0;
}

/* =====================================
   Card
===================================== */
.bb-b2b-homepage-spotlight-card {
  --bb-b2b-spotlight-card-accent: var(--bb-primary);
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 1.15rem;
  color: var(--bb-b2b-spotlight-ink);
  background: var(--bb-b2b-spotlight-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-spotlight-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-spotlight-card-shadow);
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2b-homepage-spotlight-card::before {
  content: "";
  position: absolute;
  right: -2.2rem;
  bottom: -2.4rem;
  width: 7rem;
  height: 7rem;
  background-color: var(--bb-b2b-spotlight-card-orb);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-homepage-spotlight-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 0.25rem;
  background-color: color-mix(in srgb, var(--bb-b2b-spotlight-card-accent) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  opacity: 0.92;
}

.bb-b2b-homepage-spotlight-card:hover {
  transform: translateY(-2px);
  border-color: var(--bb-b2b-spotlight-card-border-hover);
  box-shadow: var(--bb-b2b-spotlight-card-shadow-hover);
}

/* =====================================
   Icon
===================================== */
.bb-b2b-homepage-spotlight-icon {
  position: relative;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  min-width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-emphasis-color);
  border: var(--bb-border-width) solid var(--bb-b2b-spotlight-icon-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-spotlight-icon-shadow);
}

.bb-b2b-homepage-spotlight-icon .material-symbols-outlined {
  color: currentColor;
  font-size: 1.8rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 580, "GRAD" 0, "opsz" 28;
}

/* =====================================
   Content
===================================== */
.bb-b2b-homepage-spotlight-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bb-b2b-homepage-spotlight-title {
  margin: 0 0 0.45rem;
  color: var(--bb-b2b-spotlight-ink);
  font-size: clamp(1.18rem, 1.45vw, 1.48rem);
  font-weight: var(--bb-fw-extrabold, var(--bb-fw-bold));
  line-height: 1.06;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2b-homepage-spotlight-title *,
.bb-b2b-homepage-spotlight-title strong,
.bb-b2b-homepage-spotlight-title span,
.bb-b2b-homepage-spotlight-title h1,
.bb-b2b-homepage-spotlight-title h2,
.bb-b2b-homepage-spotlight-title h3 {
  color: inherit !important;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.bb-b2b-homepage-spotlight-text {
  margin: 0 0 0.6rem;
  color: var(--bb-b2b-spotlight-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-homepage-spotlight-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  transition: color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2b-homepage-spotlight-link:hover {
  color: var(--bb-b2b-spotlight-card-accent);
}

.bb-b2b-homepage-spotlight-link .material-symbols-outlined {
  font-size: 1.125rem;
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-b2b-homepage-spotlight-link:hover .material-symbols-outlined {
  transform: translateX(2px);
}

/* =====================================
   Variants
===================================== */
.bb-b2b-homepage-spotlight-card-success {
  --bb-b2b-spotlight-card-accent: var(--bb-success);
}

.bb-b2b-homepage-spotlight-card-primary {
  --bb-b2b-spotlight-card-accent: var(--bb-primary);
}

.bb-b2b-homepage-spotlight-card-warning {
  --bb-b2b-spotlight-card-accent: var(--bb-warning);
}

.bb-b2b-homepage-spotlight-card-info {
  --bb-b2b-spotlight-card-accent: var(--bb-info);
}

.bb-b2b-homepage-spotlight-card-success .bb-b2b-homepage-spotlight-icon,
.bb-b2b-homepage-spotlight-card-primary .bb-b2b-homepage-spotlight-icon,
.bb-b2b-homepage-spotlight-card-warning .bb-b2b-homepage-spotlight-icon,
.bb-b2b-homepage-spotlight-card-info .bb-b2b-homepage-spotlight-icon {
  color: var(--bb-primary);
  background-color: var(--bb-emphasis-color);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-homepage-spotlight {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
  }
  .bb-b2b-homepage-spotlight-card {
    min-height: 8.75rem;
    height: auto;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-homepage-spotlight {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-homepage-spotlight-card {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-homepage-spotlight-icon {
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
  }
  .bb-b2b-homepage-spotlight-icon .material-symbols-outlined {
    font-size: 1.5rem;
  }
  .bb-b2b-homepage-spotlight-title {
    font-size: var(--bb-fs-lg);
  }
}
/* =====================================
   B2B Homepage Featured Products
   Scope: _B2BHomepageFeaturedProducts
===================================== */
.bb-b2b-featured-products {
  padding-top: clamp(2.25rem, 4vw, 3.75rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.bb-b2b-featured-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.bb-b2b-featured-products-head-copy {
  min-width: 0;
  max-width: 48rem;
}

.bb-b2b-featured-products-label {
  margin-bottom: 0.875rem;
}

.bb-b2b-featured-products-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-featured-products-title {
  margin: 0 0 0.65rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: var(--bb-fw-extrabold, 800);
  line-height: 1.05;
  letter-spacing: var(--bb-letter-spacing-tight, -0.045em);
}

.bb-b2b-featured-products-text {
  max-width: 42rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

@media (max-width: 767.98px) {
  .bb-b2b-featured-products {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .bb-b2b-featured-products-title {
    font-size: var(--bb-fs-3xl);
    line-height: 1.08;
  }
  .bb-b2b-featured-products-text {
    font-size: var(--bb-fs-sm);
  }
}
.bb-b2b-homepage-content-groups {
  --bb-b2b-content-primary: var(--bb-b2b-primary);
  --bb-b2b-content-primary-dark: var(--bb-b2b-primary-dark);
  --bb-b2b-content-primary-soft: var(--bb-b2b-primary-soft);
  --bb-b2b-content-surface: var(--bb-surface);
  --bb-b2b-content-surface-soft: var(--bb-surface-soft);
  --bb-b2b-content-ink: var(--bb-text);
  --bb-b2b-content-muted: var(--bb-text);
  --bb-b2b-content-border: var(--bb-border-color);
  --bb-b2b-content-radius-lg: var(--bb-radius-lg, 22px);
  --bb-b2b-content-radius-md: var(--bb-radius-md, 16px);
  --bb-b2b-content-shadow: var(--bb-shadow-sm, 0 10px 24px rgba(16, 24, 40, 0.05));
  --bb-b2b-content-shadow-hover: var(--bb-shadow-md, 0 16px 36px rgba(16, 24, 40, 0.09));
  padding-top: 36px;
  padding-bottom: 36px;
}

.bb-b2b-homepage-content-group-list {
  display: grid;
  gap: 34px;
}

.bb-b2b-homepage-content-group {
  min-width: 0;
}

.bb-b2b-homepage-content-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bb-b2b-homepage-content-group-copy {
  max-width: 47.5rem;
}

.bb-b2b-homepage-content-group-title {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.028em;
  color: var(--bb-b2b-content-ink);
  margin-bottom: 0.35rem;
}

.bb-b2b-homepage-content-group-text {
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  color: var(--bb-b2b-content-muted);
  margin-bottom: 0;
}

.bb-b2b-homepage-content-group-link {
  min-height: 42px;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2b-homepage-content-group-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-homepage-content-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-homepage-content-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-homepage-content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-homepage-content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-b2b-homepage-content-group-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-homepage-content-groups {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .bb-b2b-homepage-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-homepage-content-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2B Homepage Stats
   Scope: .bb-b2b-homepage-stats
   Token-driven | Light / Navy / Dark compatible
===================================== */
/* =====================================
   B2B Homepage Stats Mode Tokens
===================================== */
.bb-b2b-homepage-stats {
  --bb-b2b-stats-bg: color-mix(
      in srgb,
      var(--bb-color-blue-800) 82%,
      var(--bb-body-bg)
  );
  --bb-b2b-stats-bg-deep: color-mix(
      in srgb,
      #0a2447 86%,
      #020617
  );
  --bb-b2b-stats-bg-end: color-mix(in srgb, var(--bb-color-blue-800) 72%, var(--bb-color-navy-900));
  --bb-b2b-stats-text: var(--bb-white, var(--bb-white));
  --bb-b2b-stats-muted: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 68%,
      transparent
  );
  --bb-b2b-stats-card-bg: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 7%,
      transparent
  );
  --bb-b2b-stats-card-bg-hover: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 10.5%,
      transparent
  );
  --bb-b2b-stats-card-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 12%,
      transparent
  );
  --bb-b2b-stats-card-border-hover: color-mix(
      in srgb,
      var(--bb-primary) 24%,
      var(--bb-white, var(--bb-white))
  );
  --bb-b2b-stats-accent: var(--bb-primary);
  --bb-b2b-stats-orb-left: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 5%,
      transparent
  );
  --bb-b2b-stats-orb-right: color-mix(
      in srgb,
      var(--bb-primary) 9%,
      transparent
  );
  --bb-b2b-stats-card-orb: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 5%,
      transparent
  );
  --bb-b2b-stats-card-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent),
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 12%, transparent);
  --bb-b2b-stats-card-shadow-hover:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 14%, transparent),
      0 1.25rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 16%, transparent);
  --bb-b2b-stats-icon-bg: color-mix(
      in srgb,
      var(--bb-black, var(--bb-black)) 36%,
      transparent
  );
  --bb-b2b-stats-icon-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 12%,
      transparent
  );
  --bb-b2b-stats-icon-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent),
      0 0.875rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 18%, transparent);
}

html[data-bs-theme=navy] .bb-b2b-homepage-stats {
  --bb-b2b-stats-bg: color-mix(
      in srgb,
      var(--bb-color-blue-800) 76%,
      var(--bb-body-bg)
  );
  --bb-b2b-stats-bg-deep: color-mix(
      in srgb,
      var(--bb-color-navy-900) 90%,
      var(--bb-body-bg)
  );
  --bb-b2b-stats-bg-end: color-mix(in srgb, var(--bb-color-blue-800) 64%, var(--bb-body-bg));
  --bb-b2b-stats-muted: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 67%,
      transparent
  );
  --bb-b2b-stats-card-bg: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 6.5%,
      transparent
  );
  --bb-b2b-stats-card-bg-hover: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 10%,
      transparent
  );
  --bb-b2b-stats-card-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 11%,
      transparent
  );
  --bb-b2b-stats-card-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 9%, transparent),
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 24%, transparent);
  --bb-b2b-stats-card-shadow-hover:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 12%, transparent),
      0 1.25rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 30%, transparent);
  --bb-b2b-stats-icon-bg: color-mix(
      in srgb,
      var(--bb-black, var(--bb-black)) 41%,
      transparent
  );
  --bb-b2b-stats-icon-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 10%,
      transparent
  );
}

html[data-bs-theme=dark] .bb-b2b-homepage-stats {
  --bb-b2b-stats-bg: color-mix(
      in srgb,
      var(--bb-color-blue-800) 70%,
      var(--bb-body-bg)
  );
  --bb-b2b-stats-bg-deep: color-mix(
      in srgb,
      var(--bb-color-navy-900) 92%,
      var(--bb-body-bg)
  );
  --bb-b2b-stats-bg-end: color-mix(in srgb, var(--bb-color-blue-800) 58%, var(--bb-body-bg));
  --bb-b2b-stats-muted: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 66%,
      transparent
  );
  --bb-b2b-stats-card-bg: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 6%,
      transparent
  );
  --bb-b2b-stats-card-bg-hover: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 9.5%,
      transparent
  );
  --bb-b2b-stats-card-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 10%,
      transparent
  );
  --bb-b2b-stats-card-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent),
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 28%, transparent);
  --bb-b2b-stats-card-shadow-hover:
      inset 0 1px 0 color-mix(in srgb, var(--bb-white, var(--bb-white)) 10%, transparent),
      0 1.25rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 34%, transparent);
  --bb-b2b-stats-icon-bg: color-mix(
      in srgb,
      var(--bb-black, var(--bb-black)) 44%,
      transparent
  );
  --bb-b2b-stats-icon-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 9%,
      transparent
  );
}

/* =====================================
   Section
===================================== */
.bb-b2b-homepage-stats {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--bb-b2b-stats-text);
  background: radial-gradient(circle at 82% 26%, rgba(123, 90, 255, 0.14), transparent 28%), radial-gradient(circle at 16% 86%, rgba(255, 212, 0, 0.08), transparent 24%), linear-gradient(135deg, var(--bb-b2b-stats-bg-deep) 0%, var(--bb-b2b-stats-bg) 50%, var(--bb-b2b-stats-bg-end) 100%);
}

.bb-b2b-homepage-stats::before {
  content: "";
  position: absolute;
  left: -7rem;
  top: -8rem;
  width: 18rem;
  height: 18rem;
  background-color: var(--bb-b2b-stats-orb-left);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-homepage-stats::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -7rem;
  width: 17rem;
  height: 17rem;
  background-color: var(--bb-b2b-stats-orb-right);
  border-radius: 50%;
  pointer-events: none;
}

/* =====================================
   Head
===================================== */
.bb-b2b-homepage-stats-head {
  position: relative;
  z-index: 2;
  max-width: 52rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.bb-b2b-homepage-stats-title {
  margin: 0;
  color: var(--bb-b2b-stats-text);
  font-size: clamp(2rem, 3.15vw, 3rem);
  font-weight: var(--bb-fw-extrabold, 800);
  line-height: 1.04;
  letter-spacing: var(--bb-letter-spacing-tight, -0.045em);
}

/* =====================================
   Grid
===================================== */
.bb-b2b-homepage-stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.25rem);
  align-items: stretch;
}

/* =====================================
   Card
===================================== */
.bb-b2b-homepage-stat-card {
  position: relative;
  min-height: 14rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--bb-b2b-stats-text);
  background: radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 8rem), var(--bb-b2b-stats-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-stats-card-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-stats-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2b-homepage-stat-card::before {
  content: "";
  position: absolute;
  right: -2.5rem;
  bottom: -2.75rem;
  width: 7.5rem;
  height: 7.5rem;
  background-color: var(--bb-b2b-stats-card-orb);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2b-homepage-stat-card::after {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 1.25rem;
  width: 2.25rem;
  height: 0.25rem;
  background-color: var(--bb-b2b-stats-accent);
  border-radius: var(--bb-radius-pill);
  opacity: 0.95;
}

.bb-b2b-homepage-stat-card:hover {
  transform: translateY(-2px);
  background-color: var(--bb-b2b-stats-card-bg-hover);
  border-color: var(--bb-b2b-stats-card-border-hover);
  box-shadow: var(--bb-b2b-stats-card-shadow-hover);
}

/* =====================================
   Icon
===================================== */
.bb-b2b-homepage-stat-icon {
  position: relative;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-stats-icon-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-stats-icon-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-stats-icon-shadow);
}

.bb-b2b-homepage-stat-icon .material-symbols-outlined {
  color: currentColor;
  font-size: 2rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 580, "GRAD" 0, "opsz" 32;
}

/* =====================================
   Text
===================================== */
.bb-b2b-homepage-stat-title {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 18rem;
  margin-bottom: 0.45rem;
  color: var(--bb-b2b-stats-text);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-extrabold, 800);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.025em);
}

.bb-b2b-homepage-stat-number {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 0.65rem;
  color: var(--bb-b2b-stats-accent);
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: var(--bb-fw-black, 900);
  line-height: 0.95;
  letter-spacing: var(--bb-letter-spacing-tight, -0.05em);
}

.bb-b2b-homepage-stat-text {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 17rem;
  color: var(--bb-b2b-stats-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2b-homepage-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-b2b-homepage-stats-head {
    max-width: 44rem;
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-homepage-stats-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-homepage-stat-card {
    min-height: auto;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-homepage-stats {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  .bb-b2b-homepage-stats-title {
    font-size: var(--bb-fs-3xl);
    line-height: 1.08;
  }
  .bb-b2b-homepage-stat-card {
    padding: 1.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-homepage-stat-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
  }
  .bb-b2b-homepage-stat-icon .material-symbols-outlined {
    font-size: 1.75rem;
  }
  .bb-b2b-homepage-stat-number {
    font-size: var(--bb-fs-display-sm, 2.75rem);
  }
  .bb-b2b-homepage-stat-title {
    font-size: var(--bb-fs-base);
  }
}
.bb-b2b-category-guide-grid {
  --bb-b2b-guide-primary: var(--bb-b2b-category-primary);
  --bb-b2b-guide-primary-soft: var(--bb-b2b-category-primary-soft);
  --bb-b2b-guide-ink: var(--bb-b2b-category-ink, var(--bb-text));
  --bb-b2b-guide-muted: var(--bb-b2b-category-muted, var(--bb-text));
  --bb-b2b-guide-border: var(--bb-b2b-category-border, var(--bb-border-color));
  --bb-b2b-guide-radius: var(--bb-radius-lg, 22px);
  --bb-b2b-guide-shadow: var(--bb-shadow-sm, 0 10px 24px rgba(16, 24, 40, 0.05));
  --bb-b2b-guide-shadow-hover: var(--bb-shadow-md, 0 16px 36px rgba(16, 24, 40, 0.09));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
  margin-top: 18px;
}

.bb-b2b-category-guide-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(228, 231, 236, 0.9);
  border-radius: var(--bb-b2b-guide-radius);
  background: radial-gradient(circle at top right, rgba(21, 94, 239, 0.07), transparent 34%), var(--bb-white);
  padding: 1.375rem;
  box-shadow: var(--bb-b2b-guide-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-category-guide-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -48px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(21, 94, 239, 0.045);
  pointer-events: none;
}

.bb-b2b-category-guide-card:hover {
  transform: translateY(-2px);
  border-color: rgba(21, 94, 239, 0.2);
  box-shadow: var(--bb-b2b-guide-shadow-hover);
}

.bb-b2b-category-guide-card-icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: var(--bb-radius-xl);
  background: var(--bb-b2b-guide-primary-soft);
  color: var(--bb-b2b-guide-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.bb-b2b-category-guide-card-icon .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 28;
}

.bb-b2b-category-guide-card-label {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--bb-b2b-guide-primary);
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

.bb-b2b-category-guide-card-title {
  position: relative;
  z-index: 2;
  color: var(--bb-b2b-guide-ink);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
  margin-bottom: 0.5rem;
}

.bb-b2b-category-guide-card-subtitle {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--bb-b2b-guide-ink);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-bold);
  margin-bottom: 0.5rem;
}

.bb-b2b-category-guide-card-text {
  position: relative;
  z-index: 2;
  color: var(--bb-b2b-guide-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  margin-bottom: 0;
}

.bb-b2b-category-guide-card-footer {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
  color: var(--bb-b2b-guide-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
}

@media (max-width: 1199.98px) {
  .bb-b2b-category-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-category-guide-grid {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
  .bb-b2b-category-guide-card {
    padding: 18px;
    border-radius: var(--bb-radius-xl);
  }
}
.bb-b2b-popular-categories {
  --bb-b2b-popular-category-primary: var(--bb-b2b-category-primary);
  --bb-b2b-popular-category-primary-dark: var(--bb-b2b-category-primary-dark);
  --bb-b2b-popular-category-primary-soft: var(--bb-b2b-category-primary-soft);
  --bb-b2b-popular-category-surface: var(--bb-surface);
  --bb-b2b-popular-category-ink: var(--bb-b2b-category-ink, var(--bb-text));
  --bb-b2b-popular-category-muted: var(--bb-b2b-category-muted, var(--bb-text));
  --bb-b2b-popular-category-border: var(--bb-b2b-category-border, var(--bb-border-color));
  --bb-b2b-popular-category-radius: var(--bb-radius-lg, 22px);
  --bb-b2b-popular-category-shadow: var(--bb-shadow-sm, 0 10px 24px rgba(16, 24, 40, 0.05));
  --bb-b2b-popular-category-shadow-hover: var(--bb-shadow-md, 0 16px 36px rgba(16, 24, 40, 0.09));
}

.bb-b2b-popular-categories-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2b-popular-category-card {
  position: relative;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid rgba(228, 231, 236, 0.9);
  border-radius: var(--bb-b2b-popular-category-radius);
  background: radial-gradient(circle at top right, rgba(21, 94, 239, 0.075), transparent 38%), var(--bb-b2b-popular-category-surface);
  color: inherit !important;
  text-decoration: none !important;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  box-shadow: var(--bb-b2b-popular-category-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-popular-category-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -38px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(21, 94, 239, 0.045);
  pointer-events: none;
}

.bb-b2b-popular-category-card:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 94, 239, 0.22);
  box-shadow: var(--bb-b2b-popular-category-shadow-hover);
}

.bb-b2b-popular-category-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-b2b-popular-category-primary-soft);
  color: var(--bb-b2b-popular-category-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(21, 94, 239, 0.08);
}

.bb-b2b-popular-category-icon .material-symbols-outlined {
  font-size: var(--bb-h2);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 28;
}

.bb-b2b-popular-category-title {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  color: var(--bb-b2b-popular-category-ink);
  font-size: var(--bb-fs-sm);
  line-height: 1.38;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2b-popular-category-arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bb-surface-elevated);
  color: var(--bb-b2b-popular-category-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.bb-b2b-popular-category-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-b2b-popular-category-card:hover .bb-b2b-popular-category-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--bb-b2b-popular-category-primary);
  color: var(--bb-white);
}

@media (max-width: 1399.98px) {
  .bb-b2b-popular-categories-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-popular-categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-popular-categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .bb-b2b-popular-category-card {
    min-height: 122px;
    border-radius: var(--bb-radius-xl);
    padding: 14px 10px;
  }
  .bb-b2b-popular-category-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-popular-category-arrow {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 420px) {
  .bb-b2b-popular-categories-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-popular-category-card {
    min-height: auto;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 44px 14px 14px;
  }
  .bb-b2b-popular-category-title {
    min-height: auto;
  }
}
.bb-b2b-category-suppliers {
  --bb-b2b-supplier-primary: var(--bb-b2b-category-primary);
  --bb-b2b-supplier-primary-dark: var(--bb-b2b-category-primary-dark);
  --bb-b2b-supplier-primary-soft: var(--bb-b2b-category-primary-soft);
  --bb-b2b-supplier-surface: var(--bb-surface);
  --bb-b2b-supplier-ink: var(--bb-b2b-category-ink, var(--bb-text));
  --bb-b2b-supplier-muted: var(--bb-b2b-category-muted, var(--bb-text));
  --bb-b2b-supplier-border: var(--bb-b2b-category-border, var(--bb-border-color));
  --bb-b2b-supplier-yellow: var(--bb-warning);
  --bb-b2b-supplier-radius-xl: var(--bb-radius-xl, 28px);
  --bb-b2b-supplier-radius-lg: var(--bb-radius-lg, 22px);
  --bb-b2b-supplier-radius-md: var(--bb-radius-md, 16px);
  --bb-b2b-supplier-shadow: var(--bb-shadow-sm, 0 10px 24px rgba(16, 24, 40, 0.05));
  --bb-b2b-supplier-shadow-hover: var(--bb-shadow-md, 0 16px 36px rgba(16, 24, 40, 0.09));
  padding-top: 4px;
}

.bb-b2b-category-suppliers-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.bb-b2b-category-suppliers-head-copy {
  max-width: 820px;
}

.bb-b2b-category-suppliers-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-category-suppliers-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-category-suppliers-title {
  color: var(--bb-b2b-supplier-ink);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
  margin-bottom: 0.45rem;
}

.bb-b2b-category-suppliers-text {
  max-width: 47.5rem;
  color: var(--bb-b2b-supplier-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
  margin-bottom: 0;
}

.bb-b2b-category-suppliers-list {
  display: grid;
  gap: 16px;
}

.bb-b2b-category-supplier-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(228, 231, 236, 0.9);
  border-radius: var(--bb-b2b-supplier-radius-xl);
  background: radial-gradient(circle at top right, rgba(21, 94, 239, 0.07), transparent 34%), var(--bb-b2b-supplier-surface);
  padding: 20px;
  box-shadow: var(--bb-b2b-supplier-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-b2b-category-supplier-card::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -62px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(21, 94, 239, 0.045);
  pointer-events: none;
}

.bb-b2b-category-supplier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(21, 94, 239, 0.2);
  box-shadow: var(--bb-b2b-supplier-shadow-hover);
}

.bb-b2b-category-supplier-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: start;
}

.bb-b2b-category-supplier-logo {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(228, 231, 236, 0.92);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-surface-soft);
  overflow: hidden;
  color: var(--bb-b2b-supplier-primary);
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.bb-b2b-category-supplier-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-b2b-category-supplier-logo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bb-b2b-supplier-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-category-supplier-logo-placeholder .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-b2b-category-supplier-info {
  min-width: 0;
  padding-top: 2px;
}

.bb-b2b-category-supplier-name {
  color: var(--bb-b2b-supplier-ink);
  font-size: var(--bb-fs-xl);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.025em;
  margin: 0 0 7px;
  overflow-wrap: anywhere;
}

.bb-b2b-category-supplier-name a {
  color: inherit;
  text-decoration: none !important;
}

.bb-b2b-category-supplier-name a:hover {
  color: var(--bb-b2b-supplier-primary);
}

.bb-b2b-category-supplier-type {
  color: var(--bb-b2b-supplier-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-semibold);
  margin: 0 0 12px;
}

.bb-b2b-category-supplier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2b-category-supplier-badge {
  min-height: 1.75rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-b2b-supplier-primary-soft);
  color: var(--bb-b2b-supplier-primary-dark);
  padding: 0.25rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: var(--bb-fs-xs);
  line-height: 1;
  font-weight: var(--bb-fw-extrabold);
}

.bb-b2b-category-supplier-badge .material-symbols-outlined {
  color: var(--bb-b2b-supplier-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-category-supplier-score {
  justify-self: end;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.bb-b2b-category-supplier-score strong {
  color: var(--bb-b2b-supplier-ink);
  font-size: var(--bb-fs-3xl);
  line-height: 1;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2b-category-supplier-stars {
  display: block;
  color: var(--bb-b2b-supplier-yellow);
  font-size: var(--bb-fs-sm);
  letter-spacing: 1px;
  line-height: var(--bb-line-height-heading);
  white-space: nowrap;
}

.bb-b2b-category-supplier-score small {
  display: block;
  color: var(--bb-b2b-supplier-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-category-supplier-products {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-category-supplier-product {
  width: 94px;
  height: 80px;
  border: 1px solid rgba(228, 231, 236, 0.9);
  border-radius: var(--bb-b2b-supplier-radius-md);
  background: var(--bb-tertiary-bg);
  overflow: hidden;
  color: color-mix(in srgb, var(--bb-page-accent) 34%, transparent);
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-category-supplier-product:hover {
  transform: translateY(-2px);
  border-color: rgba(21, 94, 239, 0.2);
  background: var(--bb-surface-elevated);
  box-shadow: var(--bb-b2b-supplier-shadow);
}

.bb-b2b-category-supplier-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 6px;
}

.bb-b2b-category-supplier-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-category-supplier-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

.bb-b2b-category-supplier-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.bb-b2b-category-supplier-detail-btn {
  min-height: 42px;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--bb-fw-extrabold);
}

.bb-b2b-category-supplier-detail-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

@media (max-width: 991.98px) {
  .bb-b2b-category-supplier-main {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .bb-b2b-category-supplier-score {
    grid-column: 1/-1;
    justify-self: stretch;
    justify-content: flex-start;
    padding-top: 8px;
  }
  .bb-b2b-category-supplier-footer {
    justify-content: flex-start;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-category-supplier-card {
    padding: 16px;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2b-category-supplier-main {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }
  .bb-b2b-category-supplier-logo {
    width: 58px;
    height: 58px;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-category-supplier-name {
    font-size: var(--bb-icon-size-md);
  }
  .bb-b2b-category-supplier-products {
    gap: 10px;
  }
  .bb-b2b-category-supplier-product {
    width: 78px;
    height: 68px;
  }
  .bb-b2b-category-supplier-detail-btn {
    width: 100%;
    justify-content: center;
  }
}
.bb-b2b-banner-strip {
  --bb-b2b-banner-strip-primary: var(--bb-b2b-category-primary);
  --bb-b2b-banner-strip-primary-dark: var(--bb-b2b-category-primary-dark);
  --bb-b2b-banner-strip-primary-deep: var(--bb-b2b-category-primary-deep);
  --bb-b2b-banner-strip-yellow: var(--bb-warning);
  --bb-b2b-banner-strip-radius: var(--bb-radius-xl, 28px);
  --bb-b2b-banner-strip-shadow: var(--bb-shadow-md, 0 16px 36px rgba(16, 24, 40, 0.09));
  position: relative;
  z-index: 3;
}

.bb-b2b-banner-strip-inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-b2b-banner-strip-radius);
  background: radial-gradient(circle at top right, rgba(247, 198, 0, 0.18), transparent 30%), linear-gradient(135deg, var(--bb-b2b-banner-strip-primary-dark) 0%, var(--bb-b2b-banner-strip-primary-deep) 52%, var(--bb-b2b-banner-strip-primary) 100%);
  color: var(--bb-b2b-banner-strip-text-color, var(--bb-white));
  padding: 18px 24px;
  box-shadow: var(--bb-b2b-banner-strip-shadow);
}

.bb-b2b-banner-strip-inner::before {
  content: "";
  position: absolute;
  left: -72px;
  bottom: -90px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bb-white) 6%, transparent);
  pointer-events: none;
}

.bb-b2b-banner-strip-inner::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bb-white) 7%, transparent);
  pointer-events: none;
}

.bb-b2b-banner-strip-inner > .row {
  position: relative;
  z-index: 2;
}

.bb-b2b-banner-strip-media {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 72px;
}

.bb-b2b-banner-strip-image {
  display: block;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.14));
}

.bb-b2b-banner-strip-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--bb-radius-xl);
  background: color-mix(in srgb, var(--bb-white) 12%, transparent);
  color: var(--bb-b2b-banner-strip-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-banner-strip-placeholder .material-symbols-outlined {
  font-size: var(--bb-h2);
  line-height: 1;
}

.bb-b2b-banner-strip-content {
  min-width: 0;
  text-align: center;
}

.bb-b2b-banner-strip-title {
  color: var(--bb-b2b-banner-strip-text-color, var(--bb-white));
  font-size: clamp(20px, 2vw, 26px);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.bb-b2b-banner-strip-text {
  color: var(--bb-b2b-banner-strip-text-color, var(--bb-white));
  opacity: 0.86;
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
  font-weight: var(--bb-fw-medium);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.bb-b2b-banner-strip-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bb-b2b-banner-strip-btn {
  min-height: 46px;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: var(--bb-fw-extrabold);
  white-space: nowrap;
}

.bb-b2b-banner-strip-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

@media (max-width: 991.98px) {
  .bb-b2b-banner-strip-inner {
    padding: 16px 18px;
  }
  .bb-b2b-banner-strip-media {
    justify-content: center;
    min-height: auto;
  }
  .bb-b2b-banner-strip-image {
    max-height: 50px;
  }
  .bb-b2b-banner-strip-action {
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-banner-strip-inner {
    border-radius: var(--bb-radius-2xl);
    padding: 18px;
  }
  .bb-b2b-banner-strip-content {
    text-align: center;
  }
  .bb-b2b-banner-strip-btn {
    width: 100%;
  }
}
/* =====================================
   B2C Category Content Groups
   Inner component / product cards only
===================================== */
.bb-b2c-category-content-group {
  min-width: 0;
}

.bb-b2c-category-content-group + .bb-b2c-category-content-group {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

.bb-b2c-category-content-group-products {
  min-width: 0;
}

/* Product cards */
.bb-b2c-category-contents {
  min-width: 0;
}

.bb-b2c-category-contents-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2c-category-contents-media {
  position: relative;
  overflow: hidden;
  min-height: 13.75rem;
  padding: 0.875rem;
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-white)) 100%);
  border-bottom: 1px solid var(--bb-border-color);
}

.bb-b2c-category-contents-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--bb-primary);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-category-contents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-category-contents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-category-content-group + .bb-b2c-category-content-group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
  .bb-b2c-category-contents-media {
    min-height: 11.5rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-category-contents-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-category-contents-media {
    min-height: 13rem;
  }
}
.bb-b2b-category-slider-section {
  --bb-b2b-slider-primary: var(--bb-b2b-category-primary);
  --bb-b2b-slider-primary-dark: var(--bb-b2b-category-primary-dark);
  --bb-b2b-slider-primary-deep: var(--bb-b2b-category-primary-deep);
  --bb-b2b-slider-primary-soft: var(--bb-b2b-category-primary-soft);
  --bb-b2b-slider-yellow: var(--bb-warning);
  --bb-b2b-slider-radius-xl: var(--bb-radius-xl, 28px);
  --bb-b2b-slider-radius-lg: var(--bb-radius-lg, 22px);
  --bb-b2b-slider-shadow: var(--bb-shadow-md, 0 16px 36px rgba(16, 24, 40, 0.09));
  margin-top: 58px;
}

.bb-b2b-category-slider-stage {
  position: relative;
  overflow: visible;
  border-radius: var(--bb-b2b-slider-radius-xl);
  background: radial-gradient(circle at top right, rgba(247, 198, 0, 0.14), transparent 30%), linear-gradient(135deg, var(--bb-b2b-slider-primary-dark) 0%, var(--bb-b2b-slider-primary-deep) 48%, var(--bb-b2b-slider-primary) 100%);
  box-shadow: 0 24px 54px rgba(15, 39, 71, 0.18);
}

.bb-b2b-category-slider-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-b2b-slider-radius-xl);
}

.bb-b2b-category-slider-inner,
.bb-b2b-category-slider-item {
  min-height: 360px;
}

.bb-b2b-category-slider-slide {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--bb-b2b-slider-radius-xl);
  background: radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.09), transparent 20%), radial-gradient(circle at 72% 58%, rgba(247, 198, 0, 0.12), transparent 22%), linear-gradient(135deg, var(--bb-b2b-slider-primary-dark) 0%, var(--bb-color-navy-700) 42%, var(--bb-b2b-slider-primary) 100%);
}

.bb-b2b-category-slider-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(7, 13, 25, 0.16) 0%, rgba(7, 13, 25, 0.04) 100%);
  pointer-events: none;
}

.bb-b2b-category-slider-slide::after {
  content: "";
  position: absolute;
  right: -84px;
  bottom: -110px;
  z-index: 1;
  width: 16.25rem;
  height: 260px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bb-white) 6%, transparent);
  pointer-events: none;
}

.bb-b2b-category-slider-layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
  gap: 24px;
  align-items: center;
  min-height: 360px;
  padding: 34px 42px 58px 74px;
}

.bb-b2b-category-slider-content {
  max-width: 660px;
  color: var(--bb-white);
}

.bb-b2b-category-slider-label {
  margin-bottom: 1rem;
}

.bb-b2b-category-slider-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-category-slider-title {
  max-width: 720px;
  color: var(--bb-white);
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.045em;
  margin-bottom: 0.75rem;
}

.bb-b2b-category-slider-text {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--bb-fs-sm);
  line-height: 1.76;
  margin-bottom: 22px;
}

.bb-b2b-category-slider-text .bb-fs-xs,
.bb-b2b-category-slider-text .font-size-50,
.bb-b2b-category-slider-text .font-weight-bold,
.bb-b2b-category-slider-text .text-lh-45 {
  color: rgba(255, 255, 255, 0.92);
}

.bb-b2b-category-slider-btn {
  min-height: 44px;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
}

.bb-b2b-category-slider-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2b-category-slider-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-category-slider-picture-card {
  width: 100%;
  max-width: 332px;
  aspect-ratio: 1/1;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-2xl);
  background: color-mix(in srgb, var(--bb-white) 10%, transparent);
  padding: 0.5rem;
  box-shadow: var(--bb-shadow-lg);
  backdrop-filter: blur(0.625rem);
}

.bb-b2b-category-slider-picture-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.bb-b2b-category-slider-picture-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bb-b2b-category-slider-placeholder {
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--bb-page-accent) 34%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2b-category-slider-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-b2b-category-slider-indicators {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  z-index: 8;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2b-category-slider-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border: 0;
  border-radius: var(--bb-radius-pill);
  background: rgba(255, 255, 255, 0.42);
  opacity: 1;
  margin: 0;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-category-slider-indicators .active {
  width: 26px;
  background: var(--bb-surface-elevated);
}

.bb-b2b-category-slider-control {
  top: 50%;
  z-index: 9;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--bb-coal-300);
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  box-shadow: 0 16px 34px rgba(16, 24, 39, 0.16);
  backdrop-filter: blur(0.625rem);
}

.bb-b2b-category-slider-control:hover {
  background: var(--bb-surface-elevated);
  color: var(--bb-b2b-slider-primary);
}

.bb-b2b-category-slider-control-prev {
  left: 16px;
}

.bb-b2b-category-slider-control-next {
  right: 16px;
}

.bb-b2b-category-slider-control .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-b2b-category-slider-section {
    margin-top: 42px;
  }
  .bb-b2b-category-slider-inner,
  .bb-b2b-category-slider-item,
  .bb-b2b-category-slider-slide {
    min-height: 350px;
  }
  .bb-b2b-category-slider-layout {
    grid-template-columns: 1fr;
    gap: 1.125rem;
    min-height: 350px;
    padding: 28px 28px 58px 34px;
  }
  .bb-b2b-category-slider-content {
    max-width: none;
  }
  .bb-b2b-category-slider-visual {
    justify-content: flex-start;
  }
  .bb-b2b-category-slider-picture-card {
    max-width: 16.25rem;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-category-slider-section {
    margin-top: 34px;
  }
  .bb-b2b-category-slider-stage,
  .bb-b2b-category-slider-carousel,
  .bb-b2b-category-slider-slide {
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2b-category-slider-inner,
  .bb-b2b-category-slider-item,
  .bb-b2b-category-slider-slide {
    min-height: 410px;
  }
  .bb-b2b-category-slider-layout {
    min-height: 410px;
    padding: 24px 18px 54px 22px;
  }
  .bb-b2b-category-slider-title {
    font-size: var(--bb-h3);
  }
  .bb-b2b-category-slider-text {
    max-width: none;
    font-size: var(--bb-fs-sm);
    line-height: 1.68;
  }
  .bb-b2b-category-slider-picture-card {
    max-width: 220px;
    border-radius: var(--bb-radius-2xl);
    padding: 12px;
  }
  .bb-b2b-category-slider-picture-frame {
    border-radius: var(--bb-radius-xl);
    padding: 10px;
  }
}
/* =====================================
   Wholesale Customize Request
   FormLight page-specific
   Uses Main CSS: bb-chip, buttons, form-control
===================================== */
.bb-wholesale-customize-request-page {
  width: 100%;
}

.bb-wholesale-customize-request-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.bb-wholesale-customize-request-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-wholesale-customize-request-text {
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-wholesale-customize-request-product-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-request-product-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-wholesale-customize-request-product-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-wholesale-customize-request-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-customize-request-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Layout */
.bb-wholesale-customize-request-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Info card */
.bb-wholesale-customize-request-info-card {
  position: relative;
  overflow: hidden;
  padding: 1.375rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bb-primary) 34%, transparent), transparent 32%), radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--bb-warning) 16%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 82%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-wholesale-customize-request-info-card::after {
  content: "";
  position: absolute;
  right: -3.75rem;
  bottom: -4.375rem;
  width: 10.625rem;
  height: 10.625rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-wholesale-customize-request-info-card > * {
  position: relative;
  z-index: 2;
}

.bb-wholesale-customize-request-info-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-wholesale-customize-request-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
  line-height: 1;
}

.bb-wholesale-customize-request-info-card h2 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-wholesale-customize-request-info-card p {
  margin: 0.625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-wholesale-customize-request-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-wholesale-customize-request-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6875rem;
  color: color-mix(in srgb, var(--bb-white) 90%, transparent);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 10%, transparent);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-request-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-wholesale-customize-request-support-link {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0 1rem;
  color: var(--bb-white) !important;
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-wholesale-customize-request-support-link:hover {
  color: var(--bb-white) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
}

.bb-wholesale-customize-request-support-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Form card */
.bb-wholesale-customize-request-form-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-wholesale-customize-request-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bb-wholesale-customize-request-form-head {
  margin-bottom: 1rem;
}

.bb-wholesale-customize-request-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-wholesale-customize-request-form-head p {
  max-width: 42rem;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-wholesale-customize-request-textarea {
  min-height: 10.5rem;
  resize: vertical;
}

.bb-wholesale-customize-request-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-wholesale-customize-request-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-info);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

.bb-wholesale-customize-request-actions {
  margin-top: 1rem;
}

.bb-wholesale-customize-request-actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-wholesale-customize-request-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* FormLight width override for this page */
.bb-layout-light-page:has(.bb-wholesale-customize-request-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 70rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-wholesale-customize-request-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-wholesale-customize-request-layout {
    grid-template-columns: 1fr;
  }
  .bb-wholesale-customize-request-info-card {
    min-height: auto;
  }
}
@media (max-width: 575.98px) {
  .bb-wholesale-customize-request-layout {
    gap: 1rem;
  }
  .bb-wholesale-customize-request-form-card,
  .bb-wholesale-customize-request-info-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-wholesale-customize-request-support-link,
  .bb-wholesale-customize-request-actions .btn {
    border-radius: var(--bb-radius);
  }
}
.bb-b2b-product-list-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bb-b2b-product-list-filter-card {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2b-product-list-filter-card-head {
  padding: 0.9375rem 1rem 0.75rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-product-list-filter-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-2xs);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-b2b-product-list-filter-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-product-list-filter-category-list {
  padding: 0.625rem 0;
}

.bb-b2b-product-list-filter-category-link {
  min-height: 2rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0 1rem;
  color: var(--bb-emphasis-color);
  border-left: 0.1875rem solid transparent;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-product-list-filter-category-link:hover {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, transparent);
}

.bb-b2b-product-list-filter-category-link.is-parent {
  color: var(--bb-secondary-color);
}

.bb-b2b-product-list-filter-category-link.is-active {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  border-left-color: var(--bb-primary);
}

.bb-b2b-product-list-filter-category-link .material-symbols-outlined {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Active filters */
.bb-b2b-product-list-filter-active {
  padding: 0.8125rem 0.875rem 0.875rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-product-list-filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.bb-b2b-product-list-filter-chip {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0 0.5625rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-product-list-filter-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2b-product-list-filter-clear {
  display: inline-flex;
  margin-top: 0.625rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  text-decoration: underline;
}

/* Form */
.bb-b2b-product-list-filter-form {
  display: flex;
  flex-direction: column;
}

.bb-b2b-product-list-filter-group {
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-product-list-filter-group:last-child {
  border-bottom: 0;
}

.bb-b2b-product-list-filter-group summary {
  min-height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0 1rem;
  color: var(--bb-emphasis-color);
  cursor: pointer;
  list-style: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-product-list-filter-group summary::-webkit-details-marker {
  display: none;
}

.bb-b2b-product-list-filter-group summary::after {
  content: "expand_more";
  color: var(--bb-secondary-color);
  font-family: "Material Symbols Outlined";
  font-size: var(--bb-icon-size-md);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  transition: transform 0.18s ease;
}

.bb-b2b-product-list-filter-group[open] summary::after {
  transform: rotate(180deg);
}

.bb-b2b-product-list-filter-group-body {
  padding: 0 1rem 0.9375rem;
}

.bb-b2b-product-list-filter-search {
  position: relative;
  margin-bottom: 0.625rem;
}

.bb-b2b-product-list-filter-search input {
  min-height: 2.25rem;
  padding-left: 2.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-product-list-filter-search .material-symbols-outlined {
  position: absolute;
  top: 50%;
  left: 0.6875rem;
  z-index: 2;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: 1;
  transform: translateY(-50%);
}

.bb-b2b-product-list-filter-option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}

.bb-b2b-product-list-filter-option {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--bb-emphasis-color);
  cursor: pointer;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2b-product-list-filter-option input {
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  margin-top: 0.0625rem;
  accent-color: var(--bb-primary);
}

.bb-b2b-product-list-filter-option-note {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-product-list-filter-more-details {
  margin-top: 0.6875rem;
}

.bb-b2b-product-list-filter-more-details > summary {
  color: var(--bb-primary);
  cursor: pointer;
  list-style: none;
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-b2b-product-list-filter-more-details > summary::-webkit-details-marker {
  display: none;
}

.bb-b2b-product-list-filter-more-details[open] > summary {
  margin-bottom: 0.625rem;
}

.bb-b2b-product-list-filter-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.75rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.625rem;
}

.bb-b2b-product-list-filter-range input,
.bb-b2b-product-list-filter-single-input input {
  min-height: 2.25rem;
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-product-list-filter-range span {
  color: var(--bb-secondary-color);
  text-align: center;
}

.bb-b2b-product-list-filter-single-input {
  margin-bottom: 0.625rem;
}

.bb-b2b-product-list-filter-apply {
  width: 100%;
  min-height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

/* Color */
.bb-b2b-product-list-filter-color-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6875rem 0.5rem;
}

.bb-b2b-product-list-filter-color {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bb-emphasis-color);
  cursor: pointer;
  text-align: center;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-product-list-filter-color input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-b2b-product-list-filter-color-dot {
  width: 1.5625rem;
  height: 1.5625rem;
  background: var(--bb-filter-color, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: inset 0 0 0 0.125rem rgba(255, 255, 255, 0.45);
}

.bb-b2b-product-list-filter-color input:checked + .bb-b2b-product-list-filter-color-dot {
  outline: 0.125rem solid var(--bb-primary);
  outline-offset: 0.1875rem;
}

/* Size */
.bb-b2b-product-list-filter-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2b-product-list-filter-size {
  position: relative;
  cursor: pointer;
}

.bb-b2b-product-list-filter-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-b2b-product-list-filter-size span {
  min-width: 2.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2b-product-list-filter-size input:checked + span {
  color: var(--bb-white);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

/* Footer */
.bb-b2b-product-list-filter-footer {
  padding: 0.875rem 1rem;
  background-color: var(--bb-body-bg);
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2b-product-list-filter-submit {
  width: 100%;
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Promo */
.bb-b2b-product-list-filter-promo-mini {
  padding: 1rem;
  color: var(--bb-emphasis-color);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)), var(--bb-white));
}

.bb-b2b-product-list-filter-promo-mini h3 {
  margin: 0 0 0.4375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2b-product-list-filter-promo-mini p {
  margin: 0 0 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-b2b-product-list-filter-promo-mini .btn {
  min-height: 2.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

@media (max-width: 1199.98px) {
  .bb-b2b-product-list-filter-panel {
    position: static;
  }
}
/* =====================================
   B2B Product Browsing History
   Component-specific
===================================== */
.bb-b2b-browsing-history {
  --bb-b2b-history-primary: var(--bb-primary);
  --bb-b2b-history-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-history-ink: var(--bb-emphasis-color);
  --bb-b2b-history-muted: var(--bb-secondary-color);
  --bb-b2b-history-border: var(--bb-border-color);
  --bb-b2b-history-radius-xl: var(--bb-radius-xl);
  --bb-b2b-history-radius-lg: var(--bb-radius-lg);
  --bb-b2b-history-radius: var(--bb-radius);
  --bb-b2b-history-shadow: var(--bb-shadow-xs);
  --bb-b2b-history-shadow-hover: var(--bb-shadow-sm);
  padding-top: 1.75rem;
}

.bb-b2b-browsing-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2b-browsing-history-head-copy {
  min-width: 0;
}

.bb-b2b-browsing-history-label {
  margin-bottom: 0.625rem;
}

.bb-b2b-browsing-history-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-browsing-history-title {
  margin: 0;
  color: var(--bb-b2b-history-ink);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-browsing-history-title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.125rem;
  margin-top: 0.625rem;
  background-color: var(--bb-warning);
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-browsing-history-all-link {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2b-browsing-history-all-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Carousel */
.bb-b2b-browsing-history-carousel {
  position: relative;
  overflow: hidden;
  padding: 2.625rem 2.75rem 2.875rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-b2b-history-radius-xl);
  box-shadow: var(--bb-b2b-history-shadow);
}

.bb-b2b-browsing-history-carousel-inner {
  overflow: hidden;
}

.bb-b2b-browsing-history-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* Controls */
.bb-b2b-browsing-history-control {
  top: 50%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.bb-b2b-browsing-history-control:hover {
  color: var(--bb-primary);
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-browsing-history-control-prev {
  left: 0.625rem;
}

.bb-b2b-browsing-history-control-next {
  right: 0.625rem;
}

.bb-b2b-browsing-history-control .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Indicators */
.bb-b2b-browsing-history-indicators {
  right: 0;
  bottom: 0.8125rem;
  left: 0;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2b-browsing-history-indicators [data-bs-target] {
  width: 0.4375rem;
  height: 0.4375rem;
  min-width: 0.4375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-browsing-history-indicators .active {
  width: 1.375rem;
  background-color: var(--bb-warning);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2b-browsing-history-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2b-browsing-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-browsing-history-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2b-browsing-history-all-link {
    width: 100%;
    justify-content: center;
  }
  .bb-b2b-browsing-history-carousel {
    padding: 0.875rem 2.25rem 2.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-browsing-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-browsing-history-grid {
    grid-template-columns: 1fr;
  }
}
.bb-b2b-related-category-links {
  --bb-b2b-related-primary: var(--bb-primary);
  --bb-b2b-related-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-related-ink: var(--bb-emphasis-color);
  --bb-b2b-related-muted: var(--bb-secondary-color);
  --bb-b2b-related-border: var(--bb-border-color);
  --bb-b2b-related-shadow: var(--bb-shadow-xs);
  --bb-b2b-related-shadow-hover: var(--bb-shadow-sm);
  padding-top: 1rem;
}

.bb-b2b-related-category-links-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2b-related-category-links-head-copy {
  max-width: 48rem;
}

.bb-b2b-related-category-links-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-related-category-links-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-related-category-links-title {
  margin: 0;
  color: var(--bb-b2b-related-ink);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-related-category-links-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-related-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-related-category-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bb-b2b-related-category-links-item {
  min-height: 2.875rem;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5625rem 0.5rem 0.5rem;
  color: var(--bb-b2b-related-ink) !important;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-b2b-related-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2b-related-shadow);
  text-decoration: none !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-related-category-links-item:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-b2b-related-shadow-hover);
}

.bb-b2b-related-category-links-item-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-b2b-related-primary-soft);
  border-radius: 50%;
}

.bb-b2b-related-category-links-item-icon .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-related-category-links-item-text {
  min-width: 0;
  overflow: hidden;
  color: var(--bb-b2b-related-ink);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-b2b-related-category-links-item-arrow {
  width: 1.625rem;
  height: 1.625rem;
  min-width: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border-radius: 50%;
  transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-related-category-links-item-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-related-category-links-item:hover .bb-b2b-related-category-links-item-arrow {
  transform: translateX(0.125rem);
  color: var(--bb-white);
  background-color: var(--bb-primary);
}

@media (max-width: 767.98px) {
  .bb-b2b-related-category-links-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2b-related-category-links-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
  .bb-b2b-related-category-links-item {
    width: 100%;
  }
}
.bb-b2b-related-products {
  --bb-b2b-related-product-primary: var(--bb-primary);
  --bb-b2b-related-product-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2b-related-product-ink: var(--bb-emphasis-color);
  --bb-b2b-related-product-muted: var(--bb-secondary-color);
  --bb-b2b-related-product-border: var(--bb-border-color);
  --bb-b2b-related-product-shadow: var(--bb-shadow-xs);
  --bb-b2b-related-product-shadow-hover: var(--bb-shadow-sm);
  padding-top: 1.5rem;
}

.bb-b2b-related-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2b-related-products-head-copy {
  max-width: 48rem;
}

.bb-b2b-related-products-label {
  margin-bottom: 0.75rem;
}

.bb-b2b-related-products-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2b-related-products-title {
  margin: 0;
  color: var(--bb-b2b-related-product-ink);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2b-related-products-title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.125rem;
  margin-top: 0.625rem;
  background-color: var(--bb-warning);
  border-radius: var(--bb-radius-pill);
}

.bb-b2b-related-products-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2b-related-product-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Carousel */
.bb-b2b-related-products-carousel {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 3.375rem 2.875rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2b-related-product-shadow);
}

.bb-b2b-related-products-carousel-inner {
  overflow: hidden;
}

.bb-b2b-related-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2b-related-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 36%, transparent);
}

.bb-b2b-related-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-b2b-related-product-favorite {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 4;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 78%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 68%, transparent);
  border-radius: 50%;
  box-shadow: 0 0.375rem 0.875rem rgba(16, 24, 40, 0.1);
  backdrop-filter: blur(0.5rem);
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bb-b2b-related-product-favorite:hover {
  transform: translateY(-0.0625rem);
  color: var(--bb-danger) !important;
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-related-product-favorite .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.bb-b2b-related-product-category {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Controls */
.bb-b2b-related-products-control {
  top: 50%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.bb-b2b-related-products-control:hover {
  color: var(--bb-primary);
  background-color: var(--bb-surface-elevated);
}

.bb-b2b-related-products-control-prev {
  left: 0.625rem;
}

.bb-b2b-related-products-control-next {
  right: 0.625rem;
}

.bb-b2b-related-products-control .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Indicators */
.bb-b2b-related-products-indicators {
  right: 0;
  bottom: 0.8125rem;
  left: 0;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2b-related-products-indicators [data-bs-target] {
  width: 0.4375rem;
  height: 0.4375rem;
  min-width: 0.4375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2b-related-products-indicators .active {
  width: 1.375rem;
  background-color: var(--bb-warning);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2b-related-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2b-related-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2b-related-products-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-related-products-carousel {
    padding: 0.875rem 2.25rem 2.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2b-related-products-grid {
    gap: 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2b-related-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-related-product-media {
    aspect-ratio: 16/10;
  }
}
/* =====================================
   B2B Category Showcase
   Flat / Icon Based / Home Friendly
   Scope: .bb-b2b-category-showcase
===================================== */
/* =====================================
   B2B Category Showcase Mode Tokens
===================================== */
.bb-b2b-category-showcase {
  --bb-b2b-category-showcase-surface: var(--bb-body-bg);
  --bb-b2b-category-showcase-card-bg: var(--bb-card-bg, var(--bb-surface-elevated));
  --bb-b2b-category-showcase-border: var(--bb-border-color);
  --bb-b2b-category-showcase-primary-border: color-mix(in srgb, var(--bb-primary) 28%, transparent);
  --bb-b2b-category-showcase-primary-border-strong: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-b2b-category-showcase-chip-bg: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-b2b-category-showcase-chip-color: color-mix(in srgb, var(--bb-primary) 76%, var(--bb-emphasis-color) 24%);
  --bb-b2b-category-showcase-action-bg: var(--bb-body-bg);
  --bb-b2b-category-showcase-action-border-hover: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  --bb-b2b-category-showcase-card-hover-bg: color-mix(in srgb, var(--bb-primary) 4%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-border: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2b-category-showcase-icon-hover-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-hover-border: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-b2b-category-showcase-shell-shadow: var(--bb-shadow-xs);
  --bb-b2b-category-showcase-card-shadow: var(--bb-shadow-xs);
  --bb-b2b-category-showcase-card-shadow-hover: var(--bb-shadow-sm);
}

html[data-bs-theme=navy] .bb-b2b-category-showcase {
  --bb-b2b-category-showcase-surface: var(--bb-surface-elevated);
  --bb-b2b-category-showcase-card-bg: var(--bb-card-bg, var(--bb-surface-elevated));
  --bb-b2b-category-showcase-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2b-category-showcase-primary-border: color-mix(in srgb, var(--bb-primary) 25%, transparent);
  --bb-b2b-category-showcase-primary-border-strong: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  --bb-b2b-category-showcase-chip-bg: color-mix(in srgb, var(--bb-primary) 15%, transparent);
  --bb-b2b-category-showcase-chip-color: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-b2b-category-showcase-action-bg: var(--bb-surface-elevated);
  --bb-b2b-category-showcase-action-border-hover: color-mix(in srgb, var(--bb-primary) 40%, var(--bb-border-color));
  --bb-b2b-category-showcase-card-hover-bg: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-bg: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2b-category-showcase-icon-hover-bg: color-mix(in srgb, var(--bb-primary) 19%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-hover-border: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-b2b-category-showcase-shell-shadow:
      0 14px 34px color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2b-category-showcase-card-shadow:
      0 10px 24px color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-b2b-category-showcase-card-shadow-hover:
      0 16px 34px color-mix(in srgb, var(--bb-black) 28%, transparent);
}

html[data-bs-theme=dark] .bb-b2b-category-showcase {
  --bb-b2b-category-showcase-surface: var(--bb-body-bg);
  --bb-b2b-category-showcase-card-bg: var(--bb-card-bg, var(--bb-surface-elevated));
  --bb-b2b-category-showcase-border: var(--bb-border-color);
  --bb-b2b-category-showcase-primary-border: color-mix(in srgb, var(--bb-primary) 24%, transparent);
  --bb-b2b-category-showcase-primary-border-strong: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  --bb-b2b-category-showcase-chip-bg: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-b2b-category-showcase-chip-color: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-b2b-category-showcase-action-bg: var(--bb-body-bg);
  --bb-b2b-category-showcase-action-border-hover: color-mix(in srgb, var(--bb-primary) 40%, var(--bb-border-color));
  --bb-b2b-category-showcase-card-hover-bg: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-bg: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2b-category-showcase-icon-hover-bg: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2b-category-showcase-icon-hover-border: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-b2b-category-showcase-shell-shadow:
      0 14px 34px color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-b2b-category-showcase-card-shadow:
      0 10px 24px color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2b-category-showcase-card-shadow-hover:
      0 16px 34px color-mix(in srgb, var(--bb-black) 32%, transparent);
}

/* =====================================
   Showcase Shell
===================================== */
.bb-b2b-category-showcase {
  position: relative;
}

.bb-b2b-category-showcase-shell {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background-color: var(--bb-b2b-category-showcase-surface);
  border: 1px solid var(--bb-b2b-category-showcase-border);
  border-radius: var(--bb-radius-3xl);
  box-shadow: var(--bb-b2b-category-showcase-shell-shadow);
}

.bb-b2b-category-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.bb-b2b-category-showcase-head-left {
  max-width: 56rem;
}

.bb-b2b-category-showcase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.4rem 0.875rem;
  margin-bottom: 0.75rem;
  color: var(--bb-b2b-category-showcase-chip-color);
  background-color: var(--bb-b2b-category-showcase-chip-bg);
  border: 1px solid var(--bb-b2b-category-showcase-primary-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2b-category-showcase-chip .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.bb-b2b-category-showcase-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold, 800);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2b-category-showcase-text {
  max-width: 54rem;
  margin: 0.65rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-b2b-category-showcase-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.65rem 1rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-category-showcase-action-bg);
  border: 1px solid var(--bb-b2b-category-showcase-border);
  border-radius: var(--bb-radius-pill);
  text-decoration: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2b-category-showcase-action:hover {
  color: var(--bb-emphasis-color);
  border-color: var(--bb-b2b-category-showcase-action-border-hover);
  box-shadow: var(--bb-shadow-xs);
  transform: translateY(-1px);
  text-decoration: none;
}

.bb-b2b-category-showcase-action .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

/* =====================================
   Grid / Cards
===================================== */
.bb-b2b-category-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2b-category-showcase-card {
  position: relative;
  min-height: 10rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-category-showcase-card-bg);
  border: 1px solid var(--bb-b2b-category-showcase-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2b-category-showcase-card-shadow);
  text-align: center;
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2b-category-showcase-card:hover {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-category-showcase-card-hover-bg);
  border-color: var(--bb-b2b-category-showcase-primary-border-strong);
  box-shadow: var(--bb-b2b-category-showcase-card-shadow-hover);
  transform: translateY(-3px);
  text-decoration: none !important;
}

.bb-b2b-category-showcase-icon {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2b-category-showcase-icon-bg);
  border: 1px solid var(--bb-b2b-category-showcase-icon-border);
  border-radius: var(--bb-radius-2xl);
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2b-category-showcase-card:hover .bb-b2b-category-showcase-icon {
  background-color: var(--bb-b2b-category-showcase-icon-hover-bg);
  border-color: var(--bb-b2b-category-showcase-icon-hover-border);
  transform: translateY(-2px);
}

.bb-b2b-category-showcase-icon .material-symbols-outlined {
  font-size: 2.65rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 40;
}

.bb-b2b-category-showcase-content {
  display: block;
  width: 100%;
}

.bb-b2b-category-showcase-card-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.35;
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =====================================
   Responsive
===================================== */
@media (min-width: 576px) {
  .bb-b2b-category-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .bb-b2b-category-showcase-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2b-category-showcase-shell {
    padding: 1rem;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2b-category-showcase-title {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }
  .bb-b2b-category-showcase-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-b2b-category-showcase-card {
    min-height: 9.25rem;
    padding: 1rem;
    gap: 0.875rem;
  }
  .bb-b2b-category-showcase-icon {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2b-category-showcase-icon .material-symbols-outlined {
    font-size: 2.25rem;
  }
  .bb-b2b-category-showcase-card-title {
    font-size: var(--bb-fs-sm);
  }
}
@media (max-width: 420px) {
  .bb-b2b-category-showcase-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2b-category-showcase-card {
    min-height: auto;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .bb-b2b-category-showcase-icon {
    flex: 0 0 auto;
  }
}
/* =====================================
   B2C Product Category Slider
   Bootstrap 5 carousel version
===================================== */
.bb-b2c-category-slider-stage {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1729 0%, var(--bb-color-ink-200) 38%, var(--bb-color-gray-800) 68%, var(--bb-color-purple-900) 100%);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-category-slider-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-category-slider-inner {
  min-height: 22.5rem;
}

.bb-b2c-category-slider-carousel-item {
  min-height: 22.5rem;
}

/* Slide */
.bb-b2c-category-slider-slide {
  position: relative;
  overflow: hidden;
  min-height: 22.5rem;
  background: radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--bb-white) 8%, transparent), transparent 20%), radial-gradient(circle at 72% 58%, color-mix(in srgb, var(--bb-primary) 12%, transparent), transparent 22%), linear-gradient(135deg, #0d1729 0%, var(--bb-color-ink-200) 34%, var(--bb-color-gray-800) 66%, var(--bb-color-purple-900) 100%);
}

.bb-b2c-category-slider-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bb-color-ink-700) 10%, transparent) 0%, color-mix(in srgb, var(--bb-color-ink-700) 4%, transparent) 100%);
  pointer-events: none;
}

.bb-b2c-category-slider-layout {
  position: relative;
  z-index: 3;
  min-height: 22.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(17.5rem, 0.72fr);
  gap: 1.125rem;
  align-items: center;
  padding: 1.625rem 4.5rem 3.375rem 3.375rem;
}

.bb-b2c-category-slider-content {
  max-width: 40rem;
  color: var(--bb-white);
}

.bb-b2c-category-slider-label {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 0.875rem;
  color: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-white));
  background-color: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-b2c-category-slider-title {
  max-width: 45rem;
  margin: 0 0 0.75rem;
  color: var(--bb-white);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-b2c-category-slider-text {
  max-width: 32.5rem;
  margin-bottom: 1.375rem;
  color: color-mix(in srgb, var(--bb-white) 82%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-category-slider-text p:last-child {
  margin-bottom: 0;
}

.bb-b2c-category-slider-text .bb-fs-xs,
.bb-b2c-category-slider-text .font-size-50,
.bb-b2c-category-slider-text .font-weight-bold,
.bb-b2c-category-slider-text .text-lh-45 {
  color: color-mix(in srgb, var(--bb-white) 92%, transparent);
}

.bb-b2c-category-slider-btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.375rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-surface-elevated);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  transition: background-color var(--bb-transition-fast), transform var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-b2c-category-slider-btn:hover {
  transform: translateY(-1px);
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-primary);
}

/* Visual */
.bb-b2c-category-slider-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-category-slider-picture-card {
  width: 100%;
  max-width: 20.75rem;
  aspect-ratio: 1/1;
  padding: 0.5rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 10%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 14%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.bb-b2c-category-slider-picture-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 96%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-category-slider-picture-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Controls */
.bb-b2c-category-slider-control {
  width: 4rem;
  opacity: 1;
  z-index: 8;
}

.bb-b2c-category-slider-control-prev {
  justify-content: flex-start;
  left: 0.75rem;
}

.bb-b2c-category-slider-control-next {
  justify-content: flex-end;
  right: 0.75rem;
}

.bb-b2c-category-slider-arrow {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-white) 18%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  transition: transform var(--bb-transition-fast), background-color var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-b2c-category-slider-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-b2c-category-slider-control:hover .bb-b2c-category-slider-arrow {
  transform: scale(1.04);
  color: var(--bb-dark);
  background-color: var(--bb-surface-elevated);
}

/* Bootstrap indicators support if later added */
.bb-b2c-category-slider-carousel .carousel-indicators {
  bottom: 1.125rem;
  z-index: 8;
  gap: 0.5rem;
  margin-bottom: 0;
}

.bb-b2c-category-slider-carousel .carousel-indicators [data-bs-target] {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  padding: 0;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 42%, transparent);
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-category-slider-carousel .carousel-indicators .active {
  width: 1.625rem;
  background-color: var(--bb-surface-elevated);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-category-slider-layout {
    grid-template-columns: 1fr;
    min-height: 21.875rem;
    padding: 1.5rem 4rem 3.375rem 2.125rem;
  }
  .bb-b2c-category-slider-picture-card {
    max-width: 16.25rem;
  }
  .bb-b2c-category-slider-visual {
    justify-content: flex-start;
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-category-slider-control {
    display: none;
  }
  .bb-b2c-category-slider-layout {
    padding-right: 2.125rem;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-category-slider-stage,
  .bb-b2c-category-slider-carousel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-category-slider-inner,
  .bb-b2c-category-slider-carousel-item,
  .bb-b2c-category-slider-slide {
    min-height: 25.625rem;
  }
  .bb-b2c-category-slider-layout {
    min-height: 25.625rem;
    padding: 1.5rem 1.125rem 3.25rem 1.375rem;
  }
  .bb-b2c-category-slider-text {
    max-width: none;
    font-size: var(--bb-fs-sm);
  }
  .bb-b2c-category-slider-picture-card {
    max-width: 13.75rem;
    padding: 0.75rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-category-slider-picture-frame {
    padding: 0.625rem;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-category-slider-title {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }
  .bb-b2c-category-slider-label {
    white-space: normal;
  }
  .bb-b2c-category-slider-btn {
    width: 100%;
  }
}
/* =====================================
   B2C Product Question Preview
   Product detail Q&A component
===================================== */
.bb-b2c-product-question-preview {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--bb-body-bg);
  border-radius: var(--bb-radius-xl);
}

/* -------------------------------------
   Header
------------------------------------- */
.bb-b2c-product-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0;
  padding-bottom: 0.9375rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-b2c-product-question-head-left {
  min-width: 0;
}

.bb-b2c-product-question-head .bb-chip {
  gap: 0.375rem;
}

.bb-b2c-product-question-head .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-product-question-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2c-product-question-text {
  display: block;
  max-width: 46rem;
  margin-top: 0.3125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-table-line-height);
}

/* -------------------------------------
   List
------------------------------------- */
.bb-b2c-product-question-list {
  display: flex;
  flex-direction: column;
}

.bb-b2c-product-question-item {
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.0625rem 0;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-b2c-product-question-item:last-child {
  border-bottom: 0;
}

.bb-b2c-product-question-icon {
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-info) 72%, var(--bb-primary));
  background-color: color-mix(in srgb, var(--bb-info) 10%, var(--bb-body-bg));
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-product-question-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-product-question-body {
  min-width: 0;
}

.bb-b2c-product-question-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.bb-b2c-product-question-meta .bb-chip {
  gap: 0.3125rem;
}

.bb-b2c-product-question-meta .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-product-question-question {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-product-question-answer {
  margin-top: 0.625rem;
}

/* -------------------------------------
   Footer
------------------------------------- */
.bb-b2c-product-question-footer {
  display: flex;
  justify-content: center;
  padding-top: 0.9375rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-b2c-product-question-all-link {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding-right: 1.125rem;
  padding-left: 1.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-product-question-all-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* -------------------------------------
   Empty State
------------------------------------- */
.bb-b2c-product-question-empty {
  padding: 1.5rem;
  text-align: center;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-tertiary-bg) 0%, var(--bb-body-bg) 100%);
  border: var(--bb-border-width) dashed color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-product-question-empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary-light);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-product-question-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-b2c-product-question-empty strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-product-question-empty p {
  max-width: 35rem;
  margin: 0 auto 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-detail-review-empty-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bb-b2c-product-question-empty-action .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 575.98px) {
  .bb-b2c-product-question-preview {
    padding: 1rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-product-question-head {
    align-items: flex-start;
  }
  .bb-b2c-product-question-item {
    grid-template-columns: 2.125rem minmax(0, 1fr);
    gap: 0.625rem;
    padding: 0.9375rem 0;
  }
  .bb-b2c-product-question-icon {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--bb-radius);
  }
  .bb-b2c-product-question-all-link,
  .bb-b2c-product-question-empty-action {
    width: 100%;
  }
}
/* Bulbulustur B2C Pages */
/* Main layout */
.bb-b2c-list-layout {
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.bb-b2c-list-sidebar,
.bb-b2c-list-content,
.bb-b2c-list-main {
  min-width: 0;
}

.bb-b2c-list-main {
  width: 100%;
}

/* Toolbar */
.bb-b2c-product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding: 0.875rem 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-product-toolbar-left,
.bb-b2c-product-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.bb-b2c-result-summary {
  min-width: 0;
}

.bb-b2c-result-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.625rem;
  margin-bottom: 0.375rem;
  padding: 0 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-result-eyebrow .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-result-title {
  display: block;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-result-text {
  display: block;
  margin-top: 0.1875rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* Filter toggle */
.bb-b2c-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.375rem;
  padding: 0 0.875rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-filter-toggle .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* View switch */
.bb-b2c-view-switch {
  align-items: center;
  gap: 0.375rem;
}

.bb-b2c-view-switch-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  cursor: pointer;
}

.bb-b2c-view-switch-btn.active {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
}

.bb-b2c-view-switch-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Sort */
.bb-b2c-sort-select {
  min-width: 13.125rem;
  min-height: 2.625rem;
  padding-left: 0.9375rem;
  padding-right: 2.375rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* Mini pager */
.bb-b2c-product-page-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  white-space: nowrap;
}

.bb-b2c-product-page-mini span {
  min-width: 2.375rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-product-page-mini a {
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
}

.bb-b2c-product-page-mini .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Product grid */
.bb-b2c-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-b2c-inline-sponsored-card-wrap {
  grid-column: 1/-1;
  margin: 0.25rem 0;
}

/* Pagination wrapper */
.bb-b2c-product-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-product-page-notify {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-product-page-notify::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--bb-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

/* Empty result */
.bb-b2c-empty-result-card {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  min-height: 18.75rem;
  padding: 2.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-empty-result-icon {
  width: 9.375rem;
  height: 9.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 14%, transparent), var(--bb-body-bg));
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-empty-result-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

.bb-b2c-empty-result-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  margin-bottom: 0.75rem;
  padding: 0 0.6875rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-empty-result-copy h4 {
  margin: 0 0 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-empty-result-copy p {
  max-width: 47.5rem;
  margin: 0 0 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-empty-result-copy ul {
  margin: 0 0 1.125rem;
  padding-left: 1.125rem;
  color: var(--bb-emphasis-color);
}

.bb-b2c-empty-result-copy li {
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-empty-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bb-b2c-category-story {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: 1.375rem;
  align-items: stretch;
  padding: 1.5rem;
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 28%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated)) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-category-story-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 0.375rem;
}

.bb-b2c-category-story-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  width: fit-content;
  min-height: 1.875rem;
  margin-bottom: 0.8125rem;
  padding: 0 0.75rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-category-story-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-category-story-title {
  margin: 0 0 0.75rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-2xl);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2c-category-story-text {
  max-width: 51.25rem;
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.9;
}

.bb-b2c-category-story-visual {
  position: relative;
  z-index: 2;
  min-height: 16.25rem;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-category-story-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inline sponsored component bridge */
.bb-b2c-inline-sponsored-card-wrap {
  grid-column: 1/-1;
  margin: 0.25rem 0;
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2c-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2c-list-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2c-list-sidebar {
    display: none;
  }
  .bb-b2c-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-product-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2c-product-toolbar-left,
  .bb-b2c-product-toolbar-right {
    justify-content: space-between;
  }
  .bb-b2c-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }
  .bb-b2c-category-story {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .bb-b2c-category-story-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-b2c-category-story-visual {
    min-height: 13.75rem;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-product-toolbar-right {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2c-sort-select {
    width: 100%;
    min-width: 0;
  }
  .bb-b2c-product-pagination-wrap {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2c-product-pagination-wrap .bb-pagination {
    justify-content: center;
  }
  .bb-b2c-empty-result-card {
    grid-template-columns: 1fr;
    padding: 1.375rem;
  }
  .bb-b2c-empty-result-icon {
    width: 6.875rem;
    height: 6.875rem;
  }
  .bb-b2c-empty-result-copy h4 {
    font-size: var(--bb-fs-2xl);
  }
  .bb-b2c-category-story {
    padding: 1rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-category-story-title {
    font-size: var(--bb-icon-size-lg);
  }
  .bb-b2c-category-story-text {
    font-size: var(--bb-fs-sm);
    line-height: var(--bb-line-height-content);
  }
  .bb-b2c-category-story-visual {
    min-height: 11.875rem;
    border-radius: var(--bb-radius);
  }
}
.bb-b2c-detail-product-head {
  margin-bottom: 1.25rem;
}

.bb-b2c-detail-product-title {
  max-width: 65.625rem;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-detail-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24.375rem;
  gap: 1.5rem;
  align-items: start;
}

.bb-b2c-detail-buy-column {
  position: sticky;
  top: 1.5625rem;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-detail-gallery-area {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-detail-gallery-area + .bb-b2c-detail-anchor-shell {
  margin-top: var(--bb-spacer-4, 1.5rem);
}

/* Buy card */
.bb-b2c-buy-card {
  width: 100%;
  background-color: var(--bb-body-bg);
  border: 0;
  border-radius: var(--bb-radius-none);
  box-shadow: none;
}

/* Store */
.bb-b2c-buy-store {
  position: relative;
  display: grid;
  grid-template-columns: 3.875rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: flex-start;
  padding: 1.25rem 1.375rem 1.75rem;
  background-color: var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-buy-store-logo {
  width: 3.875rem;
  height: 3.875rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  text-decoration: none !important;
}

.bb-b2c-buy-store-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2c-buy-store-logo .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-buy-store-copy {
  min-width: 0;
}

.bb-b2c-buy-store-top {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
  margin-bottom: 0.4375rem;
}

.bb-b2c-buy-store-name {
  min-width: 0;
  overflow: hidden;
  color: var(--bb-emphasis-color) !important;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-buy-store-name:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-buy-store-rating {
  min-width: 2.125rem;
  height: 1.5625rem;
  padding: 0 0.5625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bb-success);
  background-color: var(--bb-success-light);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

.bb-b2c-buy-store-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem 0.625rem;
  margin-bottom: 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.3;
}

.bb-b2c-buy-store-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  white-space: nowrap;
}

.bb-b2c-buy-store-meta .material-symbols-outlined {
  color: var(--bb-success);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-buy-store-action-row {
  position: absolute;
  left: 6.125rem;
  right: 1.375rem;
  bottom: -1.0625rem;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2c-buy-store-mini-action {
  min-height: 2.125rem;
  padding: 0 0.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 96%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-buy-store-mini-action:hover {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-buy-store-mini-action .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Variant wrapper */
.bb-b2c-buy-variant-area {
  padding: 1.125rem 1.375rem 0;
  margin-bottom: 0;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

/* Generic variant component compatibility */
.bb-b2c-variant-group {
  margin-bottom: 1.125rem;
}

.bb-b2c-variant-group:last-child {
  margin-bottom: 0;
}

.bb-b2c-variant-title {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  margin-bottom: 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-variant-title span {
  color: var(--bb-secondary-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-variant-color-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5625rem;
}

.bb-b2c-variant-color-item {
  position: relative;
  min-height: 5.5rem;
  overflow: hidden;
  padding: 0.4375rem;
  color: inherit !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-variant-color-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-variant-color-item.is-active {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-b2c-variant-color-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background-color: var(--bb-tertiary-bg);
}

.bb-b2c-variant-color-item.is-disabled::after {
  content: "";
  position: absolute;
  left: -1.125rem;
  top: 50%;
  width: 140%;
  height: 1px;
  background-color: var(--bb-border-color);
  transform: rotate(-24deg);
}

.bb-b2c-variant-color-item img {
  display: block;
  width: 100%;
  height: 3rem;
  object-fit: contain;
  margin-bottom: 0.375rem;
}

.bb-b2c-variant-color-price {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-tight);
}

.bb-b2c-variant-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2c-variant-size-item {
  position: relative;
  min-width: 3.0625rem;
  height: 2.375rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  cursor: pointer;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-variant-size-item:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-variant-size-item.is-active {
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

.bb-b2c-variant-size-item.is-disabled {
  opacity: 0.42;
  color: var(--bb-secondary-color) !important;
  background-color: var(--bb-tertiary-bg);
  cursor: not-allowed;
}

.bb-b2c-variant-size-item.is-disabled::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  height: 1px;
  background-color: var(--bb-border-color);
  transform: rotate(-18deg);
}

.bb-b2c-variant-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5625rem);
  z-index: 20;
  min-width: 9.375rem;
  padding: 0.5rem 0.625rem;
  color: var(--bb-white);
  color: var(--bb-white);
  border-radius: var(--bb-radius);
  opacity: 0;
  pointer-events: none;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  text-align: center;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-variant-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: var(--bb-dark) transparent transparent;
  transform: translateX(-50%);
}

.bb-b2c-variant-color-item.is-disabled:hover .bb-b2c-variant-tooltip,
.bb-b2c-variant-size-item.is-disabled:hover .bb-b2c-variant-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Price */
.bb-b2c-buy-price-block {
  position: relative;
  padding: 1.125rem;
  margin-bottom: 0;
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--bb-primary) 16%, transparent), transparent 32%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated)) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-buy-price-panel,
.bb-b2c-buy-out-of-stock-panel {
  padding: 0.9375rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-buy-out-of-stock-panel {
  background-color: color-mix(in srgb, var(--bb-danger) 6%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-danger) 28%, var(--bb-border-color));
}

.bb-b2c-buy-price-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.bb-b2c-buy-price-eyebrow,
.bb-b2c-buy-stock,
.bb-b2c-buy-out-of-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bb-b2c-buy-price-eyebrow {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-b2c-buy-price-eyebrow .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-buy-stock,
.bb-b2c-buy-out-of-stock {
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-buy-stock {
  color: var(--bb-success);
  background-color: var(--bb-success-light);
}

.bb-b2c-buy-out-of-stock {
  color: var(--bb-danger);
  background-color: var(--bb-danger-light);
}

.bb-b2c-buy-stock .material-symbols-outlined,
.bb-b2c-buy-out-of-stock .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-buy-price {
  margin-bottom: 0.4375rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(2.125rem, 4vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: -0.045em;
}

.bb-b2c-buy-price-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-buy-price-note .material-symbols-outlined {
  color: var(--bb-success);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
  flex: 0 0 auto;
}

.bb-b2c-buy-price-mini-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.bb-b2c-buy-price-mini-pill {
  min-height: 1.75rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-buy-price-mini-pill .material-symbols-outlined {
  color: var(--bb-success);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* Actions */
.bb-b2c-buy-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  padding: 1.125rem;
  margin-bottom: 0;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-buy-btn {
  min-height: 3rem;
  padding: 0 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  cursor: pointer;
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-buy-btn .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-b2c-buy-btn-cart {
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-primary);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bb-primary) 20%, transparent);
}

.bb-b2c-buy-btn-cart:hover {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
}

/* =====================================
   B2C Buy Now Button
===================================== */
.bb-b2c-buy-btn-now {
  --bb-b2c-buy-btn-now-bg: var(--bb-coal-300, var(--bb-emphasis-color));
  --bb-b2c-buy-btn-now-bg-hover: color-mix(
    in srgb,
    var(--bb-coal-300, var(--bb-emphasis-color)) 88%,
    var(--bb-primary)
  );
  --bb-b2c-buy-btn-now-color: var(--bb-white);
  --bb-b2c-buy-btn-now-border: var(--bb-coal-300, var(--bb-emphasis-color));
  color: var(--bb-b2c-buy-btn-now-color) !important;
  background-color: var(--bb-b2c-buy-btn-now-bg) !important;
  border-color: var(--bb-b2c-buy-btn-now-border) !important;
}

.bb-b2c-buy-btn-now:hover,
.bb-b2c-buy-btn-now:focus {
  color: var(--bb-b2c-buy-btn-now-color) !important;
  background-color: var(--bb-b2c-buy-btn-now-bg-hover) !important;
  border-color: var(--bb-b2c-buy-btn-now-bg-hover) !important;
}

.bb-b2c-buy-btn-alarm {
  color: var(--bb-white) !important;
  background-color: var(--bb-success);
}

/* Trust list */
.bb-b2c-buy-trust-list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  padding: 1.125rem;
}

.bb-b2c-buy-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2c-buy-trust-item:hover {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-buy-trust-icon {
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-b2c-buy-trust-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-buy-trust-copy {
  min-width: 0;
  flex: 1;
}

.bb-b2c-buy-trust-copy strong {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-buy-trust-copy small {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-buy-trust-arrow {
  flex: 0 0 auto;
  margin-top: 0.4375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Utility links */
.bb-b2c-product-utility-links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.125rem 0.875rem;
  background-color: var(--bb-body-bg);
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-product-utility-link {
  min-height: 2.625rem;
  padding: 0 0.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  color: var(--bb-emphasis-color) !important;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-product-utility-link:last-child {
  border-bottom: 0;
}

.bb-b2c-product-utility-link:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-product-utility-copy {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
}

.bb-b2c-product-utility-copy .material-symbols-outlined {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-sm);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-product-utility-link:hover .bb-b2c-product-utility-copy .material-symbols-outlined {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated));
}

.bb-b2c-product-utility-arrow {
  flex: 0 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  transition: color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-product-utility-link:hover .bb-b2c-product-utility-arrow {
  color: var(--bb-primary);
  transform: translateX(2px);
}

.bb-b2c-product-utility-link.is-price-report:hover .bb-b2c-product-utility-copy .material-symbols-outlined {
  color: var(--bb-color-orange-600);
  background-color: color-mix(in srgb, var(--bb-orange-100) 72%, var(--bb-surface-elevated));
}

.bb-b2c-detail-section {
  margin-bottom: 1.75rem;
}

.bb-b2c-detail-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8125rem;
}

.bb-b2c-detail-section-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-b2c-detail-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-detail-section-card,
.bb-b2c-detail-component-shell {
  overflow: hidden;
  padding: 1.375rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-detail-section-card.is-description {
  background-color: var(--bb-body-bg);
}

.bb-b2c-detail-section-card.is-review {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 12%, transparent), transparent 30%), var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-detail-section-card.is-question {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.bb-b2c-detail-section-card.is-installment {
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-info) 8%, transparent), transparent 34%), var(--bb-body-bg);
}

.bb-b2c-detail-description {
  color: var(--bb-body-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-normal);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-detail-component-inner {
  margin-top: 1.25rem;
}

.bb-b2c-detail-legal-note {
  padding: 1.125rem 1.25rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-detail-legal-note p {
  margin: 0;
}

.bb-b2c-detail-legal-note strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-semibold);
}

/* Anchor bar */
.bb-b2c-anchor-target {
  scroll-margin-top: 6.875rem;
}

.bb-b2c-detail-anchor-shell {
  position: sticky;
  top: 0.75rem;
  z-index: 20;
  margin-bottom: 1.125rem;
}

.bb-b2c-detail-anchor-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.625rem;
  background-color: color-mix(in srgb, var(--bb-body-bg) 96%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  scrollbar-width: thin;
}

.bb-b2c-detail-anchor-link {
  min-height: 2.625rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bb-secondary-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid transparent;
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-b2c-detail-anchor-link:hover {
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border-color: var(--bb-border-color);
}

.bb-b2c-detail-anchor-link.is-active {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  box-shadow: inset 0 -2px 0 var(--bb-primary);
}

/* Feature card */
.bb-b2c-detail-feature-card {
  overflow: hidden;
  padding: 1.25rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 3%, var(--bb-surface-elevated)) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-detail-feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2c-detail-feature-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  margin-bottom: 0.625rem;
  padding: 0 0.625rem;
  color: var(--bb-success);
  background-color: var(--bb-success-light);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-b2c-detail-feature-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-detail-feature-title {
  margin: 0 0 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-detail-feature-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-detail-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-detail-feature-item {
  display: grid;
  grid-template-columns: 10.625rem minmax(0, 1fr);
  min-height: 3.625rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-detail-feature-item:nth-child(odd) {
  border-right: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-detail-feature-item.is-hidden {
  display: none;
}

.bb-b2c-detail-feature-name {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-detail-feature-value {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-detail-feature-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.125rem;
}

.bb-b2c-detail-feature-toggle {
  min-height: 2.875rem;
  padding: 0 1.125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-detail-feature-toggle:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-detail-feature-toggle .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Drawers */
.bb-b2c-product-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: color-mix(in srgb, var(--bb-coal-300) 42%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast);
}

.bb-b2c-product-drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bb-b2c-product-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1050;
  width: 26.25rem;
  max-width: calc(100vw - 1.5rem);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
  box-shadow: -1.125rem 0 2.375rem color-mix(in srgb, var(--bb-coal-300) 18%, transparent);
  transform: translateX(105%);
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-product-drawer.is-active {
  transform: translateX(0);
}

.bb-b2c-product-drawer-head {
  min-height: 4.5rem;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-product-drawer-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6875rem;
}

.bb-b2c-product-drawer-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-b2c-product-drawer-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-product-drawer-title h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-product-drawer-title small {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-product-drawer-close {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
}

.bb-b2c-product-drawer-close:hover {
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-product-drawer-close .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-product-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.bb-b2c-product-drawer-section {
  margin-bottom: 1.25rem;
}

.bb-b2c-product-drawer-section h4 {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-product-drawer-section p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-product-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.bb-b2c-product-drawer-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-table-line-height);
}

.bb-b2c-product-drawer-list li .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-success);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-product-drawer-note {
  margin-top: 1rem;
  padding: 0.8125rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-table-line-height);
}

.bb-b2c-product-drawer-footer {
  padding: 1rem 1.25rem;
  background-color: var(--bb-body-bg);
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-product-drawer-action {
  width: 100%;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-primary);
  border: none;
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-product-drawer-action:hover {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-coal-300));
}

body.bb-b2c-drawer-open {
  overflow: hidden;
}

/* Size guide */
.bb-b2c-size-guide-drawer {
  width: 40rem;
  max-width: calc(100vw - 1.75rem);
}

.bb-b2c-size-guide-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-size-guide-table {
  width: 100%;
  min-width: 32.5rem;
  border-collapse: collapse;
}

.bb-b2c-size-guide-table th {
  padding: 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-align: left;
  white-space: nowrap;
}

.bb-b2c-size-guide-table td {
  padding: 0.75rem;
  color: var(--bb-emphasis-color);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.bb-b2c-size-guide-table tbody tr:last-child td {
  border-bottom: 0;
}

.bb-b2c-size-guide-measure-card {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.875rem;
  background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 32%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-size-guide-measure-icon {
  width: 2.625rem;
  height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-b2c-size-guide-measure-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-size-guide-measure-card strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-size-guide-measure-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Gallery modal */
.bb-b2c-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: none;
  background-color: var(--bb-body-bg);
}

.bb-b2c-gallery-modal.is-active {
  display: block;
}

.bb-b2c-gallery-modal-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 3.375rem minmax(0, 1fr);
}

.bb-b2c-gallery-modal-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3.75rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-gallery-modal-title {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
  text-align: center;
}

.bb-b2c-gallery-modal-close {
  position: absolute;
  top: 0.5625rem;
  right: 0.875rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
}

.bb-b2c-gallery-modal-close .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-gallery-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.625rem;
  gap: 0.75rem;
  padding: 0.625rem;
}

.bb-b2c-gallery-modal-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--bb-tertiary-bg) 0%, var(--bb-body-bg) 22%, var(--bb-body-bg) 78%, var(--bb-tertiary-bg) 100%);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-gallery-modal-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.125rem;
}

.bb-b2c-gallery-modal-side {
  min-width: 0;
  overflow-y: auto;
  padding: 0.75rem;
  border-left: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-gallery-modal-product-title {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-gallery-modal-meta {
  margin-bottom: 0.875rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-gallery-modal-description {
  margin-bottom: 0.875rem;
  padding: 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-gallery-modal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-b2c-gallery-modal-thumb {
  height: 4.875rem;
  overflow: hidden;
  padding: 0.375rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  cursor: pointer;
}

.bb-b2c-gallery-modal-thumb.is-active {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-b2c-gallery-modal-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2c-gallery-modal-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
}

.bb-b2c-gallery-modal-arrow.is-left {
  left: 1.125rem;
}

.bb-b2c-gallery-modal-arrow.is-right {
  right: 1.125rem;
}

.bb-b2c-gallery-modal-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

body.bb-b2c-gallery-open {
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2c-detail-main-grid {
    grid-template-columns: minmax(0, 1fr) 23.125rem;
  }
}
@media (max-width: 1199.98px) {
  .bb-b2c-detail-main-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-detail-buy-column {
    position: static;
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-detail-product-title {
    font-size: var(--bb-fs-2xl);
  }
  .bb-b2c-detail-feature-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-detail-feature-grid .bb-b2c-detail-feature-item:nth-child(odd) {
    border-right: 0;
  }
  .bb-b2c-detail-feature-item {
    grid-template-columns: 1fr;
  }
  .bb-b2c-detail-feature-name {
    padding-bottom: 0.375rem;
  }
  .bb-b2c-detail-feature-value {
    padding-top: 0;
    padding-bottom: 0.875rem;
  }
  .bb-b2c-gallery-modal-body {
    grid-template-columns: 1fr;
  }
  .bb-b2c-gallery-modal-side {
    max-height: 15.9375rem;
    border-left: 0;
    border-top: var(--bb-border-width) solid var(--bb-border-color);
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-detail-product-title {
    font-size: var(--bb-fs-xl);
  }
  .bb-b2c-detail-section-card,
  .bb-b2c-detail-component-shell,
  .bb-b2c-detail-feature-card {
    padding: 1rem;
    border-radius: var(--bb-radius);
  }
  .bb-b2c-buy-store {
    grid-template-columns: 1fr;
    padding-bottom: 1.25rem;
  }
  .bb-b2c-buy-store-action-row {
    position: static;
    margin-top: 0.75rem;
  }
  .bb-b2c-buy-store-logo {
    width: 3.5rem;
    height: 3.5rem;
  }
  .bb-b2c-buy-store-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-buy-store-name {
    white-space: normal;
  }
  .bb-b2c-buy-price-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-gallery-modal-body {
    padding: 0.375rem;
  }
  .bb-b2c-gallery-modal-stage {
    border-radius: var(--bb-radius);
  }
  .bb-b2c-gallery-modal-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-b2c-gallery-modal-thumb {
    height: 4.125rem;
  }
  .bb-b2c-size-guide-drawer,
  .bb-b2c-product-drawer {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-detail-product-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-b2c-product-drawer-head,
  .bb-b2c-product-drawer-body,
  .bb-b2c-product-drawer-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .bb-b2c-buy-price {
    font-size: var(--bb-icon-size-2xl);
  }
}
/* -------------------------------------
   Section shell
------------------------------------- */
.bb-b2c-history-products-shell {
  padding: 1.375rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

/* -------------------------------------
   Product grid
------------------------------------- */
.bb-b2c-history-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-b2c-history-product-box {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-history-product-box:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
  transform: translateY(-2px);
}

/* -------------------------------------
   Pager
------------------------------------- */
.bb-b2c-history-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-history-pagination-left {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-history-pagination-right .pagination {
  gap: 0.5rem;
}

.bb-b2c-history-pagination-right .page-link {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius) !important;
  box-shadow: none;
}

.bb-b2c-history-pagination-right .page-link .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-history-pagination-right .page-item.active .page-link {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-b2c-history-pagination-right .page-link:hover {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
}

/* -------------------------------------
   Empty state
------------------------------------- */
.bb-b2c-history-empty {
  padding: 2.125rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-history-empty-icon {
  width: 4.625rem;
  height: 4.625rem;
  margin-bottom: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-history-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-history-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-history-empty p {
  max-width: 36rem;
  margin: 0.75rem auto 1.25rem;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-history-empty-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0 1.125rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-history-empty-link:hover {
  color: var(--bb-primary-inverse) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-dark));
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1399.98px) {
  .bb-b2c-history-products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2c-history-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-history-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-history-products-shell {
    padding: 1rem;
  }
  .bb-b2c-history-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .bb-b2c-history-pagination-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-b2c-history-pagination-left {
    text-align: center;
  }
  .bb-b2c-history-pagination-right .pagination {
    justify-content: center;
  }
  .bb-b2c-history-empty {
    padding: 1.5rem;
  }
}
/* =====================================
   B2C - Product Category Deals Of The Day
   Component-specific
===================================== */
.bb-b2c-category-deals {
  margin-top: 1.125rem;
}

.bb-b2c-category-deals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

.bb-b2c-category-deals-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 410px;
  overflow: hidden;
  color: inherit;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-category-deals-card:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
  transform: translateY(-2px);
}

/* -------------------------------------
   Media
------------------------------------- */
.bb-b2c-category-deals-media {
  position: relative;
  height: 215px;
  overflow: hidden;
  padding: 1rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-category-deals-media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.bb-b2c-category-deals-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--bb-radius);
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-category-deals-card:hover .bb-b2c-category-deals-media img {
  transform: scale(1.035);
}

/* -------------------------------------
   Favorite
------------------------------------- */
.bb-b2c-category-deals-favorite {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 78%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-category-deals-favorite:hover {
  color: var(--bb-danger) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  border-color: color-mix(in srgb, var(--bb-danger) 18%, var(--bb-border-color));
}

.bb-b2c-category-deals-favorite .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* -------------------------------------
   Quickbar
------------------------------------- */
.bb-b2c-category-deals-quickbar {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 82%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  opacity: 0;
  transform: translateY(8px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-category-deals-card:hover .bb-b2c-category-deals-quickbar {
  opacity: 1;
  transform: translateY(0);
}

.bb-b2c-category-deals-quickbar:hover {
  background-color: var(--bb-surface-elevated);
}

.bb-b2c-category-deals-quickbar .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* -------------------------------------
   Body
------------------------------------- */
.bb-b2c-category-deals-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.875rem;
}

.bb-b2c-category-deals-title-link {
  color: inherit !important;
  text-decoration: none !important;
}

.bb-b2c-category-deals-title {
  display: -webkit-box;
  min-height: 2.55rem;
  max-height: 2.55rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  transition: color var(--bb-transition-fast);
}

.bb-b2c-category-deals-title-link:hover .bb-b2c-category-deals-title {
  color: var(--bb-primary);
}

/* -------------------------------------
   Price
------------------------------------- */
.bb-b2c-category-deals-price {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-category-deals-price-main {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1875rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2c-category-deals-price-currency {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-category-deals-price-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Actions
------------------------------------- */
.bb-b2c-category-deals-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-category-deals-actions .btn {
  min-height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2c-category-deals-primary {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.bb-b2c-category-deals-secondary {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-category-deals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-category-deals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-category-deals-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-category-deals-card {
    min-height: auto;
  }
  .bb-b2c-category-deals-quickbar {
    opacity: 1;
    transform: none;
  }
}
/* =====================================
   B2C Sponsored Adverts
   Component-specific
===================================== */
.bb-b2c-sponsored-adverts {
  margin-top: 1.125rem;
}

.bb-b2c-sponsored-adverts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Quickbar */
.bb-b2c-sponsored-adverts-quickbar {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 82%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  opacity: 0;
  transform: translateY(8px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-sponsored-adverts-quickbar:hover {
  background-color: var(--bb-surface-elevated);
}

.bb-b2c-sponsored-adverts-quickbar .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-sponsored-adverts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-sponsored-adverts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-sponsored-adverts-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-sponsored-adverts-quickbar {
    opacity: 1;
    transform: none;
  }
}
/* =====================================
   Bulbulustur Web - Search Results Page
   Layer: pages/search/_search-result.scss

   Purpose:
   - Global search result page
   - Mode-aware B2B / B2C product result blocks
   - Supplier / brand / category result blocks
   - Search refine form
   - Result type tabs

   Rules:
   - Layout: _Layout.cshtml
   - Token based
   - Light / Navy / Dark safe
   - No raw hex / rgba
   - No fallback color
   - Responsive at bottom
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-search-page-bg: color-mix(in srgb, var(--bb-tertiary-bg) 58%, var(--bb-body-bg));
  --bb-search-surface: var(--bb-body-bg);
  --bb-search-surface-soft: var(--bb-tertiary-bg);
  --bb-search-surface-elevated: var(--bb-surface-elevated);
  --bb-search-heading: var(--bb-emphasis-color);
  --bb-search-text: var(--bb-body-color);
  --bb-search-muted: var(--bb-secondary-color);
  --bb-search-subtle: var(--bb-tertiary-color);
  --bb-search-border: var(--bb-border-color);
  --bb-search-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-search-border-muted: color-mix(in srgb, var(--bb-border-color) 66%, transparent);
  --bb-search-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-search-accent: var(--bb-primary);
  --bb-search-accent-hover: var(--bb-primary-hover);
  --bb-search-accent-soft: var(--bb-primary-light);
  --bb-search-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-search-accent-inverse: var(--bb-primary-inverse);
  --bb-search-b2b-accent: var(--bb-color-blue-600);
  --bb-search-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-600) 11%, var(--bb-body-bg));
  --bb-search-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-700) 74%, var(--bb-emphasis-color));
  --bb-search-success: var(--bb-success);
  --bb-search-success-soft: color-mix(in srgb, var(--bb-success) 11%, var(--bb-body-bg));
  --bb-search-success-text: color-mix(in srgb, var(--bb-success) 76%, var(--bb-emphasis-color));
  --bb-search-info: var(--bb-info);
  --bb-search-info-soft: color-mix(in srgb, var(--bb-info) 10%, var(--bb-body-bg));
  --bb-search-info-text: color-mix(in srgb, var(--bb-info) 74%, var(--bb-emphasis-color));
  --bb-search-head-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 4% 100%,
          color-mix(in srgb, var(--bb-search-b2b-accent) 10%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          var(--bb-surface-elevated) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)) 100%
      );
  --bb-search-card-bg: color-mix(in srgb, var(--bb-surface-elevated) 96%, var(--bb-body-bg));
  --bb-search-card-bg-soft: color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg));
  --bb-search-shadow-xs: var(--bb-shadow-xs);
  --bb-search-shadow-sm: var(--bb-shadow-sm);
  --bb-search-shadow-lg: var(--bb-shadow-lg);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-search-page-bg: color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-surface-elevated));
  --bb-search-surface: var(--bb-surface-elevated);
  --bb-search-surface-soft: var(--bb-surface-soft);
  --bb-search-surface-elevated: var(--bb-surface-elevated);
  --bb-search-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-search-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-search-border-muted: color-mix(in srgb, var(--bb-border-color) 64%, transparent);
  --bb-search-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-search-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-search-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-search-b2b-accent: var(--bb-color-blue-500);
  --bb-search-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 14%, var(--bb-body-bg));
  --bb-search-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 88%, var(--bb-emphasis-color));
  --bb-search-success-soft: color-mix(in srgb, var(--bb-success) 14%, var(--bb-body-bg));
  --bb-search-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-search-info-soft: color-mix(in srgb, var(--bb-info) 13%, var(--bb-body-bg));
  --bb-search-info-text: color-mix(in srgb, var(--bb-info) 86%, var(--bb-emphasis-color));
  --bb-search-head-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-primary) 17%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 4% 100%,
          color-mix(in srgb, var(--bb-search-b2b-accent) 12%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          var(--bb-surface-elevated) 0%,
          color-mix(in srgb, var(--bb-surface-soft) 78%, var(--bb-body-bg)) 100%
      );
  --bb-search-card-bg: var(--bb-surface-elevated);
  --bb-search-card-bg-soft: color-mix(in srgb, var(--bb-surface-soft) 82%, var(--bb-body-bg));
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-search-page-bg: color-mix(in srgb, var(--bb-body-bg) 84%, var(--bb-surface-elevated));
  --bb-search-surface: var(--bb-surface-elevated);
  --bb-search-surface-soft: var(--bb-surface-soft);
  --bb-search-surface-elevated: var(--bb-surface-elevated);
  --bb-search-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-search-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-search-border-muted: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  --bb-search-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-search-accent-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-search-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-search-b2b-accent: var(--bb-color-blue-500);
  --bb-search-b2b-accent-soft: color-mix(in srgb, var(--bb-color-blue-500) 13%, var(--bb-body-bg));
  --bb-search-b2b-accent-text: color-mix(in srgb, var(--bb-color-blue-400) 86%, var(--bb-emphasis-color));
  --bb-search-success-soft: color-mix(in srgb, var(--bb-success) 13%, var(--bb-body-bg));
  --bb-search-success-text: color-mix(in srgb, var(--bb-success) 84%, var(--bb-emphasis-color));
  --bb-search-info-soft: color-mix(in srgb, var(--bb-info) 12%, var(--bb-body-bg));
  --bb-search-info-text: color-mix(in srgb, var(--bb-info) 84%, var(--bb-emphasis-color));
  --bb-search-head-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-primary) 15%, transparent),
          transparent 18rem
      ),
      radial-gradient(
          circle at 4% 100%,
          color-mix(in srgb, var(--bb-search-b2b-accent) 10%, transparent),
          transparent 16rem
      ),
      linear-gradient(
          135deg,
          var(--bb-surface-elevated) 0%,
          color-mix(in srgb, var(--bb-surface-soft) 76%, var(--bb-body-bg)) 100%
      );
  --bb-search-card-bg: var(--bb-surface-elevated);
  --bb-search-card-bg-soft: color-mix(in srgb, var(--bb-surface-soft) 80%, var(--bb-body-bg));
}

/* =====================================
   Page Scope
===================================== */
.bb-search-page {
  min-width: 0;
  color: var(--bb-search-text);
  background-color: var(--bb-search-page-bg);
}

.bb-search-page .bb-wrapper {
  background-color: var(--bb-search-page-bg);
}

.bb-search-page .material-symbols-outlined {
  line-height: 1;
}

.bb-search-page a,
.bb-search-page button,
.bb-search-page input,
.bb-search-page select {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal), opacity var(--bb-transition-normal);
}

/* =====================================
   Head
===================================== */
.bb-search-head-section {
  padding-bottom: 1rem;
}

.bb-search-head-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bb-search-head-bg);
  border: var(--bb-border-width) solid var(--bb-search-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-search-shadow-sm);
}

.bb-search-head-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 13rem;
  height: 13rem;
  background-color: color-mix(in srgb, var(--bb-search-accent) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-search-head-copy,
.bb-search-head-summary {
  position: relative;
  z-index: 2;
}

.bb-search-head-copy {
  min-width: 0;
}

.bb-search-head-chip {
  margin-bottom: 0.875rem;
  color: var(--bb-search-accent-text) !important;
  background-color: var(--bb-search-accent-soft) !important;
  border-color: var(--bb-search-border-accent);
}

.bb-search-head-chip .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
}

.bb-search-title {
  max-width: 58rem;
  margin: 0;
  color: var(--bb-search-heading);
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.06;
  letter-spacing: -0.052em;
  overflow-wrap: anywhere;
}

.bb-search-text {
  max-width: 54rem;
  margin: 0.75rem 0 0;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-search-total-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--bb-search-surface) 90%, transparent);
  border: var(--bb-border-width) solid var(--bb-search-border-soft);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-search-shadow-xs);
}

.bb-search-total-card > .material-symbols-outlined {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-search-accent-text);
  background-color: var(--bb-search-accent-soft);
  border: var(--bb-border-width) solid var(--bb-search-border-accent);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-icon-size-xl);
}

.bb-search-total-card strong {
  display: block;
  color: var(--bb-search-heading);
  font-size: clamp(1.35rem, 2vw, 1.875rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
}

.bb-search-total-card span {
  display: block;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Refine Form
===================================== */
.bb-search-refine-section {
  padding-bottom: 1rem;
}

.bb-search-refine-card {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(11rem, 0.25fr) minmax(10rem, 0.22fr) auto;
  gap: 0.875rem;
  align-items: end;
  padding: 1rem;
  background-color: var(--bb-search-surface);
  border: var(--bb-border-width) solid var(--bb-search-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-search-shadow-xs);
}

.bb-search-refine-field {
  min-width: 0;
}

.bb-search-refine-field label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-search-refine-input-wrap {
  min-height: 2.875rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  background-color: var(--bb-search-surface-soft);
  border: var(--bb-border-width) solid var(--bb-search-border);
  border-radius: var(--bb-radius-pill);
}

.bb-search-refine-input-wrap:focus-within {
  background-color: var(--bb-search-surface);
  border-color: var(--bb-search-border-accent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bb-search-accent) 9%, transparent);
}

.bb-search-refine-input-wrap .material-symbols-outlined {
  justify-self: center;
  color: var(--bb-search-muted);
  font-size: var(--bb-icon-size-md);
}

.bb-search-refine-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 0.875rem 0 0;
  color: var(--bb-search-heading);
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-search-refine-input-wrap input::placeholder {
  color: var(--bb-search-subtle);
}

.bb-search-refine-select {
  min-height: 2.875rem;
  color: var(--bb-search-heading);
  background-color: var(--bb-search-surface-soft);
  border-color: var(--bb-search-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-search-refine-select:focus {
  border-color: var(--bb-search-border-accent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bb-search-accent) 9%, transparent);
}

.bb-search-refine-action {
  min-width: 0;
}

.bb-search-refine-submit {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding-inline: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-search-refine-submit .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

/* =====================================
   Result Tabs
===================================== */
.bb-search-tabs-section {
  padding-bottom: 1rem;
}

.bb-search-tabs-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0.625rem;
  background-color: color-mix(in srgb, var(--bb-search-surface) 96%, transparent);
  border: var(--bb-border-width) solid var(--bb-search-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-search-shadow-xs);
  scrollbar-width: thin;
}

.bb-search-tabs-card::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-search-tabs-card::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-search-accent) 26%, var(--bb-search-border));
  border-radius: var(--bb-radius-pill);
}

.bb-search-tab {
  flex: 0 0 auto;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-search-heading);
  background-color: var(--bb-search-surface);
  border: var(--bb-border-width) solid var(--bb-search-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-search-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.bb-search-tab:hover,
.bb-search-tab:focus {
  color: var(--bb-search-accent-text);
  background-color: var(--bb-search-accent-soft);
  border-color: var(--bb-search-border-accent);
}

.bb-search-tab.active {
  color: var(--bb-search-accent-inverse);
  background-color: var(--bb-search-accent);
  border-color: var(--bb-search-accent);
  box-shadow: var(--bb-search-shadow-sm);
}

.bb-search-tab .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-search-tab strong {
  min-width: 1.625rem;
  height: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.375rem;
  color: var(--bb-search-heading);
  background-color: var(--bb-search-surface-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-extrabold);
}

.bb-search-tab.active strong {
  color: var(--bb-search-accent);
  background-color: var(--bb-search-accent-inverse);
}

/* =====================================
   Results Layout
===================================== */
.bb-search-results-section {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.bb-search-results-layout {
  display: grid;
  gap: 1.25rem;
}

.bb-search-result-block {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.375rem);
  background-color: var(--bb-search-surface);
  border: var(--bb-border-width) solid var(--bb-search-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-search-shadow-sm);
}

.bb-search-result-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-search-border-soft);
}

.bb-search-result-block-head > div {
  min-width: 0;
}

.bb-search-result-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.875rem;
  margin-bottom: 0.5rem;
  padding: 0 0.625rem;
  color: var(--bb-search-accent-text);
  background-color: var(--bb-search-accent-soft);
  border: var(--bb-border-width) solid var(--bb-search-border-accent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-search-result-block-head h2 {
  margin: 0;
  color: var(--bb-search-heading);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.04em;
}

.bb-search-result-block-head p {
  max-width: 48rem;
  margin: 0.375rem 0 0;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-search-deep-link {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-search-deep-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

/* =====================================
   Product Grids
===================================== */
.bb-search-product-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

.bb-search-product-grid.is-b2c {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bb-search-product-grid.is-b2b {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bb-search-product-grid > * {
  min-width: 0;
}

.bb-search-product-grid .bb-product-card {
  height: 100%;
}

/* =====================================
   Supplier Cards
===================================== */
.bb-search-supplier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-search-supplier-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2rem;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  color: var(--bb-search-heading);
  background-color: var(--bb-search-card-bg);
  border: var(--bb-border-width) solid var(--bb-search-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-search-shadow-xs);
  text-decoration: none !important;
}

.bb-search-supplier-card:hover,
.bb-search-supplier-card:focus {
  color: var(--bb-search-heading);
  border-color: var(--bb-search-border-accent);
  box-shadow: var(--bb-search-shadow-sm);
  transform: translateY(-0.125rem);
}

.bb-search-supplier-logo {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--bb-search-b2b-accent-text);
  background-color: var(--bb-search-b2b-accent-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-search-b2b-accent) 24%, var(--bb-search-border));
  border-radius: var(--bb-radius-lg);
}

.bb-search-supplier-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-search-supplier-logo .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
}

.bb-search-supplier-copy {
  min-width: 0;
}

.bb-search-supplier-copy strong {
  display: block;
  color: var(--bb-search-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  overflow-wrap: anywhere;
}

.bb-search-supplier-copy span {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-search-card-arrow {
  color: var(--bb-search-muted);
  font-size: var(--bb-icon-size-md);
}

/* =====================================
   Brand Cards
===================================== */
.bb-search-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-search-brand-card {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 0.625rem;
  min-height: 11rem;
  padding: 1rem;
  color: var(--bb-search-heading);
  background-color: var(--bb-search-card-bg);
  border: var(--bb-border-width) solid var(--bb-search-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-search-shadow-xs);
  text-align: center;
  text-decoration: none !important;
}

.bb-search-brand-card:hover,
.bb-search-brand-card:focus {
  color: var(--bb-search-heading);
  border-color: var(--bb-search-border-accent);
  box-shadow: var(--bb-search-shadow-sm);
  transform: translateY(-0.125rem);
}

.bb-search-brand-logo {
  width: 5rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--bb-search-success-text);
  background-color: var(--bb-search-success-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-search-success) 20%, var(--bb-search-border));
  border-radius: var(--bb-radius-lg);
}

.bb-search-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bb-search-brand-logo .material-symbols-outlined {
  font-size: var(--bb-icon-size-xl);
}

.bb-search-brand-card strong {
  display: block;
  color: var(--bb-search-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-search-brand-card > span:not(.material-symbols-outlined) {
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Category Cards
===================================== */
.bb-search-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-search-category-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  color: var(--bb-search-heading);
  background-color: var(--bb-search-card-bg);
  border: var(--bb-border-width) solid var(--bb-search-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-search-shadow-xs);
  text-decoration: none !important;
}

.bb-search-category-card:hover,
.bb-search-category-card:focus {
  color: var(--bb-search-heading);
  border-color: var(--bb-search-border-accent);
  box-shadow: var(--bb-search-shadow-sm);
  transform: translateY(-0.125rem);
}

.bb-search-category-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-search-info-text);
  background-color: var(--bb-search-info-soft);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-search-info) 20%, var(--bb-search-border));
  border-radius: var(--bb-radius-lg);
}

.bb-search-category-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
}

.bb-search-category-card strong {
  display: block;
  color: var(--bb-search-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  overflow-wrap: anywhere;
}

.bb-search-category-card > span:not(.bb-search-category-icon) {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

/* =====================================
   Empty State
===================================== */
.bb-search-empty {
  min-height: 24rem;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background-color: var(--bb-search-surface);
  border: var(--bb-border-width) solid var(--bb-search-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-search-shadow-sm);
}

.bb-search-empty-icon {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-search-accent-text);
  background-color: var(--bb-search-accent-soft);
  border: var(--bb-border-width) solid var(--bb-search-border-accent);
  border-radius: var(--bb-radius-2xl);
}

.bb-search-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
}

.bb-search-empty-copy {
  min-width: 0;
}

.bb-search-empty-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  margin-bottom: 0.75rem;
  padding: 0 0.625rem;
  color: var(--bb-search-accent-text);
  background-color: var(--bb-search-accent-soft);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-search-empty h2 {
  max-width: 40rem;
  margin: 0;
  color: var(--bb-search-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.045em;
}

.bb-search-empty p {
  max-width: 44rem;
  margin: 0.75rem 0 0;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-search-empty ul {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  color: var(--bb-search-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-search-empty li::marker {
  color: var(--bb-search-accent);
}

.bb-search-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bb-search-empty-actions .btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* =====================================
   Product Card Safety
===================================== */
.bb-search-page .bb-product-card {
  min-width: 0;
}

.bb-search-page .bb-product-card-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-search-page .bb-product-card-image-frame img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-search-refine-card {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.35fr) minmax(10rem, 0.35fr);
  }
  .bb-search-refine-action {
    grid-column: 1/-1;
  }
  .bb-search-refine-submit {
    width: 100%;
  }
  .bb-search-product-grid.is-b2c,
  .bb-search-product-grid.is-b2b {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-search-brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-search-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-search-head-card {
    grid-template-columns: 1fr;
  }
  .bb-search-head-summary {
    max-width: 22rem;
  }
  .bb-search-refine-card {
    grid-template-columns: 1fr;
  }
  .bb-search-result-block-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-search-deep-link {
    width: fit-content;
  }
  .bb-search-product-grid.is-b2c,
  .bb-search-product-grid.is-b2b {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-search-supplier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-search-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-search-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-search-head-card,
  .bb-search-refine-card,
  .bb-search-tabs-card,
  .bb-search-result-block,
  .bb-search-empty {
    border-radius: var(--bb-radius-xl);
  }
  .bb-search-title {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
  }
  .bb-search-tabs-card {
    padding: 0.5rem;
  }
  .bb-search-tab {
    min-height: 2.5rem;
    padding: 0.5625rem 0.75rem;
  }
  .bb-search-empty {
    grid-template-columns: 1fr;
  }
  .bb-search-empty-icon {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--bb-radius-xl);
  }
}
@media (max-width: 575.98px) {
  .bb-search-product-grid.is-b2c,
  .bb-search-product-grid.is-b2b,
  .bb-search-supplier-grid,
  .bb-search-brand-grid,
  .bb-search-category-grid {
    grid-template-columns: 1fr;
  }
  .bb-search-head-card,
  .bb-search-result-block {
    padding: 1rem;
  }
  .bb-search-total-card {
    grid-template-columns: 2.875rem minmax(0, 1fr);
  }
  .bb-search-total-card > .material-symbols-outlined {
    width: 2.875rem;
    height: 2.875rem;
  }
  .bb-search-supplier-card {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .bb-search-card-arrow {
    display: none;
  }
  .bb-search-supplier-logo {
    width: 3.5rem;
    height: 3.5rem;
  }
  .bb-search-brand-card {
    min-height: 9.5rem;
  }
  .bb-search-empty-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-search-empty-actions .btn {
    width: 100%;
  }
}
.bb-b2c-deals-shell {
  padding: 1.375rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-deals-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.bb-b2c-deals-section-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-b2c-deals-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.bb-b2c-deals-section-text {
  max-width: 53.75rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

/* Grid */
.bb-b2c-deals-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Pager */
.bb-b2c-deals-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-deals-pager-info {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* Empty */
.bb-b2c-deals-empty {
  padding: 2.125rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-deals-empty-symbol {
  margin-bottom: 1.125rem;
}

.bb-b2c-deals-empty-symbol .bb-symbol-label {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

.bb-b2c-deals-empty-symbol .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-deals-empty-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-deals-empty-text {
  max-width: 36rem;
  margin: 0.75rem auto 1.25rem;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-loose);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2c-deals-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2c-deals-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-deals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-deals-page {
    padding-bottom: 3rem;
  }
  .bb-b2c-deals-shell {
    padding: 1rem;
  }
  .bb-b2c-deals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .bb-b2c-deals-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-b2c-deals-pager-info {
    text-align: center;
  }
  .bb-b2c-deals-pager .bb-pagination {
    justify-content: center;
  }
  .bb-b2c-deals-empty {
    padding: 1.5rem;
  }
}
/* =====================================
   B2C Product Category Contents
   Component-specific
===================================== */
.bb-b2c-category-contents {
  margin-top: 1.125rem;
}

.bb-b2c-category-contents-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-category-contents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-category-contents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-category-contents-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-category-contents-quickbar {
    opacity: 1;
    transform: none;
  }
}
/* =====================================
   B2C Product Category Brands
   Component-specific
===================================== */
.bb-b2c-category-brands {
  padding: 1.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated)) 0%, var(--bb-body-bg) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

/* -------------------------------------
   Head
------------------------------------- */
.bb-b2c-category-brands-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.375rem;
}

.bb-b2c-category-brands-label {
  display: inline-block;
  margin-bottom: 0.7rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-b2c-category-brands-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.bb-b2c-category-brands-text {
  max-width: 53.75rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-category-brands-count {
  min-height: 2.25rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* -------------------------------------
   Grid
------------------------------------- */
.bb-b2c-category-brands-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2c-category-brands-card {
  position: relative;
  min-width: 0;
  min-height: 6.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.125rem;
  color: inherit;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-category-brands-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 5%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bb-transition-fast);
}

.bb-b2c-category-brands-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-category-brands-card:hover::before {
  opacity: 1;
}

/* -------------------------------------
   Logo
------------------------------------- */
.bb-b2c-category-brands-logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 3.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-category-brands-logo img {
  display: block;
  max-width: 100%;
  max-height: 3.625rem;
  object-fit: contain;
  opacity: 0.9;
  filter: grayscale(12%);
  transition: opacity var(--bb-transition-fast), filter var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-category-brands-card:hover .bb-b2c-category-brands-logo img {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.045);
}

.bb-b2c-category-brands-empty-logo {
  width: 3.625rem;
  height: 3.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-category-brands-empty-logo .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

/* -------------------------------------
   Name
------------------------------------- */
.bb-b2c-category-brands-name {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.5625rem;
  z-index: 3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: var(--bb-secondary-color);
  text-align: center;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-category-brands-card:hover .bb-b2c-category-brands-name {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-category-brands-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-category-brands-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-category-brands {
    padding: 1rem;
  }
  .bb-b2c-category-brands-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .bb-b2c-category-brands-card {
    min-height: 5.875rem;
    padding: 0.875rem;
    border-radius: var(--bb-radius);
  }
  .bb-b2c-category-brands-logo {
    height: 3.375rem;
  }
  .bb-b2c-category-brands-logo img {
    max-height: 3.125rem;
  }
}
/* =====================================
   B2C Homepage Banner Type 2
   Component-specific
===================================== */
.bb-home-banner-type2 {
  position: relative;
  z-index: 3;
  padding: 0.875rem 1.875rem;
  color: var(--bb-white);
  color: var(--bb-white);
}

.bb-home-banner-type2-row {
  min-height: 4.875rem;
}

/* -------------------------------------
   Left / Badge
------------------------------------- */
.bb-home-banner-type2-left,
.bb-home-banner-type2-center,
.bb-home-banner-type2-right {
  height: 100%;
}

.bb-home-banner-type2-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bb-home-banner-type2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.bb-home-banner-type2-badge img {
  display: block;
  width: auto;
  max-height: 3.5rem;
  object-fit: contain;
}

/* -------------------------------------
   Center
------------------------------------- */
.bb-home-banner-type2-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.bb-home-banner-type2-title {
  max-width: 100%;
  margin: 0 0 0.25rem;
  overflow: hidden;
  color: currentColor;
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-home-banner-type2-subtitle {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, currentColor 92%, transparent);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------
   Right / Button
------------------------------------- */
.bb-home-banner-type2-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bb-home-banner-type2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary);
  border: 0;
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-semibold);
  transition: background-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-home-banner-type2-btn:hover {
  color: var(--bb-primary-inverse) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-white));
  transform: translateY(-1px);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-home-banner-type2 {
    padding: 0.75rem 1.125rem;
  }
  .bb-home-banner-type2-row {
    min-height: auto;
  }
  .bb-home-banner-type2-badge img {
    max-height: 3rem;
  }
  .bb-home-banner-type2-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-home-banner-type2-subtitle {
    font-size: var(--bb-fs-xs);
  }
  .bb-home-banner-type2-btn {
    min-width: 6.75rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    font-size: var(--bb-fs-sm);
  }
}
@media (max-width: 767.98px) {
  .bb-home-banner-type2-left,
  .bb-home-banner-type2-center,
  .bb-home-banner-type2-right {
    justify-content: center;
    text-align: center;
  }
  .bb-home-banner-type2-title,
  .bb-home-banner-type2-subtitle {
    overflow: visible;
    text-overflow: initial;
    white-space: normal;
  }
  .bb-home-banner-type2-btn {
    width: 100%;
    min-width: 0;
  }
}
/* -------------------------------------
   Shared Stage / Carrier
   Sayfadaki componentler bunun içine yerleşir.
------------------------------------- */
.bb-b2c-category-stage {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-category-stage > * {
  position: relative;
  z-index: 2;
}

.bb-b2c-category-stage--plain {
  background-color: var(--bb-body-bg);
}

.bb-b2c-category-stage--peach {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-b2c-category-stage--deal {
  background: radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--bb-primary) 6%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-b2c-category-stage--green {
  background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--bb-success) 11%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--bb-success) 5%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-b2c-category-stage--sky {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-info) 10%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-info) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-b2c-category-stage--purple {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-color-purple-500) 9%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-color-purple-500) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-b2c-category-stage--soft {
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
}

.bb-b2c-category-stage--grid::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 9.375rem;
  background-image: linear-gradient(color-mix(in srgb, var(--bb-coal-300) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bb-coal-300) 4%, transparent) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), transparent 82%);
  pointer-events: none;
}

/* -------------------------------------
   Component Hosts
   Componentlerin sayfa sahnesine düzgün oturması için.
------------------------------------- */
.bb-b2c-category-component-host {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bb-b2c-category-component-host--spaced {
  margin-top: 0.5rem;
}

.bb-b2c-category-component-host--content-groups {
  display: block;
}

.bb-b2c-category-component-host--after-head {
  margin-top: 1.5rem;
}

/* -------------------------------------
   Guide Wrappers
------------------------------------- */
.bb-b2c-category-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
  margin-top: 1.125rem;
}

.bb-b2c-category-guide-card {
  min-height: 100%;
  padding: 1.25rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-category-guide-card-top {
  width: 3.125rem;
  height: 3.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8125rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-category-guide-card-top .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-b2c-category-guide-card h3 {
  margin: 0 0 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.3;
}

.bb-b2c-category-guide-card p {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-category-desc {
  margin-top: 1.375rem;
  padding-top: 1.25rem;
  color: var(--bb-secondary-color);
  border-top: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.9;
}

/* -------------------------------------
   FAQ Intro
------------------------------------- */
.bb-b2c-category-faq-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.375rem;
}

.bb-b2c-category-faq-intro-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-category-faq-intro-icon {
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius);
}

.bb-b2c-category-faq-intro-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-category-faq-intro-card strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-category-faq-intro-card span {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-table-line-height);
}

.bb-b2c-category-faq-host {
  margin-top: 0.5rem;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-category-guide-grid,
  .bb-b2c-category-faq-intro-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-category-stage {
    padding: 1rem;
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   B2C Popular Product Categories
   Component-specific
===================================== */
.bb-b2c-popular-categories {
  position: relative;
}

.bb-b2c-popular-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

/* -------------------------------------
   Card
------------------------------------- */
.bb-b2c-popular-categories-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 16.375rem;
  overflow: hidden;
  color: inherit !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-popular-categories-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
  color: inherit !important;
}

/* -------------------------------------
   Media
------------------------------------- */
.bb-b2c-popular-categories-media {
  position: relative;
  height: 10.375rem;
  overflow: hidden;
  background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 4%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-popular-categories-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-popular-categories-card:hover .bb-b2c-popular-categories-media img {
  transform: scale(1.045);
}

/* -------------------------------------
   Placeholder
------------------------------------- */
.bb-b2c-popular-categories-placeholder {
  position: absolute;
  inset: 0;
  width: 4.75rem;
  height: 4.75rem;
  margin: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-popular-categories-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

/* -------------------------------------
   Content
------------------------------------- */
.bb-b2c-popular-categories-content {
  padding: 1.125rem 3.625rem 1.25rem 1.125rem;
}

.bb-b2c-popular-categories-content strong {
  display: -webkit-box;
  min-height: 2.875rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

.bb-b2c-popular-categories-content span {
  display: -webkit-box;
  min-height: 2.5rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-table-line-height);
}

/* -------------------------------------
   Arrow
------------------------------------- */
.bb-b2c-popular-categories-arrow {
  position: absolute;
  right: 1rem;
  bottom: 1.125rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-fast), background-color var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-b2c-popular-categories-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-popular-categories-card:hover .bb-b2c-popular-categories-arrow {
  transform: translateX(2px);
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-popular-categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-popular-categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2c-popular-categories-card {
    min-height: 15.375rem;
  }
  .bb-b2c-popular-categories-media {
    height: 9.5rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-popular-categories-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-popular-categories-card {
    min-height: 14.5rem;
  }
  .bb-b2c-popular-categories-media {
    height: 9.25rem;
  }
}
.bb-b2c-sponsored-highlights-products-shell {
  padding: 1.375rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

/* -------------------------------------
   Product grid
------------------------------------- */
.bb-b2c-sponsored-highlights-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.125rem;
}

/* -------------------------------------
   Pager
------------------------------------- */
.bb-b2c-sponsored-highlights-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-sponsored-highlights-pager-info {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-b2c-sponsored-highlights-empty {
  padding: 2.125rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-sponsored-highlights-empty-symbol {
  margin-bottom: 1.125rem;
}

.bb-b2c-sponsored-highlights-empty-symbol .bb-symbol-label {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

.bb-b2c-sponsored-highlights-empty-symbol .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-sponsored-highlights-empty-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-h3);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-sponsored-highlights-empty-text {
  max-width: 36rem;
  margin: 0.75rem auto 1.25rem;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-loose);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-sponsored-highlights-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-sponsored-highlights-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-sponsored-highlights-products-shell {
    padding: 1rem;
  }
  .bb-b2c-sponsored-highlights-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .bb-b2c-sponsored-highlights-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-b2c-sponsored-highlights-pager-info {
    text-align: center;
  }
  .bb-b2c-sponsored-highlights-pager .bb-pagination {
    justify-content: center;
  }
  .bb-b2c-sponsored-highlights-empty {
    padding: 1.5rem;
  }
}
.bb-b2c-offer-label {
  margin-bottom: 0.8125rem;
}

.bb-b2c-offer-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-offer-title {
  max-width: 49.375rem;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-b2c-offer-title span {
  color: var(--bb-success);
}

.bb-b2c-offer-subtitle {
  max-width: 47.5rem;
  margin: 0.6875rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Product summary */
.bb-b2c-offer-product-summary {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-sm);
  padding: 0.9375rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bb-b2c-offer-product-visual {
  position: relative;
  height: 11.125rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  background: radial-gradient(circle at 72% 15%, color-mix(in srgb, var(--bb-success) 18%, transparent), transparent 36%), linear-gradient(135deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-offer-product-visual img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  object-fit: contain;
}

.bb-b2c-offer-product-chip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

.bb-b2c-offer-product-name {
  margin: 0 0 0.75rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-offer-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.bb-b2c-offer-summary-metric {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  padding: 0.5625rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-b2c-offer-summary-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 22%, var(--bb-white)) 0%, color-mix(in srgb, var(--bb-success) 12%, var(--bb-white)) 100%);
  border-radius: var(--bb-radius);
}

.bb-b2c-offer-summary-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-offer-summary-metric strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-offer-summary-metric span span {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-offer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.625rem;
  gap: 1.5rem;
  align-items: start;
}

.bb-b2c-offer-left {
  min-width: 0;
}

.bb-b2c-offer-right {
  position: sticky;
  top: 1.375rem;
  min-width: 0;
}

.bb-b2c-offer-section {
  margin-bottom: 1.625rem;
}

.bb-b2c-offer-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.bb-b2c-offer-section-label {
  display: block;
  margin-bottom: 0.4375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.bb-b2c-offer-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-offer-section-text {
  margin: 0.3125rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Filter */
.bb-b2c-offer-filter-card {
  --bb-card-radius: var(--bb-radius-lg);
  --bb-card-shadow: var(--bb-shadow-xs);
  margin-bottom: 1rem;
  padding: 1rem;
}

.bb-b2c-offer-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5625rem;
}

.bb-b2c-offer-filter-btn {
  border-width: var(--bb-border-width);
}

/* Offer cards */
.bb-b2c-offer-list {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}

.bb-b2c-offer-list-card {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  position: relative;
  padding: 1.0625rem;
}

.bb-b2c-offer-list-card.is-best {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bb-success) 45%, var(--bb-border-color));
  background: radial-gradient(circle at 98% 12%, color-mix(in srgb, var(--bb-success) 18%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-success) 8%, var(--bb-white)) 100%);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-offer-list-card.is-best::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.125rem;
  bottom: 1.125rem;
  width: 0.25rem;
  background-color: var(--bb-success);
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-offer-list-badge {
  width: fit-content;
  margin-bottom: 0.625rem;
}

.bb-b2c-offer-store-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0.625rem;
}

.bb-b2c-offer-store-left {
  min-width: 0;
}

.bb-b2c-offer-store-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4375rem;
}

.bb-b2c-offer-store-name {
  color: var(--bb-emphasis-color) !important;
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  text-decoration: none !important;
}

.bb-b2c-offer-store-name:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-offer-store-logo {
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 2.625rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white)) 0%, color-mix(in srgb, var(--bb-success) 12%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-offer-store-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bb-secondary-color) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  white-space: nowrap;
}

.bb-b2c-offer-store-top-link:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-offer-store-top-link .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-offer-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.125rem;
  align-items: center;
}

.bb-b2c-offer-card-copy {
  min-width: 0;
}

.bb-b2c-offer-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5625rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-offer-price {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-3xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-b2c-offer-price-note {
  display: block;
  margin-top: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

.bb-b2c-offer-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  align-items: flex-end;
  min-width: 10.625rem;
}

.bb-b2c-offer-select-btn {
  min-width: 10rem;
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-offer-select-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Suggestion card */
.bb-b2c-shoe-guide-card {
  padding: 1.375rem;
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--bb-success) 16%, transparent), transparent 28%), radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-shoe-guide-head h2 {
  margin: 0.6875rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-shoe-guide-head p {
  max-width: 47.5rem;
  margin: 0.5rem 0 1.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-shoe-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-b2c-shoe-guide-item {
  min-width: 0;
  padding: 0.9375rem;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 86%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-shoe-guide-item > span {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6875rem;
  color: var(--bb-emphasis-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white)) 0%, color-mix(in srgb, var(--bb-success) 12%, var(--bb-white)) 100%);
  border-radius: var(--bb-radius);
}

.bb-b2c-shoe-guide-item .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-shoe-guide-item strong {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-shoe-guide-item small {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* Ad band */
.bb-b2c-offer-ad-band {
  position: relative;
  overflow: hidden;
  padding: 1.625rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bb-success) 18%, transparent), transparent 30%), radial-gradient(circle at 12% 90%, color-mix(in srgb, var(--bb-primary) 20%, transparent), transparent 28%), linear-gradient(135deg, var(--bb-dark) 0%, color-mix(in srgb, var(--bb-coal-300) 72%, var(--bb-success)) 56%, var(--bb-success) 100%);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-offer-ad-band-label {
  margin-bottom: 0.8125rem;
}

.bb-b2c-offer-ad-band h3 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-icon-size-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-offer-ad-band p {
  max-width: 43.125rem;
  margin: 0.625rem 0 1.1875rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-offer-ad-band .btn {
  min-height: 2.5625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Sidebar */
.bb-b2c-offer-request-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.25rem;
  color: var(--bb-white);
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--bb-success) 34%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 78%, var(--bb-success)) 0%, var(--bb-success) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 28%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-offer-request-card::after {
  content: "";
  position: absolute;
  right: -2.75rem;
  bottom: -3.625rem;
  width: 9.375rem;
  height: 9.375rem;
  background-color: color-mix(in srgb, var(--bb-primary) 20%, transparent);
  border-radius: 50%;
}

.bb-b2c-offer-request-card h3,
.bb-b2c-offer-request-card p,
.bb-b2c-offer-request-card a {
  position: relative;
  z-index: 2;
}

.bb-b2c-offer-request-card h3 {
  margin: 0;
  color: var(--bb-white);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-offer-request-card p {
  margin: 0.5625rem 0 1rem;
  color: color-mix(in srgb, var(--bb-white) 78%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-offer-request-btn {
  width: 100%;
  min-height: 2.6875rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-offer-request-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-offer-side-card {
  --bb-card-radius: var(--bb-radius-lg);
  --bb-card-shadow: var(--bb-shadow-xs);
  margin-bottom: 1rem;
  padding: 1.125rem;
}

.bb-b2c-offer-side-title {
  margin: 0 0 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-offer-side-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-offer-side-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.bb-b2c-offer-side-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.6875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-offer-side-icon {
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white)) 0%, color-mix(in srgb, var(--bb-success) 12%, var(--bb-white)) 100%);
  border-radius: var(--bb-radius);
}

.bb-b2c-offer-side-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-offer-side-item strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-offer-side-item span span {
  display: block;
  margin-top: 0.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Empty */
.bb-b2c-offer-empty {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  padding: 2.125rem;
  text-align: center;
}

.bb-b2c-offer-empty-icon {
  width: 3.625rem;
  height: 3.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-white));
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-offer-empty-icon .material-symbols-outlined {
  font-size: var(--bb-h3);
  line-height: 1;
}

.bb-b2c-offer-empty h1 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-offer-empty p {
  max-width: 35rem;
  margin: 0.625rem auto 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-offer-layout {
    grid-template-columns: 1fr;
  }
  .bb-b2c-offer-right {
    position: static;
  }
  .bb-b2c-shoe-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-offer-title {
    font-size: var(--bb-h3);
  }
  .bb-b2c-offer-subtitle {
    font-size: var(--bb-fs-sm);
  }
  .bb-b2c-offer-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-offer-card-main {
    grid-template-columns: 1fr;
  }
  .bb-b2c-offer-card-actions {
    align-items: stretch;
    min-width: 0;
  }
  .bb-b2c-offer-select-btn {
    width: 100%;
  }
  .bb-b2c-offer-store-line {
    align-items: flex-start;
  }
  .bb-b2c-offer-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.125rem;
  }
  .bb-b2c-offer-filter-btn {
    flex: 0 0 auto;
  }
  .bb-b2c-shoe-guide-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-offer-product-summary {
    display: none;
  }
}
/* =====================================
   B2C Special Page
   Scope: .bb-b2c-special-page

   Current View Structure:
   - .bb-wrapper.bb-b2c-special-page
   - .bb-hero
   - .bb-hero-grid
   - .bb-b2c-special-stage
   - .bb-b2c-special-products-shell
   - .bb-b2c-special-products-grid

   Rules:
   - Theme tokens at top
   - Panel-driven hero color remains supported
   - Product card styling comes from global .bb-product-card family
   - This file only controls page layout, shell, stage, hero, grid and pager
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-b2c-special-page-bg: var(--bb-body-bg);
  --bb-b2c-special-page-surface: var(--bb-body-bg);
  --bb-b2c-special-page-surface-soft: var(--bb-tertiary-bg);
  --bb-b2c-special-page-surface-elevated: var(--bb-surface-elevated);
  --bb-b2c-special-page-heading: var(--bb-emphasis-color);
  --bb-b2c-special-page-text: var(--bb-body-color);
  --bb-b2c-special-page-muted: var(--bb-secondary-color);
  --bb-b2c-special-page-subtle: var(--bb-tertiary-color);
  --bb-b2c-special-page-border: var(--bb-border-color);
  --bb-b2c-special-page-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2c-special-page-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2c-special-page-primary: var(--bb-primary);
  --bb-b2c-special-page-primary-hover: var(--bb-primary-hover);
  --bb-b2c-special-page-primary-soft: var(--bb-primary-light);
  --bb-b2c-special-page-primary-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-b2c-special-page-primary-inverse: var(--bb-primary-inverse);
  --bb-b2c-special-page-hero-panel-bg: var(--bb-b2c-special-hero-bg);
  --bb-b2c-special-page-hero-panel-text: var(--bb-b2c-special-hero-text-color);
  --bb-b2c-special-page-hero-panel-image: var(--bb-b2c-special-hero-image);
  --bb-b2c-special-page-hero-bg:
      radial-gradient(
          circle at 6% 18%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 16rem
      ),
      radial-gradient(
          circle at 86% 72%,
          color-mix(in srgb, var(--bb-primary) 13%, transparent),
          transparent 15rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-bg) 82%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-bg) 52%, var(--bb-tertiary-bg)) 100%
      );
  --bb-b2c-special-page-hero-overlay:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-body-bg) 78%, transparent) 0%,
          color-mix(in srgb, var(--bb-body-bg) 46%, transparent) 54%,
          transparent 100%
      );
  --bb-b2c-special-page-hero-image-opacity: 0.22;
  --bb-b2c-special-page-shadow-xs: var(--bb-shadow-xs);
  --bb-b2c-special-page-shadow-sm: var(--bb-shadow-sm);
  --bb-b2c-special-page-shadow-lg: var(--bb-shadow-lg);
  --bb-b2c-special-page-radius: var(--bb-radius-2xl);
  --bb-b2c-special-page-radius-lg: var(--bb-radius-xl);
  --bb-b2c-special-page-radius-md: var(--bb-radius-lg);
  --bb-b2c-special-page-section-gap: clamp(1.25rem, 3vw, 2.25rem);
  --bb-b2c-special-page-grid-gap: clamp(1rem, 2vw, 1.25rem);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-b2c-special-page-bg: var(--bb-body-bg);
  --bb-b2c-special-page-surface: var(--bb-surface-elevated);
  --bb-b2c-special-page-surface-soft: var(--bb-surface-soft);
  --bb-b2c-special-page-surface-elevated: var(--bb-surface-elevated);
  --bb-b2c-special-page-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2c-special-page-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2c-special-page-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2c-special-page-primary-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-b2c-special-page-primary-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-special-page-hero-bg:
      radial-gradient(
          circle at 6% 18%,
          color-mix(in srgb, var(--bb-primary) 15%, transparent),
          transparent 16rem
      ),
      radial-gradient(
          circle at 86% 72%,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 15rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-bg) 56%, var(--bb-surface-elevated)) 0%,
          color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-bg) 28%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-special-page-hero-overlay:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-body-bg) 72%, transparent) 0%,
          color-mix(in srgb, var(--bb-body-bg) 48%, transparent) 54%,
          transparent 100%
      );
  --bb-b2c-special-page-hero-image-opacity: 0.16;
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-b2c-special-page-bg: var(--bb-body-bg);
  --bb-b2c-special-page-surface: var(--bb-surface-elevated);
  --bb-b2c-special-page-surface-soft: var(--bb-surface-soft);
  --bb-b2c-special-page-surface-elevated: var(--bb-surface-elevated);
  --bb-b2c-special-page-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2c-special-page-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-b2c-special-page-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2c-special-page-primary-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-b2c-special-page-primary-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2c-special-page-hero-bg:
      radial-gradient(
          circle at 6% 18%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 16rem
      ),
      radial-gradient(
          circle at 86% 72%,
          color-mix(in srgb, var(--bb-primary) 11%, transparent),
          transparent 15rem
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-bg) 48%, var(--bb-surface-elevated)) 0%,
          color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-bg) 24%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-special-page-hero-overlay:
      linear-gradient(
          90deg,
          color-mix(in srgb, var(--bb-body-bg) 74%, transparent) 0%,
          color-mix(in srgb, var(--bb-body-bg) 50%, transparent) 54%,
          transparent 100%
      );
  --bb-b2c-special-page-hero-image-opacity: 0.14;
}

/* =====================================
   Page Scope
===================================== */
.bb-b2c-special-page {
  min-width: 0;
  min-height: 100%;
  color: var(--bb-b2c-special-page-text);
  background-color: var(--bb-b2c-special-page-bg);
}

.bb-b2c-special-page .material-symbols-outlined {
  line-height: 1;
}

.bb-b2c-special-page a,
.bb-b2c-special-page button {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal), opacity var(--bb-transition-normal);
}

/* =====================================
   Hero
   Current HTML: .bb-b2c-special-page > .bb-hero
===================================== */
.bb-b2c-special-page > .bb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.75rem, 5vw, 4.75rem);
  color: var(--bb-b2c-special-page-hero-panel-text);
  background: var(--bb-b2c-special-page-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-b2c-special-page-border-soft);
}

.bb-b2c-special-page > .bb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--bb-b2c-special-page-hero-panel-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--bb-b2c-special-page-hero-image-opacity);
  transform: scale(1.04);
  pointer-events: none;
}

.bb-b2c-special-page > .bb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bb-b2c-special-page-hero-overlay);
  pointer-events: none;
}

.bb-b2c-special-page .bb-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-height: clamp(18rem, 34vw, 28rem);
}

.bb-b2c-special-page .bb-hero-content {
  min-width: 0;
  max-width: 44rem;
}

.bb-b2c-special-page .bb-b2c-special-hero-badge {
  width: fit-content;
  margin-bottom: 0.875rem;
  color: var(--bb-b2c-special-page-primary-text) !important;
  background-color: var(--bb-b2c-special-page-primary-soft) !important;
  border: var(--bb-border-width) solid var(--bb-b2c-special-page-border-accent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: var(--bb-letter-spacing-wide);
}

.bb-b2c-special-page .bb-hero-title {
  max-width: 46rem;
  margin: 0;
  color: var(--bb-b2c-special-page-hero-panel-text);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.bb-b2c-special-page .bb-hero-text {
  max-width: 40rem;
  margin: 1rem 0 0;
  color: color-mix(in srgb, var(--bb-b2c-special-page-hero-panel-text) 76%, transparent);
  font-size: clamp(0.975rem, 1.4vw, 1.125rem);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-special-page .bb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bb-b2c-special-page .bb-hero-actions .btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-special-page .bb-hero-media {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-special-page .bb-hero-media img {
  display: block;
  width: min(100%, 26rem);
  max-height: 21rem;
  object-fit: contain;
  filter: drop-shadow(0 1.25rem 2.5rem color-mix(in srgb, var(--bb-emphasis-color) 14%, transparent));
}

.bb-b2c-special-page .bb-hero-media-card {
  width: min(100%, 20rem);
  aspect-ratio: 1/0.72;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2c-special-page-hero-panel-text);
  background-color: color-mix(in srgb, var(--bb-b2c-special-page-surface) 76%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2c-special-page-border-soft);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-special-page-shadow-lg);
}

.bb-b2c-special-page .bb-hero-media-card .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-3xl);
}

/* =====================================
   Stage / Quick Discovery
   Current HTML:
   .bb-b2c-special-stage-card
   .bb-b2c-special-stage-scroll
   .bb-b2c-special-stage-chip
===================================== */
.bb-b2c-special-stage {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--bb-b2c-special-page-section-gap) * -1);
  padding-top: 0;
  padding-bottom: var(--bb-b2c-special-page-section-gap);
}

.bb-b2c-special-stage-card {
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.25rem);
  background-color: color-mix(in srgb, var(--bb-b2c-special-page-surface) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2c-special-page-border-soft);
  border-radius: var(--bb-b2c-special-page-radius);
  box-shadow: var(--bb-b2c-special-page-shadow-sm);
}

.bb-b2c-special-stage-head {
  margin-bottom: 0.875rem;
}

.bb-b2c-special-stage-title {
  margin: 0;
  color: var(--bb-b2c-special-page-heading);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-special-stage-scroll {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.bb-b2c-special-stage-scroll::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2c-special-stage-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-b2c-special-page-primary) 26%, var(--bb-b2c-special-page-border));
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-special-stage-chip {
  flex: 0 0 auto;
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-b2c-special-page-heading);
  background-color: var(--bb-b2c-special-page-surface);
  border: var(--bb-border-width) solid var(--bb-b2c-special-page-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2c-special-page-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.bb-b2c-special-stage-chip:hover,
.bb-b2c-special-stage-chip.active {
  color: var(--bb-b2c-special-page-primary-text);
  background-color: var(--bb-b2c-special-page-primary-soft);
  border-color: var(--bb-b2c-special-page-border-accent);
}

.bb-b2c-special-stage-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2c-special-page-primary);
  background-color: color-mix(in srgb, var(--bb-b2c-special-page-primary) 10%, var(--bb-b2c-special-page-surface));
  border-radius: var(--bb-radius);
}

.bb-b2c-special-stage-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
}

/* =====================================
   Products Section / Shell
===================================== */
.bb-b2c-special-products-section {
  padding-top: 0;
}

.bb-b2c-special-products-shell {
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.375rem);
  background-color: var(--bb-b2c-special-page-surface);
  border: var(--bb-border-width) solid var(--bb-b2c-special-page-border-soft);
  border-radius: var(--bb-b2c-special-page-radius);
  box-shadow: var(--bb-b2c-special-page-shadow-sm);
}

.bb-b2c-special-products-shell .bb-section-head {
  margin-bottom: 1.125rem;
}

.bb-b2c-special-products-shell .bb-section-label {
  width: fit-content;
  margin-bottom: 0.625rem;
  color: var(--bb-b2c-special-page-primary-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-b2c-special-products-shell .bb-section-title {
  margin: 0;
  color: var(--bb-b2c-special-page-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.04em;
}

.bb-b2c-special-products-shell .bb-section-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2c-special-page-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Product Grid
   IMPORTANT:
   Current view uses .bb-b2c-special-products-grid
===================================== */
.bb-b2c-special-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-b2c-special-page-grid-gap);
  align-items: stretch;
}

.bb-b2c-special-products-grid > * {
  min-width: 0;
}

.bb-b2c-special-products-grid .bb-product-card {
  height: 100%;
}

/* Compatibility: old/singular class names */
.bb-b2c-special-product-grid,
.bb-b2c-product-specials-grid,
.bb-b2c-special-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-b2c-special-page-grid-gap);
  align-items: stretch;
}

.bb-b2c-special-product-grid > *,
.bb-b2c-product-specials-grid > *,
.bb-b2c-special-list-grid > * {
  min-width: 0;
}

.bb-b2c-special-product-grid .bb-product-card,
.bb-b2c-product-specials-grid .bb-product-card,
.bb-b2c-special-list-grid .bb-product-card {
  height: 100%;
}

/* =====================================
   Product Card Page-Level Safety
   Global card family owns the design.
   This only prevents layout explosions on this page.
===================================== */
.bb-b2c-special-page .bb-product-card {
  min-width: 0;
}

.bb-b2c-special-page .bb-product-card-media {
  min-height: auto;
}

.bb-b2c-special-page .bb-product-card-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-special-page .bb-product-card-image-frame img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =====================================
   Pager
===================================== */
.bb-b2c-special-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--bb-b2c-special-page-surface);
  border: var(--bb-border-width) solid var(--bb-b2c-special-page-border-soft);
  border-radius: var(--bb-b2c-special-page-radius-lg);
  box-shadow: var(--bb-b2c-special-page-shadow-xs);
}

.bb-b2c-special-pager-info {
  color: var(--bb-b2c-special-page-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-special-pager .pagination,
.bb-b2c-special-pager .bb-pagination {
  margin-bottom: 0;
}

/* =====================================
   Empty State
===================================== */
.bb-b2c-special-empty {
  display: grid;
  place-items: center;
  min-height: 22rem;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  background-color: var(--bb-b2c-special-page-surface-soft);
  border: var(--bb-border-width) dashed var(--bb-b2c-special-page-border);
  border-radius: var(--bb-b2c-special-page-radius-lg);
}

.bb-b2c-special-empty-symbol,
.bb-b2c-special-empty .bb-symbol {
  margin-bottom: 1rem;
}

.bb-b2c-special-empty-symbol .bb-symbol-label,
.bb-b2c-special-empty .bb-symbol-label {
  color: var(--bb-b2c-special-page-primary);
  background-color: var(--bb-b2c-special-page-primary-soft);
}

.bb-b2c-special-empty-title {
  margin: 0;
  color: var(--bb-b2c-special-page-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-special-empty-text {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: var(--bb-b2c-special-page-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-special-empty .btn {
  margin-top: 1.25rem;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2c-special-products-grid,
  .bb-b2c-special-product-grid,
  .bb-b2c-product-specials-grid,
  .bb-b2c-special-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-b2c-special-page .bb-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.7fr);
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-special-page .bb-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .bb-b2c-special-page .bb-hero-media {
    justify-content: flex-start;
  }
  .bb-b2c-special-page .bb-hero-media img {
    width: min(100%, 20rem);
    max-height: 16rem;
  }
  .bb-b2c-special-products-grid,
  .bb-b2c-special-product-grid,
  .bb-b2c-product-specials-grid,
  .bb-b2c-special-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2c-special-pager {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-special-page > .bb-hero {
    padding-block: 2rem 3.5rem;
  }
  .bb-b2c-special-page .bb-hero-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .bb-b2c-special-stage-card,
  .bb-b2c-special-products-shell,
  .bb-b2c-special-pager {
    border-radius: var(--bb-b2c-special-page-radius-lg);
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-special-page .bb-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2c-special-page .bb-hero-actions .btn {
    width: 100%;
  }
  .bb-b2c-special-products-grid,
  .bb-b2c-special-product-grid,
  .bb-b2c-product-specials-grid,
  .bb-b2c-special-list-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-special-products-shell {
    padding: 0.875rem;
  }
  .bb-b2c-special-pager {
    padding: 0.875rem;
  }
}
/* =====================================
   Bulbulustur Web - B2C Product Reviews Page
   Layer: pages/b2c/_product-reviews.scss

   Purpose:
   - B2C product reviews listing page.
   - Product review hero, product preview card, review summary,
     review list, review pictures, empty state and gallery modal.
   - Keeps existing class names to avoid breaking review/gallery JS and hidden states.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor roots:
   - .bb-b2c-review-page
   - .bb-b2c-review-hero
   - .bb-b2c-review-hero-product
   - .bb-b2c-review-section
   - .bb-b2c-review-shell
   - .bb-b2c-review-summary
   - .bb-b2c-review-list
   - .bb-b2c-review-gallery-modal

   Architecture rule:
   - base/colors.scss owns raw color palette.
   - base/theme.scss owns light / navy / dark atmosphere.
   - components/*.scss owns reusable objects.
   - This file owns only B2C review page local tokens.
===================================== */
/* =====================================
   B2C Review Local Tokens - Light Default
===================================== */
.bb-b2c-review-page {
  --bb-b2c-review-page-bg: var(--bb-body-bg);
  --bb-b2c-review-surface: var(--bb-surface-elevated);
  --bb-b2c-review-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-b2c-review-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2c-review-accent: var(--bb-primary);
  --bb-b2c-review-accent-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-b2c-review-accent-strong: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-b2c-review-star: var(--bb-primary);
  --bb-b2c-review-star-muted: color-mix(in srgb, var(--bb-secondary-color) 34%, transparent);
  --bb-b2c-review-text: var(--bb-body-color);
  --bb-b2c-review-heading: var(--bb-emphasis-color);
  --bb-b2c-review-muted: var(--bb-secondary-color);
  --bb-b2c-review-subtle: var(--bb-tertiary-color);
  --bb-b2c-review-avatar-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-body-bg));
  --bb-b2c-review-avatar-color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-b2c-review-avatar-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-b2c-review-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2c-review-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-emphasis-color) 12%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
  --bb-b2c-review-gallery-overlay-bg: color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 64%, transparent);
  --bb-b2c-review-hero-bg:
      radial-gradient(
          circle at 88% 14%,
          color-mix(in srgb, var(--bb-b2c-review-accent) 18%, transparent),
          transparent 23rem
      ),
      radial-gradient(
          circle at 8% 92%,
          color-mix(in srgb, var(--bb-b2c-review-accent) 8%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 86%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-b2c-review-hero-orb-bg: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-b2c-review-hero-product-bg:
      radial-gradient(
          circle at 90% 12%,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 13rem
      ),
      var(--bb-b2c-review-surface);
  --bb-b2c-review-hero-product-image-bg: var(--bb-tertiary-bg);
  --bb-b2c-review-hero-empty-bg: var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-summary-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 16rem
      ),
      var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-bar-track-bg: color-mix(in srgb, var(--bb-border-color) 52%, var(--bb-tertiary-bg));
  --bb-b2c-review-text-fade-bg:
      linear-gradient(
          to bottom,
          color-mix(in srgb, var(--bb-b2c-review-surface) 0%, transparent),
          var(--bb-b2c-review-surface)
      );
  --bb-b2c-review-picture-card-bg:
      radial-gradient(
          circle at 92% 8%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 10rem
      ),
      var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-empty-bg:
      radial-gradient(
          circle at 50% 0%,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 20rem
      ),
      var(--bb-b2c-review-surface);
  --bb-b2c-review-picture-hover-border: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border-color));
  --bb-b2c-review-gallery-shadow:
      0 1.5rem 4.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent);
  --bb-b2c-review-gallery-arrow-bg: color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 72%, transparent);
  --bb-b2c-review-gallery-thumb-active-shadow:
      0 0 0 0.125rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  color: var(--bb-b2c-review-text);
  background-color: var(--bb-b2c-review-page-bg);
}

/* =====================================
   B2C Review Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-b2c-review-page {
  --bb-b2c-review-surface: var(--bb-surface-elevated);
  --bb-b2c-review-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg));
  --bb-b2c-review-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2c-review-accent-soft: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-body-bg));
  --bb-b2c-review-accent-strong: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-review-star-muted: color-mix(in srgb, var(--bb-secondary-color) 40%, transparent);
  --bb-b2c-review-avatar-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-body-bg));
  --bb-b2c-review-avatar-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-review-avatar-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-b2c-review-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  --bb-b2c-review-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 14%, transparent);
  --bb-b2c-review-gallery-overlay-bg: color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 70%, transparent);
  --bb-b2c-review-hero-bg:
      radial-gradient(
          circle at 88% 14%,
          color-mix(in srgb, var(--bb-b2c-review-accent) 14%, transparent),
          transparent 23rem
      ),
      radial-gradient(
          circle at 8% 92%,
          color-mix(in srgb, var(--bb-b2c-review-accent) 7%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 76%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-b2c-review-hero-orb-bg: color-mix(in srgb, var(--bb-primary) 9%, transparent);
  --bb-b2c-review-hero-product-bg:
      radial-gradient(
          circle at 90% 12%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 13rem
      ),
      var(--bb-b2c-review-surface);
  --bb-b2c-review-hero-product-image-bg: var(--bb-surface-soft);
  --bb-b2c-review-hero-empty-bg: var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-summary-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 16rem
      ),
      var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-bar-track-bg: color-mix(in srgb, var(--bb-border-color) 56%, var(--bb-tertiary-bg));
  --bb-b2c-review-picture-card-bg:
      radial-gradient(
          circle at 92% 8%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 10rem
      ),
      var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-empty-bg:
      radial-gradient(
          circle at 50% 0%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 20rem
      ),
      var(--bb-b2c-review-surface);
  --bb-b2c-review-gallery-shadow:
      0 1.5rem 4.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 34%, transparent);
}

/* =====================================
   B2C Review Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-b2c-review-page {
  --bb-b2c-review-surface: var(--bb-surface-elevated);
  --bb-b2c-review-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-b2c-review-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2c-review-accent-soft: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-body-bg));
  --bb-b2c-review-accent-strong: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-review-star-muted: color-mix(in srgb, var(--bb-secondary-color) 42%, transparent);
  --bb-b2c-review-avatar-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-body-bg));
  --bb-b2c-review-avatar-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-review-avatar-shadow:
      0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 9%, transparent);
  --bb-b2c-review-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 12%, transparent);
  --bb-b2c-review-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 28%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 14%, transparent);
  --bb-b2c-review-gallery-overlay-bg: color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 72%, transparent);
  --bb-b2c-review-hero-bg:
      radial-gradient(
          circle at 88% 14%,
          color-mix(in srgb, var(--bb-b2c-review-accent) 12%, transparent),
          transparent 23rem
      ),
      radial-gradient(
          circle at 8% 92%,
          color-mix(in srgb, var(--bb-b2c-review-accent) 6%, transparent),
          transparent 18rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-surface-elevated) 72%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-b2c-review-hero-orb-bg: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  --bb-b2c-review-hero-product-bg:
      radial-gradient(
          circle at 90% 12%,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 13rem
      ),
      var(--bb-b2c-review-surface);
  --bb-b2c-review-hero-product-image-bg: var(--bb-surface-soft);
  --bb-b2c-review-hero-empty-bg: var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-summary-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 16rem
      ),
      var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-bar-track-bg: color-mix(in srgb, var(--bb-border-color) 58%, var(--bb-tertiary-bg));
  --bb-b2c-review-picture-card-bg:
      radial-gradient(
          circle at 92% 8%,
          color-mix(in srgb, var(--bb-primary) 6%, transparent),
          transparent 10rem
      ),
      var(--bb-b2c-review-surface-soft);
  --bb-b2c-review-empty-bg:
      radial-gradient(
          circle at 50% 0%,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 20rem
      ),
      var(--bb-b2c-review-surface);
  --bb-b2c-review-gallery-shadow:
      0 1.5rem 4.375rem color-mix(in srgb, var(--bb-black, var(--bb-color-black)) 36%, transparent);
}

/* =====================================
   Hero
===================================== */
.bb-b2c-review-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 5vw, 4.75rem);
  padding-bottom: clamp(2.75rem, 6vw, 5.25rem);
  background: var(--bb-b2c-review-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

.bb-b2c-review-hero::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -8rem;
  width: 18rem;
  height: 18rem;
  background-color: var(--bb-b2c-review-hero-orb-bg);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2c-review-hero > .bb-container {
  position: relative;
  z-index: 2;
}

.bb-b2c-review-hero-breadcrumb {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.bb-b2c-review-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(28rem, 0.55fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.bb-b2c-review-hero-content {
  min-width: 0;
}

.bb-b2c-review-hero-label {
  gap: 0.4375rem;
  margin-bottom: 1rem;
}

.bb-b2c-review-hero-label .material-symbols-outlined {
  color: var(--bb-b2c-review-accent-strong);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-b2c-review-hero-title {
  max-width: 52rem;
  margin: 0;
  color: var(--bb-b2c-review-heading);
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}

.bb-b2c-review-hero-text {
  max-width: 47rem;
  margin: 1rem 0 0;
  color: var(--bb-b2c-review-muted);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-review-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bb-b2c-review-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
}

.bb-b2c-review-hero-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Hero Product Card
===================================== */
.bb-b2c-review-hero-aside {
  min-width: 0;
  justify-self: end;
  width: min(100%, 34rem);
}

.bb-b2c-review-hero-product {
  min-width: 0;
  overflow: hidden;
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--bb-b2c-review-hero-product-bg);
  border-color: var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-review-shadow);
}

.bb-b2c-review-hero-product * {
  min-width: 0;
}

.bb-b2c-review-hero-product a {
  color: inherit;
  text-decoration: none !important;
}

.bb-b2c-review-hero-product img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.bb-b2c-review-hero-product :is(h1, h2, h3, h4, strong) {
  color: var(--bb-b2c-review-heading);
}

.bb-b2c-review-hero-product .bb-b2c-review-hero-product-card {
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bb-b2c-review-hero-product .bb-b2c-review-hero-product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 12rem;
  padding: 1rem;
  background-color: var(--bb-b2c-review-hero-product-image-bg);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-review-hero-product .bb-b2c-review-hero-product-image img {
  width: 100%;
  max-height: 14rem;
  object-fit: contain;
}

.bb-b2c-review-hero-product .bb-b2c-review-hero-product-title {
  margin: 0.875rem 0 0;
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
  text-align: center;
}

.bb-b2c-review-hero-empty-product {
  display: grid;
  place-items: center;
  gap: 0.625rem;
  min-height: 16rem;
  padding: 1.5rem;
  background-color: var(--bb-b2c-review-hero-empty-bg);
  border: var(--bb-border-width) dashed var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-xl);
  text-align: center;
}

.bb-b2c-review-hero-empty-product .material-symbols-outlined {
  color: var(--bb-b2c-review-accent-strong);
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-review-hero-empty-product strong {
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-review-hero-empty-product small {
  max-width: 18rem;
  color: var(--bb-b2c-review-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Review Section Shell
===================================== */
.bb-b2c-review-section {
  background-color: var(--bb-b2c-review-page-bg);
}

.bb-b2c-review-shell {
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--bb-b2c-review-surface);
  border-color: var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-review-shadow);
}

.bb-b2c-review-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.375rem;
}

.bb-b2c-review-section-title {
  margin: 0.75rem 0 0;
  color: var(--bb-b2c-review-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.045em;
}

.bb-b2c-review-section-text {
  max-width: 48rem;
  margin: 0.75rem 0 0;
  color: var(--bb-b2c-review-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-review-summary-wrap {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

/* =====================================
   Review Summary
===================================== */
.bb-b2c-review-summary {
  display: grid;
  grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.125rem);
  align-items: center;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bb-b2c-review-summary-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-review-score {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bb-b2c-review-score-value {
  display: block;
  margin-bottom: 1rem;
  color: var(--bb-b2c-review-heading);
  font-size: clamp(3.75rem, 7vw, 4.875rem);
  font-weight: var(--bb-fw-normal);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.bb-b2c-review-stars,
.bb-b2c-review-bar-stars,
.bb-b2c-review-gallery-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  color: var(--bb-b2c-review-star);
}

.bb-b2c-review-stars {
  margin-bottom: 0.625rem;
}

.bb-b2c-review-stars .material-symbols-outlined,
.bb-b2c-review-bar-stars .material-symbols-outlined,
.bb-b2c-review-gallery-stars .material-symbols-outlined {
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-b2c-review-stars .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
}

.bb-b2c-review-bar-stars .material-symbols-outlined,
.bb-b2c-review-gallery-stars .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
}

.bb-b2c-review-star-muted {
  color: var(--bb-b2c-review-star-muted) !important;
}

.bb-b2c-review-score-label {
  display: block;
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-review-bars {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}

.bb-b2c-review-bar-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 1.75rem;
  gap: 0.625rem;
  align-items: center;
  width: 100%;
}

.bb-b2c-review-bar-stars {
  white-space: nowrap;
}

.bb-b2c-review-bar-track {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0.5625rem;
  background-color: var(--bb-b2c-review-bar-track-bg);
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-review-bar-fill {
  display: block;
  height: 100%;
  background-color: var(--bb-b2c-review-star);
  border-radius: inherit;
}

.bb-b2c-review-bar-count {
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-align: right;
}

/* =====================================
   Review List
===================================== */
.bb-b2c-review-list {
  display: flex;
  flex-direction: column;
}

.bb-b2c-review-item {
  padding: 1.625rem 0;
  border-top: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

.bb-b2c-review-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.bb-b2c-review-item:last-child {
  padding-bottom: 0;
}

.bb-b2c-review-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-review-author-block {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.bb-b2c-review-avatar {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2c-review-avatar-color);
  background-color: var(--bb-b2c-review-avatar-bg);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2c-review-avatar-shadow);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-review-author-main {
  min-width: 0;
  padding-top: 0.1875rem;
}

.bb-b2c-review-author-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;
  min-width: 0;
}

.bb-b2c-review-author {
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
}

.bb-b2c-review-date {
  color: var(--bb-b2c-review-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-review-location {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-left: auto;
}

.bb-b2c-review-content {
  min-width: 0;
  margin-left: 4rem;
}

.bb-b2c-review-text-wrap {
  position: relative;
}

.bb-b2c-review-text {
  position: relative;
  overflow: hidden;
  margin: 0;
  color: var(--bb-b2c-review-muted);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
  white-space: pre-line;
}

.bb-b2c-review-text.is-collapsed {
  display: -webkit-box;
  max-height: 5.55em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bb-b2c-review-text.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: var(--bb-b2c-review-text-fade-bg);
  pointer-events: none;
}

.bb-b2c-review-text.is-expanded {
  display: block;
  max-height: none;
  overflow: visible;
}

.bb-b2c-review-more-link {
  display: inline-flex;
  margin-top: 0.625rem;
  padding: 0;
  color: var(--bb-b2c-review-accent-strong) !important;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
}

.bb-b2c-review-more-link:hover {
  color: var(--bb-primary) !important;
  text-decoration: underline !important;
}

/* =====================================
   Review Pictures
===================================== */
.bb-b2c-review-picture-card {
  margin-top: 1rem;
  padding: 0.875rem;
  background: var(--bb-b2c-review-picture-card-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-review-picture-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-review-picture-list {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.bb-b2c-review-picture-item {
  display: block;
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
  margin: 0 !important;
}

.bb-b2c-review-picture-btn {
  display: block !important;
  width: 5.125rem !important;
  height: 5.125rem !important;
  min-width: 5.125rem !important;
  max-width: 5.125rem !important;
  min-height: 5.125rem !important;
  max-height: 5.125rem !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
  cursor: pointer;
}

.bb-b2c-review-picture-frame {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2c-review-picture-btn:hover .bb-b2c-review-picture-frame {
  transform: translateY(-0.125rem);
  border-color: var(--bb-b2c-review-picture-hover-border);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-review-picture-frame img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* =====================================
   Pagination
===================================== */
.bb-b2c-review-pagination-wrap {
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

/* =====================================
   Empty State
===================================== */
.bb-b2c-review-empty {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--bb-b2c-review-empty-bg);
  border-color: var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-review-shadow);
  text-align: center;
}

.bb-b2c-review-empty-icon {
  width: 4.625rem;
  height: 4.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.125rem;
  color: var(--bb-b2c-review-accent-strong);
  background-color: var(--bb-b2c-review-accent-soft);
  border-radius: var(--bb-radius-2xl);
}

.bb-b2c-review-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-review-empty h2 {
  margin: 0;
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-review-empty p {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: var(--bb-b2c-review-muted);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-review-empty-link {
  margin-top: 1.25rem;
}

/* =====================================
   Gallery Overlay
===================================== */
.bb-b2c-review-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background-color: var(--bb-b2c-review-gallery-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast);
}

.bb-b2c-review-gallery-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bb-b2c-review-gallery-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1070;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  width: min(73.75rem, 100vw - 2rem);
  height: min(47.5rem, 100vh - 2.625rem);
  background-color: var(--bb-b2c-review-surface);
  border: var(--bb-border-width) solid var(--bb-b2c-review-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-review-gallery-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.98);
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-review-gallery-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.bb-b2c-review-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.625rem;
  padding: 0 1.125rem;
  border-bottom: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

.bb-b2c-review-gallery-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-review-gallery-title .material-symbols-outlined {
  color: var(--bb-b2c-review-accent-strong);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-review-gallery-close {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2c-review-heading);
  background-color: var(--bb-b2c-review-surface);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
}

.bb-b2c-review-gallery-close:hover {
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-review-gallery-close .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-review-gallery-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.65fr);
  min-height: 0;
  background-color: var(--bb-b2c-review-surface);
}

.bb-b2c-review-gallery-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 1.375rem;
  background-color: var(--bb-b2c-review-surface-soft);
}

.bb-b2c-review-gallery-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 40rem;
  background-color: var(--bb-b2c-review-surface);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-review-gallery-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2c-review-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 2.625rem;
  height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: var(--bb-b2c-review-gallery-arrow-bg);
  border: 0;
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
  transform: translateY(-50%);
}

.bb-b2c-review-gallery-arrow-left {
  left: 1.25rem;
}

.bb-b2c-review-gallery-arrow-right {
  right: 1.25rem;
}

.bb-b2c-review-gallery-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-b2c-review-gallery-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background-color: var(--bb-b2c-review-surface);
  border-left: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

.bb-b2c-review-gallery-review {
  flex: 1;
  overflow-y: auto;
  padding: 1.375rem;
}

.bb-b2c-review-gallery-review-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-review-gallery-avatar {
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-b2c-review-avatar-color);
  background-color: var(--bb-b2c-review-avatar-bg);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-review-gallery-author {
  min-width: 0;
}

.bb-b2c-review-gallery-author strong {
  display: block;
  color: var(--bb-b2c-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
}

.bb-b2c-review-gallery-author span {
  display: block;
  margin-top: 0.1875rem;
  color: var(--bb-b2c-review-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-review-gallery-stars {
  margin-bottom: 0.75rem;
}

.bb-b2c-review-gallery-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-bottom: 0.875rem;
}

.bb-b2c-review-gallery-text {
  margin: 0;
  color: var(--bb-b2c-review-muted);
  font-size: var(--bb-fs-sm);
  line-height: 1.8;
  white-space: pre-line;
}

.bb-b2c-review-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.875rem;
  background-color: var(--bb-b2c-review-surface);
  border-top: var(--bb-border-width) solid var(--bb-b2c-review-border);
}

.bb-b2c-review-gallery-thumb {
  overflow: hidden;
  width: 3.625rem;
  height: 3.625rem;
  flex: 0 0 3.625rem;
  padding: 0;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  cursor: pointer;
}

.bb-b2c-review-gallery-thumb.is-active {
  border-color: var(--bb-primary);
  box-shadow: var(--bb-b2c-review-gallery-thumb-active-shadow);
}

.bb-b2c-review-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.bb-b2c-review-gallery-open {
  overflow: hidden;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2c-review-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.5fr);
  }
  .bb-b2c-review-hero-aside {
    width: min(100%, 30rem);
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-review-hero-inner {
    grid-template-columns: 1fr;
  }
  .bb-b2c-review-hero-aside {
    justify-self: start;
    width: min(100%, 34rem);
  }
  .bb-b2c-review-gallery-modal {
    height: min(52.5rem, 100vh - 1.5rem);
  }
  .bb-b2c-review-gallery-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(17.5rem, 0.9fr) minmax(16.25rem, 0.7fr);
  }
  .bb-b2c-review-gallery-side {
    border-left: 0;
    border-top: var(--bb-border-width) solid var(--bb-b2c-review-border);
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-review-hero {
    padding-top: 2.25rem;
    padding-bottom: 2.75rem;
  }
  .bb-b2c-review-hero-title {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }
  .bb-b2c-review-hero-actions {
    flex-direction: column;
  }
  .bb-b2c-review-hero-btn {
    width: 100%;
  }
  .bb-b2c-review-shell {
    padding: 1rem;
  }
  .bb-b2c-review-summary {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .bb-b2c-review-bar-row {
    grid-template-columns: 5.75rem minmax(0, 1fr) 1.5rem;
  }
  .bb-b2c-review-item-head {
    grid-template-columns: 1fr;
  }
  .bb-b2c-review-location {
    justify-content: flex-start;
    margin-left: 4rem;
  }
  .bb-b2c-review-text {
    font-size: var(--bb-fs-sm);
    line-height: 1.75;
  }
  .bb-b2c-review-text.is-collapsed {
    max-height: 5.25em;
  }
  .bb-b2c-review-gallery-modal {
    width: calc(100vw - 1.125rem);
    height: calc(100vh - 1.125rem);
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-review-gallery-media {
    padding: 0.75rem;
  }
  .bb-b2c-review-gallery-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
  .bb-b2c-review-gallery-arrow-left {
    left: 0.75rem;
  }
  .bb-b2c-review-gallery-arrow-right {
    right: 0.75rem;
  }
  .bb-b2c-review-gallery-review {
    padding: 1rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-review-content,
  .bb-b2c-review-location {
    margin-left: 0;
  }
  .bb-b2c-review-author-block {
    align-items: center;
  }
  .bb-b2c-review-picture-btn {
    width: 4.5rem !important;
    height: 4.5rem !important;
    min-width: 4.5rem !important;
    max-width: 4.5rem !important;
    min-height: 4.5rem !important;
    max-height: 4.5rem !important;
  }
  .bb-b2c-review-shell,
  .bb-b2c-review-summary,
  .bb-b2c-review-picture-card,
  .bb-b2c-review-empty,
  .bb-b2c-review-hero-product {
    border-radius: var(--bb-radius-xl);
  }
}
/* =====================================
   B2C Sponsored Product Top Product List
   Component-specific
===================================== */
.bb-b2c-sponsored-top {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-sponsored-top::before {
  content: "";
  position: absolute;
  right: -5.625rem;
  top: -5.625rem;
  width: 13.75rem;
  height: 13.75rem;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2c-sponsored-top-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.375rem;
  align-items: stretch;
}

/* -------------------------------------
   Brand panel
------------------------------------- */
.bb-b2c-sponsored-top-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.125rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated)) 0%, var(--bb-body-bg) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 15%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-sponsored-top-brand-logo {
  width: 6rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.875rem;
}

.bb-b2c-sponsored-top-brand-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bb-b2c-sponsored-top-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  min-height: 1.75rem;
  margin-bottom: 0.625rem;
  padding: 0 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-sponsored-top-label .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-sponsored-top-title {
  margin: 0 0 0.4375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-sponsored-top-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.bb-b2c-sponsored-top-title a:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-sponsored-top-text {
  margin: 0 0 0.875rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-sponsored-top-about {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  margin-top: auto;
  color: var(--bb-secondary-color) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-sponsored-top-about:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-sponsored-top-about .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* -------------------------------------
   Products
------------------------------------- */
.bb-b2c-sponsored-top-products {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2c-sponsored-top-product {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 15.625rem;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-sponsored-top-product:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-sponsored-top-product-media {
  position: relative;
  display: block;
  height: 7.625rem;
  overflow: hidden;
  padding: 0.75rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  text-decoration: none !important;
}

.bb-b2c-sponsored-top-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--bb-radius);
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-sponsored-top-product:hover .bb-b2c-sponsored-top-product-media img {
  transform: scale(1.035);
}

.bb-b2c-sponsored-top-product-tag {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 0.5rem;
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   Product body
------------------------------------- */
.bb-b2c-sponsored-top-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem;
}

.bb-b2c-sponsored-top-product-title {
  display: -webkit-box;
  min-height: 2.375rem;
  max-height: 2.375rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--bb-emphasis-color) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  transition: color var(--bb-transition-fast);
}

.bb-b2c-sponsored-top-product-title:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-sponsored-top-product-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1875rem;
  margin-top: 0.5rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-b2c-sponsored-top-product-price span {
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-sponsored-top-product-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
  margin-bottom: 0.625rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-sponsored-top-product-meta .material-symbols-outlined {
  color: var(--bb-warning);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-sponsored-top-product-action {
  width: 100%;
  min-height: 2rem;
  margin-top: auto;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1399.98px) {
  .bb-b2c-sponsored-top-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bb-b2c-sponsored-top-products .bb-b2c-sponsored-top-product:nth-child(n+5) {
    display: none;
  }
}
@media (max-width: 1199.98px) {
  .bb-b2c-sponsored-top-inner {
    grid-template-columns: 1fr;
  }
  .bb-b2c-sponsored-top-brand {
    min-height: auto;
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-sponsored-top-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-b2c-sponsored-top-products .bb-b2c-sponsored-top-product:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-sponsored-top {
    padding: 0.75rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-sponsored-top-brand {
    padding: 0.875rem;
  }
  .bb-b2c-sponsored-top-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-b2c-sponsored-top-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .bb-b2c-sponsored-top-products .bb-b2c-sponsored-top-product:nth-child(n+4),
  .bb-b2c-sponsored-top-products .bb-b2c-sponsored-top-product:nth-child(n+5) {
    display: flex;
  }
  .bb-b2c-sponsored-top-product {
    min-height: 14.375rem;
  }
  .bb-b2c-sponsored-top-product-media {
    height: 6.875rem;
  }
}
/* =====================================
   B2C Product List Filters
   Component-specific
===================================== */
.bb-b2c-filter-panel {
  position: sticky;
  top: 5.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Card */
.bb-b2c-filter-card {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-filter-card-head {
  padding: 0.9375rem 1rem 0.75rem;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 28%), var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-filter-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-b2c-filter-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

/* Category list */
.bb-b2c-filter-category-list {
  padding: 0.625rem 0;
}

.bb-b2c-filter-category-link {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 2rem;
  padding: 0 1rem;
  color: var(--bb-emphasis-color) !important;
  border-left: 0.1875rem solid transparent;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-filter-category-link:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, transparent);
}

.bb-b2c-filter-category-link.is-parent {
  color: var(--bb-secondary-color) !important;
}

.bb-b2c-filter-category-link.is-active {
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  border-left-color: var(--bb-primary);
}

.bb-b2c-filter-category-link .material-symbols-outlined {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Active filters */
.bb-b2c-filter-active {
  padding: 0.8125rem 0.875rem 0.875rem;
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.bb-b2c-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 1.75rem;
  padding: 0 0.5625rem;
  color: var(--bb-emphasis-color) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-filter-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-filter-clear {
  display: inline-flex;
  margin-top: 0.625rem;
  color: var(--bb-primary) !important;
  text-decoration: underline !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

/* Form */
.bb-b2c-filter-form {
  display: flex;
  flex-direction: column;
}

.bb-b2c-filter-group {
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-filter-group:last-child {
  border-bottom: 0;
}

.bb-b2c-filter-group summary {
  min-height: 2.875rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  color: var(--bb-emphasis-color);
  cursor: pointer;
  list-style: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-filter-group summary::-webkit-details-marker {
  display: none;
}

.bb-b2c-filter-group summary::after {
  content: "expand_more";
  color: var(--bb-secondary-color);
  font-family: "Material Symbols Outlined";
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-normal);
  line-height: 1;
  transition: transform var(--bb-transition-fast);
}

.bb-b2c-filter-group[open] summary::after {
  transform: rotate(180deg);
}

.bb-b2c-filter-group-body {
  padding: 0 1rem 0.9375rem;
}

/* Search */
.bb-b2c-filter-search {
  position: relative;
  margin-bottom: 0.625rem;
}

.bb-b2c-filter-search input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.75rem 0 2.125rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  outline: none;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-filter-search .material-symbols-outlined {
  position: absolute;
  left: 0.6875rem;
  top: 50%;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: 1;
  transform: translateY(-50%);
}

/* Options */
.bb-b2c-filter-option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}

.bb-b2c-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  color: var(--bb-emphasis-color);
  cursor: pointer;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-filter-option input {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: 0 0 auto;
  margin-top: 0.0625rem;
  accent-color: var(--bb-primary);
}

.bb-b2c-filter-option a {
  color: inherit !important;
  text-decoration: none !important;
}

.bb-b2c-filter-option a:hover {
  color: var(--bb-primary) !important;
}

.bb-b2c-filter-more {
  display: inline-flex;
  align-items: center;
  margin-top: 0.6875rem;
  color: var(--bb-primary) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

/* Range */
.bb-b2c-filter-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.75rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.625rem;
}

.bb-b2c-filter-range input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  outline: none;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-filter-range span {
  color: var(--bb-secondary-color);
  text-align: center;
}

.bb-b2c-filter-apply {
  width: 100%;
  min-height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

/* Colors */
.bb-b2c-filter-color-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6875rem 0.5rem;
}

.bb-b2c-filter-color {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bb-emphasis-color);
  cursor: pointer;
  text-align: center;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-filter-color input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-b2c-filter-color-dot {
  width: 1.5625rem;
  height: 1.5625rem;
  background-color: var(--bb-filter-color, var(--bb-white));
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bb-white) 45%, transparent);
}

.bb-b2c-filter-color input:checked + .bb-b2c-filter-color-dot {
  outline: 2px solid var(--bb-primary);
  outline-offset: 3px;
}

/* Sizes */
.bb-b2c-filter-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2c-filter-size {
  position: relative;
  cursor: pointer;
}

.bb-b2c-filter-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-b2c-filter-size span {
  min-width: 2.375rem;
  min-height: 2rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-filter-size input:checked + span {
  color: var(--bb-primary-inverse);
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
}

/* Rating */
.bb-b2c-filter-rating-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bb-b2c-filter-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-emphasis-color) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-filter-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.0625rem;
  color: var(--bb-warning);
}

.bb-b2c-filter-rating-stars .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Footer */
.bb-b2c-filter-footer {
  padding: 0.875rem 1rem;
  background-color: var(--bb-body-bg);
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-filter-submit {
  width: 100%;
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* Mini promo */
.bb-b2c-filter-promo-mini {
  padding: 1rem;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 35%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated)), color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated)));
  color: var(--bb-emphasis-color);
}

.bb-b2c-filter-promo-mini h3 {
  margin: 0 0 0.4375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-filter-promo-mini p {
  margin: 0 0 0.75rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-table-line-height);
}

.bb-b2c-filter-promo-mini .btn {
  min-height: 2.125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-filter-panel {
    position: static;
  }
}
/* =====================================
   B2C Inline Sponsored Product Card List
   Component-specific
===================================== */
.bb-b2c-inline-sponsored-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 28%), linear-gradient(135deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated)) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

/* -------------------------------------
   Head
------------------------------------- */
.bb-b2c-inline-sponsored-head {
  min-width: 0;
}

.bb-b2c-inline-sponsored-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 1.625rem;
  margin-bottom: 0.625rem;
  padding: 0 0.625rem;
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 90%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-inline-sponsored-badge .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-inline-sponsored-copy {
  min-width: 0;
}

.bb-b2c-inline-sponsored-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  margin-bottom: 0.625rem;
  padding: 0 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-inline-sponsored-label .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-inline-sponsored-title {
  margin: 0 0 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

.bb-b2c-inline-sponsored-text {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Products
------------------------------------- */
.bb-b2c-inline-sponsored-products {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-b2c-inline-sponsored-product {
  display: grid;
  grid-template-columns: 4.625rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  min-width: 0;
  padding: 0.625rem;
  color: inherit !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-inline-sponsored-product:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-inline-sponsored-product-media {
  width: 4.625rem;
  height: 4.625rem;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius);
}

.bb-b2c-inline-sponsored-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2c-inline-sponsored-product-body {
  min-width: 0;
}

.bb-b2c-inline-sponsored-product-title {
  display: -webkit-box;
  min-height: 2.125rem;
  max-height: 2.125rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.4;
}

.bb-b2c-inline-sponsored-product-note {
  display: block;
  margin-top: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: 1.3;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-inline-sponsored-card {
    grid-template-columns: 1fr;
  }
  .bb-b2c-inline-sponsored-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-inline-sponsored-card {
    padding: 0.875rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-inline-sponsored-products {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2C Product Browsing History
   Component-specific
===================================== */
.bb-b2c-browsing-history {
  --bb-b2c-history-primary: var(--bb-primary);
  --bb-b2c-history-primary-soft: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-b2c-history-ink: var(--bb-emphasis-color);
  --bb-b2c-history-muted: var(--bb-secondary-color);
  --bb-b2c-history-border: var(--bb-border-color);
  --bb-b2c-history-radius-xl: var(--bb-radius-xl);
  --bb-b2c-history-radius-lg: var(--bb-radius-lg);
  --bb-b2c-history-radius: var(--bb-radius);
  --bb-b2c-history-shadow: var(--bb-shadow-xs);
  --bb-b2c-history-shadow-hover: var(--bb-shadow-sm);
  padding-top: 1.75rem;
}

.bb-b2c-browsing-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-b2c-browsing-history-head-copy {
  min-width: 0;
}

.bb-b2c-browsing-history-label {
  margin-bottom: 0.625rem;
}

.bb-b2c-browsing-history-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-browsing-history-title {
  margin: 0;
  color: var(--bb-b2c-history-ink);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-browsing-history-title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.125rem;
  margin-top: 0.625rem;
  background-color: var(--bb-warning);
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-browsing-history-all-link {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-b2c-browsing-history-all-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Carousel */
.bb-b2c-browsing-history-carousel {
  position: relative;
  overflow: hidden;
  padding: 2.625rem 2.75rem 2.875rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 32%), var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-b2c-history-radius-xl);
  box-shadow: var(--bb-b2c-history-shadow);
}

.bb-b2c-browsing-history-carousel-inner {
  overflow: hidden;
}

.bb-b2c-browsing-history-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* Controls */
.bb-b2c-browsing-history-control {
  top: 50%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.bb-b2c-browsing-history-control:hover {
  color: var(--bb-primary);
  background-color: var(--bb-surface-elevated);
}

.bb-b2c-browsing-history-control-prev {
  left: 0.625rem;
}

.bb-b2c-browsing-history-control-next {
  right: 0.625rem;
}

.bb-b2c-browsing-history-control .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Indicators */
.bb-b2c-browsing-history-indicators {
  right: 0;
  bottom: 0.8125rem;
  left: 0;
  gap: 0.5rem;
  margin: 0;
}

.bb-b2c-browsing-history-indicators [data-bs-target] {
  width: 0.4375rem;
  height: 0.4375rem;
  min-width: 0.4375rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  border: 0;
  border-radius: var(--bb-radius-pill);
  opacity: 1;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.bb-b2c-browsing-history-indicators .active {
  width: 1.375rem;
  background-color: var(--bb-warning);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-b2c-browsing-history-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-b2c-browsing-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-browsing-history-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-browsing-history-all-link {
    width: 100%;
    justify-content: center;
  }
  .bb-b2c-browsing-history-carousel {
    padding: 0.875rem 2.25rem 2.5rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-browsing-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-browsing-history-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2C Related Category Links
   Component-specific
===================================== */
.bb-b2c-related-category-links {
  margin-bottom: 1.625rem;
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-related-category-links-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bb-b2c-related-category-links-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-b2c-related-category-links-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

/* -------------------------------------
   Links
------------------------------------- */
.bb-b2c-related-category-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bb-b2c-related-category-links-item {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  max-width: 100%;
  padding: 0 0.875rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  transition: color var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-related-category-links-item:hover {
  transform: translateY(-1px);
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 6%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-related-category-links-item span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-b2c-related-category-links-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: 1;
  transition: color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-related-category-links-item:hover .material-symbols-outlined {
  color: var(--bb-primary);
  transform: translateX(2px);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 767.98px) {
  .bb-b2c-related-category-links {
    padding: 0.875rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-related-category-links-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bb-b2c-related-category-links-item {
    width: 100%;
    border-radius: var(--bb-radius-lg);
  }
}
/* =====================================
   B2C Popular Product Categories
   Inner component only
===================================== */
.bb-b2c-popular-categories {
  min-width: 0;
}

.bb-b2c-popular-categories-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bb-b2c-popular-categories-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bb-b2c-popular-categories-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.bb-b2c-popular-categories-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-popular-categories-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-b2c-popular-categories-item {
  position: relative;
  overflow: hidden;
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  transition: transform var(--bb-transition-normal), box-shadow var(--bb-transition-normal), border-color var(--bb-transition-normal);
}

.bb-b2c-popular-categories-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background-color: var(--bb-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-popular-categories-item:hover {
  transform: translateY(-0.125rem);
  color: var(--bb-emphasis-color);
  border-color: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-popular-categories-item:hover::after {
  transform: scaleX(1);
}

.bb-b2c-popular-categories-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary-light);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-popular-categories-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-b2c-popular-categories-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2c-popular-categories-arrow {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-popular-categories-arrow .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-popular-categories-item:hover .bb-b2c-popular-categories-arrow {
  transform: translateX(0.125rem);
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-popular-categories-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-popular-categories-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-popular-categories-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-popular-categories-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-popular-categories-row {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2C Product Color Variants
   Component-specific
   Uses Main CSS: bb-chip
===================================== */
.bb-b2c-product-color-variants {
  margin: 0;
  padding: 1.125rem 1.375rem;
  border-bottom: var(--bb-border-width) dashed var(--bb-border-color);
}

.bb-b2c-product-color-variants:first-child {
  padding-top: 0;
}

.bb-b2c-product-color-variants:last-child {
  border-bottom: 0;
}

.bb-b2c-product-color-variants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-product-color-variants-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-product-color-variants-title strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-product-color-variants-title span {
  color: var(--bb-secondary-color);
  font-weight: var(--bb-fw-semibold);
}

/* -------------------------------------
   List
------------------------------------- */
.bb-b2c-product-color-variants-list {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  overflow-x: auto;
  padding: 0.1875rem 0.125rem 0.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.bb-b2c-product-color-variant {
  position: relative;
  width: 4rem;
  min-width: 4rem;
  min-height: 4rem;
  flex: 0 0 4rem;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-product-color-variant:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-product-color-variant.is-active {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-b2c-product-color-variant.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
  border-style: dashed;
  background-color: color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-white));
}

.bb-b2c-product-color-variant.is-disabled:hover {
  transform: none;
  border-color: var(--bb-border-color);
  box-shadow: none;
}

.bb-b2c-product-color-variant.is-disabled::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  height: 1px;
  background-color: color-mix(in srgb, var(--bb-emphasis-color) 28%, transparent);
  transform: rotate(-22deg);
  pointer-events: none;
}

/* -------------------------------------
   Image / Text
------------------------------------- */
.bb-b2c-product-color-variant-image {
  width: 100%;
  height: 100%;
  min-height: 4rem;
  padding: 0.1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-product-color-variant-image img {
  display: block;
  width: 100%;
  height: 3.625rem;
  object-fit: contain;
  border-radius: calc(var(--bb-radius) - 0.125rem);
}

.bb-b2c-product-color-variant-text {
  min-width: 3.625rem;
  min-height: 2.5rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  text-align: center;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-product-color-variant-more {
  min-width: 4.75rem;
  min-height: 4rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  text-align: center;
}

/* -------------------------------------
   Tooltip
------------------------------------- */
.bb-b2c-product-variant-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5625rem);
  z-index: 20;
  min-width: 9.375rem;
  max-width: 13.125rem;
  padding: 0.5rem 0.625rem;
  color: var(--bb-white);
  color: var(--bb-white);
  border-radius: var(--bb-radius);
  opacity: 0;
  pointer-events: none;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  text-align: center;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-product-variant-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: var(--bb-dark) transparent transparent;
  transform: translateX(-50%);
}

.bb-b2c-product-color-variant.is-disabled:hover .bb-b2c-product-variant-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 575.98px) {
  .bb-b2c-product-color-variants {
    padding: 0.875rem 1rem;
  }
  .bb-b2c-product-color-variants-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
  .bb-b2c-product-color-variants-list {
    gap: 0.5rem;
  }
  .bb-b2c-product-color-variant {
    width: 3.625rem;
    min-width: 3.625rem;
    min-height: 3.625rem;
    flex-basis: 3.625rem;
  }
  .bb-b2c-product-color-variant-image {
    min-height: 3.625rem;
  }
  .bb-b2c-product-color-variant-image img {
    height: 3.25rem;
  }
  .bb-b2c-product-color-variant-more {
    min-height: 3.625rem;
  }
}
/* =====================================
   B2C Product Size Variants
   Component-specific
   Uses Main CSS: bb-chip
===================================== */
.bb-b2c-product-size-variants {
  margin: 0;
  padding: 1.125rem 1.375rem 1.375rem;
  border-bottom: var(--bb-border-width) dashed var(--bb-border-color);
}

.bb-b2c-product-size-variants:first-child {
  padding-top: 0;
}

.bb-b2c-product-size-variants:last-child {
  border-bottom: 0;
}

.bb-b2c-product-size-variants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-product-size-variants-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-product-size-variants-title strong {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-product-size-variants-title span {
  color: var(--bb-secondary-color);
  font-weight: var(--bb-fw-semibold);
}

.bb-b2c-product-size-guide {
  flex: 0 0 auto;
}

.bb-b2c-product-size-guide .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* -------------------------------------
   List
------------------------------------- */
.bb-b2c-product-size-variants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-b2c-product-size-variant {
  position: relative;
  min-width: 2.625rem;
  min-height: 2.625rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
  cursor: pointer;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-heading);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast), background-color var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-b2c-product-size-variant:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-product-size-variant.is-active {
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-primary);
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 16%, transparent);
}

.bb-b2c-product-size-variant.is-active::after {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  margin-left: 0.375rem;
  background-color: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}

.bb-b2c-product-size-variant.is-disabled {
  opacity: 0.64;
  color: var(--bb-secondary-color) !important;
  background-color: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white));
  border-style: dashed;
  cursor: not-allowed;
}

.bb-b2c-product-size-variant.is-disabled:hover {
  transform: none;
  border-color: var(--bb-border-color);
  box-shadow: none;
}

.bb-b2c-product-size-variant.is-disabled::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  height: 1px;
  background-color: color-mix(in srgb, var(--bb-emphasis-color) 28%, transparent);
  transform: rotate(-18deg);
  pointer-events: none;
}

/* -------------------------------------
   Tooltip
------------------------------------- */
.bb-b2c-product-size-variant-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5625rem);
  z-index: 20;
  min-width: 9.375rem;
  max-width: 13.125rem;
  padding: 0.5rem 0.625rem;
  color: var(--bb-white);
  color: var(--bb-white);
  border-radius: var(--bb-radius);
  opacity: 0;
  pointer-events: none;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  text-align: center;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-product-size-variant-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: var(--bb-dark) transparent transparent;
  transform: translateX(-50%);
}

.bb-b2c-product-size-variant.is-disabled:hover .bb-b2c-product-size-variant-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 575.98px) {
  .bb-b2c-product-size-variants {
    padding: 0.875rem 1rem 1rem;
  }
  .bb-b2c-product-size-variants-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
  .bb-b2c-product-size-variant {
    min-width: 2.6875rem;
    min-height: 2.25rem;
    padding: 0 0.625rem;
    font-size: var(--bb-fs-sm);
  }
}
/* =====================================
   B2C Product Installments
   Component-specific
   Uses Main CSS: bb-card, bb-chip
===================================== */
.bb-b2c-product-installments {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

/* -------------------------------------
   Grid
------------------------------------- */
.bb-b2c-product-installments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  padding: 1.125rem;
}

.bb-b2c-product-installment-card {
  --bb-card-radius: var(--bb-radius);
  --bb-card-shadow: var(--bb-shadow-xs);
  overflow: hidden;
}

/* -------------------------------------
   Bank head
------------------------------------- */
.bb-b2c-product-installment-card-head {
  display: grid;
  grid-template-columns: 3.875rem minmax(0, 1fr);
  gap: 0.8125rem;
  align-items: center;
  min-height: 4.625rem;
  padding: 0.875rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, var(--bb-tertiary-bg) 100%);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-product-installment-logo {
  width: 3.875rem;
  height: 3.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-product-installment-logo img {
  display: block;
  max-width: 100%;
  max-height: 3.25rem;
  object-fit: contain;
}

.bb-b2c-product-installment-logo > span {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  text-align: center;
}

.bb-b2c-product-installment-bank {
  min-width: 0;
}

.bb-b2c-product-installment-bank strong {
  display: block;
  margin-bottom: 0.4375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

/* -------------------------------------
   Table
------------------------------------- */
.bb-b2c-product-installment-table-wrap {
  overflow-x: auto;
}

.bb-b2c-product-installment-table {
  width: 100%;
  min-width: 18.75rem;
  border-collapse: collapse;
}

.bb-b2c-product-installment-table th {
  padding: 0.625rem 0.75rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-2xs);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-align: left;
  white-space: nowrap;
}

.bb-b2c-product-installment-table td {
  padding: 0.6875rem 0.75rem;
  color: var(--bb-secondary-color);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
  white-space: nowrap;
}

.bb-b2c-product-installment-table tr:last-child td {
  border-bottom: 0;
}

.bb-b2c-product-installment-table tr.is-highlighted td {
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-surface-elevated));
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-product-installment-table tr.is-highlighted td:first-child {
  position: relative;
}

.bb-b2c-product-installment-table tr.is-highlighted td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625rem;
  bottom: 0.5625rem;
  width: 0.25rem;
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-product-installment-unavailable {
  color: var(--bb-tertiary-color) !important;
  font-weight: var(--bb-fw-medium) !important;
}

/* -------------------------------------
   Info
------------------------------------- */
.bb-b2c-product-installment-info {
  margin: 0 1.125rem 1.125rem;
  padding: 0.9375rem 1rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius);
}

.bb-b2c-product-installment-info.is-empty {
  margin-top: 1.125rem;
}

.bb-b2c-product-installment-info h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-b2c-product-installment-info-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-white));
  border-radius: var(--bb-radius);
}

.bb-b2c-product-installment-info-icon .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-b2c-product-installment-info ul {
  margin: 0;
  padding-left: 1.125rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-product-installment-info li {
  margin-bottom: 0.375rem;
}

.bb-b2c-product-installment-info li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-b2c-product-installments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-product-installments {
    border-radius: var(--bb-radius);
  }
  .bb-b2c-product-installments-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.875rem;
  }
  .bb-b2c-product-installment-card {
    --bb-card-radius: var(--bb-radius);
  }
  .bb-b2c-product-installment-card-head {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    min-height: 4.25rem;
    padding: 0.75rem;
  }
  .bb-b2c-product-installment-logo {
    width: 3.5rem;
    height: 3.5rem;
  }
  .bb-b2c-product-installment-logo img {
    max-height: 3rem;
  }
  .bb-b2c-product-installment-bank strong {
    font-size: var(--bb-fs-base);
  }
  .bb-b2c-product-installment-info {
    margin: 0 0.875rem 0.875rem;
    padding: 0.875rem;
  }
}
/* =====================================
   B2C Homepage Slider
   Component-specific
   Uses Bootstrap carousel + Main CSS tokens/chips/buttons
   Scope: .bb-b2c-homepage-slider
===================================== */
/* =====================================
   B2C Homepage Slider Mode Tokens
===================================== */
.bb-b2c-homepage-slider {
  --bb-b2c-homepage-slider-carousel-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 22%, transparent),
          transparent 28%
      ),
      radial-gradient(
          circle at 12% 88%,
          color-mix(in srgb, var(--bb-success) 12%, transparent),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated)) 0%,
          color-mix(in srgb, var(--bb-primary) 6%, var(--bb-white, var(--bb-white))) 46%,
          color-mix(in srgb, var(--bb-warning) 12%, var(--bb-white, var(--bb-white))) 100%
      );
  --bb-b2c-homepage-slider-carousel-border: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  --bb-b2c-homepage-slider-carousel-shadow: var(--bb-shadow-sm);
  --bb-b2c-homepage-slider-orb-one: color-mix(in srgb, var(--bb-surface-elevated) 26%, transparent);
  --bb-b2c-homepage-slider-orb-two: color-mix(in srgb, var(--bb-surface-elevated) 20%, transparent);
  --bb-b2c-homepage-slider-picture-bg: color-mix(in srgb, var(--bb-surface-elevated) 88%, transparent);
  --bb-b2c-homepage-slider-picture-border: color-mix(in srgb, var(--bb-white, var(--bb-white)) 78%, transparent);
  --bb-b2c-homepage-slider-picture-shadow: 0 1.25rem 2.875rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-b2c-homepage-slider-dot-bg: color-mix(in srgb, var(--bb-emphasis-color) 22%, transparent);
  --bb-b2c-homepage-slider-dot-active-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--bb-primary) 32%, transparent);
  --bb-b2c-homepage-slider-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 72%, transparent);
  --bb-b2c-homepage-slider-control-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 92%, transparent);
  --bb-b2c-homepage-slider-control-border: color-mix(in srgb, var(--bb-white, var(--bb-white)) 76%, transparent);
  --bb-b2c-homepage-slider-control-border-hover: color-mix(in srgb, var(--bb-primary) 32%, var(--bb-white, var(--bb-white)));
  --bb-b2c-homepage-slider-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 22%, transparent);
  --bb-b2c-homepage-slider-control-shadow-hover:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent),
      0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
}

html[data-bs-theme=navy] .bb-b2c-homepage-slider {
  --bb-b2c-homepage-slider-carousel-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 28%
      ),
      radial-gradient(
          circle at 12% 88%,
          color-mix(in srgb, var(--bb-success) 10%, transparent),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-surface-elevated) 90%, var(--bb-body-bg)) 46%,
          color-mix(in srgb, var(--bb-warning) 9%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-homepage-slider-carousel-border: color-mix(in srgb, var(--bb-primary) 19%, var(--bb-border-color));
  --bb-b2c-homepage-slider-carousel-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent);
  --bb-b2c-homepage-slider-orb-one: color-mix(in srgb, var(--bb-surface-elevated) 20%, transparent);
  --bb-b2c-homepage-slider-orb-two: color-mix(in srgb, var(--bb-surface-elevated) 16%, transparent);
  --bb-b2c-homepage-slider-picture-bg: color-mix(in srgb, var(--bb-surface-elevated) 76%, transparent);
  --bb-b2c-homepage-slider-picture-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2c-homepage-slider-picture-shadow:
      0 1.25rem 2.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 22%, transparent);
  --bb-b2c-homepage-slider-dot-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 30%, transparent);
  --bb-b2c-homepage-slider-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 70%, transparent);
  --bb-b2c-homepage-slider-control-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 88%, transparent);
  --bb-b2c-homepage-slider-control-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2c-homepage-slider-control-border-hover: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2c-homepage-slider-control-shadow:
      0 0.75rem 1.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 20%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 9%, transparent);
  --bb-b2c-homepage-slider-control-shadow-hover:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 26%, transparent),
      0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
}

html[data-bs-theme=dark] .bb-b2c-homepage-slider {
  --bb-b2c-homepage-slider-carousel-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 28%
      ),
      radial-gradient(
          circle at 12% 88%,
          color-mix(in srgb, var(--bb-success) 9%, transparent),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-surface-elevated) 88%, var(--bb-body-bg)) 46%,
          color-mix(in srgb, var(--bb-warning) 8%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-homepage-slider-carousel-border: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2c-homepage-slider-carousel-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 26%, transparent);
  --bb-b2c-homepage-slider-orb-one: color-mix(in srgb, var(--bb-surface-elevated) 18%, transparent);
  --bb-b2c-homepage-slider-orb-two: color-mix(in srgb, var(--bb-surface-elevated) 14%, transparent);
  --bb-b2c-homepage-slider-picture-bg: color-mix(in srgb, var(--bb-surface-elevated) 72%, transparent);
  --bb-b2c-homepage-slider-picture-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2c-homepage-slider-picture-shadow:
      0 1.25rem 2.875rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 26%, transparent);
  --bb-b2c-homepage-slider-dot-bg: color-mix(in srgb, var(--bb-white, var(--bb-white)) 28%, transparent);
  --bb-b2c-homepage-slider-control-bg: color-mix(in srgb, var(--bb-surface-elevated) 68%, transparent);
  --bb-b2c-homepage-slider-control-bg-hover: color-mix(in srgb, var(--bb-surface-elevated) 88%, transparent);
  --bb-b2c-homepage-slider-control-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-b2c-homepage-slider-control-border-hover: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2c-homepage-slider-control-shadow:
      0 0.75rem 1.75rem rgba(0, 0, 0, 0.22),
      inset 0 0 0 1px color-mix(in srgb, var(--bb-white, var(--bb-white)) 8%, transparent);
  --bb-b2c-homepage-slider-control-shadow-hover:
      0 1rem 2.25rem color-mix(in srgb, var(--bb-black, var(--bb-black)) 28%, transparent),
      0 0 0 0.25rem color-mix(in srgb, var(--bb-primary) 12%, transparent);
}

/* =====================================
   Base
===================================== */
.bb-b2c-homepage-slider {
  position: relative;
}

.bb-b2c-homepage-slider-carousel {
  position: relative;
  overflow: hidden;
  min-height: 31.25rem;
  background: var(--bb-b2c-homepage-slider-carousel-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-homepage-slider-carousel-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-homepage-slider-carousel-shadow);
}

.bb-b2c-homepage-slider-carousel::before {
  content: "";
  position: absolute;
  right: -5rem;
  top: -5rem;
  z-index: 1;
  width: 17.5rem;
  height: 17.5rem;
  background-color: var(--bb-b2c-homepage-slider-orb-one);
  border-radius: 50%;
}

.bb-b2c-homepage-slider-carousel::after {
  content: "";
  position: absolute;
  left: -4.375rem;
  bottom: -5.625rem;
  z-index: 1;
  width: 15rem;
  height: 15rem;
  background-color: var(--bb-b2c-homepage-slider-orb-two);
  border-radius: 50%;
}

.bb-b2c-homepage-slider-inner {
  position: relative;
  z-index: 2;
  min-height: 31.25rem;
}

.bb-b2c-homepage-slider-item {
  min-height: 31.25rem;
}

.bb-b2c-homepage-slider-slide {
  min-height: 31.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.88fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(4.5rem, 6vw, 5.5rem);
}

/* =====================================
   Copy
===================================== */
.bb-b2c-homepage-slider-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  max-width: 44rem;
  padding-left: clamp(0.75rem, 2vw, 1.75rem);
}

.bb-b2c-homepage-slider-label {
  margin-bottom: 1rem;
}

.bb-b2c-homepage-slider-label .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-b2c-homepage-slider-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 5vw, 3.125rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.bb-b2c-homepage-slider-text {
  max-width: 37.5rem;
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-loose);
}

.bb-b2c-homepage-slider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bb-b2c-homepage-slider-btn {
  min-height: 3rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-homepage-slider-btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-homepage-slider-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* =====================================
   Visual
===================================== */
.bb-b2c-homepage-slider-visual {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-homepage-slider-picture-card {
  width: min(100%, 27.5rem);
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background-color: var(--bb-b2c-homepage-slider-picture-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-homepage-slider-picture-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-homepage-slider-picture-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-b2c-homepage-slider-picture-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--bb-radius-2xl) - 0.625rem);
}

.bb-b2c-homepage-slider-picture-placeholder {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: var(--bb-tertiary-bg);
  border-radius: calc(var(--bb-radius-2xl) - 0.625rem);
}

.bb-b2c-homepage-slider-picture-placeholder .material-symbols-outlined {
  font-size: var(--bb-fs-display-lg);
  line-height: 1;
}

/* =====================================
   Indicators
===================================== */
.bb-b2c-homepage-slider-indicators {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 1.25rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  width: auto;
  margin: 0;
  transform: translateX(-50%);
}

.bb-b2c-homepage-slider-dot {
  width: 0.5rem !important;
  height: 0.5rem !important;
  margin: 0 !important;
  background-color: var(--bb-b2c-homepage-slider-dot-bg) !important;
  border: 0 !important;
  border-radius: var(--bb-radius-pill) !important;
  opacity: 1 !important;
  transition: width var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-b2c-homepage-slider-dot.active {
  width: 1.625rem !important;
  background-color: var(--bb-primary) !important;
  box-shadow: var(--bb-b2c-homepage-slider-dot-active-shadow);
}

/* =====================================
   Controls
===================================== */
.bb-b2c-homepage-slider-control {
  top: 50%;
  z-index: 6;
  width: 3.125rem;
  height: 3.125rem;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2c-homepage-slider-control-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-homepage-slider-control-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2c-homepage-slider-control-shadow);
  opacity: 0.86;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity var(--bb-transition-fast), background-color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-homepage-slider-control:hover {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2c-homepage-slider-control-bg-hover);
  border-color: var(--bb-b2c-homepage-slider-control-border-hover);
  box-shadow: var(--bb-b2c-homepage-slider-control-shadow-hover);
  opacity: 1;
  transform: translateY(-50%) scale(1.045);
}

.bb-b2c-homepage-slider-control-prev {
  left: 1.25rem;
}

.bb-b2c-homepage-slider-control-next {
  right: 1.25rem;
}

.bb-b2c-homepage-slider-control .material-symbols-outlined {
  font-size: 1.875rem;
  line-height: 1;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-b2c-homepage-slider-carousel,
  .bb-b2c-homepage-slider-inner,
  .bb-b2c-homepage-slider-item,
  .bb-b2c-homepage-slider-slide {
    min-height: auto;
  }
  .bb-b2c-homepage-slider-slide {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .bb-b2c-homepage-slider-copy {
    max-width: 100%;
    padding-left: 0;
  }
  .bb-b2c-homepage-slider-picture-card {
    width: min(100%, 22.5rem);
  }
  .bb-b2c-homepage-slider-indicators {
    position: static;
    width: 100%;
    padding: 0 1.5rem 1.25rem;
    transform: none;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-homepage-slider-carousel {
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-homepage-slider-slide {
    padding: 1.25rem;
  }
  .bb-b2c-homepage-slider-title {
    font-size: var(--bb-fs-3xl);
  }
  .bb-b2c-homepage-slider-text {
    font-size: var(--bb-fs-sm);
    line-height: var(--bb-line-height-content);
  }
  .bb-b2c-homepage-slider-actions {
    flex-direction: column;
  }
  .bb-b2c-homepage-slider-btn {
    width: 100%;
  }
  .bb-b2c-homepage-slider-pills {
    display: none;
  }
  .bb-b2c-homepage-slider-picture-card {
    width: min(100%, 18rem);
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-homepage-slider-picture-card img,
  .bb-b2c-homepage-slider-picture-placeholder {
    border-radius: calc(var(--bb-radius-xl) - 0.625rem);
  }
}
/* =====================================
   B2C Deals Of The Day
   Component-specific
   Stable product grid version
===================================== */
.bb-b2c-deals-day {
  position: relative;
}

.bb-b2c-deals-day-shell {
  --bb-card-radius: var(--bb-radius-2xl);
  --bb-card-shadow: var(--bb-shadow-sm);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--bb-warning) 16%, transparent), transparent 30%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-warning) 5%, var(--bb-body-bg)) 100%);
}

/* Head */
.bb-b2c-deals-day-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.bb-b2c-deals-day-head-copy {
  min-width: 0;
  max-width: 48rem;
}

.bb-b2c-deals-day-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2c-deals-day-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-deals-day-head-right {
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.bb-b2c-deals-day-timer-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bb-b2c-deals-day-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bb-b2c-deals-day-timer span {
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-white);
  background-color: var(--bb-danger);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-deals-day-all-link {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-deals-day-all-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Grid */
.bb-b2c-deals-day-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* Empty */
.bb-b2c-deals-day-empty {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  padding: 2rem;
  text-align: center;
  background-color: var(--bb-body-bg);
}

.bb-b2c-deals-day-empty-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-danger);
  background-color: var(--bb-danger-light);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-deals-day-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-b2c-deals-day-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-deals-day-empty p {
  max-width: 34rem;
  margin: 0.5rem auto 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-deals-day-empty .btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-deals-day-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-deals-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-deals-day-shell {
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-deals-day-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-deals-day-head-right {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
  .bb-b2c-deals-day-all-link {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-deals-day-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2C Category Showcase
   Flat / Icon Based / Home Friendly
   Scope: .bb-b2c-category-showcase
===================================== */
/* =====================================
   B2C Category Showcase Mode Tokens
===================================== */
.bb-b2c-category-showcase {
  --bb-b2c-category-showcase-surface: var(--bb-body-bg);
  --bb-b2c-category-showcase-card-bg: var(--bb-card-bg, var(--bb-surface-elevated));
  --bb-b2c-category-showcase-border: var(--bb-border-color);
  --bb-b2c-category-showcase-primary-border: color-mix(in srgb, var(--bb-primary) 28%, transparent);
  --bb-b2c-category-showcase-primary-border-strong: color-mix(in srgb, var(--bb-primary) 38%, var(--bb-border-color));
  --bb-b2c-category-showcase-chip-bg: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-b2c-category-showcase-chip-color: color-mix(in srgb, var(--bb-primary) 76%, var(--bb-emphasis-color) 24%);
  --bb-b2c-category-showcase-action-bg: var(--bb-body-bg);
  --bb-b2c-category-showcase-action-border-hover: color-mix(in srgb, var(--bb-primary) 45%, var(--bb-border-color));
  --bb-b2c-category-showcase-card-hover-bg: color-mix(in srgb, var(--bb-primary) 4%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-bg: color-mix(in srgb, var(--bb-primary) 13%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-border: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2c-category-showcase-icon-hover-bg: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-hover-border: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-b2c-category-showcase-shell-shadow: var(--bb-shadow-xs);
  --bb-b2c-category-showcase-card-shadow: var(--bb-shadow-xs);
  --bb-b2c-category-showcase-card-shadow-hover: var(--bb-shadow-sm);
}

html[data-bs-theme=navy] .bb-b2c-category-showcase {
  --bb-b2c-category-showcase-surface: var(--bb-surface-elevated);
  --bb-b2c-category-showcase-card-bg: var(--bb-card-bg, var(--bb-surface-elevated));
  --bb-b2c-category-showcase-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2c-category-showcase-primary-border: color-mix(in srgb, var(--bb-primary) 25%, transparent);
  --bb-b2c-category-showcase-primary-border-strong: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  --bb-b2c-category-showcase-chip-bg: color-mix(in srgb, var(--bb-primary) 15%, transparent);
  --bb-b2c-category-showcase-chip-color: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-b2c-category-showcase-action-bg: var(--bb-surface-elevated);
  --bb-b2c-category-showcase-action-border-hover: color-mix(in srgb, var(--bb-primary) 40%, var(--bb-border-color));
  --bb-b2c-category-showcase-card-hover-bg: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-bg: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2c-category-showcase-icon-hover-bg: color-mix(in srgb, var(--bb-primary) 19%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-hover-border: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-b2c-category-showcase-shell-shadow:
      0 14px 34px color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2c-category-showcase-card-shadow:
      0 10px 24px color-mix(in srgb, var(--bb-black) 20%, transparent);
  --bb-b2c-category-showcase-card-shadow-hover:
      0 16px 34px color-mix(in srgb, var(--bb-black) 28%, transparent);
}

html[data-bs-theme=dark] .bb-b2c-category-showcase {
  --bb-b2c-category-showcase-surface: var(--bb-body-bg);
  --bb-b2c-category-showcase-card-bg: var(--bb-card-bg, var(--bb-surface-elevated));
  --bb-b2c-category-showcase-border: var(--bb-border-color);
  --bb-b2c-category-showcase-primary-border: color-mix(in srgb, var(--bb-primary) 24%, transparent);
  --bb-b2c-category-showcase-primary-border-strong: color-mix(in srgb, var(--bb-primary) 36%, var(--bb-border-color));
  --bb-b2c-category-showcase-chip-bg: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-b2c-category-showcase-chip-color: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-b2c-category-showcase-action-bg: var(--bb-body-bg);
  --bb-b2c-category-showcase-action-border-hover: color-mix(in srgb, var(--bb-primary) 40%, var(--bb-border-color));
  --bb-b2c-category-showcase-card-hover-bg: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-bg: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-border: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2c-category-showcase-icon-hover-bg: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-card-bg, var(--bb-body-bg)));
  --bb-b2c-category-showcase-icon-hover-border: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  --bb-b2c-category-showcase-shell-shadow:
      0 14px 34px color-mix(in srgb, var(--bb-black) 24%, transparent);
  --bb-b2c-category-showcase-card-shadow:
      0 10px 24px color-mix(in srgb, var(--bb-black) 22%, transparent);
  --bb-b2c-category-showcase-card-shadow-hover:
      0 16px 34px color-mix(in srgb, var(--bb-black) 32%, transparent);
}

/* =====================================
   Showcase Shell
===================================== */
.bb-b2c-category-showcase {
  position: relative;
}

.bb-b2c-category-showcase-shell {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background-color: var(--bb-b2c-category-showcase-surface);
  border: 1px solid var(--bb-b2c-category-showcase-border);
  border-radius: var(--bb-radius-3xl);
  box-shadow: var(--bb-b2c-category-showcase-shell-shadow);
}

.bb-b2c-category-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.bb-b2c-category-showcase-head-left {
  max-width: 56rem;
}

.bb-b2c-category-showcase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.4rem 0.875rem;
  margin-bottom: 0.75rem;
  color: var(--bb-b2c-category-showcase-chip-color);
  background-color: var(--bb-b2c-category-showcase-chip-bg);
  border: 1px solid var(--bb-b2c-category-showcase-primary-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-category-showcase-chip .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.bb-b2c-category-showcase-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold, 800);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2c-category-showcase-text {
  max-width: 54rem;
  margin: 0.65rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-category-showcase-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.65rem 1rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2c-category-showcase-action-bg);
  border: 1px solid var(--bb-b2c-category-showcase-border);
  border-radius: var(--bb-radius-pill);
  text-decoration: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-category-showcase-action:hover {
  color: var(--bb-emphasis-color);
  border-color: var(--bb-b2c-category-showcase-action-border-hover);
  box-shadow: var(--bb-shadow-xs);
  transform: translateY(-1px);
  text-decoration: none;
}

.bb-b2c-category-showcase-action .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

/* =====================================
   Grid / Cards
===================================== */
.bb-b2c-category-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2c-category-showcase-card {
  position: relative;
  min-height: 10rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2c-category-showcase-card-bg);
  border: 1px solid var(--bb-b2c-category-showcase-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-category-showcase-card-shadow);
  text-align: center;
  text-decoration: none !important;
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-category-showcase-card:hover {
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2c-category-showcase-card-hover-bg);
  border-color: var(--bb-b2c-category-showcase-primary-border-strong);
  box-shadow: var(--bb-b2c-category-showcase-card-shadow-hover);
  transform: translateY(-3px);
  text-decoration: none !important;
}

.bb-b2c-category-showcase-icon {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-b2c-category-showcase-icon-bg);
  border: 1px solid var(--bb-b2c-category-showcase-icon-border);
  border-radius: var(--bb-radius-2xl);
  transition: transform var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-b2c-category-showcase-card:hover .bb-b2c-category-showcase-icon {
  background-color: var(--bb-b2c-category-showcase-icon-hover-bg);
  border-color: var(--bb-b2c-category-showcase-icon-hover-border);
  transform: translateY(-2px);
}

.bb-b2c-category-showcase-icon .material-symbols-outlined {
  font-size: 2.65rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 40;
}

.bb-b2c-category-showcase-content {
  display: block;
  width: 100%;
}

.bb-b2c-category-showcase-card-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.35;
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =====================================
   Responsive
===================================== */
@media (min-width: 576px) {
  .bb-b2c-category-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .bb-b2c-category-showcase-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-category-showcase-shell {
    padding: 1rem;
    border-radius: var(--bb-radius-2xl);
  }
  .bb-b2c-category-showcase-title {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }
  .bb-b2c-category-showcase-text {
    font-size: var(--bb-fs-sm);
  }
  .bb-b2c-category-showcase-card {
    min-height: 9.25rem;
    padding: 1rem;
    gap: 0.875rem;
  }
  .bb-b2c-category-showcase-icon {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-category-showcase-icon .material-symbols-outlined {
    font-size: 2.25rem;
  }
  .bb-b2c-category-showcase-card-title {
    font-size: var(--bb-fs-sm);
  }
}
@media (max-width: 420px) {
  .bb-b2c-category-showcase-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-category-showcase-card {
    min-height: auto;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .bb-b2c-category-showcase-icon {
    flex: 0 0 auto;
  }
}
/* =====================================
   B2C New Arrivals
   Component-specific
   Uses Main CSS: bb-card, bb-chip, buttons
===================================== */
.bb-b2c-new-arrivals {
  position: relative;
}

.bb-b2c-new-arrivals-shell {
  --bb-card-radius: var(--bb-radius-2xl);
  --bb-card-shadow: var(--bb-shadow-sm);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 30%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg)) 100%);
}

/* Head */
.bb-b2c-new-arrivals-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.bb-b2c-new-arrivals-head-copy {
  min-width: 0;
  max-width: 48rem;
}

.bb-b2c-new-arrivals-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2c-new-arrivals-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-new-arrivals-all-link {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-new-arrivals-all-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Grid */
.bb-b2c-new-arrivals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* Card */
.bb-b2c-new-arrivals-card {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bb-body-bg);
}

.bb-b2c-new-arrivals-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/0.82;
  background: radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--bb-primary) 12%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-b2c-new-arrivals-card-image-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.bb-b2c-new-arrivals-card-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 15rem;
  padding: 1rem;
  object-fit: contain;
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-new-arrivals-card:hover .bb-b2c-new-arrivals-card-image-link img {
  transform: scale(1.035);
}

.bb-b2c-new-arrivals-card-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

.bb-b2c-new-arrivals-card-favorite {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color) !important;
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 90%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-xs);
  text-decoration: none !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-b2c-new-arrivals-card-favorite:hover {
  color: var(--bb-danger) !important;
  background-color: var(--bb-surface-elevated);
}

.bb-b2c-new-arrivals-card-favorite .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Body */
.bb-b2c-new-arrivals-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.9375rem;
}

.bb-b2c-new-arrivals-card-category {
  display: block;
  overflow: hidden;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.06em;
  line-height: var(--bb-line-height-heading);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-b2c-new-arrivals-card-title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.625rem;
  color: var(--bb-emphasis-color) !important;
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2c-new-arrivals-card-title:hover {
  color: var(--bb-primary) !important;
}

/* Price */
.bb-b2c-new-arrivals-card-price-row {
  margin-top: 0.75rem;
}

.bb-b2c-new-arrivals-card-price {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2c-new-arrivals-card-price span {
  font-size: var(--bb-fs-sm);
  letter-spacing: 0;
}

.bb-b2c-new-arrivals-card-price-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: 1;
}

/* Meta */
.bb-b2c-new-arrivals-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-top: 0.75rem;
}

/* Actions */
.bb-b2c-new-arrivals-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.875rem;
}

.bb-b2c-new-arrivals-card-actions .btn {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-new-arrivals-card-actions .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-b2c-new-arrivals-empty {
  --bb-card-radius: var(--bb-radius-xl);
  --bb-card-shadow: var(--bb-shadow-xs);
  padding: 2rem;
  text-align: center;
  background-color: var(--bb-body-bg);
}

.bb-b2c-new-arrivals-empty-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-primary);
  background-color: var(--bb-primary-light);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-new-arrivals-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-b2c-new-arrivals-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-new-arrivals-empty p {
  max-width: 34rem;
  margin: 0.5rem auto 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-new-arrivals-empty .btn {
  min-height: 2.75rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-b2c-new-arrivals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-new-arrivals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-new-arrivals-shell {
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-new-arrivals-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-new-arrivals-all-link {
    width: 100%;
  }
  .bb-b2c-new-arrivals-card-actions {
    grid-template-columns: 1fr;
  }
  .bb-b2c-new-arrivals-card-actions .btn {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-new-arrivals-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   B2C Campaign Banners
   Component-specific
   Uses Main CSS: bb-chip, btn, bb-tiny-slider
===================================== */
.bb-b2c-campaign-banners {
  position: relative;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--bb-primary) 14%, transparent), transparent 30%), linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-shadow-xs);
}

/* Head */
.bb-b2c-campaign-banners-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bb-b2c-campaign-banners-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-b2c-campaign-banners-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-campaign-banners-all-link {
  min-height: 2.625rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-campaign-banners-all-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Tiny slider skin */
.bb-b2c-campaign-banners-slider {
  --bb-ts-gap: 1rem;
  --bb-ts-radius: var(--bb-radius-xl);
  --bb-ts-shadow: none;
}

/* Card */
.bb-b2c-campaign-banner-card {
  position: relative;
  overflow: hidden;
  min-height: 15.5rem;
  padding: 1.125rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.42fr);
  gap: 1rem;
  align-items: center;
  color: var(--bb-emphasis-color) !important;
  background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--bb-primary) 18%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated)) 0%, var(--bb-body-bg) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  border-radius: var(--bb-radius-xl);
  text-decoration: none !important;
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-campaign-banner-card:hover {
  transform: translateY(-2px);
  color: var(--bb-emphasis-color) !important;
  border-color: color-mix(in srgb, var(--bb-primary) 42%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-b2c-campaign-banner-card::after {
  content: "";
  position: absolute;
  right: -3.75rem;
  bottom: -4.75rem;
  width: 11.25rem;
  height: 11.25rem;
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2c-campaign-banner-card.is-warm {
  background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--bb-warning) 22%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--bb-warning) 13%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
  border-color: color-mix(in srgb, var(--bb-warning) 32%, var(--bb-border-color));
}

.bb-b2c-campaign-banner-card.is-dark {
  color: var(--bb-white) !important;
  background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--bb-primary) 24%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 88%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border-color: color-mix(in srgb, var(--bb-white) 12%, transparent);
}

.bb-b2c-campaign-banner-card.is-dark .bb-b2c-campaign-banner-title,
.bb-b2c-campaign-banner-card.is-dark .bb-b2c-campaign-banner-text,
.bb-b2c-campaign-banner-card.is-dark .bb-b2c-campaign-banner-action {
  color: var(--bb-white) !important;
}

.bb-b2c-campaign-banner-card.is-dark .bb-b2c-campaign-banner-text {
  opacity: 0.78;
}

/* Copy */
.bb-b2c-campaign-banner-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bb-b2c-campaign-banner-label {
  margin-bottom: 0.75rem;
}

.bb-b2c-campaign-banner-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2c-campaign-banner-text {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bb-b2c-campaign-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  color: var(--bb-primary) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-b2c-campaign-banner-action .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Visual */
.bb-b2c-campaign-banner-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 100%;
  min-height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-b2c-campaign-banner-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 12.5rem;
  object-fit: contain;
  filter: drop-shadow(0 1rem 1.5rem color-mix(in srgb, var(--bb-coal-300) 16%, transparent));
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-campaign-banner-card:hover .bb-b2c-campaign-banner-visual img {
  transform: scale(1.045) rotate(-1deg);
}

.bb-b2c-campaign-banner-placeholder {
  width: 7rem;
  height: 7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-surface-elevated) 78%, transparent);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-white) 70%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-campaign-banner-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-4xl);
  line-height: 1;
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-b2c-campaign-banners-slider[data-bb-items="3"] .bb-ts-slide {
    width: calc((100% - var(--bb-ts-gap)) / 2);
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-campaign-banners {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-campaign-banners-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-campaign-banners-all-link {
    width: 100%;
  }
  .bb-b2c-campaign-banners-slider[data-bb-items="3"] .bb-ts-slide {
    width: 100%;
  }
  .bb-b2c-campaign-banner-card {
    min-height: 13.75rem;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: 0.75rem;
    padding: 1rem;
  }
  .bb-b2c-campaign-banner-title {
    font-size: var(--bb-icon-size-md);
  }
  .bb-b2c-campaign-banner-visual {
    min-height: 8rem;
  }
  .bb-b2c-campaign-banner-visual img {
    max-height: 9rem;
  }
}
@media (max-width: 480px) {
  .bb-b2c-campaign-banner-card {
    grid-template-columns: 1fr;
  }
  .bb-b2c-campaign-banner-visual {
    display: none;
  }
}
/* =====================================
   B2C Other Products To Seller
   Component-specific
   Reuses product card styles from B2C product list
===================================== */
.bb-b2c-other-products-to-seller {
  min-width: 0;
}

.bb-b2c-other-products-to-seller-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

@media (max-width: 1199.98px) {
  .bb-b2c-other-products-to-seller-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-other-products-to-seller-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-other-products-to-seller-grid {
    grid-template-columns: 1fr;
  }
}
/*
=====================================
   B2C From Brands
   Component-specific
   Uses Main CSS: bb-chip, bb-carousel
   Scope: .bb-b2c-from-brand
=====================================
*/
/* =====================================
   B2C From Brands Mode Tokens
===================================== */
.bb-b2c-from-brand {
  --bb-from-brand-bg-image: none;
  --bb-from-brand-surface-bg: color-mix(
      in srgb,
      var(--bb-body-bg) 42%,
      transparent
  );
  --bb-from-brand-card-bg: var(--bb-surface-elevated);
  --bb-from-brand-caption-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 88%,
      transparent
  );
  --bb-from-brand-overlay-start: color-mix(
      in srgb,
      var(--bb-body-bg) 92%,
      transparent
  );
  --bb-from-brand-overlay-end: color-mix(
      in srgb,
      var(--bb-body-bg) 74%,
      transparent
  );
  --bb-from-brand-surface-bg-layer:
      radial-gradient(
          circle at 92% 6%,
          color-mix(in srgb, var(--bb-primary) 18%, transparent),
          transparent 32%
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-info) 8%, transparent),
          transparent 34%
      ),
      var(--bb-from-brand-surface-bg);
  --bb-from-brand-chip-color: color-mix(
      in srgb,
      var(--bb-primary) 78%,
      var(--bb-emphasis-color)
  );
  --bb-from-brand-chip-bg: color-mix(
      in srgb,
      var(--bb-primary) 16%,
      var(--bb-body-bg)
  );
  --bb-from-brand-count-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 70%,
      transparent
  );
  --bb-from-brand-card-border: color-mix(
      in srgb,
      var(--bb-border-color) 82%,
      transparent
  );
  --bb-from-brand-caption-border: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 64%,
      transparent
  );
  --bb-from-brand-carousel-indicator-bg: color-mix(
      in srgb,
      var(--bb-emphasis-color) 26%,
      transparent
  );
  --bb-from-brand-carousel-indicator-active-bg: var(--bb-primary);
  --bb-from-brand-carousel-indicator-shadow: 0 0 0 1px color-mix(
      in srgb,
      var(--bb-surface-elevated) 72%,
      transparent
  );
  --bb-from-brand-carousel-indicator-active-shadow:
      0 0 0 1px color-mix(in srgb, var(--bb-primary) 42%, transparent),
      0 0.375rem 1rem color-mix(in srgb, var(--bb-primary) 34%, transparent);
}

html[data-bs-theme=navy] .bb-b2c-from-brand {
  --bb-from-brand-surface-bg: color-mix(
      in srgb,
      var(--bb-body-bg) 36%,
      transparent
  );
  --bb-from-brand-card-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 97%,
      var(--bb-body-bg)
  );
  --bb-from-brand-caption-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 80%,
      transparent
  );
  --bb-from-brand-overlay-start: color-mix(
      in srgb,
      var(--bb-body-bg) 90%,
      transparent
  );
  --bb-from-brand-overlay-end: color-mix(
      in srgb,
      var(--bb-body-bg) 70%,
      transparent
  );
  --bb-from-brand-surface-bg-layer:
      radial-gradient(
          circle at 92% 6%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 32%
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-info) 8%, transparent),
          transparent 34%
      ),
      var(--bb-from-brand-surface-bg);
  --bb-from-brand-caption-border: color-mix(
      in srgb,
      var(--bb-border-color) 78%,
      transparent
  );
  --bb-from-brand-count-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 64%,
      transparent
  );
  --bb-from-brand-carousel-indicator-bg: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 26%,
      transparent
  );
  --bb-from-brand-carousel-indicator-shadow: 0 0 0 1px color-mix(
      in srgb,
      var(--bb-border-color) 68%,
      transparent
  );
}

html[data-bs-theme=dark] .bb-b2c-from-brand {
  --bb-from-brand-surface-bg: color-mix(
      in srgb,
      var(--bb-body-bg) 34%,
      transparent
  );
  --bb-from-brand-card-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 96%,
      var(--bb-body-bg)
  );
  --bb-from-brand-caption-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 78%,
      transparent
  );
  --bb-from-brand-overlay-start: color-mix(
      in srgb,
      var(--bb-body-bg) 90%,
      transparent
  );
  --bb-from-brand-overlay-end: color-mix(
      in srgb,
      var(--bb-body-bg) 68%,
      transparent
  );
  --bb-from-brand-surface-bg-layer:
      radial-gradient(
          circle at 92% 6%,
          color-mix(in srgb, var(--bb-primary) 13%, transparent),
          transparent 32%
      ),
      radial-gradient(
          circle at 8% 96%,
          color-mix(in srgb, var(--bb-info) 8%, transparent),
          transparent 34%
      ),
      var(--bb-from-brand-surface-bg);
  --bb-from-brand-caption-border: color-mix(
      in srgb,
      var(--bb-border-color) 78%,
      transparent
  );
  --bb-from-brand-count-bg: color-mix(
      in srgb,
      var(--bb-surface-elevated) 62%,
      transparent
  );
  --bb-from-brand-carousel-indicator-bg: color-mix(
      in srgb,
      var(--bb-white, var(--bb-white)) 28%,
      transparent
  );
  --bb-from-brand-carousel-indicator-shadow: 0 0 0 1px color-mix(
      in srgb,
      var(--bb-border-color) 70%,
      transparent
  );
}

/* =====================================
   Base
===================================== */
.bb-b2c-from-brand {
  position: relative;
  margin: 1.625rem 0;
  overflow: hidden;
  background-image: linear-gradient(90deg, var(--bb-from-brand-overlay-start), var(--bb-from-brand-overlay-end)), var(--bb-from-brand-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-from-brand-surface {
  position: relative;
  z-index: 1;
  padding: clamp(1.375rem, 3vw, 2.25rem);
  background: var(--bb-from-brand-surface-bg-layer);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* =====================================
   Head
===================================== */
.bb-b2c-from-brand-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bb-b2c-from-brand-head-content {
  min-width: 0;
}

.bb-b2c-from-brand-chip {
  color: var(--bb-from-brand-chip-color);
  background-color: var(--bb-from-brand-chip-bg);
}

.bb-b2c-from-brand-title {
  margin: 0.625rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-b2c-from-brand-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-from-brand-count {
  background-color: var(--bb-from-brand-count-bg);
  border-color: var(--bb-from-brand-caption-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =====================================
   Carousel
===================================== */
.bb-b2c-from-brand-carousel {
  --bb-carousel-control-size: 2.75rem;
  --bb-carousel-control-inset: 0.75rem;
  --bb-carousel-control-bg-color: var(--bb-emphasis-color);
  --bb-carousel-control-bg-opacity: 0.24;
  --bb-carousel-control-bg-opacity-hover: 0.46;
  position: relative;
  z-index: 2;
}

.bb-b2c-from-brand-carousel .carousel-inner {
  overflow: hidden;
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-from-brand-carousel .carousel-item {
  min-height: 28.3125rem;
}

.bb-b2c-from-brand-carousel .carousel-indicators {
  position: relative;
  z-index: 4;
  padding-top: 1rem;
}

.bb-b2c-from-brand-carousel .carousel-control-prev,
.bb-b2c-from-brand-carousel .carousel-control-next {
  z-index: 5;
}

.bb-b2c-from-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

/* =====================================
   Card
===================================== */
.bb-b2c-from-brand-card {
  position: relative;
  display: block;
  min-width: 0;
  height: 28.3125rem;
  min-height: 28.3125rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background-color: var(--bb-from-brand-card-bg);
  border: var(--bb-border-width) solid var(--bb-from-brand-card-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-b2c-from-brand-card:hover {
  color: inherit;
  text-decoration: none;
}

.bb-b2c-from-brand-media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bb-b2c-from-brand-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-from-brand-card:hover .bb-b2c-from-brand-media img {
  transform: scale(1.035);
}

/* =====================================
   Caption
===================================== */
.bb-b2c-from-brand-caption {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.875rem;
  z-index: 2;
  padding: 0.875rem 0.9375rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-from-brand-caption-bg);
  border: var(--bb-border-width) solid var(--bb-from-brand-caption-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-xs);
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bb-b2c-from-brand-caption h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

.bb-b2c-from-brand-caption p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0.375rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Carousel Indicators
===================================== */
.bb-b2c-from-brand-carousel.bb-carousel-dots {
  --bb-carousel-indicator-bg: var(--bb-from-brand-carousel-indicator-bg);
  --bb-carousel-indicator-active-bg: var(--bb-from-brand-carousel-indicator-active-bg);
}

.bb-b2c-from-brand-carousel.bb-carousel-dots .carousel-indicators [data-bs-target]::after {
  background-color: var(--bb-carousel-indicator-bg);
  box-shadow: var(--bb-from-brand-carousel-indicator-shadow);
}

.bb-b2c-from-brand-carousel.bb-carousel-dots .carousel-indicators [data-bs-target].active::after {
  background-color: var(--bb-carousel-indicator-active-bg);
  box-shadow: var(--bb-from-brand-carousel-indicator-active-shadow);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-b2c-from-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-b2c-from-brand-carousel .carousel-item,
  .bb-b2c-from-brand-card {
    height: 25rem;
    min-height: 25rem;
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-from-brand {
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-from-brand-surface {
    padding: 1rem;
  }
  .bb-b2c-from-brand-head {
    align-items: flex-start;
  }
  .bb-b2c-from-brand-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bb-b2c-from-brand-carousel .carousel-item,
  .bb-b2c-from-brand-card {
    height: 23.75rem;
    min-height: 23.75rem;
  }
  .bb-b2c-from-brand-caption {
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0.625rem;
    padding: 0.75rem;
  }
  .bb-b2c-from-brand-caption h3 {
    font-size: var(--bb-fs-base);
  }
  .bb-b2c-from-brand-caption p {
    font-size: var(--bb-fs-xs);
  }
  .bb-b2c-from-brand-carousel {
    --bb-carousel-control-size: 2.375rem;
    --bb-carousel-control-inset: 0.375rem;
  }
}
/* =====================================
   B2C Homepage Special Contents
   Component-specific
   Uses Main CSS: bb-card, bb-chip, buttons, Bootstrap tab-content
   Theme safe: light / navy / dark
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-b2c-home-specials-bg: var(--bb-body-bg);
  --bb-b2c-home-specials-surface: var(--bb-body-bg);
  --bb-b2c-home-specials-surface-soft: var(--bb-tertiary-bg);
  --bb-b2c-home-specials-surface-elevated: var(--bb-surface-elevated);
  --bb-b2c-home-specials-heading: var(--bb-emphasis-color);
  --bb-b2c-home-specials-text: var(--bb-body-color);
  --bb-b2c-home-specials-muted: var(--bb-secondary-color);
  --bb-b2c-home-specials-border: var(--bb-border-color);
  --bb-b2c-home-specials-border-soft: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-b2c-home-specials-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2c-home-specials-accent: var(--bb-primary);
  --bb-b2c-home-specials-accent-hover: var(--bb-primary-hover);
  --bb-b2c-home-specials-accent-soft: var(--bb-primary-light);
  --bb-b2c-home-specials-accent-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-b2c-home-specials-accent-inverse: var(--bb-primary-inverse);
  --bb-b2c-home-specials-shell-bg:
      radial-gradient(
          circle at 94% 8%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 32%
      ),
      linear-gradient(
          180deg,
          var(--bb-body-bg) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-home-specials-tab-bg: color-mix(in srgb, var(--bb-body-bg) 94%, transparent);
  --bb-b2c-home-specials-tab-color: var(--bb-emphasis-color);
  --bb-b2c-home-specials-tab-border: color-mix(in srgb, var(--bb-border-color) 82%, var(--bb-primary));
  --bb-b2c-home-specials-tab-hover-bg: var(--bb-primary-light);
  --bb-b2c-home-specials-tab-hover-color: var(--bb-emphasis-color);
  --bb-b2c-home-specials-tab-active-bg: var(--bb-primary);
  --bb-b2c-home-specials-tab-active-color: var(--bb-primary-inverse);
  --bb-b2c-home-specials-tab-active-border: var(--bb-primary);
  --bb-b2c-home-specials-shadow-xs: var(--bb-shadow-xs);
  --bb-b2c-home-specials-shadow-sm: var(--bb-shadow-sm);
  --bb-b2c-home-specials-shadow-lg: var(--bb-shadow-lg);
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-b2c-home-specials-bg: var(--bb-body-bg);
  --bb-b2c-home-specials-surface: var(--bb-surface-elevated);
  --bb-b2c-home-specials-surface-soft: var(--bb-surface-soft);
  --bb-b2c-home-specials-surface-elevated: var(--bb-surface-elevated);
  --bb-b2c-home-specials-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-b2c-home-specials-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-b2c-home-specials-border-accent: color-mix(in srgb, var(--bb-primary) 28%, var(--bb-border-color));
  --bb-b2c-home-specials-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-b2c-home-specials-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-home-specials-shell-bg:
      radial-gradient(
          circle at 94% 8%,
          color-mix(in srgb, var(--bb-primary) 18%, transparent),
          transparent 32%
      ),
      linear-gradient(
          180deg,
          var(--bb-surface-elevated) 0%,
          color-mix(in srgb, var(--bb-surface-soft) 78%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-home-specials-tab-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  --bb-b2c-home-specials-tab-color: var(--bb-emphasis-color);
  --bb-b2c-home-specials-tab-border: color-mix(in srgb, var(--bb-border-color) 78%, var(--bb-primary));
  --bb-b2c-home-specials-tab-hover-bg: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-surface-elevated));
  --bb-b2c-home-specials-tab-hover-color: var(--bb-emphasis-color);
  --bb-b2c-home-specials-tab-active-bg: var(--bb-primary);
  --bb-b2c-home-specials-tab-active-color: var(--bb-primary-inverse);
  --bb-b2c-home-specials-tab-active-border: var(--bb-primary);
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-b2c-home-specials-bg: var(--bb-body-bg);
  --bb-b2c-home-specials-surface: var(--bb-surface-elevated);
  --bb-b2c-home-specials-surface-soft: var(--bb-surface-soft);
  --bb-b2c-home-specials-surface-elevated: var(--bb-surface-elevated);
  --bb-b2c-home-specials-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2c-home-specials-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-b2c-home-specials-border-accent: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  --bb-b2c-home-specials-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-b2c-home-specials-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2c-home-specials-shell-bg:
      radial-gradient(
          circle at 94% 8%,
          color-mix(in srgb, var(--bb-primary) 17%, transparent),
          transparent 32%
      ),
      linear-gradient(
          180deg,
          var(--bb-surface-elevated) 0%,
          color-mix(in srgb, var(--bb-surface-soft) 76%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-home-specials-tab-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, transparent);
  --bb-b2c-home-specials-tab-color: var(--bb-emphasis-color);
  --bb-b2c-home-specials-tab-border: color-mix(in srgb, var(--bb-border-color) 76%, var(--bb-primary));
  --bb-b2c-home-specials-tab-hover-bg: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated));
  --bb-b2c-home-specials-tab-hover-color: var(--bb-emphasis-color);
  --bb-b2c-home-specials-tab-active-bg: var(--bb-primary);
  --bb-b2c-home-specials-tab-active-color: var(--bb-primary-inverse);
  --bb-b2c-home-specials-tab-active-border: var(--bb-primary);
}

/* =====================================
   Component Scope
===================================== */
.bb-b2c-home-specials {
  position: relative;
  min-width: 0;
}

.bb-b2c-home-specials-shell {
  --bb-card-radius: var(--bb-radius-2xl);
  --bb-card-shadow: var(--bb-b2c-home-specials-shadow-sm);
  position: relative;
  overflow: hidden;
  padding: clamp(1.125rem, 3vw, 1.75rem);
  background: var(--bb-b2c-home-specials-shell-bg);
  border-color: var(--bb-b2c-home-specials-border-accent);
}

.bb-b2c-home-specials-shell::before {
  content: "";
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 13rem;
  height: 13rem;
  background-color: color-mix(in srgb, var(--bb-b2c-home-specials-accent) 10%, transparent);
  border-radius: var(--bb-radius-pill);
  pointer-events: none;
}

.bb-b2c-home-specials-shell > * {
  position: relative;
  z-index: 2;
}

/* =====================================
   Head
===================================== */
.bb-b2c-home-specials-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.125rem;
}

.bb-b2c-home-specials-title {
  margin: 0.625rem 0 0;
  color: var(--bb-b2c-home-specials-heading);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight);
}

.bb-b2c-home-specials-text {
  max-width: 46rem;
  margin: 0.5rem 0 0;
  color: var(--bb-b2c-home-specials-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Tabs
===================================== */
.bb-b2c-home-specials-tabs-wrap {
  overflow-x: auto;
  margin-bottom: 1.125rem;
  padding-bottom: 0.375rem;
  scrollbar-width: thin;
}

.bb-b2c-home-specials-tabs-wrap::-webkit-scrollbar {
  height: 0.375rem;
}

.bb-b2c-home-specials-tabs-wrap::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bb-b2c-home-specials-accent) 26%, var(--bb-b2c-home-specials-border));
  border-radius: var(--bb-radius-pill);
}

.bb-b2c-home-specials-tabs {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background-color: color-mix(in srgb, var(--bb-b2c-home-specials-surface-soft) 72%, transparent);
  border: var(--bb-border-width) solid var(--bb-b2c-home-specials-border-soft);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-home-specials-tabs .nav-item {
  flex: 0 0 auto;
}

.bb-b2c-home-specials-tab {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  color: var(--bb-b2c-home-specials-tab-color);
  background-color: var(--bb-b2c-home-specials-tab-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-home-specials-tab-border);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-b2c-home-specials-shadow-xs);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.bb-b2c-home-specials-tab:hover,
.bb-b2c-home-specials-tab:focus {
  color: var(--bb-b2c-home-specials-tab-hover-color);
  background-color: var(--bb-b2c-home-specials-tab-hover-bg);
  border-color: var(--bb-b2c-home-specials-border-accent);
}

.bb-b2c-home-specials-tab.active,
.bb-b2c-home-specials-tab[aria-selected=true] {
  color: var(--bb-b2c-home-specials-tab-active-color);
  background-color: var(--bb-b2c-home-specials-tab-active-bg);
  border-color: var(--bb-b2c-home-specials-tab-active-border);
  box-shadow: var(--bb-b2c-home-specials-shadow-sm);
}

.bb-b2c-home-specials-content {
  min-width: 0;
  padding-top: 0.125rem;
}

/* =====================================
   Product Grid
===================================== */
.bb-b2c-home-special-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bb-b2c-home-special-product-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

.bb-b2c-home-special-product-price {
  display: block;
  color: var(--bb-b2c-home-specials-heading);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-tight);
}

.bb-b2c-home-special-product-price span {
  font-size: var(--bb-fs-sm);
  letter-spacing: 0;
}

/* =====================================
   Empty
===================================== */
.bb-b2c-home-special-products-empty {
  padding: 2rem;
  text-align: center;
  background-color: var(--bb-b2c-home-specials-surface);
  border: var(--bb-border-width) dashed var(--bb-b2c-home-specials-border);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-home-special-products-empty-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-b2c-home-specials-accent);
  background-color: var(--bb-b2c-home-specials-accent-soft);
  border-radius: var(--bb-radius-lg);
}

.bb-b2c-home-special-products-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-b2c-home-special-products-empty strong {
  display: block;
  color: var(--bb-b2c-home-specials-heading);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-home-special-products-empty p {
  max-width: 34rem;
  margin: 0.5rem auto 0;
  color: var(--bb-b2c-home-specials-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-b2c-home-special-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-b2c-home-special-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-home-specials-shell {
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-home-specials-tabs {
    min-width: max-content;
  }
  .bb-b2c-home-specials-tab {
    min-height: 2.5rem;
    padding-inline: 0.875rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-home-special-products-grid {
    grid-template-columns: 1fr;
  }
  .bb-b2c-home-specials-head {
    align-items: flex-start;
  }
}
/* =====================================
   Bulbulustur Web - Product Low Price Report
===================================== */
.bb-product-low-price-page {
  min-width: 0;
}

.bb-product-low-price-head {
  max-width: 54rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.bb-product-low-price-title {
  margin: 0.75rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(var(--bb-h3), 4vw, var(--bb-h1));
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-heading-letter-spacing);
}

.bb-product-low-price-text {
  max-width: 46rem;
  margin: 0.75rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-base);
}

.bb-product-low-price-product-chip {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: 1.25;
}

.bb-product-low-price-product-chip .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: 1rem;
  line-height: 1;
}

/* -------------------------------------
   Layout
------------------------------------- */
.bb-product-low-price-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
}

.bb-product-low-price-info-card,
.bb-product-low-price-form-card {
  min-width: 0;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--bb-dark) 6%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-dark) 3%, transparent);
}

.bb-product-low-price-info-card {
  padding: clamp(1rem, 3vw, 1.25rem);
}

.bb-product-low-price-form-card {
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

/* -------------------------------------
   Product preview
------------------------------------- */
.bb-product-low-price-product-preview {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 9rem), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-product-low-price-product-media {
  width: 5.25rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-product-low-price-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0.35rem;
}

.bb-product-low-price-product-copy {
  min-width: 0;
}

.bb-product-low-price-product-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-product-low-price-product-copy span {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-meta);
  font-weight: var(--bb-fw-medium);
  line-height: 1.45;
}

/* -------------------------------------
   Info card
------------------------------------- */
.bb-product-low-price-info-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
  box-shadow: 0 0.875rem 2rem color-mix(in srgb, var(--bb-primary) 22%, transparent);
}

.bb-product-low-price-info-icon .material-symbols-outlined {
  font-size: 1.65rem;
  line-height: 1;
}

.bb-product-low-price-info-card h2 {
  margin: 1rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
}

.bb-product-low-price-info-card p {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.65;
}

.bb-product-low-price-info-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.bb-product-low-price-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: 1.45;
}

.bb-product-low-price-info-item .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: 1.05rem;
  line-height: 1.3;
}

/* -------------------------------------
   Form
------------------------------------- */
.bb-product-low-price-form-head {
  margin-bottom: 1.25rem;
}

.bb-product-low-price-form-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.bb-product-low-price-form-head p {
  margin: 0.45rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.6;
}

.bb-product-low-price-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  color: var(--bb-secondary-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-body-bg));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  line-height: 1.6;
}

.bb-product-low-price-helper .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: 1.15rem;
  line-height: 1.35;
}

.bb-product-low-price-actions {
  margin-top: 1.25rem;
}

.bb-product-low-price-actions .btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  font-weight: var(--bb-fw-bold);
}

.bb-product-low-price-actions .material-symbols-outlined {
  font-size: 1.05rem;
  line-height: 1;
}

/* -------------------------------------
   Success
------------------------------------- */
.bb-product-low-price-success {
  display: grid;
  place-items: center;
  min-height: 24rem;
  text-align: center;
}

.bb-product-low-price-success-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 12%, var(--bb-body-bg));
  border-radius: var(--bb-radius-xl);
}

.bb-product-low-price-success-icon .material-symbols-outlined {
  font-size: 2rem;
  line-height: 1;
}

.bb-product-low-price-success h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
}

.bb-product-low-price-success p {
  max-width: 34rem;
  margin: 0.625rem auto 1rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.65;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-product-low-price-layout {
    grid-template-columns: 1fr;
  }
  .bb-product-low-price-info-card {
    order: 2;
  }
  .bb-product-low-price-form-card {
    order: 1;
  }
}
@media (max-width: 575.98px) {
  .bb-product-low-price-product-chip {
    width: 100%;
  }
  .bb-product-low-price-info-card,
  .bb-product-low-price-form-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-product-low-price-product-preview {
    grid-template-columns: 4.75rem minmax(0, 1fr);
  }
  .bb-product-low-price-product-media {
    width: 4.75rem;
  }
}
/* =====================================
   Bulbulustur Web - Sell Submit Evaluation
   Store request final submit page
===================================== */
.bb-sell-submit-evaluation-page {
  min-width: 0;
}

.bb-sell-submit-evaluation-shell {
  min-height: clamp(28rem, 60vh, 42rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.bb-sell-submit-evaluation-card {
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 15rem), var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--bb-coal-300) 7%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 3%, transparent);
}

.bb-sell-submit-evaluation-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--bb-primary) 22%, transparent);
}

.bb-sell-submit-evaluation-icon .material-symbols-outlined {
  font-size: var(--bb-icon-2xl);
  line-height: 1;
}

.bb-sell-submit-evaluation-chip {
  margin-bottom: 0.85rem;
}

.bb-sell-submit-evaluation-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-sell-submit-evaluation-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.045em;
}

.bb-sell-submit-evaluation-text {
  max-width: 29rem;
  margin: 0.75rem auto 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-sell-submit-evaluation-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem;
  text-align: left;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-sell-submit-evaluation-note > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-lg);
  line-height: var(--bb-line-height-heading);
}

.bb-sell-submit-evaluation-note strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-sell-submit-evaluation-note p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-sell-submit-evaluation-form {
  margin-top: 1.25rem;
}

.bb-sell-submit-evaluation-submit {
  width: 100%;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-sell-submit-evaluation-submit .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

@media (max-width: 575.98px) {
  .bb-sell-submit-evaluation-shell {
    min-height: auto;
    padding: 1.5rem 0;
  }
  .bb-sell-submit-evaluation-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-sell-submit-evaluation-submit {
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Bulbulustur Web - Store Ask Question Page
   Layer: pages/store/_askquestion.scss

   Purpose:
   - Satıcıya soru sorma form sayfası.
   - LayoutLight içinde çalışır.
   - Kötüye Kullanım Bildir sayfası ile aynı form ritmini kullanır.
   - Sol tarafta ürün / güven notu paneli, sağ tarafta soru formu bulunur.

   Theme:
   - Light / Navy / Dark safe.
   - Mode decisions are grouped at the top for easy intervention.
   - Consumes global theme tokens.
   - Does not override global theme variables.

   Razor root:
   - .bb-store-askquestion-page
===================================== */
/* =====================================
   Store Ask Question Local Tokens - Light Default
===================================== */
.bb-store-askquestion-page {
  --bb-store-askquestion-width: 66rem;
  --bb-store-askquestion-accent: var(--bb-primary);
  --bb-store-askquestion-accent-hover: var(--bb-primary-hover);
  --bb-store-askquestion-accent-soft: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-body-bg));
  --bb-store-askquestion-accent-muted: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  --bb-store-askquestion-accent-strong: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-store-askquestion-accent-inverse: var(--bb-primary-inverse);
  --bb-store-askquestion-success: var(--bb-success);
  --bb-store-askquestion-success-soft: color-mix(in srgb, var(--bb-success) 10%, var(--bb-body-bg));
  --bb-store-askquestion-success-text: color-mix(in srgb, var(--bb-success) 78%, var(--bb-emphasis-color));
  --bb-store-askquestion-danger: var(--bb-danger);
  --bb-store-askquestion-danger-soft: color-mix(in srgb, var(--bb-danger) 10%, var(--bb-body-bg));
  --bb-store-askquestion-danger-text: color-mix(in srgb, var(--bb-danger) 78%, var(--bb-emphasis-color));
  --bb-store-askquestion-page-bg: var(--bb-body-bg);
  --bb-store-askquestion-surface: var(--bb-surface-elevated, var(--bb-body-bg));
  --bb-store-askquestion-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-body-bg));
  --bb-store-askquestion-surface-muted: var(--bb-tertiary-bg);
  --bb-store-askquestion-heading: var(--bb-emphasis-color);
  --bb-store-askquestion-text: var(--bb-body-color);
  --bb-store-askquestion-muted: var(--bb-secondary-color);
  --bb-store-askquestion-subtle: var(--bb-tertiary-color);
  --bb-store-askquestion-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-store-askquestion-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-store-askquestion-border-strong: color-mix(in srgb, var(--bb-border-color) 90%, transparent);
  --bb-store-askquestion-shell-bg: var(--bb-white);
  --bb-store-askquestion-shell-border: transparent;
  --bb-store-askquestion-shell-shadow:
      0 1.75rem 4.5rem color-mix(in srgb, var(--bb-emphasis-color) 7%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-store-askquestion-chip-bg: var(--bb-store-askquestion-surface-soft);
  --bb-store-askquestion-chip-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-store-askquestion-chip-color: var(--bb-store-askquestion-heading);
  --bb-store-askquestion-message-bg: var(--bb-store-askquestion-accent-muted);
  --bb-store-askquestion-message-border: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  --bb-store-askquestion-side-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 18%, transparent),
          transparent 12rem
      ),
      radial-gradient(
          circle at 92% 100%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 13rem
      ),
      linear-gradient(
          145deg,
          color-mix(in srgb, var(--bb-coal-300, #0f1219) 72%, #5a1821),
          color-mix(in srgb, var(--bb-coal-400, #0c0f15) 82%, #3b141b)
      );
  --bb-store-askquestion-side-border: color-mix(in srgb, var(--bb-white) 10%, transparent);
  --bb-store-askquestion-side-color: var(--bb-white);
  --bb-store-askquestion-side-muted: color-mix(in srgb, var(--bb-white) 76%, transparent);
  --bb-store-askquestion-side-soft: color-mix(in srgb, var(--bb-white) 8%, transparent);
  --bb-store-askquestion-side-soft-border: color-mix(in srgb, var(--bb-white) 12%, transparent);
  --bb-store-askquestion-product-media-bg: var(--bb-white);
  --bb-store-askquestion-product-media-shadow:
      0 1rem 2.5rem color-mix(in srgb, var(--bb-black) 18%, transparent);
  --bb-store-askquestion-product-placeholder-bg: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-white));
  --bb-store-askquestion-product-placeholder-color: var(--bb-store-askquestion-accent-strong);
  --bb-store-askquestion-form-bg: var(--bb-store-askquestion-surface);
  --bb-store-askquestion-form-border: var(--bb-store-askquestion-border);
  --bb-store-askquestion-form-shadow:
      0 1.125rem 3rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-store-askquestion-form-head-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-store-askquestion-helper-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 34%
      ),
      color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-body-bg));
  --bb-store-askquestion-helper-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-store-askquestion-helper-icon-bg: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  --bb-store-askquestion-info-bg: color-mix(in srgb, var(--bb-tertiary-bg) 88%, var(--bb-body-bg));
  --bb-store-askquestion-info-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-store-askquestion-info-hover-bg: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  --bb-store-askquestion-info-hover-border: color-mix(in srgb, var(--bb-primary) 20%, var(--bb-border-color));
  --bb-store-askquestion-action-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-store-askquestion-result-icon-bg: color-mix(in srgb, var(--bb-success) 10%, var(--bb-body-bg));
  --bb-store-askquestion-result-message-bg: color-mix(in srgb, var(--bb-success) 8%, var(--bb-body-bg));
  --bb-store-askquestion-result-message-border: color-mix(in srgb, var(--bb-success) 18%, var(--bb-border-color));
  width: 100%;
  color: var(--bb-store-askquestion-text);
}

/* =====================================
   Store Ask Question Local Tokens - Navy Mode
===================================== */
html[data-bs-theme=navy] .bb-store-askquestion-page {
  --bb-store-askquestion-accent-soft: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-store-askquestion-accent-muted: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface-elevated));
  --bb-store-askquestion-accent-strong: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-store-askquestion-success-soft: color-mix(in srgb, var(--bb-success) 15%, var(--bb-body-bg));
  --bb-store-askquestion-success-text: color-mix(in srgb, var(--bb-success) 86%, var(--bb-emphasis-color));
  --bb-store-askquestion-surface: var(--bb-surface-elevated);
  --bb-store-askquestion-surface-soft: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-store-askquestion-surface-muted: var(--bb-surface-muted);
  --bb-store-askquestion-border: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-store-askquestion-border-soft: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-store-askquestion-shell-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-store-askquestion-shell-border: transparent;
  --bb-store-askquestion-shell-shadow:
      0 1.75rem 4.5rem color-mix(in srgb, var(--bb-black) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-store-askquestion-chip-bg: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-store-askquestion-chip-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-store-askquestion-side-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 16%, transparent),
          transparent 12rem
      ),
      radial-gradient(
          circle at 92% 100%,
          color-mix(in srgb, var(--bb-primary) 11%, transparent),
          transparent 13rem
      ),
      linear-gradient(
          145deg,
          color-mix(in srgb, var(--bb-body-bg) 82%, #5a1821),
          color-mix(in srgb, var(--bb-surface-elevated) 80%, #301018)
      );
  --bb-store-askquestion-side-border: color-mix(in srgb, var(--bb-white) 10%, transparent);
  --bb-store-askquestion-side-soft: color-mix(in srgb, var(--bb-white) 7%, transparent);
  --bb-store-askquestion-side-soft-border: color-mix(in srgb, var(--bb-white) 11%, transparent);
  --bb-store-askquestion-form-bg: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-body-bg));
  --bb-store-askquestion-form-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-store-askquestion-form-shadow:
      0 1.125rem 3rem color-mix(in srgb, var(--bb-black) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-store-askquestion-helper-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 34%
      ),
      color-mix(in srgb, var(--bb-surface-soft) 82%, var(--bb-body-bg));
  --bb-store-askquestion-helper-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-store-askquestion-info-bg: color-mix(in srgb, var(--bb-surface-soft) 86%, var(--bb-body-bg));
  --bb-store-askquestion-info-border: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
}

/* =====================================
   Store Ask Question Local Tokens - Dark Mode
===================================== */
html[data-bs-theme=dark] .bb-store-askquestion-page {
  --bb-store-askquestion-accent-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-store-askquestion-accent-muted: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  --bb-store-askquestion-accent-strong: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-store-askquestion-success-soft: color-mix(in srgb, var(--bb-success) 14%, var(--bb-body-bg));
  --bb-store-askquestion-success-text: color-mix(in srgb, var(--bb-success) 84%, var(--bb-emphasis-color));
  --bb-store-askquestion-surface: var(--bb-surface-elevated);
  --bb-store-askquestion-surface-soft: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-store-askquestion-border: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-store-askquestion-border-soft: color-mix(in srgb, var(--bb-border-color) 68%, transparent);
  --bb-store-askquestion-shell-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-store-askquestion-shell-border: transparent;
  --bb-store-askquestion-shell-shadow:
      0 1.75rem 4.5rem color-mix(in srgb, var(--bb-black) 24%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-store-askquestion-side-bg:
      radial-gradient(
          circle at 86% 12%,
          color-mix(in srgb, var(--bb-primary) 14%, transparent),
          transparent 12rem
      ),
      radial-gradient(
          circle at 92% 100%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 13rem
      ),
      linear-gradient(
          145deg,
          color-mix(in srgb, var(--bb-body-bg) 86%, #4b1620),
          color-mix(in srgb, var(--bb-surface-elevated) 82%, #241015)
      );
  --bb-store-askquestion-side-border: color-mix(in srgb, var(--bb-white) 9%, transparent);
  --bb-store-askquestion-side-soft: color-mix(in srgb, var(--bb-white) 6%, transparent);
  --bb-store-askquestion-side-soft-border: color-mix(in srgb, var(--bb-white) 10%, transparent);
  --bb-store-askquestion-form-bg: color-mix(in srgb, var(--bb-surface-elevated) 92%, var(--bb-body-bg));
  --bb-store-askquestion-form-border: color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  --bb-store-askquestion-form-shadow:
      0 1.125rem 3rem color-mix(in srgb, var(--bb-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-store-askquestion-helper-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 34%
      ),
      color-mix(in srgb, var(--bb-surface-soft) 80%, var(--bb-body-bg));
  --bb-store-askquestion-helper-border: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
  --bb-store-askquestion-info-bg: color-mix(in srgb, var(--bb-surface-soft) 84%, var(--bb-body-bg));
  --bb-store-askquestion-info-border: color-mix(in srgb, var(--bb-border-color) 70%, transparent);
}

/* =====================================
   LayoutLight Width Discipline
===================================== */
.bb-layout-light-page:has(.bb-store-askquestion-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: var(--bb-store-askquestion-width);
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-store-askquestion-page) .bb-layout-light-card {
  width: 100%;
  max-width: var(--bb-store-askquestion-width);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bb-store-askquestion-shell-bg);
  border: 0;
  box-shadow: var(--bb-store-askquestion-shell-shadow);
}

.bb-layout-light-page:has(.bb-store-askquestion-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.45rem);
}

/* =====================================
   Head
===================================== */
.bb-store-askquestion-head {
  max-width: 46rem;
  margin-bottom: 1.5rem;
}

.bb-store-askquestion-head .bb-chip .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-store-askquestion-title {
  margin: 0.75rem 0 0;
  color: var(--bb-store-askquestion-heading);
  font-size: clamp(1.95rem, 3.2vw, 2.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.06em;
}

.bb-store-askquestion-text {
  max-width: 42rem;
  margin: 0.75rem 0 0;
  color: var(--bb-store-askquestion-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-store-askquestion-product-chip {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.125rem;
  padding: 0.625rem 0.875rem;
  color: var(--bb-store-askquestion-chip-color);
  background-color: var(--bb-store-askquestion-chip-bg);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-chip-border);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-store-askquestion-product-chip .material-symbols-outlined {
  color: var(--bb-store-askquestion-accent);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Layout
===================================== */
.bb-store-askquestion-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* =====================================
   Product / Context Panel
===================================== */
.bb-store-askquestion-product-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  padding: 1.125rem;
  color: var(--bb-store-askquestion-side-color);
  background: var(--bb-store-askquestion-side-bg);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-side-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 16%, transparent);
}

.bb-store-askquestion-product-card::after {
  content: "";
  position: absolute;
  right: -4.75rem;
  bottom: -5.25rem;
  width: 11rem;
  height: 11rem;
  background-color: color-mix(in srgb, var(--bb-white) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.bb-store-askquestion-product-media,
.bb-store-askquestion-product-body {
  position: relative;
  z-index: 2;
}

.bb-store-askquestion-product-media {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: var(--bb-store-askquestion-product-media-bg);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-store-askquestion-product-media-shadow);
}

.bb-store-askquestion-product-media img {
  display: block;
  width: min(100%, 11.25rem);
  max-height: 9.75rem;
  object-fit: contain;
}

.bb-store-askquestion-product-placeholder {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-store-askquestion-product-placeholder-color);
  background-color: var(--bb-store-askquestion-product-placeholder-bg);
  border-radius: var(--bb-radius-2xl);
}

.bb-store-askquestion-product-placeholder .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-store-askquestion-product-body {
  min-width: 0;
}

.bb-store-askquestion-product-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bb-store-askquestion-side-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.2;
}

.bb-store-askquestion-product-body h2 {
  margin: 0;
  color: var(--bb-store-askquestion-side-color);
  font-size: clamp(1.45rem, 2.35vw, 2rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.bb-store-askquestion-product-meta {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bb-store-askquestion-product-meta-item {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.625rem;
  color: var(--bb-store-askquestion-side-color);
  background-color: var(--bb-store-askquestion-side-soft);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-side-soft-border);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-content);
}

.bb-store-askquestion-product-meta-item .material-symbols-outlined {
  color: var(--bb-store-askquestion-accent);
  font-size: var(--bb-icon-size-md);
  line-height: var(--bb-line-height-heading);
}

/* =====================================
   Form Card
===================================== */
.bb-store-askquestion-form-card {
  padding: clamp(1.25rem, 2.5vw, 1.625rem);
  background-color: var(--bb-store-askquestion-form-bg);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-form-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-store-askquestion-form-shadow);
}

.bb-store-askquestion-form {
  display: grid;
  gap: 1rem;
}

.bb-store-askquestion-form-head {
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-store-askquestion-form-head-border);
}

.bb-store-askquestion-form-head h2 {
  margin: 0;
  color: var(--bb-store-askquestion-heading);
  font-size: var(--bb-fs-xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-store-askquestion-form-head p {
  margin: 0.45rem 0 0;
  color: var(--bb-store-askquestion-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

.bb-store-askquestion-textarea {
  min-height: 10rem;
  resize: vertical;
}

/* =====================================
   Helper
===================================== */
.bb-store-askquestion-helper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  color: var(--bb-store-askquestion-muted);
  background: var(--bb-store-askquestion-helper-bg);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-helper-border);
  border-radius: var(--bb-radius-lg);
}

.bb-store-askquestion-helper > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-store-askquestion-accent);
  background-color: var(--bb-store-askquestion-helper-icon-bg);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-store-askquestion-helper span:last-child {
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Info Grid
===================================== */
.bb-store-askquestion-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-store-askquestion-info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0.625rem;
  color: var(--bb-store-askquestion-muted);
  background-color: var(--bb-store-askquestion-info-bg);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-info-border);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.1;
  text-align: center;
  transition: color var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-store-askquestion-info-item:hover {
  color: var(--bb-store-askquestion-heading);
  background-color: var(--bb-store-askquestion-info-hover-bg);
  border-color: var(--bb-store-askquestion-info-hover-border);
  transform: translateY(-1px);
}

.bb-store-askquestion-info-item .material-symbols-outlined {
  color: var(--bb-store-askquestion-accent);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Actions
===================================== */
.bb-store-askquestion-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid var(--bb-store-askquestion-action-border);
}

.bb-store-askquestion-actions .btn {
  min-width: 11rem;
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  color: var(--bb-store-askquestion-accent-inverse) !important;
  background-color: var(--bb-store-askquestion-accent) !important;
  border-color: var(--bb-store-askquestion-accent) !important;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-store-askquestion-actions .btn:hover,
.bb-store-askquestion-actions .btn:focus {
  background-color: var(--bb-store-askquestion-accent-hover) !important;
  border-color: var(--bb-store-askquestion-accent-hover) !important;
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
  transform: translateY(-1px);
}

.bb-store-askquestion-actions .btn .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Result State
===================================== */
.bb-store-askquestion-result {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
}

.bb-store-askquestion-result-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-store-askquestion-success);
  background-color: var(--bb-store-askquestion-result-icon-bg);
  border-radius: var(--bb-radius-pill);
}

.bb-store-askquestion-result-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-store-askquestion-result h2 {
  margin: 0;
  color: var(--bb-store-askquestion-heading);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-store-askquestion-result p {
  max-width: 34rem;
  margin: 0.625rem auto 1.25rem;
  color: var(--bb-store-askquestion-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-medium);
  line-height: var(--bb-line-height-content);
}

.bb-store-askquestion-result-message {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0.875rem 1rem;
  color: var(--bb-store-askquestion-heading);
  background-color: var(--bb-store-askquestion-result-message-bg);
  border: var(--bb-border-width) solid var(--bb-store-askquestion-result-message-border);
  border-radius: var(--bb-radius-lg);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-store-askquestion-layout {
    grid-template-columns: 1fr;
  }
  .bb-store-askquestion-product-card {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }
  .bb-store-askquestion-product-media {
    min-height: 10rem;
    margin-bottom: 0;
  }
  .bb-store-askquestion-product-body h2 {
    font-size: clamp(1.45rem, 4vw, 2rem);
  }
}
@media (max-width: 767.98px) {
  .bb-layout-light-page:has(.bb-store-askquestion-page) .bb-layout-light-card-body {
    padding: 1.35rem;
  }
  .bb-store-askquestion-form-card,
  .bb-store-askquestion-product-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-store-askquestion-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-store-askquestion-actions {
    justify-content: stretch;
  }
  .bb-store-askquestion-actions .btn {
    width: 100%;
    border-radius: var(--bb-radius-lg);
  }
}
@media (max-width: 575.98px) {
  .bb-store-askquestion-product-card {
    display: block;
  }
  .bb-store-askquestion-product-media {
    margin-bottom: 1rem;
  }
  .bb-store-askquestion-title {
    font-size: clamp(1.75rem, 11vw, 2.35rem);
  }
  .bb-store-askquestion-product-body h2 {
    font-size: clamp(1.55rem, 10vw, 2.05rem);
  }
}
/* =====================================
   Bulbulustur Web - Store Header
   Shared B2C store identity component
===================================== */
.bb-store-header {
  display: grid;
  gap: 1rem;
}

/* -------------------------------------
   Main
------------------------------------- */
.bb-store-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 34%), var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem color-mix(in srgb, var(--bb-coal-300) 5%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 3%, transparent);
}

.bb-store-header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bb-store-header-logo {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-store-header-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0.55rem;
}

.bb-store-header-logo-placeholder {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
}

.bb-store-header-logo-placeholder .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-store-header-identity {
  min-width: 0;
}

.bb-store-header-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.bb-store-header-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-store-header-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.8rem;
  padding: 0.35rem 0.55rem;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-store-header-rating .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-store-header-company {
  margin: 0.35rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-store-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bb-store-header-follow-btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-store-header-follow-btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* -------------------------------------
   Info
------------------------------------- */
.bb-store-header-info {
  padding: clamp(1rem, 2vw, 1.25rem);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-store-header-info-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bb-store-header-info-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
}

.bb-store-header-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-store-header-info-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-store-header-info-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-store-header-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-store-header-info-item {
  min-width: 0;
  padding: 0.8rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
  border-radius: var(--bb-radius);
}

.bb-store-header-info-item-wide {
  grid-column: span 2;
}

.bb-store-header-info-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-store-header-info-value {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-store-header-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-store-header-info-item-wide {
    grid-column: span 2;
  }
}
@media (max-width: 767.98px) {
  .bb-store-header-main {
    align-items: flex-start;
    flex-direction: column;
    border-radius: var(--bb-radius-lg);
  }
  .bb-store-header-brand {
    width: 100%;
  }
  .bb-store-header-actions {
    width: 100%;
  }
  .bb-store-header-follow-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
  .bb-store-header-info {
    border-radius: var(--bb-radius-lg);
  }
  .bb-store-header-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-store-header-info-item-wide {
    grid-column: auto;
  }
}
@media (max-width: 575.98px) {
  .bb-store-header-logo {
    width: 3.75rem;
    height: 3.75rem;
  }
  .bb-store-header-title {
    font-size: var(--bb-fs-lg);
  }
}
/* =====================================
   B2C Product Detail Review Component
   Product detail içindeki müşteri deneyimleri bloğu
   _ReviewSummary internals untouched
   Scope: .bb-b2c-detail-review-section
===================================== */
/* =====================================
   Component Mode Tokens
===================================== */
.bb-b2c-detail-review-section {
  --bb-b2c-detail-review-surface: var(--bb-surface-elevated);
  --bb-b2c-detail-review-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-b2c-detail-review-surface-strong: color-mix(in srgb, var(--bb-body-bg) 96%, var(--bb-white));
  --bb-b2c-detail-review-area-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 5%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 74%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-detail-review-area-glow: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-b2c-detail-review-area-orb: color-mix(in srgb, var(--bb-primary) 7%, transparent);
  --bb-b2c-detail-review-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-b2c-detail-review-border-accent: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-b2c-detail-review-heading: var(--bb-emphasis-color);
  --bb-b2c-detail-review-text: var(--bb-body-color);
  --bb-b2c-detail-review-muted: var(--bb-secondary-color);
  --bb-b2c-detail-review-subtle: var(--bb-tertiary-color);
  --bb-b2c-detail-review-accent: var(--bb-primary);
  --bb-b2c-detail-review-accent-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-b2c-detail-review-accent-text: color-mix(in srgb, var(--bb-primary) 76%, var(--bb-emphasis-color));
  --bb-b2c-detail-review-star: var(--bb-primary);
  --bb-b2c-detail-review-star-muted: color-mix(in srgb, var(--bb-secondary-color) 36%, transparent);
  --bb-b2c-detail-review-avatar-bg: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-body-bg));
  --bb-b2c-detail-review-avatar-color: color-mix(in srgb, var(--bb-primary) 80%, var(--bb-emphasis-color));
  --bb-b2c-detail-review-card-bg:
      radial-gradient(
          circle at 94% 8%,
          color-mix(in srgb, var(--bb-b2c-detail-review-accent) 8%, transparent),
          transparent 15rem
      ),
      var(--bb-b2c-detail-review-surface-strong);
  --bb-b2c-detail-review-card-shadow:
      0 0.75rem 2rem color-mix(in srgb, var(--bb-emphasis-color) 5%, transparent),
      var(--bb-shadow-xs);
  --bb-b2c-detail-review-photo-area-bg:
      radial-gradient(
          circle at 96% 8%,
          color-mix(in srgb, var(--bb-b2c-detail-review-accent) 10%, transparent),
          transparent 14rem
      ),
      var(--bb-b2c-detail-review-surface-soft);
  --bb-b2c-detail-review-photo-frame-bg: var(--bb-body-bg);
  --bb-b2c-detail-review-photo-nav-bg: color-mix(in srgb, var(--bb-body-bg) 92%, transparent);
  --bb-b2c-detail-review-photo-nav-bg-hover: var(--bb-body-bg);
  --bb-b2c-detail-review-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-emphasis-color) 6%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-b2c-detail-review-shadow-hover:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 10%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
  --bb-b2c-detail-review-gallery-overlay-bg: color-mix(in srgb, var(--bb-black) 66%, transparent);
}

html[data-bs-theme=navy] .bb-b2c-detail-review-section {
  --bb-b2c-detail-review-surface: var(--bb-surface-elevated);
  --bb-b2c-detail-review-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg));
  --bb-b2c-detail-review-surface-strong: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-white) 3%);
  --bb-b2c-detail-review-area-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 9%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-detail-review-area-glow: color-mix(in srgb, var(--bb-primary) 13%, transparent);
  --bb-b2c-detail-review-area-orb: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  --bb-b2c-detail-review-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2c-detail-review-border-accent: color-mix(in srgb, var(--bb-primary) 23%, var(--bb-border-color));
  --bb-b2c-detail-review-accent-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-b2c-detail-review-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2c-detail-review-star-muted: color-mix(in srgb, var(--bb-secondary-color) 42%, transparent);
  --bb-b2c-detail-review-avatar-bg: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-b2c-detail-review-avatar-color: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-b2c-detail-review-card-bg: var(--bb-b2c-detail-review-surface);
  --bb-b2c-detail-review-card-shadow: var(--bb-b2c-detail-review-shadow);
  --bb-b2c-detail-review-photo-frame-bg: color-mix(in srgb, var(--bb-body-bg) 92%, var(--bb-white) 3%);
  --bb-b2c-detail-review-photo-nav-bg: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  --bb-b2c-detail-review-photo-nav-bg-hover: color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-white) 3%);
  --bb-b2c-detail-review-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 11%, transparent);
  --bb-b2c-detail-review-shadow-hover:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 13%, transparent);
  --bb-b2c-detail-review-gallery-overlay-bg: color-mix(in srgb, var(--bb-black) 74%, transparent);
}

html[data-bs-theme=dark] .bb-b2c-detail-review-section {
  --bb-b2c-detail-review-surface: var(--bb-surface-elevated);
  --bb-b2c-detail-review-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-b2c-detail-review-surface-strong: color-mix(in srgb, var(--bb-surface-elevated) 94%, var(--bb-white) 4%);
  --bb-b2c-detail-review-area-bg:
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-primary) 10%, var(--bb-body-bg)) 0%,
          color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg)) 100%
      );
  --bb-b2c-detail-review-area-glow: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-b2c-detail-review-area-orb: color-mix(in srgb, var(--bb-primary) 8%, transparent);
  --bb-b2c-detail-review-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-b2c-detail-review-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-b2c-detail-review-accent-soft: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-body-bg));
  --bb-b2c-detail-review-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-detail-review-star-muted: color-mix(in srgb, var(--bb-secondary-color) 44%, transparent);
  --bb-b2c-detail-review-avatar-bg: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-body-bg));
  --bb-b2c-detail-review-avatar-color: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-b2c-detail-review-card-bg: var(--bb-b2c-detail-review-surface);
  --bb-b2c-detail-review-card-shadow: var(--bb-b2c-detail-review-shadow);
  --bb-b2c-detail-review-photo-frame-bg: color-mix(in srgb, var(--bb-body-bg) 92%, var(--bb-white) 4%);
  --bb-b2c-detail-review-photo-nav-bg: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  --bb-b2c-detail-review-photo-nav-bg-hover: color-mix(in srgb, var(--bb-body-bg) 94%, var(--bb-white) 4%);
  --bb-b2c-detail-review-shadow:
      0 1rem 2.75rem color-mix(in srgb, var(--bb-black) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-b2c-detail-review-shadow-hover:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 28%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
  --bb-b2c-detail-review-gallery-overlay-bg: color-mix(in srgb, var(--bb-black) 76%, transparent);
}

/* =====================================
   Root / Area
===================================== */
.bb-b2c-detail-review-section {
  position: relative;
  min-width: 0;
}

.bb-b2c-detail-review-area {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1rem, 2.25vw, 1.5rem);
  background: radial-gradient(circle at 96% 7%, var(--bb-b2c-detail-review-area-glow), transparent 18rem), var(--bb-b2c-detail-review-area-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-detail-review-border-accent);
  border-radius: var(--bb-radius-2xl);
  box-shadow: var(--bb-b2c-detail-review-shadow);
}

.bb-b2c-detail-review-area::before {
  content: "";
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 14rem;
  height: 14rem;
  background-color: var(--bb-b2c-detail-review-area-orb);
  border-radius: 50%;
  pointer-events: none;
}

.bb-b2c-detail-review-area > * {
  position: relative;
  z-index: 1;
}

.bb-b2c-detail-review-root {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

/* =====================================
   Review Summary Host
   _ReviewSummary internal classes are untouched
===================================== */
.bb-b2c-detail-review-summary-host {
  display: block;
  min-width: 0;
}

.bb-b2c-detail-review-summary-host .bb-b2c-review-summary {
  margin: 0;
}

/* =====================================
   Shared Cards
===================================== */
.bb-b2c-detail-review-card,
.bb-b2c-detail-review-photos-card {
  overflow: hidden;
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  background: var(--bb-b2c-detail-review-card-bg);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-b2c-detail-review-card-shadow);
}

.bb-b2c-detail-review-card > *:first-child,
.bb-b2c-detail-review-photos-card > *:first-child {
  margin-top: 0;
}

.bb-b2c-detail-review-card > *:last-child,
.bb-b2c-detail-review-photos-card > *:last-child {
  margin-bottom: 0;
}

/* =====================================
   Photo Review Area
===================================== */
.bb-b2c-detail-review-photos {
  padding: clamp(1rem, 2.25vw, 1.25rem);
  background: var(--bb-b2c-detail-review-photo-area-bg);
  border: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-detail-review-photos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.bb-b2c-detail-review-photos-chip {
  gap: 0.375rem;
}

.bb-b2c-detail-review-photos-chip .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-b2c-detail-review-photos-title {
  margin: 0.625rem 0 0;
  color: var(--bb-b2c-detail-review-heading);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.035em;
}

.bb-b2c-detail-review-photos-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.625rem;
  white-space: nowrap;
}

.bb-b2c-detail-review-photos-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Photo Slider
===================================== */
.bb-b2c-detail-review-photo-slider {
  position: relative;
  min-width: 0;
}

.bb-b2c-detail-review-photo-slider .bb-ts-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding-bottom: 0.125rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.bb-b2c-detail-review-photo-slider .bb-ts-viewport::-webkit-scrollbar {
  display: none;
}

.bb-b2c-detail-review-photo-slider .bb-ts-track {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
}

.bb-b2c-detail-review-photo-slider .bb-ts-slide {
  flex: 0 0 auto;
  width: clamp(7rem, 13vw, 10.75rem);
  scroll-snap-align: start;
}

.bb-b2c-detail-review-photo-slider .bb-ts-slide-inner {
  width: 100%;
}

.bb-b2c-detail-review-photo {
  display: block;
  padding: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.bb-b2c-detail-review-photo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--bb-b2c-detail-review-photo-frame-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal);
}

.bb-b2c-detail-review-photo:hover .bb-b2c-detail-review-photo-frame {
  transform: translateY(-0.1875rem);
  border-color: color-mix(in srgb, var(--bb-b2c-detail-review-accent) 36%, var(--bb-border-color));
  box-shadow: var(--bb-b2c-detail-review-shadow-hover);
}

.bb-b2c-detail-review-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-transition-normal);
}

.bb-b2c-detail-review-photo:hover .bb-b2c-detail-review-photo-frame img {
  transform: scale(1.045);
}

/* =====================================
   Photo Slider Navigation
===================================== */
.bb-b2c-detail-review-photo-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--bb-b2c-detail-review-heading);
  background-color: var(--bb-b2c-detail-review-photo-nav-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--bb-transition-fast), transform var(--bb-transition-fast), background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.bb-b2c-detail-review-photo-nav:hover {
  background-color: var(--bb-b2c-detail-review-photo-nav-bg-hover);
  border-color: color-mix(in srgb, var(--bb-primary) 30%, var(--bb-border-color));
  transform: translateY(-50%) scale(1.04);
}

.bb-b2c-detail-review-photo-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.bb-b2c-detail-review-photo-nav .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-b2c-detail-review-photo-nav-prev {
  left: 0.75rem;
}

.bb-b2c-detail-review-photo-nav-next {
  right: 0.75rem;
}

/* =====================================
   Review List
===================================== */
.bb-b2c-detail-review-list {
  display: flex;
  flex-direction: column;
}

.bb-b2c-detail-review-item {
  padding: 1.375rem 0;
  border-top: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
}

.bb-b2c-detail-review-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.bb-b2c-detail-review-item:last-child {
  padding-bottom: 0;
}

.bb-b2c-detail-review-author-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.875rem;
}

.bb-b2c-detail-review-author-main {
  min-width: 0;
}

.bb-b2c-detail-review-author-line {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.bb-b2c-detail-review-author {
  color: var(--bb-b2c-detail-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
}

.bb-b2c-detail-review-date {
  color: var(--bb-b2c-detail-review-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-detail-review-location {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.bb-b2c-detail-review-item-stars,
.bb-b2c-detail-review-gallery-stars,
.bb-b2c-detail-review-empty-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--bb-b2c-detail-review-star);
}

.bb-b2c-detail-review-item-stars {
  margin-bottom: 0.875rem;
}

.bb-b2c-detail-review-item-stars .material-symbols-outlined,
.bb-b2c-detail-review-gallery-stars .material-symbols-outlined,
.bb-b2c-detail-review-empty-stars .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-icon-size-md);
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-b2c-detail-review-star-muted,
.bb-b2c-detail-review-empty-star-muted {
  color: var(--bb-b2c-detail-review-star-muted) !important;
}

.bb-b2c-detail-review-text-wrap {
  position: relative;
}

.bb-b2c-detail-review-text {
  position: relative;
  overflow: hidden;
  margin: 0;
  color: var(--bb-b2c-detail-review-muted);
  font-size: var(--bb-fs-sm);
  line-height: 1.8;
  white-space: pre-line;
}

.bb-b2c-detail-review-text.is-collapsed {
  display: -webkit-box;
  max-height: 3.6em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-b2c-detail-review-text.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.75rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bb-b2c-detail-review-surface) 0%, transparent), var(--bb-b2c-detail-review-surface));
  pointer-events: none;
}

.bb-b2c-detail-review-text.is-expanded {
  display: block;
  max-height: none;
  overflow: visible;
}

.bb-b2c-detail-review-more-link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.625rem;
  padding: 0;
  color: var(--bb-b2c-detail-review-accent-text) !important;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  text-decoration: none !important;
}

.bb-b2c-detail-review-more-link:hover {
  color: var(--bb-primary) !important;
  text-decoration: underline !important;
}

/* =====================================
   Actions
===================================== */
.bb-b2c-detail-review-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.25rem;
  padding-top: 1.125rem;
  border-top: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
}

.bb-b2c-detail-review-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
}

/* =====================================
   Empty State
===================================== */
.bb-b2c-detail-review-area.is-empty {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.bb-b2c-detail-review-empty {
  display: grid;
  place-items: center;
  min-height: 17.5rem;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.bb-b2c-detail-review-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  color: var(--bb-b2c-detail-review-accent-text);
  background-color: var(--bb-b2c-detail-review-accent-soft);
  border-radius: var(--bb-radius-2xl);
}

.bb-b2c-detail-review-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-b2c-detail-review-empty strong {
  color: var(--bb-b2c-detail-review-heading);
  font-size: var(--bb-fs-lg);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-b2c-detail-review-empty p {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: var(--bb-b2c-detail-review-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-b2c-detail-review-empty-stars {
  margin-top: 1rem;
}

.bb-b2c-detail-review-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bb-b2c-detail-review-empty-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
}

/* =====================================
   Gallery Overlay / Modal
===================================== */
.bb-b2c-detail-review-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background-color: var(--bb-b2c-detail-review-gallery-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast);
}

.bb-b2c-detail-review-gallery-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bb-b2c-detail-review-gallery-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1070;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  width: min(73.75rem, 100vw - 2rem);
  height: min(47.5rem, 100vh - 2.625rem);
  background-color: var(--bb-b2c-detail-review-surface);
  border: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
  border-radius: var(--bb-radius-2xl);
  box-shadow: 0 1.5rem 4.375rem color-mix(in srgb, var(--bb-black) 28%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.98);
  transition: opacity var(--bb-transition-fast), visibility var(--bb-transition-fast), transform var(--bb-transition-fast);
}

.bb-b2c-detail-review-gallery-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.bb-b2c-detail-review-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.625rem;
  padding: 0 1.125rem;
  border-bottom: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
}

.bb-b2c-detail-review-gallery-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bb-b2c-detail-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-detail-review-gallery-title .material-symbols-outlined {
  color: var(--bb-b2c-detail-review-accent-text);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-detail-review-gallery-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bb-b2c-detail-review-heading);
  background-color: var(--bb-b2c-detail-review-surface);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
}

.bb-b2c-detail-review-gallery-close:hover {
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
}

.bb-b2c-detail-review-gallery-close .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-b2c-detail-review-gallery-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.65fr);
  min-height: 0;
  background-color: var(--bb-b2c-detail-review-surface);
}

.bb-b2c-detail-review-gallery-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 1.375rem;
  background-color: var(--bb-b2c-detail-review-surface-soft);
}

.bb-b2c-detail-review-gallery-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 40rem;
  background-color: var(--bb-b2c-detail-review-surface);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
}

.bb-b2c-detail-review-gallery-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-b2c-detail-review-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  color: var(--bb-white);
  background-color: color-mix(in srgb, var(--bb-black) 72%, transparent);
  border: 0;
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
  transform: translateY(-50%);
}

.bb-b2c-detail-review-gallery-arrow-left {
  left: 1.25rem;
}

.bb-b2c-detail-review-gallery-arrow-right {
  right: 1.25rem;
}

.bb-b2c-detail-review-gallery-arrow .material-symbols-outlined {
  font-size: var(--bb-icon-size-lg);
  line-height: 1;
}

.bb-b2c-detail-review-gallery-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background-color: var(--bb-b2c-detail-review-surface);
  border-left: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
}

.bb-b2c-detail-review-gallery-review {
  flex: 1;
  overflow-y: auto;
  padding: 1.375rem;
}

.bb-b2c-detail-review-gallery-review-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bb-b2c-detail-review-gallery-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 2.625rem;
  color: var(--bb-b2c-detail-review-avatar-color);
  background-color: var(--bb-b2c-detail-review-avatar-bg);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-b2c-detail-review-gallery-author {
  min-width: 0;
}

.bb-b2c-detail-review-gallery-author strong {
  display: block;
  color: var(--bb-b2c-detail-review-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.25;
}

.bb-b2c-detail-review-gallery-author span {
  display: block;
  margin-top: 0.1875rem;
  color: var(--bb-b2c-detail-review-subtle);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-b2c-detail-review-gallery-stars {
  margin-bottom: 0.75rem;
}

.bb-b2c-detail-review-gallery-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-bottom: 0.875rem;
}

.bb-b2c-detail-review-gallery-text {
  margin: 0;
  color: var(--bb-b2c-detail-review-muted);
  font-size: var(--bb-fs-sm);
  line-height: 1.8;
  white-space: pre-line;
}

.bb-b2c-detail-review-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.875rem;
  background-color: var(--bb-b2c-detail-review-surface);
  border-top: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
}

.bb-b2c-detail-review-gallery-thumb {
  overflow: hidden;
  width: 3.625rem;
  height: 3.625rem;
  flex: 0 0 3.625rem;
  padding: 0;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  cursor: pointer;
}

.bb-b2c-detail-review-gallery-thumb.is-active {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--bb-primary) 18%, transparent);
}

.bb-b2c-detail-review-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================
   Global State
===================================== */
body.bb-b2c-detail-review-gallery-open {
  overflow: hidden;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 991.98px) {
  .bb-b2c-detail-review-photos-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-b2c-detail-review-photos-link {
    width: fit-content;
  }
  .bb-b2c-detail-review-photo-slider .bb-ts-slide {
    width: clamp(6.75rem, 22vw, 9rem);
  }
  .bb-b2c-detail-review-gallery-modal {
    height: min(52.5rem, 100vh - 1.5rem);
  }
  .bb-b2c-detail-review-gallery-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(17.5rem, 0.9fr) minmax(16.25rem, 0.7fr);
  }
  .bb-b2c-detail-review-gallery-side {
    border-left: 0;
    border-top: var(--bb-border-width) solid var(--bb-b2c-detail-review-border);
  }
}
@media (max-width: 767.98px) {
  .bb-b2c-detail-review-area {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-detail-review-root {
    gap: 1rem;
  }
  .bb-b2c-detail-review-card,
  .bb-b2c-detail-review-photos-card {
    padding: 1rem;
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-detail-review-photos {
    padding: 1rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-b2c-detail-review-author-row {
    grid-template-columns: 1fr;
  }
  .bb-b2c-detail-review-location {
    justify-content: flex-start;
  }
  .bb-b2c-detail-review-text {
    line-height: 1.75;
  }
  .bb-b2c-detail-review-text.is-collapsed {
    max-height: 3.5em;
  }
  .bb-b2c-detail-review-actions {
    justify-content: stretch;
  }
  .bb-b2c-detail-review-all-btn {
    width: 100%;
  }
  .bb-b2c-detail-review-gallery-modal {
    width: calc(100vw - 1.125rem);
    height: calc(100vh - 1.125rem);
    border-radius: var(--bb-radius-xl);
  }
  .bb-b2c-detail-review-gallery-media {
    padding: 0.75rem;
  }
  .bb-b2c-detail-review-gallery-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
  .bb-b2c-detail-review-gallery-arrow-left {
    left: 0.75rem;
  }
  .bb-b2c-detail-review-gallery-arrow-right {
    right: 0.75rem;
  }
  .bb-b2c-detail-review-gallery-review {
    padding: 1rem;
  }
}
@media (max-width: 575.98px) {
  .bb-b2c-detail-review-area {
    padding: 0.875rem;
  }
  .bb-b2c-detail-review-photo-slider .bb-ts-slide {
    width: 5.5rem;
  }
  .bb-b2c-detail-review-photo-nav {
    width: 2.375rem;
    height: 2.375rem;
  }
  .bb-b2c-detail-review-photo-nav-prev {
    left: 0.5rem;
  }
  .bb-b2c-detail-review-photo-nav-next {
    right: 0.5rem;
  }
  .bb-b2c-detail-review-empty-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .bb-b2c-detail-review-empty-actions .btn {
    width: 100%;
  }
}
.bb-account-orders-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-orders-chip .material-symbols-outlined,
.bb-account-orders-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-orders-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-orders-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-orders-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-orders-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-orders-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-orders-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-orders-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Order list */
.bb-account-orders-list {
  display: grid;
  gap: 0.875rem;
}

.bb-account-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-order-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-order-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.bb-account-order-icon {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-account-order-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-account-order-copy {
  min-width: 0;
}

.bb-account-order-label {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.375rem;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-order-copy h3 {
  margin: 0;
}

.bb-account-order-copy h3 a {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  text-decoration: none !important;
}

.bb-account-order-copy h3 a:hover {
  color: var(--bb-primary);
}

.bb-account-order-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-account-order-date .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* Meta */
.bb-account-order-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.bb-account-order-info {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-order-info span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-order-info strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bb-account-order-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
}

.bb-account-order-total {
  font-size: var(--bb-fs-base) !important;
}

/* Actions */
.bb-account-order-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-order-detail-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-order-detail-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-orders-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-orders-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-orders-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-orders-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-orders-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1399.98px) {
  .bb-account-order-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .bb-account-order-actions {
    justify-content: flex-end;
    padding-top: 0.875rem;
    border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  }
}
@media (max-width: 767.98px) {
  .bb-account-orders-panel {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-order-main {
    align-items: flex-start;
  }
  .bb-account-order-meta {
    grid-template-columns: 1fr;
  }
  .bb-account-order-actions {
    justify-content: stretch;
  }
  .bb-account-order-detail-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-order-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
  }
}
.bb-account-order-detail-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-order-detail-chip .material-symbols-outlined,
.bb-account-order-detail-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-order-detail-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-order-detail-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-order-detail-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-order-detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-order-detail-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-order-detail-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-order-detail-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-order-detail-back-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-order-detail-back-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Store cards */
.bb-account-order-detail-store-list {
  display: grid;
  gap: 1rem;
}

.bb-account-order-detail-store-card {
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-account-order-detail-store-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-order-detail-store-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-account-order-detail-store-icon {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-order-detail-store-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-order-detail-store-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-order-detail-store-name {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
  overflow-wrap: anywhere;
}

.bb-account-order-detail-store-actions {
  display: flex;
  justify-content: flex-end;
}

.bb-account-order-detail-store-action-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-order-detail-store-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Status */
.bb-account-order-detail-status-strip {
  padding: 0.875rem 1rem;
  background-color: color-mix(in srgb, var(--bb-success) 6%, var(--bb-white));
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 14%, var(--bb-border-color));
}

.bb-account-order-detail-status-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.bb-account-order-detail-status-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 9%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 16%, var(--bb-border-color));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-order-detail-status-text {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-account-order-detail-status-text strong {
  color: var(--bb-emphasis-color);
}

/* Cargo */
.bb-account-order-detail-cargo {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  margin: 1rem;
  padding: 0.875rem;
  background-color: color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 13%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-account-order-detail-cargo-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-account-order-detail-cargo-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-order-detail-cargo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-account-order-detail-cargo-item {
  display: grid;
  gap: 0.25rem;
}

.bb-account-order-detail-cargo-item span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-order-detail-cargo-item strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bb-account-order-detail-cargo-action {
  display: flex;
  justify-content: flex-end;
}

.bb-account-order-detail-cargo-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-order-detail-cargo-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Products */
.bb-account-order-detail-products {
  display: grid;
  gap: 0.875rem;
  padding: 1rem;
}

.bb-account-order-detail-product {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 8rem;
  gap: 0.875rem;
  align-items: center;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-order-detail-product-media {
  width: 6.5rem;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
}

.bb-account-order-detail-product-media img {
  width: 100%;
  height: 100%;
  max-width: 5.5rem;
  max-height: 5.5rem;
  display: block;
  object-fit: contain;
}

.bb-account-order-detail-product-body {
  min-width: 0;
  display: grid;
  gap: 0.625rem;
}

.bb-account-order-detail-product-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
  text-decoration: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-account-order-detail-product-title:hover {
  color: var(--bb-primary);
}

.bb-account-order-detail-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bb-account-order-detail-product-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.625rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  line-height: 1;
}

.bb-account-order-detail-product-meta strong {
  color: var(--bb-emphasis-color);
}

.bb-account-order-detail-product-state {
  display: flex;
  align-items: center;
}

.bb-account-order-detail-product-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-order-detail-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-account-order-detail-product-action-btn {
  min-height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-order-detail-product-price {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  text-align: right;
  background-color: var(--bb-tertiary-bg);
  border-radius: var(--bb-radius);
}

.bb-account-order-detail-product-price span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-order-detail-product-price strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

/* Empty */
.bb-account-order-detail-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-order-detail-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-order-detail-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-order-detail-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-order-detail-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-account-order-detail-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 991.98px) {
  .bb-account-order-detail-cargo {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  .bb-account-order-detail-cargo-action {
    grid-column: 1/-1;
    justify-content: stretch;
  }
  .bb-account-order-detail-cargo-btn {
    justify-content: center;
    width: 100%;
  }
  .bb-account-order-detail-product {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
  .bb-account-order-detail-product-price {
    grid-column: 1/-1;
    text-align: left;
  }
}
@media (max-width: 767.98px) {
  .bb-account-order-detail-panel,
  .bb-account-order-detail-store-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-order-detail-store-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-order-detail-store-actions,
  .bb-account-order-detail-store-action-btn {
    width: 100%;
  }
  .bb-account-order-detail-store-action-btn {
    justify-content: center;
    border-radius: var(--bb-radius);
  }
  .bb-account-order-detail-cargo {
    grid-template-columns: 1fr;
  }
  .bb-account-order-detail-cargo-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-order-detail-cargo-icon {
    display: none;
  }
  .bb-account-order-detail-product {
    grid-template-columns: 1fr;
  }
  .bb-account-order-detail-product-media {
    width: 100%;
    height: 12rem;
  }
  .bb-account-order-detail-product-media img {
    max-width: 11rem;
    max-height: 11rem;
  }
  .bb-account-order-detail-product-action-btn,
  .bb-account-order-detail-back-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
  .bb-account-order-detail-product-actions {
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .bb-account-order-detail-products {
    padding: 0.875rem;
  }
}
/* =====================================
   Order Contract
   FormLight document page
===================================== */
.bb-order-contract-page {
  width: 100%;
}

/* Back */
.bb-order-contract-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-contract-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-order-contract-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-order-contract-head {
  max-width: 54rem;
  margin-bottom: 1.5rem;
}

.bb-order-contract-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-order-contract-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-order-contract-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-order-contract-text {
  max-width: 48rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Toolbar */
.bb-order-contract-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-order-contract-toolbar-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bb-order-contract-toolbar-info > .material-symbols-outlined {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-order-contract-toolbar-info span:not(.material-symbols-outlined) {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-order-contract-toolbar-info strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-order-contract-print {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-order-contract-print .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Meta */
.bb-order-contract-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.bb-order-contract-meta-card {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-order-contract-meta-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-order-contract-meta-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-order-contract-meta-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-order-contract-meta-card strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Document */
.bb-order-contract-document {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-order-contract-document-head {
  padding: 1rem;
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-order-contract-document-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-order-contract-document-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-order-contract-content {
  padding: clamp(1rem, 2.5vw, 1.75rem);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.85;
}

.bb-order-contract-content h1,
.bb-order-contract-content h2,
.bb-order-contract-content h3,
.bb-order-contract-content h4 {
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-order-contract-content h1 {
  font-size: var(--bb-fs-2xl);
}

.bb-order-contract-content h2 {
  font-size: var(--bb-fs-xl);
}

.bb-order-contract-content h3 {
  font-size: var(--bb-fs-md);
}

.bb-order-contract-content p {
  margin-bottom: 0.875rem;
}

.bb-order-contract-content table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: var(--bb-fs-sm);
}

.bb-order-contract-content th,
.bb-order-contract-content td {
  padding: 0.625rem 0.75rem;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  vertical-align: top;
}

.bb-order-contract-content th {
  background-color: var(--bb-tertiary-bg);
  color: var(--bb-emphasis-color);
  font-weight: var(--bb-fw-bold);
}

.bb-order-contract-content a {
  color: var(--bb-primary);
  font-weight: var(--bb-fw-semibold);
}

/* Empty */
.bb-order-contract-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-order-contract-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-order-contract-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-order-contract-empty h2 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-order-contract-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-order-contract-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 64rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-order-contract-page) .bb-layout-light-card {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-order-contract-page) .bb-layout-light-card-body {
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-order-contract-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-order-contract-print {
    justify-content: center;
    width: 100%;
    border-radius: var(--bb-radius);
  }
  .bb-order-contract-meta-grid {
    grid-template-columns: 1fr;
  }
  .bb-order-contract-document,
  .bb-order-contract-empty {
    border-radius: var(--bb-radius-lg);
  }
}
/* Print */
@media print {
  .bb-layout-light-visual,
  .bb-order-contract-back,
  .bb-order-contract-toolbar,
  .bb-order-contract-head,
  .bb-order-contract-meta-grid {
    display: none !important;
  }
  .bb-layout-light-page,
  .bb-layout-light-card,
  .bb-layout-light-card-body,
  .bb-order-contract-page,
  .bb-order-contract-document {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bb-white) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .bb-order-contract-document-head {
    padding: 0 0 1rem 0 !important;
    background: var(--bb-white) !important;
  }
  .bb-order-contract-content {
    padding: 0 !important;
    color: var(--bb-black) !important;
    font-size: var(--bb-fs-xs) !important;
    line-height: 1.55 !important;
  }
  .bb-order-contract-content table {
    page-break-inside: avoid;
  }
}
.bb-account-requests-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-requests-chip .material-symbols-outlined,
.bb-account-requests-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-requests-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-account-requests-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-account-sidebar-toggle {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-account-sidebar-toggle .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* Panel */
.bb-account-requests-panel {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-account-requests-panel-head {
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-account-requests-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-account-requests-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-account-requests-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Request list */
.bb-account-requests-list {
  display: grid;
  gap: 1rem;
}

.bb-account-request-card {
  overflow: hidden;
  background: linear-gradient(180deg, var(--bb-body-bg) 0%, color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-white)) 100%);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bb-account-request-card:hover {
  transform: translateY(-0.125rem);
  border-color: color-mix(in srgb, var(--bb-primary) 22%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-sm);
}

.bb-account-request-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bb-body-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-account-request-head-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-account-request-icon {
  width: 2.875rem;
  height: 2.875rem;
  min-width: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-request-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-account-request-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-account-request-card-head h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-account-request-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-account-request-date .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-account-request-type {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  color: color-mix(in srgb, var(--bb-warning) 74%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 10%, var(--bb-white));
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

/* Body */
.bb-account-request-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
}

.bb-account-request-main {
  min-width: 0;
  display: grid;
  gap: 0.875rem;
}

.bb-account-request-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.bb-account-request-info {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-request-info span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-request-info strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-account-request-product {
  display: grid;
  gap: 0.375rem;
  padding: 0.875rem;
  background-color: color-mix(in srgb, var(--bb-primary) 5%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-account-request-product-kicker {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-request-product-link {
  color: var(--bb-emphasis-color) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-decoration: none !important;
  overflow-wrap: anywhere;
}

.bb-account-request-product-link:hover {
  color: var(--bb-primary) !important;
}

.bb-account-request-description {
  display: grid;
  gap: 0.375rem;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-request-description span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-account-request-description p {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
  overflow-wrap: anywhere;
}

/* Gallery */
.bb-account-request-gallery {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
}

.bb-account-request-gallery-head {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-account-request-gallery-head .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-account-request-gallery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-account-request-gallery-item {
  width: 4.25rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius);
  text-decoration: none !important;
}

.bb-account-request-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--bb-radius) - 0.25rem);
}

/* Actions */
.bb-account-request-actions {
  min-width: 12.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.625rem;
}

.bb-account-request-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-account-request-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Empty */
.bb-account-requests-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-account-requests-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-account-requests-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-account-requests-empty h3 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-account-requests-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-account-request-card-body {
    grid-template-columns: 1fr;
  }
  .bb-account-request-actions {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (max-width: 991.98px) {
  .bb-account-request-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bb-account-requests-panel,
  .bb-account-request-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-account-request-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-account-request-type {
    white-space: normal;
  }
  .bb-account-request-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-account-request-actions {
    flex-direction: column;
  }
  .bb-account-request-action-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-account-request-head-left {
    align-items: flex-start;
  }
  .bb-account-request-gallery-item {
    width: 4rem;
    height: 4rem;
  }
}
.bb-cargo-tracking-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-cargo-tracking-chip .material-symbols-outlined,
.bb-cargo-tracking-panel-kicker .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-cargo-tracking-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-cargo-tracking-text {
  max-width: 46rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Panel */
.bb-cargo-tracking-panel {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-cargo-tracking-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-cargo-tracking-panel-kicker {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-cargo-tracking-panel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-cargo-tracking-panel-text {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Status */
.bb-cargo-tracking-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.bb-cargo-tracking-status .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-cargo-tracking-status.is-shipped {
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
}

.bb-cargo-tracking-status.is-waiting {
  color: color-mix(in srgb, var(--bb-warning) 74%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-warning) 10%, var(--bb-white));
}

/* Summary */
.bb-cargo-tracking-summary-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  color: var(--bb-white);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 28%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--bb-coal-300) 88%, var(--bb-primary)) 0%, var(--bb-coal-400) 100%);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-cargo-tracking-summary-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius-lg);
}

.bb-cargo-tracking-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-cargo-tracking-summary-content {
  min-width: 0;
}

.bb-cargo-tracking-summary-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-primary);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-cargo-tracking-summary-content strong {
  display: block;
  color: var(--bb-white);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.02em);
}

.bb-cargo-tracking-summary-content p {
  margin: 0.375rem 0 0;
  color: color-mix(in srgb, var(--bb-white) 76%, transparent);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-cargo-tracking-copy-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-cargo-tracking-copy-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Timeline */
.bb-cargo-tracking-timeline {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-cargo-tracking-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: flex-start;
}

.bb-cargo-tracking-timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: 1.125rem;
  width: 1px;
  height: calc(100% + 0.75rem);
  background-color: color-mix(in srgb, var(--bb-border-color) 85%, transparent);
}

.bb-cargo-tracking-timeline-dot {
  position: relative;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-secondary-color);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: 50%;
}

.bb-cargo-tracking-timeline-dot .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-cargo-tracking-timeline-item.is-complete .bb-cargo-tracking-timeline-dot {
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-success) 16%, var(--bb-border-color));
}

.bb-cargo-tracking-timeline-item.is-current .bb-cargo-tracking-timeline-dot {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
}

.bb-cargo-tracking-timeline-item strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-cargo-tracking-timeline-item span:not(.material-symbols-outlined) {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Info */
.bb-cargo-tracking-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-cargo-tracking-info-item {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-cargo-tracking-info-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
}

.bb-cargo-tracking-info-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-cargo-tracking-info-label {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-cargo-tracking-info-value {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bb-cargo-tracking-info-muted {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Actions */
.bb-cargo-tracking-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-cargo-tracking-action-btn {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-cargo-tracking-action-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-cargo-tracking-copy-primary {
  color: var(--bb-primary-inverse) !important;
}

/* Empty */
.bb-cargo-tracking-empty {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 32%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius-lg);
}

.bb-cargo-tracking-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-cargo-tracking-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-cargo-tracking-empty h2 {
  max-width: 34rem;
  margin: 0.875rem auto 0.625rem;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-cargo-tracking-empty p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .bb-cargo-tracking-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 991.98px) {
  .bb-cargo-tracking-summary-card {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }
  .bb-cargo-tracking-copy-btn {
    grid-column: 1/-1;
    justify-content: center;
  }
  .bb-cargo-tracking-info-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-cargo-tracking-panel,
  .bb-cargo-tracking-summary-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-cargo-tracking-actions {
    justify-content: stretch;
  }
  .bb-cargo-tracking-action-btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-cargo-tracking-summary-card {
    grid-template-columns: 1fr;
  }
  .bb-cargo-tracking-summary-icon {
    width: 3rem;
    height: 3rem;
  }
}
/* =====================================
   Order Return
   FormLight request page
===================================== */
.bb-order-return-page {
  width: 100%;
}

/* Back */
.bb-order-return-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-return-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-order-return-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-order-return-head {
  max-width: 42rem;
  margin-bottom: 1.5rem;
}

.bb-order-return-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-order-return-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-order-return-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-order-return-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-order-return-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-order-return-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-order-return-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-order-return-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-order-return-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-order-return-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-order-return-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-order-return-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-order-return-form {
  display: grid;
  gap: 1rem;
}

.bb-order-return-form-group {
  min-width: 0;
}

.bb-order-return-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-return-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-order-return-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-order-return-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-order-return-input-group .form-select {
  min-height: 2.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-order-return-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-order-return-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-order-return-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-order-return-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Warning */
.bb-order-return-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  color: var(--bb-secondary-color);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-order-return-warning > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-order-return-warning strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-order-return-warning p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Actions */
.bb-order-return-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-order-return-submit,
.bb-order-return-secondary-btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-order-return-submit {
  min-width: 11rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}

.bb-order-return-submit .material-symbols-outlined,
.bb-order-return-secondary-btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-order-return-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 42rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-order-return-page) .bb-layout-light-card {
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-order-return-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-order-return-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-order-return-actions {
    justify-content: stretch;
  }
  .bb-order-return-submit,
  .bb-order-return-secondary-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-order-return-card-head {
    gap: 0.625rem;
  }
  .bb-order-return-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Bulbulustur Web - Payment Checkout
   Layer: pages/order/order-checkout.scss

   Rules:
   - Light / Navy / Dark safe
   - Token based
   - No hardcoded fallback colors
   - No raw rgba shadows
   - Responsive at bottom
===================================== */
/* =====================================
   Light Mode Tokens
===================================== */
:root,
html[data-bs-theme=light] {
  --bb-payment-checkout-page-bg: var(--bb-body-bg);
  --bb-payment-checkout-shell-bg: color-mix(in srgb, var(--bb-tertiary-bg) 52%, var(--bb-body-bg));
  --bb-payment-checkout-surface: var(--bb-body-bg);
  --bb-payment-checkout-surface-soft: var(--bb-tertiary-bg);
  --bb-payment-checkout-surface-elevated: var(--bb-surface-elevated);
  --bb-payment-checkout-heading: var(--bb-emphasis-color);
  --bb-payment-checkout-text: var(--bb-body-color);
  --bb-payment-checkout-muted: var(--bb-secondary-color);
  --bb-payment-checkout-subtle: var(--bb-tertiary-color);
  --bb-payment-checkout-accent: var(--bb-primary);
  --bb-payment-checkout-accent-hover: var(--bb-primary-hover);
  --bb-payment-checkout-accent-soft: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  --bb-payment-checkout-accent-soft-strong: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-surface-elevated));
  --bb-payment-checkout-accent-text: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-emphasis-color));
  --bb-payment-checkout-accent-inverse: var(--bb-primary-inverse);
  --bb-payment-checkout-success: var(--bb-success);
  --bb-payment-checkout-warning: var(--bb-warning);
  --bb-payment-checkout-border: var(--bb-border-color);
  --bb-payment-checkout-border-soft: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-payment-checkout-border-muted: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-payment-checkout-border-accent: color-mix(in srgb, var(--bb-primary) 18%, var(--bb-border-color));
  --bb-payment-checkout-card-shadow: var(--bb-shadow-sm);
  --bb-payment-checkout-card-shadow-strong: var(--bb-shadow-lg);
  --bb-payment-checkout-modal-shadow: var(--bb-shadow-xl);
  --bb-payment-checkout-summary-head-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 28%, transparent),
          transparent 38%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-color-navy-900) 88%, var(--bb-primary)) 0%,
          var(--bb-color-navy-900) 100%
      );
  --bb-payment-checkout-summary-head-color: var(--bb-theme-on-dark);
  --bb-payment-checkout-summary-head-muted: color-mix(in srgb, var(--bb-theme-on-dark) 72%, transparent);
  --bb-payment-checkout-total-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 38%
      ),
      color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-bg: color-mix(in srgb, var(--bb-warning) 8%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-icon-bg: color-mix(in srgb, var(--bb-warning) 14%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-icon-color: color-mix(in srgb, var(--bb-warning) 72%, var(--bb-emphasis-color));
}

/* =====================================
   Navy Mode Tokens
===================================== */
html[data-bs-theme=navy] {
  --bb-payment-checkout-page-bg: var(--bb-body-bg);
  --bb-payment-checkout-shell-bg: color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-surface-elevated));
  --bb-payment-checkout-surface: var(--bb-surface-elevated);
  --bb-payment-checkout-surface-soft: var(--bb-surface-soft);
  --bb-payment-checkout-surface-elevated: var(--bb-surface-elevated);
  --bb-payment-checkout-border: color-mix(in srgb, var(--bb-border-color) 88%, transparent);
  --bb-payment-checkout-border-soft: color-mix(in srgb, var(--bb-border-color) 74%, transparent);
  --bb-payment-checkout-border-muted: color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  --bb-payment-checkout-border-accent: color-mix(in srgb, var(--bb-primary) 24%, var(--bb-border-color));
  --bb-payment-checkout-accent-soft: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-surface-elevated));
  --bb-payment-checkout-accent-soft-strong: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-surface-elevated));
  --bb-payment-checkout-accent-text: color-mix(in srgb, var(--bb-primary) 88%, var(--bb-emphasis-color));
  --bb-payment-checkout-summary-head-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 28%, transparent),
          transparent 38%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 76%, var(--bb-color-navy-900)) 0%,
          color-mix(in srgb, var(--bb-surface-elevated) 78%, var(--bb-primary)) 100%
      );
  --bb-payment-checkout-total-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 13%, transparent),
          transparent 38%
      ),
      color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-bg: color-mix(in srgb, var(--bb-warning) 9%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-icon-bg: color-mix(in srgb, var(--bb-warning) 16%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-icon-color: color-mix(in srgb, var(--bb-warning) 82%, var(--bb-emphasis-color));
}

/* =====================================
   Dark Mode Tokens
===================================== */
html[data-bs-theme=dark] {
  --bb-payment-checkout-page-bg: var(--bb-body-bg);
  --bb-payment-checkout-shell-bg: color-mix(in srgb, var(--bb-body-bg) 78%, var(--bb-surface-elevated));
  --bb-payment-checkout-surface: var(--bb-surface-elevated);
  --bb-payment-checkout-surface-soft: var(--bb-surface-soft);
  --bb-payment-checkout-surface-elevated: var(--bb-surface-elevated);
  --bb-payment-checkout-border: color-mix(in srgb, var(--bb-border-color) 86%, transparent);
  --bb-payment-checkout-border-soft: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  --bb-payment-checkout-border-muted: color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  --bb-payment-checkout-border-accent: color-mix(in srgb, var(--bb-primary) 23%, var(--bb-border-color));
  --bb-payment-checkout-accent-soft: color-mix(in srgb, var(--bb-primary) 11%, var(--bb-surface-elevated));
  --bb-payment-checkout-accent-soft-strong: color-mix(in srgb, var(--bb-primary) 15%, var(--bb-surface-elevated));
  --bb-payment-checkout-accent-text: color-mix(in srgb, var(--bb-primary) 86%, var(--bb-emphasis-color));
  --bb-payment-checkout-summary-head-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 26%, transparent),
          transparent 38%
      ),
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--bb-body-bg) 82%, var(--bb-color-navy-900)) 0%,
          color-mix(in srgb, var(--bb-surface-elevated) 80%, var(--bb-primary)) 100%
      );
  --bb-payment-checkout-total-bg:
      radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 38%
      ),
      color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-bg: color-mix(in srgb, var(--bb-warning) 8%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-icon-bg: color-mix(in srgb, var(--bb-warning) 14%, var(--bb-surface-elevated));
  --bb-payment-checkout-empty-icon-color: color-mix(in srgb, var(--bb-warning) 80%, var(--bb-emphasis-color));
}

/* =====================================
   Page Scope
===================================== */
.bb-payment-checkout-page {
  width: 100%;
  min-width: 0;
  color: var(--bb-payment-checkout-text);
  background-color: var(--bb-payment-checkout-page-bg);
}

.bb-payment-checkout-page .material-symbols-outlined {
  line-height: 1;
}

.bb-payment-checkout-page a,
.bb-payment-checkout-page button,
.bb-payment-checkout-page summary,
.bb-payment-checkout-page label {
  transition: color var(--bb-transition-normal), background-color var(--bb-transition-normal), border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal), opacity var(--bb-transition-normal);
}

/* =====================================
   Header
===================================== */
.bb-payment-checkout-head {
  max-width: 64rem;
  margin-bottom: 1.5rem;
}

.bb-payment-checkout-chip {
  margin-bottom: 0.75rem;
  color: var(--bb-payment-checkout-accent-text) !important;
  background-color: var(--bb-payment-checkout-accent-soft) !important;
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-accent);
}

.bb-payment-checkout-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-payment-checkout-title {
  margin: 0;
  color: var(--bb-payment-checkout-heading);
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-payment-checkout-text {
  max-width: 52rem;
  margin: 0.625rem 0 0;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* =====================================
   Layout
===================================== */
.bb-payment-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.25rem;
  align-items: start;
}

.bb-payment-checkout-main {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.bb-payment-checkout-summary {
  position: sticky;
  top: 1.25rem;
}

/* =====================================
   Step Cards
===================================== */
.bb-payment-step-card {
  padding: clamp(1rem, 2vw, 1.25rem);
  background-color: var(--bb-payment-checkout-surface);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-payment-checkout-card-shadow);
}

.bb-payment-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
}

.bb-payment-step-title-wrap {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bb-payment-step-number {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-payment-checkout-accent-inverse);
  background-color: var(--bb-payment-checkout-accent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-payment-step-head h2 {
  margin: 0;
  color: var(--bb-payment-checkout-heading);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight);
}

.bb-payment-step-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-payment-step-action,
.bb-payment-small-action {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-payment-step-action .material-symbols-outlined,
.bb-payment-small-action .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* =====================================
   Payment Address Component
===================================== */
.bb-payment-address-area,
.bb-payment-address-component {
  min-width: 0;
}

.bb-payment-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-payment-address-card {
  min-width: 0;
  display: grid;
  gap: 0.875rem;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-payment-checkout-accent) 6%, transparent), transparent 34%), var(--bb-payment-checkout-surface);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-payment-checkout-card-shadow);
  transition: border-color var(--bb-transition-normal), box-shadow var(--bb-transition-normal), transform var(--bb-transition-normal);
}

.bb-payment-address-card:hover {
  transform: translateY(-0.0625rem);
  border-color: var(--bb-payment-checkout-border-accent);
  box-shadow: var(--bb-payment-checkout-card-shadow-strong);
}

.bb-payment-address-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.bb-payment-address-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-payment-checkout-accent);
  background-color: var(--bb-payment-checkout-accent-soft);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-accent);
  border-radius: var(--bb-radius);
}

.bb-payment-address-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-payment-address-card-head h3 {
  margin: 0;
  color: var(--bb-payment-checkout-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-address-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-payment-address-choice,
.bb-payment-address-modal-choice {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.875rem;
  color: var(--bb-payment-checkout-heading);
  background-color: var(--bb-payment-checkout-surface-soft);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
  border-radius: var(--bb-radius);
  cursor: pointer;
}

.bb-payment-address-choice input,
.bb-payment-address-modal-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-payment-address-radio {
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
  background-color: var(--bb-payment-checkout-surface);
  border: 0.125rem solid color-mix(in srgb, var(--bb-payment-checkout-border) 90%, var(--bb-payment-checkout-muted));
  border-radius: var(--bb-radius-pill);
}

.bb-payment-address-radio::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--bb-payment-checkout-accent);
  border-radius: var(--bb-radius-pill);
  transform: scale(0);
  transition: transform var(--bb-transition-normal);
}

.bb-payment-address-choice input:checked + .bb-payment-address-radio,
.bb-payment-address-modal-choice input:checked + .bb-payment-address-radio {
  border-color: var(--bb-payment-checkout-accent);
}

.bb-payment-address-choice input:checked + .bb-payment-address-radio::after,
.bb-payment-address-modal-choice input:checked + .bb-payment-address-radio::after {
  transform: scale(1);
}

.bb-payment-address-choice:has(input:checked),
.bb-payment-address-modal-choice:has(input:checked) {
  background-color: var(--bb-payment-checkout-accent-soft);
  border-color: var(--bb-payment-checkout-border-accent);
}

.bb-payment-address-label {
  min-width: 0;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-payment-address-label strong {
  color: var(--bb-payment-checkout-heading);
  font-weight: var(--bb-fw-bold);
}

.bb-payment-address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bb-payment-address-action {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
}

.bb-payment-address-action .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

/* =====================================
   Payment Methods
===================================== */
.bb-payment-method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
  gap: 1rem;
}

.bb-payment-method-card,
.bb-payment-installment-card {
  min-width: 0;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-payment-checkout-accent) 5%, transparent), transparent 34%), var(--bb-payment-checkout-surface-soft);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
  border-radius: var(--bb-radius-lg);
}

.bb-payment-method-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bb-payment-method-head h3 {
  margin: 0;
  color: var(--bb-payment-checkout-heading);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-method-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-payment-inline-link {
  color: var(--bb-payment-checkout-accent) !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  text-decoration: none !important;
  white-space: nowrap;
}

.bb-payment-inline-link:hover {
  color: var(--bb-payment-checkout-accent-text) !important;
  text-decoration: underline !important;
}

.bb-payment-card-input-group .input-group-text {
  color: var(--bb-payment-checkout-muted);
  background-color: var(--bb-payment-checkout-surface);
  border-color: var(--bb-payment-checkout-border-soft);
}

.bb-payment-field-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-payment-save-card {
  padding: 0.75rem 0.875rem;
  background-color: var(--bb-payment-checkout-surface);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
  border-radius: var(--bb-radius);
}

/* =====================================
   Installments
===================================== */
.bb-payment-installment-table-wrap {
  overflow: auto;
  background-color: var(--bb-payment-checkout-surface);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
  border-radius: var(--bb-radius);
}

.bb-payment-installment-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.bb-payment-installment-table th,
.bb-payment-installment-table td {
  padding: 0.75rem;
  color: var(--bb-payment-checkout-heading);
  border-bottom: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
  font-size: var(--bb-fs-sm);
  vertical-align: middle;
}

.bb-payment-installment-table thead th {
  color: var(--bb-payment-checkout-muted);
  background-color: var(--bb-payment-checkout-surface-soft);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-payment-installment-table tbody tr {
  cursor: pointer;
}

.bb-payment-installment-table tbody tr:hover {
  background-color: var(--bb-payment-checkout-accent-soft);
}

.bb-payment-installment-table tbody tr.selected {
  background-color: var(--bb-payment-checkout-accent-soft-strong);
}

.bb-payment-installment-table tbody tr:last-child td {
  border-bottom: 0;
}

/* =====================================
   Contracts
===================================== */
.bb-payment-contracts {
  display: grid;
  gap: 0.75rem;
}

.bb-payment-contract-item {
  overflow: hidden;
  background-color: var(--bb-payment-checkout-surface-soft);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
  border-radius: var(--bb-radius-lg);
}

.bb-payment-contract-item summary {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  color: var(--bb-payment-checkout-heading);
  cursor: pointer;
  list-style: none;
}

.bb-payment-contract-item summary::-webkit-details-marker {
  display: none;
}

.bb-payment-contract-item summary > .material-symbols-outlined {
  color: var(--bb-payment-checkout-accent);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-payment-contract-item summary strong {
  flex: 1 1 auto;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-payment-contract-arrow {
  transition: transform var(--bb-transition-normal);
}

.bb-payment-contract-item[open] .bb-payment-contract-arrow {
  transform: rotate(180deg);
}

.bb-payment-contract-content {
  max-height: 24rem;
  overflow: auto;
  padding: 1rem;
  color: var(--bb-payment-checkout-heading);
  background-color: var(--bb-payment-checkout-surface);
  border-top: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-payment-contract-content table {
  width: 100%;
  border-collapse: collapse;
}

.bb-payment-contract-content th,
.bb-payment-contract-content td {
  padding: 0.5rem;
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
}

/* =====================================
   Summary
===================================== */
.bb-payment-summary-card {
  overflow: hidden;
  background-color: var(--bb-payment-checkout-surface);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-accent);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-payment-checkout-card-shadow-strong);
}

.bb-payment-summary-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  color: var(--bb-payment-checkout-summary-head-color);
  background: var(--bb-payment-checkout-summary-head-bg);
}

.bb-payment-summary-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-payment-checkout-accent-inverse);
  background-color: var(--bb-payment-checkout-accent);
  border-radius: var(--bb-radius);
}

.bb-payment-summary-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-payment-summary-head h2 {
  margin: 0;
  color: var(--bb-payment-checkout-summary-head-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-summary-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-payment-checkout-summary-head-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-payment-summary-body {
  padding: 1rem;
}

.bb-payment-terms-box {
  margin: 0 1rem 1rem;
  padding: 0.875rem;
  background-color: var(--bb-payment-checkout-surface-soft);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
  border-radius: var(--bb-radius);
}

.bb-payment-terms-box .form-check-label {
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-payment-terms-box .form-check-label strong {
  color: var(--bb-payment-checkout-heading);
}

.bb-payment-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0;
  padding: 0 1rem 1rem;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

.bb-payment-secure-note .material-symbols-outlined {
  color: var(--bb-payment-checkout-success);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* =====================================
   Basket Summary Component
===================================== */
.bb-basket-summary {
  display: grid;
  gap: 0.875rem;
}

.bb-basket-summary-list {
  display: grid;
  gap: 0.625rem;
}

.bb-basket-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
}

.bb-basket-summary-row:first-child {
  padding-top: 0;
}

.bb-basket-summary-row--fee {
  display: none;
}

.bb-basket-summary-label {
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-basket-summary-value {
  color: var(--bb-payment-checkout-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  white-space: nowrap;
}

.bb-basket-summary-total {
  display: grid;
  gap: 0.375rem;
  padding: 1rem;
  background: var(--bb-payment-checkout-total-bg);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-accent);
  border-radius: var(--bb-radius-lg);
}

.bb-basket-summary-total-label {
  color: var(--bb-payment-checkout-accent-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-basket-summary-total-value {
  color: var(--bb-payment-checkout-heading);
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: -0.025em;
}

/* =====================================
   Confirm Button
===================================== */
.bb-payment-confirm-btn {
  --bb-btn-bg: var(--bb-payment-checkout-accent);
  --bb-btn-color: var(--bb-payment-checkout-accent-inverse);
  --bb-btn-border-color: var(--bb-payment-checkout-accent);
  --bb-btn-hover-bg: color-mix(in srgb, var(--bb-payment-checkout-accent) 88%, var(--bb-payment-checkout-heading));
  --bb-btn-hover-color: var(--bb-payment-checkout-accent-inverse);
  --bb-btn-hover-border-color: var(--bb-btn-hover-bg);
  --bb-btn-active-bg: color-mix(in srgb, var(--bb-payment-checkout-accent) 80%, var(--bb-payment-checkout-heading));
  --bb-btn-active-color: var(--bb-payment-checkout-accent-inverse);
  --bb-btn-active-border-color: var(--bb-btn-active-bg);
  width: calc(100% - 2rem);
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0 1rem 1rem;
  color: var(--bb-payment-checkout-accent-inverse) !important;
  background-color: var(--bb-payment-checkout-accent) !important;
  border-color: var(--bb-payment-checkout-accent) !important;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-payment-confirm-btn:hover {
  color: var(--bb-payment-checkout-accent-inverse) !important;
  background-color: color-mix(in srgb, var(--bb-payment-checkout-accent) 88%, var(--bb-payment-checkout-heading)) !important;
  border-color: color-mix(in srgb, var(--bb-payment-checkout-accent) 88%, var(--bb-payment-checkout-heading)) !important;
}

.bb-payment-confirm-btn:disabled,
.bb-payment-confirm-btn.disabled {
  opacity: var(--bb-disabled-opacity);
  color: var(--bb-payment-checkout-accent-inverse) !important;
  background-color: var(--bb-payment-checkout-accent) !important;
  border-color: var(--bb-payment-checkout-accent) !important;
  cursor: not-allowed;
  box-shadow: none;
}

.bb-payment-confirm-btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* =====================================
   Address Empty State
===================================== */
.bb-payment-address-empty {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  background-color: var(--bb-payment-checkout-empty-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-payment-checkout-warning) 18%, var(--bb-payment-checkout-border));
  border-radius: var(--bb-radius-lg);
}

.bb-payment-address-empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-payment-checkout-empty-icon-color);
  background-color: var(--bb-payment-checkout-empty-icon-bg);
  border-radius: var(--bb-radius);
}

.bb-payment-address-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-payment-address-empty h3 {
  margin: 0;
  color: var(--bb-payment-checkout-heading);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-address-empty p {
  margin: 0.25rem 0 0;
  color: var(--bb-payment-checkout-muted);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-payment-address-empty-btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-payment-address-empty-btn .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* =====================================
   Address Modal
===================================== */
.bb-payment-address-modal .modal-content {
  overflow: hidden;
  background-color: var(--bb-payment-checkout-surface);
  border: var(--bb-border-width) solid var(--bb-payment-checkout-border-muted);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-payment-checkout-modal-shadow);
}

.bb-payment-address-modal .modal-header {
  align-items: flex-start;
  background-color: var(--bb-payment-checkout-surface-soft);
  border-bottom: var(--bb-border-width) solid var(--bb-payment-checkout-border-soft);
}

.bb-payment-address-modal-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-payment-checkout-accent);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: var(--bb-letter-spacing-wide);
  text-transform: uppercase;
}

.bb-payment-address-modal .modal-title {
  color: var(--bb-payment-checkout-heading);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-address-modal-list {
  display: grid;
  gap: 0.75rem;
}

.bb-payment-address-modal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.bb-payment-address-modal-edit {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  white-space: nowrap;
}

.bb-payment-address-modal-edit .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-payment-address-modal-submit {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-payment-address-modal-submit .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* =====================================
   FormLight Width Override
===================================== */
.bb-layout-light-page:has(.bb-payment-checkout-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 82rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-payment-checkout-page) .bb-layout-light-card {
  width: 100%;
  max-width: 82rem;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bb-payment-checkout-shell-bg);
  border-color: var(--bb-payment-checkout-border-soft);
  box-shadow: var(--bb-payment-checkout-card-shadow-strong);
}

.bb-layout-light-page:has(.bb-payment-checkout-page) .bb-layout-light-card-body {
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

/* =====================================
   Checkout Modal Layer Fix
===================================== */
body:has(.bb-payment-checkout-page) .modal {
  z-index: 1095;
}

body:has(.bb-payment-checkout-page) .modal.show {
  display: block;
  z-index: 1095;
}

body:has(.bb-payment-checkout-page) .modal-dialog {
  position: relative;
  z-index: 1096;
}

body:has(.bb-payment-checkout-page) .modal-content {
  position: relative;
  z-index: 1097;
}

body:has(.bb-payment-checkout-page) .modal-backdrop {
  z-index: 1085;
}

body:has(.bb-payment-checkout-page) .modal-backdrop.show {
  opacity: 0.62;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-payment-checkout-layout {
    grid-template-columns: 1fr;
  }
  .bb-payment-checkout-summary {
    position: static;
  }
  .bb-payment-method-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .bb-payment-address-grid {
    grid-template-columns: 1fr;
  }
  .bb-payment-address-empty {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  .bb-payment-address-empty-btn {
    grid-column: 1/-1;
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  .bb-payment-step-card,
  .bb-payment-summary-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-payment-step-head,
  .bb-payment-method-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-payment-step-action,
  .bb-payment-small-action {
    width: 100%;
    border-radius: var(--bb-radius);
  }
  .bb-payment-confirm-btn {
    border-radius: var(--bb-radius);
  }
  .bb-payment-address-actions {
    justify-content: stretch;
  }
  .bb-payment-address-action {
    flex: 1 1 auto;
  }
  .bb-payment-address-modal-item {
    grid-template-columns: 1fr;
  }
  .bb-payment-address-modal-edit {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-layout-light-page:has(.bb-payment-checkout-page) .bb-layout-light-card-body {
    padding: 1rem;
  }
  .bb-payment-checkout-title {
    font-size: clamp(1.625rem, 8vw, 2rem);
  }
  .bb-payment-step-number {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }
  .bb-payment-address-choice,
  .bb-payment-address-modal-choice {
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
  }
}
/* =====================================
   Order Cancel
   FormLight request page
===================================== */
.bb-order-cancel-page {
  width: 100%;
}

/* Back */
.bb-order-cancel-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-cancel-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-order-cancel-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-order-cancel-head {
  max-width: 42rem;
  margin-bottom: 1.5rem;
}

.bb-order-cancel-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-order-cancel-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-order-cancel-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-order-cancel-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-order-cancel-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-danger);
  background-color: color-mix(in srgb, var(--bb-danger) 7%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-order-cancel-error .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-danger);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-order-cancel-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-order-cancel-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-order-cancel-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-order-cancel-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-order-cancel-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-order-cancel-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-order-cancel-form {
  display: grid;
  gap: 1rem;
}

.bb-order-cancel-form-group {
  min-width: 0;
}

.bb-order-cancel-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-cancel-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-order-cancel-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-order-cancel-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-order-cancel-input-group .form-select {
  min-height: 2.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-order-cancel-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-order-cancel-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-order-cancel-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-order-cancel-textarea {
  min-height: 9rem;
  resize: vertical;
}

.bb-order-cancel-hint {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-order-cancel-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Warning */
.bb-order-cancel-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  color: var(--bb-secondary-color);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-order-cancel-warning > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-order-cancel-warning strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-order-cancel-warning p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Actions */
.bb-order-cancel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-order-cancel-submit,
.bb-order-cancel-secondary-btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-order-cancel-submit {
  min-width: 11rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}

.bb-order-cancel-submit .material-symbols-outlined,
.bb-order-cancel-secondary-btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-order-cancel-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 42rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-order-cancel-page) .bb-layout-light-card {
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-order-cancel-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-order-cancel-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-order-cancel-actions {
    justify-content: stretch;
  }
  .bb-order-cancel-submit,
  .bb-order-cancel-secondary-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-order-cancel-card-head {
    gap: 0.625rem;
  }
  .bb-order-cancel-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* =====================================
   Order Create Request
   FormLight request page
===================================== */
.bb-order-create-request-page {
  width: 100%;
}

/* Back */
.bb-order-create-request-back {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 0.75rem;
  color: var(--bb-emphasis-color) !important;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  text-decoration: none !important;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-create-request-back:hover {
  color: var(--bb-primary) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-color: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-border-color));
}

.bb-order-create-request-back .material-symbols-outlined {
  font-size: var(--bb-fs-base);
  line-height: 1;
}

/* Header */
.bb-order-create-request-head {
  max-width: 42rem;
  margin-bottom: 1.5rem;
}

.bb-order-create-request-chip {
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark)) !important;
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 12%, var(--bb-border-color));
}

.bb-order-create-request-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-order-create-request-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-order-create-request-text {
  max-width: 40rem;
  margin: 0.625rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-order-create-request-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8125rem 0.875rem;
  color: var(--bb-emphasis-color);
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

.bb-order-create-request-message .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--bb-primary);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-heading);
}

/* Card */
.bb-order-create-request-card {
  padding: clamp(1rem, 2.4vw, 1.375rem);
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem rgba(15, 23, 42, 0.05), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-order-create-request-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-order-create-request-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--bb-primary) 82%, var(--bb-dark));
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-order-create-request-card-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-order-create-request-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.01em;
}

.bb-order-create-request-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-table-line-height);
}

/* Form */
.bb-order-create-request-form {
  display: grid;
  gap: 1rem;
}

.bb-order-create-request-form-group {
  min-width: 0;
}

.bb-order-create-request-form .form-label {
  margin-bottom: 0.45rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

.bb-order-create-request-input-group {
  --bb-ig-radius: var(--bb-radius);
  --bb-ig-addon-bg-local: var(--bb-tertiary-bg);
  --bb-ig-addon-border-local: color-mix(in srgb, var(--bb-border-color) 65%, transparent);
  --bb-ig-addon-color-local: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  --bb-ig-focus-border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-order-create-request-input-group .input-group-text {
  min-width: 2.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-right: 0;
  box-shadow: none;
}

.bb-order-create-request-input-group .input-group-text .material-symbols-outlined {
  color: color-mix(in srgb, var(--bb-secondary-color) 86%, var(--bb-emphasis-color));
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-order-create-request-input-group .form-select {
  min-height: 2.875rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-tertiary-bg);
  border-color: color-mix(in srgb, var(--bb-border-color) 62%, transparent);
  border-left: 0;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  box-shadow: none;
}

.bb-order-create-request-input-group .form-select:focus {
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
  box-shadow: none;
}

.bb-order-create-request-input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-body-bg);
  border-color: color-mix(in srgb, var(--bb-primary) 72%, var(--bb-border-color));
}

.bb-order-create-request-input-group:focus-within .input-group-text .material-symbols-outlined {
  color: var(--bb-primary);
}

.bb-order-create-request-textarea {
  min-height: 9rem;
  resize: vertical;
}

.bb-order-create-request-hint {
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-order-create-request-form .text-danger.small {
  font-size: var(--bb-fs-xs);
  line-height: 1.4;
}

/* Warning */
.bb-order-create-request-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  color: var(--bb-secondary-color);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 7%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
  border-radius: var(--bb-radius);
}

.bb-order-create-request-warning > .material-symbols-outlined {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-order-create-request-warning strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-order-create-request-warning p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Actions */
.bb-order-create-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-order-create-request-submit,
.bb-order-create-request-secondary-btn {
  min-height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-order-create-request-submit {
  min-width: 11rem;
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}

.bb-order-create-request-submit .material-symbols-outlined,
.bb-order-create-request-secondary-btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-order-create-request-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 42rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-order-create-request-page) .bb-layout-light-card {
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-order-create-request-page) .bb-layout-light-card-body {
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-order-create-request-card {
    border-radius: var(--bb-radius-lg);
  }
  .bb-order-create-request-actions {
    justify-content: stretch;
  }
  .bb-order-create-request-submit,
  .bb-order-create-request-secondary-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
@media (max-width: 575.98px) {
  .bb-order-create-request-card-head {
    gap: 0.625rem;
  }
  .bb-order-create-request-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }
}
/* Hero */
.bb-payment-result-hero {
  text-align: center;
}

.bb-payment-result-symbol {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-danger);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-danger) 14%, transparent), transparent 38%), color-mix(in srgb, var(--bb-danger) 8%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 16%, var(--bb-border-color));
  border-radius: 50%;
}

.bb-payment-result-symbol .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-payment-result-chip {
  margin-bottom: 0.875rem;
  color: var(--bb-danger) !important;
  background-color: color-mix(in srgb, var(--bb-danger) 8%, var(--bb-white)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 14%, var(--bb-border-color));
}

.bb-payment-result-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-payment-result-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.04em);
}

.bb-payment-result-text {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

/* Info */
.bb-payment-result-info-card,
.bb-payment-result-warning-card,
.bb-payment-result-help {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: var(--bb-radius-lg);
}

.bb-payment-result-info-card {
  background-color: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 14%, var(--bb-border-color));
}

.bb-payment-result-info-icon,
.bb-payment-result-warning-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius);
}

.bb-payment-result-info-icon {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
}

.bb-payment-result-info-icon .material-symbols-outlined,
.bb-payment-result-warning-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-payment-result-info-card span:not(.material-symbols-outlined) {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-payment-result-info-card strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Warning */
.bb-payment-result-warning-card {
  background-color: color-mix(in srgb, var(--bb-danger) 7%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-danger) 14%, var(--bb-border-color));
}

.bb-payment-result-warning-icon {
  color: var(--bb-danger);
  background-color: color-mix(in srgb, var(--bb-danger) 10%, var(--bb-white));
}

.bb-payment-result-warning-card strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-result-warning-card p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Help */
.bb-payment-result-help {
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 80%, transparent);
}

.bb-payment-result-help > .material-symbols-outlined {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border-radius: var(--bb-radius);
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-payment-result-help span:not(.material-symbols-outlined) {
  display: block;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-payment-result-help strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1.4;
}

/* Actions */
.bb-payment-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bb-payment-result-primary-action,
.bb-payment-result-secondary-action {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

.bb-payment-result-primary-action .material-symbols-outlined,
.bb-payment-result-secondary-action .material-symbols-outlined {
  font-size: var(--bb-fs-md);
  line-height: 1;
}

.bb-payment-result-primary-action {
  color: var(--bb-primary-inverse) !important;
  background-color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}

/* FormLight width override */
.bb-layout-light-page:has(.bb-payment-result-page) .bb-layout-light-content-col {
  width: 100%;
  max-width: 36rem;
  flex: 0 0 auto;
}

.bb-layout-light-page:has(.bb-payment-result-page) .bb-layout-light-card {
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  border-color: color-mix(in srgb, var(--bb-border-color) 72%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.03);
}

.bb-layout-light-page:has(.bb-payment-result-page) .bb-layout-light-card-body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

/* Responsive */
@media (max-width: 575.98px) {
  .bb-payment-result-actions {
    grid-template-columns: 1fr;
  }
  .bb-payment-result-primary-action,
  .bb-payment-result-secondary-action {
    border-radius: var(--bb-radius);
  }
  .bb-payment-result-info-card,
  .bb-payment-result-warning-card,
  .bb-payment-result-help {
    border-radius: var(--bb-radius);
  }
}
/* -------------------------------------
   Success variant
------------------------------------- */
.bb-payment-result-page--success .bb-payment-result-symbol {
  color: var(--bb-success);
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-success) 14%, transparent), transparent 38%), color-mix(in srgb, var(--bb-success) 8%, var(--bb-white));
  border-color: color-mix(in srgb, var(--bb-success) 16%, var(--bb-border-color));
}

.bb-payment-result-page--success .bb-payment-result-chip {
  color: var(--bb-success) !important;
  background-color: color-mix(in srgb, var(--bb-success) 8%, var(--bb-white)) !important;
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 14%, var(--bb-border-color));
}

.bb-payment-result-success-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  background-color: color-mix(in srgb, var(--bb-success) 7%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 14%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-payment-result-success-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 10%, var(--bb-white));
  border-radius: var(--bb-radius);
}

.bb-payment-result-success-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-payment-result-success-card strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-result-success-card p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Final order cards
------------------------------------- */
.bb-payment-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.bb-payment-final-card,
.bb-payment-final-items-card {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-payment-final-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  background-color: var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-payment-final-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface-elevated));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-primary) 10%, var(--bb-border-color));
  border-radius: var(--bb-radius);
}

.bb-payment-final-card-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-payment-final-card-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-payment-final-card-head p {
  margin: 0.25rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  line-height: var(--bb-line-height-base);
}

/* Info list */
.bb-payment-final-info-list,
.bb-payment-final-address-list {
  display: grid;
}

.bb-payment-final-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.875rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-payment-final-info-row:last-child {
  border-bottom: 0;
}

.bb-payment-final-info-row span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
}

.bb-payment-final-info-row strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  text-align: right;
}

.bb-payment-final-price {
  color: var(--bb-primary) !important;
  font-size: var(--bb-fs-base) !important;
}

/* Addresses */
.bb-payment-final-address {
  padding: 0.875rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-payment-final-address:last-child {
  border-bottom: 0;
}

.bb-payment-final-address span {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-payment-final-address p {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* Items */
.bb-payment-final-items-list {
  display: grid;
}

.bb-payment-final-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 7rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-payment-final-item:last-child {
  border-bottom: 0;
}

.bb-payment-final-item span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-payment-final-item strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-payment-final-item-quantity,
.bb-payment-final-item-total {
  text-align: right;
}

.bb-payment-final-item-total strong {
  color: var(--bb-primary);
  font-size: var(--bb-fs-sm);
}

/* Responsive */
@media (max-width: 767.98px) {
  .bb-payment-final-grid {
    grid-template-columns: 1fr;
  }
  .bb-payment-final-item {
    grid-template-columns: 1fr;
  }
  .bb-payment-final-item-quantity,
  .bb-payment-final-item-total {
    text-align: left;
  }
}
@media (max-width: 575.98px) {
  .bb-payment-result-success-card,
  .bb-payment-final-card,
  .bb-payment-final-items-card {
    border-radius: var(--bb-radius);
  }
}
/* -------------------------------------
   Section / Stage
------------------------------------- */
.bb-campaign-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-white)) 0%, var(--bb-body-bg) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-campaign-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 9.375rem;
  background-image: linear-gradient(color-mix(in srgb, var(--bb-coal-300) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bb-coal-300) 4%, transparent) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), transparent 82%);
  pointer-events: none;
}

.bb-campaign-stage > * {
  position: relative;
  z-index: 2;
}

/* -------------------------------------
   Grid / Card
------------------------------------- */
.bb-campaign-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* -------------------------------------
   Pager
------------------------------------- */
.bb-campaign-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-campaign-pager-info {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-campaign-pager .bb-pagination .page-link .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-campaign-empty {
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bb-primary) 10%, transparent), transparent 30%), linear-gradient(135deg, var(--bb-tertiary-bg) 0%, var(--bb-body-bg) 100%);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-campaign-empty-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--bb-emphasis-color);
  background-color: var(--bb-primary-light);
  border-radius: var(--bb-radius-xl);
}

.bb-campaign-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
  line-height: 1;
}

.bb-campaign-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-campaign-empty p {
  max-width: 42rem;
  margin: 0.75rem auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-campaign-empty-action {
  min-height: 2.875rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-campaign-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-campaign-stage {
    padding: 1.375rem;
    border-radius: var(--bb-radius-lg);
  }
  .bb-campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-campaign-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .bb-campaign-pager-info {
    text-align: center;
  }
  .bb-campaign-pager .bb-pagination {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .bb-campaign-stage {
    padding: 1rem;
    border-radius: var(--bb-radius);
  }
  .bb-campaign-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   Bulbulustur Web - Campaign Detail
   Scope: .bb-campaign-detail-page
===================================== */
/* =====================================
   Campaign Detail Mode Tokens
===================================== */
.bb-campaign-detail-page {
  --bb-campaign-detail-page-bg: var(--bb-body-bg);
  --bb-campaign-detail-surface: var(--bb-surface-elevated);
  --bb-campaign-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 82%, var(--bb-body-bg));
  --bb-campaign-detail-surface-glass: color-mix(in srgb, var(--bb-body-bg) 76%, transparent);
  --bb-campaign-detail-border: color-mix(in srgb, var(--bb-border-color) 82%, transparent);
  --bb-campaign-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-body-bg));
  --bb-campaign-detail-primary-text: color-mix(in srgb, var(--bb-primary) 78%, var(--bb-emphasis-color));
  --bb-campaign-detail-primary-glow: color-mix(in srgb, var(--bb-primary) 18%, transparent);
  --bb-campaign-detail-primary-orb: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  --bb-campaign-detail-hero-bg:
      radial-gradient(
          circle at 86% 12%,
          var(--bb-campaign-detail-primary-glow),
          transparent 22rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 84%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-campaign-detail-visual-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-primary) 12%, transparent),
          transparent 12rem
      ),
      var(--bb-campaign-detail-surface);
  --bb-campaign-detail-empty-bg:
      radial-gradient(
          circle at 50% 0%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 18rem
      ),
      var(--bb-campaign-detail-surface-soft);
  --bb-campaign-detail-cta-bg:
      radial-gradient(
          circle at 92% 0%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 16rem
      ),
      var(--bb-campaign-detail-surface);
  --bb-campaign-detail-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-emphasis-color) 8%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 3%, transparent);
  --bb-campaign-detail-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-emphasis-color) 12%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-emphasis-color) 4%, transparent);
}

html[data-bs-theme=navy] .bb-campaign-detail-page {
  --bb-campaign-detail-page-bg: var(--bb-body-bg);
  --bb-campaign-detail-surface: var(--bb-surface-elevated);
  --bb-campaign-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 76%, var(--bb-body-bg));
  --bb-campaign-detail-surface-glass: color-mix(in srgb, var(--bb-body-bg) 72%, transparent);
  --bb-campaign-detail-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-campaign-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-body-bg));
  --bb-campaign-detail-primary-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-campaign-detail-primary-glow: color-mix(in srgb, var(--bb-primary) 16%, transparent);
  --bb-campaign-detail-primary-orb: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  --bb-campaign-detail-hero-bg:
      radial-gradient(
          circle at 86% 12%,
          var(--bb-campaign-detail-primary-glow),
          transparent 22rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 78%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-campaign-detail-visual-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-primary) 10%, transparent),
          transparent 12rem
      ),
      var(--bb-campaign-detail-surface);
  --bb-campaign-detail-empty-bg:
      radial-gradient(
          circle at 50% 0%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 18rem
      ),
      var(--bb-campaign-detail-surface-soft);
  --bb-campaign-detail-cta-bg:
      radial-gradient(
          circle at 92% 0%,
          color-mix(in srgb, var(--bb-primary) 8%, transparent),
          transparent 16rem
      ),
      var(--bb-campaign-detail-surface);
  --bb-campaign-detail-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 20%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 10%, transparent);
  --bb-campaign-detail-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black) 26%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
}

html[data-bs-theme=dark] .bb-campaign-detail-page {
  --bb-campaign-detail-page-bg: var(--bb-body-bg);
  --bb-campaign-detail-surface: var(--bb-surface-elevated);
  --bb-campaign-detail-surface-soft: color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg));
  --bb-campaign-detail-surface-glass: color-mix(in srgb, var(--bb-body-bg) 68%, transparent);
  --bb-campaign-detail-border: color-mix(in srgb, var(--bb-border-color) 84%, transparent);
  --bb-campaign-detail-primary-soft: color-mix(in srgb, var(--bb-primary) 17%, var(--bb-body-bg));
  --bb-campaign-detail-primary-text: color-mix(in srgb, var(--bb-primary) 84%, var(--bb-emphasis-color));
  --bb-campaign-detail-primary-glow: color-mix(in srgb, var(--bb-primary) 14%, transparent);
  --bb-campaign-detail-primary-orb: color-mix(in srgb, var(--bb-primary) 9%, transparent);
  --bb-campaign-detail-hero-bg:
      radial-gradient(
          circle at 86% 12%,
          var(--bb-campaign-detail-primary-glow),
          transparent 22rem
      ),
      linear-gradient(
          180deg,
          color-mix(in srgb, var(--bb-tertiary-bg) 72%, var(--bb-body-bg)) 0%,
          var(--bb-body-bg) 100%
      );
  --bb-campaign-detail-visual-bg:
      radial-gradient(
          circle at 92% 12%,
          color-mix(in srgb, var(--bb-primary) 9%, transparent),
          transparent 12rem
      ),
      var(--bb-campaign-detail-surface);
  --bb-campaign-detail-empty-bg:
      radial-gradient(
          circle at 50% 0%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 18rem
      ),
      var(--bb-campaign-detail-surface-soft);
  --bb-campaign-detail-cta-bg:
      radial-gradient(
          circle at 92% 0%,
          color-mix(in srgb, var(--bb-primary) 7%, transparent),
          transparent 16rem
      ),
      var(--bb-campaign-detail-surface);
  --bb-campaign-detail-shadow:
      0 1.25rem 3.25rem color-mix(in srgb, var(--bb-black) 22%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 12%, transparent);
  --bb-campaign-detail-shadow-hover:
      0 1.5rem 3.75rem color-mix(in srgb, var(--bb-black) 28%, transparent),
      0 0.125rem 0.375rem color-mix(in srgb, var(--bb-black) 14%, transparent);
}

/* =====================================
   Page Shell
===================================== */
.bb-campaign-detail-page {
  min-height: 100%;
  color: var(--bb-body-color);
  background-color: var(--bb-campaign-detail-page-bg);
}

/* =====================================
   Hero
===================================== */
.bb-campaign-detail-hero {
  position: relative;
  overflow: hidden;
  background: var(--bb-campaign-detail-hero-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-campaign-detail-border);
}

.bb-campaign-detail-hero::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -8rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background-color: var(--bb-campaign-detail-primary-orb);
  pointer-events: none;
}

.bb-campaign-detail-hero > .bb-container {
  position: relative;
  z-index: 2;
}

.bb-campaign-detail-hero-breadcrumb {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.bb-campaign-detail-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.bb-campaign-detail-label {
  gap: 0.4375rem;
  margin-bottom: 1rem;
}

.bb-campaign-detail-label .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-campaign-detail-title {
  max-width: 48rem;
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2.25rem, 5vw, 4.35rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}

.bb-campaign-detail-text {
  max-width: 44rem;
  margin: 1rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-md);
  line-height: var(--bb-line-height-loose);
}

.bb-campaign-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.bb-campaign-detail-info-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.875rem;
  border: var(--bb-border-width) solid var(--bb-campaign-detail-border);
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-campaign-detail-surface-glass);
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(0.625rem);
}

.bb-campaign-detail-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--bb-radius-xl);
  background-color: var(--bb-campaign-detail-primary-soft);
  color: var(--bb-campaign-detail-primary-text);
}

.bb-campaign-detail-info-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-campaign-detail-info-content {
  min-width: 0;
}

.bb-campaign-detail-info-content span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-tertiary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-campaign-detail-info-content strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
  overflow-wrap: anywhere;
}

.bb-campaign-detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bb-campaign-detail-hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
}

.bb-campaign-detail-hero-actions .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Hero Visual
===================================== */
.bb-campaign-detail-hero-aside {
  min-width: 0;
}

.bb-campaign-detail-visual-card {
  position: relative;
  overflow: hidden;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: var(--bb-border-width) solid var(--bb-campaign-detail-border);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-campaign-detail-visual-bg);
  box-shadow: var(--bb-campaign-detail-shadow);
}

.bb-campaign-detail-visual-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: calc(var(--bb-radius-2xl) - 0.5rem);
  background-color: var(--bb-tertiary-bg);
}

.bb-campaign-detail-visual-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.875rem;
  padding: 0 0.75rem;
  border-radius: var(--bb-radius-pill);
  background-color: color-mix(in srgb, var(--bb-body-bg) 88%, transparent);
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  box-shadow: var(--bb-shadow-xs);
  backdrop-filter: blur(0.625rem);
}

.bb-campaign-detail-visual-badge .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

/* =====================================
   Products Stage
===================================== */
.bb-campaign-detail-products-section {
  background-color: var(--bb-campaign-detail-page-bg);
}

.bb-campaign-detail-stage {
  min-width: 0;
}

.bb-campaign-detail-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.375rem;
}

.bb-campaign-detail-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  margin-bottom: 0.75rem;
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-campaign-detail-primary-soft);
  color: var(--bb-campaign-detail-primary-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-campaign-detail-section-label .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
}

.bb-campaign-detail-section-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.045em;
}

.bb-campaign-detail-section-text {
  max-width: 48rem;
  margin: 0.75rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* =====================================
   Product Grid
===================================== */
.bb-campaign-detail-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bb-campaign-detail-product-grid > * {
  min-width: 0;
}

.bb-campaign-detail-product-grid .bb-product-card {
  height: 100%;
}

/* =====================================
   Empty
===================================== */
.bb-campaign-detail-empty {
  display: grid;
  place-items: center;
  min-height: 22rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: var(--bb-border-width) dashed var(--bb-campaign-detail-border);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-campaign-detail-empty-bg);
  text-align: center;
}

.bb-campaign-detail-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: var(--bb-radius-2xl);
  background-color: var(--bb-campaign-detail-primary-soft);
  color: var(--bb-campaign-detail-primary-text);
}

.bb-campaign-detail-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-2xl);
  line-height: 1;
}

.bb-campaign-detail-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
}

.bb-campaign-detail-empty p {
  max-width: 32rem;
  margin: 0.75rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

.bb-campaign-detail-empty-action {
  margin-top: 1.25rem;
}

/* =====================================
   Pagination
===================================== */
.bb-campaign-detail-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* =====================================
   CTA
===================================== */
.bb-campaign-detail-cta-section {
  padding-top: 0;
  background-color: var(--bb-campaign-detail-page-bg);
}

.bb-campaign-detail-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--bb-border-width) solid var(--bb-campaign-detail-border);
  border-radius: var(--bb-radius-2xl);
  background: var(--bb-campaign-detail-cta-bg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-campaign-detail-cta-label {
  display: inline-flex;
  margin-bottom: 0.625rem;
  color: var(--bb-campaign-detail-primary-text);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-campaign-detail-cta-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: var(--bb-fw-extrabold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.04em;
}

.bb-campaign-detail-cta-text {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-campaign-detail-cta-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  white-space: nowrap;
}

.bb-campaign-detail-cta-card .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* =====================================
   Compatibility Hooks
===================================== */
.bb-campaign-detail-product-actions {
  min-width: 0;
}

.bb-campaign-detail-product-card {
  border-radius: var(--bb-radius-2xl);
}

.bb-campaign-detail-product-media img {
  display: block;
  max-width: 100%;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 1199.98px) {
  .bb-campaign-detail-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-campaign-detail-hero-inner,
  .bb-campaign-detail-cta-card {
    grid-template-columns: 1fr;
  }
  .bb-campaign-detail-hero-aside {
    max-width: 42rem;
  }
  .bb-campaign-detail-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-campaign-detail-cta-card .btn {
    width: max-content;
  }
}
@media (max-width: 767.98px) {
  .bb-campaign-detail-info-grid {
    grid-template-columns: 1fr;
  }
  .bb-campaign-detail-product-actions {
    grid-template-columns: 1fr;
  }
  .bb-campaign-detail-cta-card .btn {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .bb-campaign-detail-product-grid {
    grid-template-columns: 1fr;
  }
  .bb-campaign-detail-visual-card,
  .bb-campaign-detail-product-card,
  .bb-campaign-detail-empty,
  .bb-campaign-detail-cta-card {
    border-radius: var(--bb-radius-xl);
  }
  .bb-campaign-detail-product-media img {
    padding: 0.875rem;
  }
}
.bb-return-request-detail-title {
  margin: 1rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-return-request-detail-text {
  max-width: 42rem;
  margin: 0.875rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-loose);
}

/* Card */
.bb-return-request-detail-card {
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-return-request-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 30%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-return-request-detail-head-main {
  min-width: 0;
}

.bb-return-request-detail-head-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-return-request-detail-head-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-return-request-detail-head-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.bb-return-request-detail-date {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

/* Refund */
.bb-return-request-detail-refund {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 1.5rem 0;
  padding: 1rem;
  color: var(--bb-success);
  background-color: color-mix(in srgb, var(--bb-success) 9%, var(--bb-white));
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-success) 22%, var(--bb-border-color));
  border-radius: var(--bb-radius-lg);
}

.bb-return-request-detail-refund-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-success);
  background-color: var(--bb-body-bg);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
}

.bb-return-request-detail-refund-icon .material-symbols-outlined {
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

.bb-return-request-detail-refund-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bb-return-request-detail-refund-content strong {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-return-request-detail-refund-content span {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-return-request-detail-refund .btn {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-semibold);
}

.bb-return-request-detail-refund .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

/* Product */
.bb-return-request-detail-product {
  margin: 1.25rem 1.5rem 0;
}

.bb-return-request-detail-product-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem;
  color: inherit !important;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
  text-decoration: none !important;
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.bb-return-request-detail-product-link:hover {
  border-color: color-mix(in srgb, var(--bb-primary) 26%, var(--bb-border-color));
  box-shadow: var(--bb-shadow-xs);
}

.bb-return-request-detail-product-info {
  min-width: 0;
}

.bb-return-request-detail-product-store {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
}

.bb-return-request-detail-product-store strong {
  color: var(--bb-emphasis-color);
}

.bb-return-request-detail-product-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-base);
}

.bb-return-request-detail-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-top: 0.625rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-return-request-detail-product-meta strong {
  color: var(--bb-emphasis-color);
}

.bb-return-request-detail-product-price {
  min-width: 8rem;
  text-align: right;
}

.bb-return-request-detail-product-price span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-return-request-detail-product-price strong {
  display: block;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
}

/* Detail panels */
.bb-return-request-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 1.5rem 0;
}

.bb-return-request-detail-panel {
  min-width: 0;
  padding: 1.125rem;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-return-request-detail-panel-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.bb-return-request-detail-panel-head .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-return-request-detail-panel-head h3 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-return-request-detail-list {
  margin: 0;
}

.bb-return-request-detail-list div {
  display: grid;
  gap: 0.25rem;
}

.bb-return-request-detail-list dt {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
}

.bb-return-request-detail-list dd {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
}

.bb-return-request-detail-description {
  margin: 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-loose);
}

/* Photos */
.bb-return-request-detail-photos {
  margin: 1.25rem 1.5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: var(--bb-border-width) solid var(--bb-border-color);
}

.bb-return-request-detail-photos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bb-return-request-detail-photos-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-xs);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-return-request-detail-photos-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-icon-size-md);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-return-request-detail-photos-head .btn {
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-semibold);
}

.bb-return-request-detail-photos-head .material-symbols-outlined {
  font-size: var(--bb-icon-size-md);
  line-height: 1;
}

.bb-return-request-detail-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.75rem;
}

.bb-return-request-detail-photo {
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-return-request-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-return-request-detail-photo-empty {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) dashed var(--bb-border-color);
  border-radius: var(--bb-radius-lg);
}

.bb-return-request-detail-photo-empty .material-symbols-outlined {
  color: var(--bb-primary);
  font-size: var(--bb-fs-2xl);
  line-height: 1;
}

/* Empty */
.bb-return-request-detail-empty {
  padding: 2.5rem;
  text-align: center;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid var(--bb-border-color);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-return-request-detail-empty-symbol {
  margin-bottom: 1.25rem;
}

.bb-return-request-detail-empty-symbol .bb-symbol-label {
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, transparent);
}

.bb-return-request-detail-empty-symbol .material-symbols-outlined {
  font-size: var(--bb-icon-2xl);
  line-height: 1;
}

.bb-return-request-detail-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-2xl);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
}

.bb-return-request-detail-empty p {
  max-width: 34rem;
  margin: 0.75rem auto 1.5rem;
  color: var(--bb-secondary-color);
  line-height: var(--bb-line-height-content);
}

/* Responsive */
@media (max-width: 991.98px) {
  .bb-return-request-detail-refund {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bb-return-request-detail-refund .btn {
    grid-column: 1/-1;
    width: 100%;
  }
  .bb-return-request-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .bb-return-request-detail-card-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem;
  }
  .bb-return-request-detail-head-meta {
    justify-content: flex-start;
  }
  .bb-return-request-detail-refund,
  .bb-return-request-detail-product,
  .bb-return-request-detail-grid,
  .bb-return-request-detail-photos {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .bb-return-request-detail-product-link {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-return-request-detail-product-price {
    min-width: 0;
    text-align: left;
  }
  .bb-return-request-detail-photos-head {
    align-items: stretch;
    flex-direction: column;
  }
  .bb-return-request-detail-photos-head .btn {
    width: 100%;
  }
}
.bb-store-index-page {
  background: var(--bb-body-bg);
}

.bb-store-index-page .bb-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Hero */
.bb-store-index-hero {
  position: relative;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: radial-gradient(circle at 92% 0%, rgba(var(--bb-primary-rgb, 254, 215, 0), 0.18), transparent 20rem), linear-gradient(135deg, var(--bb-white), var(--bb-color-yellow-50));
  border-bottom: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.07);
}

.bb-store-index-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  gap: 2rem;
  align-items: center;
  padding: 1.75rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: var(--bb-radius-2xl, 1.5rem);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1rem 2.75rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.055);
  backdrop-filter: blur(0.45rem);
}

.bb-store-index-hero-content {
  min-width: 0;
  max-width: 48rem;
}

.bb-store-index-hero-breadcrumb {
  margin-bottom: 1rem;
}

.bb-store-index-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.42rem 0.7rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-color-turquoise-700);
  color: var(--bb-white);
  font-size: 0.74rem;
  font-weight: var(--bb-fw-black);
  line-height: 1;
  box-shadow: 0 0.45rem 1rem rgba(0, 159, 131, 0.18);
}

.bb-store-index-hero-label .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-fs-base);
}

.bb-store-index-hero-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: var(--bb-fw-black);
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.bb-store-index-hero-text {
  max-width: 44rem;
  margin: 0.85rem 0 0;
  color: var(--bb-body-color);
  font-size: 0.98rem;
  line-height: var(--bb-line-height-content);
}

.bb-store-index-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.bb-store-index-hero-primary-btn,
.bb-store-index-hero-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.85rem;
  padding-inline: 1.2rem;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-extrabold);
}

.bb-store-index-hero-primary-btn .material-symbols-outlined,
.bb-store-index-hero-secondary-btn .material-symbols-outlined {
  font-size: var(--bb-fs-md);
}

.bb-store-index-hero-aside {
  display: grid;
  gap: 0.85rem;
}

.bb-store-index-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.07);
  border-radius: var(--bb-radius-xl, 1rem);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.7rem 1.8rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.05);
}

.bb-store-index-hero-card-icon-container {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bb-radius-pill);
  color: var(--bb-primary-active);
  background: rgba(var(--bb-primary-rgb, 254, 215, 0), 0.14);
}

.bb-store-index-hero-card-icon {
  font-size: var(--bb-icon-size-sm);
}

.bb-store-index-hero-card-title {
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-extrabold);
}

.bb-store-index-hero-card-text {
  color: var(--bb-secondary);
  font-size: 0.78rem;
  line-height: var(--bb-line-height-base);
}

/* Alpha */
.bb-store-index-alpha-row {
  display: block;
  margin-bottom: 0.75rem;
}

.bb-store-index-alpha {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: var(--bb-radius-xl, 1rem);
  background: var(--bb-surface-elevated);
  box-shadow: 0 0.55rem 1.4rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.032);
}

.bb-store-index-alpha-label {
  flex: 0 0 auto;
  color: var(--bb-heading-color);
  font-size: 0.8rem;
  font-weight: var(--bb-fw-extrabold);
  white-space: nowrap;
}

.bb-store-index-alpha-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.bb-store-index-alpha-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.875rem;
  padding-inline: 0.42rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: 0.6rem;
  background: var(--bb-surface-elevated);
  color: var(--bb-heading-color);
  font-size: 0.76rem;
  font-weight: var(--bb-fw-extrabold);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bb-store-index-alpha-item:hover,
.bb-store-index-alpha-item.active {
  transform: translateY(-1px);
  border-color: rgba(var(--bb-primary-rgb, 254, 215, 0), 0.7);
  background: var(--bb-primary);
  color: var(--bb-primary-inverse, #333e48);
}

/* Result */
.bb-store-index-result-line {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.15rem;
}

.bb-store-index-result-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-surface-elevated);
  color: var(--bb-secondary);
  box-shadow: 0 0.45rem 1.15rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.03);
  font-size: 0.8rem;
  font-weight: var(--bb-fw-extrabold);
  white-space: nowrap;
}

.bb-store-index-result-pill .material-symbols-outlined {
  color: var(--bb-secondary);
  font-size: var(--bb-fs-base);
}

/* Store Grid */
.bb-store-index-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.bb-store-index-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: var(--bb-radius-xl, 1rem);
  background: var(--bb-surface-elevated);
  box-shadow: 0 0.65rem 1.75rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bb-store-index-card:hover {
  transform: translateY(-0.12rem);
  border-color: rgba(var(--bb-primary-rgb, 254, 215, 0), 0.38);
  box-shadow: 0 0.95rem 2.2rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.065);
}

.bb-store-index-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1/0.68;
  overflow: hidden;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.06);
  border-radius: var(--bb-radius-xl);
  background: radial-gradient(circle at 100% 0%, rgba(var(--bb-primary-rgb, 254, 215, 0), 0.1), transparent 10rem), var(--bb-surface-soft);
  text-decoration: none;
}

.bb-store-index-card-media img {
  display: block;
  width: 66%;
  height: 66%;
  border-radius: 0.8rem;
  object-fit: contain;
}

.bb-store-index-card-ribbon {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.26rem 0.48rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.1);
  border-radius: var(--bb-radius-pill);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(var(--bb-dark-rgb, 51, 62, 72), 0.72);
  font-size: 0.58rem;
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(0.35rem);
}

.bb-store-index-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.85rem 0.1rem 0.7rem;
}

.bb-store-index-card-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.018em;
  line-height: var(--bb-line-height-heading);
}

.bb-store-index-card-title a {
  color: inherit;
  text-decoration: none;
}

.bb-store-index-card-title a:hover {
  color: var(--bb-primary-active);
}

.bb-store-index-card-text {
  margin: 0.48rem 0 0;
  color: var(--bb-body-color);
  font-size: 0.82rem;
  line-height: var(--bb-line-height-base);
}

/* Rating design stays ready but hidden */
.bb-store-index-card-score {
  display: none;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  margin-top: 0.75rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(var(--bb-primary-rgb, 254, 215, 0), 0.28);
  border-radius: var(--bb-radius-pill);
  background: rgba(var(--bb-primary-rgb, 254, 215, 0), 0.12);
  color: var(--bb-heading-color);
  font-size: 0.74rem;
  font-weight: var(--bb-fw-extrabold);
}

.bb-store-index-card-score-icon {
  color: var(--bb-primary-active);
  font-size: 0.95rem;
}

.bb-store-index-card-score-text {
  color: var(--bb-secondary);
}

.bb-store-index-card-score-value {
  color: var(--bb-heading-color);
  font-weight: var(--bb-fw-black);
}

.bb-store-index-card-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
}

.bb-store-index-card-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  border-radius: var(--bb-radius-pill);
  font-size: 0.83rem;
  font-weight: var(--bb-fw-extrabold);
}

.bb-store-index-card-detail-btn .material-symbols-outlined {
  font-size: 0.95rem;
}

.bb-store-index-card-detail-btn.btn-primary {
  color: var(--bb-primary-inverse, #333e48);
}

/* Pagination */
.bb-store-index-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
}

.bb-store-index-page-notify {
  color: var(--bb-secondary);
  font-size: 0.85rem;
  font-weight: var(--bb-fw-bold);
}

/* Empty */
.bb-store-index-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: var(--bb-radius-2xl, 1.5rem);
  background: var(--bb-surface-elevated);
  box-shadow: 0 0.75rem 2rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.045);
}

.bb-store-index-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--bb-radius-2xl);
  background: rgba(var(--bb-primary-rgb, 254, 215, 0), 0.14);
  color: var(--bb-primary);
}

.bb-store-index-empty-icon .material-symbols-outlined {
  font-size: var(--bb-fs-3xl);
}

.bb-store-index-empty-label {
  display: inline-flex;
  margin-bottom: 0.35rem;
  color: var(--bb-primary-active);
  font-size: 0.75rem;
  font-weight: var(--bb-fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-store-index-empty h3 {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: var(--bb-icon-size-lg);
  font-weight: var(--bb-fw-black);
  letter-spacing: -0.03em;
}

.bb-store-index-empty p {
  max-width: 42rem;
  margin: 0.45rem 0 0;
  color: var(--bb-secondary);
  line-height: var(--bb-line-height-base);
}

.bb-store-index-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.bb-store-index-empty-actions .btn {
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-extrabold);
}

/* Seller CTA */
.bb-store-index-seller-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.75rem;
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.08);
  border-radius: var(--bb-radius-2xl, 1.5rem);
  background: radial-gradient(circle at 88% 20%, rgba(var(--bb-primary-rgb, 254, 215, 0), 0.13), transparent 17rem), linear-gradient(135deg, var(--bb-white), var(--bb-color-yellow-50));
  box-shadow: 0 0.9rem 2.25rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.045);
}

.bb-store-index-seller-cta-content {
  min-width: 0;
}

.bb-store-index-seller-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.42rem 0.7rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-color-turquoise-700);
  color: var(--bb-white);
  font-size: 0.74rem;
  font-weight: var(--bb-fw-black);
  line-height: 1;
  box-shadow: 0 0.45rem 1rem rgba(0, 159, 131, 0.18);
}

.bb-store-index-seller-cta-label .material-symbols-outlined {
  color: currentColor;
  font-size: var(--bb-fs-base);
}

.bb-store-index-seller-cta-title {
  margin: 0;
  color: var(--bb-heading-color);
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  font-weight: var(--bb-fw-extrabold);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.bb-store-index-seller-cta-text {
  max-width: 42rem;
  margin: 0.6rem 0 0;
  color: var(--bb-body-color);
  font-size: 0.96rem;
  line-height: var(--bb-line-height-base);
}

.bb-store-index-seller-cta-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bb-store-index-seller-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding-inline: 1.75rem;
  border-radius: 0.95rem;
  background: var(--bb-coal-300);
  color: var(--bb-white);
  border: 1px solid rgba(var(--bb-dark-rgb, 51, 62, 72), 0.95);
  font-size: 0.98rem;
  font-weight: var(--bb-fw-black);
  box-shadow: 0 0.85rem 1.65rem rgba(var(--bb-dark-rgb, 51, 62, 72), 0.18);
}

.bb-store-index-seller-primary-btn:hover {
  background: var(--bb-coal-400);
  color: var(--bb-white);
  border-color: var(--bb-coal-300);
}

/* Responsive */
@media (min-width: 1500px) {
  .bb-store-index-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .bb-store-index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-store-index-hero-inner {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .bb-store-index-hero-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-store-index-alpha {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-store-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-store-index-pagination-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-store-index-seller-cta {
    grid-template-columns: 1fr;
  }
  .bb-store-index-seller-cta-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .bb-store-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-store-index-hero-aside {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .bb-store-index-page .bb-section {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .bb-store-index-hero {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .bb-store-index-hero-inner {
    padding: 1.2rem;
  }
  .bb-store-index-hero-title {
    font-size: var(--bb-fs-3xl);
  }
  .bb-store-index-alpha {
    padding: 0.72rem;
  }
  .bb-store-index-alpha-list {
    gap: 0.3rem;
  }
  .bb-store-index-alpha-item {
    min-width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.52rem;
    font-size: 0.72rem;
  }
  .bb-store-index-grid {
    grid-template-columns: 1fr;
  }
  .bb-store-index-card-media {
    aspect-ratio: 1/0.58;
  }
  .bb-store-index-empty {
    grid-template-columns: 1fr;
  }
  .bb-store-index-seller-cta {
    padding: 1.2rem;
  }
  .bb-store-index-seller-cta-actions,
  .bb-store-index-seller-primary-btn {
    width: 100%;
  }
}
/* =====================================
   Bulbulustur Web - Store Reviews
   B2C store review listing
===================================== */
.bb-store-reviews-breadcrumb-wrap {
  margin-bottom: 1.25rem;
}

.bb-store-reviews-header-wrap {
  margin-bottom: 1.5rem;
}

/* -------------------------------------
   Head
------------------------------------- */
.bb-store-reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.bb-store-reviews-chip {
  margin-bottom: 0.75rem;
}

.bb-store-reviews-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-store-reviews-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: var(--bb-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.bb-store-reviews-text {
  max-width: 44rem;
  margin: 0.75rem 0 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

.bb-store-reviews-count {
  flex: 0 0 auto;
}

/* -------------------------------------
   Shell
------------------------------------- */
.bb-store-reviews-shell {
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border-radius: var(--bb-radius-xl);
}

.bb-store-reviews-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 0.25rem;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

.bb-store-reviews-section-title {
  margin: 0.55rem 0 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.03em;
}

.bb-store-reviews-section-text {
  max-width: 42rem;
  margin: 0.45rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-store-reviews-page-notify {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  color: var(--bb-secondary-color);
  background-color: var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   List
------------------------------------- */
.bb-store-reviews-list {
  display: grid;
}

.bb-store-reviews-item {
  padding: 1.35rem 0;
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

.bb-store-reviews-item:last-child {
  border-bottom: 0;
}

.bb-store-reviews-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.bb-store-reviews-author-block {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bb-store-reviews-avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: 50%;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-bold);
  line-height: 1;
}

.bb-store-reviews-author-main {
  min-width: 0;
}

.bb-store-reviews-author-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.bb-store-reviews-author {
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: 1.3;
}

.bb-store-reviews-date {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: 1.4;
}

.bb-store-reviews-location {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bb-store-reviews-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.45rem;
  color: var(--bb-primary);
}

.bb-store-reviews-stars .material-symbols-outlined {
  font-size: var(--bb-icon-size-sm);
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bb-store-reviews-star-muted {
  color: color-mix(in srgb, var(--bb-secondary-color) 34%, transparent);
}

.bb-store-reviews-content {
  padding-left: 3.5rem;
  margin-top: 0.85rem;
}

.bb-store-reviews-review-text {
  margin: 0;
  color: var(--bb-body-color);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-line-height-content);
}

/* -------------------------------------
   Pagination
------------------------------------- */
.bb-store-reviews-pagination-wrap {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 76%, transparent);
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-store-reviews-empty {
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
  border-radius: var(--bb-radius-xl);
}

.bb-store-reviews-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-store-reviews-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-store-reviews-empty h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-store-reviews-empty p {
  max-width: 34rem;
  margin: 0.625rem auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-store-reviews-empty-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 991.98px) {
  .bb-store-reviews-head,
  .bb-store-reviews-section-head,
  .bb-store-reviews-item-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-store-reviews-location {
    justify-content: flex-start;
  }
  .bb-store-reviews-content {
    padding-left: 0;
  }
}
@media (max-width: 575.98px) {
  .bb-store-reviews-shell,
  .bb-store-reviews-empty {
    border-radius: var(--bb-radius-lg);
  }
  .bb-store-reviews-empty-link {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
/* =====================================
   Bulbulustur Web - Store Profile
   B2C store products page
===================================== */
.bb-store-profile-header-wrap {
  margin-bottom: 1.5rem;
}

/* -------------------------------------
   Mobile Categories
------------------------------------- */
.bb-store-profile-mobile-categories {
  display: none;
}

/* -------------------------------------
   Layout
------------------------------------- */
.bb-store-profile-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.24fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* -------------------------------------
   Sidebar
------------------------------------- */
.bb-store-profile-sidebar {
  min-width: 0;
}

.bb-store-profile-category-card {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  background-color: var(--bb-body-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 1.25rem 3.25rem color-mix(in srgb, var(--bb-coal-300) 5%, transparent), 0 0.125rem 0.375rem color-mix(in srgb, var(--bb-coal-300) 3%, transparent);
}

.bb-store-profile-category-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 9%, transparent), transparent 36%), var(--bb-tertiary-bg);
  border-bottom: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-store-profile-category-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-dark);
  background-color: var(--bb-primary);
  border-radius: var(--bb-radius);
}

.bb-store-profile-category-icon .material-symbols-outlined {
  font-size: var(--bb-fs-xl);
  line-height: 1;
}

.bb-store-profile-category-head h2 {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: var(--bb-fs-base);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: var(--bb-letter-spacing-tight, -0.015em);
}

.bb-store-profile-category-head p {
  margin: 0.3rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

.bb-store-profile-category-list {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
}

.bb-store-profile-category-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.55rem 0.7rem;
  color: var(--bb-secondary-color);
  border-radius: var(--bb-radius);
  text-decoration: none;
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  line-height: var(--bb-line-height-base);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.bb-store-profile-category-link .material-symbols-outlined {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--bb-secondary-color) 72%, transparent);
  font-size: var(--bb-fs-base);
  line-height: 1;
}

.bb-store-profile-category-link:hover,
.bb-store-profile-category-link.active {
  color: var(--bb-dark);
  background-color: color-mix(in srgb, var(--bb-primary) 14%, var(--bb-surface-elevated));
}

.bb-store-profile-category-link:hover .material-symbols-outlined,
.bb-store-profile-category-link.active .material-symbols-outlined {
  color: var(--bb-primary);
}

/* -------------------------------------
   Products Head
------------------------------------- */
.bb-store-profile-products {
  min-width: 0;
}

.bb-store-profile-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bb-store-profile-products-chip {
  margin-bottom: 0.75rem;
}

.bb-store-profile-products-chip .material-symbols-outlined {
  font-size: var(--bb-fs-sm);
  line-height: 1;
}

.bb-store-profile-products-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-tight);
  letter-spacing: var(--bb-letter-spacing-tight, -0.035em);
}

.bb-store-profile-products-text {
  max-width: 42rem;
  margin: 0.55rem 0 0;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-store-profile-sort-form {
  width: min(100%, 15rem);
  flex: 0 0 auto;
}

.bb-store-profile-sort-form .form-label {
  margin-bottom: 0.35rem;
}

/* -------------------------------------
   Product Grid
------------------------------------- */
.bb-store-profile-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bb-store-profile-product-card {
  min-width: 0;
}

/* -------------------------------------
   Pagination
------------------------------------- */
.bb-store-profile-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
}

.bb-store-profile-pagination-summary {
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-base);
}

/* -------------------------------------
   Empty
------------------------------------- */
.bb-store-profile-empty {
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--bb-primary) 8%, transparent), transparent 34%), var(--bb-tertiary-bg);
  border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
  border-radius: var(--bb-radius-xl);
}

.bb-store-profile-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--bb-primary);
  background-color: color-mix(in srgb, var(--bb-primary) 10%, var(--bb-surface-elevated));
  border-radius: 50%;
}

.bb-store-profile-empty-icon .material-symbols-outlined {
  font-size: var(--bb-icon-size-3xl);
  line-height: 1;
}

.bb-store-profile-empty-title {
  margin: 0;
  color: var(--bb-emphasis-color);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-line-height-heading);
  letter-spacing: -0.025em;
}

.bb-store-profile-empty-text {
  max-width: 34rem;
  margin: 0.625rem auto 1.25rem;
  color: var(--bb-secondary-color);
  font-size: var(--bb-fs-sm);
  line-height: var(--bb-line-height-content);
}

.bb-store-profile-empty-btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-fw-bold);
}

/* -------------------------------------
   Responsive
------------------------------------- */
@media (max-width: 1199.98px) {
  .bb-store-profile-mobile-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.35rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .bb-store-profile-mobile-category {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    min-height: 2.45rem;
    padding: 0.55rem 0.8rem;
    color: var(--bb-secondary-color);
    background-color: var(--bb-body-bg);
    border: var(--bb-border-width) solid color-mix(in srgb, var(--bb-border-color) 78%, transparent);
    border-radius: var(--bb-radius-pill);
    text-decoration: none;
    font-size: var(--bb-fs-sm);
    font-weight: var(--bb-fw-bold);
  }
  .bb-store-profile-mobile-category:hover,
  .bb-store-profile-mobile-category.active {
    color: var(--bb-dark);
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
  }
  .bb-store-profile-layout {
    grid-template-columns: 1fr;
  }
  .bb-store-profile-sidebar {
    display: none;
  }
  .bb-store-profile-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .bb-store-profile-products-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bb-store-profile-sort-form {
    width: 100%;
  }
  .bb-store-profile-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bb-store-profile-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .bb-store-profile-product-grid {
    grid-template-columns: 1fr;
  }
  .bb-store-profile-empty {
    border-radius: var(--bb-radius-lg);
  }
  .bb-store-profile-empty-btn {
    width: 100%;
    border-radius: var(--bb-radius);
  }
}
/* 9. Final Overrides */
/* Bootstrap ve page-level ezmelerden sonra form objelerini tekrar Main CSS standardına sabitler. */
/* =====================================
   Bulbulustur Theme - Forms Final Override
   Purpose: Keep Bootstrap 5 form controls aligned with Main CSS form tokens
   Must be imported at the end of main.scss
===================================== */
/* -------------------------------------
   Strong scoped form control base
------------------------------------- */
.bb-web-page .form-control,
.bb-web-page .form-select,
.bb-layout-light-page .form-control,
.bb-layout-light-page .form-select,
.bb-form-showcase-page .form-control,
.bb-form-showcase-page .form-select {
  min-height: var(--bb-form-control-min-height);
  padding: var(--bb-form-control-padding-y) var(--bb-form-control-padding-x);
  color: var(--bb-form-control-color);
  background-color: var(--bb-form-control-bg);
  border-color: var(--bb-form-control-border-color);
  border-width: var(--bb-form-control-border-width);
  border-radius: var(--bb-form-control-radius);
  font-size: var(--bb-form-control-font-size);
  font-weight: var(--bb-form-control-font-weight);
  line-height: var(--bb-form-control-line-height);
  box-shadow: var(--bb-form-control-box-shadow);
  transition: var(--bb-form-control-transition);
}

/* -------------------------------------
   Select needs right padding for native arrow
------------------------------------- */
.bb-web-page .form-select,
.bb-layout-light-page .form-select,
.bb-form-showcase-page .form-select {
  padding-right: 2.5rem;
  cursor: pointer;
}

/* -------------------------------------
   Hover
------------------------------------- */
.bb-web-page .form-control:hover,
.bb-web-page .form-select:hover,
.bb-layout-light-page .form-control:hover,
.bb-layout-light-page .form-select:hover,
.bb-form-showcase-page .form-control:hover,
.bb-form-showcase-page .form-select:hover {
  color: var(--bb-form-control-color-hover);
  background-color: var(--bb-form-control-bg-hover);
  border-color: var(--bb-form-control-border-hover-color);
}

/* -------------------------------------
   Focus
------------------------------------- */
.bb-web-page .form-control:focus,
.bb-web-page .form-select:focus,
.bb-layout-light-page .form-control:focus,
.bb-layout-light-page .form-select:focus,
.bb-form-showcase-page .form-control:focus,
.bb-form-showcase-page .form-select:focus {
  color: var(--bb-form-control-color-focus);
  background-color: var(--bb-form-control-bg-focus);
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: var(--bb-form-control-focus-box-shadow);
}

/* -------------------------------------
   Placeholder
------------------------------------- */
.bb-web-page .form-control::placeholder,
.bb-layout-light-page .form-control::placeholder,
.bb-form-showcase-page .form-control::placeholder {
  color: var(--bb-form-control-placeholder-color);
  font-weight: var(--bb-fw-medium);
  opacity: 1;
}

/* -------------------------------------
   Labels
------------------------------------- */
.bb-web-page .form-label,
.bb-layout-light-page .form-label,
.bb-form-showcase-page .form-label {
  margin-bottom: var(--bb-form-label-margin-bottom);
  color: var(--bb-form-label-color);
  font-size: var(--bb-form-label-font-size);
  font-weight: var(--bb-form-label-font-weight);
  line-height: var(--bb-form-label-line-height);
}

/* -------------------------------------
   Textarea
------------------------------------- */
.bb-web-page textarea.form-control,
.bb-layout-light-page textarea.form-control,
.bb-form-showcase-page textarea.form-control {
  min-height: 8.25rem;
  resize: vertical;
}

/* -------------------------------------
   Sizes
------------------------------------- */
.bb-web-page .form-control-sm,
.bb-web-page .form-select-sm,
.bb-layout-light-page .form-control-sm,
.bb-layout-light-page .form-select-sm,
.bb-form-showcase-page .form-control-sm,
.bb-form-showcase-page .form-select-sm {
  min-height: var(--bb-form-control-sm-min-height);
  padding: var(--bb-form-control-sm-padding-y) var(--bb-form-control-sm-padding-x);
  font-size: var(--bb-form-control-sm-font-size);
}

.bb-web-page .form-control-lg,
.bb-web-page .form-select-lg,
.bb-layout-light-page .form-control-lg,
.bb-layout-light-page .form-select-lg,
.bb-form-showcase-page .form-control-lg,
.bb-form-showcase-page .form-select-lg {
  min-height: var(--bb-form-control-lg-min-height);
  padding: var(--bb-form-control-lg-padding-y) var(--bb-form-control-lg-padding-x);
  font-size: var(--bb-form-control-lg-font-size);
}

/* -------------------------------------
   Solid
------------------------------------- */
.bb-web-page .form-control.form-control-solid,
.bb-web-page .form-select.form-select-solid,
.bb-layout-light-page .form-control.form-control-solid,
.bb-layout-light-page .form-select.form-select-solid,
.bb-form-showcase-page .form-control.form-control-solid,
.bb-form-showcase-page .form-select.form-select-solid {
  background-color: var(--bb-form-control-solid-bg);
  border-color: var(--bb-form-control-solid-border-color);
}

.bb-web-page .form-control.form-control-solid:hover,
.bb-web-page .form-select.form-select-solid:hover,
.bb-layout-light-page .form-control.form-control-solid:hover,
.bb-layout-light-page .form-select.form-select-solid:hover,
.bb-form-showcase-page .form-control.form-control-solid:hover,
.bb-form-showcase-page .form-select.form-select-solid:hover {
  background-color: var(--bb-form-control-solid-bg-hover);
  border-color: var(--bb-form-control-border-hover-color);
}

.bb-web-page .form-control.form-control-solid:focus,
.bb-web-page .form-select.form-select-solid:focus,
.bb-layout-light-page .form-control.form-control-solid:focus,
.bb-layout-light-page .form-select.form-select-solid:focus,
.bb-form-showcase-page .form-control.form-control-solid:focus,
.bb-form-showcase-page .form-select.form-select-solid:focus {
  color: var(--bb-form-control-color-focus);
  background-color: var(--bb-form-control-bg-focus);
  border-color: var(--bb-form-control-border-focus-color);
  box-shadow: var(--bb-form-control-focus-box-shadow);
}

/* -------------------------------------
   Validation
------------------------------------- */
.bb-web-page .form-control.is-valid,
.bb-web-page .form-select.is-valid,
.bb-layout-light-page .form-control.is-valid,
.bb-layout-light-page .form-select.is-valid,
.bb-form-showcase-page .form-control.is-valid,
.bb-form-showcase-page .form-select.is-valid {
  border-color: var(--bb-form-control-valid-border-color);
}

.bb-web-page .form-control.is-valid:focus,
.bb-web-page .form-select.is-valid:focus,
.bb-layout-light-page .form-control.is-valid:focus,
.bb-layout-light-page .form-select.is-valid:focus,
.bb-form-showcase-page .form-control.is-valid:focus,
.bb-form-showcase-page .form-select.is-valid:focus {
  border-color: var(--bb-form-control-valid-focus-border-color);
  box-shadow: var(--bb-form-control-valid-focus-shadow);
}

.bb-web-page .form-control.is-invalid,
.bb-web-page .form-select.is-invalid,
.bb-layout-light-page .form-control.is-invalid,
.bb-layout-light-page .form-select.is-invalid,
.bb-form-showcase-page .form-control.is-invalid,
.bb-form-showcase-page .form-select.is-invalid {
  border-color: var(--bb-form-control-invalid-border-color);
}

.bb-web-page .form-control.is-invalid:focus,
.bb-web-page .form-select.is-invalid:focus,
.bb-layout-light-page .form-control.is-invalid:focus,
.bb-layout-light-page .form-select.is-invalid:focus,
.bb-form-showcase-page .form-control.is-invalid:focus,
.bb-form-showcase-page .form-select.is-invalid:focus {
  border-color: var(--bb-form-control-invalid-focus-border-color);
  box-shadow: var(--bb-form-control-invalid-focus-shadow);
}

/* -------------------------------------
   Input group
------------------------------------- */
.bb-web-page .input-group .form-control,
.bb-web-page .input-group .form-select,
.bb-layout-light-page .input-group .form-control,
.bb-layout-light-page .input-group .form-select,
.bb-form-showcase-page .input-group .form-control,
.bb-form-showcase-page .input-group .form-select {
  min-height: var(--bb-form-control-min-height);
}

.bb-web-page .input-group-text,
.bb-layout-light-page .input-group-text,
.bb-form-showcase-page .input-group-text {
  color: color-mix(in srgb, var(--bb-secondary-color) 84%, var(--bb-emphasis-color));
  background-color: var(--bb-form-control-bg);
  border-color: var(--bb-form-control-border-color);
  border-width: var(--bb-form-control-border-width);
  border-radius: var(--bb-form-control-radius);
  box-shadow: none;
  transition: color var(--bb-transition-fast), border-color var(--bb-transition-fast), background-color var(--bb-transition-fast);
}

.bb-web-page .input-group:focus-within .input-group-text,
.bb-layout-light-page .input-group:focus-within .input-group-text,
.bb-form-showcase-page .input-group:focus-within .input-group-text {
  color: var(--bb-primary);
  background-color: var(--bb-form-control-bg-focus);
  border-color: var(--bb-form-control-border-focus-color);
}