/* ==========================================================================
   Aurelia Books - Warm Light Mode Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-warm-main: #faf8f5;
  --bg-warm-card: #ffffff;
  --bg-warm-surface: #f4f0ea;
  --border-warm: rgba(217, 119, 6, 0.18);
  --text-main: #1c1917;
  --text-muted: #78716c;
  --amber-accent: #d97706;
}

body {
  background-color: var(--bg-warm-main);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* ── Custom Light Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f4f0ea;
}
::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 9999px;
  border: 2px solid #f4f0ea;
}
::-webkit-scrollbar-thumb:hover {
  background: #d97706;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

/* ── Light Aesthetics & Soft Glass Panels ───────────────────────────────── */
.light-glass-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 119, 6, 0.15);
  box-shadow: 0 10px 30px -5px rgba(28, 25, 23, 0.05);
}

.light-glass-panel-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.light-glass-panel-hover:hover {
  background: #ffffff;
  border-color: rgba(217, 119, 6, 0.4);
  box-shadow: 0 20px 40px -10px rgba(217, 119, 6, 0.12);
  transform: translateY(-4px);
}

.gold-text-gradient {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-hero-bg {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #fde68a 100%);
}

/* ── Pagination Buttons ─────────────────────────────────────────────────── */
.pagination-btn {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #57534e;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.pagination-btn:hover:not(:disabled):not(.active) {
  background: #fef3c7;
  color: #b45309;
  border-color: #f59e0b;
}

.pagination-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  border-color: #d97706;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Form Inputs ────────────────────────────────────────────────────────── */
.admin-input, .warm-light-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1c1917;
  transition: all 0.2s ease;
  outline: none;
}

.admin-input:focus, .warm-light-input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
  background: #ffffff;
}

.admin-input::placeholder, .warm-light-input::placeholder {
  color: #a8a29e;
}

select.admin-input, select.warm-light-input {
  appearance: auto;
}

textarea.admin-input, textarea.warm-light-input {
  resize: vertical;
  min-height: 70px;
}

/* ── Aurelia / Redex-inspired visual system ────────────────────────────── */
:root {
  --ink: #17171c;
  --muted: #747585;
  --violet: #5b55e7;
  --violet-dark: #4b45d4;
  --lavender: #eeedff;
  --peach: #fff0e0;
  --ice: #e6f8fb;
  --rose: #ffdce7;
}

html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, .font-serif {
  font-family: 'Manrope', sans-serif;
}
body { background: #fbfbfd; color: var(--ink); }
::selection { background: var(--violet); color: #fff; }

.store-header {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(91,85,231,.1) !important;
  box-shadow: 0 8px 30px rgba(34,31,92,.05) !important;
}
.store-header > div { min-height: 72px; }
.store-header .bg-gradient-to-br {
  background: var(--violet) !important;
  border-radius: 12px !important;
}
.store-header .text-amber-700, .store-header .text-amber-800, .store-header .text-amber-900 { color: var(--violet-dark) !important; }
.store-header .border-amber-700 { border-color: var(--violet) !important; }
.store-header input:focus { border-color: var(--violet) !important; box-shadow: 0 0 0 3px rgba(91,85,231,.12) !important; }
.store-header button.bg-gradient-to-r { background: var(--violet) !important; box-shadow: 0 8px 20px rgba(91,85,231,.2) !important; }

.redex-home { overflow: hidden; background: #fff; }
.redex-hero-wrap { padding: 22px 24px 0; }
.redex-hero {
  max-width: 1320px; min-height: 690px; margin: 0 auto; padding: 78px 7% 40px;
  border-radius: 30px 30px 84px 84px; color: #fff; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.04fr .96fr; align-items: center;
  background: radial-gradient(circle at 68% 20%, rgba(132,126,255,.5), transparent 34%), linear-gradient(135deg,#5751e5,#5d57eb 60%,#4c47d7);
}
.redex-hero::after { content:""; position:absolute; width:560px; height:560px; border-radius:50%; background:rgba(255,255,255,.035); left:18%; bottom:-52%; }
.redex-hero-copy { position: relative; z-index: 3; max-width: 650px; }
.redex-kicker { display: inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; opacity:.88; }
.redex-hero h1 { font-size:clamp(46px,5vw,76px); line-height:1.04; letter-spacing:-.055em; font-weight:700; margin:20px 0; }
.redex-hero p { max-width:610px; font-size:15px; line-height:1.8; color:rgba(255,255,255,.76); }
.redex-hero-actions { display:flex; gap:14px; margin-top:30px; }
.redex-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:0 24px; border-radius:12px; font-size:13px; font-weight:800; transition:.25s ease; }
.redex-btn:hover { transform:translateY(-2px); }
.redex-btn-light { color:#29263f; background:#fff; box-shadow:0 12px 30px rgba(24,20,83,.2); }
.redex-btn-ghost { color:#fff; background:transparent; border:1px solid rgba(255,255,255,.45); }
.redex-proof { display:flex; gap:30px; margin-top:36px; color:rgba(255,255,255,.7); font-size:11px; }
.redex-proof span { display:flex; flex-direction:column; }
.redex-proof strong { color:#fff; font-size:18px; }
.redex-hero-art { position:relative; z-index:2; align-self:end; display:flex; align-items:flex-end; justify-content:center; height:590px; }
.redex-hero-art img { position:absolute; z-index:3; bottom:0; width:115%; max-width:none; margin-left:-8%; filter:drop-shadow(0 34px 25px rgba(31,26,119,.28)); animation:heroFloat 5s ease-in-out infinite; }
.hero-art-fallback { position:relative; width:100%; height:100%; animation:heroFloat 5s ease-in-out infinite; }
.fallback-rays { position:absolute; z-index:3; left:50%; top:13%; width:126px; height:126px; transform:translateX(-50%); display:grid; place-items:center; border-radius:50%; color:#ffce46; font-size:86px; filter:drop-shadow(0 15px 18px rgba(45,35,130,.22)); }
.fallback-rays::before { content:""; position:absolute; inset:-30px; border:7px dotted rgba(255,210,70,.82); border-radius:50%; }
.fallback-book-stack { position:absolute; z-index:1; left:4%; bottom:9%; width:66%; height:210px; transform:rotate(-7deg); }
.fallback-book-stack span { position:absolute; left:0; width:100%; height:64px; border-radius:16px 22px 22px 16px; border:7px solid rgba(255,255,255,.25); box-shadow:0 13px 22px rgba(34,27,115,.2); }
.fallback-book-stack span::after { content:""; position:absolute; right:13px; top:8px; bottom:8px; width:72%; border-radius:7px; background:repeating-linear-gradient(to bottom,#fff 0,#fff 4px,#eeeef8 5px,#eeeef8 7px); }
.fallback-book-stack span:nth-child(1) { top:0; background:#ffca43; }.fallback-book-stack span:nth-child(2) { top:58px; left:20px; background:#ff789e; }.fallback-book-stack span:nth-child(3) { top:116px; left:5px; background:#7770ef; }
.fallback-open-book { position:absolute; z-index:2; right:-2%; bottom:2%; width:88%; height:245px; filter:drop-shadow(0 28px 22px rgba(30,23,112,.28)); }
.fallback-open-book > i { position:absolute; z-index:3; inset:0; display:grid; place-items:center; color:#fff; font-size:260px; line-height:1; -webkit-text-stroke:7px #554edb; }
.fallback-page { position:absolute; z-index:2; top:30px; width:48%; height:170px; background:linear-gradient(145deg,#fff,#f5f4fa); border-radius:16px 45% 16px 22px; }
.fallback-page-left { left:2%; transform:rotate(4deg); }.fallback-page-right { right:2%; transform:scaleX(-1) rotate(4deg); }
.hero-orb { position:absolute; border-radius:50%; background:rgba(255,255,255,.055); }
.hero-orb-one { width:220px; height:220px; left:7%; top:42%; }
.hero-orb-two { width:440px; height:440px; right:5%; top:-20%; }
.hero-float { position:absolute; z-index:4; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:rgba(118,111,244,.75); color:#ffcf53; box-shadow:0 14px 30px rgba(37,31,137,.24); }
.hero-float-book { left:4.5%; top:40%; transform:rotate(-12deg); }
.hero-float-pen { right:5%; top:42%; transform:rotate(18deg); }
@keyframes heroFloat { 50% { transform:translateY(-10px); } }

.redex-section { max-width:1180px; margin:0 auto; padding:100px 24px; }
.redex-eyebrow { display:block; color:var(--violet); font-weight:800; text-transform:uppercase; letter-spacing:.15em; font-size:10px; margin-bottom:13px; }
.redex-section h2 { color:var(--ink); font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-.045em; font-weight:700; }
.redex-intro { display:grid; grid-template-columns:1fr 1fr auto; gap:70px; align-items:center; background:var(--peach); max-width:none; padding-left:max(24px,calc((100vw - 1132px)/2)); padding-right:max(24px,calc((100vw - 1132px)/2)); }
.redex-intro-copy p { color:var(--muted); line-height:1.9; font-size:14px; margin-bottom:22px; }
.redex-text-link { color:var(--violet); display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:12px; }
.redex-mini-illustration { font-size:50px; color:var(--violet); transform:rotate(12deg); }
.redex-heading-row { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:42px; }
.redex-heading-row h2 { font-size:42px; }
.redex-circle-arrow { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--violet); box-shadow:0 10px 22px rgba(91,85,231,.22); }
.redex-category-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.redex-category-card { min-height:230px; border-radius:22px; padding:28px 18px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; transition:.28s ease; border:1px solid transparent; }
.redex-category-card:hover { transform:translateY(-7px); box-shadow:0 18px 42px rgba(43,38,108,.12); }
.redex-category-0 { background:var(--peach); }.redex-category-1{background:var(--lavender)}.redex-category-2{background:var(--ice)}.redex-category-3{background:#fff2f5}.redex-category-4{background:#f2f3ff}
.category-icon { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-size:27px; color:#fff; margin-bottom:28px; background:linear-gradient(145deg,#7771ff,#4a44d3); box-shadow:0 12px 20px rgba(76,68,211,.23); }
.redex-category-0 .category-icon { background:linear-gradient(145deg,#ffb5ca,#ee769c); }.redex-category-2 .category-icon{background:linear-gradient(145deg,#69d8ed,#3ba9d1)}
.category-name { font-size:14px; font-weight:800; line-height:1.35; min-height:38px; }
.category-link { margin-top:auto; color:var(--muted); font-size:10px; font-weight:700; display:flex; gap:7px; align-items:center; }
.redex-arrivals { padding-top:70px; }
.redex-book-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.book-card { border-color:#ececf4 !important; border-radius:20px !important; box-shadow:0 8px 30px rgba(36,32,88,.06); }
.book-card:hover { border-color:rgba(91,85,231,.35) !important; box-shadow:0 20px 42px rgba(91,85,231,.12) !important; }
.book-card > div:first-child { background:#f6f6fb !important; }
.book-card .text-amber-700, .book-card .text-amber-600 { color:var(--violet) !important; }
.book-card button { color:var(--violet) !important; background:var(--lavender) !important; border-color:#d8d6ff !important; }
.redex-story { max-width:1120px; display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; border-top:1px solid #eeeef4; }
.redex-story-art { height:390px; position:relative; display:grid; place-items:center; }
.story-circle { position:absolute; width:300px; height:300px; border-radius:50%; background:var(--violet); }
.redex-story-art::before { content:""; position:absolute; width:270px; height:250px; right:25px; border-radius:28px; background:#ffb185; transform:rotate(5deg); }
.redex-story-art i { position:relative; z-index:2; color:#fff; font-size:132px; filter:drop-shadow(0 18px 20px rgba(42,35,128,.2)); }
.redex-story-copy blockquote { margin:25px 0; color:var(--muted); font-size:15px; line-height:1.9; }
.redex-story-person { display:flex; align-items:center; gap:12px; }
.redex-story-person > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--violet); font-size:12px; font-weight:800; }
.redex-story-person div { display:flex; flex-direction:column; font-size:12px; }.redex-story-person small{color:var(--muted);margin-top:3px}
.redex-cta { max-width:1120px; margin-bottom:20px; border-radius:34px; padding:68px 24px; text-align:center; position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 75% 20%,#706afb,#5953e6 48%,#4e48d7); }
.redex-cta h2 { color:#fff; margin:14px 0 28px; font-size:44px; }
.redex-cta .redex-kicker { color:rgba(255,255,255,.72); }
.cta-icon { position:absolute; left:7%; top:28%; font-size:32px; color:#ffcf53; transform:rotate(-18deg); }.cta-dot{position:absolute;border-radius:50%;background:#ffa7c1}.cta-dot-one{width:18px;height:18px;right:9%;top:15%}.cta-dot-two{width:8px;height:8px;left:11%;bottom:22%;background:#fff}
.store-footer { background:#f7f7fb !important; border-color:#ebebf3 !important; }
.store-footer .bg-amber-600 { background:var(--violet) !important; }.store-footer .text-amber-700{color:var(--violet)!important}.store-footer button.bg-amber-600{background:var(--violet)!important}

.pagination-btn.active, .brand-hero-bg { background:var(--violet) !important; }
.pagination-btn:hover:not(:disabled):not(.active) { color:var(--violet); border-color:var(--violet); background:var(--lavender); }
.warm-light-input:focus, .admin-input:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,85,231,.12); }

@media (max-width: 1024px) {
  .redex-hero { min-height:620px; grid-template-columns:1fr 1fr; padding:60px 5% 25px; }
  .redex-hero-art { height:480px; }.redex-category-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 767px) {
  .store-header > div { min-height:62px; }.redex-hero-wrap{padding:10px 10px 0}.redex-hero{grid-template-columns:1fr;min-height:auto;padding:58px 26px 0;border-radius:24px 24px 54px 54px;text-align:center}.redex-hero h1{font-size:44px}.redex-hero p{font-size:13px}.redex-hero-actions{flex-direction:column}.redex-btn{width:100%}.redex-proof{justify-content:center}.redex-hero-art{height:330px;justify-content:center}.redex-hero-art img{width:125%;margin:0}.hero-float{display:none}.redex-section{padding:70px 20px}.redex-intro{grid-template-columns:1fr;gap:28px}.redex-mini-illustration{display:none}.redex-heading-row{align-items:center}.redex-heading-row h2{font-size:34px}.redex-category-grid{grid-template-columns:repeat(2,1fr)}.redex-category-card{min-height:200px}.redex-book-grid{grid-template-columns:1fr}.redex-story{grid-template-columns:1fr;gap:30px}.redex-story-art{height:300px}.story-circle{width:230px;height:230px}.redex-story-art::before{width:210px;height:190px}.redex-story-art i{font-size:100px}.redex-cta{margin:0 12px;padding:60px 22px}.redex-cta h2{font-size:34px}.redex-cta .redex-btn{width:auto}}
@media (max-width: 420px) {.redex-category-grid{grid-template-columns:1fr}.redex-category-card{min-height:180px}.redex-hero h1{font-size:38px}.redex-proof{gap:18px}}

/* ── Premium product cards & catalog ─────────────────────────────────── */
.redex-book-grid { gap: 26px; }
.book-card {
  min-width: 0;
  background: #fff !important;
  border: 1px solid #e9e9f2 !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 36px rgba(34, 31, 85, .075) !important;
  isolation: isolate;
}
.book-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.book-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(91,85,231,.28) !important;
  box-shadow: 0 24px 54px rgba(48, 43, 127, .15) !important;
}
.book-card-media {
  height: 286px !important;
  margin: 10px 10px 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #f5f4ff, #fbfbff 55%, #eeeefe) !important;
  padding: 26px !important;
}
.book-card-glow {
  position: absolute;
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  filter: blur(2px);
  box-shadow: 0 18px 55px rgba(91,85,231,.10);
}
.book-cover {
  position: relative;
  z-index: 1;
  max-height: 232px !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 28px rgba(31,28,69,.22), -5px 0 12px rgba(31,28,69,.06) !important;
  transform: rotate(-1deg);
}
.book-card:hover .book-cover { transform: rotate(0) scale(1.055) !important; }
.book-sale-badge {
  z-index: 3;
  padding: 7px 10px !important;
  background: #ff789e !important;
  border: 2px solid rgba(255,255,255,.85);
  letter-spacing: .04em;
}
.book-rating {
  z-index: 3;
  bottom: 12px !important;
  right: 12px !important;
  padding: 6px 9px !important;
  color: #322f57 !important;
  border: 0 !important;
  box-shadow: 0 7px 20px rgba(32,29,78,.12) !important;
}
.book-rating i { color: #ffb83e !important; }
.book-card-body { padding: 20px 21px 21px !important; gap: 17px; }
.book-category {
  color: #5b55e7 !important;
  background: #f0efff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 9px !important;
  letter-spacing: .07em;
}
.book-title {
  min-height: 48px;
  margin-top: 3px;
  color: #1d1c25 !important;
  font-size: 16px !important;
  line-height: 1.48 !important;
  letter-spacing: -.015em;
  font-family: 'Manrope', sans-serif !important;
}
.book-title:hover { color: #5b55e7 !important; }
.book-author { color: #8a8997 !important; margin-top: 7px !important; }
.book-card-footer {
  padding-top: 16px !important;
  border-color: #efeff5 !important;
  gap: 12px;
}
.book-price-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.book-price { color: #4f49db !important; font-size: 19px !important; letter-spacing: -.025em; }
.book-price-wrap .line-through { margin-left: 0 !important; margin-top: 2px; font-size: 10px !important; }
.book-add-button {
  min-width: 82px;
  height: 42px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 14px !important;
  color: #fff !important;
  background: #5b55e7 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 9px 20px rgba(91,85,231,.23) !important;
  font-size: 11px;
  font-weight: 800;
}
.book-add-button:hover { color: #fff !important; background: #4842cf !important; transform: translateY(-2px); }

.catalog-page { max-width: 1320px !important; padding-top: 24px !important; padding-bottom: 90px !important; }
.catalog-breadcrumb { padding-left: 4px; }
.catalog-breadcrumb a:hover { color: #5b55e7 !important; }
.catalog-banner {
  position: relative;
  overflow: hidden;
  min-height: 212px;
  padding: 42px 48px !important;
  border: 0 !important;
  border-radius: 28px;
  color: #fff;
  background: radial-gradient(circle at 83% 12%, rgba(255,255,255,.16), transparent 28%), linear-gradient(135deg,#5b55e7,#4d47d4);
  box-shadow: 0 20px 45px rgba(65,58,177,.17);
}
.catalog-banner::before,
.catalog-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}
.catalog-banner::before { width: 270px; height: 270px; right: 12%; bottom: -190px; }
.catalog-banner::after { width: 130px; height: 130px; right: 4%; top: -76px; }
.catalog-banner > * { position: relative; z-index: 1; }
.catalog-kicker { display: block; margin-bottom: 11px; color: #d9d7ff; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.catalog-banner h1 { color: #fff !important; font-family: 'Manrope', sans-serif !important; font-size: 41px !important; letter-spacing: -.045em; }
.catalog-banner p { color: rgba(255,255,255,.72) !important; font-size: 13px !important; margin-top: 9px !important; }
.catalog-count {
  color: #322e70 !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  padding: 12px 17px !important;
  box-shadow: 0 10px 28px rgba(34,28,115,.17) !important;
}
.catalog-count strong { font-size: 15px; margin-right: 2px; }
.catalog-layout { gap: 30px !important; align-items: start; }
.catalog-sidebar {
  top: 92px !important;
  padding: 22px !important;
  border-color: #e8e8f1 !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 38px rgba(38,34,92,.07) !important;
}
.catalog-sidebar h3 { font-family: 'Manrope', sans-serif !important; font-size: 14px !important; }
.catalog-sidebar h3 i, .catalog-sidebar button.text-amber-700 { color: #5b55e7 !important; }
.catalog-sidebar label { color: #9998a7 !important; letter-spacing: .13em; }
.catalog-sidebar .space-y-1 button { border: 1px solid transparent; border-radius: 11px !important; }
.catalog-sidebar .space-y-1 button:hover { color: #4f49d8 !important; background: #f5f4ff !important; }
.catalog-sidebar .bg-amber-100\/80 {
  color: #4b45cf !important;
  background: #eeedff !important;
  border-color: #d9d7ff !important;
}
.catalog-sidebar select { min-height: 43px; border-color: #e3e2ed; background: #fafafe; }
.catalog-book-grid { gap: 24px !important; }
.catalog-results .pagination-btn { border-color: #e5e4ee; }
.catalog-results .pagination-btn.active { box-shadow: 0 8px 18px rgba(91,85,231,.2); }

@media (max-width: 1024px) {
  .catalog-banner { padding: 36px !important; }
  .book-card-media { height: 265px !important; }
  .book-add-button { min-width: 44px; width: 44px; padding: 0 !important; }
  .book-add-button span { display: none; }
}
@media (max-width: 767px) {
  .catalog-page { padding: 16px !important; }
  .catalog-banner { min-height: 240px; padding: 32px 25px !important; align-items: flex-start !important; }
  .catalog-banner h1 { font-size: 34px !important; }
  .catalog-count { align-self: flex-start; }
  .catalog-sidebar { position: static !important; }
  .book-card-media { height: 300px !important; }
  .book-add-button { min-width: 82px; width: auto; padding: 0 14px !important; }
  .book-add-button span { display: inline; }
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.animate-modal-in {
  animation: modalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-toast-in {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.animate-slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 0.8s linear infinite;
}

/* ── Line Clamp ─────────────────────────────────────────────────────────── */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Active Nav Link ────────────────────────────────────────────────────── */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #d97706;
  transition: all 0.25s ease;
  transform: translateX(-50%);
  border-radius: 99px;
}
.nav-link:hover::after, .nav-link.active::after {
  width: 80%;
}