/* ========================================
   CSS VARIABLES & RESET
   ======================================== */
:root {
  --ink: #0E1D1A;
  --surface-2: #1C3B33;
  --gold: #C9A227;
  --gold-soft: #E4C468;
  --sage: #8FA89D;
  --text-light: #F2EDE1;
  --text-dim: #B9C7C0;
  --radius: 12px;
  --transition: 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  --touch-target: 44px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: radial-gradient(ellipse 1000px 500px at 50% -10%, rgba(201, 162, 39, .06), transparent 60%),
              linear-gradient(180deg, #0E1D1A 0%, #0C1917 100%);
  color: var(--text-light);
  font-family: var(--font-ui, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: ltr;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-touch-callout: none;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  width: 100%;
}

/* ========================================
   LOADING BAR
   ======================================== */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  z-index: 9999;
  transition: width 0.4s ease;
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.4);
}

/* ========================================
   HEADER (نفس الملف السابق)
   ======================================== */
header {
  position: relative;
  padding: clamp(40px, 6vw, 100px) 0 clamp(32px, 5vw, 80px);
  border-bottom: 1px solid rgba(201, 162, 39, .28);
  overflow: hidden;
}

header .bg-img {
  position: absolute;
  inset: 0;
  background-image: url('../image/back.png');
  background-size: cover;
  background-position: center -605%;
  filter: grayscale(25%) brightness(.6) contrast(1.05);
  transform: scale(1.02);
}

header .wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header-panel {
  position: relative;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 70px) clamp(24px, 3.5vw, 48px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, .25);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
  background: rgba(28, 59, 51, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.header-panel .panel-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://picsum.photos/seed/tamam-panel-demo/900/500');
  background-size: cover;
  background-position: center;
  filter: grayscale(20%) brightness(.65);
  opacity: 0.6;
}

.header-panel .panel-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 59, 51, .6), rgba(14, 29, 26, .72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.header-panel > *:not(.panel-bg):not(.panel-tint) {
  position: relative;
  z-index: 1;
}

.eyebrow-line {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  margin-bottom: clamp(14px, 2vw, 28px);
}

.eyebrow-line .rule {
  width: clamp(18px, 2.5vw, 40px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow-line .rule.right {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.eyebrow-line span {
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: clamp(2px, 0.3vw, 4px);
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 18px);
  font-family: var(--font-display, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: -.5px;
}

.logo span {
  color: var(--gold);
}

.logo-mark {
  width: clamp(44px, 5vw, 64px);
  height: clamp(44px, 5vw, 64px);
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  color: var(--gold);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  background: rgba(201, 162, 39, .06);
  box-shadow: 0 8px 24px -8px rgba(201, 162, 39, .35);
  transition: var(--transition);
  flex-shrink: 0;
}

.tagline {
  font-size: clamp(15px, 1.8vw, 22px);
  color: var(--text-dim);
  max-width: min(620px, 100%);
  line-height: 1.7;
  margin: clamp(16px, 2vw, 28px) 0 clamp(20px, 2.5vw, 36px);
  font-weight: 300;
  padding: 0 4px;
}

.badge-free {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(8px, 1vw, 14px) clamp(18px, 2.5vw, 32px);
  border-radius: 30px;
  border: 1px solid rgba(201, 162, 39, .45);
  background: rgba(201, 162, 39, .07);
  backdrop-filter: blur(4px);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--gold-soft);
  box-shadow: 0 4px 18px -6px rgba(0, 0, 0, .4);
}

.badge-free .dot {
  width: clamp(6px, 0.8vw, 8px);
  height: clamp(6px, 0.8vw, 8px);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: dotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ========================================
   BOOKS SECTION
   ======================================== */
.section {
  padding: clamp(40px, 6vw, 80px) 0 clamp(50px, 7vw, 100px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 40px);
  flex-wrap: wrap;
  gap: 12px 16px;
}

.section-header h2 {
  font-family: var(--font-display, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--text-light);
}

.section-header .book-count {
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--text-dim);
  background: var(--surface-2);
  padding: clamp(4px, 0.5vw, 8px) clamp(14px, 1.5vw, 22px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-weight: 500;
}

/* ========================================
   GRID BOOKS
   ======================================== */
.grid-books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.book {
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  cursor: pointer;
}

.book:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
  border-color: rgba(201, 162, 39, .3);
}

.book:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.cover {
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 2vw, 24px);
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #10231f;
  min-height: clamp(180px, 28vw, 280px);
  transition: opacity 0.3s ease;
}

.cover.loaded {
  opacity: 1;
}

.cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .75) 100%);
  z-index: 1;
}

.cover .genre,
.cover .cov-title {
  position: relative;
  z-index: 2;
}

.cover .genre {
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: clamp(0.8px, 0.1vw, 1.5px);
  color: rgba(244, 238, 224, .85);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.3);
  padding: clamp(4px, 0.4vw, 8px) clamp(10px, 1.2vw, 16px);
  border-radius: 30px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cover .cov-title {
  font-family: var(--font-display, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  font-size: clamp(18px, 2.5vw, 28px);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  font-weight: 500;
  max-width: 95%;
}

.book-info {
  padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.book-info h3 {
  font-family: var(--font-ui, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--text-light);
  margin-bottom: 4px;
  line-height: 1.3;
}

.book-info p {
  font-size: clamp(12px, 1.2vw, 15px);
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: clamp(12px, 1.2vw, 18px);
  flex: 1;
  font-weight: 300;
}

.book-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 10px;
  flex-wrap: wrap;
}

.price {
  font-weight: 700;
  color: var(--gold-soft);
  font-size: clamp(12px, 1.1vw, 15px);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.price .dot {
  width: clamp(5px, 0.6vw, 7px);
  height: clamp(5px, 0.6vw, 7px);
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.download {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  color: var(--ink);
  background: var(--gold-soft);
  padding: clamp(8px, 1vw, 12px) clamp(16px, 1.8vw, 28px);
  border-radius: 30px;
  transition: var(--transition);
  box-shadow: 0 4px 12px -4px rgba(201, 162, 39, 0.2);
  cursor: pointer;
  border: none;
  min-height: clamp(38px, 4vw, 50px);
  min-width: clamp(90px, 10vw, 140px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.download:active {
  transform: scale(0.95);
  background: var(--gold);
}

.book:hover .download {
  background: var(--gold);
  transform: scale(1.02);
  box-shadow: 0 6px 20px -4px rgba(201, 162, 39, 0.4);
}

/* ========================================
   EMPTY & ERROR STATES
   ======================================== */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 3vw, 40px);
  color: #6a8a7f;
}

.empty-state .empty-icon {
  font-size: clamp(56px, 8vw, 80px);
  margin-bottom: clamp(16px, 2vw, 24px);
  display: block;
}

.empty-state p {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--text-dim);
}

.empty-state .empty-sub {
  font-size: clamp(14px, 1.2vw, 18px);
  color: #6a8a7f;
  margin-top: 8px;
}

.error-state {
  grid-column: 1/-1;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px);
  color: #ff6b6b;
}

.error-state .error-icon {
  font-size: clamp(44px, 6vw, 60px);
  margin-bottom: clamp(14px, 1.5vw, 20px);
  display: block;
}

.retry-btn {
  margin-top: 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  padding: clamp(12px, 1.2vw, 16px) clamp(24px, 3vw, 40px);
  border-radius: 30px;
  cursor: pointer;
  font-size: clamp(16px, 1.2vw, 18px);
  transition: var(--transition);
  font-family: var(--font-ui, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  min-height: 48px;
  min-width: 140px;
  touch-action: manipulation;
}

.retry-btn:active {
  transform: scale(0.95);
}

.retry-btn:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* ========================================
   FOOTER
   ======================================== */
footer {
  background: var(--surface-2);
  border-top: 1px solid rgba(201, 162, 39, .15);
  padding: clamp(40px, 5vw, 60px) 0 clamp(24px, 3vw, 40px);
}

.foot-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.8fr);
  gap: 24px 60px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.foot-logo {
  font-family: var(--font-display, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  margin-bottom: 0;
}

.foot-tagline {
  max-width: 620px;
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.7;
}

.affiliate-note {
  margin-top: clamp(20px, 2.5vw, 30px);
  padding: 16px 18px;
  border: 1px solid rgba(201, 162, 39, .16);
  border-radius: 10px;
  background: rgba(0, 0, 0, .12);
  color: var(--text-dim);
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.7;
}

.affiliate-note strong {
  color: var(--gold-soft);
}

.foot-logo span {
  color: var(--gold);
}

.company-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1vw, 16px) clamp(30px, 3vw, 60px);
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--text-dim);
  line-height: 1.9;
  padding-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.company-info .row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.company-info .label {
  color: var(--sage);
  min-width: clamp(120px, 14vw, 160px);
  flex-shrink: 0;
  font-weight: 500;
}

.company-info .row span:last-child {
  word-break: break-word;
}


.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 22px 0 0;
}

.legal-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s ease;
}

.legal-links a:hover {
  color: var(--gold-soft);
}

.foot-bottom {
  padding-top: clamp(20px, 2.5vw, 28px);
  font-size: clamp(13px, 1vw, 16px);
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 16px);
}

/* ========================================
   RESPONSIVE (نفس الملف السابق)
   ======================================== */
@media (max-width: 1199px) {
  .grid-books {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 991px) {
  .grid-books {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .header-panel {
    padding: 36px 40px 32px;
  }
  
  .company-info {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .grid-books {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .header-panel {
    padding: 28px 24px 24px;
  }
  
  .foot-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .company-info {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .company-info .label {
    min-width: 90px;
  }
}

@media (max-width: 479px) {
  .grid-books {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .header-panel {
    padding: 18px 14px 18px;
  }
  
  .company-info .label {
    min-width: 0;
  }
  
  .company-info .row {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 359px) {
  .grid-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* ========================================
   TOUCH-FRIENDLY
   ======================================== */
@media (hover: none) {
  .book:hover {
    transform: none;
    box-shadow: none;
  }
  
  .book:hover .download {
    transform: none;
    box-shadow: 0 4px 12px -4px rgba(201, 162, 39, 0.2);
  }
  
  .download:hover {
    transform: none;
    background: var(--gold-soft);
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .book:hover,
  .book:active {
    transform: none !important;
  }
  
  .badge-free .dot {
    animation: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================
   PRINT
   ======================================== */
@media print {
  .loading-bar,
  .badge-free .dot {
    display: none !important;
  }
  
  .book:hover,
  .book:active {
    transform: none !important;
  }
  
  .download {
    background: #ccc !important;
    color: #000 !important;
  }
}
/* Professional informational pages — same visual identity as the main site */
.info-page{
  padding:80px 20px 110px;
  background:radial-gradient(ellipse 900px 420px at 50% 0%,rgba(201,162,39,.055),transparent 62%),linear-gradient(180deg,#0E1D1A 0%,#0C1917 100%);
  color:var(--text-light);
  min-height:calc(100vh - 100px);
}
.info-container{max-width:1000px;margin:0 auto}.info-hero{padding:20px 0 55px;border-bottom:1px solid rgba(201,162,39,.18)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);margin-bottom:14px}
.info-page h1{font-family:'Fraunces',serif;font-size:clamp(38px,6vw,64px);line-height:1.02;margin:0 0 20px;letter-spacing:-.04em;color:var(--text-light)}
.lead{font-size:20px;line-height:1.65;color:var(--text-dim);max-width:760px}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:42px}
.info-card{border:1px solid rgba(201,162,39,.2);border-radius:18px;padding:28px;background:rgba(28,59,51,.42);box-shadow:0 16px 40px -28px rgba(0,0,0,.8);transition:var(--transition)}
.info-card:hover{border-color:rgba(201,162,39,.4);transform:translateY(-2px)}
.info-card h2{font-size:20px;margin:0 0 12px;color:var(--gold-soft)}
.info-card p{line-height:1.75;color:var(--text-dim);margin:0}
.info-section{padding:42px 0;border-bottom:1px solid rgba(201,162,39,.14)}
.info-section:last-child{border-bottom:0}.info-section h2{font-size:28px;margin:0 0 16px;letter-spacing:-.02em;color:var(--text-light)}
.info-section p{font-size:16px;line-height:1.85;color:var(--text-dim);max-width:850px}
.info-page a:not(.nav-logo){color:var(--gold-soft);transition:color .2s ease}.info-page a:not(.nav-logo):hover{color:var(--gold)}
.info-page strong{color:var(--text-light)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:42px}
.contact-box{border:1px solid rgba(201,162,39,.22);border-radius:20px;padding:32px;background:rgba(28,59,51,.42);box-shadow:0 16px 40px -28px rgba(0,0,0,.8)}
.contact-box h2{margin:0 0 12px;font-size:24px;color:var(--gold-soft)}
.contact-box p{color:var(--text-dim);line-height:1.75}.contact-email{display:inline-block;margin-top:12px;font-size:20px;font-weight:700;color:var(--gold-soft)!important;text-decoration:none;word-break:break-word}.contact-email:hover{text-decoration:underline}
.contact-note{font-size:14px!important;color:var(--text-dim)!important}.simple-footer{margin-top:40px;padding-top:25px;border-top:1px solid rgba(201,162,39,.18);color:var(--text-dim);font-size:13px}.simple-footer a{color:var(--gold-soft)!important}
@media(max-width:700px){.info-page{padding:55px 18px 80px}.info-grid,.contact-grid{grid-template-columns:1fr}.info-card,.contact-box{padding:23px}.lead{font-size:18px}.info-section{padding:32px 0}}

/* ========================================
   PREMIUM BOOK GRID - FINAL OVERRIDES
   ======================================== */
.grid-books {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}

.book {
  min-width: 0;
  background: linear-gradient(180deg, rgba(28,59,51,.98), rgba(14,29,26,.98));
  border: 1px solid rgba(201,162,39,.12);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.cover {
  aspect-ratio: 3 / 4;
  min-height: 0;
  height: auto;
  padding: 18px;
  background-color: #10231f;
}

.cover::before {
  background: linear-gradient(180deg, rgba(4,10,9,.08) 15%, rgba(4,10,9,.15) 45%, rgba(4,10,9,.88) 100%);
}

.cover .genre {
  font-size: 11px;
  padding: 6px 11px;
  letter-spacing: 1px;
  color: var(--gold-soft);
  background: rgba(14,29,26,.72);
  border-color: rgba(201,162,39,.22);
}

.cover .cov-title {
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.18;
  max-width: 100%;
  text-wrap: balance;
}

.book-info {
  padding: 20px 20px 21px;
  gap: 10px;
  min-height: 175px;
}

.book-info p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  line-height: 1.65;
}

.book-price {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.download {
  min-width: 135px;
  min-height: 42px;
  padding: 9px 17px;
  font-size: 12px;
}

@media (max-width: 1050px) {
  .grid-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .grid-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .book-info { min-height: 0; }
}

/* ========================================
   ADMIN BOOK LIST - BETTER PREVIEW
   ======================================== */
.item-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item-desc { display: block; color: var(--text-dim); font-size: 11px; line-height: 1.4; max-width: 430px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-edit { background: rgba(201,162,39,.12); border: 1px solid rgba(201,162,39,.22); color: var(--gold-soft); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: var(--font-ui, "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif); transition: .25s ease; }
.btn-edit:hover { background: rgba(201,162,39,.22); color: #fff; }
.book-item .item-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 640px) {
  .book-item .item-actions { width:100%; }
  .btn-edit, .book-item .item-actions .btn-danger { flex:1; text-align:center; }
  .item-desc { max-width: 100%; white-space: normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}

.book-affiliate-disclosure{font-size:11px!important;line-height:1.5!important;color:var(--text-dim)!important;margin:4px 0 10px!important}.book-affiliate-disclosure strong{color:var(--gold-soft)}
/* Homepage: exactly 8 products per page + smooth pagination */
#booksGrid { transition: opacity .25s ease, transform .25s ease; }
#booksGrid.is-changing { opacity: .35; transform: translateY(6px); }
.books-pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin:36px auto 10px; min-height:44px; flex-wrap:wrap; }
.books-pagination[hidden] { display:none !important; }
.books-page-btn { appearance:none; min-width:42px; height:42px; padding:0 12px; border:1px solid rgba(201,162,39,.24); border-radius:10px; background:rgba(255,255,255,.035); color:var(--text,#f2ede1); font:inherit; font-weight:700; cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease; }
.books-page-btn:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--gold); color:var(--gold-soft); }
.books-page-btn.active,.books-page-btn[aria-current="page"] { background:var(--gold); border-color:var(--gold); color:#10231f; }
.books-page-btn.prev,.books-page-btn.next { font-size:20px; }
.books-page-btn:disabled { opacity:.35; cursor:not-allowed; }
.books-page-dots { color:var(--text-dim,#9aaea6); padding:0 2px; }
@media(max-width:480px){ .books-pagination{gap:6px;margin-top:24px;} .books-page-btn{min-width:38px;height:38px;padding:0 10px;} }



/* =========================================================
   TRAUMELY.DE — FINAL HEADER / NAVIGATION SYSTEM
   Single source of truth. Do not duplicate these selectors.
   ========================================================= */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.site-nav{
  width:min(100%, 1280px);
  min-height:72px;
  margin:0 auto 30px;
  padding:10px 14px 10px 22px;
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(320px,480px) minmax(260px,1fr);
  align-items:center;
  column-gap:28px;
  border:1px solid rgba(201,162,39,.26);
  border-radius:18px;
  background:rgba(9,19,17,.78);
  box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}

.nav-logo{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  color:#fff;
  text-decoration:none;
  font-family:var(--font-display,"Manrope","Avenir Next","Segoe UI",system-ui,sans-serif);
  font-size:1.18rem;
  font-weight:850;
  line-height:1;
  letter-spacing:-.035em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav-logo span{color:var(--gold);}

.nav-links{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(18px,2.4vw,34px);
  min-width:0;
}
.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  font-size:.94rem;
  font-weight:700;
  letter-spacing:.005em;
  white-space:nowrap;
  transition:color .2s ease,opacity .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:2px;
  border-radius:99px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{color:#fff;}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1);}

/* Search is the visual center of the desktop header. */
.header-search{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:450px;
  justify-self:center;
  transform:translateX(-22px);
  position:relative;
  display:flex;
  align-items:center;
  margin:0;
}
.header-search input{
  display:block;
  width:100%;
  height:46px;
  padding:0 52px 0 18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  outline:none;
  background:rgba(255,255,255,.075);
  color:#fff;
  font-family:inherit;
  font-size:.91rem;
  font-weight:600;
  letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.12);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.header-search input::placeholder{color:rgba(242,237,225,.52);}
.header-search input:hover{border-color:rgba(201,162,39,.34);}
.header-search input:focus{
  border-color:rgba(201,162,39,.72);
  background:rgba(255,255,255,.095);
  box-shadow:0 0 0 4px rgba(201,162,39,.10), 0 10px 28px rgba(0,0,0,.18);
}
.header-search button{
  position:absolute;
  top:5px;
  right:5px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:var(--gold);
  color:#10231f;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,.2);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.header-search button:hover{
  transform:translateY(-1px);
  background:var(--gold-soft);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
.header-search button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.header-search button svg{width:17px;height:17px;display:block;}

.simple-page-header{
  padding:28px 0 0;
  background:var(--bg,#0e1d1a);
}
.simple-page{min-height:70vh;padding:70px 0;}
.simple-page h1{margin-bottom:18px;}
.simple-page p{max-width:760px;line-height:1.8;}

/* Dedicated books/search pages */
.catalog-page,.search-page{
  min-height:70vh;
  padding:70px 0 100px;
  background:radial-gradient(ellipse 900px 420px at 50% 0%,rgba(201,162,39,.055),transparent 62%);
}
.catalog-hero{
  max-width:1000px;
  margin:0 auto 42px;
  padding:20px 0 35px;
  border-bottom:1px solid rgba(201,162,39,.18);
}
.catalog-hero h1{
  font-family:'Fraunces',serif;
  font-size:clamp(42px,6vw,68px);
  line-height:1.02;
  margin:0 0 18px;
  color:var(--text-light);
}
.catalog-hero p{font-size:19px;line-height:1.7;color:var(--text-dim);max-width:760px;}
.catalog-section{padding-top:0;}
.search-page-form{
  max-width:760px;
  margin:0 auto 32px;
  display:flex;
  gap:10px;
}
.search-page-form input{
  flex:1;
  height:52px;
  padding:0 18px;
  border:1px solid rgba(201,162,39,.25);
  border-radius:13px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font:inherit;
  outline:none;
}
.search-page-form input:focus{border-color:rgba(201,162,39,.65);box-shadow:0 0 0 4px rgba(201,162,39,.08);}
.search-page-form button{
  height:52px;
  padding:0 25px;
  border:0;
  border-radius:13px;
  background:var(--gold);
  color:#10231f;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.search-page-form button:hover{transform:translateY(-1px);background:var(--gold-soft);}
.search-result-title{max-width:1000px;margin:0 auto 24px;color:var(--gold-soft);font-weight:700;}


/* =========================================================
   SHARED HEADER — loaded by every public page
   ========================================================= */
.site-header.site-inner-header {
  padding: 28px 0 0;
  background: var(--bg, #0e1d1a);
}

.site-header.site-home-header {
  position: relative;
}

.site-header.site-home-header .wrap,
.site-header.site-inner-header .wrap {
  position: relative;
  z-index: 2;
}

.site-home-header .header-panel {
  padding: 44px 64px 40px;
}

.site-home-header .eyebrow-line {
  margin-bottom: 16px;
}

.site-home-header .tagline {
  font-size: 20px;
  max-width: 620px;
  margin: 14px 0 28px;
  line-height: 1.8;
  font-weight: 400;
  color: rgba(242,237,225,.92);
}

.site-home-header .tagline strong {
  color: var(--gold-soft);
  font-weight: 600;
}

.site-home-header .badge-free {
  font-size: 13px;
  padding: 10px 28px;
  letter-spacing: .5px;
}

@media (max-width: 768px) {
  .site-home-header .header-panel { padding: 32px 28px 28px; }
  .site-home-header .tagline { font-size: 17px; max-width: 100%; }
}

@media (max-width: 480px) {
  .site-home-header .header-panel { padding: 24px 16px 20px; }
  .site-home-header .tagline { font-size: 14px; line-height: 1.7; margin: 10px 0 18px; }
  .site-home-header .badge-free { font-size: 11px; padding: 6px 16px; }
}

/* Homepage-specific styles moved out of index.php */
.affiliate-banner,.financial-disclaimer{margin:0 0 14px;padding:14px 18px;border:1px solid rgba(201,162,39,.22);border-radius:12px;background:rgba(28,59,51,.55);color:var(--text-dim);font-size:14px;line-height:1.65}.financial-disclaimer{margin-bottom:24px;border-color:rgba(143,168,157,.2)}.affiliate-banner strong,.financial-disclaimer strong{color:var(--gold-soft)}


    /* Global affiliate/legal notices: shown once below all products */
    .affiliate-banner,
    .financial-disclaimer {
      max-width: 980px;
      margin-left: auto;
      margin-right: auto;
    }

    .affiliate-banner {
      margin-top: 34px;
    }

    .financial-disclaimer {
      margin-top: 12px;
      margin-bottom: 0;
    }

    /* ========================================
       CUSTOM STYLES - PROFESSIONAL GERMAN
       ======================================== */
    
    body {
      direction: ltr;
      text-align: left;
    }
    
    .loading-bar {
      left: 0;
      right: auto;
    }
    
    .logo {
      display: none !important;
    }
    
    .section-header {
      display: none !important;
    }
    
    .grid-books {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(16px, 2vw, 28px);
    }
    
    .book {
      background: var(--surface-2);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      cursor: pointer;
      text-decoration: none;
    }
    
    .book:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
      border-color: rgba(201, 162, 39, .3);
    }
    
    .cover {
      aspect-ratio: 3/4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(16px, 2vw, 24px);
      position: relative;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      background-color: #10231f;
      min-height: clamp(180px, 28vw, 280px);
    }
    
    .cover::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .75) 100%);
      z-index: 1;
    }
    
    .cover .genre,
    .cover .cov-title {
      position: relative;
      z-index: 2;
    }
    
    .cover .genre {
      font-size: clamp(10px, 1vw, 13px);
      letter-spacing: clamp(0.8px, 0.1vw, 1.5px);
      color: rgba(244, 238, 224, .85);
      text-transform: uppercase;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
      align-self: flex-start;
      background: rgba(0, 0, 0, 0.3);
      padding: clamp(4px, 0.4vw, 8px) clamp(10px, 1.2vw, 16px);
      border-radius: 30px;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .cover .cov-title {
      font-family: 'Fraunces', serif;
      font-size: clamp(18px, 2.5vw, 28px);
      line-height: 1.2;
      color: #fff;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
      font-weight: 500;
      max-width: 95%;
    }
    
    .book-info {
      padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .book-info p {
      font-size: clamp(12px, 1.2vw, 15px);
      color: var(--text-dim);
      line-height: 1.6;
      margin-bottom: clamp(12px, 1.2vw, 18px);
      flex: 1;
      font-weight: 300;
    }
    
    .book-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    .price {
      font-weight: 700;
      color: var(--gold-soft);
      font-size: clamp(12px, 1.1vw, 15px);
      text-transform: uppercase;
      letter-spacing: .5px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
    }
    
    .price .dot {
      width: clamp(5px, 0.6vw, 7px);
      height: clamp(5px, 0.6vw, 7px);
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
    }
    
    .download {
      font-size: clamp(12px, 1.1vw, 15px);
      font-weight: 600;
      color: var(--ink);
      background: var(--gold-soft);
      padding: clamp(8px, 1vw, 12px) clamp(16px, 1.8vw, 28px);
      border-radius: 30px;
      transition: var(--transition);
      box-shadow: 0 4px 12px -4px rgba(201, 162, 39, 0.2);
      cursor: pointer;
      border: none;
      min-height: clamp(38px, 4vw, 50px);
      min-width: clamp(90px, 10vw, 140px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      touch-action: manipulation;
      user-select: none;
      text-decoration: none;
    }
    
    .download:hover {
      background: var(--gold);
      transform: scale(1.02);
      box-shadow: 0 6px 20px -4px rgba(201, 162, 39, 0.4);
    }
    
    .empty-state {
      grid-column: 1/-1;
      text-align: center;
      padding: clamp(60px, 8vw, 100px) clamp(20px, 3vw, 40px);
      color: #6a8a7f;
    }
    
    .empty-state .empty-icon {
      font-size: clamp(56px, 8vw, 80px);
      margin-bottom: clamp(16px, 2vw, 24px);
      display: block;
    }
    
    .empty-state p {
      font-size: clamp(18px, 2vw, 24px);
      color: var(--text-dim);
    }
    
    .company-info .row {
      flex-direction: row;
    }
    
    .company-info .label {
      min-width: 148px;
      font-weight: 500;
    }
    
    .foot-logo {
      font-size: 20px;
      letter-spacing: -0.3px;
    }
    
    .foot-logo span:last-child {
      color: var(--gold);
    }
    
    .foot-bottom {
      font-size: 13px;
    }
    
    @media (max-width: 768px) {
      .grid-books {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      
      .company-info .row {
        flex-direction: column;
        gap: 2px;
      }
      
      .company-info .label {
        min-width: 0;
        font-size: 11px;
      }
    }
    
    @media (max-width: 480px) {
      .grid-books {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
    }

/* Legal pages */
.legal-page{max-width:900px;margin:0 auto;padding:70px 24px 90px}
.legal-page h1{font-family:'Fraunces',serif;font-size:clamp(34px,5vw,58px);margin:0 0 28px}
.legal-page h2{margin-top:38px}
.legal-page p,.legal-page li{color:var(--text-dim);line-height:1.8}
.legal-page a{color:var(--gold-soft)}
.legal-page .back{display:inline-block;margin-bottom:30px;color:var(--gold-soft);text-decoration:none}
.legal-page .notice{padding:16px 18px;border:1px solid rgba(201,162,39,.25);border-radius:12px;background:rgba(28,59,51,.55)}

/* Product image normalization (merged from product-images-fix.css) */
/* traumely.de - FINAL product grid/image normalization */
.grid-books {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:28px !important;
  align-items:stretch !important;
}
.book {
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  height:100% !important;
  overflow:hidden !important;
  transform:none;
}
.book .cover {
  position:relative !important;
  width:100% !important;
  aspect-ratio:3/4 !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#10231f !important;
  background-image:none !important;
  flex:0 0 auto !important;
}
.book .cover::before,.book .cover::after,.book .cover .genre,.book .cover .cov-title {
  display:none !important;
  content:none !important;
}
.book .cover-image {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}
.book .cover.image-error::after {
  content:'Bild nicht verfügbar' !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  inset:0 !important;
  color:rgba(255,255,255,.55) !important;
  font-size:12px !important;
}
.book-info {
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:20px 20px 22px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:0 !important;
}
.book-info .book-category {
  display:inline-flex !important;
  margin:0 0 10px !important;
  padding:6px 11px !important;
  border:1px solid rgba(201,162,39,.25) !important;
  border-radius:999px !important;
  background:rgba(201,162,39,.07) !important;
  color:var(--gold-soft) !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
}
.book-info .book-title {
  width:100% !important;
  margin:0 0 10px !important;
  color:var(--text-light) !important;
  font-family:var(--font-display,system-ui,sans-serif) !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  text-align:center !important;
}
.book-info .book-description {
  width:100% !important;
  margin:0 auto 16px !important;
  color:var(--text-dim) !important;
  font-size:13px !important;
  line-height:1.65 !important;
  text-align:center !important;
}
.book-info .book-price {
  width:100% !important;
  margin-top:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
.book-info .book-price .price {
  justify-content:center !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
}
.book-info .download {
  width:100% !important;
  max-width:190px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 20px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  transform:none !important;
}
.book:hover {
  transform:translateY(-5px) !important;
}
.book:hover .cover,.book:hover .cover-image {
  transform:none !important;
  filter:none !important;
}
@media (max-width:1100px) {
  .grid-books { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:760px) {
  .grid-books { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; }
  .book-info { padding:16px 14px 18px !important; }
  .book-info .book-title { font-size:16px !important; }
  .book-info .book-description { font-size:12px !important; }
}
@media (max-width:480px) {
  .grid-books { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .book .cover { aspect-ratio:3/4 !important; }
  .book-info .book-title { font-size:17px !important; }
}


/* State classes are toggled by JavaScript; presentation remains entirely in CSS. */
.loading-bar{width:0;transform:scaleX(0);transform-origin:left center;transition:transform .35s ease,opacity .35s ease}
.loading-bar.is-active{transform:scaleX(.65);opacity:1}
.loading-bar.is-complete{transform:scaleX(1);opacity:0}
.cover.image-error::after{content:'Bild nicht verfügbar';display:flex;align-items:center;justify-content:center;position:absolute;inset:0;color:rgba(255,255,255,.55);font-size:12px}


/* =========================================================
   CLEAN MOBILE RULES — no duplicate/legacy header overrides
   Desktop rules above remain unchanged.
   ========================================================= */
@media (max-width: 767px) {
  .site-header .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Header: every element centered inside the framed navigation. */
  .site-nav {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    margin: 0 auto 18px;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }

  .site-nav .nav-logo {
    order: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    font-size: 22px;
    line-height: 1;
  }

  .site-nav .nav-links {
    order: 2;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 6px 16px;
    margin: 0;
  }

  .site-nav .nav-links a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .82rem;
  }

  .site-nav .header-search {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
    align-self: center;
  }

  .site-nav .header-search input {
    height: 46px;
  }

  /* Public product catalog: exactly two cards per row on mobile. */
  .grid-books {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .grid-books > .book {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .site-nav {
    padding: 14px 10px 12px;
    gap: 10px;
  }
  .site-nav .nav-links {
    gap: 5px 11px;
  }
  .site-nav .nav-links a {
    font-size: .78rem;
  }
  .grid-books {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

/* =====================================================
   TRAUMELY — MINIMAL EDITORIAL REDESIGN
   ===================================================== */
:root{
  --ink:#171717;
  --surface-2:#ffffff;
  --gold:#8a6a3d;
  --gold-soft:#b18b55;
  --sage:#e9e5de;
  --text-light:#171717;
  --text-dim:#66615b;
  --paper:#fbfaf7;
  --line:#e7e2da;
  --radius:10px;
  --transition:.25s ease;
}
html{background:var(--paper);scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Inter,Manrope,"Segoe UI",system-ui,sans-serif;line-height:1.65;min-height:100%;}
body:before{display:none!important}
a{color:inherit}
.wrap{max-width:1180px}
header{padding:0 0 48px;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
header .bg-img,header .bg-tint,.header-panel .panel-bg,.header-panel .panel-tint{display:none!important}
header .wrap{align-items:stretch;text-align:left}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:25px 0;border-bottom:1px solid var(--line)}
.nav-logo{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:700;letter-spacing:-1.4px;color:var(--ink)}
.nav-logo:first-letter{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:25px;order:3}
.nav-links a{font-size:13px;letter-spacing:.04em;color:#5c5751;transition:color var(--transition)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.header-search{order:2;display:flex;align-items:center;width:min(330px,35%);border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 7px 4px 15px}
.header-search input{min-width:0;border:0;background:transparent;outline:0;color:var(--ink);width:100%;font-size:13px}
.header-search button{border:0;background:transparent;color:#777;display:grid;place-items:center;width:34px;height:34px;cursor:pointer}
.header-search svg{width:17px;height:17px}
.header-panel{padding:70px 0 24px;border:0;box-shadow:none;border-radius:0;background:transparent;align-items:flex-start;max-width:760px;backdrop-filter:none}
.eyebrow-line{margin-bottom:20px;gap:12px}
.eyebrow-line .rule{width:28px;background:var(--gold)}
.eyebrow-line span{font-size:11px;letter-spacing:1.5px;color:var(--gold);white-space:normal}
.tagline{font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,4.3vw,52px);line-height:1.13;letter-spacing:-1.6px;color:var(--ink);max-width:760px;margin:0 0 25px;font-weight:400}
.tagline strong{font-weight:400;color:var(--gold)}
.badge-free{border:1px solid var(--line);background:#fff;color:#5e584f;border-radius:999px;padding:8px 14px;font-size:11px;box-shadow:none;backdrop-filter:none}
.badge-free .dot{background:var(--gold);box-shadow:none;animation:none}
.section{padding:55px 0 80px}
.section-header{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}
.section-header h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(28px,4vw,42px);color:var(--ink);letter-spacing:-.8px}
.book-count{color:#777;font-size:12px}
.grid-books{gap:28px!important}
.book-card,.book-item,.card{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:none!important;transition:transform var(--transition),border-color var(--transition)}
.book-card:hover,.book-item:hover{transform:translateY(-3px);border-color:#c9bca9!important}
button,.btn,.button{border-radius:999px!important;box-shadow:none!important}
.affiliate-banner,.financial-disclaimer{background:#f2eee8!important;border:1px solid var(--line)!important;color:#665f56!important;border-radius:8px!important;box-shadow:none!important}
footer{background:#171717!important;color:#eee!important;border-top:0!important}
footer a{color:#d8d2c9!important}
footer a:hover{color:#fff!important}
@media(max-width:900px){.site-nav{flex-wrap:wrap}.header-search{order:3;width:100%;max-width:none}.nav-links{order:2;margin-left:auto}}
@media(max-width:600px){header{padding-bottom:25px}.site-nav{gap:14px;padding:18px 0}.nav-logo{font-size:27px}.nav-links{gap:13px}.nav-links a{font-size:12px}.header-panel{padding-top:42px}.tagline{font-size:34px;letter-spacing:-1px}.section{padding-top:38px}.grid-books{gap:18px!important}}

/* =========================================================
   TRAUMELY — MINIMAL EDITORIAL OVERRIDE
   ========================================================= */
:root{--ink:#171717;--surface-2:#ffffff;--gold:#9b7650;--gold-soft:#b08b63;--sage:#777777;--text-light:#171717;--text-dim:#666666;--paper:#faf9f6;--line:#e8e4de;--radius:16px;--transition:180ms ease}
html,body{background:var(--paper)!important;color:var(--ink)!important}
body{font-family:Georgia,"Times New Roman",serif!important;line-height:1.65!important}
body *{text-shadow:none!important}
.site-header,header{background:var(--paper)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;padding:0!important;min-height:0!important}
.site-header .bg-img,.site-header .bg-tint,header .bg-img,header .bg-tint,.header-panel .panel-bg,.header-panel .panel-tint{display:none!important}
.site-header .wrap,header .wrap{max-width:1180px!important;margin:auto!important;padding:0 28px!important}
.site-nav{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;min-height:84px!important;background:transparent!important}
.nav-logo{font-family:Arial,sans-serif!important;font-size:27px!important;font-weight:800!important;letter-spacing:-1.2px!important;color:#171717!important}
.nav-logo:after{content:".";color:var(--gold)!important}
.nav-links{display:flex!important;align-items:center!important;gap:26px!important}
.nav-links a{font-family:Arial,sans-serif!important;font-size:13px!important;letter-spacing:.04em!important;color:#333!important}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--gold)!important}
.header-search{border:1px solid var(--line)!important;background:#fff!important;border-radius:999px!important;overflow:hidden!important}
.header-search input{background:#fff!important;color:#222!important;border:0!important}
.header-panel{background:transparent!important;border:0!important;box-shadow:none!important;max-width:760px!important;align-items:flex-start!important;text-align:left!important;padding:70px 0 76px!important}
.eyebrow-line{color:var(--gold)!important;justify-content:flex-start!important}
.eyebrow-line span{color:var(--gold)!important;letter-spacing:1.5px!important}
.tagline{color:#555!important;font-size:clamp(19px,2.5vw,29px)!important;line-height:1.35!important;max-width:720px!important;margin:18px 0 26px!important}
.tagline strong{color:#171717!important;font-weight:600!important}
.badge-free{border:1px solid #d8c8b5!important;background:#fff!important;color:#66503b!important}
.section{background:var(--paper)!important;padding:56px 0!important}
.section-header h2{color:#171717!important;font-size:clamp(28px,4vw,44px)!important;font-weight:500!important;letter-spacing:-1px!important}
.grid-books{gap:28px!important}
.book-card,.card,.book-item{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:0 8px 30px rgba(30,25,20,.045)!important;transition:transform var(--transition),box-shadow var(--transition)!important}
.book-card:hover,.card:hover,.book-item:hover{transform:translateY(-4px)!important;box-shadow:0 16px 40px rgba(30,25,20,.09)!important}
button,.btn,.button{background:#171717!important;color:#fff!important;border:1px solid #171717!important;border-radius:999px!important;font-family:Arial,sans-serif!important}
button:hover,.btn:hover,.button:hover{background:var(--gold)!important;border-color:var(--gold)!important}
.affiliate-banner,.financial-disclaimer{background:#fff!important;border:1px solid var(--line)!important;color:#555!important;border-radius:12px!important}
.site-footer,footer{background:#171717!important;color:#f7f5f0!important;border-top:0!important}
.site-footer a,footer a{color:#f7f5f0!important}
@media(max-width:760px){.site-nav{flex-wrap:wrap!important;padding:18px 0!important}.nav-links{gap:14px!important;flex-wrap:wrap!important}.header-search{order:3;width:100%!important}.header-panel{padding:42px 0!important}.site-header .wrap,header .wrap{padding:0 18px!important}.tagline{font-size:22px!important}}

/* Traumely Minimal Editorial redesign */
:root{--ink:#202124;--surface-2:#ffffff;--gold:#9a7650;--gold-soft:#c9ab86;--sage:#e9e5df;--text-light:#202124;--text-dim:#6b6b6b;--radius:14px;--transition:.22s ease}
body{background:#faf9f7;color:var(--ink);font-family:Inter,Manrope,"Segoe UI",system-ui,sans-serif;line-height:1.65}
header{padding:22px 0 48px;background:#fff;border-bottom:1px solid #e8e5df;overflow:visible}
.site-home-header{background:#fff!important}.bg-img,.bg-tint,.panel-bg,.panel-tint{display:none!important}
.site-nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.nav-logo{font-family:Georgia,"Times New Roman",serif;font-size:30px;letter-spacing:-1px;color:#202124;font-weight:700}.nav-links{display:flex;gap:22px;margin-left:auto}.nav-links a{color:#444;font-weight:600}.nav-links a:hover{color:var(--gold)}
.header-search{border:1px solid #dedbd5;border-radius:999px;background:#fff;display:flex;align-items:center;overflow:hidden}.header-search input{border:0;outline:0;background:transparent;padding:11px 14px;min-width:190px;color:#202124}.header-search button{border:0;background:transparent;padding:10px 14px;color:#555}
.header-panel{max-width:820px;margin:55px auto 0;text-align:center;background:transparent}.eyebrow-line{color:#8b735b;font-size:12px;letter-spacing:.16em;text-transform:uppercase}.tagline{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4vw,52px);line-height:1.15;color:#202124;margin:22px 0}.badge-free{display:inline-flex;border:1px solid #dedbd5;border-radius:999px;padding:8px 14px;color:#6b6258;background:#faf9f7}.section{background:#faf9f7}.section-header h2{font-family:Georgia,serif;color:#202124}.grid-books{gap:26px}.book-card,.card,.product-card{background:#fff!important;border:1px solid #e8e5df!important;border-radius:var(--radius)!important;box-shadow:0 8px 28px rgba(32,33,36,.05)!important}.book-card:hover,.product-card:hover{transform:translateY(-3px)}
button,.btn,.button{background:#202124!important;color:#fff!important;border-radius:999px!important;border:1px solid #202124!important}button:hover,.btn:hover,.button:hover{background:#9a7650!important;border-color:#9a7650!important}
footer{background:#202124!important;color:#fff!important}footer a{color:#fff!important}.social-links{display:flex!important;flex-direction:row!important;gap:14px!important}
@media(max-width:760px){.site-nav{gap:14px}.nav-links{order:3;width:100%;justify-content:center;margin-left:0;gap:14px}.header-search{flex:1;min-width:0}.header-search input{min-width:0;width:100%}.header-panel{margin-top:30px}.tagline{font-size:32px}}