/* ============================================================
   Pelagia Theme — Main Stylesheet
   assets/css/main.css
   ============================================================
   Table of Contents
   ─────────────────
   00. Design Tokens (CSS Custom Properties)
   01. Reset & Base
   02. Typography
   03. Layout & Grid
   04. Utilities
   05. Buttons
   06. Forms
   07. Skip Link & Accessibility
   08. Top Bar
   09. Site Header & Navigation
   10. Mobile Menu
   11. Search Overlay
   12. Hero Section
   13. Section Layouts
   14. Book Cards
   15. Blog Cards
   16. Author Cards
   17. Promo Banners
   18. Featured Grid
   19. Single Post / Prose
   20. Single Book
   21. Single Author
   22. Archive / Search
   23. Pagination
   24. Breadcrumbs
   25. Sidebar & Widgets
   26. Site Footer
   27. 404 Page
   28. No Results
   29. Back to Top
   30. WooCommerce
   31. Responsive Overrides
   ============================================================ */


/* ============================================================
   00. Design Tokens
   ============================================================ */

:root {
  /* Brand */
  --primary:        #E63946;
  --primary-dark:   #C4252F;
  --primary-light:  #FF6B75;

  /* Neutrals */
  --gray-900: #1A1A1A;
  --gray-800: #2D2D2D;
  --gray-700: #4A4A4A;
  --gray-600: #6B6B6B;
  --gray-500: #8E8E8E;
  --gray-400: #B4B4B4;
  --gray-300: #D1D1D1;
  --gray-200: #E8E8E8;
  --gray-100: #F5F5F5;
  --gray-50:  #FAFAFA;
  --white:    #FFFFFF;
  --black:    #000000;

  /* Accents */
  --accent-blue:   #457B9D;
  --accent-yellow: #F1C453;
  --accent-green:  #2A9D8F;

  /* Typography */
  --font-serif:  'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:   'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Spacing — 8pt scale */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Layout */
  --container-max: 1400px;
  --container-pad: var(--space-6);
  --header-height: 72px;

  /* Borders */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08),  0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 4px 12px rgba(0,0,0,.10),  0 2px 4px  rgba(0,0,0,.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.14), 0 4px 8px  rgba(0,0,0,.08);
  --shadow-xl:  0 24px 48px rgba(0,0,0,.18);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition:      250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index stack */
  --z-base:    1;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}


/* ============================================================
   01. Reset & Base
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--gray-800);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Smooth page transitions */
body.is-transitioning { opacity: 0; }

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover  { color: var(--primary-dark); }
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

p      { max-width: 72ch; }
strong { font-weight: 600; }
em     { font-style: italic; }

hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: var(--space-8) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection {
  background-color: #facdcd;
  color: var(--gray-900);
}

/* Remove default WordPress margins on embeds */
.wp-block-embed { margin: 0; }


/* ============================================================
   02. Typography
   ============================================================ */

h1 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 2.8vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  2vw,   var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Serif body paragraphs */
p, .prose p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--gray-800);
}

.eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gray-500);
}


/* ============================================================
   03. Layout & Grid
   ============================================================ */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Main wrapper */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* 12-col grid helper */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

/* Page content offset below sticky header */
.page-content {
  padding-top:    var(--space-10);
  padding-bottom: var(--space-20);
}

/* Archive two-col layout with optional sidebar */
.archive-layout { display: grid; gap: var(--space-8); }
.archive-layout--sidebar {
  grid-template-columns: 1fr 280px;
  align-items: start;
}
.content-area         { }
.content-area--full   { }
.content-area--narrow { min-width: 0; }

/* Single post layout */
.single-layout { display: grid; gap: var(--space-8); }
.single-layout--sidebar {
  grid-template-columns: 1fr 280px;
  align-items: start;
}


/* ============================================================
   04. Utilities
   ============================================================ */

.visually-hidden,
.screen-reader-text {
  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;
}

.text-center { text-align:  center; }
.text-left   { text-align:  left;   }
.text-right  { text-align:  right;  }

.u-mt-0  { margin-top: 0; }
.u-mb-8  { margin-bottom: var(--space-8); }

/* Divider line */
.divider { border-top: 1px solid var(--gray-200); margin: var(--space-8) 0; }


/* ============================================================
   05. Buttons
   ============================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     600;
  letter-spacing:  0.02em;
  white-space:     nowrap;
  border-radius:   var(--radius);
  padding:         var(--space-3) var(--space-6);
  min-height:      44px;
  transition:      background-color var(--transition-fast),
                   color            var(--transition-fast),
                   border-color     var(--transition-fast),
                   transform        var(--transition-fast),
                   box-shadow       var(--transition-fast);
  cursor:          pointer;
  border:          2px solid transparent;
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Lift on hover */
.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0);    box-shadow: none; }

/* Primary — red */
.btn--primary {
  background-color: var(--primary);
  color:            var(--white);
  border-color:     var(--primary);
}
.btn--primary:hover {
  background-color: var(--primary-dark);
  border-color:     var(--primary-dark);
  color:            var(--white);
}

/* Outline */
.btn--outline {
  background-color: transparent;
  color:            var(--gray-900);
  border-color:     var(--gray-900);
}
.btn--outline:hover {
  background-color: var(--gray-900);
  color:            var(--white);
}

/* Ghost / text */
.btn--ghost {
  background:  transparent;
  color:       var(--gray-700);
  border-color:transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover { color: var(--primary); box-shadow: none; transform: none; }

/* Ghost white (on dark backgrounds) */
.btn--ghost-white {
  background:   transparent;
  color:        var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn--ghost-white:hover {
  background-color: rgba(255,255,255,0.12);
  color:            var(--white);
  border-color:     var(--white);
}

/* White (on coloured backgrounds) */
.btn--white {
  background-color: var(--white);
  color:            var(--gray-900);
  border-color:     var(--white);
}
.btn--white:hover {
  background-color: var(--gray-100);
  color:            var(--gray-900);
}

/* Sizes */
.btn--sm  { font-size: var(--text-xs);  padding: var(--space-2) var(--space-4); min-height: 36px; }
.btn--lg  { font-size: var(--text-base); padding: var(--space-4) var(--space-8); min-height: 52px; }
.btn--full{ width: 100%; }


/* ============================================================
   06. Forms
   ============================================================ */

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.form-label {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--gray-800);
}

.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="tel"],
textarea,
select {
  font-family:      var(--font-sans);
  font-size:        var(--text-sm);
  color:            var(--gray-800);
  background-color: var(--white);
  border:           1px solid var(--gray-300);
  border-radius:    var(--radius);
  padding:          var(--space-3) var(--space-4);
  width:            100%;
  min-height:       44px;
  transition:       border-color var(--transition-fast),
                    box-shadow   var(--transition-fast);
  appearance:       none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline:    none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(230,57,70,0.12);
}

textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }

/* WP Search Form */
.search-form {
  display: flex;
  gap: var(--space-2);
}
.search-form .search-field  { flex: 1; }
.search-form .search-submit { flex-shrink: 0; }
.search-submit.btn--primary,
.search-form .search-submit {
  background-color: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 44px;
}
.search-form .search-submit:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); }


/* ============================================================
   07. Skip Link & Accessibility
   ============================================================ */

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--primary);
  color: var(--white);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }


/* ============================================================
   08. Top Bar
   ============================================================ */

.top-bar {
  background-color: var(--gray-900);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  user-select: none;
  position: relative;
  z-index: calc(var(--z-header) + 1);
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:    var(--space-2);
  padding-bottom: var(--space-2);
  gap: var(--space-4);
}

.top-bar__text { margin: 0; max-width: none; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
.top-bar__text a { color: var(--accent-yellow); text-decoration: underline; }
.top-bar__text a:hover { color: var(--white); }

.top-bar__close {
  flex-shrink: 0;
  color: var(--gray-400);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  line-height: 1;
  display: flex;
  align-items: center;
}
.top-bar__close:hover { opacity: 1; }


/* ============================================================
   09. Site Header & Navigation
   ============================================================ */

.site-header {
  position:         sticky;
  top:              0;
  left:             0;
  right:            0;
  z-index:          var(--z-header);
  background-color: var(--white);
  border-bottom:    1px solid transparent;
  transition:       border-color   var(--transition),
                    box-shadow     var(--transition);
  height:           var(--header-height);
  display:          flex;
  align-items:      center;
}

.site-header.is-scrolled {
  border-bottom-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  height:      100%;
}

/* Logo */
.site-logo { flex-shrink: 0; line-height: 1; }
.site-logo img { height: 38px; width: auto; }
.site-logo__text {
  font-family:    var(--font-sans);
  font-size:      var(--text-xl);
  font-weight:    700;
  letter-spacing: -0.03em;
  color:          var(--gray-900);
}
.site-logo__text:hover { color: var(--primary); }

/* Desktop primary nav */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav__list {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.nav__item { position: relative; }

.nav__link {
  display:      flex;
  align-items:  center;
  gap:          var(--space-1);
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  font-weight:  500;
  color:        var(--gray-700);
  padding:      var(--space-2) var(--space-3);
  border-radius:var(--radius);
  white-space:  nowrap;
  transition:   color var(--transition-fast), background-color var(--transition-fast);
  position:     relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background-color: var(--primary);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  transform-origin: left;
  border-radius: 1px;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--gray-900);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__chevron {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.has-dropdown:hover .nav__chevron,
.has-dropdown.is-open .nav__chevron { transform: rotate(180deg); }

/* Dropdown */
.nav__dropdown {
  position:         absolute;
  top:              calc(100% + var(--space-2));
  left:             0;
  min-width:        200px;
  background-color: var(--white);
  border:           1px solid var(--gray-200);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-lg);
  padding:          var(--space-2) 0;
  opacity:          0;
  transform:        translateY(-8px);
  visibility:       hidden;
  transition:       opacity        var(--transition-fast),
                    transform      var(--transition-fast),
                    visibility     var(--transition-fast);
  z-index:          var(--z-overlay);
}

.has-dropdown:hover .nav__dropdown,
.has-dropdown.is-open .nav__dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.nav__dropdown .nav__item { display: block; }
.nav__dropdown .nav__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-radius: 0;
}
.nav__dropdown .nav__link::after { display: none; }
.nav__dropdown .nav__link:hover { background-color: var(--gray-50); color: var(--primary); }

/* Header utility buttons */
.header-utils {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

.header-utils__btn {
  position:      relative;
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         40px;
  height:        40px;
  border-radius: 50%;
  color:         var(--gray-700);
  transition:    color            var(--transition-fast),
                 background-color var(--transition-fast);
  flex-shrink:   0;
}
.header-utils__btn:hover { color: var(--gray-900); background-color: var(--gray-100); }

/* Cart count badge */
.cart-count {
  position:         absolute;
  top:              2px;
  right:            2px;
  background-color: var(--primary);
  color:            var(--white);
  font-family:      var(--font-sans);
  font-size:        10px;
  font-weight:      700;
  line-height:      1;
  width:            17px;
  height:           17px;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           2px solid var(--white);
}

/* Hamburger (hidden on desktop) */
.hamburger {
  display:        none;
  flex-direction: column;
  justify-content:center;
  gap:            5px;
  width:          40px;
  height:         40px;
  padding:        8px;
  border-radius:  var(--radius);
  transition:     background-color var(--transition-fast);
}
.hamburger:hover { background-color: var(--gray-100); }
.hamburger__line {
  display:          block;
  width:            100%;
  height:           2px;
  background-color: var(--gray-800);
  border-radius:    2px;
  transition:       transform var(--transition), opacity var(--transition);
}
/* Animate to X when open */
.hamburger.is-open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   10. Mobile Menu
   ============================================================ */

.mobile-menu {
  position:         fixed;
  inset:            0;
  background-color: var(--white);
  z-index:          var(--z-modal);
  display:          flex;
  flex-direction:   column;
  overflow-y:       auto;
  transform:        translateX(-100%);
  transition:       transform var(--transition-slow);
  will-change:      transform;
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.5);
  z-index:    calc(var(--z-modal) - 1);
  opacity:    0;
  transition: opacity var(--transition-slow);
  backdrop-filter: blur(2px);
}
.mobile-menu__backdrop:not([hidden]) { display: block; }
.mobile-menu__backdrop.is-visible { opacity: 1; }

.mobile-menu__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-4) var(--space-6);
  border-bottom:   1px solid var(--gray-200);
  flex-shrink:     0;
}

.mobile-menu__close {
  width:         40px;
  height:        40px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: 50%;
  color:         var(--gray-600);
  transition:    background-color var(--transition-fast);
}
.mobile-menu__close:hover { background-color: var(--gray-100); color: var(--gray-900); }

.mobile-menu__nav { padding: var(--space-4) 0; flex: 1; }

.mobile-nav__list { display: flex; flex-direction: column; }

.mobile-nav__list .nav__item { border-bottom: 1px solid var(--gray-100); }
.mobile-nav__list .nav__link {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     var(--space-4) var(--space-6);
  font-size:   var(--text-base);
  font-weight: 500;
  color:       var(--gray-800);
  border-radius: 0;
}
.mobile-nav__list .nav__link::after { display: none; }
.mobile-nav__list .nav__link:hover { background-color: var(--gray-50); color: var(--primary); }
.mobile-nav__list .nav__link.is-active { color: var(--primary); }

.mobile-nav__list .nav__dropdown {
  position:   static;
  visibility: visible;
  opacity:    1;
  transform:  none;
  box-shadow: none;
  border:     none;
  padding:    0;
  background: var(--gray-50);
  display:    none;
  border-radius: 0;
}
.mobile-nav__list .has-dropdown.is-open .nav__dropdown { display: block; }
.mobile-nav__list .nav__dropdown .nav__link {
  padding-left: var(--space-10);
  font-size:    var(--text-sm);
}

.mobile-menu__footer {
  padding:      var(--space-6);
  border-top:   1px solid var(--gray-200);
  flex-shrink:  0;
}

.mobile-search {
  display: flex;
  gap: var(--space-2);
}
.mobile-search__input { flex: 1; font-size: var(--text-sm); }
.mobile-search__submit {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  flex-shrink:      0;
  background-color: var(--primary);
  color:            var(--white);
  border-radius:    var(--radius);
  transition:       background-color var(--transition-fast);
}
.mobile-search__submit:hover { background-color: var(--primary-dark); }


/* ============================================================
   11. Search Overlay
   ============================================================ */

.search-overlay {
  position:         fixed;
  inset:            0;
  background-color: rgba(255,255,255,0.97);
  backdrop-filter:  blur(8px);
  z-index:          var(--z-overlay);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  opacity:          0;
  transform:        translateY(-20px);
  transition:       opacity var(--transition), transform var(--transition);
  pointer-events:   none;
}
.search-overlay:not([hidden]) { display: flex; }
.search-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.search-overlay__inner {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  position:    relative;
  max-width:   720px;
  width:       100%;
}

.search-overlay__form {
  display: flex;
  flex: 1;
  gap: var(--space-3);
}

.search-overlay__input {
  flex:      1;
  font-size: var(--text-2xl);
  border:    none;
  border-bottom: 2px solid var(--gray-300);
  border-radius: 0;
  padding:   var(--space-4) 0;
  background: transparent;
}
.search-overlay__input:focus { border-bottom-color: var(--primary); box-shadow: none; }
.search-overlay__input::placeholder { color: var(--gray-400); }

.search-overlay__close {
  position:      absolute;
  top:           var(--space-4);
  right:         0;
  width:         44px;
  height:        44px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: 50%;
  color:         var(--gray-600);
  transition:    background-color var(--transition-fast);
}
.search-overlay__close:hover { background-color: var(--gray-100); }


/* ============================================================
   12. Hero Section
   ============================================================ */

.hero {
  position:        relative;
  min-height:      min(calc(100vh - var(--header-height)), 680px);
  display:         flex;
  align-items:     center;
  background-image:     var(--hero-bg);
  background-size:      cover;
  background-position:  center;
  background-color:     var(--gray-900);
  overflow:        hidden;
}

.hero__overlay {
  position:         absolute;
  inset:            0;
  background:       linear-gradient(
    to right,
    rgba(15,15,15,0.82) 0%,
    rgba(15,15,15,0.55) 55%,
    rgba(15,15,15,0.20) 100%
  );
}

.hero__inner {
  position: relative;
  z-index:  var(--z-base);
  padding-top:    var(--space-24);
  padding-bottom: var(--space-24);
}

.hero__content { max-width: 640px; }

.hero__heading {
  color:          var(--white);
  font-size:      clamp(2rem, 5vw, 3.5rem);
  font-weight:    700;
  line-height:    var(--leading-tight);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-5);
}

.hero__sub {
  font-family:   var(--font-serif);
  font-size:     var(--text-xl);
  color:         rgba(255,255,255,0.82);
  margin-bottom: var(--space-8);
  max-width:     52ch;
  line-height:   var(--leading-snug);
}

.hero__ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}


/* ============================================================
   13. Section Layouts
   ============================================================ */

.section {
  padding-top:    var(--space-20);
  padding-bottom: var(--space-20);
}

.section--alt { background-color: var(--gray-50); }

.section-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--space-4);
  margin-bottom:   var(--space-10);
  padding-bottom:  var(--space-6);
  border-bottom:   1px solid var(--gray-200);
}

.section-header__title {
  font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
  color:     var(--gray-900);
}

.section-header__link {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--gray-600);
  white-space: nowrap;
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  transition:  color var(--transition-fast);
  flex-shrink: 0;
}
.section-header__link:hover { color: var(--primary); }


/* ============================================================
   14. Book Cards & Grid
   ============================================================ */

.book-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--space-6) var(--space-5);
}

.book-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.book-card__cover-link { display: block; }

.book-card__cover-wrap {
  aspect-ratio:     2 / 3;
  overflow:         hidden;
  border-radius:    var(--radius);
  background-color: var(--gray-100);
  position:         relative;
  box-shadow:       var(--shadow-sm);
  transition:       transform var(--transition), box-shadow var(--transition);
}

.book-card:hover .book-card__cover-wrap {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.book-card__cover {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position:center top;
  transition:     transform var(--transition-slow);
}
.book-card:hover .book-card__cover { transform: scale(1.03); }

.book-card__cover--placeholder {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       linear-gradient(135deg, var(--gray-200), var(--gray-300));
  font-family:      var(--font-sans);
  font-size:        var(--text-4xl);
  font-weight:      700;
  color:            var(--gray-400);
}

.book-card__body { padding: 0 var(--space-1); }

.book-card__title {
  font-size:   var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
  color:       var(--gray-900);
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.book-card__title a { color: inherit; }
.book-card__title a:hover { color: var(--primary); }

.book-card__author {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--gray-500);
  margin: 0;
  max-width: none;
}

.book-card__price {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: 700;
  color:       var(--primary);
  margin: var(--space-1) 0 0;
  max-width: none;
}


/* ============================================================
   15. Blog Cards & Grid
   ============================================================ */

.post-grid,
.blog-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--space-8);
}

.blog-card {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.blog-card__image-link { display: block; }

.blog-card__image-wrap {
  aspect-ratio:     3 / 2;
  overflow:         hidden;
  border-radius:    var(--radius);
  background-color: var(--gray-100);
  margin-bottom:    var(--space-4);
}

.blog-card__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card__image { transform: scale(1.04); }

.blog-card__body { display: flex; flex-direction: column; gap: var(--space-3); }

.blog-card__title {
  font-size:   var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color:       var(--gray-900);
  margin:      0;
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--primary); }

.blog-card__excerpt {
  font-family: var(--font-serif);
  font-size:   var(--text-sm);
  color:       var(--gray-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Category Label */
.post-categories { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.category-label {
  display:          inline-block;
  font-family:      var(--font-sans);
  font-size:        var(--text-xs);
  font-weight:      700;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  color:            var(--primary);
  padding:          2px 0;
  border-bottom:    1px solid currentColor;
  line-height:      1.4;
  transition:       opacity var(--transition-fast);
}
.category-label:hover { opacity: 0.7; color: var(--primary); }

/* Post Meta */
.post-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--gray-500);
}
.post-meta__sep { color: var(--gray-300); }


/* ============================================================
   16. Author Cards & Grid
   ============================================================ */

.author-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   var(--space-8);
}

.author-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  text-align:     center;
}

.author-card__photo-link { display: block; }

.author-card__photo-wrap {
  width:            120px;
  height:           120px;
  border-radius:    50%;
  overflow:         hidden;
  background-color: var(--gray-200);
  margin-inline:    auto;
  transition:       box-shadow var(--transition);
}
.author-card:hover .author-card__photo-wrap {
  box-shadow: 0 0 0 4px var(--primary);
}

.author-card__photo {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  transition:  transform var(--transition-slow);
}
.author-card:hover .author-card__photo { transform: scale(1.06); }

.author-card__photo--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-sans);
  font-size:       var(--text-3xl);
  font-weight:     700;
  color:           var(--gray-400);
  background:      linear-gradient(135deg, var(--gray-100), var(--gray-200));
}

.author-card__body { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }

.author-card__name {
  font-size:     var(--text-lg);
  font-weight:   600;
  margin:        0;
  letter-spacing:0;
}
.author-card__name a { color: var(--gray-900); }
.author-card__name a:hover { color: var(--primary); }

.author-card__bio {
  font-family: var(--font-serif);
  font-size:   var(--text-sm);
  color:       var(--gray-600);
  margin:      0;
  line-height: var(--leading-relaxed);
}


/* ============================================================
   17. Promo Banners
   ============================================================ */

/* Slim strip banner */
.promo-banner {
  padding: var(--space-8) 0;
}

.promo-banner--red {
  background-color: var(--primary);
  color: var(--white);
}

.promo-banner--dark {
  background-color: var(--gray-900);
  color: var(--white);
}

.promo-banner__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-8);
  flex-wrap:       wrap;
}

.promo-banner__copy { flex: 1; }

.promo-banner__eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.7);
  margin-bottom:  var(--space-2);
}

.promo-banner__heading {
  font-size:      clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight:    700;
  color:          var(--white);
  letter-spacing: -0.02em;
}

/* Full-width photographic promo */
.promo-full {
  position:   relative;
  min-height: 480px;
  display:    flex;
  align-items:center;
  background-color: var(--gray-900);
  overflow:   hidden;
}

.promo-full__image-wrap {
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(
    to right,
    rgba(20,20,20,0.90) 0%,
    rgba(20,20,20,0.55) 60%,
    rgba(20,20,20,0.20) 100%
  );
}

.promo-full__content {
  position:  relative;
  z-index:   var(--z-base);
  max-width: 560px;
  padding-top:    var(--space-16);
  padding-bottom: var(--space-16);
  color:     var(--white);
}

.promo-full__eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--accent-yellow);
  margin-bottom:  var(--space-4);
}

.promo-full__heading {
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight:    700;
  color:          var(--white);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-5);
}

.promo-full__body {
  font-family:   var(--font-serif);
  font-size:     var(--text-lg);
  color:         rgba(255,255,255,0.80);
  margin-bottom: var(--space-8);
  line-height:   var(--leading-relaxed);
  max-width:     48ch;
}


/* ============================================================
   18. Featured Grid (Editor's Picks)
   ============================================================ */

.featured-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   var(--space-8);
}

.featured-book-card {
  display:          flex;
  flex-direction:   column;
  border:           1px solid var(--gray-200);
  border-radius:    var(--radius-lg);
  overflow:         hidden;
  transition:       box-shadow var(--transition);
}
.featured-book-card:hover { box-shadow: var(--shadow-lg); }

.featured-book-card__cover-link { display: block; }
.featured-book-card__cover-wrap {
  aspect-ratio:     2 / 3;
  max-height:       280px;
  overflow:         hidden;
  background-color: var(--gray-100);
}

.featured-book-card__cover {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.featured-book-card:hover .featured-book-card__cover { transform: scale(1.03); }

.featured-book-card__body {
  padding:        var(--space-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  flex:           1;
}

.featured-book-card__title {
  font-size:     var(--text-xl);
  font-weight:   600;
  line-height:   var(--leading-snug);
  letter-spacing:-0.01em;
}
.featured-book-card__title a { color: var(--gray-900); }
.featured-book-card__title a:hover { color: var(--primary); }

.featured-book-card__author {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  margin:      0;
}

.featured-book-card__excerpt {
  font-family: var(--font-serif);
  font-size:   var(--text-sm);
  color:       var(--gray-700);
  line-height: var(--leading-relaxed);
  flex:        1;
}
.featured-book-card__excerpt p { font-size: inherit; color: inherit; margin: 0; }

.featured-book-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      auto;
  padding-top:     var(--space-4);
  border-top:      1px solid var(--gray-100);
}

.featured-book-card__price {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  font-weight: 700;
  color:       var(--primary);
}


/* ============================================================
   19. Single Post / Prose
   ============================================================ */

/* Post layout */
.single-post__header {
  padding-bottom:  var(--space-8);
  border-bottom:   1px solid var(--gray-200);
  margin-bottom:   var(--space-8);
}
.single-post__title {
  font-size:      clamp(var(--text-3xl), 4vw, var(--text-5xl));
  line-height:    var(--leading-tight);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-4);
  max-width:      none;
}

.single-post__thumbnail {
  margin-bottom: var(--space-8);
}

.single-post__image {
  width:         100%;
  aspect-ratio:  16 / 7;
  object-fit:    cover;
  border-radius: var(--radius);
}

.single-post__caption {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--gray-500);
  margin-top:  var(--space-3);
  text-align:  center;
}

.single-post__footer { margin-top: var(--space-12); }

/* Prose — rich content styles */
.prose { max-width: 72ch; }

.prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8);  margin-bottom: var(--space-3); }
.prose h4 { margin-top: var(--space-6);  margin-bottom: var(--space-3); }

.prose p  { margin-bottom: var(--space-5); }

.prose ul,
.prose ol  {
  margin-bottom:   var(--space-5);
  padding-left:    var(--space-6);
  list-style:      disc;
}
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); font-family: var(--font-serif); font-size: var(--text-base); }

.prose blockquote {
  border-left:     4px solid var(--primary);
  padding-left:    var(--space-6);
  margin:          var(--space-8) 0;
  color:           var(--gray-600);
  font-style:      italic;
  font-family:     var(--font-serif);
  font-size:       var(--text-xl);
  line-height:     var(--leading-relaxed);
}
.prose blockquote p { font-size: inherit; color: inherit; }

.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--primary-dark); }

.prose strong { font-weight: 700; color: var(--gray-900); }

.prose code {
  font-family:      monospace;
  font-size:        0.875em;
  background-color: var(--gray-100);
  padding:          2px 6px;
  border-radius:    var(--radius-sm);
  color:            var(--gray-800);
}

.prose pre {
  background-color: var(--gray-900);
  color:            var(--gray-100);
  padding:          var(--space-6);
  border-radius:    var(--radius);
  overflow-x:       auto;
  margin-bottom:    var(--space-5);
}
.prose pre code { background: none; padding: 0; color: inherit; font-size: var(--text-sm); }

.prose img {
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  max-width:     100%;
}

.prose hr { margin: var(--space-10) 0; }

.prose figure { margin: var(--space-8) 0; }
.prose figcaption {
  text-align:  center;
  font-size:   var(--text-xs);
  color:       var(--gray-500);
  font-family: var(--font-sans);
  margin-top:  var(--space-3);
}

/* Post tags */
.post-tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  align-items: center;
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--gray-500);
}
.post-tags__label { font-weight: 600; }
.post-tags a {
  display:          inline-block;
  padding:          var(--space-1) var(--space-3);
  background-color: var(--gray-100);
  border-radius:    var(--radius-sm);
  color:            var(--gray-600);
  transition:       background-color var(--transition-fast), color var(--transition-fast);
}
.post-tags a:hover { background-color: var(--primary); color: var(--white); }

/* Author Bio Box */
.author-bio {
  display:          flex;
  gap:              var(--space-5);
  padding:          var(--space-6);
  background-color: var(--gray-50);
  border-radius:    var(--radius-lg);
  margin-top:       var(--space-8);
}
.author-bio__avatar { flex-shrink: 0; }
.author-bio__img {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  object-fit:    cover;
}
.author-bio__name {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  margin-bottom: var(--space-2);
}
.author-bio__description {
  font-family: var(--font-serif);
  font-size:   var(--text-sm);
  color:       var(--gray-700);
  margin:      0;
}

/* Post Navigation */
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: var(--space-4); }
.post-navigation .nav-previous,
.post-navigation .nav-next {
  flex: 1;
  padding:      var(--space-5);
  border:       1px solid var(--gray-200);
  border-radius:var(--radius);
  transition:   border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.post-navigation .nav-next { text-align: right; }
.post-navigation a { display: flex; flex-direction: column; gap: var(--space-2); }
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.post-navigation__dir {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:       var(--gray-500);
}
.post-navigation__title {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--gray-900);
}

/* Comments */
.comments-area { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--gray-200); }
.comments-title { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
.comment-list   { display: flex; flex-direction: column; gap: var(--space-6); }
.comment-body   { background-color: var(--gray-50); border-radius: var(--radius); padding: var(--space-5); }
.comment-meta   { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--gray-500); margin-bottom: var(--space-3); }
.comment-content p { font-size: var(--text-sm); }
.comment-reply-link {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: 600;
  color:       var(--primary);
  text-decoration: underline;
}
.comment-form .comment-notes, .comment-form label {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--gray-700);
}
.comment-form-comment textarea { margin-top: var(--space-2); }
.comment-form .submit { background-color: var(--primary); color: var(--white); }


/* ============================================================
   20. Single Book
   ============================================================ */

.book-single__hero {
  display:   grid;
  grid-template-columns: 280px 1fr;
  gap:       var(--space-12);
  align-items: start;
  margin-bottom: var(--space-12);
}

.book-single__cover-wrap {
  aspect-ratio:     2 / 3;
  border-radius:    var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}
.book-single__cover {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.book-single__genres { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.book-single__title {
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight:    700;
  letter-spacing: -0.03em;
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-2);
}

.book-single__subtitle {
  font-family: var(--font-serif);
  font-size:   var(--text-xl);
  color:       var(--gray-600);
  font-style:  italic;
  margin:      0 0 var(--space-4);
  max-width:   none;
}

.book-single__author {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  color:        var(--gray-600);
  margin-bottom:var(--space-3);
  max-width:    none;
}

.book-single__price {
  font-family:   var(--font-sans);
  font-size:     var(--text-3xl);
  font-weight:   700;
  color:         var(--primary);
  margin-bottom: var(--space-5);
  max-width:     none;
}

.book-single__actions {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-3);
  margin-bottom: var(--space-8);
}

/* Book metadata table */
.book-meta-table { margin-top: var(--space-2); border-top: 1px solid var(--gray-200); }
.book-meta-table tr { border-bottom: 1px solid var(--gray-100); }
.book-meta-table th,
.book-meta-table td {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  padding:     var(--space-3) 0;
  text-align:  left;
  vertical-align: top;
}
.book-meta-table th {
  font-weight: 600;
  color:       var(--gray-500);
  width:       120px;
  padding-right: var(--space-4);
}
.book-meta-table td { color: var(--gray-800); }

.book-single__description { max-width: 72ch; }
.book-single__section-title {
  font-size:     var(--text-2xl);
  margin-bottom: var(--space-6);
  padding-bottom:var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

/* Related books */
.related-books {
  margin-top:    var(--space-16);
  padding-top:   var(--space-10);
  border-top:    1px solid var(--gray-200);
}
.related-books__title {
  font-size:     var(--text-2xl);
  margin-bottom: var(--space-8);
}


/* ============================================================
   21. Single Author
   ============================================================ */

.author-single__header {
  display:   grid;
  grid-template-columns: 200px 1fr;
  gap:       var(--space-10);
  align-items: start;
  margin-bottom: var(--space-10);
  padding-bottom:var(--space-10);
  border-bottom: 1px solid var(--gray-200);
}

.author-single__photo-wrap {
  width:         200px;
  height:        200px;
  border-radius: 50%;
  overflow:      hidden;
  background-color: var(--gray-200);
}
.author-single__photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.author-single__name {
  font-size:      clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight:    700;
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-4);
}

.author-single__location {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  margin-bottom: var(--space-4);
  max-width:   none;
}

.author-single__social {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-3);
}

.author-single__social-link {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  color:       var(--gray-600);
  transition:  color var(--transition-fast);
}
.author-single__social-link:hover { color: var(--primary); }

.author-single__bio { margin-bottom: var(--space-12); }

.author-books { padding-top: var(--space-10); border-top: 1px solid var(--gray-200); }
.author-books__title { font-size: var(--text-2xl); margin-bottom: var(--space-8); }


/* ============================================================
   22. Archive / Search Headers
   ============================================================ */

.archive-header,
.archive-page-header,
.page-header {
  margin-bottom: var(--space-10);
  padding-bottom:var(--space-6);
  border-bottom: 1px solid var(--gray-200);
}

.archive-page-header__title,
.archive-header__title,
.page-header__title {
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-3);
}

.archive-page-header__count {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  margin:      0;
}

.archive-page-header__description,
.archive-header__description {
  font-family: var(--font-serif);
  font-size:   var(--text-lg);
  color:       var(--gray-600);
  margin-top:  var(--space-3);
}
.archive-page-header__description p { font-size: inherit; color: inherit; margin: 0; }

.search-page-form { margin-bottom: var(--space-10); max-width: 560px; }


/* ============================================================
   23. Pagination
   ============================================================ */

.pagination { margin-top: var(--space-12); }

.pagination__list {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-2);
}

.pagination__item a,
.pagination__item span {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-width:        40px;
  height:           40px;
  padding-inline:   var(--space-3);
  font-family:      var(--font-sans);
  font-size:        var(--text-sm);
  font-weight:      500;
  color:            var(--gray-700);
  border:           1px solid var(--gray-200);
  border-radius:    var(--radius);
  transition:       border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.pagination__item a:hover {
  border-color:     var(--primary);
  color:            var(--primary);
  background-color: rgba(230,57,70,0.05);
}

.pagination__item.is-active span,
.pagination__item .current {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--white);
  pointer-events:   none;
}


/* ============================================================
   24. Breadcrumbs
   ============================================================ */

.breadcrumbs {
  margin-bottom: var(--space-6);
}

.breadcrumbs__list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2);
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--gray-500);
}

.breadcrumbs__item {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.breadcrumbs__item:not(:last-child)::after {
  content: '›';
  color:   var(--gray-400);
  flex-shrink: 0;
}

.breadcrumbs__item a { color: var(--gray-600); }
.breadcrumbs__item a:hover { color: var(--primary); }
.breadcrumbs__item.is-current { color: var(--gray-800); font-weight: 500; }


/* ============================================================
   25. Sidebar & Widgets
   ============================================================ */

.sidebar { min-width: 0; }

.widget {
  margin-bottom:  var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom:  1px solid var(--gray-200);
}
.widget:last-child { border-bottom: none; }

.widget__title {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gray-500);
  margin-bottom:  var(--space-5);
}

/* Widget search */
.widget_search .search-form { flex-direction: column; }

/* Widget nav menus */
.widget_nav_menu ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.widget_nav_menu a {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--gray-700);
}
.widget_nav_menu a:hover { color: var(--primary); }

/* Widget categories */
.widget_categories ul, .widget_archive ul { list-style: none; }
.widget_categories li, .widget_archive li  {
  display:       flex;
  justify-content: space-between;
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--gray-100);
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
}
.widget_categories a, .widget_archive a { color: var(--gray-700); }
.widget_categories a:hover, .widget_archive a:hover { color: var(--primary); }


/* ============================================================
   26. Site Footer
   ============================================================ */

.site-footer {
  background-color: var(--footer-bg, var(--gray-900));
  color:            var(--gray-400);
  font-family:      var(--font-sans);
  margin-top:       auto;
}

/* Newsletter Strip */
.footer-newsletter {
  background-color: var(--gray-800);
  padding:          var(--space-12) 0;
}

.footer-newsletter__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-8);
  flex-wrap:       wrap;
}

.footer-newsletter__heading {
  font-size:      clamp(var(--text-xl), 2vw, var(--text-2xl));
  color:          var(--white);
  margin-bottom:  var(--space-2);
  letter-spacing: -0.02em;
}

.footer-newsletter__sub {
  font-size:   var(--text-sm);
  color:       var(--gray-400);
  margin:      0;
  max-width:   46ch;
  line-height: var(--leading-normal);
}

.newsletter-form { max-width: 400px; width: 100%; }

.newsletter-form__group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.newsletter-form__input {
  flex:             1;
  min-width:        200px;
  background-color: rgba(255,255,255,0.1);
  border-color:     rgba(255,255,255,0.2);
  color:            var(--white);
}
.newsletter-form__input::placeholder { color: var(--gray-500); }
.newsletter-form__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,57,70,0.2); }

.newsletter-form__disclaimer {
  font-size:  var(--text-xs);
  color:      var(--gray-500);
  margin-top: var(--space-3);
  line-height:var(--leading-relaxed);
}

/* Footer main columns */
.footer-main { padding: var(--space-16) 0 var(--space-12); }

.footer-main__inner {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:                   var(--space-8);
}

.footer-col--brand { display: flex; flex-direction: column; gap: var(--space-5); }

.footer-logo .site-logo__text { color: var(--white); }
.footer-logo .site-logo__text:hover { color: var(--primary); }
.footer-logo img { filter: brightness(0) invert(1); opacity: 0.9; }

.footer-tagline {
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  line-height: var(--leading-relaxed);
  margin:      0;
  max-width:   36ch;
}

.footer-social {
  display: flex;
  gap:     var(--space-3);
}

.footer-social__link {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background-color: rgba(255,255,255,0.08);
  color:            var(--gray-400);
  transition:       background-color var(--transition-fast), color var(--transition-fast);
}
.footer-social__link:hover { background-color: var(--primary); color: var(--white); }

.footer-col__heading {
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--gray-400);
  margin-bottom:  var(--space-5);
  display:        block;
}

.footer-nav {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}
.footer-nav li a {
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  transition:  color var(--transition-fast);
  line-height: var(--leading-normal);
}
.footer-nav li a:hover { color: var(--white); }

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding:    var(--space-5) 0;
}

.footer-bottom__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

.footer-bottom__copy {
  font-size: var(--text-xs);
  color:     var(--gray-600);
  margin:    0;
  max-width: none;
}
.footer-bottom__copy a { color: var(--gray-500); }
.footer-bottom__copy a:hover { color: var(--white); }

.footer-bottom__payments {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.payment-icon {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background-color: rgba(255,255,255,0.08);
  color:            var(--gray-500);
  border-radius:    var(--radius-sm);
  font-size:        9px;
  font-weight:      700;
  letter-spacing:   0.06em;
  padding:          3px 6px;
  min-width:        34px;
  height:           22px;
}


/* ============================================================
   27. 404 Page
   ============================================================ */

.error404 { padding: var(--space-16) 0; }

.error404__inner {
  text-align:      center;
  max-width:       600px;
  margin-inline:   auto;
  padding-bottom:  var(--space-16);
}

.error404__code {
  font-family:    var(--font-sans);
  font-size:      clamp(6rem, 15vw, 12rem);
  font-weight:    800;
  color:          var(--gray-100);
  line-height:    1;
  letter-spacing: -0.05em;
  margin:         0;
  max-width:      none;
}

.error404__heading {
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-4);
}

.error404__text {
  font-family:   var(--font-serif);
  font-size:     var(--text-lg);
  color:         var(--gray-600);
  margin-bottom: var(--space-8);
  max-width:     none;
}

.error404__search { margin-bottom: var(--space-8); }
.error404__search .search-form { max-width: 440px; margin-inline: auto; }

.error404__links {
  display:         flex;
  justify-content: center;
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

.error404__suggestions { margin-top: var(--space-16); }
.error404__suggestions-title { font-size: var(--text-2xl); margin-bottom: var(--space-8); }


/* ============================================================
   28. No Results
   ============================================================ */

.no-results {
  padding:   var(--space-16) 0;
  text-align:center;
}

.no-results__icon {
  display:       block;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color:         var(--gray-300);
}

.no-results__heading { margin-bottom: var(--space-4); }

.no-results__text {
  font-family:   var(--font-serif);
  font-size:     var(--text-lg);
  color:         var(--gray-500);
  margin-bottom: var(--space-8);
}

.no-results__suggestions p { font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--space-3); }
.no-results__suggestions ul { list-style: disc; display: inline-block; text-align: left; }
.no-results__suggestions li { margin-bottom: var(--space-2); }
.no-results__suggestions a {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--primary);
  text-decoration: underline;
}


/* ============================================================
   29. Back to Top
   ============================================================ */

.back-to-top {
  position:         fixed;
  bottom:           var(--space-6);
  right:            var(--space-6);
  z-index:          var(--z-header);
  width:            44px;
  height:           44px;
  border-radius:    50%;
  background-color: var(--gray-900);
  color:            var(--white);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       var(--shadow-lg);
  opacity:          0;
  transform:        translateY(16px);
  transition:       opacity var(--transition), transform var(--transition), background-color var(--transition-fast);
  pointer-events:   none;
}
.back-to-top:not([hidden]) { display: flex; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background-color: var(--primary); }


/* ============================================================
   30. WooCommerce
   ============================================================ */

.wc-layout { padding: var(--space-10) 0 var(--space-20); }

/* WC notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
  padding:       var(--space-4) var(--space-5);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  border-left:   4px solid;
}
.woocommerce-message { background-color: #f0fdf4; border-color: var(--accent-green); color: #166534; }
.woocommerce-error   { background-color: #fef2f2; border-color: var(--primary);      color: #991b1b; }
.woocommerce-info    { background-color: #eff6ff; border-color: var(--accent-blue);  color: #1e40af; }

/* WC buttons inherit our .btn */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font-sans);
  font-size:        var(--text-sm);
  font-weight:      600;
  color:            var(--white);
  background-color: var(--primary);
  border:           2px solid var(--primary);
  border-radius:    var(--radius);
  padding:          var(--space-3) var(--space-6);
  min-height:       44px;
  transition:       background-color var(--transition-fast), transform var(--transition-fast);
  cursor:           pointer;
  text-decoration:  none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--primary-dark);
  border-color:     var(--primary-dark);
  color:            var(--white);
  transform:        translateY(-1px);
}

/* WC product loop */
.woocommerce ul.products {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   var(--space-6);
  margin:                0;
  padding:               0;
  list-style:            none;
}

.woocommerce ul.products li.product { margin: 0; }

.woocommerce ul.products li.product a img {
  border-radius:    var(--radius);
  aspect-ratio:     2 / 3;
  object-fit:       cover;
  width:            100%;
  margin-bottom:    var(--space-3);
  transition:       transform var(--transition), box-shadow var(--transition);
}
.woocommerce ul.products li.product:hover a img {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  font-weight:  600;
  color:        var(--gray-900);
  margin-bottom:var(--space-1);
  padding:      0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: 700;
  color:       var(--primary);
}

/* WC single product */
.woocommerce div.product div.images { margin-bottom: var(--space-8); }
.woocommerce div.product div.images img { border-radius: var(--radius); }
.woocommerce div.product .product_title {
  font-family:    var(--font-sans);
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight:    700;
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-4);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family:   var(--font-sans);
  font-size:     var(--text-3xl);
  font-weight:   700;
  color:         var(--primary);
  margin-bottom: var(--space-5);
}

/* Cart / Checkout table */
.woocommerce table.shop_table {
  border:        1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow:      hidden;
}
.woocommerce table.shop_table th {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gray-500);
  background-color: var(--gray-50);
  padding:        var(--space-4);
  border-bottom:  1px solid var(--gray-200);
}
.woocommerce table.shop_table td { padding: var(--space-4); border-bottom: 1px solid var(--gray-100); font-family: var(--font-sans); font-size: var(--text-sm); }

/* WC order review */
#order_review_heading {
  font-family: var(--font-sans);
  font-size:   var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-5);
}


/* ============================================================
   31. Responsive Overrides
   ============================================================ */

/* ── Tablet: 1024px ──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --container-pad: var(--space-5); }

  .footer-main__inner { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .footer-col--brand  { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

  .book-single__hero { grid-template-columns: 220px 1fr; gap: var(--space-8); }

  .featured-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  .archive-layout--sidebar,
  .single-layout--sidebar { grid-template-columns: 1fr; }
  .sidebar { border-top: 1px solid var(--gray-200); padding-top: var(--space-8); }
}

/* ── Small tablet: 768px ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-pad: var(--space-4);
    --header-height: 64px;
  }

  /* Header: hamburger left, logo center, cart right */
  .hamburger { display: flex; }
  .primary-nav { display: none; }
  .header-utils__btn--account { display: none; }
  .header-utils__btn--search  { display: none; }

  .site-header__inner { justify-content: space-between; }
  .site-logo {
    position:  absolute;
    left:      50%;
    transform: translateX(-50%);
  }

  /* Hero */
  .hero { min-height: min(70vh, 520px); }
  .hero__inner { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .hero__sub { font-size: var(--text-base); }
  .hero__ctas { flex-direction: column; align-items: flex-start; }
  .hero__ctas .btn { width: 100%; max-width: 280px; }

  /* Grids */
  .book-grid         { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-4); }
  .featured-grid     { grid-template-columns: 1fr; }
  .author-grid       { grid-template-columns: repeat(2, 1fr); }
  .blog-grid         { grid-template-columns: 1fr; }
  .post-grid         { grid-template-columns: 1fr; }

  /* Promo banners */
  .promo-banner__inner { flex-direction: column; text-align: center; }
  .promo-full { min-height: 360px; }

  /* Single book */
  .book-single__hero {
    grid-template-columns: 1fr;
  }
  .book-single__cover-wrap {
    max-width: 220px;
    margin-inline: auto;
    position: static;
  }

  /* Author */
  .author-single__header {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .author-single__photo-wrap { margin-inline: auto; }
  .author-single__social { justify-content: center; }

  /* Footer */
  .footer-newsletter__inner { flex-direction: column; }
  .newsletter-form { max-width: 100%; }
  .footer-main__inner { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; flex-direction: column; }

  /* Pagination */
  .post-navigation .nav-links { flex-direction: column; }

  /* 404 */
  .error404__links { flex-direction: column; align-items: center; }

  /* Section spacing */
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .page-content { padding-top: var(--space-8); }
}

/* ── Mobile: 480px ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --container-pad: var(--space-4); }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .book-grid    { grid-template-columns: repeat(2, 1fr); }
  .author-grid  { grid-template-columns: 1fr; }

  .footer-main__inner { grid-template-columns: 1fr; gap: var(--space-8); }

  .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .promo-full { min-height: 300px; }

  .back-to-top { bottom: var(--space-4); right: var(--space-4); }

  .single-post__title { font-size: var(--text-2xl); }

  .book-single__actions { flex-direction: column; }
  .book-single__actions .btn { width:100%; }

  .newsletter-form__group { flex-direction: column; }
  .newsletter-form__btn   { width: 100%; }

  .search-overlay__input { font-size: var(--text-xl); }
}

/* ── Print ─────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .back-to-top,
  .related-books, .author-books, .hero__ctas { display: none !important; }
  body { color: #000; background: #fff; }
  a    { color: #000; text-decoration: underline; }
  .prose, .single-post__content { max-width: 100%; }
}