/* ========================================================
   TSIT Discshop - Modern E-Commerce Theme System
   Vilhelmina Garage Self Checkout
   ======================================================== */

/* 1. LIGHT THEME (Default - Clean studio aesthetic) */
:root, [data-theme="light"] {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-surface: #ffffff;
  --bg-card-hover: #ffffff;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  
  --accent-emerald: #10b981;
  --accent-cyan: #0284c7;
  --accent-glow: #8b5cf6;
  
  --text-primary: #0f172a;
  --text-main: var(--text-primary);
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  --header-bg: rgba(255, 255, 255, 0.94);
  --header-border: #e2e8f0;
  
  --info-bg: #ecfdf5;
  --info-border: #a7f3d0;
  --info-text: #065f46;
  
  --input-bg: #f8fafc;
  --input-border: #cbd5e1;
  --input-text: #0f172a;
  
  --pill-bg: #f1f5f9;
  --pill-border: #e2e8f0;
  --pill-text: #475569;
  --pill-hover-bg: #e2e8f0;
  --pill-active-bg: #0f172a;
  --pill-active-text: #ffffff;
  
  --badge-bg: #f1f5f9;
  --badge-border: #e2e8f0;
  --badge-text: #334155;
  
  --flight-bg: #f8fafc;
  --flight-border: #e2e8f0;
  --flight-num: #0284c7;
  
  --card-bottom-border: #f1f5f9;
  --card-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --card-shadow-hover: 0 16px 24px -4px rgba(15, 23, 42, 0.08), 0 6px 12px -2px rgba(15, 23, 42, 0.04);
  
  --drawer-bg: #ffffff;
  --drawer-item-bg: #f8fafc;
  --modal-bg: rgba(15, 23, 42, 0.65);
  --modal-card-bg: #ffffff;
  --modal-card-border: #e2e8f0;
  
  --admin-nav-bg: #f1f5f9;
  --admin-nav-active: #ffffff;
  --table-border: #e2e8f0;
  --table-stripe: #f8fafc;
  
  --image-wrap-bg: #ffffff;
  --image-wrap-radius: 12px;
  --image-wrap-shadow: none;
  --image-wrap-border: 1px solid #f1f5f9;
  
  --btn-cart-bg: #059669;
  --btn-cart-color: #ffffff;
  
  --swish-color: #e02424;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

/* 2. DARK THEME (Studio Showcase Dark) */
[data-theme="dark"] {
  --bg-main: #0c1017;
  --bg-card: #161c26;
  --bg-surface: #161c26;
  --bg-card-hover: #1e2634;
  --border-color: #263346;
  --border-hover: #3b4d66;
  
  --accent-emerald: #10b981;
  --accent-cyan: #06b6d4;
  --accent-glow: #a855f7;
  
  --text-primary: #f8fafc;
  --text-main: var(--text-primary);
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  --header-bg: rgba(12, 16, 23, 0.92);
  --header-border: #263346;
  
  --info-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(16, 185, 129, 0.05));
  --info-border: rgba(6, 182, 212, 0.25);
  --info-text: #cbd5e1;
  
  --input-bg: #0f141c;
  --input-border: #263346;
  --input-text: #ffffff;
  
  --pill-bg: #0f141c;
  --pill-border: #263346;
  --pill-text: #94a3b8;
  --pill-hover-bg: #1e2634;
  --pill-active-bg: var(--accent-cyan);
  --pill-active-text: #000000;
  
  --badge-bg: #0f141c;
  --badge-border: #243042;
  --badge-text: #cbd5e1;
  
  --flight-bg: #0a0d13;
  --flight-border: #1a2230;
  --flight-num: var(--accent-cyan);
  
  --card-bottom-border: #1f2937;
  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 15px 30px -5px rgba(0, 0, 0, 0.7);
  
  --drawer-bg: #111620;
  --drawer-item-bg: #161c26;
  --modal-bg: rgba(0, 0, 0, 0.75);
  --modal-card-bg: #131924;
  --modal-card-border: #263346;
  
  --admin-nav-bg: #0f141c;
  --admin-nav-active: #161c26;
  --table-border: #1f2937;
  --table-stripe: #0f141c;
  
  --image-wrap-bg: #ffffff;
  --image-wrap-radius: 12px;
  --image-wrap-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  --image-wrap-border: 1px solid rgba(255, 255, 255, 0.08);
  
  --btn-cart-bg: #10b981;
  --btn-cart-color: #000000;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
}

[onclick], button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease, color 0.25s ease;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--header-border);
  padding: 12px 16px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-group h1 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.brand-group h1 span {
  color: var(--accent-cyan);
}

.brand-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 4px;
}

.subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Theme Toggle Button */
.theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.theme-toggle:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

[data-theme="light"] .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: inline-block; }

[data-theme="dark"] .theme-icon-light { display: inline-block; }
[data-theme="dark"] .theme-icon-dark { display: none; }

/* Cart Trigger */
.cart-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cart-trigger:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.cart-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--accent-emerald);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .cart-count {
  color: #000;
}

/* keyframes cartBounce removed */

/* keyframes bounceGently removed */

.cart-bounce {
  animation: none;
}

.cart-text {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.cart-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.cart-total-preview {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Main Content */
.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}

/* Info card */
.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--info-text);
  line-height: 1.45;
}

.info-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Controls */
.controls-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
}

.search-box input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 12px 120px 12px 42px;
  color: var(--input-text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.search-box input:focus {
  border-color: var(--accent-cyan);
}

.btn-clear {
  position: absolute;
  right: 98px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 3;
}

.btn-search-scanner {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #059669, #0d9488);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.btn-search-scanner:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #10b981, #14b8a6);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-search-scanner:active {
  transform: scale(0.97);
}

/* Quick Search Chips */
.quick-search-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 2px 2px;
  scrollbar-width: none;
}
.quick-search-chips::-webkit-scrollbar {
  display: none;
}
.chips-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 2px;
}
.chip {
  background: var(--pill-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  color: var(--text-muted, #94a3b8);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  font-family: inherit;
}
.chip:hover {
  border-color: var(--accent-cyan);
  color: var(--text-main, #f8fafc);
}
.chip.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #020617;
  font-weight: 700;
}

/* Pills */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill:hover {
  background: var(--pill-hover-bg);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.pill.active {
  background: var(--pill-active-bg);
  color: var(--pill-active-text);
  border-color: var(--pill-active-bg);
  font-weight: 700;
}

/* Filter Sub bar */
.filter-sub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.results-count {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.sort-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-wrapper select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  outline: none;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Product Card */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  box-sizing: border-box;
}

.product-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

.card-top-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.card-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.brand-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stock-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.in-stock {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
}

.low-stock {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-weight: 800;
  animation: none;
}

/* ========================================================
   STUDIO SHOWCASE IMAGE CONTAINER
   Eliminates ugly raw boxes and seamlessly blends photos
   ======================================================== */
.card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--image-wrap-bg);
  border-radius: var(--image-wrap-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--image-wrap-shadow);
  border: var(--image-wrap-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: none;
}

.product-card:hover .product-image {
  transform: scale(1.08);
}

.card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-text);
}

.badge-glow {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #a855f7;
}

[data-theme="dark"] .badge-glow {
  color: #d8b4fe;
}

.badge-tour {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #d97706;
  font-weight: 700;
}

/* Beginner Pill & Badge styling */
.pill-beginner {
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  font-weight: 700 !important;
}
.pill-beginner:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: #10b981 !important;
}
.pill-beginner.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .pill-beginner {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: rgba(16, 185, 129, 0.15) !important;
}
[data-theme="dark"] .pill-beginner.active {
  background: #10b981 !important;
  color: #ffffff !important;
}

.badge-beginner {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #047857 !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .badge-beginner {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #34d399 !important;
}

/* Flight numbers bar */
.flight-matrix {
  display: flex;
  gap: 4px;
  background: var(--flight-bg);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  justify-content: space-around;
  border: 1px solid var(--flight-border);
}

.flight-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slot-num {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--flight-num);
}

.slot-lbl {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.flight-slot-curve {
  cursor: pointer;
  min-width: 32px;
  transition: transform 0.15s ease;
}

.flight-slot-curve:hover {
  transform: scale(1.12);
}

.flight-slot-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 4px;
  padding: 0 3px;
}

.flight-slot-clickable:hover {
  background: rgba(6, 182, 212, 0.12);
  transform: translateY(-1px);
}

.flight-slot-clickable:hover .slot-num {
  color: var(--accent-cyan, #06b6d4);
}

.badge-stab-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.badge-stab-clickable:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.flight-sparkline-svg {
  display: block;
  overflow: visible;
  filter: none;
}

/* Card Bottom */
.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--card-bottom-border);
  gap: 8px;
}

.price-box {
  display: flex;
  flex-direction: column;
}

.price-main {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--text-primary);
}

.price-vat {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.card-bottom-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-add-cart {
  background: var(--btn-cart-bg);
  color: var(--btn-cart-color);
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* scale removed per subtle micro-interactions */

/* Cart Drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1800;
  display: none;
}

.cart-overlay.open {
  display: block;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 460px;
  height: 100%;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--drawer-bg, #0f172a);
  border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  z-index: 2600;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.45);
}

.cart-drawer.open {
  right: 0;
}

.cart-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: var(--card-bg, #0f172a);
  z-index: 10;
}

.cart-header h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
}

.btn-close-cart {
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s ease;
}

.btn-close-cart:hover {
  color: #ffffff;
}

.cart-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px 0;
}

/* Smooth custom scrollbar on desktop */
.cart-scroll-area::-webkit-scrollbar {
  width: 7px;
}

.cart-scroll-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.cart-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

.cart-scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

.cart-body {
  flex-shrink: 0;
  padding: 14px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-items-list {
  flex: 1;
  display: block;
  padding: 0;
}

.cart-empty-msg {
  text-align: center;
  color: var(--text-muted);
  margin-top: 60px;
  font-size: 0.95rem;
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--drawer-item-bg, var(--bg-card));
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.cart-item-row:last-child {
  margin-bottom: 0;
}

.cart-item-booster-row {
  margin-top: -6px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.btn-cart-booster {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  border: 1px dashed;
  text-align: left;
}

.btn-cart-booster.putter-pair {
  background: rgba(236, 72, 153, 0.08);
  border-color: rgba(236, 72, 153, 0.35);
  color: #f472b6;
}

.btn-cart-booster.putter-pair:hover {
  background: rgba(236, 72, 153, 0.16);
  border-color: #ec4899;
  transform: translateY(-1px);
}

.btn-cart-booster.backup {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
  color: #818cf8;
}

.btn-cart-booster.backup:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: #6366f1;
  transform: translateY(-1px);
}

.btn-booster-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-booster-cta {
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.cart-item-booster-active {
  margin-top: -6px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.cart-item-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.cart-item-row .item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-row .item-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-row .item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.cart-item-row .item-qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-item-row .item-qty-control span {
  font-weight: 800;
  font-size: 0.92rem;
  min-width: 18px;
  text-align: center;
}

.cart-item-info {
  flex: 1;
}

.cart-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-qty {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 800;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.item-price {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* Cart Footer */
.cart-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) 18px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  background: var(--bg-card, #0f172a);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.summary-amount {
  color: var(--accent-cyan);
}

.cart-vat-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.btn-swish-checkout {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  border: 2px solid #334155;
  border-radius: var(--radius-md);
  padding: 14px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  transition: all 0.2s ease;
}

.btn-swish-checkout:hover {
  border-color: var(--accent-cyan);
  filter: brightness(1.15);
}

.swish-icon {
  height: 24px;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#swishModalOverlay {
  z-index: 10000 !important;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  background: var(--modal-card-bg);
  border: 1px solid var(--modal-card-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 440px;
  position: relative;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.btn-close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.12));
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1.6rem;
  font-weight: 700;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.15s ease;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-close-modal:hover,
.btn-close-modal:active {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
  border-color: #ef4444;
  transform: scale(0.95);
}

body.has-open-modal {
  overflow: hidden !important;
  touch-action: none;
}

.swish-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

[data-theme="dark"] .swish-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.swish-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  animation: none;
}

/* keyframes pulse removed */

.swish-modal-header h3 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.modal-payee {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.swish-qr-container {
  background: #fff;
  padding: 16px;
  border-radius: var(--radius-md);
  display: inline-block;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.qr-helper {
  color: #475569;
  font-size: 0.75rem;
  margin-top: 8px;
  max-width: 240px;
}

.order-ref-box {
  background: var(--input-bg);
  border: 1px dashed var(--border-color);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ref-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.ref-code {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-emerald);
  letter-spacing: 0.05em;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-swish-open {
  background: #0284c7;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: all 0.2s ease;
}

.btn-swish-open:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.btn-swish-open:active {
  background: #075985;
  transform: translateY(1px);
}

.swish-pc-notice {
  display: none;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: left;
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.swish-pc-notice strong {
  display: block;
  color: #0284c7;
  font-size: 0.88rem;
  margin-bottom: 2px;
}

[data-theme="dark"] .swish-pc-notice strong {
  color: #38bdf8;
}

@media (min-width: 769px) {
  .swish-pc-notice {
    display: block;
  }
}

.swish-summary-bonus-clean {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: left;
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.swish-summary-bonus-clean strong {
  display: block;
  color: var(--accent-emerald);
  font-size: 0.85rem;
  margin-bottom: 1px;
}

.btn-confirm-paid {
  background: var(--accent-emerald);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

[data-theme="dark"] .btn-confirm-paid {
  color: #000;
}

.btn-confirm-paid:hover {
  filter: brightness(1.08);
}

/* Receipt Modal */
.receipt-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.receipt-modal h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.receipt-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.receipt-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
  margin-bottom: 20px;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.receipt-row span:first-child {
  color: var(--text-muted);
}

.receipt-row span:last-child {
  color: var(--text-primary);
  font-weight: 600;
}

.receipt-items-list {
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
  padding: 10px 0;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.receipt-item-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.receipt-total {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.receipt-vat {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

.btn-primary {
  background: var(--accent-cyan);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

[data-theme="dark"] .btn-primary {
  color: #000;
}

.btn-primary:hover {
  filter: brightness(1.1);
}

/* Admin Modal (Tobias Ägarvy) */
.modal-card.admin-modal-card {
  max-width: 800px;
  width: 95vw;
  height: min(850px, 86dvh);
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 14px 22px;
  text-align: left;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

@media (max-width: 640px) {
  .modal-card.admin-modal-card {
    width: 96vw;
    height: 84dvh;
    max-height: 84dvh;
    padding: 12px 12px 10px 12px;
  }
}

.admin-modal-header {
  flex-shrink: 0;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-right: 42px; /* Clear close button */
}

.admin-pill-badge {
  display: inline-block;
  background: rgba(14, 165, 233, 0.15);
  color: var(--accent-cyan);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.admin-modal-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.admin-modal-header p.modal-payee {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.admin-tabs-nav {
  display: flex;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  padding: 5px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tabs-nav::-webkit-scrollbar {
  display: none;
}

.admin-tabs-nav .admin-nav-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-tabs-nav .admin-nav-btn:hover {
  color: var(--text-primary);
}

.admin-tabs-nav .admin-nav-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.admin-tab-pane {
  display: none;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.admin-tab-pane.active {
  display: flex;
  flex-direction: column;
}

/* Tab: Inkomna Ordrar */
.admin-order-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-filter-pill {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.admin-filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--accent-cyan);
}

.admin-filter-pill.active {
  background: rgba(14, 165, 233, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.admin-orders-feed {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 4px;
  display: block !important;
}

.order-card {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.order-card.pending {
  border-left: 4px solid #f59e0b;
}

.order-card.confirmed {
  border-left: 4px solid var(--accent-emerald);
}

.order-card.rejected {
  border-left: 4px solid #ef4444;
  opacity: 0.75;
}

.order-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.order-ref {
  font-family: monospace;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.order-status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.admin-quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.admin-quick-action-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-copy-ref {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.btn-copy-ref:hover {
  transform: scale(1.15);
  color: var(--accent-cyan);
}

.btn-order-confirm {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-order-confirm:hover {
  background: #10b981;
  color: #020617;
  border-color: #10b981;
}

.btn-order-dismiss {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-order-dismiss:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

/* Tab: Hyll-lager Justering */
.admin-search-wrap {
  flex-shrink: 0;
  margin-bottom: 10px;
}

.admin-search-wrap input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.admin-search-wrap input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.admin-stock-table {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding-right: 4px;
  display: block !important;
}

.stock-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  gap: 12px;
  margin-bottom: 8px;
}

.stock-table-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.stock-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-stock-adj {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.btn-stock-adj:active {
  transform: scale(0.92);
}

.stock-qty-display {
  font-weight: 800;
  font-size: 1.05rem;
  min-width: 36px;
  text-align: center;
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--border-color);
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.stock-qty-display:hover,
.stock-qty-display:active {
  background: rgba(14, 165, 233, 0.2);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Tab: Export & Stats */
.admin-export-card {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.admin-modal-footer {
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
}

.btn-admin-close-bottom {
  width: 100%;
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.1));
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.btn-admin-close-bottom:active {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: #ef4444;
  transform: scale(0.98);
}

.status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.status-confirmed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
}

.status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.btn-sm-action {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

.btn-confirm-sm {
  background: var(--accent-emerald);
  color: #fff;
}

.btn-reject-sm {
  background: #ef4444;
  color: #fff;
  margin-left: 4px;
}

/* Footer */
.app-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding: 24px 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-card);
}

.footer-sub {
  margin-top: 4px;
  font-size: 0.75rem;
}

.btn-footer-link {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.82rem;
  font-family: inherit;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.btn-footer-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .btn-footer-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-footer-glossary {
  color: var(--accent-cyan);
}

.btn-footer-orders {
  color: var(--accent-emerald);
}

.btn-admin-open {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-admin-open:hover {
  color: var(--text-primary);
  border-color: var(--accent-cyan);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .product-card {
    padding: 10px;
  }
  
  .card-title {
    font-size: 0.95rem;
  }
  
  .price-main {
    font-size: 1.1rem;
  }
  
  .btn-add-cart {
    padding: 6px 9px;
    font-size: 0.72rem;
  }

  .card-bottom-actions {
    gap: 4px;
  }

  
  .cart-text {
    display: none;
  }
  
  .brand-group h1 {
    font-size: 1.15rem;
  }
}

/* Stability Badges */
.badge-understable {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.35);
  color: #0284c7;
  font-weight: 700;
}

[data-theme="dark"] .badge-understable {
  color: #38bdf8;
}

.badge-stable {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #059669;
  font-weight: 700;
}

[data-theme="dark"] .badge-stable {
  color: #34d399;
}

.badge-overstable {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #dc2626;
  font-weight: 700;
}

[data-theme="dark"] .badge-overstable {
  color: #f87171;
}

.pill-beginner {
  border-color: rgba(16, 185, 129, 0.4);
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  font-weight: 700;
}

[data-theme="dark"] .pill-beginner {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
}

.pill-understable {
  border-color: rgba(14, 165, 233, 0.45) !important;
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.08) !important;
  font-weight: 700 !important;
}
.pill-understable:hover {
  background: rgba(14, 165, 233, 0.16) !important;
  border-color: #0284c7 !important;
}
.pill-understable.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35) !important;
}
[data-theme="dark"] .pill-understable {
  color: #38bdf8 !important;
  background: rgba(14, 165, 233, 0.15) !important;
}

.pill-stable {
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  font-weight: 700 !important;
}
.pill-stable:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: #10b981 !important;
}
.pill-stable.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .pill-stable {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

.pill-overstable {
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  font-weight: 700 !important;
}
.pill-overstable:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: #dc2626 !important;
}
.pill-overstable.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35) !important;
}
[data-theme="dark"] .pill-overstable {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

/* Clickable product elements */
.card-image-wrap, .card-title {
  cursor: pointer;
}

/* Quick View Modal */
.quick-view-card {
  max-width: 520px;
  width: 95%;
  text-align: left;
  padding: 24px;
  border-radius: var(--radius-lg);
  position: relative;
}

.quick-view-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}

@media (max-width: 520px) {
  .quick-view-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.quick-view-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  cursor: zoom-in;
  overflow: hidden;
}

.quick-view-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quick-view-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 12px 0;
  background: var(--input-bg);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-cyan);
}

.quick-view-bundle-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quick-view-bundle-content {
  flex: 1;
}

.quick-view-bundle-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-view-bundle-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}

.btn-qv-bundle-cta {
  background: #f59e0b;
  color: #0f172a;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-qv-bundle-cta:hover {
  background: #fbbf24;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.quick-view-addon-box {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 12px 0;
}

.quick-view-addon-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.quick-view-addon-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-qv-addon {
  flex: 1;
  min-width: 130px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-qv-addon:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent-cyan);
  transform: translateY(-1px);
}

.btn-qv-addon .addon-plus {
  color: var(--accent-emerald);
  font-weight: 800;
  font-size: 0.72rem;
}

.btn-qv-addon.in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.btn-qv-addon.in-cart .addon-plus {
  color: #34d399;
}

/* Flight Trajectory Curve Visualization */
.flight-curve-box {
  background: var(--flight-bg);
  border: 1px solid var(--flight-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0;
}

.flight-curve-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.flight-curve-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flight-curve-sub {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-projected-dist {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-weight: 800;
}

.flight-curve-svg-wrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: block;
}

.flight-curve-svg {
  width: 100%;
  height: auto;
  display: block;
}

.flight-path-anim {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: drawFlightPath 0.3s cubic-bezier(0.2, 0.9, 0.4, 1) forwards;
}

@keyframes drawFlightPath {
  to {
    stroke-dashoffset: 0;
  }
}

/* Dynamic Disc Duo Box */

.duo-disc-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.duo-disc-thumb {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.duo-disc-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duo-disc-stat {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.duo-plus-sign {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent-cyan);
  padding: 0 4px;
}

.duo-reason-text {
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--accent-emerald);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
}

.duo-reward-hint {
  font-size: 0.75rem;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px dashed rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  padding: 5px 9px;
}

.duo-save-badge {
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Cross-Sell Recommendations */
.quick-view-cross-sell {
  margin: 12px 0 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}

.cross-sell-heading {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cross-sell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 480px) {
  .cross-sell-grid {
    grid-template-columns: 1fr;
  }
}

.cross-sell-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  transition: border-color 0.15s ease;
}

.cross-sell-card:hover {
  border-color: var(--accent-cyan);
}

.cross-sell-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.cross-sell-info {
  flex: 1;
  min-width: 0;
}

.cross-sell-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cross-sell-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.btn-cross-sell-add {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-cross-sell-add:hover {
  transform: scale(1.05);
  background: #059669;
}

.cross-sell-card.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--input-bg) 100%);
}

.btn-cross-sell-add.in-cart {
  background: #059669;
}

/* Sticky Mobile Cart Bar */
.sticky-cart-bar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  z-index: 95;
  display: none;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .sticky-cart-bar.visible {
    display: block;
  }
}

.sticky-cart-content {
  background: #0f172a;
  color: #ffffff;
  border-radius: 999px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease;
}

.sticky-cart-content:active {
  transform: scale(0.98);
}

.sticky-cart-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sticky-badge {
  background: var(--accent-emerald);
  color: #000000;
  font-weight: 800;
  font-size: 0.8rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.sticky-cart-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sticky-reward-teaser {
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.sticky-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sticky-total {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent-cyan);
}

.sticky-action {
  font-weight: 800;
  font-size: 0.82rem;
  background: var(--accent-emerald);
  color: #000000;
  padding: 6px 14px;
  border-radius: 999px;
}

/* ======================================================
   HERO NEWS SLIDER & PROMO CAROUSEL
   ====================================================== */
.hero-slider-container {
  position: relative;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.hero-slider {
  display: flex;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  background: var(--slide-bg);
  color: #ffffff;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
}

.slide-content {
  flex: 1;
  max-width: 600px;
}

.slide-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.badge-pulse {
  background: #f97316;
  color: #fff;
  box-shadow: none;
  animation: none;
}

/* keyframes pulse removed */

.badge-blue {
  background: #0284c7;
  color: #fff;
}

.badge-emerald {
  background: #10b981;
  color: #fff;
}

.badge-new {
  background: #dc2626;
  color: #ffffff !important;
  font-weight: 800;
}

.badge-replenished {
  background: #0284c7;
  color: #ffffff !important;
  font-weight: 800;
}

.pill-new {
  border-color: #f97316 !important;
  color: #ea580c !important;
}

[data-theme="dark"] .pill-new {
  color: #fb923c !important;
}

.pill-new.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

.pill-incoming {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

[data-theme="dark"] .pill-incoming {
  color: #38bdf8 !important;
}

.pill-incoming.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

.slide-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 8px;
  color: #ffffff;
}

.slide-text {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-slide-primary {
  background: #ffffff;
  color: #0f172a;
  border: none;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.btn-slide-primary:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

.btn-slide-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.btn-slide-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.slide-art {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disc-stack-preview {
  position: relative;
  width: 150px;
  height: 110px;
}

.disc-stack-preview img {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transition: transform 0.3s;
  object-fit: cover;
}

.disc-preview-1 { top: 0; left: 0; z-index: 3; }
.disc-preview-2 { top: 12px; left: 36px; z-index: 2; }
.disc-preview-3 { top: 24px; left: 70px; z-index: 1; }

.matrix-preview-chip {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.chip-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent-cyan);
  margin: 0 4px;
}

.chip-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.slider-arrow:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: #ffffff;
}

.slider-prev { left: 10px; }
.slider-next { right: 10px; }

.slider-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}

.slider-dot.active {
  width: 22px;
  background: #ffffff;
}

/* Header Flight Guide Button */
.btn-flight-guide {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-flight-guide:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Flight Charts Modal */
.flight-chart-card {
  max-width: 860px !important;
  width: 95vw;
  height: min(850px, 86dvh);
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .flight-chart-card {
    width: 96vw;
    height: 84dvh;
    max-height: 84dvh;
    padding: 14px 12px 10px 12px;
  }
}

.flight-chart-header {
  margin-bottom: 12px;
}

.chart-tab-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.chart-tab-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}

.chart-tab-btn.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #000000;
}

.chart-tab-content {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding-right: 4px;
  flex: 1 1 0%;
  min-height: 0;
}

.flight-category-group {
  margin-bottom: 20px;
}

.flight-cat-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.flight-disc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flight-disc-card:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.flight-disc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.flight-disc-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.flight-disc-brand {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.flight-numbers-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.flight-mini-num {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 5px;
  text-align: center;
  flex: 1;
}

.flight-disc-card.in-cart {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.flight-disc-card.in-bag {
  border-color: #10b981 !important;
}

.flight-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.2;
}

.flight-badge.bag {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.flight-badge.cart {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.flight-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 6px;
}

.flight-card-stock-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
}

.flight-disc-stock-tag.in {
  color: var(--accent-emerald);
  font-weight: 700;
}

.flight-disc-stock-tag.out {
  color: var(--text-muted);
}

.flight-shelf-pill {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-cyan);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.flight-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-flight-card-buy {
  background: var(--accent-emerald);
  color: #020617;
  border: none;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-flight-card-buy:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

.btn-flight-card-buy.in-cart {
  background: #059669;
  color: #ffffff;
}

.btn-flight-card-qv {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.68rem;
  padding: 3px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-flight-card-qv:hover {
  color: var(--text-primary);
  border-color: var(--accent-cyan);
}

.btn-flight-card-bag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.68rem;
  padding: 3px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-flight-card-bag:hover {
  color: var(--accent-emerald);
  border-color: var(--accent-emerald);
}

.btn-flight-card-bag.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--accent-emerald);
  font-weight: 700;
}

.btn-flight-card-cmp {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.68rem;
  padding: 3px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-flight-card-cmp:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.flight-school-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flight-school-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
}

.flight-school-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flight-school-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.flight-school-ecosystem-bar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.school-examples-box {
  margin-top: 10px;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
}

.btn-school-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
}

.btn-school-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-school-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
}

.btn-school-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .hero-slide {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
    gap: 14px;
  }
  .slide-art {
    display: none;
  }
  .slide-title {
    font-size: 1.25rem;
  }
}

/* Official Flight Posters Gallery */
.flight-posters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.poster-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.poster-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.poster-img-wrap {
  position: relative;
  background: #0f172a;
  overflow: hidden;
  cursor: pointer;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.poster-card:hover .poster-img-wrap img {
  transform: scale(1.04);
}

.poster-overlay-hint {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(2px);
}

.poster-img-wrap:hover .poster-overlay-hint {
  opacity: 1;
}

.poster-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: var(--accent-cyan);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  text-transform: uppercase;
  z-index: 2;
}

.poster-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.poster-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.poster-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 12px;
  flex: 1;
}

.poster-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-poster-view {
  background: var(--accent-cyan);
  color: #000000;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-poster-view:hover {
  filter: brightness(1.1);
}

.btn-poster-pdf {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-poster-pdf:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-muted);
}

/* Lightbox Modal */
.lightbox-card {
  max-width: 96vw !important;
  max-height: 88dvh !important;
  height: min(900px, 88dvh);
  width: 1080px;
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  background: var(--bg-card) !important;
}

@media (max-width: 640px) {
  .lightbox-card {
    max-width: 98vw !important;
    max-height: 86dvh !important;
    height: 86dvh;
    padding: 12px 10px !important;
  }
}

.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-right: 40px;
  gap: 12px;
  flex-wrap: wrap;
}

.lightbox-img-wrap {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  text-align: center;
  border-radius: 8px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.lightbox-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.poster-preview-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: transform 0.2s ease;
}

.swish-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #065f46;
  border: 1px solid #10b981;
  color: #ecfdf5;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.swish-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Floating Scroll-to-Top Button */
.btn-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-scroll-top:hover,
.btn-scroll-top:active {
  background: var(--accent-cyan);
  color: #020617;
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .btn-scroll-top {
    bottom: 84px; /* Float above sticky mobile cart bar */
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ================= PRINT STYLES (Clean Swedish VAT Receipt) ================= */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Hide app header, storefront, buttons, toasts, sticky bars */
  .app-header,
  .app-intro,
  .controls-card,
  .results-header,
  .product-grid,
  .cart-drawer,
  .cart-overlay,
  .sticky-cart-bar,
  .floating-scroll-top,
  .swish-toast,
  .app-footer,
  .btn-primary,
  .receipt-actions-row,
  .receipt-wellness-box,
  .btn-close-modal,
  .admin-modal-card,
  .flight-chart-card,
  .lightbox-card {
    display: none !important;
    visibility: hidden !important;
  }

  #receiptModalOverlay {
    position: static !important;
    display: block !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    box-shadow: none !important;
  }

  .receipt-card {
    position: static !important;
    box-shadow: none !important;
    border: 1px dashed #999999 !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 16px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .receipt-header h3,
  .receipt-header p,
  .receipt-row,
  .receipt-row span,
  .receipt-row strong,
  .receipt-details strong {
    color: #000000 !important;
  }

  .receipt-header .success-icon {
    display: none !important;
  }

  .receipt-row {
    border-color: #dddddd !important;
  }

  .wellness-receipt-badge {
    background: #f8fafc !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
  }

  .wellness-badge-title {
    color: #000000 !important;
    font-weight: bold !important;
  }

  .wellness-badge-row {
    color: #000000 !important;
  }
}

/* ================= GARAGE 3-STEP FLOW BANNER ================= */
.garage-flow-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.garage-flow-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.flow-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35);
}

.flow-step-text {
  display: flex;
  flex-direction: column;
}

.flow-step-text strong {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.2;
}

.flow-step-text span {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.flow-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.6;
}

@media (max-width: 640px) {
  .garage-flow-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .flow-arrow {
    display: none;
  }
  .garage-flow-step {
    padding: 4px 0;
  }
}

/* ================= GARAGE TRUST & GUARANTEE BAR ================= */
.garage-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: -6px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.trust-text strong {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
}

.trust-text span {
  font-size: 0.69rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .garage-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ================= SOCIAL PROOF & LIVE GARAGE BAR ================= */
.recent-purchases-banner {
  background: var(--input-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 10px);
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.live-garage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pulse-dot-green {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: none;
  flex-shrink: 0;
}

/* keyframes pulse removed */

.live-garage-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-emerald, #10b981);
  letter-spacing: 0.05em;
}

.live-garage-stock {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.recent-track-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.recent-track-wrapper::-webkit-scrollbar {
  display: none;
}

.recent-track-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--accent-cyan);
  white-space: nowrap;
  flex-shrink: 0;
}

.recent-chips-track {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.recent-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.74rem;
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.recent-item-chip:hover {
  transform: translateY(-1px);
  border-color: var(--accent-cyan);
  background: var(--input-bg, #f8fafc);
}

.recent-item-name {
  font-weight: 800;
}

.recent-item-shelf {
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent-cyan);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
}

.recent-item-price {
  color: var(--accent-emerald, #10b981);
  font-weight: 800;
}

.badge-soft {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #2563eb !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  cursor: pointer;
}

.badge-soft:hover {
  background: rgba(59, 130, 246, 0.22) !important;
}

[data-theme="dark"] .badge-soft {
  color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.18) !important;
}

/* ================= FLIGHT COMPARISON OVERLAY ================= */
.flight-compare-section {
  margin: 10px 0 14px;
}

.btn-compare-toggle {
  width: 100%;
  background: rgba(14, 165, 233, 0.08);
  border: 1px dashed var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-compare-toggle:hover {
  background: rgba(14, 165, 233, 0.16);
}

.flight-compare-dropdown-wrap {
  margin-top: 10px;
  background: var(--flight-bg);
  border: 1px solid var(--flight-border);
  border-radius: 8px;
  padding: 10px;
}

.compare-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.compare-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  outline: none;
}

.compare-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-wrap: wrap;
}

.compare-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.compare-dot-1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: none;
}

.compare-dot-2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: none;
}

.flight-path-anim-2 {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: drawFlightPath 0.3s cubic-bezier(0.2, 0.9, 0.4, 1) forwards;
}

.compare-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.compare-quick-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-compare-chip {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-compare-chip:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--accent-cyan);
  color: #38bdf8;
  transform: translateY(-1px);
}

.compare-tactical-duel-box {
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.75));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.tactical-duel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  padding-bottom: 6px;
}

.tactical-duel-badge {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tactical-duel-pair-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.tactical-duel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.tactical-duel-metric {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 10px;
}

.tactical-duel-metric .metric-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tactical-duel-metric .metric-value {
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.35;
}

.tactical-duel-synergy {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
}

.tactical-duel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-duel-bundle {
  flex: 1;
  min-width: 170px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-duel-bundle:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

.btn-duel-single {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-duel-single:hover {
  background: #f59e0b;
  color: #020617;
}

.btn-duel-qv {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-duel-qv:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* ================= CART IMPULSE UPSELL ================= */
.cart-upsell-box {
  background: rgba(14, 165, 233, 0.06);
  border: 1px dashed rgba(14, 165, 233, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 12px 0 6px;
}

.cart-upsell-heading {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.cart-upsell-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.cart-upsell-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.cart-upsell-info {
  flex: 1;
  min-width: 0;
}

.cart-upsell-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-upsell-price {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.btn-cart-upsell-add {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-cart-upsell-add:hover {
  transform: none;
}

/* Kassahylla: Glömt något inför rundan? */

.cart-checkout-accessories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cart-checkout-accessories-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-checkout-accessories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.cart-acc-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-acc-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.cart-acc-card.is-in-cart {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.03);
}

.cart-acc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cart-acc-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.02);
}

.cart-acc-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-acc-bonus-tag {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-emerald);
  margin-bottom: 6px;
  display: block;
}

.cart-acc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: auto;
}

.cart-acc-price {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-cart-acc-add {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-cart-acc-add:hover:not(:disabled) {
  transform: none;
}

.btn-cart-acc-add.in-cart {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Bag Synergy Recommendation in Cart */

.cart-synergy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 6px;
}

.cart-synergy-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-synergy-unlock-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  animation: none;
}

.cart-synergy-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 8px;
}

.cart-synergy-product {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 6px 10px;
}

.cart-synergy-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}

.cart-synergy-info {
  flex: 1;
  min-width: 0;
}

.cart-synergy-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-synergy-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.cart-synergy-flight {
  font-family: monospace;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.68rem;
}

.btn-cart-synergy-add {
  background: var(--accent-cyan);
  color: #020617;
  border: none;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  font-family: inherit;
}

.btn-cart-synergy-add:hover {
  transform: none;
}

/* ================= FAVORITES / WISHLIST ================= */
.btn-fav {
  background: none;
  border: none;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
  line-height: 1;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-fav:hover {
  transform: scale(1.05);
}

.btn-fav.active {
  animation: favPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes favPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pill-fav {
  border-color: rgba(244, 63, 94, 0.45) !important;
  color: #e11d48 !important;
  background: rgba(244, 63, 94, 0.08) !important;
  font-weight: 700 !important;
}

.pill-fav:hover {
  background: rgba(244, 63, 94, 0.16) !important;
  border-color: #e11d48 !important;
}

.pill-fav.active {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35) !important;
}

[data-theme="dark"] .pill-fav {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.15) !important;
}

.pill-popular {
  border-color: rgba(234, 179, 8, 0.45) !important;
  color: #ca8a04 !important;
  background: rgba(234, 179, 8, 0.08) !important;
  font-weight: 700 !important;
}

.pill-popular:hover {
  background: rgba(234, 179, 8, 0.16) !important;
  border-color: #ca8a04 !important;
}

.pill-popular.active {
  background: #eab308 !important;
  color: #020617 !important;
  border-color: #eab308 !important;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.35) !important;
}

[data-theme="dark"] .pill-popular {
  color: #facc15 !important;
  background: rgba(234, 179, 8, 0.15) !important;
}

.badge-popular {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #ca8a04 !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .badge-popular {
  color: #facc15 !important;
}

.pill-forehand {
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #d97706 !important;
  background: rgba(245, 158, 11, 0.08) !important;
  font-weight: 700 !important;
}

.pill-forehand:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: #f59e0b !important;
}

.pill-forehand.active {
  background: #f59e0b !important;
  color: #020617 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .pill-forehand {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.14) !important;
}

/* ================= BAG MATRIX SELECTOR ================= */
.bag-matrix-wrapper {
  margin: 10px 0 14px;
}

.btn-bag-matrix-toggle {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-bag-matrix-toggle:hover {
  border-color: var(--accent-cyan);
}

.bag-matrix-panel {
  margin-top: 8px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.bag-matrix-header {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.bag-matrix-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
}

.bag-col-header {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px 2px;
}

.bag-row-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.bag-cell-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  font-family: inherit;
}

.bag-cell-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.bag-cell-btn.active {
  background: var(--accent-cyan);
  color: #020617;
  border-color: var(--accent-cyan);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

@media (max-width: 520px) {
  .bag-matrix-grid {
    grid-template-columns: 1fr 0.9fr 0.9fr 0.9fr;
    gap: 4px;
  }
  .bag-row-label {
    font-size: 0.68rem;
  }
  .bag-cell-btn {
    font-size: 0.68rem;
    padding: 5px 2px;
  }
}

/* ================= QUICK SHARE & INLINE SWISH COPY ================= */
.btn-quick-share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-quick-share:hover {
  background: rgba(14, 165, 233, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ================= DISCHJÄLPEN (SMART DISC FINDER WIZARD) ================= */
.btn-disc-finder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--accent-emerald, #10b981);
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-disc-finder:hover {
  background: var(--accent-emerald);
  color: #020617;
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .btn-disc-finder {
  color: #34d399;
}

.advisor-quick-row {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 182, 212, 0.4) transparent;
}

.advisor-quick-row::-webkit-scrollbar {
  height: 4px;
}

.advisor-quick-row::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.35);
  border-radius: 999px;
}

.btn-advisor-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 9px 13px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: center;
}

.btn-advisor-pill:hover {
  border-color: var(--accent-cyan);
  background: rgba(14, 165, 233, 0.08);
}

.disc-finder-card {
  max-width: 640px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
}

.disc-finder-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.disc-finder-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wizard-step-box {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
}

.wizard-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.wizard-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-emerald);
  color: #020617;
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.wizard-choice-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--text-primary);
}

.wizard-choice-btn:hover {
  border-color: var(--accent-emerald);
}

.wizard-choice-btn.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 1px var(--accent-emerald);
}

.choice-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice-text strong {
  font-size: 0.8rem;
  color: var(--text-primary);
}

.choice-text span {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.wizard-results-box {
  margin-top: 4px;
}

.wizard-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.wizard-results-count {
  color: var(--accent-emerald);
}

.wizard-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.wizard-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: all 0.2s ease;
}

.wizard-card:hover {
  border-color: var(--accent-cyan);
}

.wizard-card.in-user-bag {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--input-bg) 100%);
}

.wizard-card.in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--input-bg) 100%);
}

.wizard-card-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex-shrink: 0;
}

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

.wizard-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.wizard-card-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-card-matrix {
  display: flex;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.wizard-card-matrix span {
  background: var(--border-color);
  padding: 1px 4px;
  border-radius: 3px;
}

.wizard-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-card-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-emerald);
}

.btn-wizard-add {
  background: var(--accent-cyan);
  color: #020617;
  border: none;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-wizard-add:hover {
  transform: scale(1.05);
}

.btn-wizard-add.in-cart {
  background: #059669;
  color: #ffffff;
}

.btn-wizard-add.btn-qv-backup {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.btn-wizard-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-wizard-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-wizard-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-wizard-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.disc-finder-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.disc-finder-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

/* ================= PLASTIC GUIDE & CLICKABLE PLASTIC BADGES ================= */
.badge-plastic-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.badge-plastic-clickable:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  transform: translateY(-1px);
}

/* ================= DISC COLOR BADGES & IN-STORE IDENTIFICATION ================= */
.badge-color {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.badge-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.badge-color-clickable {
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.badge-color-clickable:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  transform: translateY(-1px);
}

.highlight-plastic-card {
  animation: none;
}

/* keyframes plasticGlow removed */

.plastic-guide-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plastic-brand-section {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.plastic-brand-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.plastic-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
}

.plastic-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.plastic-card:hover {
  border-color: var(--accent-cyan);
}

.plastic-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plastic-card-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.plastic-card-stock {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
}

.plastic-card-ratings {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 2px 0;
}

.plastic-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.btn-filter-plastic {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-filter-plastic:hover {
  background: var(--accent-cyan);
  color: #020617;
  border-color: var(--accent-cyan);
}

/* ================= MULTI-DISC COMPARATOR & FLOATING DOCK ================= */
.btn-compare {
  background: none;
  border: 1px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0.45;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-compare:hover {
  opacity: 1;
  transform: scale(1.15);
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
}

.btn-compare.active {
  opacity: 1;
  background: rgba(6, 182, 212, 0.18);
  border-color: var(--accent-cyan);
}

.btn-compare-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--accent-cyan);
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  user-select: none;
}

.btn-compare-header:hover {
  background: var(--accent-cyan);
  color: #020617;
  transform: translateY(-1px);
}

/* Floating Compare Dock */
.disc-compare-dock {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  max-width: 680px;
  width: calc(100% - 32px);
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--accent-cyan);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  animation: slideUpDock 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

@keyframes slideUpDock {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.compare-dock-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.compare-dock-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.compare-dock-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.compare-dock-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.compare-chip-remove {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: color 0.15s ease;
}

.compare-chip-remove:hover {
  color: #ef4444;
}

.compare-dock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-compare-open {
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  color: #ffffff;
  border: none;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.btn-compare-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.btn-compare-clear {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-compare-clear:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/* Modal Styling */
.disc-compare-card {
  max-width: 840px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
}

.disc-compare-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.disc-compare-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.multi-flight-svg-wrap {
  background: radial-gradient(circle at 50% 90%, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

.compare-legend-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.compare-legend-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
}

.compare-legend-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

.compare-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.compare-card-col {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--accent-cyan);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.compare-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.compare-card-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px;
  cursor: pointer;
}

.compare-card-info {
  flex: 1;
}

.compare-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px;
  line-height: 1.2;
}

.compare-card-brand {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.compare-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.compare-card-flight-nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  text-align: center;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 4px;
}

.compare-num-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.compare-num-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.compare-takeaways-box {
  background: rgba(6, 182, 212, 0.06);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.compare-takeaways-title {
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.compare-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.btn-compare-preset {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-compare-preset:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Compare Modal Duo Bundle */
.compare-duo-bundle-box {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(16, 185, 129, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
}

.compare-duo-bundle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.compare-duo-bundle-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #34d399;
}

.compare-duo-bundle-price {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-primary);
}

.compare-duo-bundle-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.compare-duo-bundle-bonus {
  font-size: 0.78rem;
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 12px;
}

.btn-compare-duo-buy {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-compare-duo-buy:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-compare-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-compare-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-compare-gap-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-compare-gap-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}

/* Compare Bag Synergy Box & Gap Fill */
.compare-bag-synergy-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.compare-bag-synergy-box.gap-fill {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.14), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(6, 182, 212, 0.45);
}

.compare-bag-synergy-box.dual-backup {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(245, 158, 11, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.cbs-badge {
  color: #38bdf8 !important;
}

.cbs-badge-backup {
  color: #34d399 !important;
}

.compare-bag-synergy-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.btn-compare-gap-fill {
  flex: 1;
  min-width: 220px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border: none;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-compare-gap-fill:hover:not(:disabled) {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4);
}

.btn-compare-bag-link {
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-compare-bag-link:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-compare-duo-backup {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

.btn-compare-duo-backup:hover:not(:disabled) {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45) !important;
}

.compare-card-col.in-user-bag {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--card-bg, #ffffff) 100%);
  border-color: rgba(16, 185, 129, 0.35);
}

.compare-card-col.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, var(--card-bg, #ffffff) 100%);
}

.compare-card-col .btn-primary.in-cart {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
}

.btn-compare-gap-fill.in-cart {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

.btn-compare-duo-buy.in-cart {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

.btn-qv-to-checkout {
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
}

.btn-qv-to-checkout:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}

@media (max-width: 600px) {
  .disc-compare-dock {
    bottom: 74px; /* above sticky cart */
    width: calc(100% - 20px);
    padding: 8px 10px;
  }
  .compare-dock-title {
    font-size: 0.75rem;
  }
  .btn-compare-open {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
}

/* Compare Modal Tactical Radar Matrix */
.compare-radar-matrix {
  margin-top: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

.compare-radar-matrix-title {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--accent-cyan);
  padding: 10px 14px;
  background: rgba(6, 182, 212, 0.08);
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.matrix-duel-table {
  display: flex;
  flex-direction: column;
}

.matrix-duel-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
}

.matrix-duel-row:last-child {
  border-bottom: none;
}

.matrix-duel-row.header-row {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
  color: var(--text-muted);
}

.matrix-duel-cell {
  padding: 8px 12px;
  display: flex;
  align-items: center;
}

.matrix-duel-cell.label-cell {
  font-weight: 700;
  color: var(--text-muted);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
}

.matrix-duel-cell.val-cell {
  color: var(--text-primary);
}

.matrix-duel-cell.val-cell:nth-child(2) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.matrix-duel-cell.val-cell.col-1 {
  color: #38bdf8;
}

.matrix-duel-cell.val-cell.col-2 {
  color: #fbbf24;
}

@media (max-width: 600px) {
  .matrix-duel-row {
    grid-template-columns: 110px 1fr 1fr;
    font-size: 0.72rem;
  }
  .matrix-duel-cell {
    padding: 6px 8px;
  }
}

/* Compare Modal Contenders Section */
.compare-contenders-section {
  margin-top: 14px;
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
}

.compare-contenders-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}

.compare-contenders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.compare-contender-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: all 0.15s ease;
}

.compare-contender-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.compare-contender-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.compare-contender-info {
  flex: 1;
  min-width: 0;
}

.compare-contender-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-contender-brand {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-contender-nums {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-top: 1px;
}

.compare-contender-price {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 1px;
}

.btn-compare-contender-add {
  margin-top: 4px;
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-compare-contender-add:hover {
  background: var(--accent-cyan);
  color: #020617;
  border-color: var(--accent-cyan);
}

/* ================= 3-PACK BUNDLE BUILDER ================= */
.btn-bundle-pill {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.2)) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #f59e0b !important;
  font-weight: 800 !important;
}

.btn-bundle-pill:hover {
  background: #f59e0b !important;
  color: #020617 !important;
  border-color: #f59e0b !important;
  transform: translateY(-1px);
}

.bundle-modal-card {
  max-width: 820px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.bundle-modal-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.bundle-modal-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bundle-preset-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-bundle-preset {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-bundle-preset:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}

.btn-bundle-preset.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #f59e0b;
  font-weight: 800;
}

.bundle-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.btn-bundle-expand-toggle {
  background: rgba(245, 158, 11, 0.12);
  border: 1px dashed rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-bundle-expand-toggle:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.bundle-slot-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: all 0.2s ease;
}

.bundle-slot-card:hover {
  border-color: var(--accent-cyan);
}

.bundle-slot-card.in-user-bag {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--input-bg) 100%);
}

.bundle-slot-card.in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--input-bg) 100%);
}

.bundle-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bundle-slot-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.bundle-slot-content {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bundle-slot-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.bundle-slot-info {
  flex: 1;
}

.bundle-slot-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.bundle-slot-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-bundle-swap {
  background: none;
  border: 1px dashed var(--border-color);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  width: 100%;
  text-align: center;
}

.btn-bundle-swap:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.08);
}

.bundle-swap-drawer {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--accent-cyan);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.bundle-swap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.bundle-choice-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bundle-choice-card:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.08);
}

.bundle-action-bar {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.bundle-total-info {
  display: flex;
  flex-direction: column;
}

.bundle-total-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.bundle-total-price {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent-emerald);
}

.btn-bundle-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-bundle-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
}

.btn-bundle-to-checkout {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  font-family: inherit;
}

.btn-bundle-to-checkout:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}

.bundle-reward-pill {
  width: 100%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.35;
  box-sizing: border-box;
}

.bundle-reward-pill.max-tier {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  box-shadow: none;
}

/* ================= PHOSPHORESCENCE GLOW SIMULATOR ================= */
.pill-glow {
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  font-weight: 700 !important;
  box-shadow: none;
}

.pill-glow:hover {
  background: #10b981 !important;
  color: #020617 !important;
  box-shadow: none; !important;
}

.pill-glow.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: none; !important;
}

.btn-card-glow-toggle {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  user-select: none;
}

.btn-card-glow-toggle:hover {
  background: #10b981;
  color: #020617;
  border-color: #10b981;
  box-shadow: none;
}

.card-image-wrap.in-glow-mode {
  background: radial-gradient(circle at 50% 50%, #064e3b 0%, #022c22 45%, #020617 80%) !important;
  box-shadow: none !important;
  transition: background 0.25s ease;
}

.card-image-wrap.in-glow-mode .product-image {
  filter: none;
  animation: none;
}

/* keyframes phosphorPulse removed */

.glow-simulator-box {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.25), rgba(2, 44, 34, 0.35));
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.glow-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #34d399;
}

.btn-glow-test {
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(52, 211, 153, 0.6);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-glow-test:hover, .btn-glow-test.active {
  background: #10b981;
  color: #020617;
  box-shadow: none;
}

.btn-uv-charge {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(139, 92, 246, 0.4));
  border: 1px solid rgba(168, 85, 247, 0.65);
  color: #d8b4fe;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-uv-charge:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(139, 92, 246, 0.6));
  border-color: #c084fc;
  color: #ffffff;
  transform: scale(1.04);
  box-shadow: none;
}

.glow-sim-tag {
  font-size: 0.64rem;
  font-weight: 800;
  color: #a7f3d0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
}

.glow-sim-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
}

.glow-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.glow-spec-slot {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.glow-spec-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.glow-spec-val {
  font-size: 0.74rem;
  font-weight: 800;
  color: #34d399;
}

.glow-spec-quote {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.35;
  border-left: 2px solid #10b981;
  padding-left: 8px;
  margin-top: 6px;
}

.quick-view-img-box.in-glow-mode {
  background: radial-gradient(circle at 50% 50%, #064e3b 0%, #022c22 50%, #020617 85%) !important;
  box-shadow: none !important;
  transition: background 0.25s ease;
}

.quick-view-img-box.in-glow-mode img {
  filter: none !important;
  animation: none !important;
}

.quick-view-img-box.uv-flash-active {
  background: radial-gradient(circle at 50% 50%, #581c87 0%, #3b0764 45%, #020617 80%) !important;
  box-shadow: none !important;
  transition: background 0.15s ease;
}

.quick-view-img-box.uv-flash-active img {
  filter: none !important;
}

.quick-view-img-box.super-glow-mode img {
  filter: none !important;
  animation: none !important;
}

/* keyframes phosphorSuperPulse removed */

/* ================= BAG AUDIT & GAP FINDER ================= */
.btn-bag-audit-pill {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(99, 102, 241, 0.22)) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  color: #a78bfa !important;
  font-weight: 800 !important;
}

.btn-bag-audit-pill:hover {
  background: #8b5cf6 !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

.bag-audit-modal-card {
  max-width: 860px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.bag-audit-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.bag-audit-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bag-audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
}

.bag-audit-search-wrap {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.bag-audit-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}

.bag-audit-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--modal-card-bg);
  border: 1px solid var(--accent-cyan);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  z-index: 50;
  margin-top: 4px;
}

.bag-audit-search-item {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem;
  transition: background 0.15s;
}

.bag-audit-search-item:hover {
  background: rgba(6, 182, 212, 0.15);
}

.bag-current-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  min-height: 48px;
  align-items: center;
}

.bag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #e2e8f0;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.bag-chip-remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.9rem;
  line-height: 1;
}

.bag-chip-remove:hover {
  color: #ef4444;
}

.bag-chip-title:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

.bag-chip-backup-btn {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.bag-chip-backup-btn:hover {
  background: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.bag-chip-backup-btn.in-cart {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: none;
}

.bag-chip-backup-btn.in-cart:hover {
  background: #059669;
  border-color: #059669;
}

.bag-chip-cmp-btn {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.bag-chip-cmp-btn:hover {
  background: #38bdf8;
  color: #020617;
  transform: translateY(-1px);
}

.bag-chip-stock-out {
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.1);
}

.bag-matrix-audit-grid {
  display: grid;
  grid-template-columns: 120px repeat(3, 1fr);
  gap: 6px;
  background: rgba(2, 6, 23, 0.5);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
}

.bmag-header {
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
}

.bmag-row-label {
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.bmag-cell {
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  padding: 8px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.bmag-cell.covered {
  border: 1px solid rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}

.bmag-cell.gap {
  border: 1px dashed rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.04);
}

.bmag-disc-tag {
  background: rgba(6, 182, 212, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bmag-gap-alert {
  color: #f87171;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
}

.bmag-cell.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.bmag-cell.clickable:hover {
  transform: translateY(-2px);
  border-style: solid;
}

.bmag-cell.covered.clickable:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.16);
  box-shadow: none;
}

.bmag-cell.gap.clickable:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  box-shadow: none;
}

.bmag-gap-find-cta {
  font-size: 0.64rem;
  font-weight: 800;
  color: #fbbf24;
  margin-top: 2px;
  display: block;
}

.gaps-analysis-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gap-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gap-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.gap-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #e2e8f0;
}

.gap-why {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.gap-disc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 10px;
}

.gap-disc-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gap-disc-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
}

.gap-disc-info {
  display: flex;
  flex-direction: column;
}

.gap-disc-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.gap-disc-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.btn-buy-gap-disc {
  background: var(--accent-cyan);
  color: #000000;
  border: none;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-buy-gap-disc:hover {
  background: #22d3ee;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.btn-buy-gap-disc.in-cart {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.btn-buy-gap-disc.in-cart:hover {
  background: #059669;
}

.btn-gap-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-gap-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.gap-card.gap-in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.85));
}

.gap-incart-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.btn-gap-bundle {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-gap-bundle:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: #10b981;
  color: #ffffff;
  transform: scale(1.03);
}

@media (max-width: 600px) {
  .bag-matrix-audit-grid {
    grid-template-columns: 80px repeat(3, 1fr);
    font-size: 0.72rem;
    padding: 8px;
    gap: 4px;
  }
  .bmag-cell {
    padding: 4px;
    min-height: 44px;
  }
  .gap-disc-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ================= CART REWARD ENGINE ================= */
.cart-reward-container {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-reward-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-reward-track-wrap {
  position: relative;
  width: 100%;
  margin: 6px 0 2px;
}

.cart-reward-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.cart-reward-bar {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #10b981);
  border-radius: 999px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-reward-bar.max-tier {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #10b981);
  box-shadow: none;
}

.cart-reward-pin {
  position: absolute;
  top: 4px;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #64748b;
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.cart-reward-pin.pin-500 {
  transform: translate(-100%, -50%);
}

.cart-reward-pin.reached {
  border-color: #10b981;
  background: #064e3b;
  color: #34d399;
  box-shadow: none;
}

.cart-reward-pin.pin-500.reached {
  border-color: #f59e0b;
  background: #78350f;
  color: #fbbf24;
  box-shadow: none;
}

.cart-reward-milestones-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.cart-reward-msg {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.cart-reward-msg strong {
  color: #34d399;
}

.cart-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

/* Cart Gift Claim Box */
.cart-gift-claim-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.45);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
}

.gift-claim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 6px;
}

.gift-claim-shelf {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(6, 182, 212, 0.25);
  cursor: pointer;
  transition: all 0.15s ease;
}

.gift-claim-shelf:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: var(--accent-cyan);
}

.gift-claim-take-reminder {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.take-reminder-pulse {
  font-size: 1rem;
  display: inline-block;
  animation: none;
}

.gift-claim-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gift-claim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.gift-claim-icon {
  font-size: 0.85rem;
}

.gift-claim-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.gift-claim-info strong {
  font-size: 0.75rem;
  color: var(--text-primary);
}

.gift-claim-sub {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.gift-claim-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: #10b981;
}

/* Cart Reward Milestone Upsell Box */
.cart-reward-upsell-box {
  background: rgba(15, 23, 42, 0.45);
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}

.cart-reward-upsell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 3px;
}

.cart-reward-upsell-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #38bdf8;
}

.cart-reward-upsell-rem {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cart-reward-upsell-rem strong {
  color: #38bdf8;
}

.cart-reward-upsell-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-bottom: 6px;
}

.cart-reward-upsell-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cart-reward-upsell-card {
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.15s ease;
}

.cart-reward-upsell-card.will-unlock {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.upsell-card-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.upsell-card-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upsell-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upsell-card-price {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.upsell-card-unlock-tag {
  font-size: 0.64rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
}

.btn-upsell-fast-add {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-upsell-fast-add:hover {
  background: #38bdf8;
  color: #020617;
  transform: translateY(-1px);
}

.cart-reward-upsell-card.will-unlock .btn-upsell-fast-add {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  color: #ffffff;
}

.cart-reward-upsell-card.will-unlock .btn-upsell-fast-add:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
}

/* Receipt Bonus Box */
.receipt-bonus-box {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-left: 3px solid #10b981;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 10px 0;
}

/* Mold Variant Plastic Summary Tag */
.mold-variant-plastic-tag {
  font-size: 0.68rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  margin-top: 3px;
  line-height: 1.25;
}

/* ================= VILHELMINA COURSE CADDY ================= */
.btn-caddy-pill,
.btn-advisor-pill.btn-caddy-pill {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.22));
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-weight: 800;
}

.btn-caddy-pill:hover,
.btn-advisor-pill.btn-caddy-pill:hover {
  background: #10b981;
  color: #020617;
  border-color: #10b981;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.course-caddy-modal-card {
  max-width: 860px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.course-caddy-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.course-caddy-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.caddy-hole-selector {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.caddy-hole-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}

.caddy-hole-btn:hover {
  border-color: var(--accent-emerald);
  color: var(--text-primary);
}

.caddy-hole-btn.active {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #020617;
}

/* Course Caddy Wind Compass & Compensator */
.caddy-wind-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 10px;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.caddy-wind-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #38bdf8;
  white-space: nowrap;
}

.caddy-wind-pills {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.btn-caddy-wind {
  white-space: nowrap;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-caddy-wind:hover {
  border-color: #38bdf8;
  color: var(--text-primary);
}

.btn-caddy-wind.active {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #020617;
  font-weight: 800;
  box-shadow: none;
}

/* Course Caddy Controls (Throw Style & Wind) */
.caddy-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.caddy-control-box {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caddy-control-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.caddy-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.caddy-pills .btn-caddy-pill {
  background: var(--card-bg, #0f172a) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: none !important;
  transform: none !important;
}

.caddy-pills .btn-caddy-pill:hover {
  border-color: var(--accent-emerald) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
}

.caddy-pills .btn-caddy-pill.active {
  background: var(--accent-emerald) !important;
  border-color: var(--accent-emerald) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.caddy-pills .btn-caddy-pill.forehand.active {
  background: linear-gradient(135deg, #a855f7, #c084fc) !important;
  border-color: #c084fc !important;
  color: #020617 !important;
  font-weight: 800 !important;
  box-shadow: none; !important;
}

/* Course Caddy Bag & Cart Matcher Card */
.caddy-bag-matcher-card {
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
  margin-top: 4px;
  margin-bottom: 4px;
}

.caddy-bag-matcher-card.in-bag {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.09), rgba(6, 78, 59, 0.18));
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.caddy-bag-matcher-card.missing {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09), rgba(180, 83, 9, 0.18));
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.matcher-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.matcher-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
}

.matcher-badge.in-bag {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.matcher-badge.missing {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.matcher-disc-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #34d399;
}

.matcher-disc-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fbbf24;
}

.matcher-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.matcher-desc strong {
  color: var(--text-primary);
}

.matcher-action {
  margin-top: 4px;
  display: flex;
}

.btn-matcher-add {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #020617;
  border: none;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.btn-matcher-add:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.btn-matcher-backup {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

.btn-matcher-backup:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

.btn-matcher-backup.in-cart {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: none; !important;
}

.btn-matcher-bag-link {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-matcher-bag-link:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-matcher-matrix-link {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-matcher-matrix-link:hover {
  background: #38bdf8;
  color: #0f172a;
}

.caddy-hole-display {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.caddy-hole-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.caddy-hole-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
}

.caddy-hole-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.caddy-advice-box {
  background: rgba(2, 6, 23, 0.6);
  border-left: 3px solid var(--accent-emerald);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.caddy-rec-disc-card {
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.caddy-rec-disc-card.in-user-bag {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 6, 23, 0.75) 100%);
}

.caddy-rec-disc-card.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(2, 6, 23, 0.8) 100%);
}

.caddy-rec-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.caddy-rec-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
}

.caddy-rec-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.caddy-rec-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}

.caddy-rec-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.btn-caddy-add-cart {
  background: var(--accent-emerald);
  color: #020617;
  border: none;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-caddy-add-cart:hover {
  background: #34d399;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-caddy-add-cart.in-cart {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.btn-caddy-add-cart.in-cart:hover {
  background: #059669;
}

.btn-caddy-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 800;
  font-size: 0.82rem;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-caddy-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.btn-caddy-swish:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .caddy-rec-disc-card {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Course Caddy Trajectory Visualizer & Weather Impact */
.caddy-trajectory-visualizer {
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.caddy-traj-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.caddy-fairway-svg {
  width: 100%;
  height: 140px;
  background: radial-gradient(circle at 50% 90%, rgba(6, 78, 59, 0.25), rgba(15, 23, 42, 0.8));
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.caddy-traj-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.caddy-weather-impact-card {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
}

.btn-caddy-filter-all {
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-family: inherit;
  margin-top: 4px;
}

.btn-caddy-filter-all:hover {
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.08);
}

/* ================= GARAGE SHELF LOCATOR & BLUEPRINT ================= */
.badge-shelf-clickable {
  cursor: pointer;
  background: rgba(6, 182, 212, 0.12) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  color: #38bdf8 !important;
  transition: all 0.2s ease;
}

.badge-shelf-clickable:hover {
  background: var(--accent-cyan) !important;
  color: #020617 !important;
  border-color: var(--accent-cyan) !important;
  transform: translateY(-1px);
}

.btn-map-pill {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.14), rgba(14, 165, 233, 0.22)) !important;
  border-color: rgba(6, 182, 212, 0.5) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
}

.btn-map-pill:hover {
  background: #06b6d4 !important;
  color: #020617 !important;
  border-color: #06b6d4 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
}

.garage-map-modal-card {
  max-width: 860px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.garage-map-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.garage-map-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.garage-blueprint {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-theme="dark"] .garage-blueprint {
  background: #0f141c;
  border-color: #263346;
}

.blueprint-entrance {
  background: rgba(16, 185, 129, 0.1);
  border: 1px dashed var(--accent-emerald);
  color: var(--accent-emerald);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.blueprint-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 650px) {
  .blueprint-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.shelf-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .shelf-block {
  background: #161c26;
  border-color: #263346;
}

.shelf-block:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}

.shelf-block.highlighted {
  border: 2px solid var(--accent-cyan);
  background: rgba(2, 132, 199, 0.06);
  box-shadow: none;
}

[data-theme="dark"] .shelf-block.highlighted {
  background: rgba(6, 182, 212, 0.12);
  border-color: #06b6d4;
  box-shadow: none;
}

.shelf-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shelf-badge-active {
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(2, 132, 199, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.shelf-brand {
  font-weight: 800;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

.shelf-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.shelf-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-emerald);
  margin-top: 2px;
}

.shelf-kassa-swish-row {
  margin: 6px 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.swish-badge-pill {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(2, 132, 199, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.shelf-org {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ================= GARAGE MAP SPOTLIGHT & SHELF SHOWCASE ================= */
.map-target-disc-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mtd-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.mtd-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mtd-img:hover {
  transform: scale(1.08);
}

.mtd-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mtd-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}

.mtd-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
}

.mtd-title:hover {
  color: var(--accent-cyan);
}

.mtd-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mtd-loc {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

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

.btn-mtd-buy {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-mtd-buy:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-mtd-buy.in-cart {
  background: #059669;
}

.btn-mtd-qv {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-mtd-qv:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.garage-shelf-showcase {
  margin-top: 6px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .garage-shelf-showcase {
  background: #161c26;
  border-color: #263346;
}

.gss-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.gss-header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gss-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.gss-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.btn-gss-filter-store {
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.btn-gss-filter-store:hover {
  background: var(--accent-cyan);
  color: #ffffff;
}

.gss-discs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.gss-disc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-main);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

[data-theme="dark"] .gss-disc-chip {
  background: #0f141c;
  border-color: #263346;
}

.gss-disc-chip:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.gss-disc-chip.in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}

.gss-disc-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-card);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  border: 1px solid var(--border-color);
}

.gss-disc-img:hover {
  transform: scale(1.08);
}

.gss-disc-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gss-disc-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.gss-disc-name:hover {
  color: var(--accent-cyan);
}

.gss-disc-specs {
  font-size: 0.74rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gss-disc-price-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.gss-disc-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}

.badge-stock-last {
  font-size: 0.65rem;
  color: #d97706;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
}

.badge-stock-ok {
  font-size: 0.65rem;
  color: var(--accent-emerald);
  font-weight: 700;
}

.gss-disc-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.btn-gss-buy {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-gss-buy:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.btn-gss-buy.in-cart {
  background: #059669;
}

.btn-gss-qv {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-gss-qv:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.btn-gss-toggle-all {
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
  border: 1px solid rgba(2, 132, 199, 0.35);
  background: rgba(2, 132, 199, 0.08);
  cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.btn-gss-toggle-all:hover {
  background: var(--accent-cyan);
  color: #ffffff;
}

/* ================= ARM SPEED & REALISTIC TRAJECTORY ================= */
.arm-speed-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  background: rgba(2, 6, 23, 0.4);
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  border-radius: 8px;
}

.arm-speed-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
}

.btn-arm-level {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-arm-level:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.btn-arm-level.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #020617;
  box-shadow: none;
}

.arm-speed-advice {
  background: rgba(15, 23, 42, 0.6);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  font-size: 0.76rem;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 8px;
}

.arm-speed-advice strong {
  color: #38bdf8;
}

/* ================= THROW STYLE & FOREHAND TRAJECTORY ================= */
.throw-style-switcher {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  background: rgba(2, 6, 23, 0.4);
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  border-radius: 8px;
}

.throw-switch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-throw-style {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-throw-style:hover {
  border-color: #a855f7;
  color: var(--text-primary);
}

.btn-throw-style.active {
  background: #a855f7;
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: none;
}

.badge-fh {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ================= WIND & WEATHER MASTER ================= */
.btn-wind-pill {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.35);
  color: #38bdf8;
}

.btn-wind-pill:hover {
  background: rgba(14, 165, 233, 0.16);
  border-color: #38bdf8;
  box-shadow: none;
}

.wind-master-modal-card {
  max-width: 860px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.wind-master-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.wind-master-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wind-cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

@media (max-width: 700px) {
  .wind-cond-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wind-cond-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
}

.wind-cond-btn:hover {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.06);
  color: var(--text-primary);
}

.wind-cond-btn.active {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.15);
  box-shadow: none;
  color: var(--text-primary);
}

.wind-cond-btn .cond-icon {
  font-size: 1.3rem;
}

.wind-cond-btn .cond-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}

.wind-cond-btn .cond-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.wind-cond-btn.active .cond-title {
  color: #38bdf8;
}

.wind-analysis-card {
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.95));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wind-physics-box {
  background: rgba(2, 6, 23, 0.5);
  border-left: 3px solid #38bdf8;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.wind-physics-box strong {
  color: #38bdf8;
}

.wind-sim-wrap {
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  position: relative;
}

.wind-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.wind-sim-svg {
  width: 100%;
  height: 120px;
  display: block;
}

.wind-sim-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.wind-sim-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wind-rec-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wind-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.wind-rec-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.wind-rec-card:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
}

.wind-rec-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wind-rec-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.wind-rec-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.wind-rec-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wind-rec-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.wind-rec-numbers {
  display: inline-flex;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.wind-rec-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}

.wind-rec-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.wind-rec-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-wind-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-wind-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.btn-wind-action.btn-wind-bag.active {
  background: rgba(234, 179, 8, 0.18);
  border-color: #eab308;
  color: #fbbf24;
}

.btn-wind-action.btn-wind-compare.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}

.btn-wind-action.btn-wind-matrix-item {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.btn-wind-action.btn-wind-matrix-item:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.btn-wind-action.btn-wind-caddy-item {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.btn-wind-action.btn-wind-caddy-item:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  transform: translateY(-1px);
}

.wind-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-wind-add-cart {
  background: var(--accent-cyan);
  color: #020617;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-wind-add-cart:hover {
  background: #38bdf8;
  transform: scale(1.03);
}

.btn-wind-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
}

.btn-wind-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
}

.btn-wind-filter-all {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38bdf8;
  font-weight: 800;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  text-align: center;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-wind-filter-all:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: #38bdf8;
}

.wind-rec-card.in-user-bag {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 6, 23, 0.6) 100%);
}

.wind-rec-card.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(2, 6, 23, 0.7) 100%);
}

.wind-bag-match-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin-top: 10px;
}

.wind-bag-match-banner.in-cart {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.1));
  border-color: rgba(16, 185, 129, 0.5);
}

.wind-bag-match-banner.gap {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(239, 68, 68, 0.08));
  border-color: rgba(245, 158, 11, 0.4);
}

.btn-wind-gap-fill {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-wind-gap-fill:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.btn-wind-add-cart.in-cart {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.btn-wind-add-cart.in-cart:hover {
  background: #059669;
}

.btn-wind-add-cart.btn-qv-backup {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.btn-wind-add-cart.btn-qv-backup:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.55) !important;
}

/* ================= INTERACTIVE 2D FLIGHT MATRIX ================= */
.btn-matrix-pill {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.btn-matrix-pill:hover {
  background: rgba(168, 85, 247, 0.16);
  border-color: #c084fc;
  box-shadow: none;
}

.matrix-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.matrix-controls-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: 10px;
}

.matrix-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}

.matrix-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.matrix-brand-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.matrix-pill {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.matrix-pill:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.matrix-pill.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #020617;
  font-weight: 800;
}

.btn-matrix-stock-toggle {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-matrix-stock-toggle.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

/* ================= MATRIX ARM SPEED / SWEETSPOT ================= */
.matrix-arm-speed-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 8px 10px;
  border-radius: 8px;
}

.matrix-strip-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.matrix-arm-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.matrix-arm-pill {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.matrix-arm-pill .matrix-arm-sub {
  font-size: 0.65rem;
  opacity: 0.75;
}

.matrix-arm-pill:hover {
  border-color: #38bdf8;
  color: var(--text-primary);
  transform: translateY(-1px);
}

.matrix-arm-pill.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: none;
}

.matrix-arm-advice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-left: 4px solid #38bdf8;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.matrix-advice-icon {
  font-size: 1.2rem;
}

.matrix-speed-cell.row-sweetspot {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.6), rgba(2, 44, 34, 0.8)) !important;
  border-left: 4px solid #10b981 !important;
  box-shadow: none;
}

.badge-matrix-sweetspot {
  background: #10b981;
  color: #020617;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  margin-top: 3px;
  letter-spacing: 0.03em;
  display: inline-block;
  box-shadow: none;
}

.badge-matrix-warning {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  margin-top: 3px;
  display: inline-block;
}

.matrix-mold-chip.matrix-chip-sweetspot {
  border-color: rgba(52, 211, 153, 0.7) !important;
  background: rgba(6, 78, 59, 0.4) !important;
  box-shadow: none;
}

.matrix-chip-sweet-star {
  color: #fbbf24;
  font-size: 0.75rem;
  margin-left: 2px;
}

.matrix-arm-fit-badge {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.matrix-arm-fit-badge.sweet {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.matrix-arm-fit-badge.note {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.matrix-arm-fit-badge.sub {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.matrix-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
}

.matrix-grid-table {
  display: grid;
  grid-template-columns: 110px repeat(5, minmax(130px, 1fr));
  gap: 2px;
  background: var(--border-color);
  min-width: 760px;
}

.matrix-header-cell {
  background: rgba(2, 6, 23, 0.9);
  padding: 10px 8px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.matrix-speed-cell {
  background: rgba(2, 6, 23, 0.85);
  padding: 10px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #38bdf8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.matrix-cell {
  background: rgba(15, 23, 42, 0.75);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 80px;
}

.matrix-mold-chip {
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matrix-mold-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.matrix-mold-chip.active {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  box-shadow: none;
}

.matrix-mold-chip.brand-kasta {
  border-left: 3px solid #10b981;
}

.matrix-mold-chip.brand-lat {
  border-left: 3px solid #0284c7;
}

.matrix-mold-chip.brand-dm {
  border-left: 3px solid #f97316;
}

.matrix-mold-chip.brand-ws {
  border-left: 3px solid #eab308;
}

.matrix-chip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.matrix-chip-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-chip-stock {
  font-size: 0.68rem;
  font-weight: 700;
  color: #34d399;
}

.matrix-chip-stock.out {
  color: var(--text-muted);
}

.matrix-chip-numbers {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ================= MATRIX LIVE BAG & CART LAYER ================= */
.btn-matrix-bag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-matrix-bag-toggle.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35)) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 800;
  box-shadow: none;
}

.matrix-bag-coverage-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(6, 78, 59, 0.25));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.mbc-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mbc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mbc-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mbc-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.mbc-badge.high {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.mbc-badge.mid {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.mbc-badge.low {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.mbc-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.mbc-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-mbc-link {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-mbc-link:hover {
  background: #10b981;
  color: #020617;
}

.btn-mbc-link.bundle {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.btn-mbc-link.bundle:hover {
  background: #f59e0b;
  color: #020617;
}

.btn-mbc-link.gap-highlight {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.btn-mbc-link.gap-highlight:hover,
.btn-mbc-link.gap-highlight.active {
  background: #f59e0b;
  color: #020617;
  border-color: #f59e0b;
  box-shadow: none;
}

.mbc-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.mbc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #10b981);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.mbc-bar-fill.high {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.mbc-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Matrix Cells Coverage Highlights */
.matrix-cell.has-bag-disc {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.2);
}

.matrix-cell.empty-gap-zone {
  border: 1px dashed rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.02);
}

.matrix-cell.empty-gap-zone.highlighted {
  border: 1.5px dashed rgba(245, 158, 11, 0.8) !important;
  background: rgba(245, 158, 11, 0.08) !important;
  box-shadow: none;
}

/* Matrix Mold Chips Bag & Cart Status */
.matrix-mold-chip.in-bag {
  border-color: #10b981 !important;
  background: rgba(6, 78, 59, 0.35) !important;
  box-shadow: none;
}

.matrix-mold-chip.in-cart {
  border-color: #f59e0b !important;
  background: rgba(180, 83, 9, 0.35) !important;
  box-shadow: none;
}

.matrix-chip-bag-badge,
.matrix-chip-cart-badge {
  font-size: 0.72rem;
  margin-left: 2px;
}

/* Detail Drawer Bag Action & Notice */
.btn-matrix-bag-action {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.btn-matrix-bag-action:hover {
  background: #10b981;
  color: #020617;
}

.btn-matrix-bag-action.active {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
  font-weight: 800;
}

.matrix-bag-status-notice {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.matrix-bag-status-notice.in-bag {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.matrix-bag-status-notice.in-cart {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.matrix-bag-status-notice.gap {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}

/* QuickView Bag Button */
.btn-quick-bag {
  color: var(--text-muted);
  border-color: var(--border-color);
  transition: all 0.2s ease;
}

.btn-quick-bag:hover {
  border-color: var(--accent-emerald);
  color: var(--text-primary);
}

.btn-quick-bag.active {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
  color: #34d399;
  font-weight: 800;
  box-shadow: none;
}

/* Mold Detail Box */
.matrix-detail-box {
  background: radial-gradient(circle at 50% 20%, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
}

.matrix-detail-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 10px;
}

.matrix-detail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.matrix-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.matrix-detail-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.matrix-detail-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.matrix-detail-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.matrix-detail-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.matrix-variants-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.matrix-variant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--input-bg);
  gap: 8px;
}

.matrix-variant-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matrix-variant-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.matrix-variant-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.matrix-variant-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.matrix-variant-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-matrix-buy {
  background: var(--accent-cyan);
  color: #020617;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-matrix-buy:hover {
  background: #38bdf8;
  transform: scale(1.03);
}

.btn-matrix-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-matrix-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.matrix-variant-row.in-user-bag {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(2, 6, 23, 0.7) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.btn-matrix-buy.btn-qv-backup {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35) !important;
}

.btn-matrix-buy.btn-qv-backup:hover {
  filter: brightness(1.1) !important;
  transform: scale(1.03);
}

.btn-matrix-buy.btn-matrix-gap {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35) !important;
}

.btn-matrix-buy.btn-matrix-gap:hover {
  filter: brightness(1.1) !important;
  transform: scale(1.03);
}

.matrix-cell.has-cart-disc {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.04) !important;
}

.matrix-variant-row.in-user-cart {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(2, 6, 23, 0.7) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

.btn-matrix-buy.in-cart {
  background: #059669 !important;
  color: #ffffff !important;
}

.btn-matrix-variant-bag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-matrix-variant-bag:hover {
  color: var(--accent-emerald);
  border-color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.15);
}

.btn-matrix-variant-bag.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--accent-emerald);
  font-weight: 800;
}

.btn-matrix-variant-cmp {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-matrix-variant-cmp:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.15);
}

.btn-matrix-variant-qv {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-matrix-variant-qv:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.15);
}

.btn-matrix-plastic-link {
  transition: all 0.2s ease;
}

.btn-matrix-plastic-link:hover {
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.22) !important;
}

.btn-matrix-checkout-link {
  transition: all 0.2s ease;
}

.btn-matrix-checkout-link:hover {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.28) !important;
}

.mold-variant-plastic-tag {
  transition: all 0.15s ease;
}

.mold-variant-plastic-tag:hover {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: rgba(56, 189, 248, 0.12) !important;
}

/* ================= PLASTICS GUIDE DYNAMIC TOP MOLDS ================= */
.plastic-top-molds-box {
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plastic-top-molds-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plastic-top-molds-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plastic-mold-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  gap: 8px;
  transition: all 0.15s;
}

.plastic-mold-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(56, 189, 248, 0.3);
}

.plastic-mold-row.in-cart {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

.pmr-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.pmr-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pmr-name {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pmr-nums {
  font-size: 0.7rem;
  color: var(--accent-cyan);
  font-weight: 600;
}

.pmr-stock-line {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pmr-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-plastic-disc-buy {
  background: var(--accent-emerald);
  color: #020617;
  border: none;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 9px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-plastic-disc-buy:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

.btn-plastic-disc-buy.in-cart {
  background: #059669;
  color: #ffffff;
}

.btn-plastic-disc-qv {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 0.68rem;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-plastic-disc-qv:hover {
  color: var(--text-primary);
  border-color: var(--accent-cyan);
}

.btn-plastic-bag.active {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: #818cf8 !important;
  color: #c7d2fe !important;
}

.btn-plastic-compare.active {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

.btn-plastic-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  font-weight: 700;
}

.btn-plastic-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-plastic-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
  font-weight: 700;
}

.btn-plastic-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.btn-plastic-card-action {
  transition: all 0.15s ease;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-color);
}

.btn-pca-matrix:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-pca-bag:hover {
  background: rgba(99, 102, 241, 0.22) !important;
  border-color: #818cf8 !important;
  transform: translateY(-1px);
}

.btn-pca-caddy:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.plastic-ecosystem-bar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ================= PUTTER & GRIP SELECTOR LAB ================= */
.btn-putter-pill {
  background: rgba(236, 72, 153, 0.08);
  border-color: rgba(236, 72, 153, 0.35);
  color: #f472b6;
}

.btn-putter-pill:hover {
  background: rgba(236, 72, 153, 0.16);
  border-color: #f472b6;
  box-shadow: none;
}

.putter-selector-modal-card {
  max-width: 860px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.putter-selector-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.putter-selector-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.putter-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.putter-group-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.putter-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

@media (max-width: 650px) {
  .putter-choice-grid {
    grid-template-columns: 1fr;
  }
}

.putter-choice-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: inherit;
}

.putter-choice-btn:hover {
  border-color: #f472b6;
  background: rgba(236, 72, 153, 0.06);
  color: var(--text-primary);
}

.putter-choice-btn.active {
  border-color: #f472b6;
  background: rgba(236, 72, 153, 0.15);
  box-shadow: none;
  color: var(--text-primary);
}

.putter-choice-btn .choice-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.putter-choice-btn.active .choice-head {
  color: #f472b6;
}

.putter-choice-btn .choice-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.putter-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.putter-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.putter-card:hover {
  border-color: #f472b6;
  transform: translateY(-2px);
}

.putter-card.in-user-bag {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, var(--input-bg) 100%);
  border-color: rgba(16, 185, 129, 0.4);
}

.putter-card.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, var(--input-bg) 100%);
}

.putter-bag-helper-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 10px;
}

.putter-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.putter-card-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.putter-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.putter-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.putter-card-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.putter-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}

.btn-putter-add-cart {
  background: var(--accent-cyan);
  color: #020617;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-putter-add-cart:hover {
  background: #38bdf8;
  transform: scale(1.03);
}

.btn-putter-add-cart.in-cart {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.btn-putter-add-cart.in-cart:hover {
  background: #059669;
}

.btn-putter-pair-add {
  background: rgba(236, 72, 153, 0.14);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-putter-pair-add:hover {
  background: rgba(236, 72, 153, 0.25);
  border-color: #f472b6;
  transform: scale(1.03);
}

.btn-putter-pair-add.pair-in-cart {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45);
}

.btn-putter-pair-add.pair-in-cart:hover {
  background: #059669;
  border-color: #059669;
}

.btn-putter-filter-all {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #f472b6;
  font-weight: 800;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  text-align: center;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-putter-filter-all:hover {
  background: rgba(236, 72, 153, 0.25);
  color: #ffffff;
}

.btn-putter-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
}

.btn-putter-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-putter-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
}

.btn-putter-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.putter-ecosystem-bar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Putter Catalog Fast Subfilter Bar */
.putter-subfilter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.putter-subfilter-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-cyan);
  white-space: nowrap;
}

.putter-subfilter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.btn-putter-sub {
  white-space: nowrap;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-putter-sub:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.btn-putter-sub.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #020617;
  font-weight: 800;
  box-shadow: none;
}

.btn-putter-sub-advisor {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(236, 72, 153, 0.25));
  border-color: rgba(244, 114, 182, 0.5);
  color: #f472b6;
}

.btn-putter-sub-advisor:hover {
  background: #ec4899;
  color: #ffffff;
  border-color: #f472b6;
}

.btn-putter-sub-glow-advisor {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.25));
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
}

.btn-putter-sub-glow-advisor:hover {
  background: #22c55e;
  color: #020617;
  border-color: #4ade80;
  box-shadow: none;
}

/* ================= VIRAL BAG & WISHLIST SHARE ================= */
.btn-share-bag-pill {
  background: rgba(236, 72, 153, 0.08);
  border-color: rgba(236, 72, 153, 0.35);
  color: #f472b6;
}

.btn-share-bag-pill:hover {
  background: rgba(236, 72, 153, 0.16);
  border-color: #f472b6;
  color: #f472b6;
}

.btn-cart-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(236, 72, 153, 0.08);
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #f472b6;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-cart-share:hover {
  background: rgba(236, 72, 153, 0.16);
  border-color: #f472b6;
  transform: translateY(-1px);
}

.bag-share-modal-card {
  max-width: 620px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.bag-share-header {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.bag-share-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(236, 72, 153, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-share-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-share-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-share-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-share-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.share-source-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(2, 6, 23, 0.4);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.btn-share-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-align: center;
}

.btn-share-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.btn-share-tab.active {
  background: #ec4899;
  color: #ffffff;
  box-shadow: none;
}

.share-items-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}

.share-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-color);
}

.share-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.share-item-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
}

.share-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.share-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.share-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.share-item-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent-emerald);
}

.btn-share-remove {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  transition: transform 0.15s;
}

.btn-share-remove:hover {
  transform: scale(1.2);
}

.btn-share-item-buy {
  background: var(--accent-cyan, #06b6d4);
  color: #042f2e;
  border: none;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-share-item-buy:hover {
  background: #22d3ee;
  transform: translateY(-1px);
}

.btn-share-item-buy.in-cart {
  background: #059669;
  color: #ecfdf5;
  box-shadow: none;
}

.share-summary-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(236, 72, 153, 0.08);
  border: 1px solid rgba(236, 72, 153, 0.25);
  margin-bottom: 16px;
}

.share-summary-lbl {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.share-summary-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #f472b6;
}

.share-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-link-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
}

.btn-share-copy {
  background: #ec4899;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-share-copy:hover {
  background: #db2777;
  transform: translateY(-1px);
}

.btn-share-native-row {
  display: flex;
  gap: 8px;
}

.btn-share-native {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38bdf8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-share-native:hover {
  background: rgba(14, 165, 233, 0.22);
  border-color: #38bdf8;
}

.btn-share-qr-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-share-qr-toggle:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #34d399;
}

.btn-share-wishlist-toggle {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
  width: 100%;
}

.btn-share-wishlist-toggle:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
}

.share-wishlist-panel {
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-wishlist-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fbbf24;
}

.share-wishlist-text {
  font-size: 0.78rem;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.45;
}

.share-wishlist-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-wishlist-sms {
  flex: 1;
  min-width: 140px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-wishlist-sms:hover {
  background: #1d4ed8;
}

.btn-wishlist-swish-copy {
  flex: 1;
  min-width: 140px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-wishlist-swish-copy:hover {
  background: rgba(16, 185, 129, 0.25);
}

.btn-share-cart-all {
  background: var(--accent-emerald, #10b981);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
  width: 100%;
}

.btn-share-cart-all:hover {
  background: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.share-qr-box {
  margin-top: 10px;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border: 2px dashed #cbd5e1;
}

.share-qr-img {
  width: 190px;
  height: 190px;
  display: block;
}

.share-qr-hint {
  font-size: 0.76rem;
  color: #475569;
  font-weight: 600;
  max-width: 260px;
}

.fav-share-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(236, 72, 153, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.fav-share-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fav-share-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f472b6;
}

.fav-share-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.btn-fav-share-action {
  background: #ec4899;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-fav-share-action:hover {
  background: #db2777;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.shared-receiver-modal-card {
  max-width: 600px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.shared-receiver-header {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.shared-receiver-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.shared-receiver-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.btn-receiver-cart-all {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-receiver-cart-all:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.btn-receiver-sec-row {
  display: flex;
  gap: 8px;
}

.btn-receiver-fav-all {
  flex: 1;
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.3);
  color: #f472b6;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-receiver-fav-all:hover {
  background: rgba(236, 72, 153, 0.2);
  border-color: #f472b6;
}

.btn-receiver-explore {
  flex: 1;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: #38bdf8;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-receiver-explore:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: #38bdf8;
}

.btn-receiver-bag-all {
  flex: 1;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-align: center;
}

.btn-receiver-bag-all:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

.receiver-swish-gift-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.btn-reorder-item.in-cart {
  background: #059669;
  color: #ecfdf5;
  border-color: #10b981;
  box-shadow: none;
}

.customer-orders-cart-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.btn-customer-order-cart-go {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-customer-order-cart-go:hover {
  background: #059669;
}

/* ================= DISCGOLF GLOSSARY & LEXIKON ================= */
.btn-glossary-pill {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
  color: #818cf8;
}

.btn-glossary-pill:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: #818cf8;
  color: #818cf8;
}

.glossary-modal-card {
  max-width: 720px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.glossary-header {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.glossary-search-wrap {
  margin-bottom: 14px;
  position: relative;
}

.glossary-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px 10px 38px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.glossary-search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.glossary-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.95rem;
}

.glossary-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.btn-glossary-cat {
  background: var(--pill-bg, #f1f5f9);
  border: 1px solid var(--pill-border, #e2e8f0);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-glossary-cat:hover {
  color: var(--text-primary);
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

.btn-glossary-cat.active {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.glossary-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.glossary-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--card-shadow, 0 2px 8px rgba(0, 0, 0, 0.04));
  transition: border-color 0.2s, box-shadow 0.2s;
}

.glossary-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: var(--card-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.06));
}

.glossary-card.highlight {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.04);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.glossary-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.glossary-term-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.glossary-term-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

[data-theme="dark"] .glossary-term-badge {
  color: #a5b4fc;
  border-color: rgba(165, 180, 252, 0.3);
}

.glossary-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.glossary-desc strong {
  color: var(--text-primary);
  font-weight: 700;
}

.glossary-pro-tip {
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid #6366f1;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  color: var(--text-primary);
  margin-bottom: 14px;
  line-height: 1.5;
}

[data-theme="dark"] .glossary-pro-tip {
  background: rgba(99, 102, 241, 0.12);
  border-left-color: #818cf8;
  color: #e2e8f0;
}

.glossary-shelf-section {
  margin: 14px 0 12px 0;
  padding: 12px 14px;
  background: var(--bg-main, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

[data-theme="dark"] .glossary-shelf-section {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(99, 102, 241, 0.2);
}

.glossary-shelf-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.glossary-shelf-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
}

.glossary-shelf-discs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.glossary-disc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
}

[data-theme="dark"] .glossary-disc-chip {
  background: rgba(30, 41, 59, 0.6);
}

.glossary-disc-chip:hover {
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

.glossary-disc-chip.in-cart {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

.glossary-disc-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--image-wrap-bg, #f8fafc);
  flex-shrink: 0;
}

.glossary-disc-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glossary-disc-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glossary-disc-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.glossary-disc-nums {
  font-family: monospace;
  font-weight: 600;
  color: var(--accent-cyan);
}

.glossary-disc-shelf {
  color: var(--text-secondary);
}

.glossary-disc-stock {
  font-weight: 700;
  color: var(--accent-emerald, #10b981);
}

.glossary-disc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.glossary-disc-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.btn-glossary-buy {
  background: #10b981;
  color: #ffffff;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-glossary-buy:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-glossary-buy.in-cart {
  background: #047857;
}

.glossary-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
}

.glossary-molds-hint {
  color: var(--text-muted);
}

.glossary-molds-hint strong {
  color: var(--text-primary);
  font-weight: 700;
}

.glossary-bottom-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-glossary-subtle-link {
  background: var(--pill-bg, #f1f5f9);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-glossary-subtle-link:hover {
  color: #6366f1;
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

.btn-glossary-filter-store {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #6366f1;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-glossary-filter-store:hover {
  background: #6366f1;
  color: #ffffff;
}

/* ================= CROSS-BRAND DISC REPLACEMENT ================= */
.btn-replace-pill {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.btn-replace-pill:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: #fbbf24;
  color: #fbbf24;
}

.replacement-modal-card {
  max-width: 740px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.replacement-header {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.replacement-search-wrap {
  position: relative;
  margin-bottom: 14px;
}

.replacement-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px 10px 36px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}

.replacement-search-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: none;
}

.replacement-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.9rem;
}

.replacement-quick-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn-quick-disc-eq {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-quick-disc-eq:hover {
  color: var(--text-primary);
  border-color: #f59e0b;
}

.btn-quick-disc-eq.active {
  background: #f59e0b;
  color: #000000;
  font-weight: 800;
  border-color: #f59e0b;
  box-shadow: none;
}

.replacement-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.lost-disc-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-color);
}

.lost-disc-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fbbf24;
}

.lost-disc-spec {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(2, 6, 23, 0.5);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.lost-disc-role {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.matched-options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matched-disc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(2, 6, 23, 0.4);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
}

.matched-disc-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.matched-disc-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
}

.matched-disc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.matched-disc-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.matched-disc-reason {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.matched-disc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.matched-disc-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent-emerald);
}

.btn-matched-buy {
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.btn-matched-buy:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-matched-buy.in-cart {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: none;
}

.btn-matched-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-matched-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.matched-disc-actions-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-matched-bag,
.btn-matched-compare {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-matched-bag:hover,
.btn-matched-compare:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.btn-matched-bag.active {
  background: rgba(99, 102, 241, 0.25);
  border-color: #818cf8;
  color: #c7d2fe;
}

.btn-matched-compare.active {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fbbf24;
}

.btn-matched-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-matched-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-matched-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-matched-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.replacement-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.replacement-search-hint-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(16, 185, 129, 0.12));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.repl-hint-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.repl-hint-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fbbf24;
}

.repl-hint-desc {
  font-size: 0.78rem;
  color: var(--text-primary);
}

.btn-repl-view-all {
  background: #f59e0b;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-repl-view-all:hover {
  background: #d97706;
  transform: translateY(-1px);
}

/* ================= WIND SIMULATOR IN FLIGHT CURVE ================= */
.btn-wind-level {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-wind-level:hover {
  border-color: #38bdf8;
  color: var(--text-primary);
}

.btn-wind-level.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: none;
}

.btn-live-wind-sync {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-live-wind-sync:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-live-wind-sync:active {
  transform: scale(0.96);
}

.badge-wind-head {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.badge-wind-tail {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

/* ================= INFÖR RUNDAN: PACKLISTA & BAG-CHECK ================= */
.btn-checklist-pill {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.btn-checklist-pill:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: #34d399;
  color: #34d399;
}

.btn-cart-checklist {
  width: 100%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}

.btn-cart-checklist:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34d399;
}

.round-checklist-modal-card {
  max-width: 740px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.checklist-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}

.checklist-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-checklist-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-checklist-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-checklist-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-checklist-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.btn-checklist-start-round {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2)) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  font-weight: 800;
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-checklist-start-round:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(6, 182, 212, 0.35)) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.readiness-summary-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

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

.readiness-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.readiness-badge.ready-partial {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.readiness-badge.ready-full {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid #10b981;
  box-shadow: none;
}

.readiness-headline {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.readiness-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.35;
}

.btn-reset-checklist {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-reset-checklist:hover {
  color: var(--text-primary);
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}

.readiness-bar-wrap {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.readiness-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);
  border-radius: 999px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.readiness-bar-fill.bar-full {
  background: #10b981;
  box-shadow: none;
}

.checklist-items-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.checklist-item-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.02);
}

.checklist-item-card.is-completed {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.04);
}

.checklist-check-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.checklist-check-label input {
  display: none;
}

.custom-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid var(--border-color);
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.checklist-item-card.is-completed .custom-checkbox {
  background: #10b981;
  border-color: #10b981;
  box-shadow: none;
}

.checklist-item-info {
  flex: 1;
  min-width: 0;
}

.checklist-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.checklist-icon {
  font-size: 1.1rem;
}

.checklist-item-name {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.checklist-incart-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.checklist-packed-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.checklist-item-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.35;
}

.checklist-rec-text {
  font-size: 0.75rem;
  color: #38bdf8;
  margin-top: 2px;
}

.checklist-item-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 150px;
}

.btn-checklist-quick-buy {
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-checklist-quick-buy:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

.btn-checklist-quick-buy.in-cart {
  background: #059669;
  box-shadow: none;
}

.checklist-inbag-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.checklist-action-dual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: flex-end;
}

.btn-checklist-filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-checklist-filter-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #38bdf8;
  color: #38bdf8;
}

.checklist-ready-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding-right: 8px;
}

@media (max-width: 600px) {
  .checklist-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .checklist-item-action {
    width: 100%;
    justify-content: stretch;
  }
  .checklist-action-dual {
    align-items: stretch;
  }
  .btn-checklist-quick-buy,
  .btn-checklist-filter-btn {
    width: 100%;
    text-align: center;
  }
}

/* ================= RELEASE ANGLE SIMULATOR ================= */
.btn-angle-level {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-angle-level:hover {
  border-color: #a855f7;
  color: var(--text-primary);
}

.btn-angle-level.active {
  background: #9333ea;
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: none;
}

.badge-angle-hyzer {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

.badge-angle-anhyzer {
  background: rgba(236, 72, 153, 0.15) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(236, 72, 153, 0.35) !important;
}

/* ================= COURSE CADDY MATCH BADGE & QUICKVIEW ================= */
.badge-caddy-hole {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.badge-caddy-hole:hover {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: #34d399 !important;
  transform: scale(1.04);
}

.caddy-match-box {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 4px solid #10b981;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.caddy-match-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.caddy-match-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.caddy-match-hole {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
}

.caddy-match-name {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.caddy-match-advice {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}

.btn-caddy-view-hole {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-caddy-view-hole:hover {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.caddy-mini-traj-wrap {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.caddy-mini-traj-wrap:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.caddy-mini-traj-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.caddy-mini-traj-svg {
  width: 100%;
  height: 68px;
  display: block;
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.caddy-mini-traj-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 0.72rem;
}

.caddy-mini-traj-hint {
  color: #34d399;
  font-weight: 700;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.quick-view-sku-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.quick-view-sku-badge:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.quick-view-sku-badge:active {
  transform: scale(0.96);
}

.quick-view-sku-badge.copied {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #34d399 !important;
}

.btn-scorecard-pill {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

.btn-scorecard-pill:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

/* ================= VILHELMINA SCORECARD & RUNDA-COACH ================= */
.scorecard-modal-card {
  max-width: 760px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
}

.scorecard-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.scorecard-body {
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scorecard-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-scorecard-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-scorecard-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

/* Score Summary Hero */
.scorecard-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(2, 6, 23, 0.7) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.scorecard-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.scorecard-total-box {
  background: rgba(2, 6, 23, 0.85);
  border: 2px solid #10b981;
  border-radius: 12px;
  padding: 8px 16px;
  text-align: center;
  min-width: 90px;
}

.scorecard-total-num {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.scorecard-total-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #34d399;
  letter-spacing: 0.5px;
}

.scorecard-diff-badge {
  font-size: 1.15rem;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scorecard-diff-under {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid #10b981;
}

.scorecard-diff-even {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid #f59e0b;
}

.scorecard-diff-over {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid #ef4444;
}

.scorecard-stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scorecard-stat-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Holes Grid / Table */
.scorecard-holes-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scorecard-hole-card {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.2s;
}

.scorecard-hole-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
}

.scorecard-hole-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
}

.scorecard-hole-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scorecard-hole-details {
  display: flex;
  flex-direction: column;
}

.scorecard-hole-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.scorecard-hole-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.scorecard-stepper-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scorecard-btn-step {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.scorecard-btn-step:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  color: #ffffff;
}

.scorecard-score-value {
  min-width: 36px;
  height: 34px;
  font-size: 1.15rem;
  font-weight: 900;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
}

.scorecard-score-value.birdie {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
}

.scorecard-score-value.ace {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
  color: #fbbf24;
}

.scorecard-score-value.bogey {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #fbbf24;
}

.scorecard-score-value.double {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171;
}

.scorecard-score-value.par {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.scorecard-hole-quick {
  display: flex;
  gap: 4px;
}

.scorecard-pill-btn {
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.scorecard-pill-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.scorecard-pill-btn.active {
  background: #10b981;
  color: #020617;
  border-color: #10b981;
  font-weight: 900;
}

/* Caddy Coach Analysis Section */
.scorecard-coach-box {
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
}

.scorecard-coach-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 12px;
}

.scorecard-coach-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scorecard-coach-card {
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.scorecard-coach-text {
  flex: 1;
}

.scorecard-coach-hole-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scorecard-coach-desc {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-top: 2px;
  line-height: 1.35;
}

/* Scorecard Actions */
.scorecard-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.btn-scorecard-action {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  border: none;
}

.btn-scorecard-save {
  background: #10b981;
  color: #020617;
}

.btn-scorecard-save:hover {
  background: #34d399;
  transform: translateY(-1px);
}

.btn-scorecard-share {
  background: var(--accent-cyan);
  color: #020617;
}

.btn-scorecard-share:hover {
  background: #38bdf8;
  transform: translateY(-1px);
}

.btn-scorecard-reset {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.btn-scorecard-reset:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: #ef4444;
}

/* History */
.scorecard-history-box {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
}

.scorecard-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
}

.scorecard-history-item:last-child {
  border-bottom: none;
}

@media (max-width: 650px) {
  .scorecard-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .scorecard-actions-grid {
    grid-template-columns: 1fr;
  }
  .scorecard-hole-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .scorecard-hole-left {
    justify-content: space-between;
  }
  .scorecard-stepper-group {
    justify-content: space-between;
  }
  .scorecard-coach-card {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ================= HOLOGRAPHIC FOIL SHIMMER EFFECT ================= */
.card-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.card-image-wrap::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(56, 189, 248, 0.22) 45%,
    rgba(236, 72, 153, 0.18) 50%,
    rgba(251, 191, 36, 0.22) 55%,
    rgba(255, 255, 255, 0) 65%,
    transparent 100%
  );
  transform: rotate(-25deg) translateY(120%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.product-card:hover .card-image-wrap::after {
  transform: rotate(-25deg) translateY(-120%);
  opacity: 1;
}

/* ================= FRISKVÅRDSKVITTO & FÖRETAGSUNDERLAG ================= */
.receipt-wellness-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
  text-align: left;
}

.wellness-receipt-badge {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: left;
}

.wellness-badge-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wellness-badge-row {
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.35;
}

.admin-receipt-btn {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--accent-cyan);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  font-family: inherit;
}

.admin-receipt-btn:hover {
  background: var(--accent-cyan);
  color: #020617;
  border-color: var(--accent-cyan);
}

/* ================= CUSTOMER ORDERS & RE-ORDER MODAL ================= */
.btn-customer-orders-header {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-customer-orders-header:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34d399;
  transform: translateY(-1px);
}

.btn-cart-history {
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: all 0.2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-cart-history:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.05);
}

.customer-orders-modal-card {
  max-width: 680px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
}

.customer-orders-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.customer-orders-body {
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-orders-search-wrap {
  position: relative;
  margin-bottom: 14px;
}

.customer-orders-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 10px 38px 10px 38px;
  color: var(--text-primary, #0f172a);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.customer-orders-search-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.customer-orders-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--text-muted);
  pointer-events: none;
}

.btn-clear-orders-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}

.btn-clear-orders-search:hover {
  color: var(--text-primary);
}

.customer-orders-empty-state {
  text-align: center;
  padding: 36px 16px;
  background: var(--bg-card, #ffffff);
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  margin: 10px 0;
}

.btn-customer-orders-reset {
  background: var(--pill-bg, #f1f5f9);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-customer-orders-reset:hover {
  background: var(--accent-emerald, #10b981);
  color: #ffffff;
  border-color: #10b981;
}

.customer-orders-count-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.customer-orders-count-hint strong {
  color: var(--text-primary);
}

.customer-orders-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.customer-order-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--card-shadow, 0 2px 8px rgba(0, 0, 0, 0.04));
  transition: border-color 0.2s, box-shadow 0.2s;
}

.customer-order-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: var(--card-shadow-hover, 0 4px 14px rgba(0, 0, 0, 0.08));
}

.customer-order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-order-id-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-order-id {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(2, 132, 199, 0.25);
  letter-spacing: 0.5px;
}

[data-theme="dark"] .customer-order-id {
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.3);
}

.customer-order-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.customer-order-phone-tag {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--pill-bg, #f1f5f9);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.customer-order-total-group {
  display: flex;
  align-items: center;
}

.customer-order-total {
  font-size: 1.15rem;
  font-weight: 800;
  color: #10b981;
}

.customer-order-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
}

.customer-order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.customer-order-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.customer-order-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--image-wrap-bg, #f8fafc);
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.15s;
}

.customer-order-img:hover {
  transform: scale(1.05);
}

.customer-order-item-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customer-order-item-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.customer-order-item-name:hover {
  color: #10b981;
}

.customer-order-item-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.73rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.customer-order-shelf {
  color: #0284c7;
  font-weight: 600;
}

[data-theme="dark"] .customer-order-shelf {
  color: var(--accent-cyan);
}

.customer-order-stock-tag {
  font-size: 0.72rem;
  font-weight: 600;
}

.customer-order-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.customer-order-item-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.btn-customer-item-reorder {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-customer-item-reorder:hover {
  background: #10b981;
  color: #ffffff;
}

.btn-customer-item-reorder.in-cart {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
}

.customer-order-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.customer-order-vat {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.customer-order-vat strong {
  color: var(--text-secondary);
}

.customer-order-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-customer-receipt-view {
  flex: 1;
  min-width: 140px;
  background: var(--pill-bg, #f1f5f9);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  font-family: inherit;
}

.btn-customer-receipt-view:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: #6366f1;
  color: #6366f1;
}

.btn-customer-receipt-pdf {
  flex: 1;
  min-width: 130px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #0284c7;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  font-family: inherit;
}

[data-theme="dark"] .btn-customer-receipt-pdf {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
  color: var(--accent-cyan);
}

.btn-customer-receipt-pdf:hover {
  background: #0284c7;
  color: #ffffff;
}

.btn-customer-order-reorder-all {
  flex: 1;
  min-width: 150px;
  background: #10b981;
  border: 1px solid #10b981;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  font-family: inherit;
}

.btn-customer-order-reorder-all:hover {
  background: #059669;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* Weight badges */
.badge-weight-heavy {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: var(--accent-cyan) !important;
}

.badge-weight-med {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

.badge-weight-light {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

/* Arm Speed & Distance Matcher */
.arm-speed-modal-card {
  max-width: 680px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  text-align: left;
}

.arm-speed-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-right: 36px;
}

.arm-speed-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arm-speed-bracket-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.arm-speed-bracket-btn {
  flex: 1;
  min-width: 105px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px 8px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.arm-speed-bracket-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
  background: rgba(56, 189, 248, 0.06);
}

.arm-speed-bracket-btn.active {
  background: rgba(56, 189, 248, 0.16);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: none;
}

.arm-speed-bracket-btn .bracket-dist {
  font-size: 0.88rem;
  font-weight: 800;
}

.arm-speed-bracket-btn .bracket-sub {
  font-size: 0.68rem;
  opacity: 0.85;
}

.arm-speed-hero-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arm-speed-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.arm-speed-hero-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.arm-speed-why-box {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.arm-speed-disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.arm-speed-disc-card {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.arm-speed-disc-card:hover {
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.06);
}

.arm-speed-disc-card.in-user-bag {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 6, 23, 0.5) 100%);
}

.arm-speed-disc-card.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 6, 23, 0.55) 100%);
}

.arm-speed-bag-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin-top: 8px;
}

.arm-speed-bag-badge.in-cart {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.14));
  border-color: rgba(16, 185, 129, 0.5);
}

.arm-speed-bag-badge.gap {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(239, 68, 68, 0.08));
  border-color: rgba(245, 158, 11, 0.4);
}

.btn-arm-gap-fill {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-arm-gap-fill:hover {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.arm-speed-disc-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  cursor: pointer;
}

.arm-speed-disc-info {
  flex: 1;
  min-width: 0;
}

.arm-speed-disc-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.arm-speed-disc-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arm-speed-disc-btn {
  background: var(--accent-emerald);
  color: #020617;
  border: none;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
}

.arm-speed-disc-btn:hover {
  background: #34d399;
  transform: translateY(-1px);
}

.arm-speed-disc-btn.in-cart {
  background: #059669;
  color: #ffffff;
}

.arm-speed-disc-btn.in-cart:hover {
  background: #10b981;
}

.btn-arm-speed-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
}

.btn-arm-speed-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-arm-speed-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
}

.btn-arm-speed-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.arm-speed-ecosystem-bar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Arm Speed Power Meter (QuickView) */
.arm-speed-meter-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
}

.arm-speed-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.arm-speed-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}

.arm-speed-progress-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0;
}

.arm-speed-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.arm-speed-meter-advice {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 6px;
}

.btn-arm-speed-open {
  background: none;
  border: none;
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  margin-top: 6px;
  font-family: inherit;
  display: inline-block;
}

.btn-arm-speed-open:hover {
  color: #38bdf8;
}

/* Header Live Weather Badge */
.header-weather-badge {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.header-weather-badge:hover {
  background: rgba(14, 165, 233, 0.22);
  border-color: var(--accent-cyan);
  box-shadow: none;
  transform: translateY(-1px);
}

/* Vilhelmina Live Weather Radar Box (Wind Master) */
.vilhelmina-weather-live-box {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.75));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  text-align: left;
}

.weather-live-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.weather-live-pulse-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  animation: none;
}

/* keyframes weatherPulse removed */

.weather-live-advice {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--accent-cyan);
  padding: 8px 10px;
  border-radius: 0 8px 8px 0;
}

/* ================= FLIGHT NUMBERS FILTER MODAL ================= */
.flight-filter-modal-card {
  max-width: 840px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
}

.flight-filter-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 36px;
}

.flight-filter-body {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.flight-filter-section {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.7));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flight-filter-sec-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}

.flight-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flight-chip-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.flight-chip-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.flight-chip-btn.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: none;
}

.btn-flight-filter-pill {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--accent-cyan);
}

.btn-flight-filter-pill:hover {
  background: rgba(56, 189, 248, 0.22);
}

.pill-flight-filter {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: var(--accent-cyan) !important;
  font-weight: 700 !important;
}

.pill-flight-filter:hover {
  background: rgba(56, 189, 248, 0.22) !important;
}

.flight-match-preview-card {
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flight-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}

.flight-preview-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.2s ease;
}

.flight-preview-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(56, 189, 248, 0.3);
}

.flight-preview-item.in-cart {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.flight-preview-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.flight-preview-img:hover {
  transform: scale(1.08);
}

.flight-preview-actions {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-flight-preview-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
}

.btn-flight-preview-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.btn-flight-preview-action.btn-flight-bag.active {
  background: rgba(234, 179, 8, 0.18);
  border-color: #eab308;
  color: #fbbf24;
}

.btn-flight-preview-action.btn-flight-compare.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}

.btn-flight-preview-buy {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.btn-flight-preview-buy:hover {
  background: rgba(16, 185, 129, 0.3);
  color: #fff;
}

.btn-flight-preview-buy.in-cart {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #6ee7b7;
}

.btn-flight-preview-buy.btn-flight-backup {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.btn-flight-preview-buy.btn-flight-backup:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #fff;
}

.btn-flight-preview-action.btn-flight-matrix-item {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.btn-flight-preview-action.btn-flight-matrix-item:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.btn-flight-preview-action.btn-flight-caddy-item {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.btn-flight-preview-action.btn-flight-caddy-item:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  transform: translateY(-1px);
}

.flight-filter-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-flight-matrix-shortcut:hover {
  background: rgba(56, 189, 248, 0.25) !important;
}

.btn-flight-caddy-shortcut:hover {
  background: rgba(16, 185, 129, 0.25) !important;
}

/* ================= MOLD VARIANTS SELECTOR ================= */
.mold-variants-box {
  background: var(--input-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 12px;
  margin: 14px 0 10px;
}

.mold-variants-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.mold-variants-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-mold-view-all {
  background: none;
  border: none;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
}

.mold-variants-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.mold-variant-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  padding: 6px 8px;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.mold-variant-card:hover {
  border-color: var(--accent-cyan);
}

.mold-variant-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.mold-variant-details {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.mold-variant-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mold-variant-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-mold-variant-buy {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: transform 0.15s ease;
}

.btn-mold-variant-buy:hover {
  transform: scale(1.05);
}

.mold-variant-card.in-cart {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--card-bg, #ffffff) 100%);
}

.btn-mold-variant-buy.in-cart {
  background: #059669;
}

.badge-variants-clickable {
  background: rgba(147, 51, 234, 0.12) !important;
  color: #a855f7 !important;
  border: 1px solid rgba(147, 51, 234, 0.35) !important;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.badge-variants-clickable:hover {
  transform: scale(1.05);
  background: rgba(147, 51, 234, 0.22) !important;
}

[data-theme="dark"] .badge-variants-clickable {
  color: #c084fc !important;
  background: rgba(147, 51, 234, 0.18) !important;
}

/* ================= ACTIVE FILTERS BAR & ZERO RESULTS ASSISTANT ================= */
.active-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--input-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 16px 0;
  font-size: 0.78rem;
}

.active-filters-label {
  font-weight: 800;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.active-filters-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  font-weight: 800;
  transition: color 0.15s ease;
}

.btn-chip-remove:hover {
  color: #ef4444;
}

.btn-reset-all-filters {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s ease;
  margin-left: auto;
}

.btn-reset-all-filters:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Zero Results Assistant Card */
.zero-results-card {
  grid-column: 1 / -1;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.zero-results-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
}

.zero-results-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.zero-results-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.zero-results-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.btn-reset-hero {
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  border-radius: 8px;
}

.zero-recommendations-section {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 20px;
}

.zero-rec-heading {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.zero-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.zero-rec-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.zero-rec-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan);
}

.zero-rec-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.zero-rec-info {
  flex: 1;
  min-width: 0;
}

.zero-rec-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zero-rec-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-zero-rec-buy {
  background: var(--accent-emerald, #10b981);
  color: #ffffff;
  border: none;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: transform 0.15s ease;
}

.btn-zero-rec-buy:hover {
  transform: scale(1.06);
}

/* ================= CART BAG SLOTS ANALYZER ================= */

.cart-bag-slots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cart-bag-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cart-slot-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--card-bg, #ffffff);
  cursor: default;
  transition: all 0.15s ease;
  font-family: inherit;
}

.cart-slot-chip.filled {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.cart-slot-chip.empty {
  border-style: dashed;
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.04);
  cursor: pointer;
}

.cart-slot-chip.in-bag {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.08);
  cursor: pointer;
}

.cart-slot-chip.in-bag:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

.cart-slot-chip.empty:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  transform: translateY(-1px);
}

.slot-chip-name {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.slot-chip-status {
  font-size: 0.68rem;
  font-weight: 800;
  margin-top: 2px;
}

.cart-slot-chip.filled .slot-chip-status {
  color: var(--accent-emerald, #10b981);
}

.cart-slot-chip.in-bag .slot-chip-status {
  color: #818cf8;
}

.cart-slot-chip.empty .slot-chip-status {
  color: var(--accent-cyan, #06b6d4);
}

/* ================= WEIGHT BADGE CLICKABLE ================= */
.badge-weight-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.badge-weight-clickable:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

/* ================= CART ADD INTERACTIVE SNACKBAR (REBUILT SLEEK TOAST) ================= */
.cart-snackbar {
  position: fixed;
  top: 80px;
  right: 24px;
  left: auto;
  transform: translateY(-16px);
  width: 390px;
  max-width: calc(100vw - 32px);
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-snackbar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cart-snackbar-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.cart-snackbar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.cart-snackbar-thumb-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--input-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.cart-snackbar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-snackbar-title-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-snackbar-badge-check {
  font-size: 0.66rem;
  font-weight: 800;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cart-snackbar-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.cart-snackbar-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-snackbar-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cart-snackbar-shelf-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-cyan, #38bdf8);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: inherit;
}

.cart-snackbar-shelf-tag:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}

.btn-snackbar-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted, #94a3b8);
  font-size: 1.15rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-snackbar-close:hover {
  color: #ffffff;
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}

.cart-snackbar-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}

.cart-snackbar-total strong {
  color: var(--accent-emerald, #10b981);
}

.cart-snackbar-reward {
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
}

.cart-snackbar-addon-row {
  display: flex;
  gap: 6px;
  width: 100%;
}

.btn-snackbar-addon-chip {
  width: 100%;
  background: rgba(56, 189, 248, 0.08);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  color: var(--accent-cyan, #38bdf8);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-snackbar-addon-chip:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

.btn-snackbar-addon-chip.highlight {
  background: rgba(16, 185, 129, 0.12);
  border: 1px dashed rgba(16, 185, 129, 0.45);
  color: #10b981;
}

.btn-snackbar-addon-chip.highlight:hover {
  background: rgba(16, 185, 129, 0.25);
  color: #ffffff;
}

.cart-snackbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-snackbar-undo {
  background: transparent;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  color: var(--text-muted, #cbd5e1);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-snackbar-undo:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fca5a5;
}

.btn-snackbar-swish {
  flex: 1;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-snackbar-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.btn-snackbar-checkout {
  flex: 1;
  background: #10b981;
  border: 1px solid #10b981;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-snackbar-checkout:hover {
  background: #059669;
  transform: translateY(-1px);
}

.cart-snackbar-timer-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  width: 100%;
}

.cart-snackbar-timer-fill {
  height: 100%;
  width: 100%;
  background: #10b981;
}

@media (max-width: 640px) {
  .cart-snackbar {
    top: auto !important;
    bottom: 74px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    transform: translateY(16px) !important;
  }
  .cart-snackbar.visible {
    transform: translateY(0) !important;
  }
}

/* ================= RECENTLY VIEWED SHELF ================= */
.recently-viewed-container {
  margin-bottom: 24px;
}

.recently-viewed-box {
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.recently-viewed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.recently-viewed-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.recently-viewed-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-clear-recent {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-clear-recent:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.recently-viewed-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.recently-viewed-track::-webkit-scrollbar {
  height: 4px;
}

.recently-viewed-track::-webkit-scrollbar-thumb {
  background: var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 999px;
}

.recent-disc-card {
  flex: 0 0 150px;
  background: var(--input-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
}

.recent-disc-card:hover {
  border-color: var(--accent-cyan, #06b6d4);
  transform: translateY(-2px);
  background: rgba(6, 182, 212, 0.04);
}

.recent-disc-img-wrap {
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
}

.recent-disc-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.recent-disc-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-disc-plastic {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.recent-disc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.recent-disc-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-recent-buy {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--accent-emerald, #10b981);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-recent-buy:hover {
  background: #10b981;
  color: #ffffff;
}

/* QuickView Bottom Recent Switcher */
.quick-recent-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.12));
}

.quick-recent-header {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-recent-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.quick-recent-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-recent-chip:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.08);
  transform: translateY(-1px);
}

.quick-recent-chip-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.quick-recent-chip-name {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
}

.quick-recent-chip-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-emerald, #10b981);
}

/* ================= CART EMPTY RECOMMENDATIONS ================= */
.cart-empty-recs {
  margin-top: 18px;
  padding: 12px;
  background: var(--input-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  text-align: left;
}

.cart-empty-recs-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.cart-empty-recs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-empty-rec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.cart-empty-rec-item:hover {
  border-color: var(--accent-cyan);
}

.cart-empty-rec-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  cursor: pointer;
  flex-shrink: 0;
}

.cart-empty-rec-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.cart-empty-rec-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-empty-rec-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.btn-cart-empty-add {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--accent-emerald, #10b981);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.btn-cart-empty-add:hover {
  background: #10b981;
  color: #ffffff;
}

/* Receipt Course Caddy Banner */
.receipt-course-cta-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(14, 165, 233, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 12px;
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.receipt-course-cta-box:hover {
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.receipt-course-cta-left {
  flex: 1;
  min-width: 0;
}

.receipt-course-cta-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-emerald);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.receipt-course-cta-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 3px;
}

.receipt-course-cta-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

.btn-receipt-caddy-open {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.btn-receipt-caddy-open:hover {
  transform: scale(1.04);
}

/* ================= RECEIPT ACTIONS & VERIFIED BARCODE STAMP ================= */
.receipt-actions-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 480px) {
  .receipt-actions-row {
    grid-template-columns: 1fr;
  }
}

.btn-receipt-sms {
  background: #10b981 !important;
  color: #020617 !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-receipt-sms:hover {
  background: #34d399 !important;
  transform: translateY(-1px);
}

.receipt-verify-container {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  text-align: center;
}

.receipt-barcode-visual {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  letter-spacing: 4px;
  font-size: 0.95rem;
  color: var(--text-muted);
  user-select: none;
}

.receipt-barcode-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  color: var(--accent-cyan);
  font-weight: 700;
  margin-top: 2px;
}

.receipt-badge-pill {
  font-size: 0.7rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.5px;
  margin-top: 4px;
  display: inline-block;
}

/* ================= CADDY ELEVATION & PLAYS-LIKE SIMULATOR ================= */
.caddy-plays-like-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-wrap: wrap;
}

.caddy-elevation-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.caddy-elevation-up {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.caddy-elevation-down {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.caddy-elevation-flat {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.caddy-plays-like-val {
  font-size: 0.82rem;
  color: var(--text-primary);
}

.caddy-plays-like-val strong {
  color: var(--accent-emerald);
  font-size: 0.95rem;
}

.caddy-diff-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ================= CART CLEAR WITH UNDO & REORDER ALL ================= */
.btn-cart-clear-muted {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.65;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-cart-clear-muted:hover {
  opacity: 1;
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
}

.cart-undo-restore-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
}

.btn-cart-restore {
  background: var(--accent-emerald, #10b981);
  color: #020617;
  font-weight: 800;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-cart-restore:hover {
  background: #34d399;
  transform: scale(1.03);
}

.btn-customer-reorder-all {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-customer-reorder-all:hover {
  background: #10b981;
  color: #ffffff;
}

/* ================= CART OUT-OF-STOCK ALTERNATIVE RECOMMENDER ================= */
.cart-item-out-of-stock {
  border-left: 3px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.05) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin-bottom: 2px !important;
}

.img-out-of-stock {
  filter: grayscale(85%) opacity(0.65);
}

.name-out-of-stock {
  color: #f87171 !important;
}

.cart-item-oos-badge {
  display: inline-block;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.cart-oos-alternative-panel {
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oos-warning-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.oos-warning-text {
  font-size: 0.75rem;
  color: #fca5a5;
  font-weight: 600;
}

.btn-oos-remove {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-oos-remove:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ffffff;
}

.oos-suggest-box {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
}

.oos-suggest-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 5px;
}

.oos-suggest-stock {
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 700;
}

.oos-suggest-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oos-suggest-img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  flex-shrink: 0;
}

.oos-suggest-details {
  flex: 1;
  min-width: 0;
}

.oos-suggest-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.oos-suggest-title:hover {
  color: #38bdf8;
}

.oos-suggest-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.btn-oos-swap {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  flex-shrink: 0;
}

.btn-oos-swap:hover {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  transform: scale(1.02);
}

/* ================= GARAGE QUICK BARCODE & SKU SCANNER ================= */
.btn-scanner-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: var(--accent-emerald, #10b981);
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.btn-scanner-header:hover {
  background: var(--accent-emerald, #10b981);
  color: #020617;
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .btn-scanner-header {
  color: #34d399;
}

.flow-quick-scan-badge {
  display: inline-block;
  font-size: 0.65rem;
  background: rgba(16, 185, 129, 0.18);
  color: var(--accent-emerald, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.btn-scanner-pill {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12)) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: var(--accent-emerald, #10b981) !important;
}

.barcode-scanner-modal-card {
  max-width: 580px;
  width: 95%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 22px;
}

.scanner-modal-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  padding-right: 32px;
}

.scanner-ecosystem-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scanner-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.scanner-tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.scanner-tab.active {
  background: var(--card-bg);
  color: var(--accent-emerald, #10b981);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.scanner-view-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scanner-camera-container {
  position: relative;
  width: 100%;
  height: 230px;
  background: #090d16;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.scanner-video-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-reticle {
  position: absolute;
  width: 65%;
  max-width: 260px;
  height: 140px;
  border: 1px dashed rgba(6, 182, 212, 0.5);
  border-radius: 8px;
  pointer-events: none;
}

.reticle-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #10b981;
  border-style: solid;
}

.reticle-corner.top-left {
  top: -2px;
  left: -2px;
  border-width: 3px 0 0 3px;
  border-top-left-radius: 6px;
}

.reticle-corner.top-right {
  top: -2px;
  right: -2px;
  border-width: 3px 3px 0 0;
  border-top-right-radius: 6px;
}

.reticle-corner.bottom-left {
  bottom: -2px;
  left: -2px;
  border-width: 0 0 3px 3px;
  border-bottom-left-radius: 6px;
}

.reticle-corner.bottom-right {
  bottom: -2px;
  right: -2px;
  border-width: 0 3px 3px 0;
  border-bottom-right-radius: 6px;
}

.scanner-laser {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, #06b6d4, transparent);
  box-shadow: none;
  animation: none;
}

/* keyframes scanLaser removed */

.reticle-text {
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.scanner-cam-controls {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.btn-cam-control {
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-cam-control:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--accent-cyan);
}

.scanner-status-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  padding: 2px 4px;
}

/* Keypad View */
.keypad-input-wrap {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 2px solid var(--accent-emerald, #10b981);
  border-radius: 10px;
  padding: 4px 12px;
  gap: 8px;
  box-shadow: none;
}

.keypad-sku-prefix {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--accent-emerald, #10b981);
  font-family: monospace;
  letter-spacing: 1px;
}

.keypad-sku-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 800;
  outline: none;
  font-family: monospace;
  letter-spacing: 2px;
  min-width: 0;
}

.keypad-clear-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.keypad-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: -2px;
}

.scanner-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.num-key {
  padding: 12px 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.num-key:active {
  transform: scale(0.96);
  background: rgba(16, 185, 129, 0.2);
}

.num-key:hover {
  background: var(--border-color);
}

.num-action-clear {
  color: #ef4444;
  font-size: 1.1rem;
}

.num-action-back {
  color: var(--accent-cyan);
  font-size: 1.1rem;
}

/* Simulator Presets */
.sim-header-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.sim-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sim-preset-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}

.sim-preset-btn:hover {
  border-color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.08);
  transform: translateY(-1px);
}

.sim-sku {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-cyan);
  font-family: monospace;
}

.sim-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-shelf {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.sim-random-btn {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(16, 185, 129, 0.12));
  border-color: rgba(6, 182, 212, 0.4);
  text-align: center;
  align-items: center;
}

.sim-random-btn:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(16, 185, 129, 0.2));
}

/* Scanned Result Section */
.scanner-result-section {
  margin-top: 10px;
  min-height: 120px;
  overflow-y: auto;
  max-height: 270px;
  padding-right: 2px;
}

.scanner-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px dashed var(--border-color);
}

.scanner-no-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.scanned-card-box {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-emerald, #10b981);
  border-radius: 10px;
  padding: 12px;
  position: relative;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.15);
  animation: scanPop 0.25s ease-out;
}

@keyframes scanPop {
  0% { transform: scale(0.97); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.scanned-card-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-emerald, #10b981);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.scanned-card-grid {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.scanned-card-img-wrap {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scanned-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.scanned-img-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-weight: 600;
  padding: 1px 0;
}

.scanned-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scanned-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.scanned-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scanned-card-brand {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.scanned-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.7rem;
}

.badge-sku {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  font-family: monospace;
}

.scanned-card-flight {
  display: flex;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.scanned-card-shelf {
  margin-top: 2px;
}

.scanned-card-pricing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 4px;
}

.scanned-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-emerald, #10b981);
}

.scanned-stock.stock-ok {
  font-size: 0.75rem;
  color: var(--accent-emerald, #10b981);
  font-weight: 700;
}

.scanned-stock.stock-empty {
  font-size: 0.75rem;
  color: #ef4444;
  font-weight: 700;
}

.scanned-incart-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.scanned-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-scan-add-cart {
  flex: 2;
  min-width: 140px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
}

.btn-scan-add-cart:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn-scan-add-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #64748b;
}

.btn-scan-quickview {
  flex: 1;
  min-width: 110px;
  padding: 9px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-scan-quickview:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-scan-bag-toggle {
  flex: 1;
  min-width: 110px;
  padding: 9px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-scan-bag-toggle:hover {
  border-color: #818cf8;
  color: #818cf8;
}

.btn-scan-bag-toggle.in-bag {
  background: rgba(99, 102, 241, 0.16);
  border-color: #818cf8;
  color: #818cf8;
  box-shadow: none;
}

.btn-scan-add-cart.in-cart {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: none;
}

.btn-scan-compare-toggle {
  flex: 1;
  min-width: 95px;
  padding: 9px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-scan-compare-toggle:hover {
  border-color: #38bdf8;
  color: #38bdf8;
}

.btn-scan-compare-toggle.in-compare {
  background: rgba(56, 189, 248, 0.16);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: none;
}

.btn-scan-matrix {
  flex: 1;
  min-width: 90px;
  padding: 9px 10px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-cyan);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-scan-matrix:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--accent-cyan);
}

.scanned-caddy-match {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  transition: all 0.15s ease;
}

.scanned-caddy-match:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
}

.scanned-tactical-tip {
  background: rgba(15, 23, 42, 0.45);
  border-left: 3px solid var(--accent-cyan);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  font-size: 0.74rem;
  color: var(--text-primary);
  margin-top: 6px;
  line-height: 1.35;
}

.scanned-bag-insight {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  line-height: 1.35;
}

.scanned-bag-insight.gap_filler {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}

.scanned-bag-insight.in_bag {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #818cf8;
}

.scanned-bag-insight.mold_in_bag {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

.scanned-bag-insight.slot_covered {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.scanned-bag-insight.bag_empty {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  color: #38bdf8;
}

.scanned-reward-nudge {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.73rem;
  line-height: 1.3;
  font-weight: 600;
}

.scanned-reward-nudge.gold {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.scanned-reward-nudge.emerald {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.scanned-reward-nudge.cyan {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38bdf8;
}

/* Scanner Modal Footer */
.scanner-modal-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.scanner-footer-cart-info {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.scanner-footer-cart-info strong {
  color: var(--text-primary);
}

.btn-scanner-checkout {
  padding: 7px 14px;
  background: linear-gradient(135deg, #0284c7, #06b6d4);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-scanner-checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

/* ================= BUNDLE SYNERGY & BAG BALANCE ================= */
.bundle-synergy-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bundle-synergy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bundle-synergy-score-pill {
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.18);
  color: var(--accent-emerald, #10b981);
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.bundle-synergy-meter-track {
  width: 100%;
  height: 6px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.bundle-synergy-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #10b981);
  border-radius: 3px;
  transition: width 0.25s ease;
}

.bundle-synergy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.synergy-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.synergy-chip.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--accent-cyan);
  opacity: 1;
}

.bundle-synergy-advice {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
}

/* ================= QUICKVIEW ARM SPEED SIMULATOR ================= */
.qv-arm-selector-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin: 8px 0 6px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.qv-arm-btn {
  flex: 1;
  min-width: 56px;
  padding: 5px 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.qv-arm-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.qv-arm-btn.active {
  background: rgba(6, 182, 212, 0.18);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 800;
  box-shadow: 0 1px 6px rgba(6, 182, 212, 0.25);
}

.qv-arm-advice-box {
  background: rgba(6, 182, 212, 0.08);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
}

/* ================= COURSE CADDY HOLE-KIT BANNER ================= */
.caddy-hole-kit-banner {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(16, 185, 129, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.caddy-hole-kit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.caddy-kit-bonus {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-emerald, #10b981);
}

.caddy-hole-kit-banner.kit-in-cart {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.1));
}

.btn-caddy-kit-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-caddy-kit-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.btn-caddy-kit-swish:active {
  transform: translateY(0);
}

/* ================= BAG AUDIT BACKPACK SHOWCASE ================= */
.bag-audit-backpack-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bag-audit-backpack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.bag-audit-backpack-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bag-audit-backpack-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 2px 0 0 0;
}

.btn-bag-audit-see-all-gear {
  background: rgba(56, 189, 248, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-bag-audit-see-all-gear:hover {
  background: rgba(56, 189, 248, 0.22);
  transform: translateY(-1px);
}

.bag-audit-backpack-subtitle {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

.bag-audit-backpack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.bag-audit-bp-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.bag-audit-bp-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.bp-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bp-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.bp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.bp-brand {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.bp-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-feature {
  font-size: 0.7rem;
  color: #38bdf8;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-stock {
  font-size: 0.68rem;
  color: var(--accent-emerald);
  font-weight: 700;
}

.bp-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}

.bp-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-buy-bp {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-buy-bp:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.btn-bp-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-bp-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

/* ================= CART BUNDLE BOOSTER BOX ================= */

.cart-bb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-bb-badge {
  font-size: 0.66rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-bb-save {
  font-size: 0.68rem;
  font-weight: 700;
  color: #f59e0b;
}

.cart-bb-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.cart-bb-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.btn-cart-bb-open {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  flex: 1;
}

.btn-cart-bb-open:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

/* ================= CART BACKPACK UPSELL TEASER ================= */
.cart-backpack-upsell-teaser {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.08));
  border: 1px solid rgba(14, 165, 233, 0.35);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-bp-teaser-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-bp-badge {
  font-size: 0.66rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-bp-shelf {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

.cart-bp-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.cart-bp-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.cart-bp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.btn-cart-bp-add {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  flex: 1;
}

.btn-cart-bp-add:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  transform: translateY(-1px);
}

.btn-cart-bp-view {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-cart-bp-view:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ================= BOXED STARTER SETS SHOWCASE ================= */
.bundle-boxed-sets-strip {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bundle-boxed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.bundle-boxed-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bundle-boxed-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 2px;
}

.bundle-boxed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.bundle-boxed-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.bundle-boxed-card:hover {
  border-color: #f59e0b;
  transform: translateY(-1px);
}

.bundle-boxed-card.in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--input-bg) 100%);
}

.bundle-boxed-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  flex: 1;
}

.bundle-boxed-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.bundle-boxed-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.bundle-boxed-brand {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.bundle-boxed-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-boxed-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-boxed-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.bundle-boxed-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fbbf24;
}

.btn-buy-boxed-set {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000000;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-buy-boxed-set:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
}

.btn-buy-boxed-set.in-cart {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.btn-boxed-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-boxed-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

/* ================= SET HERO BANNER & CARD PILL ================= */

.set-hero-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.set-hero-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.set-hero-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.set-hero-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.set-hero-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.set-card-contents-pill {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.set-card-contents-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.02em;
}

.set-card-contents-molds {
  font-size: 0.72rem;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.25;
}

/* ================= BAG AUDIT WEIGHT & ERGONOMICS CALCULATOR ================= */
.bag-audit-weight-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.baw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.baw-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.baw-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 700;
}

.baw-title strong {
  color: var(--accent-cyan);
}

.baw-pack-est {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.baw-pack-est strong {
  color: var(--text-primary);
}

.baw-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.baw-bars {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.baw-pill {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.baw-pill strong {
  color: var(--text-primary);
}

.baw-pill-light {
  border-color: rgba(52, 211, 153, 0.3);
}

.baw-pill-light strong {
  color: #34d399;
}

.baw-pill-mid {
  border-color: rgba(56, 189, 248, 0.3);
}

.baw-pill-mid strong {
  color: #38bdf8;
}

.baw-pill-heavy {
  border-color: rgba(168, 85, 247, 0.3);
}

.baw-pill-heavy strong {
  color: #c084fc;
}

.baw-tip {
  font-size: 0.74rem;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.6);
  border-left: 3px solid var(--accent-cyan);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  line-height: 1.35;
}

/* ================= PUTTER HERO BANNER ================= */
.putter-hero-banner {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.phb-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.phb-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.phb-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.phb-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.phb-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.btn-phb-basket {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-phb-basket:hover {
  background: #f59e0b;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* ================= PUTTER & APPROACH MASTERY RADAR ================= */
.putter-mastery-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.pm-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 1px;
}

.pm-bead-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
}

.pm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 500px) {
  .pm-grid {
    grid-template-columns: 1fr;
  }
}

.pm-slot {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
}

.pm-val {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 800;
}

.pm-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.pm-duo-cta {
  background: rgba(6, 182, 212, 0.08);
  border: 1px dashed rgba(6, 182, 212, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-duo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-duo-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pm-duo-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.btn-pm-add-duo {
  background: var(--accent-cyan);
  color: #000000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-pm-add-duo:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.btn-pm-add-duo:active {
  transform: scale(0.96);
}

.pm-duo-cta.in-cart {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.45);
}

.btn-pm-add-duo.in-cart {
  background: #059669;
  color: #ffffff;
}

.btn-pm-add-duo.in-cart:hover {
  background: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* ================= DISTANCE DRIVER AERO & POWER DIAGNOSTIC ================= */
.driver-aero-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.dab-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: #c084fc;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dab-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 1px;
}

.dab-speed-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f472b6;
  background: rgba(244, 114, 182, 0.15);
  border: 1px solid rgba(244, 114, 182, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
}

.dab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 500px) {
  .dab-grid {
    grid-template-columns: 1fr;
  }
}

.dab-slot {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dab-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
}

.dab-val {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 800;
}

.dab-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ================= CATALOG HERO BANNERS: DISTANCE, FAIRWAY, MIDRANGE ================= */
.distance-hero-banner {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(236, 72, 153, 0.05));
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dhb-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.dhb-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.dhb-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #c084fc;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dhb-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.dhb-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.fairway-hero-banner {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(14, 165, 233, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fhb-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.fhb-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.fhb-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fhb-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.fhb-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.midrange-hero-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mhb-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.mhb-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.mhb-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mhb-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.mhb-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ================= MIDRANGE & FAIRWAY PRECISION NAVIGATOR ================= */
.mid-fairway-precision-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.mfp-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mfp-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 1px;
}

.mfp-speed-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
}

.mfp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 500px) {
  .mfp-grid {
    grid-template-columns: 1fr;
  }
}

.mfp-slot {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mfp-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
}

.mfp-val {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 800;
}

.mfp-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.btn-buy-all-gaps {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000000;
  border: none;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-buy-all-gaps:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
}

.btn-buy-all-gaps:active {
  transform: scale(0.96);
}

.btn-swish-all-gaps {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-swish-all-gaps:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

.btn-swish-all-gaps:active {
  transform: scale(0.96);
}

/* ================= CATALOG BAG & GAP FILTERS & CARD CONTROLS ================= */
.btn-card-bag {
  background: none;
  border: 1px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0.45;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-card-bag:hover {
  opacity: 1;
  transform: scale(1.15);
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.btn-card-bag.active {
  opacity: 1;
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
}

.badge-in-user-bag {
  background: rgba(99, 102, 241, 0.14) !important;
  border: 1px solid rgba(99, 102, 241, 0.38) !important;
  color: #6366f1 !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.badge-in-user-bag:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .badge-in-user-bag {
  background: rgba(129, 140, 248, 0.2) !important;
  border-color: rgba(129, 140, 248, 0.45) !important;
  color: #a5b4fc !important;
}

.pill-mybag {
  border-color: rgba(99, 102, 241, 0.45) !important;
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  font-weight: 700 !important;
}

.pill-mybag:hover {
  background: rgba(99, 102, 241, 0.16) !important;
  border-color: #6366f1 !important;
}

.pill-mybag.active {
  background: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35) !important;
}

[data-theme="dark"] .pill-mybag {
  color: #a5b4fc !important;
  background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .pill-mybag.active {
  background: #6366f1 !important;
  color: #ffffff !important;
}

.pill-bag-gaps {
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #d97706 !important;
  background: rgba(245, 158, 11, 0.08) !important;
  font-weight: 700 !important;
}

.pill-bag-gaps:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: #f59e0b !important;
}

.pill-bag-gaps.active {
  background: #f59e0b !important;
  color: #000000 !important;
  border-color: #f59e0b !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .pill-bag-gaps {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
}

[data-theme="dark"] .pill-bag-gaps.active {
  background: #f59e0b !important;
  color: #000000 !important;
}

.mybag-catalog-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.bag-gaps-catalog-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.12));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.mcb-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mcb-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.mcb-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mcb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-mcb-action {
  background: #6366f1;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-mcb-action:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.btn-mcb-action.share {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-mcb-action.share:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
  color: #6366f1;
}

.btn-mcb-action.bundle {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000000;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-mcb-action.bundle:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
}

.btn-mcb-action.backup-all {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-mcb-action.backup-all:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

.btn-card-backup-add {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.35);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-card-backup-add:hover {
  background: #6366f1;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .btn-card-backup-add {
  background: rgba(129, 140, 248, 0.18);
  border-color: rgba(129, 140, 248, 0.4);
  color: #a5b4fc;
}

[data-theme="dark"] .btn-card-backup-add:hover {
  background: #6366f1;
  color: #ffffff;
}

/* ================= POST-PURCHASE & RECEIPT BAG INTEGRATION ================= */
.receipt-post-purchase-actions {
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(16, 185, 129, 0.12));
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.rppa-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.rppa-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 12px;
}

.rppa-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-rppa-caddy {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.btn-rppa-caddy:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.btn-rppa-bag {
  background: #6366f1;
  color: #ffffff;
  border: none;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.btn-rppa-bag:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

.btn-rppa-share {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.4);
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-rppa-share:hover {
  background: rgba(14, 165, 233, 0.28);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.btn-rppa-checklist {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-rppa-checklist:hover {
  background: rgba(245, 158, 11, 0.24);
  border-color: #fbbf24;
  transform: translateY(-1px);
}

.btn-rppa-map {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-rppa-map:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
  transform: translateY(-1px);
}

.btn-rppa-matrix {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-rppa-matrix:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

/* Receipt Ecosystem Bar & Micro Synergies */
.receipt-ecosystem-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: none;
}

.receipt-ecosystem-bar::-webkit-scrollbar {
  display: none;
}

.btn-micro-matrix, .btn-micro-plastic, .btn-micro-backup {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-micro-matrix {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-cyan);
  border-color: rgba(56, 189, 248, 0.35);
}

.btn-micro-matrix:hover {
  background: rgba(56, 189, 248, 0.24);
  border-color: var(--accent-cyan);
}

.btn-micro-plastic {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.35);
}

.btn-micro-plastic:hover {
  background: rgba(168, 85, 247, 0.24);
  border-color: #c084fc;
}

.btn-micro-backup {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.btn-micro-backup:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: #fbbf24;
}

.btn-customer-order-bag {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #6366f1;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-customer-order-bag:hover {
  background: #6366f1;
  color: #ffffff;
}

[data-theme="dark"] .btn-customer-order-bag {
  background: rgba(129, 140, 248, 0.18);
  border-color: rgba(129, 140, 248, 0.4);
  color: #a5b4fc;
}

[data-theme="dark"] .btn-customer-order-bag:hover {
  background: #6366f1;
  color: #ffffff;
}

.btn-order-item-bag {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-order-item-bag:hover {
  border-color: #6366f1;
  color: #6366f1;
}

.btn-order-item-bag.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #6366f1;
}

.btn-order-item-cmp {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-order-item-cmp:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.12);
}

.btn-order-item-cmp.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-order-item-qv {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-order-item-qv:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.12);
}

.btn-customer-order-matrix {
  transition: all 0.2s ease;
}

.btn-customer-order-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-customer-order-audit {
  transition: all 0.2s ease;
}

.btn-customer-order-audit:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  transform: translateY(-1px);
}

.btn-customer-order-caddy {
  transition: all 0.2s ease;
}

.btn-customer-order-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  transform: translateY(-1px);
}

.btn-order-matrix {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-order-matrix:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-order-caddy {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-order-caddy:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

/* ================= FOREHAND CADDY QUICKVIEW & BACKUP ACTIONS ================= */
.badge-caddy-fh {
  background: rgba(192, 132, 252, 0.15) !important;
  border-color: rgba(192, 132, 252, 0.45) !important;
  color: #c084fc !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .badge-caddy-fh {
  background: rgba(192, 132, 252, 0.22) !important;
  color: #d8b4fe !important;
}

.caddy-match-box.caddy-match-fh {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.12), rgba(99, 102, 241, 0.12));
  border-color: rgba(192, 132, 252, 0.35);
}

.caddy-match-badge.fh {
  background: rgba(192, 132, 252, 0.2);
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.45);
}

.btn-caddy-view-hole.fh {
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.35);
  color: #c084fc;
}

.btn-caddy-view-hole.fh:hover {
  background: #c084fc;
  color: #020617;
  box-shadow: 0 4px 12px rgba(192, 132, 252, 0.35);
}

.btn-primary.btn-qv-backup {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
}

.btn-primary.btn-qv-backup:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.55) !important;
}

.btn-qv-bag-audit {
  transition: all 0.2s ease;
}

.btn-qv-bag-audit:hover {
  border-color: #6366f1 !important;
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.1) !important;
  transform: translateY(-1px);
}

.btn-qv-matrix {
  transition: all 0.2s ease;
}

.btn-qv-matrix:hover {
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.22) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   VILHELMINA SCORECARD CADDY HOLE DISCS
   ========================================================================== */

.scorecard-hole-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

.scorecard-hole-card-wrap .scorecard-hole-card {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.scorecard-hole-caddy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border-color);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 6px 12px;
  font-size: 0.78rem;
  transition: background 0.2s ease;
}

.scorecard-hole-caddy-row:hover {
  background: rgba(30, 41, 59, 0.7);
}

.shc-mold-info {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}

.shc-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.shc-mold-name {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: rgba(56, 189, 248, 0.4);
}

.shc-mold-name:hover {
  color: var(--accent-cyan);
}

.shc-flight {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.shc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-shc-buy {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-shc-buy:hover:not(:disabled) {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-shc-buy.in-cart {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

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

.btn-shc-map {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 3px 6px;
  font-size: 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-shc-map:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}


/* Enhanced Coach Disc Panel */
.scorecard-coach-disc-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.4);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.scorecard-coach-disc-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.scorecard-coach-disc-img:hover {
  transform: scale(1.08);
}

.scorecard-coach-disc-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 0;
}

.scd-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: right;
  cursor: pointer;
}

.scd-title:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

.scd-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
}

.scd-flight {
  color: var(--text-muted);
}

.scd-shelf-link {
  color: var(--accent-cyan);
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}

.scd-stock {
  color: var(--accent-emerald);
  font-weight: 700;
}

.scd-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.btn-caddy-add-cart.in-cart {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
}

.btn-caddy-bag-toggle {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
  padding: 4px 8px;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-caddy-bag-toggle:hover {
  background: #6366f1;
  color: #ffffff;
}

.btn-caddy-bag-toggle.in-bag {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

.scorecard-coach-bag-notice {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(16, 185, 129, 0.12);
  border-left: 3px solid #10b981;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #34d399;
  line-height: 1.35;
}

/* ==========================================================================
   BUNDLE BUILDER SLOT ACTIONS, INDIVIDUAL BUY, BAG & SHARE SYNERGY
   ========================================================================== */

.bundle-slot-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-slot-buy {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-slot-buy:hover:not(:disabled) {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-slot-buy.in-cart {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

.btn-slot-buy.btn-qv-backup {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.45);
}

.btn-slot-buy.btn-qv-backup:hover:not(:disabled) {
  background: #10b981;
  color: #ffffff;
}

.btn-slot-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-slot-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-slot-bag {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
  padding: 5px 8px;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-slot-bag:hover {
  background: #6366f1;
  color: #ffffff;
}

.btn-slot-bag.in-bag {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

.btn-slot-compare {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 5px 8px;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-slot-compare:hover {
  background: #f59e0b;
  color: #0f172a;
}

.btn-slot-compare.active {
  background: rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  border-color: #f59e0b;
  box-shadow: none;
}

.btn-slot-matrix {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 5px 8px;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-slot-matrix:hover {
  background: #38bdf8;
  color: #0f172a;
}

.btn-slot-plastic {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 5px 8px;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-slot-plastic:hover {
  background: #a855f7;
  color: #ffffff;
}

/* Bundle Ecosystem Bar */
.bundle-ecosystem-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 2px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: none;
}

.bundle-ecosystem-bar::-webkit-scrollbar {
  display: none;
}

.btn-slot-qv {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 5px 8px;
  font-size: 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-slot-qv:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.btn-bundle-save-bag {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.4);
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-bundle-save-bag:hover {
  background: #6366f1;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-bundle-share {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-bundle-share:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.btn-bundle-matrix-link {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-bundle-matrix-link:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-bundle-caddy-link {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-bundle-caddy-link:hover {
  background: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
}

.bundle-slot-img {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.bundle-slot-img:hover {
  transform: scale(1.06);
}

.bundle-slot-title {
  cursor: pointer;
}

.bundle-slot-title:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

/* ==========================================================================
   DISC COMPARE BAG SYNERGY, QUICK DUEL SHARE & CARD ACTIONS (v1.46.55)
   ========================================================================== */

.compare-bag-quick-bar {
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 10px;
}

.cbqb-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.cbqb-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #818cf8;
}

.cbqb-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cbqb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-compare-bag-chip {
  background: var(--card-bg, #1e293b);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: var(--text-primary);
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-compare-bag-chip:hover {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.cbqb-specs {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: 600;
}

.compare-card-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
}

.btn-compare-card-matrix {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-compare-card-matrix:hover {
  background: #38bdf8;
  color: #0f172a;
}

.btn-compare-card-plastic {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-compare-card-plastic:hover {
  background: #a855f7;
  color: #ffffff;
}

/* Compare Ecosystem Bar */
.compare-ecosystem-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: none;
}

.compare-ecosystem-bar::-webkit-scrollbar {
  display: none;
}

.btn-compare-card-caddy {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-compare-card-caddy:hover {
  background: #10b981;
  color: #ffffff;
}

.btn-compare-card-bag {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
  padding: 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-compare-card-bag:hover {
  background: #6366f1;
  color: #ffffff;
}

.btn-compare-card-bag.active {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

.compare-share-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 6px;
}

.btn-compare-share {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-compare-share:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.btn-compare-matrix {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-compare-matrix:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.btn-compare-audit {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-compare-audit:hover {
  background: #6366f1;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-compare-caddy {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-compare-caddy:hover {
  background: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   BAG AUDIT VILHELMINA COURSE RADAR & GAP COMPARE (v1.46.56)
   ========================================================================== */

.btn-gap-compare {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-gap-compare:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.3);
}

.bag-audit-vilhelmina-section {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
}

.bag-audit-vilhelmina-section.complete {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid #10b981;
}

.bav-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.bav-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #34d399;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.bav-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-bav-caddy-link {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-bav-caddy-link:hover {
  background: #10b981;
  color: #ffffff;
}

.bav-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.bav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.bav-card {
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.bav-card-covered {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.05);
}

.bav-card-missing {
  border-color: rgba(245, 158, 11, 0.4);
  border-left: 3px solid #f59e0b;
}

.bav-card.bav-in-cart {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}

.bav-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bav-hole-tag {
  font-size: 0.85rem;
  font-weight: 800;
  color: #34d399;
}

.bav-hole-tag.missing {
  color: #fbbf24;
}

.bav-status-covered {
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.bav-status-missing {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.bav-card-danger {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.bav-card-advice {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.bav-disc-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bav-disc-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 160px;
}

.bav-disc-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #0f172a;
}

.bav-disc-info {
  display: flex;
  flex-direction: column;
}

.bav-disc-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.bav-disc-specs {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.bav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-bav-buy {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-bav-buy:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.btn-bav-buy.in-cart {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.btn-bav-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-bav-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-bav-compare {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-bav-compare:hover {
  background: #38bdf8;
  color: #0f172a;
}

.btn-audit-matrix {
  transition: all 0.2s ease;
}

.btn-audit-matrix:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-1px);
}

.btn-audit-caddy {
  transition: all 0.2s ease;
}

.btn-audit-caddy:hover {
  background: rgba(52, 211, 153, 0.22) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
  transform: translateY(-1px);
}

.btn-gap-matrix {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-gap-matrix:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.btn-gap-qv {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-gap-qv:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-bav-caddy {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-bav-caddy:hover {
  background: #34d399;
  color: #020617;
  transform: translateY(-1px);
}

.btn-bav-qv {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-bav-qv:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ==========================================================================
   COURSE CADDY HOLE SHARE, BAG TOGGLE & COMPARE SYNERGY (v1.46.57)
   ========================================================================== */

.btn-caddy-share-tactics {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-caddy-share-tactics:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.caddy-rec-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-caddy-compare {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-caddy-compare:hover {
  background: #38bdf8;
  color: #0f172a;
}

.btn-caddy-matrix {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-caddy-matrix:hover {
  background: #38bdf8;
  color: #0f172a;
}

/* ==========================================================================
   QUICKVIEW BAG COMPARE BAR & COURSE CADDY SPOTLIGHT (v1.46.58)
   ========================================================================== */

.qv-caddy-highlight-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.qv-caddy-highlight-box.fh {
  background: rgba(192, 132, 252, 0.08);
  border-color: rgba(192, 132, 252, 0.35);
}

.qch-content {
  flex: 1;
  min-width: 220px;
}

.qch-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.qv-caddy-highlight-box.fh .qch-tag {
  color: #c084fc;
}

.qch-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 1px 0 2px;
}

.qch-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.btn-qch-caddy-link {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-qch-caddy-link:hover {
  background: #10b981;
  color: #ffffff;
}

.qv-caddy-highlight-box.fh .btn-qch-caddy-link {
  background: rgba(192, 132, 252, 0.18);
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.4);
}

.qv-caddy-highlight-box.fh .btn-qch-caddy-link:hover {
  background: #c084fc;
  color: #0f172a;
}

.qv-bag-compare-bar {
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.qbc-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.qbc-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #818cf8;
}

.qbc-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.qbc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-qv-bag-chip {
  background: var(--card-bg, #1e293b);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: var(--text-primary);
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-qv-bag-chip:hover {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.qbc-specs {
  font-size: 0.68rem;
  opacity: 0.8;
  font-weight: 600;
}

.btn-matrix-share-link {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  transition: all 0.2s ease;
}

.btn-matrix-share-link:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.btn-matrix-caddy-link {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}

.btn-matrix-caddy-link:hover {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.checklist-weather-alert {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checklist-weather-alert.wet {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38bdf8;
}

.checklist-weather-alert.windy {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.checklist-weather-alert.cold {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #818cf8;
}

.receipt-caddy-spotlight {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: left;
}

.rcs-header {
  margin-bottom: 8px;
}

.rcs-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.rcs-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
}

.rcs-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rcs-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.rcs-item-info {
  font-size: 0.78rem;
  color: var(--text-primary);
}

.rcs-advice {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.btn-rcs-hole {
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-rcs-hole:hover {
  background: #059669;
  transform: translateY(-1px);
}

/* QuickView Ecosystem Bar */

.btn-qv-eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.btn-qv-eco-pill:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.1);
  transform: translateY(-1px);
}

/* Swish Order Summary & In-Store Shelf Pick */
.swish-order-summary {
  margin: 10px 0 14px 0;
}

.swish-summary-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
}

.swish-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.swish-summary-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.swish-summary-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 4px 0;
}

.ssi-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.ssi-name {
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.ssi-shelf {
  font-size: 0.72rem;
  color: var(--accent-cyan);
  font-weight: 500;
}

.ssi-price-qty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.ssi-qty {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ssi-subtotal {
  font-size: 0.82rem;
  color: var(--text-primary);
}

.swish-summary-bonus-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  margin-top: 4px;
}

.ssi-bonus-tag {
  font-size: 0.72rem;
  color: #10b981;
  font-weight: 700;
}

.swish-summary-shelf-tip {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.73rem;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.35;
}

/* ArmSpeed, Putter, FlightFilter, WindMaster, Replacement, Checklist, BagAudit, Caddy, Scorecard, GarageMap, BagShare, Glossary, Bundle, Scanner, Matrix, DiscFinder & Orders Ecosystem Bars */
.armspeed-ecosystem-bar,
.putter-ecosystem-bar,
.flight-filter-ecosystem-bar,
.wind-ecosystem-bar,
.windmaster-ecosystem-bar,
.replacement-ecosystem-bar,
.checklist-ecosystem-bar,
.bag-audit-ecosystem-bar,
.caddy-ecosystem-bar,
.scorecard-ecosystem-bar,

.btn-arm-eco-pill:hover,
.btn-putter-eco-pill:hover,
.btn-ff-eco-pill:hover,
.btn-wm-eco-pill:hover,
.btn-repl-eco-pill:hover,
.btn-chk-eco-pill:hover,
.btn-audit-eco-pill:hover,
.btn-caddy-eco-pill:hover,
.btn-sc-eco-pill:hover,
.btn-map-eco-pill:hover,
.btn-share-eco-pill:hover,
.btn-gloss-eco-pill:hover,
.btn-bundle-eco-pill:hover,
.btn-scanner-eco-pill:hover,
.btn-matrix-eco-pill:hover,
.btn-finder-eco-pill:hover,
.btn-orders-eco-pill:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.1);
  transform: translateY(-1px);
}

.btn-flight-wind-shortcut:hover,
.btn-wind-filter-shortcut:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* ================= QUICKVIEW FAST PAGER & NAVIGATION BAR (v1.47.18) ================= */
.quickview-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--card-bg, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 6px 12px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}

.btn-qv-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  user-select: none;
}

.btn-qv-nav:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  transform: translateY(-1px);
}

.btn-qv-nav:active:not(:disabled) {
  transform: translateY(0);
}

.btn-qv-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.qv-nav-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
}

.qv-nav-indicator {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.qv-nav-indicator strong {
  color: var(--accent-cyan);
}

.qv-nav-context {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.qv-scarcity-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #f59e0b;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  animation: none;
}

/* Sektion 183: Arm Speed, Putter Lab & Wind Master Express Swish Buttons */
.btn-putter-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.btn-putter-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
}

.btn-putter-pair-swish {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.btn-putter-pair-swish:hover {
  background: linear-gradient(135deg, #f472b6, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.5);
}

.btn-putter-target-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-putter-target-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
}

.btn-arm-speed-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-arm-speed-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-arm-speed-gap-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-arm-speed-gap-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
}

.btn-wind-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-wind-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-wind-gap-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-wind-gap-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
}

/* Sektion 184: Plastic Guide, Round Checklist, Flight Filter & Wizard Swish Buttons */
.btn-plastic-disc-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-plastic-disc-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-checklist-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.btn-checklist-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

.btn-flight-preview-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-flight-preview-swish:hover:not(:disabled) {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-wizard-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-wizard-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

/* Sektion 185: Barcode Scanner, Scorecard Coach & Shared Bag Swish Buttons */
.btn-scan-swish {
  flex: 2;
  min-width: 140px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-scan-swish:hover:not(:disabled) {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
}
.btn-scan-swish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #64748b;
}

.btn-sbb-bundle-swish {
  padding: 8px 14px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-sbb-bundle-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.45);
}

.btn-scorecard-swish {
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-scorecard-swish:hover:not(:disabled) {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-share-item-swish {
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-share-item-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-receiver-swish-all {
  padding: 10px 16px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-receiver-swish-all:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55);
}

/* Sektion 186: Glossary, Customer Orders & Receipt Modal Express Swish & Impulse */
.btn-glossary-disc-swish {
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-glossary-disc-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-order-item-swish {
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-order-item-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.btn-order-swish-all {
  padding: 6px 12px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn-order-swish-all:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.btn-micro-swish {
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}
.btn-micro-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
}

/* Post-Purchase Impulse Box in Receipt Modal */
.receipt-impulse-box {
  background: rgba(14, 165, 233, 0.06);
  border: 1px dashed rgba(14, 165, 233, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0;
}
.rib-header {
  margin-bottom: 8px;
}
.rib-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #0ea5e9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.rib-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
}
.rib-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rib-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-secondary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 6px 10px;
  gap: 8px;
}
.rib-item-info {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-primary);
}
.rib-item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.7rem;
}
.btn-receipt-impulse-swish {
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-receipt-impulse-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5);
}

/* Sektion 187: Search Autocomplete & 1-Click Swish Dropdown, Trending Swish & Live Social Proof */
.recent-item-chip-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-secondary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 2px 4px;
}

.btn-recent-swish {
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}
.btn-recent-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
}

/* Native WebKit Search Cancel Button Hide (fixes double 'x' in search box) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

.search-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
}

[data-theme="dark"] .search-autocomplete-dropdown {
  background: #161c26;
  border-color: #263346;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.search-drop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-main);
  border-radius: 12px 12px 0 0;
}

[data-theme="dark"] .search-drop-header {
  background: #0f141c;
  border-color: #263346;
}

.search-drop-heading {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-drop-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.btn-drop-close:hover {
  color: var(--text-primary);
}

.search-drop-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
}

.search-drop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.search-drop-item:hover {
  background: var(--bg-main);
}

[data-theme="dark"] .search-drop-item:hover {
  background: #1e2634;
}

.search-drop-item.drop-out-stock {
  opacity: 0.6;
}

.search-drop-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.search-drop-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-drop-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-drop-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-drop-meta-row {
  font-size: 0.74rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-drop-shelf {
  color: var(--accent-cyan);
  font-weight: 600;
  cursor: pointer;
}

.search-drop-shelf:hover {
  text-decoration: underline;
}

.search-drop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.search-drop-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-search-drop-buy {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn-search-drop-buy:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-search-drop-buy.in-cart {
  background: #059669;
}

.search-drop-footer {
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-align: center;
  cursor: pointer;
  border-top: 1px solid var(--border-color);
  background: var(--bg-main);
  border-radius: 0 0 12px 12px;
  transition: all 0.15s ease;
}

.search-drop-footer:hover {
  background: rgba(2, 132, 199, 0.08);
}

.search-drop-empty {
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.btn-drop-open-finder {
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: var(--accent-cyan);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-drop-open-finder:hover {
  background: var(--accent-cyan);
  color: #ffffff;
}

/* Live Social Proof Toast (Permanently removed) */
.live-social-proof-toast {
  display: none !important;
}

/* Dark mode theme overrides */
[data-theme="dark"] .live-social-proof-toast {
  background: #1e293b !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .social-toast-text,
[data-theme="dark"] .social-toast-text strong {
  color: #f8fafc !important;
}
[data-theme="dark"] .social-toast-meta,
[data-theme="dark"] .social-toast-shelf {
  color: #94a3b8 !important;
}
[data-theme="dark"] .social-toast-thumb {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .social-toast-badge {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}
[data-theme="dark"] .btn-social-view {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .btn-social-view:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-social-close {
  color: #94a3b8 !important;
}
[data-theme="dark"] .btn-social-close:hover {
  color: #ffffff !important;
}

/* Sektion 188: Cart Drawer Upsell Fast Swish, Synergy Swish & Booster Swish */
.cart-item-booster-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-cart-booster-swish {
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.btn-cart-booster-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
}

.upsell-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-upsell-fast-swish {
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}
.btn-upsell-fast-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(37, 99, 235, 0.4);
}

.cart-synergy-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-cart-synergy-swish {
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.btn-cart-synergy-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.45);
}

.btn-cart-acc-swish {
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}
.btn-cart-acc-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(37, 99, 235, 0.4);
}

.btn-cart-bp-swish {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.btn-cart-bp-swish:hover {
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
}

/* ==========================================================================
   SEKTION 191: BARCODE SCANNER SIMULATOR & KEYPAD SWISH OPTIMIZATION
   ========================================================================== */

/* Sektion 191: Barcode Simulator Presets Swish */
.sim-preset-card {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.sim-preset-card:hover {
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.sim-preset-card .sim-preset-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 8px 10px;
}
.sim-preset-card .sim-preset-btn:hover {
  transform: none;
  background: rgba(16, 185, 129, 0.08);
}

/* Sektion 191: Keypad Quick SKU Shortcuts */
.keypad-quick-shortcuts {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.keypad-quick-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.keypad-quick-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-keypad-quick-sku {
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-keypad-quick-sku:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  transform: translateY(-1px);
}

/* Sektion 191: Wizard Top Match Swish */
.btn-wizard-top-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.35);
}
.btn-wizard-top-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.5);
}

/* Sektion 192: Flight Filter Top Match Swish */
.btn-flight-filter-top-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.84rem;
  padding: 7px 15px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-flight-filter-top-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
}

/* Sektion 192: Round Checklist Missing Equipment Swish */
.btn-checklist-missing-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-checklist-missing-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.55);
}

/* ==========================================================================
   SEKTION 193: BAG CHIPS, FLIGHT MATRIX MOLD & DISC REPLACEMENT FAST SWISH
   ========================================================================== */

/* Sektion 193: Bag Audit Chip Fast Swish */
.bag-chip-swish-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.bag-chip-swish-btn:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
}

/* Sektion 193: 2D Flight Matrix Mold Spotlight Fast Swish */
.btn-matrix-mold-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 800 !important;
  padding: 2px 9px !important;
  font-size: 0.74rem !important;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.35);
}
.btn-matrix-mold-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.5);
}

/* Sektion 193: Disc Replacement Top Swish & Duo Swish */
.btn-repl-top-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.btn-repl-top-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.5);
}

/* --- Sektion 194: Plastic Guide, Wind Master, Arm Speed & Putter Fast Swish --- */
.btn-plastic-card-swish {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-plastic-card-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.btn-wind-top-swish {
  background: linear-gradient(135deg, #0284c7, #06b6d4);
  color: #ffffff;
  border: 1px solid rgba(6, 182, 212, 0.4);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-wind-top-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35);
}
.btn-arm-top-swish {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #ffffff;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-arm-top-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.btn-putter-top-swish {
  background: linear-gradient(135deg, #db2777, #ec4899);
  color: #ffffff;
  border: 1px solid rgba(236, 72, 153, 0.4);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-putter-top-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

/* --- Sektion 195: Bundle Preset, Caddy, School, Shared & Checklist Fast Swish --- */
.btn-bundle-preset-swish {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-bundle-preset-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.btn-share-item-swish {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-share-item-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* --- Sektion 196: Compare Duels, Product Card Pair Swish & Glossary Fast Swish --- */
.compare-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.compare-preset-item {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.btn-compare-duel-swish {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-compare-duel-swish:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.btn-card-pair-swish {
  background: rgba(147, 51, 234, 0.18);
  color: #c084fc;
  border: 1px solid rgba(147, 51, 234, 0.35);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
}
.btn-card-pair-swish:hover {
  background: rgba(147, 51, 234, 0.32);
  color: #ffffff;
}
.btn-glossary-top-swish {
  background: linear-gradient(135deg, #0284c7, #06b6d4);
  color: #ffffff;
  border: 1px solid rgba(6, 182, 212, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: transform 0.15s ease;
}
.btn-glossary-top-swish:hover {
  transform: scale(1.03);
}

/* Sektion 197: Scorecard, Wizard, Flight Filter, Customer Orders & QuickView Fast Duo Swish */
.btn-shc-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 800;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-shc-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn-recent-card-swish {
  padding: 3px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-recent-card-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn-cross-sell-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-cross-sell-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn-mold-variant-swish {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 7px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-mold-variant-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Sektion 199: Subfilter Swish Shortcuts, Scanner Direct Swish & Wizard/Flight Filter Top Duo */
.btn-subfilter-swish {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-subfilter-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}

/* Sektion 200 Milestone: Header Fast Swish, OOS Swap & Swish, Receipt Duo & QR Fallback */
.btn-header-fast-swish {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-header-fast-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
}

.btn-header-fast-swish:active {
  transform: scale(0.97);
}

.btn-swap-choice-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-swap-choice-swish:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

/* Sektion 202: Search Autocomplete Top Swish & Duo Swish, Social Toast Duo Swish, Plastic Card Duo Swish */
.btn-search-drop-top-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-search-drop-top-swish:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
  filter: brightness(1.08);
}

.btn-gss-top-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-gss-top-swish:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
  filter: brightness(1.08);
}

/* ==========================================================================
   Sektion 206: Varukorg & Checkout Swish Booster & Duo Swish (v1.47.51)
   ========================================================================== */
.btn-cart-empty-swish {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35)) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}

.btn-cart-empty-swish:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.45), rgba(5, 150, 105, 0.55)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

/* ==========================================================================
   Sektion 207: 3-Pack & Paketbyggare Express Swish Boosters (v1.47.52)
   ========================================================================== */
.btn-qv-bundle-swish,
.btn-cart-bb-swish,
.btn-gap-bundle-swish,
.btn-matrix-bundle-swish {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(245, 158, 11, 0.28)) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}

.btn-qv-bundle-swish:hover,
.btn-cart-bb-swish:hover,
.btn-gap-bundle-swish:hover,
.btn-matrix-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.45), rgba(245, 158, 11, 0.45)) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

/* ==========================================================================
   Sektion 208: Delad Bag Swish & Kvitto Impulse Duo Swish (v1.47.53)
   ========================================================================== */
.btn-share-swish-all {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.45)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.6) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}

.btn-share-swish-all:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(5, 150, 105, 0.65)) !important;
  border-color: #34d399 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

/* ==========================================================================
   Sektion 209: Barcode Scanner Shelf Variants & Scorecard kit (v1.47.54)
   ========================================================================== */

/* 3-Pack Bundle Swish in Barcode Scanner */
.btn-scan-bundle-swish {
  flex: 1.5;
  min-width: 150px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-scan-bundle-swish:hover:not(:disabled) {
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

/* Scanned Mold Variants Shelf Box */
.scanned-mold-variants-box {
  margin-top: 10px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
}
.scanned-mold-variants-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.scanned-mold-variants-scroll {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 2px;
}
.scanned-variant-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  transition: all 0.2s ease;
}
.scanned-variant-pill:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(30, 41, 59, 1);
}
.scanned-variant-pill.in-cart {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}
.svp-info {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-wrap: wrap;
  font-size: 0.74rem;
}
.svp-plastic {
  font-weight: 700;
  color: #38bdf8;
}
.svp-weight, .svp-color {
  color: var(--text-muted);
}
.svp-price {
  font-weight: 800;
  color: #f1f5f9;
}
.svp-rare {
  font-size: 0.65rem;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.svp-qty {
  font-size: 0.68rem;
  color: #34d399;
}
.svp-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-svp-view {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-svp-view:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: #38bdf8;
}
.btn-svp-cart {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-svp-cart:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.15);
}
.btn-svp-cart.in-cart {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: #10b981;
}
.btn-svp-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-svp-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
}

/* Scorecard Champion Box */
.scorecard-champion-box {
  border-color: #10b981 !important;
  background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.15), rgba(15, 23, 42, 0.85)) !important;
  padding: 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}
.scorecard-champion-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 6px;
}
.scorecard-champion-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 4px;
}
.scorecard-champion-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.scorecard-champion-addons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.scorecard-champ-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}
.sci-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sci-icon {
  font-size: 1.2rem;
}
.sci-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sci-price {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.sci-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-sci-cart {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-sci-cart:hover {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
}
.btn-sci-cart.in-cart {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
}
.btn-sci-swish {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-sci-swish:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
}
.scorecard-champion-duo-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.btn-scorecard-kit {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.btn-scorecard-kit:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.55);
}

/* ==========================================================================
   Sektion 210: Plastic Guide, Flight School, Brand Charts & Putter Combo (v1.47.55)
   ========================================================================== */

/* Universal Bundle Swish Buttons */
.btn-flight-card-bundle-swish,
.btn-plastic-card-bundle-swish,
.btn-plastic-mold-bundle-swish,
.btn-school-bundle-swish,
.btn-putter-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.7rem !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-flight-card-bundle-swish:hover,
.btn-plastic-card-bundle-swish:hover,
.btn-plastic-mold-bundle-swish:hover,
.btn-school-bundle-swish:hover,
.btn-putter-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

/* Putter Target Basket Training Combo Swish */
.btn-putter-target-bundle-swish {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
}
.btn-putter-target-bundle-swish:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.5) !important;
}

/* ==========================================================================
   Sektion 211: Disc Matcher & Round Checklist 3-Pack & Duo Swish (v1.47.56)
   ========================================================================== */

/* Disc Matcher & Checklist Bundle Swish */
.btn-matched-bundle-swish,
.btn-repl-top-bundle-swish,
.btn-checklist-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-matched-bundle-swish:hover,
.btn-repl-top-bundle-swish:hover,
.btn-checklist-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35) !important;
}

/* Checklist Accessory Duo Kit Swish */
.btn-checklist-duo-kit {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(16, 185, 129, 0.3)) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-checklist-duo-kit:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(16, 185, 129, 0.45)) !important;
  color: #ffffff !important;
  border-color: #fbbf24 !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

/* ==========================================================================
   Sektion 212: Garage Map Shelves & Kassa 3-Pack & Duo Swish (v1.47.57)
   ========================================================================== */

/* Spotlight Banner Bundle Swish */
.btn-mtd-bundle-swish {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.btn-mtd-bundle-swish:hover {
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
}

/* Shelf Top & Chip Bundle Swish */
.btn-gss-top-bundle-swish,
.btn-gss-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-gss-top-bundle-swish:hover,
.btn-gss-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35) !important;
}

/* ==========================================================================
   Sektion 213: Order History & Disc Finder Wizard 3-Pack & Duo Swish (v1.47.58)
   ========================================================================== */

/* Order History & Disc Finder Wizard Bundle Swish */
.btn-order-bundle-swish,
.btn-wizard-top-bundle-swish,
.btn-wizard-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-order-bundle-swish:hover,
.btn-wizard-top-bundle-swish:hover,
.btn-wizard-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35) !important;
}

/* --- Sektion 214: Vindmaster, Armfart & Väskanalys 3-Pack & Duo Swish Boost --- */
.btn-wind-top-bundle-swish,
.btn-arm-top-bundle-swish,
.btn-swish-top-gap-bundle {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.4)) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-wind-top-bundle-swish:hover,
.btn-arm-top-bundle-swish:hover,
.btn-swish-top-gap-bundle:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.6)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.btn-wind-gap-bundle-swish,
.btn-arm-speed-gap-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.35)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-wind-gap-bundle-swish:hover,
.btn-arm-speed-gap-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(79, 70, 229, 0.55)) !important;
  color: #ffffff !important;
}

.btn-wind-bundle-swish,
.btn-arm-speed-bundle-swish,
.btn-bav-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-wind-bundle-swish:hover,
.btn-arm-speed-bundle-swish:hover,
.btn-bav-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
}

/* --- Sektion 215: Banguide, Stabilitetsfilter & Ordlista 3-Pack & Duo Swish Boost --- */
.btn-caddy-hole-bundle-swish,
.btn-flight-filter-top-bundle-swish,
.btn-glossary-top-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.4)) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-caddy-hole-bundle-swish:hover,
.btn-flight-filter-top-bundle-swish:hover,
.btn-glossary-top-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.6)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.btn-caddy-bundle-swish,
.btn-flight-preview-bundle-swish,
.btn-glossary-disc-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-caddy-bundle-swish:hover,
.btn-flight-preview-bundle-swish:hover,
.btn-glossary-disc-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
}

/* --- Sektion 216: Flight Matrix, Jämför & Paketbyggaren 3-Pack & Duo Swish Boost --- */
.btn-compare-gap-bundle-swish,
.btn-compare-duo-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.4)) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-compare-gap-bundle-swish:hover,
.btn-compare-duo-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.6)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.btn-matrix-variant-bundle-swish,
.btn-compare-bundle-swish,
.btn-slot-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-matrix-variant-bundle-swish:hover,
.btn-compare-bundle-swish:hover,
.btn-slot-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
}

/* --- Sektion 217: Snabbvy & Delad Bag 3-Pack & Duo Swish Boost --- */
.btn-qv-bottom-bundle-swish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  font-family: inherit;
}

.btn-qv-bottom-bundle-swish:hover {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

.btn-receiver-bundle-top-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.4)) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-receiver-bundle-top-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.6)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.btn-share-item-bundle-swish {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(79, 70, 229, 0.3)) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-share-item-bundle-swish:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.5)) !important;
  color: #ffffff !important;
}

/* Sektion 218: Micro Bundle Swish (Digitalt Kvitto) & Cart Synergy Bundle Swish (Varukorg Bag Synergy) */
.btn-micro-bundle-swish {
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.25);
  transition: all 0.15s ease;
  font-family: inherit;
}
.btn-micro-bundle-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn-cart-synergy-bundle-swish {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3) !important;
  font-weight: 800 !important;
}
.btn-cart-synergy-bundle-swish:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
}

/* Sektion 220: Search Autocomplete, Social Toast & Recent Discs 3-Pack Swish */
.btn-search-drop-top-bundle-swish,
.btn-search-drop-bundle-swish,
.btn-social-bundle-swish,
.btn-recent-bundle-swish,
.btn-recent-card-bundle-swish {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-search-drop-top-bundle-swish {
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 0.68rem;
}

.btn-search-drop-bundle-swish {
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.65rem;
}

.btn-social-bundle-swish {
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.btn-recent-bundle-swish {
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.65rem;
}

.btn-recent-card-bundle-swish {
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.65rem;
}

.btn-search-drop-top-bundle-swish:hover,
.btn-search-drop-bundle-swish:hover,
.btn-social-bundle-swish:hover,
.btn-recent-bundle-swish:hover,
.btn-recent-card-bundle-swish:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

/* Sektion 221: Universal Duo & 3-Pack Swish Expansion */
.btn-card-bundle-swish {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.4);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.btn-card-bundle-swish:hover {
  background: rgba(99, 102, 241, 0.38);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-cross-sell-bundle-swish,
.btn-mold-variant-bundle-swish,
.btn-matcher-bundle-swish,
.btn-cart-empty-bundle-swish {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.68rem;
}
.btn-cross-sell-bundle-swish:hover,
.btn-mold-variant-bundle-swish:hover,
.btn-matcher-bundle-swish:hover,
.btn-cart-empty-bundle-swish:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

/* Sektion 222: Subfilter Swish Boost & Swish Checkout Addons */
.btn-putter-top-bundle-swish,
.btn-subfilter-bundle-swish {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
}
.btn-putter-top-bundle-swish:hover,
.btn-subfilter-bundle-swish:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.ssi-upgrade-duo-btn {
  background: rgba(236, 72, 153, 0.15) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(236, 72, 153, 0.35) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  margin-top: 3px;
  display: inline-block;
}
.ssi-upgrade-duo-btn:hover {
  background: rgba(236, 72, 153, 0.3) !important;
  color: #ffffff !important;
}

.swish-checkout-addon-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: #a5b4fc;
}
.scab-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.swish-addon-pill {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3)) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
.swish-addon-pill:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* Sektion 223: Scorecard 3-Pack Swish & Swish Modal 3-Pack Upgrade */
.btn-shc-bundle-swish,
.btn-scorecard-bundle-swish {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
.btn-shc-bundle-swish:hover,
.btn-scorecard-bundle-swish:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.45);
}

.ssi-upgrade-bundle-btn {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  margin-top: 3px;
  margin-left: 4px;
  display: inline-block;
}
.ssi-upgrade-bundle-btn:hover {
  background: rgba(99, 102, 241, 0.38) !important;
  color: #ffffff !important;
}

.btn-compare-dock-trio-swish {
  background: linear-gradient(135deg, #8b5cf6 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35) !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}
.btn-compare-dock-trio-swish:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5) !important;
}

.compare-trio-bundle-box {
  background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.15), rgba(15, 23, 42, 0.95));
  border: 1.5px solid rgba(139, 92, 246, 0.45);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.15);
}
.compare-trio-bundle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.compare-trio-bundle-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: #c084fc;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.compare-trio-bundle-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-emerald);
}
.compare-trio-bundle-price del {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-right: 4px;
}
.compare-trio-bundle-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}
.btn-compare-trio-buy {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}
.btn-compare-trio-buy:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn-compare-trio-buy.in-cart {
  background: #047857;
}
.btn-compare-trio-swish {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}
.btn-compare-trio-swish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.5);
}

.bag-chip-bundle-swish-btn {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
}
.bag-chip-bundle-swish-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.4);
  filter: brightness(1.12);
}

.btn-bp-combo-swish {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
}
.btn-bp-combo-swish:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
  filter: brightness(1.15);
}

/* ========================================================
   TSIT DISCSHOP MASTER MOBILE OVERHAUL & GHOST-CLICK PREVENTION
   Optimized for Viewports 360px - 640px (iOS & Android)
   ======================================================== */

/* 1. Background Widget Suppression During Open Modals & Drawers */
body.has-open-modal .disc-compare-dock,
body.has-open-modal .sticky-cart-bar,
body.has-open-modal .live-social-proof-toast,
body.has-open-modal .cart-snackbar,
body.has-open-modal .btn-scroll-top,
body.cart-open .disc-compare-dock,
body.cart-open .sticky-cart-bar,
body.cart-open .live-social-proof-toast,
body.cart-open .cart-snackbar,
body.cart-open .btn-scroll-top {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 2. Universal Touch Target Accessibility */
.btn-fav, .btn-compare, .btn-card-bag, .btn-card-action, .btn-card-top-action, #quickViewBody .btn-primary {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 3. Comprehensive Mobile Modals Overhaul (<= 640px) */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 8px 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-card,
  .quick-view-card,
  .flight-chart-card,
  .disc-finder-card,
  .disc-compare-card,
  .bundle-modal-card,
  .bag-audit-modal-card,
  .course-caddy-modal-card,
  .garage-map-modal-card,
  .barcode-scanner-modal-card,
  .wind-master-modal-card,
  .putter-selector-modal-card,
  .bag-share-modal-card,
  .shared-receiver-modal-card,
  .glossary-modal-card,
  .replacement-modal-card,
  .round-checklist-modal-card,
  .scorecard-modal-card,
  .arm-speed-modal-card,
  .customer-orders-modal-card,
  .flight-filter-modal-card,
  .lightbox-card,
  .admin-modal-card,
  .receipt-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94dvh !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Universal Wrap for All Modal Action Bars */
  .scbb-actions,
  .rcbb-actions,
  .dfbb-actions,
  .mobb-actions,
  .cbb-actions,
  .bab-actions,
  .orbb-actions,
  .glbb-actions,
  .asbb-actions,
  .ffbb-actions,
  .fmbb-actions,
  .cmp-actions,
  .caddy-bonus-actions,
  .pbb-actions,
  .wbb-actions,
  .rpbb-actions,
  .bbb-actions,
  .gmbb-actions,
  .scnb-actions,
  .bsbb-actions,
  .sbt-actions,
  .rbbb-actions,
  .srbb-actions,
  .ecbb-actions,
  .pgbb-actions,
  .modal-actions,
  .receipt-post-purchase-actions,
  .receipt-actions-row,
  .receipt-ecosystem-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .scbb-actions button,
  .rcbb-actions button,
  .dfbb-actions button,
  .mobb-actions button,
  .cbb-actions button,
  .bab-actions button,
  .orbb-actions button,
  .glbb-actions button,
  .asbb-actions button,
  .ffbb-actions button,
  .fmbb-actions button,
  .cmp-actions button,
  .caddy-bonus-actions button,
  .pbb-actions button,
  .wbb-actions button,
  .rpbb-actions button,
  .bbb-actions button,
  .gmbb-actions button,
  .scnb-actions button,
  .bsbb-actions button,
  .sbt-actions button,
  .rbbb-actions button,
  .srbb-actions button,
  .ecbb-actions button,
  .pgbb-actions button,
  .btn-eco-pill {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 40px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    box-sizing: border-box !important;
  }

  /* Cart Drawer Mobile Bounds */
  .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Live Social Proof Toast Mobile Bounds */
  .live-social-proof-toast {
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
    width: auto !important;
    bottom: 74px !important;
  }

  /* Compare Dock Mobile Bounds */
  .disc-compare-dock {
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 100vw !important;
    transform: none !important;
    bottom: 74px !important;
  }
  .compare-dock-inner {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .compare-dock-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* 4. Dedicated Narrow Mobile Overhaul (<= 480px) */
@media (max-width: 480px) {
  .main-content {
    padding: 10px 8px !important;
  }

  .controls-card {
    padding: 10px 8px !important;
    border-radius: 10px !important;
  }

  /* 1-Column layout gives each disc full screen width & prevents crushed micro-buttons */
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 2px !important;
  }

  .product-card {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .card-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .card-bottom .price-box {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 100% !important;
  }

  .card-bottom-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .card-bottom-actions .btn-add-cart {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

}

/* 5. Cart Snackbar Mobile Responsiveness */
/* (Replaced by modern unified bottom floating toast at 640px) */

/* ================= UI CLEANUP & DECLUTTERING ENHANCEMENTS ================= */
.shop-intro-wrapper {
  position: relative;
  transition: all 0.25s ease;
}

.shop-intro-wrapper.is-collapsed {
  display: none !important;
}

.intro-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -4px 0 12px 0;
  width: 100%;
}

.btn-toggle-intro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  color: var(--text-muted, #94a3b8);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-toggle-intro:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary, #ffffff);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-toggle-intro.is-collapsed {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
  padding: 7px 16px;
  font-size: 0.78rem;
  margin: 0 auto 12px auto;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.btn-header-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  color: var(--text-secondary, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-header-compact:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.more-chips-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.chip-toggle-more {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}

.chip-toggle-more:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.btn-toggle-advisors {
  background: rgba(147, 51, 234, 0.15) !important;
  border: 1px solid rgba(147, 51, 234, 0.4) !important;
  color: #c084fc !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.btn-toggle-advisors:hover {
  background: rgba(147, 51, 234, 0.25) !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
}

.more-advisors-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  transition: opacity 0.2s ease;
}

.btn-live-ticker-close,
.btn-cbb-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.15rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.btn-live-ticker-close:hover,
.btn-cbb-close:hover {
  color: #ffffff;
  background: rgba(239, 68, 68, 0.25);
}

/* ========================================================
   EXCLUSIVE SCANDINAVIAN UI OVERHAUL (CLEAN & MINIMALIST)
   ======================================================== */

/* Remove any remaining pulse animations */
.badge-card-unlock-max,
.badge-card-unlock-bonus,
.low-stock,
.cart-accelerator-badge {
  animation: none !important;
  box-shadow: none !important;
}

/* Exclusive Förmånstrappa in Cart Drawer */
.cart-reward-card-exclusive {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-theme="light"] .cart-reward-card-exclusive {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.cart-reward-header-exclusive {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-reward-title-exclusive {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.cart-reward-badge-exclusive {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-reward-badge-exclusive.tier1 {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.cart-reward-badge-exclusive.max {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.cart-reward-track-exclusive {
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

[data-theme="light"] .cart-reward-track-exclusive {
  background: #e2e8f0;
}

.cart-reward-fill-exclusive {
  height: 100%;
  background: #10b981;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.cart-reward-steps-exclusive {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cart-reward-steps-exclusive .step-label.active {
  color: #10b981;
  font-weight: 700;
}

.cart-reward-status-exclusive {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-secondary, #94a3b8);
}

.cart-reward-status-exclusive strong {
  color: var(--text-primary);
}

.cart-gift-box-exclusive {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gift-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
}

.gift-shelf-tag {
  font-size: 0.68rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.gift-shelf-tag:hover {
  color: var(--text-primary);
}

.gift-box-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gift-box-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-primary);
}

.gift-box-row .gift-val {
  font-weight: 700;
  color: #34d399;
}

/* Catalog Subtle Benefit Ribbon */
.catalog-bonus-ribbon-exclusive {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-primary);
  margin-bottom: 14px;
  gap: 10px;
}

[data-theme="light"] .catalog-bonus-ribbon-exclusive {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.ribbon-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ribbon-icon {
  font-size: 1rem;
}

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

.btn-ribbon-cart {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-ribbon-cart:hover {
  background: #10b981;
  color: #ffffff;
}

.btn-ribbon-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.btn-ribbon-close:hover {
  color: var(--text-primary);
}

/* Card Clean Exclusivity */
.product-card {
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover, rgba(255, 255, 255, 0.18));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.card-details {
  gap: 5px;
  margin-bottom: 10px;
}

.badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 5px;
}

/* Sleek primary action buttons */

.btn-add-cart {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
}

/* ========================================================
   RADICAL CLEAN SCANDINAVIAN DESKTOP & MOBILE STYLING
   ======================================================== */

/* Desktop: permanently suppress the floating bottom cart bar */
@media (min-width: 769px) {
  .sticky-cart-bar {
    display: none !important;
  }
}

/* Mobile: clean understated bottom cart bar */
@media (max-width: 768px) {
  .sticky-cart-bar {
    padding: 10px 16px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
  }

}

/* Clean Header Typography & Spacing */
.app-header {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}

.brand-group h1 {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.brand-group .subtitle {
  font-size: 0.78rem !important;
  color: var(--text-muted, #94a3b8) !important;
  margin-top: 2px !important;
}

/* Clean Search and Category Filter Container */
.controls-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}

.search-box {
  background: var(--input-bg, #1e293b) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 10px !important;
  max-width: 580px !important;
  margin-bottom: 14px !important;
}

.category-nav-wrap,
.brand-nav-wrap {
  margin-bottom: 8px;
}

.pill-group {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2px 0 !important;
}

.pill-group::-webkit-scrollbar {
  display: none !important;
}

.pill-group .pill {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary, #94a3b8) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 7px 15px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.pill-group .pill:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.pill-group .pill.active {
  background: var(--accent-cyan, #0ea5e9) !important;
  color: #ffffff !important;
  border-color: var(--accent-cyan, #0ea5e9) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

[data-theme="light"] .pill-group .pill {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .pill-group .pill:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .pill-group .pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

#brandPills .pill {
  font-size: 0.75rem !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
}

/* Footer Trust Bar */
.footer-trust-bar {
  margin: 32px 0 16px 0 !important;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  padding-top: 24px !important;
}

.cart-footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 8px !important;
  padding-top: 6px !important;
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
}

.cart-footer-note {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.01em !important;
}

.btn-cart-clear-muted {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  padding: 2px 4px !important;
  font-family: inherit !important;
  transition: color 0.15s ease !important;
}

.btn-cart-clear-muted:hover {
  color: #ef4444 !important;
}

.cart-reward-card-exclusive {
  margin: 10px 0 14px 0 !important;
}

[data-theme="light"] .btn-swish-checkout {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .btn-swish-checkout:hover {
  background: #1e293b !important;
}

/* ========================================================
   CARD TOP & ACTION BUTTONS SPECIFICATION
   Strictly encapsulates action buttons inside the card boundary,
   replaces emojis with sleek modern SVG icons, and prevents any
   spillover or clipping issues.
   ======================================================== */
.product-card {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.card-top-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.card-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.card-top-actions .btn-card-action,
.card-top-actions .btn-fav,
.card-top-actions .btn-compare,
.card-top-actions .btn-card-bag {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
  background: var(--input-bg, rgba(255, 255, 255, 0.05)) !important;
  color: var(--text-muted, #94a3b8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.card-top-actions .btn-card-action svg {
  display: block;
  pointer-events: none;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.15s ease, stroke 0.15s ease, fill 0.15s ease;
}

.card-top-actions .btn-card-action:hover {
  transform: translateY(-1px);
  border-color: var(--text-secondary, #cbd5e1) !important;
  color: var(--text-primary, #f8fafc) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.card-top-actions .btn-card-action:active {
  transform: scale(0.92);
}

/* Compare active state */
.card-top-actions .btn-compare.active {
  background: rgba(2, 132, 199, 0.15) !important;
  border-color: #0284c7 !important;
  color: #38bdf8 !important;
  opacity: 1 !important;
}
.card-top-actions .btn-compare.active svg {
  stroke: #38bdf8 !important;
}

/* Bag active state */
.card-top-actions .btn-card-bag.active {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
  opacity: 1 !important;
}
.card-top-actions .btn-card-bag.active svg {
  stroke: #818cf8 !important;
}

/* Favorite active state */
.card-top-actions .btn-fav.active {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  opacity: 1 !important;
}
.card-top-actions .btn-fav.active svg {
  stroke: #ef4444 !important;
  fill: #ef4444 !important;
  transform: scale(1.08);
}

/* Light Theme overrides */
[data-theme="light"] .card-top-actions .btn-card-action {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}
[data-theme="light"] .card-top-actions .btn-card-action:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
[data-theme="light"] .card-top-actions .btn-compare.active {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}
[data-theme="light"] .card-top-actions .btn-compare.active svg {
  stroke: #0284c7 !important;
}
[data-theme="light"] .card-top-actions .btn-card-bag.active {
  background: #ede9fe !important;
  border-color: #6366f1 !important;
  color: #6366f1 !important;
}
[data-theme="light"] .card-top-actions .btn-card-bag.active svg {
  stroke: #6366f1 !important;
}
[data-theme="light"] .card-top-actions .btn-fav.active {
  background: #ffe4e6 !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
[data-theme="light"] .card-top-actions .btn-fav.active svg {
  stroke: #ef4444 !important;
  fill: #ef4444 !important;
}

/* Light theme contrast defect fixes (DEFECT-CONTRAST-01 & DEFECT-CONTRAST-02) */

[data-theme="light"] .badge-shelf-clickable {
  color: #0369a1 !important;
}

/* Global touch target size compliance across all viewports including 768px tablet (DEFECT-TOUCH-01) */
.btn-card-bag,
.btn-add-cart,
.card-bottom-actions .btn-add-cart {
  min-height: 44px !important;
  box-sizing: border-box !important;
}

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

/* ================= MINIMALIST UI OVERRIDES (2026-09-27) ================= */
.caddy-match-box,

.caddy-match-badge,

.qv-arm-btn.active {
  background: var(--pill-active-bg) !important;
  border-color: var(--pill-active-bg) !important;
  color: var(--pill-active-text) !important;
  box-shadow: none !important;
}

.qv-arm-advice-box,

.arm-speed-progress-bg {
  background: var(--border-color) !important;
}
.arm-speed-progress-bar {
  background: var(--text-muted) !important;
}

.qv-arm-btn {
  background: var(--bg-main) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
/* ================= MORE MINIMALIST UI OVERRIDES & SCROLL FIX (2026-09-28) ================= */
.modal-card,
.quick-view-card {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.caddy-mini-traj-wrap {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.caddy-mini-traj-wrap:hover {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

.caddy-mini-traj-header {
  color: var(--text-secondary) !important;
}

.caddy-mini-traj-svg {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
}

.caddy-mini-traj-footer > span:first-child {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.caddy-mini-traj-hint {
  color: var(--text-secondary) !important;
}

/* --- USER REQUEST: PUTTER LAB CLEANUP & SCROLL FIX --- */

/* Mobile Scroll Fix & Top Readability for Modals */
.putter-selector-modal-card {
    overflow-y: auto !important;
    max-height: 90vh !important;
    height: auto !important;
}
.putter-selector-body {
    overflow-y: visible !important;
}

/* Quick View Top Cleanup (if this was the 'olsbar i toppen') */

/* Hide the pink PUTT & APPROACH LAB pill at the top to make it cleaner */
.putter-selector-header .admin-pill-badge {
    display: none !important;
}