/* ============================================
   ALBASAER — FRONTEND MASTER CSS (English / LTR)
   Figma: vmTA4IVgGrXqZYp0eeWe2h  node 331-761
   ============================================ */

/* ── CSS Variables ── */
:root {
  --clr-brand:        #8a1538;
  --clr-dark:         #101828;
  --clr-footer-bg:    #101828;
  --clr-footer-card:  #1e2939;
  --clr-text:         #101828;
  --clr-muted:        #4a5565;
  --clr-light-muted:  #99a1af;
  --clr-footer-sub:   #6a7282;
  --clr-border:       #e5e7eb;
  --clr-white:        #ffffff;
  --clr-badge:        #fb2c36;
  --font-body:        'Work Sans', system-ui, -apple-system, sans-serif;
  --font-heading:     'Work Sans', system-ui, sans-serif;
  --transition:       0.25s ease;
  --header-height:    163px;
}

/* ── Utility ── */
.text-accent { color: var(--clr-brand); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--clr-text); -webkit-font-smoothing: antialiased; margin: 0; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

/* ============================================
   HEADER  (Figma: node 331:2786)
   bg: white, height ≈ 80px
   Logo 49×56 | gap | Nav 16px Inter | Actions
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: transparent;
  border-bottom: 1px solid transparent;
  height: var(--header-height);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header--scrolled,
.site-header--solid {
  background: rgba(249, 250, 251, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--clr-border);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* Push content below the fixed header on solid-header pages */
main.solid-header {
  padding-top: var(--header-height);
}

/* Push content below header without forcing the header to be solid */
main.header-offset {
  padding-top: var(--header-height);
}

.site-header__container {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0; /* spacing handled by flex children */
  max-width: 1387px;
  margin: 0 auto;
  padding: 0 64px;
}

/* Logo */
.site-header__logo { flex-shrink: 0; margin-top: 18px; margin-bottom: 18px; }
.site-header__logo-img {
  width: 110px;
  height: 127px;
  display: block;
}

/* Nav — centered between logo and actions */
.site-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 32px;   /* Figma: gap-[32px] */
}

.site-header__nav-link {
  font-size: 16px;
  font-weight: 400;
  color: var(--clr-muted);
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.5;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}

.site-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.site-header__nav-link:hover {
  color: var(--clr-brand);
}

.site-header__nav-link:hover::after {
  transform: scaleX(1);
}

.site-header__nav-link.active {
  font-weight: 700;
  color: var(--clr-brand);
}

.site-header__nav-link.active::after {
  transform: scaleX(1);
}

/* Actions */
.site-header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;   /* Figma: gap-[24px] */
}

/* Icon group */
.site-header__icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--clr-muted);
  padding: 0;
  transition: color var(--transition);
}

.site-header__icon-btn:hover { color: var(--clr-brand); }

/* Cart button is slightly larger (36×36 in Figma, icon inside) */
.site-header__icon-btn--cart {
  width: 36px;
  height: 36px;
}

/* Red notification badge on cart */
.site-header__cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-badge);  /* Figma: bg-[#fb2c36] */
  pointer-events: none;
}

/* Vertical separator */
.site-header__sep {
  width: 1px;
  height: 24px;
  background: var(--clr-border);  /* Figma: bg-[#e5e7eb] */
  flex-shrink: 0;
}

/* Login button — Figma: bg-[#101828] rounded-full h-[36px] w-[85.75px] */
.site-header__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  background: var(--clr-dark);  /* Figma: #101828 */
  color: var(--clr-white);
  font-size: 14px;
  font-weight: 700;              /* Figma: font-bold */
  letter-spacing: -0.011em;     /* Figma: tracking-[-0.1504px] */
  border-radius: 9999px;         /* Figma: rounded-[16777200px] */
  white-space: nowrap;
  transition: opacity var(--transition);
}
.site-header__login-btn:hover { opacity: 0.85; }

/* ── User pill (logged-in state) ── */
.site-header__user {
  position: relative;
}

.site-header__user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f3f4f6;
  border: none;
  border-radius: 9999px;
  height: 40px;
  padding: 0 8px 0 14px;
  cursor: pointer;
  transition: background var(--transition);
}

.site-header__user-pill:hover { background: #e5e7eb; }

.site-header__user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-dark);
  white-space: nowrap;
}

/* Avatar — shared base */
.site-header__user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__user-avatar--img {
  object-fit: cover;
}

.site-header__user-avatar--initials {
  background: var(--clr-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Dropdown */
.site-header__user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.site-header__user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-dark);
  text-decoration: none;
  transition: background var(--transition);
  white-space: nowrap;
}

.site-header__user-dropdown-item:hover { background: #f9fafb; }

.site-header__user-dropdown-item--logout { color: #dc2626; }
.site-header__user-dropdown-item--logout:hover { background: #fef2f2; }

.site-header__user-dropdown-sep {
  height: 1px;
  background: #f3f4f6;
  margin: 4px 6px;
}

/* Mobile user row */
.mobile-nav__user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 4px;
}

.mobile-nav__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.mobile-nav__user-avatar--img { object-fit: cover; }

.mobile-nav__user-avatar--initials {
  background: var(--clr-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.mobile-nav__user-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-dark);
}

.mobile-nav__link--logout { color: #dc2626; }

/* Language toggle — Figma: text-[14px] text-[#4a5565] */
.site-header__lang-btn {
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-muted);
  white-space: nowrap;
  transition: color var(--transition);
}
.site-header__lang-btn:hover { color: var(--clr-brand); }

/* Hamburger (hidden on desktop) */
.site-header__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.site-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--clr-dark);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.site-header__hamburger.active span:nth-child(2) { opacity: 0; }
.site-header__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================
   MOBILE NAV
   ============================================ */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-white);
  z-index: 1999;
  padding: calc(var(--header-height) + 16px) 0 40px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}
.mobile-nav.active { opacity: 1; visibility: visible; transform: translateY(0); }

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

.mobile-nav__sep { height: 1px; background: var(--clr-border); margin: 8px 0; }

.mobile-nav__link {
  display: block;
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--clr-muted);
  transition: color var(--transition), background var(--transition);
}
.mobile-nav__link:hover { color: var(--clr-brand); background: rgba(138, 21, 56, 0.04); }
.mobile-nav__link.active { color: var(--clr-brand); font-weight: 700; }
.mobile-nav__link--lang { color: var(--clr-muted); font-size: 14px; }

/* ============================================
   FOOTER  (Figma: node 331:1314)
   bg: #101828  pt-80px px-64px
   4-column grid, gap-x-48px
   ============================================ */
.site-footer {
  background: var(--clr-footer-bg);  /* Figma: bg-[#101828] */
  color: var(--clr-white);
}

.site-footer__inner {
  max-width: 1387px;
  margin: 0 auto;
  padding: 80px 64px 0;         /* Figma: pt-[80px] px-[64px] */
  display: flex;
  flex-direction: column;
  gap: 64px;                    /* Figma: gap-[64px] */
}

/* 4-column grid — Figma: grid-cols-[repeat(4,minmax(0,1fr))] gap-x-[48px] */
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 48px;             /* Figma: gap-x-[48px] */
  row-gap: 48px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 24px;                    /* Figma: gap-[24px] */
}

/* Logo */
.site-footer__logo-link { display: inline-block; }
.site-footer__logo {
  height: 80px;   /* Figma: h-[92px] scaled ~ */
  width: auto;
  filter: brightness(0) invert(1);  /* white on dark bg */
}

/* Description — Figma: text-[14px] text-[#99a1af] leading-[22.75px] */
.site-footer__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;   /* Figma exact */
  color: var(--clr-light-muted);
  letter-spacing: -0.011em;
  margin: 0;
}

/* Social icons — Figma: gap-[16px], each 40×40, bg-[#1e2939], rounded-full */
.site-footer__social {
  display: flex;
  gap: 16px;
  align-items: center;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--clr-footer-card);  /* Figma: bg-[#1e2939] */
  color: var(--clr-white);
  transition: background var(--transition);
}
.site-footer__social-link:hover { background: var(--clr-brand); }

/* Headings — Figma: font-bold text-[18px] text-white tracking-[-0.4395px] */
.site-footer__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-white);
  letter-spacing: -0.027em;
  line-height: 28px;
  margin: 0;
}

/* Quick link list — Figma: gap-[16px] */
.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__link {
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-light-muted);  /* Figma: #99a1af */
  letter-spacing: -0.011em;
  transition: color var(--transition);
}
.site-footer__link:hover { color: var(--clr-white); }

/* Contact list — icon + text rows */
.site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;                       /* Figma: left-[32px] offset = icon 20px + gap 12px */
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-light-muted);
  line-height: 20px;
}

.site-footer__contact-icon {
  flex-shrink: 0;
  color: var(--clr-light-muted);
}

.site-footer__contact-list a {
  color: var(--clr-light-muted);
  transition: color var(--transition);
}
.site-footer__contact-list a:hover { color: var(--clr-white); }

/* Newsletter description */
.site-footer__newsletter-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-light-muted);
  line-height: 20px;
  letter-spacing: -0.011em;
  margin: 0;
}

/* Newsletter form — Figma: bg-[rgba(255,255,255,0.1)] border border-[rgba(255,255,255,0.1)]
   rounded-[10px] h-[46px] px-[5px] py-[1px] */
.site-footer__newsletter-form {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  gap: 0;
}

.site-footer__newsletter-input {
  flex: 1;
  min-width: 0;        /* allow input to shrink below intrinsic size in flex */
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--clr-white);
  padding: 8px 16px;
  font-family: var(--font-body);
  letter-spacing: -0.011em;
}
.site-footer__newsletter-input::placeholder {
  color: var(--clr-footer-sub);   /* Figma: #6a7282 */
}

/* Send button — Figma: bg-[#8a1538] rounded-[8px] size-[32px] */
.site-footer__newsletter-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--clr-brand);
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  cursor: pointer;
  transition: opacity var(--transition);
}
.site-footer__newsletter-btn:hover { opacity: 0.85; }

/* Bottom bar — Figma: border-t border-[rgba(255,255,255,0.1)] flex justify-between h-[53px] */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0 24px;
}

/* Copyright — Figma: text-[14px] text-[#6a7282] */
.site-footer__copyright {
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-footer-sub);
  letter-spacing: -0.011em;
  margin: 0;
}

/* Nascode — "Created by:" in #999 12px + styled logo */
.site-footer__nascode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.site-footer__nascode-link { display: flex; align-items: center; }

.site-footer__nascode-img {
  height: 18px;
  width: auto;
  transition: opacity var(--transition);
}
.site-footer__nascode-link:hover .site-footer__nascode-img {
  opacity: 0.8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .site-footer__inner { padding-left: 40px; padding-right: 40px; }
  .site-header__nav-list { gap: 24px; }
}

@media (max-width: 768px) {
  :root { --header-height: 106px; }

  .site-header__container { padding: 0 20px; }
  .site-header__nav { display: none; }
  .site-header__icons { display: none; }
  .site-header__sep { display: none; }
  .site-header__lang-btn { display: none; }
  .site-header__hamburger { display: flex; }

  /* Push login + burger to the right since nav is hidden */
  .site-header__actions { margin-left: auto; }

  /* Logo: 71×82px with proportional margins */
  .site-header__logo { margin-top: 12px; margin-bottom: 12px; }
  .site-header__logo-img { width: 71px; height: 82px; }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;   /* tighter gap for 2-col layout */
  }
  .site-footer__inner { padding: 48px 24px 0; gap: 40px; }
  .site-footer__social { flex-wrap: wrap; }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 32px;
  }
}

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__newsletter-input { padding: 8px 10px; }
}

/* ============================================
   SHARED SECTION STYLES
   ============================================ */
.section-inner {
  max-width: 1387px;
  margin: 0 auto;
  padding-left: 64px;
  padding-right: 64px;
}

.section { padding: 96px 0; }
.section--alt { background: #faf9f6; }

.section--authors {
  background: #fff;
}

.section--free-books {
  position: relative;
  overflow: hidden;
}
  .section--free-books::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -160px;
    width: 400px;
    height: 400px;
    background: rgba(138, 21, 56, 0.08);
    border-radius: 50%;
    pointer-events: none;
  }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 24px;
}
.section-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 56px;
}
.section-header__left {}
.section-header__left--bordered {
  border-left: 4px solid #8a1538;
  padding-left: 16px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: #101828;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
  line-height: 1.25;
}
.section-title__accent { color: #8a1538; }

.section-sub {
  font-size: 18px;
  color: #4a5565;
  margin: 0;
  line-height: 1.55;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #8a1538;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 4px;
  transition: gap 0.2s ease;
}
.section-link:hover { gap: 10px; color: #8a1538; }

@media (max-width: 1024px) {
  .section-inner { padding-left: 40px; padding-right: 40px; }
  .section { padding: 72px 0; }
}
@media (max-width: 768px) {
  .section-inner { padding-left: 16px; padding-right: 16px; }
  .section { padding: 56px 0; }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 28px;
  }
  .section-header--center { align-items: center; }
  .section-title { font-size: 24px; margin-bottom: 8px; }
  .section-sub { font-size: 15px; }
}
@media (max-width: 360px) {
  .section-title { font-size: 22px; }
  .section { padding: 40px 0; }
}

/* ============================================
   BOOK CARD  (shared partial — _BookCard.cshtml)
   ============================================ */
.books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.book-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid #f3f4f6;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.book-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.book-card__img-wrap {
  position: relative;
  height: 200px;
  flex-shrink: 0;
}
.book-card__img { width: 100%; height: 100%; object-fit: cover; }
.book-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #718096 100%);
}
.book-card__img-placeholder--dark {
  background: linear-gradient(135deg, #1a2332 0%, #2d4a6b 50%, #1e3a5f 100%);
}

.book-card__badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #4a5565;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.book-card__body {
  padding: 20px 20px 0;
  flex: 1;
}
.book-card__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.book-card__rating { font-size: 12px; color: #6a7282; margin-left: 4px; }

.book-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  line-height: 1.4;
}
.book-card__author {
  font-size: 14px;
  color: #4a5565;
  margin: 0;
}

.book-card__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin-top: 16px;
}
.book-card__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #F9FAFB;
}
.book-card__price {
  font-size: 16px;
  font-weight: 700;
  color: #8a1538;
  letter-spacing: -0.2px;
}
.book-card__price--paid { color: #8a1538; }

.book-card__wishlist {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.2s ease;
  padding: 0;
}
.book-card__wishlist:hover { color: #8a1538; }
.book-card__wishlist--active { color: #8a1538; }
.book-card__wishlist--active .book-card__heart { fill: #8a1538; stroke: #8a1538; }

@keyframes heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.book-card__heart--pop { animation: heart-pop 0.35s ease; }

@media (max-width: 1024px) {
  .books-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .books-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 560px) {
  .books-grid { grid-template-columns: 1fr; gap: 12px; }
  .book-card__title { font-size: 16px; }
  .book-card__author { font-size: 13px; }
}

@media (max-width: 360px) {
  .book-card__title { font-size: 14px; }
}

/* ============================================
   UTILITY
   ============================================ */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-scroll.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   CART  (Figma: 140:30166 full | 140:29946 empty)
   ============================================ */

/* Badge: hidden by default, shown via JS */
.site-header__cart-badge          { display: none; }
.site-header__cart-badge--visible { display: block; }

/* Page shell */
.cart-page { background: #f9fafb; min-height: calc(100vh - var(--header-height)); }

/* Breadcrumb bar */
.cart-breadcrumb { background: #fff; border-bottom: 1px solid var(--clr-border); padding: 12px 0; }
.cart-breadcrumb__inner { display: flex; align-items: center; }
.cart-breadcrumb__list  { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cart-breadcrumb__list li { display: flex; align-items: center; gap: 6px; }
.cart-breadcrumb__link    { font-size: 14px; color: var(--clr-muted); transition: color var(--transition); }
.cart-breadcrumb__link:hover { color: var(--clr-brand); }
.cart-breadcrumb__sep   { color: var(--clr-border); display: flex; align-items: center; }
.cart-breadcrumb__current { font-size: 14px; color: var(--clr-text); font-weight: 500; }

/* Show / hide helpers */
.cart-empty--hidden { display: none !important; }
.cart-full--hidden  { display: none !important; }

/* ─── EMPTY CART  (Figma: 140:29946) ─── */
.cart-empty { padding: 64px 16px 80px; }
.cart-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 96x96 circle — Figma: bg-[#f3f4f6] rounded-full */
.cart-empty__icon-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
/* Figma: 24px bold #101828 center */
.cart-empty__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 12px;
}
/* Figma: 16px #6a7282 max-w-428 center */
.cart-empty__sub {
  font-size: 16px;
  color: #6a7282;
  max-width: 428px;
  line-height: 1.6;
  margin: 0 0 32px;
}
/* Figma: bg-[#8a1538] rounded-[14px] h-[48px] */
.cart-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background: var(--clr-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  transition: opacity var(--transition);
}
.cart-empty__cta:hover { opacity: 0.88; color: #fff; }

/* ─── FULL CART  (Figma: 140:30166) ─── */
.cart-full { padding: 32px 0 80px; }

.cart-page__header { margin-bottom: 28px; }
.cart-page__title  { font-size: 28px; font-weight: 700; color: var(--clr-text); margin: 0; }
.cart-page__count  { color: var(--clr-brand); }
.cart-page__count-label { font-size: 22px; font-weight: 400; color: var(--clr-muted); margin-inline-start: 4px; }

/* Two-column layout: items | summary */
.cart-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.cart-items-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cart item card — Figma: white rounded-[14px] border #f3f4f6 */
.cart-item {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* LTR order: cover | info | price | qty | del */
.cart-item__cover-wrap { flex-shrink: 0; order: 1; }
.cart-item__info       { flex: 1; min-width: 0; order: 2; }
.cart-item__price-col  { flex-shrink: 0; order: 3; text-align: end; }
.cart-item__qty        { flex-shrink: 0; order: 4; }
.cart-item__del        { flex-shrink: 0; order: 5; }

.cart-item__cover {
  width: 90px;
  height: 124px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.cart-item__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 4px;
  text-decoration: none;
  transition: color var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item__title:hover { color: var(--clr-brand); }

.cart-item__author {
  font-size: 14px;
  color: var(--clr-muted);
  margin: 0 0 10px;
}

.cart-item__format-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text);
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px 10px;
}

/* Price — Figma: line total #8a1538 large, unit below in gray */
.cart-item__line-price {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-brand);
  white-space: nowrap;
}
.cart-item__unit-price {
  display: block;
  font-size: 12px;
  color: var(--clr-light-muted);
  margin-top: 4px;
  white-space: nowrap;
}

/* Qty stepper */
.cart-item__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item__qty-dec,
.cart-item__qty-inc {
  background: none;
  border: none;
  width: 32px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--clr-text);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.cart-item__qty-dec:hover,
.cart-item__qty-inc:hover { background: #f3f4f6; color: var(--clr-brand); }
.cart-item__qty-val {
  width: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border-inline: 1px solid var(--clr-border);
  line-height: 40px;
  user-select: none;
}

/* Delete */
.cart-item__del {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--clr-muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition);
}
.cart-item__del:hover { color: #dc2626; background: #fef2f2; }

/* Order summary — Figma: white rounded-16 border sticky */
.cart-summary {
  width: 380px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
.cart-summary__title { font-size: 20px; font-weight: 700; color: var(--clr-text); margin: 0 0 20px; }
.cart-summary__rows  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cart-summary__row   { display: flex; justify-content: space-between; align-items: center; }
.cart-summary__row-label { font-size: 16px; color: var(--clr-muted); }
.cart-summary__row-val   { font-size: 16px; font-weight: 700; color: var(--clr-muted); }
.cart-summary__row-val--free { color: #00a63e; }
.cart-summary__divider { height: 1px; background: var(--clr-border); margin: 20px 0; }
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.cart-summary__total-label { font-size: 18px; font-weight: 700; color: var(--clr-text); }
.cart-summary__total-val   { font-size: 22px; font-weight: 700; color: var(--clr-brand); }

/* Checkout CTA */
.cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: var(--clr-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity var(--transition);
  margin-bottom: 20px;
}
.cart-summary__checkout:hover { opacity: 0.88; color: #fff; }

/* Payment badges */
.cart-summary__payment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cart-summary__payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--clr-border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.cart-summary__payment-badge--mada { color: #009e73; border-color: #009e73; }
.cart-summary__payment-badge--visa { color: #1a1f71; border-color: #1a1f71; }
.cart-summary__payment-badge--mc   { color: #eb001b; border-color: #eb001b; }

/* Responsive */
@media (max-width: 960px) {
  .cart-layout  { flex-direction: column; }
  .cart-summary { width: 100%; position: static; }
}
@media (max-width: 600px) {
  .cart-full { padding: 20px 0 60px; }
  .cart-page__title { font-size: 22px; }
  .cart-item { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .cart-item__cover { width: 72px; height: 100px; }
  .cart-item__info  { flex: 1 1 calc(100% - 92px); min-width: 0; }
  .cart-item__price-col { order: 6; flex: 1; text-align: start; }
  .cart-item__qty   { order: 7; }
  .cart-item__del   { order: 8; }
  .cart-item__line-price { font-size: 16px; }
  .cart-summary { padding: 20px 16px; }
  .cart-summary__total-val { font-size: 20px; }
}
@media (max-width: 400px) {
  .cart-item__qty-val { width: 36px; }
}



/* Intl tel hover*/
.iti__selected-country-primary:hover {
  border-radius: 10px 0 0 10px;
}