/* ============================================================
   BookCover — CoverCraft Design Layer
   Ported from the CoverCraft concept (CardBuilder/index1.html):
   Playfair Display + Inter, cream page, ink-navy primary,
   accent highlight, gold badges, pill buttons, hover-lift
   cards with slide-up overlays, dark navy footer.

   Loaded after main.css / custom.css / color.php so it wins
   the cascade. The accent color is injected by the layout as
   --brand from the admin color picker (falls back below).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --brand: #e94560;                                              /* accent */
  --brand-dark: color-mix(in srgb, var(--brand) 82%, #1a1a2e);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, #ffffff);
  --brand-ring: color-mix(in srgb, var(--brand) 30%, transparent);

  --primary: #1a1a2e;
  --gold: #d4af37;
  --cream: #f5f5f0;
  --cream-2: #efeee6;                                             /* deeper cream for alternating bands */
  --gold-soft: color-mix(in srgb, var(--gold) 14%, #ffffff);
  --ink: #16213e;
  --ink-muted: #666;
  --card: #ffffff;
  --line: rgba(0, 0, 0, 0.07);

  --dark-page: #10101f;
  --dark-card: #1a1a2e;
  --dark-line: rgba(255, 255, 255, 0.09);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --pill: 50px;

  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   1. Typography
   ------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1 { font-weight: 900; }

h5, h6,
strong, b {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  h1 { font-size: 56px; line-height: 1.1; }
  h2 { font-size: 42px; }
  h3 { font-size: 32px; line-height: 1.25; }
  h4 { font-size: 26px; line-height: 1.3; }
  h5 { font-size: 20px; line-height: 1.35; }
  h6 { font-size: 17px; line-height: 1.4; }
}

.light-version { color: var(--ink-muted) !important; }
.light-version p { color: var(--ink-muted); }
.light-version h1, .light-version h2,
.light-version h3, .light-version h4 { color: var(--primary); }

p a, p a:hover { color: var(--brand); }
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover { color: var(--brand); }

*::selection {
  background-color: var(--brand);
  color: #fff;
}

/* ------------------------------------------------------------
   2. Surfaces & palette
   ------------------------------------------------------------ */
.light-version,
.light-version .bg--body { background: var(--cream) !important; }
.light-version .bg--section { background: var(--card) !important; }

/* Keep the page behind #version in step with the active mode */
body:has(.light-version) { background: var(--cream); }

/* Auth / account card */
.account__wrapper {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.light-version .account__wrapper { border-color: var(--line); }

.dark-version:not(.light-version) .account__wrapper {
  border-color: var(--dark-line);
  background: var(--dark-card);
}

/* Thin custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c9c9c2;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #b0b0a8; }

/* ------------------------------------------------------------
   3. Buttons — CoverCraft pills
   ------------------------------------------------------------ */
.cmn--btn,
[class*="btn--"] {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cmn--btn {
  border: 2px solid var(--primary);
  border-radius: var(--pill);
  padding: 11px 26px;
  background: var(--primary);
  color: #fff;
  box-shadow: none;
  transition: var(--transition);
}

.cmn--btn:hover,
.light-version .cmn--btn:hover {
  background: transparent;
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cmn--btn:active { transform: translateY(0); box-shadow: none; }

/* On dark surfaces the primary pill disappears — switch to accent */
.dark-version:not(.light-version) .cmn--btn,
.front-footer .cmn--btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.dark-version:not(.light-version) .cmn--btn:hover,
.front-footer .cmn--btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.cmn--btn:focus-visible,
.btn--base:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--brand-ring);
  outline-offset: 2px;
}

.btn--base { border-radius: var(--pill); }
.btn { border-radius: var(--pill); }

.badge { border-radius: 20px; padding: 5px 12px; font-weight: 700; letter-spacing: 0.02em; }

/* "View All" in section headers → accent text link (index1 .view-all) */
.section__header .cmn--btn {
  background: transparent;
  border: none;
  color: var(--brand);
  box-shadow: none;
  padding: 6px 4px;
  font-size: 15px;
}

.section__header .cmn--btn i {
  transition: var(--transition);
  margin-left: 4px;
}

.section__header .cmn--btn:hover {
  background: transparent;
  color: var(--brand-dark);
  transform: none;
  box-shadow: none;
}

.section__header .cmn--btn:hover i { margin-left: 12px; }

/* ------------------------------------------------------------
   4. Header & navigation — white glass bar, underline links
   ------------------------------------------------------------ */
header.front-header {
  position: sticky;
  top: 0;
  border-bottom: none;
}

.light-version header {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.dark-version:not(.light-version) header {
  background: rgba(26, 26, 46, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--dark-line);
}

.header-top { padding: 8px 0; }
.light-version .header-top {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-top-wrapper li a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.light-version .header-top-wrapper li a { color: var(--ink); }
.light-version .header-top-wrapper li a:hover { color: var(--brand); }

.header-top-wrapper li a.header-btn,
.light-version .header-top-wrapper li a.header-btn {
  background: var(--primary);
  border: 2px solid var(--primary);
  color: #fff;
  border-radius: var(--pill);
  padding: 6px 20px;
  font-weight: 600;
  margin-left: 6px;
  transition: var(--transition);
}

.header-top-wrapper li a.header-btn:hover {
  background: transparent;
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dark-version:not(.light-version) .header-top-wrapper li a.header-btn:hover {
  color: #fff;
  border-color: #fff;
}

/* Search field: soft pill */
.search-form .form-control {
  border-radius: var(--pill) !important;
  padding-left: 20px;
  border: 1.5px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.light-version .search-form .form-control {
  background: #efefe9;
  color: var(--ink) !important;
}

.light-version .search-form .form-control::placeholder { color: #9b9b93 !important; }

.search-form .form-control:focus {
  border-color: var(--primary) !important;
  background: #fff;
}

.search-form .cmn--btn {
  border-radius: var(--pill) !important;
  padding: 11px 22px;
}

.search-form .cmn--btn:hover { transform: none; box-shadow: none; }

/* Category menu: growing accent underline (index1 .nav-links) */
.menu li a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  position: relative;
  transition: var(--transition);
}

.menu > li > a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: var(--transition);
}

.menu > li:hover > a::after { width: 100%; }

.light-version .menu > li > a { color: var(--ink); }
.menu li a:hover { color: var(--brand); }

.menu li .submenu,
.mega__menu {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.light-version .menu li .submenu,
.light-version .mega__menu {
  border-color: var(--line);
}

.menu li .submenu li a:hover,
.mega__menu-item ul li a:hover { color: var(--brand); }

.light-version .search-bar,
.light-version .header-bar span { transition: var(--transition); }

/* Mobile slide-down menu */
@media (max-width: 991px) {
  .light-version .menu {
    background: #fff;
    box-shadow: var(--shadow-lg);
  }
}

/* ------------------------------------------------------------
   5. Section headers — Playfair titles, no bar
   ------------------------------------------------------------ */
.section__header { margin-bottom: 24px; align-items: center; }

.section__header .section__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff !important;
  padding-bottom: 0;
}

.section__header .section__title::after { display: none; }

.light-version .section__header .section__title,
.light-version .section__title.text--base { color: var(--primary) !important; }

/* Accent word inside a title (e.g. Newsletter *Subscription*) keeps the
   CoverCraft logo treatment */
.section__title .text--base { color: var(--brand) !important; }

/* ------------------------------------------------------------
   6. Product cards — hover lift + slide-up overlay
   ------------------------------------------------------------ */
/* All product grids now use the .cc-cover-card marketplace card
   (styles in section 11); the wrapper only carries the entrance
   animation and bootstrap column sizing. */
.product-card-wrap { transition: var(--transition); }

/* Entrance animation (index1 fadeInUp stagger) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-card-wrap,
.genre-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.product-card-wrap:nth-child(1), .genre-card:nth-child(1) { animation-delay: 0.05s; }
.product-card-wrap:nth-child(2) { animation-delay: 0.1s; }
.product-card-wrap:nth-child(3) { animation-delay: 0.15s; }
.product-card-wrap:nth-child(4) { animation-delay: 0.2s; }
.product-card-wrap:nth-child(5) { animation-delay: 0.25s; }
.product-card-wrap:nth-child(6) { animation-delay: 0.3s; }
.product-card-wrap:nth-child(7) { animation-delay: 0.35s; }
.product-card-wrap:nth-child(n+8) { animation-delay: 0.4s; }

/* Genre cards */
.genre-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.light-version .genre-card { border-color: var(--line); }

.genre-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.genre-card img { height: 150px; transition: var(--transition); }
.genre-card:hover img { transform: scale(1.05); }

.genre-card .genre-card-content h6 { font-family: var(--font-display); font-weight: 700; }
.light-version .genre-card .genre-card-content h6 { color: #fff; }

/* ------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------ */
.form--control {
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.light-version .form--control {
  background: #fff !important;
  border: 1.5px solid #e0e0e0;
}

.form--control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-ring) !important;
}

.light-version .form--control::placeholder { color: #9b9b93 !important; }

.form--label {
  font-size: 14px;
  font-weight: 600;
}

.light-version .form--label { color: var(--ink); }

.form--check .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.nice-select,
.select2-container--default .select2-selection--single {
  border-radius: var(--radius-sm) !important;
}

/* Tabs as CoverCraft filter pills */
.nav--tabs { gap: 8px; }

.nav--tabs .nav-item .nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--pill) !important;
  padding: 9px 22px;
  border: 1px solid #e0e0e0;
  transition: var(--transition);
}

.light-version .nav--tabs .nav-item .nav-link {
  background: #fff !important;
  color: var(--ink);
  border-color: #e0e0e0;
}

.nav--tabs .nav-item .nav-link:hover,
.nav--tabs .nav-item .nav-link.active,
.light-version .nav--tabs .nav-item .nav-link:hover,
.light-version .nav--tabs .nav-item .nav-link.active {
  background: var(--primary) !important;
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 26, 46, 0.2);
}

/* ------------------------------------------------------------
   8. Cards, tables, dashboard
   ------------------------------------------------------------ */
.custom--card {
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.light-version .custom--card { border-color: var(--line); }

.custom--card .card-header { border-bottom: 1px solid var(--line); }

.cmn--table { border-radius: var(--radius); overflow: hidden; }

.cmn--table thead tr th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.light-version .cmn--table tbody tr { transition: background 0.15s ease; }

@media (min-width: 768px) {
  .light-version .cmn--table tbody tr:hover { background: #faf9f5; }
}

.dashboard-menu {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.light-version .dashboard-menu { border: 1px solid var(--line) !important; }

.dashboard-menu ul li a {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: var(--transition);
}

.light-version .dashboard-menu ul li a:hover {
  background: var(--cream);
  color: var(--primary);
}

.dashboard-menu ul li a.active,
.light-version .dashboard-menu ul li a.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 600;
}

.dashboard-item {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.light-version .dashboard-item { border: 1px solid var(--line) !important; }

.dashboard-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.dashboard-item .dashboard-icon { border-radius: var(--radius); }

/* Accordion */
.custom--accordion .accordion-item { border-radius: var(--radius); }

/* Modals */
.cmn--modal .modal-content { border-radius: var(--radius); border: none; box-shadow: var(--shadow-lg); }

/* Pagination */
.pagination { gap: 6px; }

.pagination .page-item a,
.pagination .page-item span {
  border-radius: var(--pill) !important;
  border: 1px solid #e0e0e0;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
  transition: var(--transition);
}

.pagination .page-item.active a,
.pagination .page-item.active span,
.pagination .page-item:hover a,
.pagination .page-item:hover span {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 26, 46, 0.2);
}

/* ------------------------------------------------------------
   9. Footer — dark navy block (index1 footer + featured glow)
   ------------------------------------------------------------ */
.front-footer { background: var(--primary); }

/* Beat the route-conditional bg--section / bg--body utilities */
.light-version .front-footer .newsletter-section,
.light-version .front-footer .footter-top,
.light-version .front-footer .footer-bottom {
  background: transparent !important;
}

.dark-version:not(.light-version) .front-footer .newsletter-section,
.dark-version:not(.light-version) .front-footer .footter-top,
.dark-version:not(.light-version) .front-footer .footer-bottom {
  background: transparent !important;
}

.front-footer .newsletter-section {
  border: none;
  position: relative;
  overflow: hidden;
}

/* Blurred accent orb from the index1 featured section */
.front-footer .newsletter-section::before {
  content: "";
  position: absolute;
  top: -180%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: var(--brand-ring);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.front-footer .newsletter-section .container { position: relative; z-index: 1; }

.front-footer .section__title,
.light-version .front-footer .section__title { color: #fff !important; }

.front-footer .newsletter-section p,
.light-version .front-footer .newsletter-section p { color: rgba(255, 255, 255, 0.85); }

.newsletter-wrapper .footer-logo { border-right-color: var(--brand); }

.front-footer .search-form .form-control,
.light-version .front-footer .search-form .form-control {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  border-radius: var(--pill) !important;
}

.front-footer .search-form .form-control::placeholder,
.light-version .front-footer .search-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.front-footer .search-form .form-control:focus { border-color: var(--brand) !important; }

.footter-top { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.front-footer .footer__widget .widget--title,
.light-version .front-footer .footer__widget .widget--title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
}

.front-footer .footer__widget p.addr,
.light-version .front-footer .footer__widget p.addr { color: rgba(255, 255, 255, 0.8); }

.footer__widget .footer__links li a,
.light-version .front-footer .footer__widget .footer__links li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: var(--transition);
}

.footer__widget .footer__links li a:hover,
.light-version .front-footer .footer__widget .footer__links li a:hover {
  color: var(--brand);
  padding-left: 4px;
}

.footer__widget .footer__links li a::before { color: var(--brand); }

.footer__widget .social__icons li a i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: var(--transition);
}

.footer__widget .social__icons li a:hover i {
  background: var(--brand);
  transform: translateY(-3px);
}

.front-footer .footer-bottom,
.light-version .front-footer .footer-bottom {
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------
   10. Misc components
   ------------------------------------------------------------ */
.scrollToTop {
  border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.scrollToTop:hover {
  background: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: #fff;
}

.cookies-card {
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

.cookies-card__icon { background-color: var(--brand); }

/* Tag chips / filter widgets from the upgrade layer */
.light-version .tag-chips a {
  border-color: #e0e0e0;
  color: var(--ink);
  background: #fff;
}

.tag-chips a { border-radius: 20px; transition: var(--transition); }

.tag-chips a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.light-version .filter-widget {
  background: var(--card);
  border-color: var(--line);
}

.light-version .pricing-card {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.light-version .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.light-version .pricing-card.recommended {
  border-color: var(--gold);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--gold) 35%, transparent);
}

.light-version .pricing-card .plan-price {
  font-family: var(--font-display);
  color: var(--primary);
}
.light-version .pricing-card .plan-features li { border-bottom-color: var(--line); }
.light-version .pricing-card .plan-features li i { color: var(--brand); }

.light-version .membership-summary .summary-card {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.light-version .membership-summary .summary-card .value { color: var(--primary); }

.light-version .license-certificate {
  background: var(--card);
  border-color: var(--gold);
}

/* Empty state */
.empty-message,
.text-muted { color: var(--ink-muted); }

/* ------------------------------------------------------------
   11. CoverCraft homepage sections (ported from index1.html)
   ------------------------------------------------------------ */

/* Hero */
.cc-hero {
  padding: 72px 5% 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.cc-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--primary);
}

.cc-highlight {
  color: var(--brand);
  position: relative;
  display: inline-block;
}

.cc-highlight::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 12px;
  background: var(--brand-ring);
  z-index: -1;
}

.cc-hero-content p {
  font-size: 19px;
  color: var(--ink-muted);
  margin-bottom: 36px;
  max-width: 500px;
  line-height: 1.8;
}

.cc-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cc-btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 11px 26px;
  border-radius: var(--pill);
  font-weight: 600;
  transition: var(--transition);
}

.cc-btn-secondary:hover {
  background: var(--primary);
  color: #fff;
}

/* Hero visual — stacked books */
.cc-hero-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-book-stack {
  position: relative;
  width: 280px;
  height: 400px;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.cc-book {
  position: absolute;
  display: block;
  width: 220px;
  height: 340px;
  border-radius: 4px 12px 12px 4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.cc-book:nth-child(1) {
  transform: rotate(-5deg) translateZ(20px);
  z-index: 3;
  left: 30px;
  top: 20px;
}

.cc-book:nth-child(2) {
  transform: rotate(3deg) translateZ(10px);
  z-index: 2;
  left: 50px;
  top: 40px;
}

.cc-book:nth-child(3) {
  transform: rotate(-2deg) translateZ(0);
  z-index: 1;
  left: 20px;
  top: 60px;
}

.cc-book:hover {
  transform: rotate(0deg) translateZ(50px) scale(1.05);
  z-index: 10;
}

.cc-book-content {
  padding: 16px;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 55%);
  opacity: 0;
  transition: var(--transition);
}

.cc-book:hover .cc-book-content { opacity: 1; }

.cc-book-genre {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
}

.cc-book-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* Genre filter bar */
.cc-filter-section {
  padding: 24px 5%;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cc-filter-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cc-filter-container::-webkit-scrollbar { display: none; }

.cc-filter-btn {
  padding: 9px 22px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: var(--ink);
  border-radius: var(--pill);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  transition: var(--transition);
  white-space: nowrap;
}

.cc-filter-btn:hover,
.cc-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 26, 46, 0.2);
}

/* Section headers */
.cc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.cc-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  color: var(--primary);
}

.cc-section-subtitle {
  color: var(--ink-muted);
  margin-top: 8px;
}

.cc-view-all {
  color: var(--brand);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.cc-view-all:hover { color: var(--brand-dark); gap: 16px; }

/* Gallery */
.cc-gallery {
  padding: 64px 5%;
  max-width: 1400px;
  margin: 0 auto;
}

.cc-gallery-grid {
  display: grid;
  /* Track the 212px cover width so cards do not leave dead space beside the
     image; min() lets a track shrink below 212px rather than overflow on a
     narrow screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 212px));
  justify-content: center;
  gap: 28px;
}

.cc-cover-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.cc-cover-card:nth-child(1) { animation-delay: 0.1s; }
.cc-cover-card:nth-child(2) { animation-delay: 0.2s; }
.cc-cover-card:nth-child(3) { animation-delay: 0.3s; }
.cc-cover-card:nth-child(4) { animation-delay: 0.4s; }
.cc-cover-card:nth-child(5) { animation-delay: 0.5s; }
.cc-cover-card:nth-child(6) { animation-delay: 0.6s; }
.cc-cover-card:nth-child(7) { animation-delay: 0.7s; }
.cc-cover-card:nth-child(n+8) { animation-delay: 0.8s; }

.cc-cover-card {
  border: 1px solid var(--line);
}

.cc-cover-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cc-card-media {
  display: block;
  position: relative;
  overflow: hidden;
}

.cc-cover-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

.cc-cover-card:hover .cc-cover-image { transform: scale(1.05); }

/* Home "Trending Covers" gallery: fixed-width cover thumbnails.
   Scoped to .cc-gallery-grid so the catalog and product-detail pages, which
   share .cc-cover-image, keep their fluid width. */
.cc-gallery-grid .cc-cover-image {
  width: 212px;
  max-width: 100%;
  aspect-ratio: 0.61 / 1;
  object-fit: cover;
}

/* Home gallery cards are only 212px wide, so the footer stacks instead of
   sitting title-beside-price: the title gets the full width (up to two lines),
   with the byline and price sharing the row beneath it. `display: contents`
   lifts the title and byline out of .cc-card-info into the footer's flex row,
   so the price can sit next to the byline without changing the markup the
   catalog page also renders. */
.cc-gallery-grid .cc-card-footer {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.cc-gallery-grid .cc-card-info { display: contents; }

.cc-gallery-grid .cc-card-title {
  flex: 1 0 100%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve both lines so the price row lines up across a grid row */
  min-height: 2.6em;
  line-height: 1.3;
}

.cc-gallery-grid .cc-card-byline {
  /* Own row: sharing one with the price truncates the designer name and
     category, which matter more here than saving a line. */
  flex: 1 0 100%;
  min-width: 0;
  margin-top: 0;
}

.cc-gallery-grid .cc-card-price { margin-left: auto; }

/* Marketplace card footer (PICTURE.png reference) */
.cc-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px 15px;
  background: #fff;
}

.cc-card-info { min-width: 0; }

.cc-card-title {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition);
}

.cc-card-title:hover { color: var(--brand); }

.cc-card-byline {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 3px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-card-byline span,
.cc-card-byline a { color: var(--brand); font-weight: 500; }

.cc-card-byline a:hover { text-decoration: underline; color: var(--brand-dark); }

.cc-card-price {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}

.cc-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--brand);
  color: #fff;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
}

.cc-cover-card .wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.cc-cover-card .wishlist-btn:hover { transform: scale(1.1); }

.cc-cover-card .wishlist-btn:hover,
.cc-cover-card .wishlist-btn.active {
  background: var(--brand);
  color: #fff;
}

/* Featured band */
.cc-featured {
  background: var(--primary);
  color: #fff;
  padding: 96px 5%;
  margin: 64px 0;
  position: relative;
  overflow: hidden;
}

.cc-featured::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: var(--brand-ring);
  border-radius: 50%;
  filter: blur(80px);
}

.cc-featured-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cc-featured-content h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px);
  color: #fff;
  margin-bottom: 24px;
  line-height: 1.2;
}

.cc-featured-content p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  line-height: 1.8;
}

.cc-featured-stats {
  display: flex;
  gap: 48px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.cc-stat { text-align: center; }

.cc-stat-number {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--brand);
}

.cc-stat-label {
  font-size: 14px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cc-btn-accent,
.cc-featured .cmn--btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.cc-featured .cmn--btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.cc-featured-book {
  position: relative;
  display: flex;
  justify-content: center;
}

.cc-featured-book-img {
  display: block;
  width: 300px;
  height: 450px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  background-size: cover;
  background-position: center;
  border-radius: 4px 16px 16px 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  transform: rotate(3deg);
  transition: var(--transition);
}

.cc-featured-book-img:hover { transform: rotate(0deg) scale(1.02); }

.cc-featured-award {
  position: absolute;
  top: -20px;
  right: -20px;
  background: var(--gold);
  color: var(--primary);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: cc-float 3s ease-in-out infinite;
}

.cc-award-star { font-size: 19px; }

@keyframes cc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Process steps */
.cc-process {
  padding: 64px 5%;
  max-width: 1400px;
  margin: 0 auto;
}

.cc-process-header {
  text-align: center;
  margin-bottom: 16px;
}

.cc-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.cc-process-step {
  text-align: center;
  padding: 32px;
  position: relative;
}

.cc-process-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--brand);
  opacity: 0.5;
}

.cc-step-number {
  width: 60px;
  height: 60px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 24px;
}

.cc-step-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 8px;
}

.cc-step-desc {
  color: var(--ink-muted);
  font-size: 15px;
}

/* Testimonials */
.cc-testimonials {
  background: #fff;
  padding: 96px 5%;
}

.cc-testimonials-container {
  max-width: 1400px;
  margin: 0 auto;
}

.cc-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.cc-testimonial-card {
  padding: 32px;
  border: 1px solid #eee;
  border-radius: var(--radius);
  transition: var(--transition);
}

.cc-testimonial-card:hover {
  border-color: var(--brand);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.cc-stars {
  color: var(--gold);
  margin-bottom: 16px;
  font-size: 19px;
  letter-spacing: 2px;
}

.cc-testimonial-text {
  font-style: italic;
  margin-bottom: 24px;
  line-height: 1.8;
  color: var(--ink);
}

.cc-testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cc-author-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
}

.cc-author-info h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 3px;
}

.cc-author-info span {
  font-size: 13px;
  color: var(--ink-muted);
}

/* Dark-mode adjustments for the homepage sections */
.dark-version:not(.light-version) .cc-hero-content h1,
.dark-version:not(.light-version) .cc-section-title,
.dark-version:not(.light-version) .cc-step-title,
.dark-version:not(.light-version) .cc-author-info h4 { color: #fff; }

.dark-version:not(.light-version) .cc-filter-section,
.dark-version:not(.light-version) .cc-testimonials { background: var(--dark-card); }

.dark-version:not(.light-version) .cc-filter-btn {
  background: transparent;
  color: #fff;
  border-color: var(--dark-line);
}

.dark-version:not(.light-version) .cc-btn-secondary {
  color: #fff;
  border-color: #fff;
}

.dark-version:not(.light-version) .cc-testimonial-card { border-color: var(--dark-line); }
.dark-version:not(.light-version) .cc-cover-card { border-color: var(--dark-line); }
.dark-version:not(.light-version) .cc-card-footer { background: var(--dark-card); }
.dark-version:not(.light-version) .cc-card-title,
.dark-version:not(.light-version) .cc-card-price { color: #fff; }
.dark-version:not(.light-version) .cc-testimonial-text { color: rgba(255, 255, 255, 0.85); }
.dark-version:not(.light-version) .cc-step-number { background: var(--brand); }

/* Responsive */
@media (max-width: 1024px) {
  .cc-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .cc-hero-content p { margin-left: auto; margin-right: auto; }
  .cc-hero-buttons { justify-content: center; }
  .cc-hero-visual { height: 420px; }

  .cc-featured-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cc-featured-stats { justify-content: center; }

  .cc-process-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-process-step:not(:last-child)::after { display: none; }

.cc-featured { margin: 0; }

  .cc-testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cc-hero { padding-top: 40px; }
  /* Columns are fixed at the cover width now, so only the gap needs tightening;
     auto-fill drops to a single centred column when two no longer fit. */
  .cc-gallery-grid { gap: 20px; }
  .cc-process-grid { grid-template-columns: 1fr; }
}

/* Keep motion subtle for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }

  .product-card-wrap,
  .genre-card,
  .cc-cover-card { opacity: 1; }
}

/* ------------------------------------------------------------
   12. Legal / licence pages
   The body copy comes from the admin rich-text editor, so every
   rule here targets plain HTML (h2-h4, p, ul, ol, table) rather
   than classes the editor would strip on the next save.
   ------------------------------------------------------------ */

.cc-legal-hero {
  background: var(--primary);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

.cc-legal-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.18;
  filter: blur(70px);
}

.cc-legal-hero .cc-legal-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
  max-width: 20ch;
}

.cc-legal-hero .cc-legal-hero__sub {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
  font-size: 1.02rem;
}

.cc-legal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 4vw, 48px);
}

/* Body copy ------------------------------------------------- */

.cc-legal {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.85;
  /* A licence is read, not skimmed — hold the measure near 70 characters. */
  max-width: 72ch;
}

.cc-legal > *:first-child { margin-top: 0; }
.cc-legal > *:last-child { margin-bottom: 0; }

.cc-legal-card .cc-legal p { margin: 0 0 1.15em; color: var(--ink); }

.cc-legal h1,
.cc-legal h2,
.cc-legal h3,
.cc-legal h4,
.cc-legal h5,
.cc-legal h6 {
  font-family: var(--font-display);
  color: var(--primary);
  font-weight: 700;
  line-height: 1.25;
  margin: 2.2em 0 0.7em;
}

.cc-legal h1 { font-size: 1.85rem; }
.cc-legal h2 { font-size: 1.55rem; }
.cc-legal h3 { font-size: 1.3rem; }
.cc-legal h4,
.cc-legal h5,
.cc-legal h6 { font-size: 1.12rem; }

/* An accent rule under the top-level headings gives the page rhythm
   without the admin having to add dividers by hand. */
.cc-legal h2::after,
.cc-legal h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--brand);
}

.cc-legal strong,
.cc-legal b { color: var(--primary); font-weight: 600; }

.cc-legal a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-legal ul,
.cc-legal ol { margin: 0 0 1.3em; padding-left: 0; }

.cc-legal ul { list-style: none; }

.cc-legal-card .cc-legal li { color: var(--ink); }

.cc-legal ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.6em;
}

.cc-legal ul li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.cc-legal ol { padding-left: 22px; }
.cc-legal ol li { margin-bottom: 0.6em; padding-left: 6px; }
.cc-legal ol li::marker { color: var(--brand); font-weight: 600; }

.cc-legal li > ul,
.cc-legal li > ol { margin-top: 0.6em; margin-bottom: 0.2em; }

.cc-legal blockquote {
  margin: 0 0 1.3em;
  padding: 16px 22px;
  border-left: 3px solid var(--gold);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}

.cc-legal hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
  opacity: 1;
}

.cc-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: 0.96rem;
}

.cc-legal th,
.cc-legal td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.cc-legal th { background: rgba(26, 26, 46, 0.04); color: var(--primary); font-weight: 600; }

.cc-legal img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Allow / deny panels -------------------------------------- */

.cc-legal .cc-legal-panel {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 20px 24px 8px;
  margin: 0 0 1.4em;
  background: var(--cream);
}

.cc-legal .cc-legal-panel > h3,
.cc-legal .cc-legal-panel > h4 { margin-top: 0; }

.cc-legal .cc-legal-panel > h3::after,
.cc-legal .cc-legal-panel > h4::after { display: none; }

.cc-legal .cc-legal-panel--allow {
  border-left-color: #2e7d32;
  background: rgba(46, 125, 50, 0.06);
}

.cc-legal .cc-legal-panel--allow li::before { background: #2e7d32; }

.cc-legal .cc-legal-panel--deny {
  border-left-color: #c62828;
  background: rgba(198, 40, 40, 0.06);
}

.cc-legal .cc-legal-panel--deny li::before { background: #c62828; }

/* Sidebar ---------------------------------------------------- */

.cc-legal-aside { position: sticky; top: 100px; display: grid; gap: 20px; }

.cc-legal-aside__thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--card);
}

.cc-legal-aside__thumb img { width: 100%; display: block; }

.cc-legal-aside__box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.cc-legal-aside .cc-legal-aside__box h6 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0 0 8px;
}

.cc-legal-aside .cc-legal-aside__box p {
  color: var(--ink-muted);
  font-size: 0.93rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

.cmn--btn--outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.cmn--btn--outline:hover { background: var(--primary); color: #fff; }

/* The About section renders a plain textarea, so line breaks are all
   the structure it has — keep them and hold a readable measure. */
.about__txt p { white-space: pre-line; max-width: 68ch; line-height: 1.8; }

@media (max-width: 991px) {
  .cc-legal-aside { position: static; }
}

.dark-version:not(.light-version) .cc-legal-card,
.dark-version:not(.light-version) .cc-legal-aside__box,
.dark-version:not(.light-version) .cc-legal-aside__thumb {
  background: var(--dark-card);
  border-color: var(--dark-line);
}

.dark-version:not(.light-version) .cc-legal,
.dark-version:not(.light-version) .cc-legal-card .cc-legal p,
.dark-version:not(.light-version) .cc-legal-card .cc-legal li { color: rgba(255, 255, 255, 0.82); }

.dark-version:not(.light-version) .cc-legal h1,
.dark-version:not(.light-version) .cc-legal h2,
.dark-version:not(.light-version) .cc-legal h3,
.dark-version:not(.light-version) .cc-legal h4,
.dark-version:not(.light-version) .cc-legal h5,
.dark-version:not(.light-version) .cc-legal h6,
.dark-version:not(.light-version) .cc-legal strong,
.dark-version:not(.light-version) .cc-legal-aside .cc-legal-aside__box h6 { color: #fff; }

.dark-version:not(.light-version) .cc-legal .cc-legal-panel { background: rgba(255, 255, 255, 0.04); }

.dark-version:not(.light-version) .cc-legal th { background: rgba(255, 255, 255, 0.06); color: #fff; }

.dark-version:not(.light-version) .cmn--btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* ------------------------------------------------------------
   13. Homepage colour & cosmetic pass
   Rose is the action colour, gold marks value. Everything here
   overrides section 11 rather than replacing it, so this block
   reads as "what the pass changed".
   ------------------------------------------------------------ */

/* 13.1 Header — main.css paints .menu pale blue (#f0f5fc) in light mode.
   That band belongs to the MOBILE slide-down panel, so the override has to
   stay inside the desktop query or the mobile menu loses its background. */
@media (min-width: 992px) {
  .light-version .menu,
  .menu {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

/* 13.1b Logo sizing — the header markup is .logo-mode, which nothing styled,
   so the wordmark used to render at its natural pixel size. The new mark is
   drawn at 4x for retina, so it has to be sized down here. */
.logo-mode img {
  width: auto;
  height: 42px;
  max-width: 200px;
  object-fit: contain;
}

.footer-logo-mark img,
.front-footer .logo-mode img { height: 38px; max-width: 190px; width: auto; object-fit: contain; }

@media (max-width: 991px) {
  .logo-mode img { height: 34px; max-width: 160px; }
}

/* 13.2 Hero — warm wash behind the cream */
.cc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Full-bleed surface, content still aligned to the 1400px grid, so the
     wash runs edge to edge instead of ending in a visible seam. */
  max-width: none;
  padding-inline: max(5%, calc((100% - 1400px) / 2));
}

.cc-hero::before,
.cc-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}

.cc-hero::before {
  width: 520px;
  height: 520px;
  top: -180px;
  right: -120px;
  background: var(--brand);
  opacity: 0.13;
}

.cc-hero::after {
  width: 420px;
  height: 420px;
  bottom: -200px;
  left: -140px;
  background: var(--gold);
  opacity: 0.16;
}

.cc-hero-content h1 { letter-spacing: -0.015em; }

/* The highlight bar sat behind the text on a negative z-index, which the new
   stacking context swallows; keep it visible under the word instead. */
.cc-highlight::after {
  z-index: 0;
  opacity: 0.35;
}

.cc-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 28px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.cc-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cc-hero-trust i {
  color: var(--gold);
  font-size: 16px;
}

/* 13.3 Hero book stack — three covers that actually read as a stack */
.cc-hero-visual { perspective: 1400px; }

.cc-book-stack {
  width: 320px;
  height: 430px;
}

/* Ground shadow, so the stack sits on the page instead of floating. */
.cc-book-stack::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 300px;
  height: 36px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(26, 26, 46, 0.28), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.cc-book {
  width: 230px;
  height: 352px;
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 18px 38px rgba(26, 26, 46, 0.22);
}

/* The spine: a bright edge and a shadow gutter down the binding side. */
.cc-book::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(255, 255, 255, 0.16) 55%, rgba(0, 0, 0, 0.16));
  border-radius: 3px 0 0 3px;
  pointer-events: none;
  z-index: 2;
}

.cc-book:nth-child(3) {
  transform: rotate(-14deg) translate(-46px, 16px);
  z-index: 1;
  left: 30px;
  top: 20px;
  opacity: 0.92;
}

.cc-book:nth-child(2) {
  transform: rotate(-7deg) translate(-22px, 8px);
  z-index: 2;
  left: 30px;
  top: 20px;
  opacity: 0.96;
}

.cc-book:nth-child(1) {
  transform: rotate(2deg) translate(14px, 0);
  z-index: 3;
  left: 30px;
  top: 20px;
}

.cc-book:hover {
  transform: rotate(0deg) translate(14px, -16px) scale(1.04);
  box-shadow: 0 30px 60px rgba(26, 26, 46, 0.32);
  z-index: 4;
}

/* 13.4 Band rhythm — alternate surfaces so the page breathes */
.light-version .cc-filter-section { background: var(--card); }

.cc-gallery-band {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cc-gallery-band .cc-gallery { background: transparent; }

.light-version .cc-process { background: var(--card); }

/* Full-bleed like the hero, or the white band reads as a floating panel
   with cream margins either side. */
.cc-process {
  max-width: none;
  padding-inline: max(5%, calc((100% - 1400px) / 2));
}

/* The dashed connector replaces the per-step arrows; keeping both reads
   as clutter. */
.cc-process-step:not(:last-child)::after { display: none; }

.cc-featured { margin: 0; }

/* 13.5 Section headings — one accent rule everywhere, as on the licence page */
.cc-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: var(--brand);
}

.cc-process-header .cc-section-title::after { margin-left: auto; margin-right: auto; }

/* 13.6 Filter pills */
.cc-filter-btn {
  border-color: var(--line);
  background: var(--cream);
}

.cc-filter-btn:hover,
.cc-filter-btn.active {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* 13.7 Cover cards — even rows, quieter meta, gold prices */
.cc-card-media {
  display: block;
  position: relative;
  /* Covers are 2:3; pinning the box means a stray crop can no longer make one
     row taller than the next. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--cream-2);
}

.cc-cover-image,
.cc-gallery-grid .cc-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-cover-card {
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(26, 26, 46, 0.05);
}

.cc-cover-card:hover {
  box-shadow: 0 18px 38px rgba(26, 26, 46, 0.16);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

.cc-card-byline,
.cc-card-byline span { color: var(--ink-muted); }

.cc-card-byline a {
  color: var(--ink-muted);
  font-weight: 500;
}

.cc-card-byline a:hover { color: var(--brand); }

.cc-card-price {
  color: var(--gold);
  font-weight: 700;
}

.cc-card-badge {
  background: var(--gold);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* 13.8 Featured band — gold stats read as value, rose stays the button */
.cc-stat-number { color: var(--gold); }

.cc-featured::after {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -40%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.1;
  filter: blur(90px);
}

/* 13.9 How It Works — connect the steps */
.cc-process-grid { position: relative; }

@media (min-width: 992px) {
  .cc-process-grid::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 12.5%;
    right: 12.5%;
    border-top: 2px dashed color-mix(in srgb, var(--brand) 38%, transparent);
    z-index: 0;
  }
}

.cc-process-step { position: relative; z-index: 1; }

.cc-step-number {
  box-shadow: 0 0 0 6px var(--gold-soft), 0 10px 24px rgba(26, 26, 46, 0.18);
  transition: var(--transition);
}

.cc-process-step:hover .cc-step-number {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 34%, transparent), 0 14px 28px rgba(26, 26, 46, 0.24);
  transform: translateY(-3px);
}

/* 13.10 FAQ */
.light-version .faq__item,
.light-version .accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.04);
  transition: var(--transition);
}

.light-version .faq__item:hover,
.light-version .accordion-item:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  box-shadow: 0 8px 22px rgba(26, 26, 46, 0.08);
}

/* 13.11 Dark mode equivalents */
.dark-version:not(.light-version) .cc-gallery-band {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--dark-line);
}

.dark-version:not(.light-version) .cc-card-media { background: var(--dark-card); }
.dark-version:not(.light-version) .cc-cover-card { border-color: var(--dark-line); }
.dark-version:not(.light-version) .cc-hero-trust { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 991px) {
  /* The mobile slide-down keeps a background — it just should not be the
     template's leftover blue. */
  .light-version .menu {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
  }

  /* The orbs are sized for a 1400px band; at phone width the same circle
     covers most of the hero and the wash turns into a pink block. */
  .cc-hero::before { width: 300px; height: 300px; top: -120px; right: -90px; opacity: 0.1; }
  .cc-hero::after { width: 260px; height: 260px; bottom: -140px; left: -90px; opacity: 0.12; }

  .cc-book-stack { width: 280px; height: 380px; }
  .cc-book { width: 200px; height: 306px; }
  .cc-hero-trust { font-size: 12.5px; }
}

/* ------------------------------------------------------------
   14. Product details — cover thumbnail
   main.css gives .product__details-thumb img { width: 100% }, so a
   portrait cover (1600 x 2500) fills the whole 8-column width and
   renders ~920 x 1440 — the page opens on nothing but the artwork and
   the title, price and download button sit below the fold. Cap it to a
   size a book cover actually reads at and centre it in the column.
   ------------------------------------------------------------ */
.product__details-thumb {
  display: flex;
  justify-content: center;
  overflow: visible;
  margin-bottom: 40px;
}

.product__details-thumb img {
  width: auto;
  height: auto;
  /* Height-led cap: a portrait cover and a landscape mockup then land at
     the same visual weight instead of one filling the column and the other
     shrinking to a postage stamp. */
  max-height: 560px;
  max-width: min(100%, 620px);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0 18px 44px rgba(26, 26, 46, 0.18);
  box-shadow: 0 18px 44px rgba(26, 26, 46, 0.18);
}

@media (max-width: 575px) {
  .product__details-thumb img {
    max-height: 70vh;
  }
}

.dark-version:not(.light-version) .product__details-thumb img {
  -webkit-box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   15. Ready-to-Publish Ebooks
   Catalog, product page, homepage band, cart and My Books.
   Type colours use compound selectors because section 2's
   `.light-version h1..h4 / p` (0,1,1) beats a lone class.
   ------------------------------------------------------------ */
.cmn--btn.btn--outline {
  background: transparent;
  color: var(--primary);
}

.cmn--btn.btn--outline:hover {
  background: var(--primary);
  color: #fff;
}

.cmn--btn[disabled],
.cmn--btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cc-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}

/* Catalog hero */
.cc-ebook-hero {
  background: var(--cream-2);
  padding: 40px 0 48px;
}

.cc-ebook-hero .cc-ebook-hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
  margin-bottom: 14px;
  max-width: 820px;
}

.cc-ebook-hero .cc-ebook-hero-text {
  color: var(--ink-muted);
  max-width: 680px;
  margin-bottom: 24px;
}

.cc-ebook-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow-sm);
}

.cc-ebook-search i { color: var(--ink-muted); font-size: 18px; }

.cc-ebook-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--primary);
}

.cc-ebook-search .cmn--btn { padding: 8px 20px; }

.cc-ebook-match-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--brand);
  font-weight: 600;
}

.cc-ebook-match-form { max-width: 720px; }

.cc-ebook-match-form textarea {
  border-radius: var(--radius);
  background: #fff;
}

.cc-ebook-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-muted);
}

.cc-ebook-breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.6;
}

.cc-ebook-breadcrumb a { color: var(--ink-muted); }
.cc-ebook-breadcrumb a:hover { color: var(--brand); }

.cc-ebook-genre-links { margin-top: 8px; }

/* Ebook card additions on top of .cc-cover-card */
.cc-card-price .cc-from {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: right;
}

.cc-card-badge.cc-badge-exclusive { background: var(--gold); color: var(--primary); }
.cc-card-badge.cc-badge-sold { background: var(--primary); }

.cc-ebook-match {
  padding: 0 16px 15px;
  background: #fff;
  font-size: 12.5px;
}

.cc-ebook-match p { margin: 4px 0 0; color: var(--ink-muted); }

.cc-ebook-match-score {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

/* Product page */
.cc-ebook-cover {
  position: relative;
  display: flex;
  justify-content: center;
}

.cc-ebook-cover img {
  width: auto;
  max-width: min(100%, 420px);
  max-height: 600px;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(26, 26, 46, 0.18);
}

.cc-ebook-mockup {
  display: block;
  max-width: min(100%, 420px);
  margin: 24px auto 0;
  border-radius: var(--radius);
}

.cc-ebook-page .cc-ebook-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
  margin-bottom: 6px;
}

.cc-ebook-page .cc-ebook-subtitle {
  font-size: 18px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.cc-ebook-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.cc-ebook-facts > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.cc-ebook-facts dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.cc-ebook-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--primary); }

.cc-ebook-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 12px;
}

.cc-ebook-notice i { font-size: 22px; color: var(--ink-muted); }
.cc-ebook-page .cc-ebook-notice p { margin: 0; color: var(--ink); }

.cc-ebook-notice--exclusive { border-left-color: var(--gold); background: var(--gold-soft); }
.cc-ebook-notice--exclusive i { color: var(--gold); }
.cc-ebook-notice--sold { border-left-color: var(--primary); }
.cc-ebook-notice--owned { border-left-color: #28a745; }
.cc-ebook-notice--owned i { color: #28a745; }

.cc-ebook-packages { margin-top: 22px; }

.cc-package {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.cc-package:hover { border-color: var(--brand-ring); }
.cc-package:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.cc-package.is-unavailable { opacity: 0.55; cursor: not-allowed; }
.cc-package input { margin-top: 5px; accent-color: var(--brand); }

.cc-package-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

.cc-package-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--primary);
}

.cc-package-price { font-weight: 700; white-space: nowrap; }
.cc-package-price del { font-weight: 400; color: var(--ink-muted); margin-right: 4px; }
.cc-package-desc { font-size: 13.5px; color: var(--ink-muted); }
.cc-package-includes { font-size: 12.5px; color: var(--ink); }
.cc-package-license { font-size: 12.5px; color: var(--ink-muted); }

.cc-ebook-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.cc-ebook-page .cc-ebook-section h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--primary);
  margin-bottom: 12px;
}

.cc-ebook-blurb { font-size: 16px; line-height: 1.75; }

.cc-ebook-sample {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  max-height: 460px;
  overflow-y: auto;
  padding-right: 8px;
}

.cc-ebook-checklist { list-style: none; padding: 0; margin: 0 0 12px; }
.cc-ebook-checklist li { display: flex; gap: 8px; padding: 4px 0; }
.cc-ebook-checklist i { color: var(--brand); margin-top: 3px; }

.cc-ebook-license { border-top: 1px solid var(--line); padding: 14px 0; }
.cc-ebook-license:first-of-type { border-top: 0; padding-top: 0; }
.cc-ebook-license summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.cc-ebook-license-text { font-size: 14px; line-height: 1.7; margin-top: 10px; }
.cc-ebook-license-text h5 { font-size: 15px; margin-top: 14px; }

/* Homepage band */
.cc-rtp { padding: 72px 5%; background: var(--cream); }

.cc-rtp-offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.cc-rtp-offer {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--ink-muted);
  font-size: 13.5px;
  transition: var(--transition);
}

.cc-rtp-offer:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); color: var(--ink-muted); }
.cc-rtp-offer i { font-size: 30px; color: var(--brand); }
.cc-rtp-offer strong { display: block; font-size: 16px; color: var(--primary); }
.cc-rtp-offer em {
  font-style: normal;
  font-size: 10px;
  background: var(--brand);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
.cc-rtp-offer.is-new { border-color: var(--brand-ring); }

.cc-rtp-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}

.cc-rtp-points { list-style: none; padding: 0; margin: 20px 0 28px; }
.cc-rtp-points li { display: flex; gap: 10px; padding: 5px 0; color: var(--ink); }
.cc-rtp-points i { color: var(--brand); margin-top: 4px; }

.cc-rtp-books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Header menu item */
.cc-nav-ebooks > a { color: var(--brand) !important; }

/* Account: AI Match toggle, cart, My Books */
.cc-match-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 4px;
}

.cc-match-toggle > * {
  padding: 7px 16px;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-muted);
}

.cc-match-toggle .active { background: var(--primary); color: #fff; }
.cc-match-toggle a:hover { color: var(--brand); }

.cc-pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}

.cc-pay-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.cc-pay-option input { accent-color: var(--brand); }
.cc-pay-option img { height: 26px; width: auto; max-width: 70px; object-fit: contain; }

.cc-book-row { padding: 16px; }
.cc-book-row-cover { width: 72px; height: 108px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

.cc-book-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.cc-book-row-meta span { color: var(--ink-muted); margin-right: 4px; }

/* Dark mode */
.dark-version:not(.light-version) .cc-ebook-hero,
.dark-version:not(.light-version) .cc-rtp { background: var(--dark-page); }

.dark-version:not(.light-version) .cc-ebook-search,
.dark-version:not(.light-version) .cc-ebook-facts > div,
.dark-version:not(.light-version) .cc-ebook-notice,
.dark-version:not(.light-version) .cc-package,
.dark-version:not(.light-version) .cc-ebook-section,
.dark-version:not(.light-version) .cc-rtp-offer,
.dark-version:not(.light-version) .cc-match-toggle,
.dark-version:not(.light-version) .cc-ebook-match {
  background: var(--dark-card);
  border-color: var(--dark-line);
}

.dark-version:not(.light-version) .cc-ebook-hero .cc-ebook-hero-title,
.dark-version:not(.light-version) .cc-ebook-page .cc-ebook-title,
.dark-version:not(.light-version) .cc-ebook-page .cc-ebook-section h2,
.dark-version:not(.light-version) .cc-ebook-facts dd,
.dark-version:not(.light-version) .cc-package-head,
.dark-version:not(.light-version) .cc-rtp-offer strong,
.dark-version:not(.light-version) .cc-ebook-search input { color: #fff; }

.dark-version:not(.light-version) .cc-ebook-page .cc-ebook-notice p,
.dark-version:not(.light-version) .cc-ebook-sample,
.dark-version:not(.light-version) .cc-package-includes,
.dark-version:not(.light-version) .cc-rtp-points li { color: rgba(255, 255, 255, 0.82); }

/* Responsive */
@media (max-width: 991px) {
  .cc-rtp-body { grid-template-columns: 1fr; gap: 32px; }
  .cc-rtp-books { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 767px) {
  .cc-rtp { padding: 56px 16px; }
  .cc-rtp-offers { grid-template-columns: 1fr; margin-bottom: 36px; }
  .cc-ebook-section { padding: 18px 16px; }
  .cc-ebook-cover img { max-height: 70vh; }
  .cc-ebook-search { padding-left: 14px; }
  .cc-ebook-search .cmn--btn { padding: 8px 14px; }
}