/**
 * Microsoft Fluent 2 Design System Integration for FHC Marketplace & Books Showcase
 * Strict Compliance: F2DP-1.0 (Zero Hardcoded CSS, Dual-layer Shadows, Segoe UI Ramp)
 * Author: CÔNG TY TNHH CHÂN TRỜI TƯƠNG LAI
 */

@import url('fluent2-theme.css');

:root {
  --shelfLedgeTop: var(--colorNeutralBackground3);
  --shelfLedgeFront: var(--colorNeutralBackground5);
  --shelfLedgeShadow: 0 16px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --bookGroundShadow: 0 14px 20px -6px rgba(0, 0, 0, 0.28);
  --bookSpineGradient: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(255,255,255,0.2) 60%, rgba(0,0,0,0.3) 100%);
  --bookSheenGradient: linear-gradient(105deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 40%, transparent 60%);
  --bookDividerStroke: rgba(255, 255, 255, 0.2);

  /* Book Cover Rich Themes (Light Mode) */
  --bookCoverGoldBg: linear-gradient(145deg, #78350f 0%, #d97706 60%, #b45309 100%);
  --bookCoverGoldBase: #78350f;
  --bookCoverGoldFg: #ffffff;
  --bookCoverGoldBorder: rgba(251, 191, 36, 0.45);

  --bookCoverEditorialBg: linear-gradient(145deg, #1e1b4b 0%, #3730a3 60%, #4338ca 100%);
  --bookCoverEditorialBase: #1e1b4b;
  --bookCoverEditorialFg: #ffffff;
  --bookCoverEditorialBorder: rgba(165, 180, 252, 0.4);

  --bookCoverCyberBg: linear-gradient(145deg, #090d16 0%, #0f172a 60%, #1e293b 100%);
  --bookCoverCyberBase: #090d16;
  --bookCoverCyberFg: #38bdf8;
  --bookCoverCyberBorder: rgba(56, 189, 248, 0.45);

  --bookCoverSwissBg: linear-gradient(145deg, #881337 0%, #9f1239 60%, #be123c 100%);
  --bookCoverSwissBase: #881337;
  --bookCoverSwissFg: #ffffff;
  --bookCoverSwissBorder: rgba(251, 113, 133, 0.4);

  --bookCoverAcademicBg: linear-gradient(145deg, #064e3b 0%, #047857 60%, #059669 100%);
  --bookCoverAcademicBase: #064e3b;
  --bookCoverAcademicFg: #ffffff;
  --bookCoverAcademicBorder: rgba(52, 211, 153, 0.4);

  --bookCoverAutomotiveBg: linear-gradient(145deg, #18181b 0%, #27272a 60%, #3f3f46 100%);
  --bookCoverAutomotiveBase: #18181b;
  --bookCoverAutomotiveFg: #f87171;
  --bookCoverAutomotiveBorder: rgba(239, 68, 68, 0.45);

  --bookCoverPharmaBg: linear-gradient(145deg, #134e4a 0%, #0f766e 60%, #14b8a6 100%);
  --bookCoverPharmaBase: #134e4a;
  --bookCoverPharmaFg: #ffffff;
  --bookCoverPharmaBorder: rgba(45, 212, 191, 0.45);

  --bookCoverTravelBg: linear-gradient(145deg, #0c4a6e 0%, #0284c7 60%, #0369a1 100%);
  --bookCoverTravelBase: #0c4a6e;
  --bookCoverTravelFg: #ffffff;
  --bookCoverTravelBorder: rgba(56, 189, 248, 0.45);

  --bookCoverArchitectBg: linear-gradient(145deg, #292524 0%, #44403c 60%, #57534e 100%);
  --bookCoverArchitectBase: #292524;
  --bookCoverArchitectFg: #fef08a;
  --bookCoverArchitectBorder: rgba(250, 204, 21, 0.45);

  --heroGradientText: linear-gradient(135deg, #0078d4 0%, #004578 100%);
  --colorNeutralBackground3Hover: #e0e0e0;
}

[data-theme="dark"] {
  --shelfLedgeTop: #252525;
  --shelfLedgeFront: #181818;
  --shelfLedgeShadow: 0 20px 36px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.45);
  --bookGroundShadow: 0 14px 22px -6px rgba(0, 0, 0, 0.7);
  --bookSpineGradient: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0.15) 60%, rgba(0,0,0,0.5) 100%);
  --bookSheenGradient: linear-gradient(105deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 40%, transparent 60%);
  --bookDividerStroke: rgba(255, 255, 255, 0.15);

  /* Book Cover Rich Themes (Dark Mode) */
  --bookCoverGoldBg: linear-gradient(145deg, #451a03 0%, #92400e 60%, #78350f 100%);
  --bookCoverGoldBase: #451a03;
  --bookCoverGoldFg: #fef3c7;
  --bookCoverGoldBorder: rgba(245, 158, 11, 0.35);

  --bookCoverEditorialBg: linear-gradient(145deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
  --bookCoverEditorialBase: #0f172a;
  --bookCoverEditorialFg: #e0e7ff;
  --bookCoverEditorialBorder: rgba(99, 102, 241, 0.35);

  --bookCoverCyberBg: linear-gradient(145deg, #020617 0%, #0b1329 60%, #0f172a 100%);
  --bookCoverCyberBase: #020617;
  --bookCoverCyberFg: #38bdf8;
  --bookCoverCyberBorder: rgba(56, 189, 248, 0.35);

  --bookCoverSwissBg: linear-gradient(145deg, #4c0519 0%, #881337 60%, #9f1239 100%);
  --bookCoverSwissBase: #4c0519;
  --bookCoverSwissFg: #ffe4e6;
  --bookCoverSwissBorder: rgba(244, 63, 94, 0.35);

  --bookCoverAcademicBg: linear-gradient(145deg, #022c22 0%, #064e3b 60%, #065f46 100%);
  --bookCoverAcademicBase: #022c22;
  --bookCoverAcademicFg: #d1fae5;
  --bookCoverAcademicBorder: rgba(16, 185, 129, 0.35);

  --bookCoverAutomotiveBg: linear-gradient(145deg, #09090b 0%, #18181b 60%, #27272a 100%);
  --bookCoverAutomotiveBase: #09090b;
  --bookCoverAutomotiveFg: #fca5a5;
  --bookCoverAutomotiveBorder: rgba(239, 68, 68, 0.35);

  --bookCoverPharmaBg: linear-gradient(145deg, #042f2e 0%, #134e4a 60%, #0f766e 100%);
  --bookCoverPharmaBase: #042f2e;
  --bookCoverPharmaFg: #ccfbf1;
  --bookCoverPharmaBorder: rgba(20, 184, 166, 0.35);

  --bookCoverTravelBg: linear-gradient(145deg, #082f49 0%, #0c4a6e 60%, #0369a1 100%);
  --bookCoverTravelBase: #082f49;
  --bookCoverTravelFg: #e0f2fe;
  --bookCoverTravelBorder: rgba(14, 165, 233, 0.35);

  --bookCoverArchitectBg: linear-gradient(145deg, #1c1917 0%, #292524 60%, #44403c 100%);
  --bookCoverArchitectBase: #1c1917;
  --bookCoverArchitectFg: #fef9c3;
  --bookCoverArchitectBorder: rgba(234, 179, 8, 0.35);

  --heroGradientTextDark: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --colorNeutralBackground3Hover: #2d2d2d;
}

/* ── 1. GLOBAL FLUENT 2 MARKETPLACE CONTAINER & TYPOGRAPHY ──────────────────── */
:focus-visible {
  outline: 2px solid var(--colorStrokeFocus2);
  outline-offset: 2px;
}

.fhc-marketplace-body {
  font-family: var(--fontFamilyBase);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  transition: background-color var(--durationNormal) var(--curveEasyEase),
              color var(--durationNormal) var(--curveEasyEase);
}

/* ── 1.1 THEME TOGGLE BUTTON ────────────────────────────────────────────────── */
.fui-theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--borderRadiusMedium);
  border: 1px solid var(--colorNeutralStroke1);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  cursor: pointer;
  transition: all var(--durationFast) var(--curveEasyEase);
  font-size: var(--fontSizeSubtitle2);
}

.fui-theme-toggle-btn:hover {
  background-color: var(--colorNeutralBackground1Hover);
  border-color: var(--colorNeutralStroke1Hover);
  color: var(--colorBrandForeground1);
}

.fui-theme-toggle-btn .fui-icon-sun {
  display: none;
}
.fui-theme-toggle-btn .fui-icon-moon {
  display: inline-block;
}

[data-theme="dark"] .fui-theme-toggle-btn .fui-icon-moon {
  display: none;
}
[data-theme="dark"] .fui-theme-toggle-btn .fui-icon-sun {
  display: inline-block;
}

/* ── 1.2 MARKETPLACE COMPONENT INTEGRATION (FLUENT 2 UNIFIED) ───────────────── */
.fhc-mp-header {
  background-color: var(--colorNeutralBackground1);
  border-bottom: 1px solid var(--colorNeutralStroke2);
  transition: background-color var(--durationNormal) var(--curveEasyEase),
              border-color var(--durationNormal) var(--curveEasyEase);
}

.fhc-mp-logo-text {
  color: var(--colorNeutralForeground1);
}

.fhc-mp-nav-link {
  color: var(--colorNeutralForeground2);
}

.fhc-mp-nav-link:hover,
.fhc-mp-nav-link.active {
  color: var(--colorBrandForeground1);
  background-color: var(--colorBrandBackground2);
}

.fhc-mp-search-form {
  background-color: var(--colorNeutralBackground3);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusCircular);
}

.fhc-mp-search-form input {
  color: var(--colorNeutralForeground1);
  background: transparent;
  border: none;
}

.fhc-mp-search-form input::placeholder {
  color: var(--colorNeutralForeground4);
}

.fhc-mp-search-form:focus-within {
  background-color: var(--colorNeutralBackground1);
  border-color: var(--colorBrandStroke1);
  box-shadow: var(--shadow8);
}

.fhc-mp-cart-btn {
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground1);
}

.fhc-mp-cart-btn:hover {
  background-color: var(--colorNeutralBackground1Hover);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

.fhc-mp-hero {
  background-color: var(--colorNeutralBackground1);
  border-bottom: 1px solid var(--colorNeutralStroke2);
}

.fhc-mp-hero-title,
.fhc-mp-hero-headline {
  color: var(--colorNeutralForeground1);
}

.fhc-gradient-text {
  color: var(--colorBrandForeground1);
  background: var(--heroGradientText);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fhc-mp-hero-sub {
  color: var(--colorNeutralForeground3);
}

.fhc-hero-search-box,
.fhc-mp-hero-input-wrap {
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  box-shadow: var(--shadow16);
  border-radius: var(--borderRadiusCircular);
}

.fhc-hero-search-box input,
.fhc-mp-hero-input-wrap input {
  color: var(--colorNeutralForeground1);
  background: transparent;
}

.fhc-hero-search-box input::placeholder,
.fhc-mp-hero-input-wrap input::placeholder {
  color: var(--colorNeutralForeground4);
}

.fhc-hero-search-btn,
.fhc-mp-hero-btn {
  background-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
  border-radius: var(--borderRadiusCircular);
}

.fhc-hero-search-btn:hover,
.fhc-mp-hero-btn:hover {
  background-color: var(--colorBrandBackgroundHover);
}

.fhc-chips-label {
  color: var(--colorNeutralForeground3);
}

.fhc-quick-pill,
.fhc-chip {
  background-color: var(--colorNeutralBackground2);
  border: 1px solid var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground2);
  border-radius: var(--borderRadiusCircular);
  transition: all var(--durationFast) var(--curveEasyEase);
}

.fhc-quick-pill:hover,
.fhc-chip:hover {
  background-color: var(--colorNeutralBackground3Hover);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

/* Category Cards */
.fhc-mp-cat-card {
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  box-shadow: var(--shadow2);
  border-radius: var(--borderRadiusLarge);
}

.fhc-mp-cat-card:hover {
  border-color: var(--colorBrandStroke1);
  box-shadow: var(--shadow8);
  transform: translateY(-2px);
}

.fhc-mp-cat-name {
  color: var(--colorNeutralForeground1);
}

.fhc-mp-cat-desc,
.fhc-mp-cat-outcome {
  color: var(--colorNeutralForeground3);
}

/* Section Headings */
.fhc-mp-section-title {
  color: var(--colorNeutralForeground1);
}

.fhc-mp-section-desc {
  color: var(--colorNeutralForeground3);
}

.fhc-mp-section-eyebrow {
  color: var(--colorBrandForeground1);
  background-color: var(--colorBrandBackground2);
  border: 1px solid var(--colorBrandStroke2);
  border-radius: var(--borderRadiusCircular);
}

/* Product Cards */
.fhc-mp-card {
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  box-shadow: var(--shadow2);
  border-radius: var(--borderRadiusLarge);
}

.fhc-mp-card:hover {
  box-shadow: var(--shadow8);
  border-color: var(--colorNeutralStroke1Hover);
}

.fhc-mp-card-title {
  color: var(--colorNeutralForeground1);
}

.fhc-mp-card-desc {
  color: var(--colorNeutralForeground3);
}

.fhc-price-val {
  color: var(--colorBrandForeground1);
}

.fhc-mp-card-footer {
  border-top: 1px solid var(--colorNeutralStroke2);
}

/* Persona and Tabs */
.fhc-tab-btn {
  background-color: var(--colorNeutralBackground2);
  border: 1px solid var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground2);
  border-radius: var(--borderRadiusMedium);
}

.fhc-tab-btn:hover,
.fhc-tab-btn.active {
  background-color: var(--colorBrandBackground2);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

.fhc-mp-persona-card {
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  box-shadow: var(--shadow2);
  border-radius: var(--borderRadiusLarge);
}

.fhc-mp-persona-card:hover {
  box-shadow: var(--shadow8);
  border-color: var(--colorBrandStroke1);
}

/* Footer */
.fhc-mp-footer {
  background-color: var(--colorNeutralBackground2);
  border-top: 1px solid var(--colorNeutralStroke2);
}

.fhc-mp-col-title {
  color: var(--colorNeutralForeground1);
}

.fhc-mp-links a {
  color: var(--colorNeutralForeground3);
}

.fhc-mp-links a:hover {
  color: var(--colorBrandForeground1);
}

.fhc-mp-bottom-bar {
  border-top: 1px solid var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground4);
}

/* ── 1.3 DARK THEME EXPLICIT OVERRIDES FOR MARKETPLACE ──────────────────────── */
[data-theme="dark"] .fhc-marketplace-body {
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fhc-mp-header {
  background-color: var(--colorNeutralBackground1);
  border-bottom-color: var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-hero {
  background: var(--colorNeutralBackground1);
  border-bottom-color: var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-hero-title,
[data-theme="dark"] .fhc-mp-hero-headline,
[data-theme="dark"] .fhc-mp-section-title,
[data-theme="dark"] .fhc-mp-cat-name,
[data-theme="dark"] .fhc-mp-card-title,
[data-theme="dark"] .fhc-mp-title a,
[data-theme="dark"] .fhc-mp-persona-name,
[data-theme="dark"] .fhc-mp-persona-headline {
  color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fhc-gradient-text {
  color: var(--colorBrandForeground1);
  background: var(--heroGradientTextDark);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .fhc-mp-title a:hover {
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-mp-hero-sub,
[data-theme="dark"] .fhc-mp-section-desc,
[data-theme="dark"] .fhc-mp-cat-desc,
[data-theme="dark"] .fhc-mp-cat-outcome,
[data-theme="dark"] .fhc-mp-card-desc,
[data-theme="dark"] .fhc-mp-outcome,
[data-theme="dark"] .fhc-mp-sales-num,
[data-theme="dark"] .fhc-sales-num,
[data-theme="dark"] .fhc-mp-persona-desc,
[data-theme="dark"] .fhc-mp-persona-count {
  color: var(--colorNeutralForeground3);
}

[data-theme="dark"] .fhc-chips-label {
  color: var(--colorNeutralForeground3);
}

[data-theme="dark"] .fhc-chip,
[data-theme="dark"] .fhc-quick-pill {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
  border: 1px solid var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-chip:hover,
[data-theme="dark"] .fhc-quick-pill:hover {
  background-color: var(--colorNeutralBackground3Hover);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-mp-hero-search-box,
[data-theme="dark"] .fhc-hero-search-box,
[data-theme="dark"] .fhc-mp-hero-input-wrap {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke1);
}

[data-theme="dark"] .fhc-mp-hero-input-wrap input,
[data-theme="dark"] .fhc-hero-search-box input {
  color: var(--colorNeutralForeground1);
  background: transparent;
}

[data-theme="dark"] .fhc-mp-hero-input-wrap input::placeholder,
[data-theme="dark"] .fhc-hero-search-box input::placeholder {
  color: var(--colorNeutralForeground4);
}

[data-theme="dark"] .fhc-search-icon {
  stroke: var(--colorNeutralForeground3);
}

[data-theme="dark"] .fhc-mp-cat-pill,
[data-theme="dark"] .fhc-mp-tag {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  border: 1px solid var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-delivery-bar {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  border-top: 1px solid var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-creator-name {
  color: var(--colorNeutralForeground2);
}

[data-theme="dark"] .fhc-rate-num,
[data-theme="dark"] .fhc-mp-rate-score {
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightBold);
}

[data-theme="dark"] .fhc-mp-card-meta {
  color: var(--colorNeutralForeground3);
}

[data-theme="dark"] .fhc-mp-card-footer {
  background-color: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground3);
  border-top-color: var(--colorNeutralStroke3);
}

[data-theme="dark"] .fhc-mp-section {
  background-color: var(--colorNeutralBackground1);
}

[data-theme="dark"] .fhc-mp-cat-card {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-cat-icon {
  background-color: var(--colorNeutralBackground3);
  border: 1px solid var(--colorNeutralStroke2);
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-mp-cat-count {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
  border: 1px solid var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-card {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-persona-card {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-footer {
  background-color: var(--colorNeutralBackground2);
  border-top-color: var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-footer-title {
  color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fhc-mp-footer-desc,
[data-theme="dark"] .fhc-mp-contact-info,
[data-theme="dark"] .fhc-trust-badge-footer {
  color: var(--colorNeutralForeground3);
}

[data-theme="dark"] .fhc-trust-badge-footer {
  background-color: var(--colorNeutralBackground3);
  border: 1px solid var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-mp-contact-info strong {
  color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fhc-mp-contact-info a {
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-mp-footer-links a {
  color: var(--colorNeutralForeground2);
}

[data-theme="dark"] .fhc-mp-footer-links a:hover {
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-mp-footer-bottom {
  color: var(--colorNeutralForeground3);
  border-top-color: var(--colorNeutralStroke3);
}

[data-theme="dark"] .fhc-mp-footer-badges span {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  border: 1px solid var(--colorNeutralStroke2);
}

[data-theme="dark"] .fhc-tab-btn {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground2);
}

[data-theme="dark"] .fhc-tab-btn.active {
  background-color: var(--colorBrandBackground2);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-mp-card-price,
[data-theme="dark"] .fhc-price-val,
[data-theme="dark"] .fhc-mp-price {
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-card-btn-outline {
  background-color: transparent;
  border-color: var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fhc-card-btn-outline:hover {
  background-color: var(--colorNeutralBackground1Hover);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fhc-btn-buy {
  background-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}

[data-theme="dark"] .fhc-btn-buy:hover {
  background-color: var(--colorBrandBackgroundHover);
}

[data-theme="dark"] .fhc-btn-ajax-add {
  background-color: var(--colorNeutralBackground3) !important;
  border-color: var(--colorNeutralStroke2) !important;
  color: var(--colorBrandForeground1) !important;
}

[data-theme="dark"] .fhc-btn-ajax-add:hover {
  background-color: var(--colorNeutralBackground3Hover) !important;
  border-color: var(--colorBrandStroke1) !important;
}

/* ── 2. DEDICATED BOOKS & PLAYBOOK SHOWCASE SECTION ───────────────────────── */
.fui-books-section {
  padding: var(--spacingVerticalXXXL) 0;
  background-color: var(--colorNeutralBackground2);
  border-top: 1px solid var(--colorNeutralStroke2);
  border-bottom: 1px solid var(--colorNeutralStroke2);
  position: relative;
  overflow: hidden;
}

/* Background ambient light reflection */
.fui-books-section::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 30%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--colorBrandBackground2) 0%, transparent 70%);
  opacity: 0.45;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.fui-books-section .fhc-mp-container {
  position: relative;
  z-index: 1;
}

/* Section Header */
.fui-books-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--spacingVerticalXXXL);
}

.fui-books-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
  padding: var(--spacingVerticalXS) var(--spacingHorizontalM);
  border-radius: var(--borderRadiusCircular);
  background-color: var(--colorBrandBackground2);
  color: var(--colorBrandForeground1);
  border: 1px solid var(--colorBrandStroke2);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightSemibold);
  letter-spacing: 0.05em;
  margin-bottom: var(--spacingVerticalM);
}

.fui-books-title {
  font-size: var(--fontSizeTitle1);
  line-height: var(--lineHeightTitle1);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
  letter-spacing: -0.025em;
  margin-bottom: var(--spacingVerticalM);
}

.fui-books-title span {
  color: var(--colorBrandForeground1);
}

.fui-books-desc {
  font-size: var(--fontSizeSubtitle2);
  line-height: var(--lineHeightSubtitle2);
  color: var(--colorNeutralForeground3);
  margin: 0 auto;
}

/* ── 3. FLAGSHIP SPLIT CARD (2.5D CANVAS) ─────────────────────────────────── */
.fui-flagship-card {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: var(--spacingHorizontalXXXL);
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  box-shadow: var(--shadow16);
  padding: var(--spacingVerticalXXXL);
  margin-bottom: var(--spacingVerticalXXXL);
  align-items: center;
  position: relative;
  transition: box-shadow var(--durationNormal) var(--curveEasyEase);
}

.fui-flagship-card:hover {
  box-shadow: var(--shadow28);
}

/* Left: 3D Visual Area */
.fui-flagship-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--colorNeutralBackground2), var(--colorNeutralBackground3));
  border: 1px solid var(--colorNeutralStroke3);
  border-radius: var(--borderRadiusLarge);
  padding: var(--spacingVerticalXL) var(--spacingHorizontalL);
  position: relative;
}

.fui-flagship-mockup-wrapper {
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fui-flagship-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.28));
  transition: transform var(--durationNormal) var(--curveEasyEase);
}

.fui-flagship-card:hover .fui-flagship-img {
  transform: translateY(-8px) scale(1.02);
}

.fui-flagship-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacingHorizontalSNudge);
  margin-top: var(--spacingVerticalL);
  justify-content: center;
}

.fui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
  padding: 4px 10px;
  border-radius: var(--borderRadiusMedium);
  font-size: var(--fontSizeCaption2);
  line-height: var(--lineHeightCaption2);
  font-weight: var(--fontWeightBold);
  letter-spacing: 0.04em;
}

.fui-tag-primary {
  background-color: var(--colorBrandBackground2);
  color: var(--colorBrandForeground1);
  border: 1px solid var(--colorBrandStroke2);
}

.fui-tag-neutral {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  border: 1px solid var(--colorNeutralStroke3);
}

.fui-tag-success {
  background-color: var(--colorStatusSuccessBackground);
  color: var(--colorStatusSuccessForeground);
  border: 1px solid var(--colorNeutralStroke3);
}

/* Right: Flagship Content Area */
.fui-flagship-content {
  display: flex;
  flex-direction: column;
}

.fui-flagship-category {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightBold);
  color: var(--colorBrandForeground1);
  letter-spacing: 0.06em;
  margin-bottom: var(--spacingVerticalS);
}

.fui-flagship-book-title {
  font-size: var(--fontSizeTitle2);
  line-height: var(--lineHeightTitle2);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacingVerticalM);
}

.fui-flagship-subtitle {
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  color: var(--colorNeutralForeground3);
  margin-bottom: var(--spacingVerticalL);
}

/* Author Persona */
.fui-persona-box {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
  background-color: var(--colorNeutralBackground2);
  border: 1px solid var(--colorNeutralStroke3);
  border-radius: var(--borderRadiusLarge);
  width: fit-content;
  margin-bottom: var(--spacingVerticalL);
}

.fui-persona-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--borderRadiusCircular);
  background-color: var(--colorBrandBackground);
  color: var(--colorBrandForegroundInverted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fontSizeSubtitle2);
}

.fui-persona-meta {
  display: flex;
  flex-direction: column;
}

.fui-persona-name {
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
}

.fui-verified-icon {
  color: var(--colorBrandForeground1);
  font-size: var(--fontSizeCaption1);
}

.fui-persona-sub {
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  color: var(--colorNeutralForeground3);
}

/* Deliverables Checklist */
.fui-book-deliverables {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacingVerticalXL) 0;
  display: grid;
  gap: var(--spacingVerticalMNudge);
}

.fui-book-deliverables li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacingHorizontalM);
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  color: var(--colorNeutralForeground2);
}

.fui-book-deliverables li i {
  color: var(--colorStatusSuccessForeground);
  font-size: var(--fontSizeSubtitle2);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Pricing & CTA Row */
.fui-flagship-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacingHorizontalL);
  padding-top: var(--spacingVerticalL);
  border-top: 1px solid var(--colorNeutralStroke2);
  margin-bottom: var(--spacingVerticalM);
}

.fui-flagship-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--spacingHorizontalMNudge);
}

.fui-flagship-price-val {
  font-size: var(--fontSizeLargeTitle);
  line-height: var(--lineHeightLargeTitle);
  font-weight: var(--fontWeightBold);
  color: var(--colorBrandForeground1);
  letter-spacing: -0.03em;
}

.fui-flagship-price-tag {
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightBold);
  padding: 3px 8px;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorStatusSuccessBackground);
  color: var(--colorStatusSuccessForeground);
  letter-spacing: 0.04em;
}

.fui-flagship-btn-group {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
}

.fui-btn-action-primary {
  min-height: 48px;
  padding: 0 var(--spacingHorizontalXL);
  background-color: var(--colorBrandBackground);
  color: var(--colorBrandForegroundInverted);
  border: 1px solid var(--colorBrandStroke1);
  border-radius: var(--borderRadiusMedium);
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  font-weight: var(--fontWeightBold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalMNudge);
  text-decoration: none;
  box-shadow: var(--shadow4);
  transition: background-color var(--durationFast) var(--curveEasyEase),
              box-shadow var(--durationFast) var(--curveEasyEase);
}

.fui-btn-action-primary:hover {
  background-color: var(--colorBrandBackgroundHover);
  box-shadow: var(--shadow8);
  color: var(--colorBrandForegroundInverted);
}

.fui-btn-action-secondary {
  min-height: 48px;
  padding: 0 var(--spacingHorizontalL);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  font-weight: var(--fontWeightSemibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalSNudge);
  text-decoration: none;
  transition: background-color var(--durationFast) var(--curveEasyEase),
              border-color var(--durationFast) var(--curveEasyEase);
}

.fui-btn-action-secondary:hover {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke1Hover);
  color: var(--colorBrandForeground1);
}

.fui-flagship-guarantee {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  color: var(--colorNeutralForeground3);
}

.fui-flagship-guarantee i {
  color: var(--colorStatusSuccessForeground);
}

/* ── 2. DEDICATED BOOKSHELF CAROUSEL SHEET SECTION (FLUENT 2) ────────────── */
.fui-bookshelf-section {
  padding: var(--spacingVerticalXXXL) 0;
  background-color: var(--colorNeutralBackground2);
  border-top: 1px solid var(--colorNeutralStroke2);
  border-bottom: 1px solid var(--colorNeutralStroke2);
  position: relative;
  overflow: hidden;
  scroll-margin-top: 80px;
}

[data-theme="dark"] .fui-bookshelf-section {
  background-color: var(--colorNeutralBackground1);
  border-top-color: var(--colorNeutralStroke2);
  border-bottom-color: var(--colorNeutralStroke2);
}

/* Background ambient light reflection */
.fui-bookshelf-section::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 30%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--colorBrandBackground2) 0%, transparent 70%);
  opacity: 0.45;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.fui-bookshelf-section .fhc-mp-container {
  position: relative;
  z-index: 1;
}

/* Section Header */
.fui-bookshelf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacingHorizontalXXL);
  margin-bottom: var(--spacingVerticalXXL);
}

.fui-bookshelf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalSNudge);
  padding: var(--spacingVerticalXS) var(--spacingHorizontalM);
  border-radius: var(--borderRadiusCircular);
  background-color: var(--colorBrandBackground2);
  color: var(--colorBrandForeground1);
  border: 1px solid var(--colorBrandStroke2);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightSemibold);
  letter-spacing: 0.05em;
  margin-bottom: var(--spacingVerticalS);
}

.fui-bookshelf-title {
  font-size: var(--fontSizeTitle1);
  line-height: var(--lineHeightTitle1);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
  letter-spacing: -0.025em;
  margin-bottom: var(--spacingVerticalSNudge);
}

.fui-bookshelf-title span {
  color: var(--colorBrandForeground1);
}

.fui-bookshelf-desc {
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  color: var(--colorNeutralForeground3);
  max-width: 680px;
  margin: 0;
}

/* Controls */
.fui-shelf-controls {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  flex-shrink: 0;
}

.fui-shelf-counter {
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground3);
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  padding: var(--spacingVerticalXS) var(--spacingHorizontalM);
  border-radius: var(--borderRadiusCircular);
  white-space: nowrap;
}

[data-theme="dark"] .fui-shelf-counter {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground2);
}

.fui-shelf-btn-group {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
}

.fui-shelf-arrow {
  width: 40px;
  height: 40px;
  border-radius: var(--borderRadiusCircular);
  border: 1px solid var(--colorNeutralStroke1);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--durationFast) var(--curveEasyEase);
  font-size: var(--fontSizeSubtitle2);
  box-shadow: var(--shadow2);
}

.fui-shelf-arrow:hover {
  background-color: var(--colorBrandBackground2);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
  box-shadow: var(--shadow8);
  transform: translateY(-2px);
}

.fui-shelf-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

[data-theme="dark"] .fui-shelf-arrow {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fui-shelf-arrow:hover {
  background-color: var(--colorBrandBackground2);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

/* ── 2.1 INTEGRATED FLUENT 2 SHOWCASE CAROUSEL ───────────────────────────────── */
.fui-shelf-brand-ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  margin: 0 0 var(--spacingVerticalM);
  padding: 6px var(--spacingHorizontalL);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow2);
  color: var(--colorNeutralForeground3);
  font-size: var(--fontSizeCaption2);
  font-weight: var(--fontWeightBold);
  letter-spacing: .1em;
}

.fui-bookshelf-stage {
  position: relative;
  padding-bottom: var(--spacingVerticalL);
}

.fui-bookshelf-track {
  display: flex;
  gap: var(--spacingHorizontalL);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px var(--spacingVerticalM);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}

.fui-bookshelf-track::-webkit-scrollbar {
  display: none;
}

.fui-shelf-item {
  flex: 0 0 clamp(304px, 25vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusLarge);
  box-shadow: var(--shadow4);
  transition: border-color var(--durationFast) var(--curveEasyEase), box-shadow var(--durationFast) var(--curveEasyEase), transform var(--durationFast) var(--curveEasyEase);
}

.fui-shelf-item.is-featured-flagship {
  flex-basis: clamp(304px, 25vw, 320px);
}

.fui-shelf-item:hover {
  border-color: var(--colorBrandStroke1);
  box-shadow: var(--shadow16);
  transform: translateY(-2px);
}

[data-theme="dark"] .fui-shelf-item {
  background: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
}

/* The book is elevated inside its own card surface, rather than a detached shelf. */
.fui-shelf-book-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 286px;
  justify-content: flex-end;
  perspective: 1000px;
  z-index: 1;
  padding: var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalM);
  background: linear-gradient(180deg, var(--colorNeutralBackground1Hover) 0%, var(--colorNeutralBackground1) 100%);
  border-bottom: 1px solid var(--colorNeutralStroke3);
}

.fui-shelf-free-pill {
  position: absolute;
  top: 8px;
  right: -30px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  padding: 2px var(--spacingHorizontalM);
  background-color: var(--colorStatusDangerBackground);
  color: var(--colorStatusDangerForeground);
  border: 1px solid var(--colorStatusDangerBorder);
  border-radius: var(--borderRadiusCircular);
  font-size: var(--fontSizeCaption2);
  line-height: var(--lineHeightCaption2);
  font-weight: var(--fontWeightBold);
  box-shadow: var(--shadow4);
  white-space: nowrap;
}

.fui-3d-book-wrap {
  position: relative;
  transition: transform var(--durationNormal) var(--curveEasyEase);
  cursor: pointer;
}

.fui-shelf-item:hover .fui-3d-book-wrap {
  transform: translateY(-6px) scale(1.03);
}

.fui-3d-book-img {
  display: block;
  width: 220px;
  height: auto;
  max-height: 232px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
}

.fui-book-ground-shadow {
  width: 190px;
  height: 12px;
  background: var(--bookGroundShadow);
  border-radius: var(--borderRadiusCircular);
  filter: blur(4px);
  margin-top: -6px;
  transition: all var(--durationNormal) var(--curveEasyEase);
}

.fui-shelf-item:hover .fui-book-ground-shadow {
  transform: scale(1.1);
  filter: blur(8px);
}

/* CSS 3D Standing Book Jacket */
.fui-standing-book {
  width: 180px;
  height: 240px;
  position: relative;
  transform: perspective(700px) rotateY(-16deg);
  transform-origin: left center;
  box-shadow: var(--shadow16);
  border-radius: 0 var(--borderRadiusSmall) var(--borderRadiusSmall) 0;
  overflow: hidden;
  display: flex;
}

.fui-book-spine {
  width: 14px;
  height: 100%;
  background: var(--bookSpineGradient);
  flex-shrink: 0;
}

.fui-book-front {
  flex-grow: 1;
  padding: var(--spacingVerticalL) var(--spacingHorizontalM);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background-color: var(--colorNeutralBackground1);
}

.fui-book-sheen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bookSheenGradient);
  pointer-events: none;
}

.fui-book-front-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fontSizeCaption2);
}

.fui-book-brand-tag {
  font-size: var(--fontSizeCaption2);
  font-weight: var(--fontWeightBold);
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.fui-book-front-title {
  font-size: var(--fontSizeSubtitle2);
  line-height: var(--lineHeightSubtitle2);
  font-weight: var(--fontWeightBold);
  margin: var(--spacingVerticalM) 0;
  letter-spacing: -0.02em;
}

.fui-book-front-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fontSizeCaption2);
  font-weight: var(--fontWeightSemibold);
  padding-top: var(--spacingVerticalS);
  border-top: 1px solid var(--bookDividerStroke);
}

/* Themes for Standing Books */
.fui-theme-gold { background-color: var(--bookCoverGoldBase); }
.fui-theme-gold .fui-book-front {
  background: var(--bookCoverGoldBg);
  color: var(--bookCoverGoldFg);
  border: 1px solid var(--bookCoverGoldBorder);
}

.fui-theme-editorial { background-color: var(--bookCoverEditorialBase); }
.fui-theme-editorial .fui-book-front {
  background: var(--bookCoverEditorialBg);
  color: var(--bookCoverEditorialFg);
  border: 1px solid var(--bookCoverEditorialBorder);
}

.fui-theme-cyber { background-color: var(--bookCoverCyberBase); }
.fui-theme-cyber .fui-book-front {
  background: var(--bookCoverCyberBg);
  color: var(--bookCoverCyberFg);
  border: 1px solid var(--bookCoverCyberBorder);
}

.fui-theme-swiss { background-color: var(--bookCoverSwissBase); }
.fui-theme-swiss .fui-book-front {
  background: var(--bookCoverSwissBg);
  color: var(--bookCoverSwissFg);
  border: 1px solid var(--bookCoverSwissBorder);
}

.fui-theme-academic { background-color: var(--bookCoverAcademicBase); }
.fui-theme-academic .fui-book-front {
  background: var(--bookCoverAcademicBg);
  color: var(--bookCoverAcademicFg);
  border: 1px solid var(--bookCoverAcademicBorder);
}

.fui-theme-automotive { background-color: var(--bookCoverAutomotiveBase); }
.fui-theme-automotive .fui-book-front {
  background: var(--bookCoverAutomotiveBg);
  color: var(--bookCoverAutomotiveFg);
  border: 1px solid var(--bookCoverAutomotiveBorder);
}

.fui-theme-pharma { background-color: var(--bookCoverPharmaBase); }
.fui-theme-pharma .fui-book-front {
  background: var(--bookCoverPharmaBg);
  color: var(--bookCoverPharmaFg);
  border: 1px solid var(--bookCoverPharmaBorder);
}

.fui-theme-travel { background-color: var(--bookCoverTravelBase); }
.fui-theme-travel .fui-book-front {
  background: var(--bookCoverTravelBg);
  color: var(--bookCoverTravelFg);
  border: 1px solid var(--bookCoverTravelBorder);
}

.fui-theme-architect { background-color: var(--bookCoverArchitectBase); }
.fui-theme-architect .fui-book-front {
  background: var(--bookCoverArchitectBg);
  color: var(--bookCoverArchitectFg);
  border: 1px solid var(--bookCoverArchitectBorder);
}

/* ── 2.2 SHOWCASE DETAIL SURFACE ────────────────────────────────────────────── */
.fui-shelf-sheet-card {
  width: 100%;
  margin-top: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--spacingVerticalL);
  box-shadow: none;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  transition: all var(--durationFast) var(--curveEasyEase);
}

[data-theme="dark"] .fui-shelf-sheet-card {
  background: transparent;
  border-color: transparent;
}

.fui-sheet-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacingVerticalS);
}

.fui-sheet-pages {
  font-size: var(--fontSizeCaption2);
  line-height: var(--lineHeightCaption2);
  color: var(--colorNeutralForeground3);
  font-weight: var(--fontWeightSemibold);
}

.fui-sheet-title {
  font-size: var(--fontSizeBody1);
  line-height: var(--lineHeightBody1);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
  margin-bottom: var(--spacingVerticalXS);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 40px;
}

.fui-sheet-desc {
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  color: var(--colorNeutralForeground3);
  margin-bottom: var(--spacingVerticalL);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 32px;
}

.fui-sheet-footer {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacingVerticalM);
  border-top: 1px solid var(--colorNeutralStroke3);
  gap: var(--spacingHorizontalS);
}

[data-theme="dark"] .fui-sheet-footer {
  border-top-color: var(--colorNeutralStroke2);
}

.fui-sheet-pricing {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fui-sheet-price-val {
  font-size: var(--fontSizeSubtitle1);
  line-height: var(--lineHeightSubtitle1);
  font-weight: var(--fontWeightBold);
  color: var(--colorBrandForeground1);
}

.fui-sheet-price-tag {
  font-size: var(--fontSizeCaption2);
  line-height: var(--lineHeightCaption2);
  color: var(--colorStatusSuccessForeground);
  font-weight: var(--fontWeightBold);
}

.fui-sheet-btn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: stretch;
  gap: var(--spacingHorizontalXS);
  min-width: 0;
}

.fui-btn-shelf-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  min-height: 44px;
  padding: var(--spacingVerticalXS) 8px;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightBold);
  text-decoration: none;
  transition: all var(--durationFast) var(--curveEasyEase);
  box-shadow: var(--shadow2);
}

.fui-btn-shelf-primary:hover {
  background-color: var(--colorBrandBackgroundHover);
  box-shadow: var(--shadow4);
}

.fui-btn-shelf-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  min-height: 44px;
  padding: var(--spacingVerticalXS) 6px;
  border-radius: var(--borderRadiusMedium);
  border: 1px solid var(--colorNeutralStroke1);
  background-color: transparent;
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightSemibold);
  text-decoration: none;
  transition: all var(--durationFast) var(--curveEasyEase);
}

.fui-btn-shelf-secondary:hover {
  background-color: var(--colorNeutralBackground1Hover);
  border-color: var(--colorBrandStroke1);
  color: var(--colorBrandForeground1);
}

[data-theme="dark"] .fui-btn-shelf-secondary {
  border-color: var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground2);
}

[data-theme="dark"] .fui-btn-shelf-secondary:hover {
  background-color: var(--colorNeutralBackground2Hover);
  color: var(--colorNeutralForeground1);
}

/* ── 2.4 BOTTOM TRUST BAR ─────────────────────────────────────────────────── */
.fui-bookshelf-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacingVerticalXXL);
  padding: var(--spacingVerticalM) var(--spacingHorizontalXL);
  background-color: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusLarge);
  box-shadow: var(--shadow2);
  gap: var(--spacingHorizontalL);
}

[data-theme="dark"] .fui-bookshelf-bottom-bar {
  background-color: var(--colorNeutralBackground2);
  border-color: var(--colorNeutralStroke2);
}

.fui-shelf-trust-info {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  color: var(--colorNeutralForeground3);
}

.fui-shelf-trust-info strong {
  color: var(--colorNeutralForeground1);
}

.fui-shelf-bundle-link {
  font-size: var(--fontSizeCaption1);
  line-height: var(--lineHeightCaption1);
  font-weight: var(--fontWeightBold);
  color: var(--colorBrandForeground1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  white-space: nowrap;
}

.fui-shelf-bundle-link:hover {
  color: var(--colorBrandForeground1Hover);
}

/* ── 2.5 RESPONSIVE MEDIA QUERIES ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .fui-bookshelf-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .fui-bookshelf-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .fui-bookshelf-header {
    gap: var(--spacingVerticalM);
  }
  .fui-shelf-controls {
    width: 100%;
    justify-content: center;
    gap: var(--spacingHorizontalL);
    padding-right: 80px;
  }
  .fui-shelf-arrow {
    width: 44px;
    height: 44px;
  }
  .fui-bookshelf-track {
    gap: var(--spacingHorizontalM);
    padding: 4px 0 var(--spacingVerticalM);
  }
  .fui-shelf-item,
  .fui-shelf-item.is-featured-flagship {
    flex-basis: min(304px, calc(100vw - 48px));
  }
  .fui-shelf-book-stand {
    height: 244px;
    padding-top: var(--spacingVerticalM);
  }
  .fui-3d-book-img {
    width: 176px;
    max-height: 202px;
  }
  .fui-standing-book {
    width: 150px;
    height: 202px;
  }
  .fui-shelf-sheet-card {
    padding: var(--spacingVerticalL);
  }
}

@media (max-width: 640px) {
  .fui-bookshelf-title {
    font-size: var(--fontSizeTitle2);
    line-height: var(--lineHeightTitle2);
  }
  .fui-shelf-brand-ribbon {
    margin-bottom: var(--spacingVerticalS);
    font-size: 10px;
    letter-spacing: .07em;
  }
  .fui-sheet-footer {
    grid-template-columns: 1fr;
  }
  .fui-sheet-btn-row {
    grid-template-columns: minmax(0, 1fr) 76px;
  }
}