:root {
     --ink: #1c1610;
     --parchment: #f5f0e8;
     --cream: #fdf9f2;
     --rust: #b84a2e;
     --rust-dk: #8f3621;
     --gold: #c9963a;
     --sage: #4a6741;
     --muted: #7a6f60;
     --border: #e2dbd0;
     --color_one: #8f3621;
 }

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

 a,
 a:hover {
     text-decoration: none;
 }


 body {
     font-family: 'Hind Siliguri', sans-serif;
     background: var(--cream);
     color: var(--ink);
     font-size: 16px;
     line-height: 1.7;
 }

 /* ── Topbar ── */
 .topbar {
     background: var(--ink);
     color: #b0a898;
     font-size: 12.5px;
     padding: 6px 0;
     letter-spacing: 0.01em;
 }

 .topbar a {
     color: #d4c9b8;
     text-decoration: none;
 }

 .topbar a:hover {
     color: #fff;
 }

 .topbar .divider {
     opacity: 0.3;
     margin: 0 10px;
 }

 /* ── Navbar ── */
 .site-nav {
     background: var(--parchment);
     border-bottom: 1.5px solid var(--border);
     padding: 14px 0;
     position: sticky;
     top: 0;
     z-index: 100;
     box-shadow: 0 2px 12px rgba(28, 22, 16, 0.07);
 }

 .logo {
     font-family: 'Playfair Display', serif;
     font-size: 28px;
     font-weight: 700;
     color: var(--ink);
     text-decoration: none;
     letter-spacing: -0.5px;
     line-height: 1;
 }

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

 .logo-sub {
     font-size: 10px;
     color: var(--muted);
     letter-spacing: 0.15em;
     text-transform: uppercase;
     display: block;
     margin-top: 2px;
 }

 .search-bar {
     border: 1.5px solid var(--border);
     border-radius: 6px;
     overflow: hidden;
     background: #fff;
     display: flex;
     transition: border-color 0.2s;
 }

 .search-bar:focus-within {
     border-color: var(--rust);
 }

 .search-bar select {
     border: none;
     border-right: 1.5px solid var(--border);
     background: var(--parchment);
     padding: 0 12px;
     font-size: 13px;
     color: var(--muted);
     outline: none;
     font-family: inherit;
     min-width: 120px;
     cursor: pointer;
 }

 .search-bar input {
     flex: 1;
     border: none;
     padding: 9px 14px;
     font-size: 14px;
     color: var(--ink);
     outline: none;
     font-family: inherit;
     background: transparent;
 }

 .search-bar button {
     background: var(--rust);
     border: none;
     color: #fff;
     padding: 0 18px;
     font-size: 17px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .search-bar button:hover {
     background: var(--rust-dk);
 }

 .nav-icon-btn {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1px;
     background: none;
     border: none;
     color: var(--ink);
     font-size: 11px;
     cursor: pointer;
     padding: 4px 10px;
     border-radius: 6px;
     transition: background 0.15s, color 0.15s;
     font-family: inherit;
     position: relative;
 }

 .nav-icon-btn i {
     font-size: 22px;
 }

 .nav-icon-btn:hover {
     background: rgba(184, 74, 46, 0.08);
     color: var(--rust);
 }

 .cart-badge {
     position: absolute;
     top: 2px;
     right: 6px;
     background: var(--rust);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     border-radius: 99px;
     padding: 1px 5px;
     min-width: 16px;
     text-align: center;
     line-height: 14px;
 }

 /* ── Mega Menu Nav ── */
 .cat-nav {
     background: var(--ink);
     padding: 0;
     position: relative;
     z-index: 200;
 }

 .cat-nav .cat-list {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
     overflow-x: visible;
 }

 .cat-nav .cat-list>li {
     position: relative;
 }

 .cat-nav .cat-list>li>a {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 11px 16px;
     color: #c0b8a8;
     text-decoration: none;
     font-size: 13.5px;
     white-space: nowrap;
     border-bottom: 2.5px solid transparent;
     transition: color 0.15s, border-color 0.15s, background 0.15s;
 }

 .cat-nav .cat-list>li>a:hover,
 .cat-nav .cat-list>li.active>a,
 .cat-nav .cat-list>li:hover>a {
     color: #fff;
     border-bottom-color: var(--gold);
 }

 .cat-nav .cat-list>li>a i {
     font-size: 15px;
 }

 .cat-nav .cat-list>li>a .mm-arrow {
     font-size: 11px;
     margin-left: 2px;
     opacity: 0.6;
     transition: transform 0.2s;
 }

 .cat-nav .cat-list>li:hover>a .mm-arrow {
     transform: rotate(180deg);
 }

 .cat-all-btn {
     background: var(--rust) !important;
     color: #fff !important;
     border-bottom-color: transparent !important;
 }

 .cat-all-btn:hover {
     background: var(--rust-dk) !important;
 }

 /* ── Mega Menu Panel ── */
 .mega-menu {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background: #fff;
     border: 1px solid var(--border);
     border-top: 3px solid var(--rust);
     border-radius: 0 0 10px 10px;
     box-shadow: 0 16px 48px rgba(28, 22, 16, 0.18);
     z-index: 300;
     min-width: 600px;
     padding: 24px;
     animation: mmFadeIn 0.18s ease;
 }

 .mega-menu.mm-wide {
     min-width: 820px;
 }

 .mega-menu.mm-right {
     left: auto;
     right: 0;
 }

 .mega-menu.mm-center {
     left: 50%;
     transform: translateX(-50%);
 }

 @keyframes mmFadeIn {
     from {
         opacity: 0;
         transform: translateY(8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .cat-nav .cat-list>li:hover .mega-menu {
     display: block;
 }

 .mm-col-head {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--rust);
     margin-bottom: 12px;
     padding-bottom: 8px;
     border-bottom: 1.5px solid var(--border);
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .mm-col-head i {
     font-size: 15px;
 }

 .mm-links {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .mm-links li {
     margin-bottom: 2px;
 }

 .mm-links li a {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 6px 8px;
     font-size: 13.5px;
     color: var(--ink);
     text-decoration: none;
     border-radius: 6px;
     transition: background 0.12s, color 0.12s;
 }

 .mm-links li a:hover {
     background: var(--parchment);
     color: var(--rust);
 }

 .mm-links li a .mm-count {
     margin-left: auto;
     font-size: 11px;
     color: var(--muted);
     background: var(--parchment);
     padding: 1px 7px;
     border-radius: 99px;
 }

 .mm-links li a i {
     font-size: 14px;
     color: var(--muted);
     flex-shrink: 0;
 }

 .mm-links li a:hover i {
     color: var(--rust);
 }

 .mm-divider {
     width: 1px;
     background: var(--border);
     margin: 0 4px;
 }

 .mm-featured {
     background: var(--parchment);
     border-radius: 8px;
     padding: 16px;
 }

 .mm-featured-title {
     font-family: 'Playfair Display', serif;
     font-size: 13px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 12px;
 }

 .mm-book-thumb {
     display: flex;
     gap: 10px;
     align-items: center;
     padding: 8px;
     border-radius: 6px;
     text-decoration: none;
     color: var(--ink);
     transition: background 0.12s;
     margin-bottom: 6px;
 }

 .mm-book-thumb:hover {
     background: rgba(184, 74, 46, 0.06);
 }

 .mm-book-cover {
     width: 36px;
     height: 50px;
     border-radius: 3px;
     flex-shrink: 0;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding: 4px;
 }

 .mm-book-cover span {
     font-size: 8px;
     color: #fff;
     text-align: center;
     font-weight: 600;
     line-height: 1.2;
 }

 .mm-book-info .mm-book-name {
     font-size: 12.5px;
     font-weight: 600;
     color: var(--ink);
     line-height: 1.3;
 }

 .mm-book-info .mm-book-author {
     font-size: 11px;
     color: var(--muted);
 }

 .mm-book-info .mm-book-price {
     font-size: 12px;
     font-weight: 700;
     color: var(--rust);
     margin-top: 2px;
 }

 .mm-banner {
     background: var(--ink);
     border-radius: 8px;
     padding: 16px;
     color: #fff;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .mm-banner .mm-off {
     font-size: 36px;
     font-weight: 800;
     color: var(--gold);
     line-height: 1;
 }

 .mm-banner .mm-off-label {
     font-size: 13px;
     color: #c0b8a8;
     margin-bottom: 10px;
 }

 .mm-banner .mm-btn {
     background: var(--rust);
     color: #fff;
     border: none;
     border-radius: 5px;
     padding: 7px 16px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     font-family: inherit;
     text-decoration: none;
     display: inline-block;
 }

 /* all-cats sidebar mega menu */
 .mega-all {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background: #fff;
     border: 1px solid var(--border);
     border-top: 3px solid var(--rust);
     border-radius: 0 0 10px 10px;
     box-shadow: 0 16px 48px rgba(28, 22, 16, 0.18);
     z-index: 300;
     width: 680px;
     padding: 0;
     animation: mmFadeIn 0.18s ease;
 }

 .cat-nav .cat-list>li:hover .mega-all {
     display: flex;
 }

 .mega-all-sidebar {
     width: 200px;
     background: var(--parchment);
     border-right: 1px solid var(--border);
     border-radius: 0 0 0 10px;
     padding: 12px 0;
     flex-shrink: 0;
 }

 .mega-all-sidebar a {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 9px 16px;
     font-size: 13.5px;
     color: var(--ink);
     text-decoration: none;
     transition: background 0.12s, color 0.12s;
     border-left: 3px solid transparent;
 }

 .mega-all-sidebar a:hover,
 .mega-all-sidebar a.active {
     background: #fff;
     color: var(--rust);
     border-left-color: var(--rust);
 }

 .mega-all-sidebar a i {
     font-size: 16px;
     color: var(--muted);
 }

 .mega-all-sidebar a:hover i {
     color: var(--rust);
 }

 .mega-all-content {
     flex: 1;
     padding: 20px;
 }

 @media (max-width: 992px) {

     .mega-menu,
     .mega-all {
         min-width: unset;
         width: 100vw;
         left: 0;
         border-radius: 0;
     }
 }

 /* ── Hero ── */
 .hero-section {
     background: var(--ink);
     overflow: hidden;
     position: relative;
 }

 .hero-section::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 45%;
     height: 100%;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='500'%3E%3Crect width='400' height='500' fill='%23241c14'/%3E%3Crect x='30' y='40' width='60' height='90' rx='4' fill='%23b84a2e' opacity='.7'/%3E%3Crect x='100' y='20' width='55' height='110' rx='4' fill='%23c9963a' opacity='.5'/%3E%3Crect x='165' y='55' width='50' height='80' rx='4' fill='%234a6741' opacity='.6'/%3E%3Crect x='225' y='30' width='65' height='100' rx='4' fill='%23b84a2e' opacity='.4'/%3E%3Crect x='300' y='50' width='55' height='85' rx='4' fill='%23c9963a' opacity='.35'/%3E%3Crect x='30' y='160' width='58' height='88' rx='4' fill='%234a6741' opacity='.5'/%3E%3Crect x='98' y='150' width='62' height='95' rx='4' fill='%23b84a2e' opacity='.55'/%3E%3Crect x='170' y='162' width='48' height='82' rx='4' fill='%23c9963a' opacity='.45'/%3E%3Crect x='228' y='148' width='60' height='98' rx='4' fill='%234a6741' opacity='.4'/%3E%3Crect x='298' y='155' width='55' height='90' rx='4' fill='%23b84a2e' opacity='.3'/%3E%3Crect x='30' y='280' width='55' height='85' rx='4' fill='%23c9963a' opacity='.4'/%3E%3Crect x='95' y='268' width='62' height='95' rx='4' fill='%234a6741' opacity='.5'/%3E%3Crect x='167' y='278' width='50' height='88' rx='4' fill='%23b84a2e' opacity='.45'/%3E%3Crect x='227' y='265' width='60' height='98' rx='4' fill='%23c9963a' opacity='.35'/%3E%3Crect x='297' y='272' width='55' height='90' rx='4' fill='%234a6741' opacity='.3'/%3E%3C/svg%3E") center/cover no-repeat;
     opacity: 0.4;
     pointer-events: none;
 }

 .hero-content {
     padding: 72px 0 64px;
     position: relative;
     z-index: 1;
 }

 .hero-eyebrow {
     display: inline-block;
     background: rgba(201, 150, 58, 0.15);
     color: var(--gold);
     font-size: 12px;
     font-weight: 600;
     padding: 5px 14px;
     border-radius: 4px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-bottom: 18px;
     border: 1px solid rgba(201, 150, 58, 0.3);
 }

 .hero-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(32px, 5vw, 52px);
     font-weight: 700;
     color: #fff;
     line-height: 1.18;
     margin-bottom: 16px;
     letter-spacing: -0.5px;
 }

 .hero-title em {
     font-style: italic;
     color: var(--gold);
 }

 .hero-desc {
     color: #9e9080;
     font-size: 16px;
     max-width: 420px;
     margin-bottom: 28px;
     line-height: 1.75;
 }

 .btn-rust {
     background: var(--rust);
     color: #fff;
     border: none;
     padding: 12px 28px;
     border-radius: 6px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     transition: background 0.2s, transform 0.15s;
     font-family: inherit;
 }

 .btn-rust:hover {
     background: var(--rust-dk);
     color: #fff;
     transform: translateY(-1px);
 }

 .btn-outline-parchment {
     background: transparent;
     color: #d4c9b8;
     border: 1.5px solid rgba(255, 255, 255, 0.2);
     padding: 12px 28px;
     border-radius: 6px;
     font-size: 15px;
     font-weight: 500;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.2s;
     font-family: inherit;
 }

 .btn-outline-parchment:hover {
     border-color: rgba(255, 255, 255, 0.5);
     color: #fff;
 }

 .hero-stats {
     display: flex;
     gap: 32px;
     margin-top: 36px;
     padding-top: 28px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .hero-stat-num {
     font-family: 'Playfair Display', serif;
     font-size: 26px;
     font-weight: 700;
     color: #fff;
 }

 .hero-stat-label {
     font-size: 12px;
     color: #7a6f60;
     margin-top: 1px;
 }

 /* ── Promo strip ── */
 .promo-strip {
     background: var(--parchment);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     padding: 14px 0;
 }

 .promo-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13.5px;
     color: var(--muted);
 }

 .promo-item i {
     font-size: 22px;
     color: var(--rust);
     flex-shrink: 0;
 }

 .promo-item strong {
     font-weight: 600;
     color: var(--ink);
     display: block;
     font-size: 14px;
 }

 .promo-divider {
     width: 1px;
     height: 32px;
     background: var(--border);
 }

 /* ── Section headings ── */
 .section-head {
     margin-bottom: 28px;
 }

 .section-eyebrow {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--rust);
     margin-bottom: 6px;
 }

 .section-title {
     font-family: 'Playfair Display', serif;
     font-size: 26px;
     font-weight: 700;
     color: var(--ink);
     margin: 0;
     line-height: 1.25;
 }

 .section-link {
     font-size: 13.5px;
     color: var(--rust);
     text-decoration: none;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .section-link:hover {
     color: var(--rust-dk);
 }

 /* ── Book card ── */
 .book-card {
     background: #fff;
     border: 1px solid rgba(0, 0, 0, .08);
     border-radius: 16px;
     overflow: hidden;
     transition: all .35s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
     box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
     position: relative;
 }

 .book-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
 }

 .book-cover {
     aspect-ratio: 2/3;
     overflow: hidden;
     position: relative;
     background: #f8f6f1;
 }

 .book-cover img,
 .book-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
 }

 .book-card:hover .book-image {
     transform: scale(1.06);
 }

 .book-spine {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding: 20px 16px;
     background: linear-gradient(to top,
             rgba(0, 0, 0, .85),
             rgba(0, 0, 0, .25),
             transparent);
 }

 .book-title-on-cover {
     font-family: 'Playfair Display', serif;
     font-size: 16px;
     font-weight: 700;
     color: #fff;
     text-align: center;
     line-height: 1.4;
     text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
 }

 .book-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background: var(--rust);
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     padding: 5px 10px;
     border-radius: 30px;
     z-index: 2;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
 }

 .book-badge.new {
     background: var(--sage);
 }

 .book-badge.sale {
     background: var(--gold);
     color: var(--ink);
 }

 .book-body {
     padding: 18px;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .book-genre {
     font-size: 11px;
     color: var(--rust);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-bottom: 6px;
 }

 .book-name {
     font-family: 'Playfair Display', serif;
     font-size: 17px;
     font-weight: 700;
     color: var(--ink);
     /* line-height: 1.4;
    margin-bottom: 5px; */
     /* display: -webkit-box; */
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     /* min-height: 48px; */
 }

 .book-author {
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 10px;
 }

 .book-rating {
     color: #f5b301;
     font-size: 13px;
     margin-bottom: 12px;
 }

 .book-rating span {
     color: var(--muted);
     font-size: 12px;
 }

 .book-price {
     margin-top: auto;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
 }

 .book-price .current-price,
 .book-price {
     font-size: 20px;
     font-weight: 700;
     color: var(--rust);
 }

 .book-price del {
     font-size: 14px;
     color: #9ca3af;
 }

 .btn-primary,
 .btn-add-cart {
     background: var(--ink);
     color: #fff;
     border: none;
     border-radius: 10px;
     padding: 11px 14px;
     width: 100%;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: all .3s ease;
 }

 .btn-primary:hover,
 .btn-add-cart:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
     background-color: var(--rust);
 }

 .btn-add-cart i {
     font-size: 16px;
 }

 @media (max-width: 576px) {
     .book-body {
         padding: 14px;
     }

     .book-name {
         font-size: 15px;
     }

     .book-price {
         font-size: 17px;
     }

     .btn-add-cart {
         font-size: 13px;
         padding: 10px;
     }
 }

 /* ── Category cards ── */
 .cat-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 20px 16px;
     text-align: center;
     transition: all 0.2s;
     cursor: pointer;
     text-decoration: none;
     display: block;
     color: var(--ink);
 }

 .cat-card:hover {
     border-color: var(--rust);
     color: var(--rust);
     box-shadow: 0 4px 16px rgba(184, 74, 46, 0.1);
     transform: translateY(-2px);
 }

 .cat-card i {
     font-size: 28px;
     margin-bottom: 8px;
     display: block;
 }

 .cat-card .cat-name {
     font-weight: 600;
     font-size: 14px;
     margin-bottom: 3px;
 }

 .cat-card .cat-count {
     font-size: 12px;
     color: var(--muted);
 }

 /* ── Offer banner ── */
 .offer-banner {
     background: linear-gradient(135deg, var(--ink) 0%, #2d2318 60%, #3d2a1a 100%);
     border-radius: 12px;
     padding: 40px 36px;
     position: relative;
     overflow: hidden;
     color: #fff;
 }

 .offer-banner::before {
     content: '📚';
     font-size: 120px;
     position: absolute;
     right: 24px;
     top: 50%;
     transform: translateY(-50%) rotate(-15deg);
     opacity: 0.12;
     pointer-events: none;
 }

 .offer-tag {
     display: inline-block;
     background: var(--rust);
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 4px;
     margin-bottom: 14px;
 }

 .offer-title {
     font-family: 'Playfair Display', serif;
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 8px;
     line-height: 1.25;
 }

 .offer-title em {
     color: var(--gold);
     font-style: italic;
 }

 .offer-desc {
     color: #8a8070;
     font-size: 14px;
     margin-bottom: 20px;
 }

 .offer-timer {
     display: flex;
     gap: 12px;
     margin-bottom: 24px;
 }

 .timer-box {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 6px;
     padding: 8px 14px;
     text-align: center;
 }

 .timer-num {
     font-size: 24px;
     font-weight: 700;
     line-height: 1;
 }

 .timer-label {
     font-size: 10px;
     color: #7a6f60;
     margin-top: 3px;
     letter-spacing: 0.08em;
 }

 /* ── Newsletter ── */
 .newsletter-section {
     background: var(--parchment);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     padding: 56px 0;
 }

 .newsletter-box {
     max-width: 540px;
     margin: 0 auto;
     text-align: center;
 }

 .newsletter-box i {
     font-size: 36px;
     color: var(--rust);
     margin-bottom: 12px;
 }

 .newsletter-box h3 {
     font-family: 'Playfair Display', serif;
     font-size: 24px;
     margin-bottom: 8px;
 }

 .newsletter-box p {
     color: var(--muted);
     font-size: 14px;
     margin-bottom: 20px;
 }

 .newsletter-form {
     display: flex;
     gap: 8px;
     max-width: 420px;
     margin: 0 auto;
 }

 .newsletter-form input {
     flex: 1;
     border: 1.5px solid var(--border);
     border-radius: 6px;
     padding: 10px 14px;
     font-size: 14px;
     outline: none;
     font-family: inherit;
     background: #fff;
     transition: border-color 0.2s;
 }

 .newsletter-form input:focus {
     border-color: var(--rust);
 }

 .newsletter-form button {
     background: var(--rust);
     color: #fff;
     border: none;
     border-radius: 6px;
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
     font-family: inherit;
     transition: background 0.2s;
 }

 .newsletter-form button:hover {
     background: var(--rust-dk);
 }

 /* ── Footer ── */
 footer {
     background: var(--ink);
     color: #7a6f60;
     padding: 48px 0 24px;
 }

 footer .footer-logo {
     font-family: 'Playfair Display', serif;
     font-size: 24px;
     color: #fff;
     font-weight: 700;
 }

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

 footer p {
     font-size: 13.5px;
     line-height: 1.75;
     margin-top: 10px;
 }

 footer h6 {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #d4c9b8;
     margin-bottom: 14px;
 }

 footer ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 footer ul li {
     margin-bottom: 8px;
 }

 footer ul li a {
     color: #7a6f60;
     text-decoration: none;
     font-size: 13.5px;
     transition: color 0.15s;
 }

 footer ul li a:hover {
     color: #d4c9b8;
 }

 .footer-social a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 6px;
     color: #7a6f60;
     text-decoration: none;
     font-size: 16px;
     margin-right: 6px;
     transition: all 0.2s;
 }

 .footer-social a:hover {
     border-color: var(--rust);
     color: var(--rust);
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     padding-top: 20px;
     margin-top: 36px;
     font-size: 12.5px;
 }

 /* ── Helpers ── */
 section {
     padding: 52px 0;
 }

 /* book cover colors */
 /* .bc-rust {
     background: linear-gradient(160deg, #b84a2e, #7a2e1a);
 }

 .bc-gold {
     background: linear-gradient(160deg, #b8862e, #7a5a1a);
 }

 .bc-sage {
     background: linear-gradient(160deg, #3d6138, #274024);
 }

 .bc-navy {
     background: linear-gradient(160deg, #1e3a5f, #0d1f35);
 }

 .bc-plum {
     background: linear-gradient(160deg, #5c2d6e, #33184a);
 }

 .bc-teal {
     background: linear-gradient(160deg, #1e6060, #0d3636);
 }

 .bc-brown {
     background: linear-gradient(160deg, #6b3e26, #3d2010);
 }

 .bc-slate {
     background: linear-gradient(160deg, #3c4a5a, #1e2830);
 } */

 @media (max-width: 768px) {
     .hero-stats {
         gap: 20px;
     }

     .hero-stat-num {
         font-size: 20px;
     }

     .promo-divider {
         display: none;
     }

     .newsletter-form {
         flex-direction: column;
     }

     .offer-banner {
         padding: 28px 20px;
     }
 }


 /* ── Breadcrumb ── */
 .breadcrumb-section {
     background: var(--parchment);
     border-bottom: 1px solid var(--border);
     padding: 10px 0;
 }

 .breadcrumb {
     margin: 0;
     font-size: 13px;
 }

 .breadcrumb-item a {
     color: var(--muted);
     text-decoration: none;
 }

 .breadcrumb-item a:hover {
     color: var(--rust);
 }

 .breadcrumb-item.active {
     color: var(--ink);
 }

 .breadcrumb-item+.breadcrumb-item::before {
     color: var(--border);
 }

 /* ── Book Cover ── */
 .book-cover-wrap {
     position: sticky;
     top: 100px;
 }

 .cover-3d {
     width: 100%;
     max-width: 280px;
     margin: 0 auto;
     display: block;
 }

 .cover-main {
     width: 100%;
     aspect-ratio: 2/3;
     border-radius: 4px 10px 10px 4px;
     background: linear-gradient(160deg, #b84a2e, #7a2e1a);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     padding: 28px 20px 24px;
     box-shadow:
         -6px 6px 0 #7a2e1a,
         -12px 12px 0 #5a1e0a,
         0 20px 50px rgba(184, 74, 46, 0.35),
         0 8px 20px rgba(0, 0, 0, 0.25);
     position: relative;
     overflow: hidden;
 }

 .cover-main::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 18px;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05));
     border-radius: 4px 0 0 4px;
 }

 .cover-main::after {
     content: '';
     position: absolute;
     inset: 12px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 4px;
     pointer-events: none;
 }

 .cover-top {
     text-align: center;
 }

 .cover-label {
     font-size: 9px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.5);
     margin-bottom: 16px;
 }

 .cover-title-text {
     font-family: 'Playfair Display', serif;
     font-size: 22px;
     font-weight: 700;
     color: #fff;
     text-align: center;
     line-height: 1.3;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }

 .cover-ornament {
     color: rgba(255, 255, 255, 0.25);
     font-size: 28px;
     margin: 8px 0;
 }

 .cover-author-text {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.65);
     text-align: center;
     letter-spacing: 0.04em;
 }

 .cover-bottom {
     text-align: center;
     font-size: 10px;
     color: rgba(255, 255, 255, 0.35);
     letter-spacing: 0.1em;
 }

 .cover-actions {
     display: flex;
     gap: 8px;
     margin-top: 20px;
     max-width: 280px;
     margin-left: auto;
     margin-right: auto;
 }

 .cover-action-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 8px;
     border: 1.5px solid var(--border);
     border-radius: 7px;
     background: #fff;
     color: var(--muted);
     font-size: 13px;
     cursor: pointer;
     transition: all .15s;
     font-family: inherit;
     text-decoration: none;
 }

 .cover-action-btn:hover {
     border-color: var(--rust);
     color: var(--rust);
 }

 .cover-action-btn i {
     font-size: 16px;
 }

 .stock-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(74, 103, 65, 0.1);
     color: var(--sage);
     font-size: 12.5px;
     font-weight: 600;
     padding: 5px 12px;
     border-radius: 5px;
     border: 1px solid rgba(74, 103, 65, 0.2);
     margin-bottom: 16px;
 }

 /* ── Book Info ── */
 .book-genre-tag {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--rust);
     margin-bottom: 8px;
 }

 .book-detail-title {
     font-family: 'Playfair Display', serif;
     font-size: 32px;
     font-weight: 700;
     color: var(--ink);
     line-height: 1.2;
     margin-bottom: 6px;
 }

 .book-detail-subtitle {
     font-size: 16px;
     color: var(--muted);
     margin-bottom: 16px;
     font-style: italic;
 }

 .author-link {
     color: var(--rust);
     text-decoration: none;
     font-weight: 600;
     font-size: 15px;
 }

 .author-link:hover {
     text-decoration: underline;
     color: var(--rust-dk);
 }

 /* Rating */
 .rating-row {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 14px 0;
     flex-wrap: wrap;
 }

 .stars {
     color: var(--gold);
     font-size: 18px;
     letter-spacing: 1px;
 }

 .rating-num {
     font-size: 22px;
     font-weight: 700;
     color: var(--ink);
 }

 .rating-count {
     font-size: 13px;
     color: var(--muted);
 }

 .rating-divider {
     color: var(--border);
 }

 .sold-badge {
     font-size: 12.5px;
     color: var(--muted);
     background: var(--parchment);
     padding: 3px 10px;
     border-radius: 99px;
 }

 /* Price */
 .price-block {
     background: var(--parchment);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 18px 20px;
     margin: 20px 0;
 }

 .price-current {
     font-size: 34px;
     font-weight: 700;
     color: var(--rust);
     line-height: 1;
 }

 .price-original {
     font-size: 16px;
     color: #aaa;
     text-decoration: line-through;
     margin-left: 10px;
 }

 .price-discount {
     background: var(--rust);
     color: #fff;
     font-size: 12px;
     font-weight: 700;
     padding: 3px 9px;
     border-radius: 4px;
     margin-left: 8px;
     vertical-align: middle;
 }

 .price-note {
     font-size: 12px;
     color: var(--muted);
     margin-top: 6px;
 }

 /* Quantity */
 .qty-row {
     display: flex;
     align-items: center;
     gap: 16px;
     margin: 16px 0;
     flex-wrap: wrap;
 }

 .qty-label {
     font-size: 14px;
     font-weight: 500;
     color: var(--ink);
 }

 .qty-ctrl {
     display: flex;
     align-items: center;
     border: 1.5px solid var(--border);
     border-radius: 7px;
     overflow: hidden;
 }

 .qty-btn {
     width: 38px;
     height: 38px;
     border: none;
     background: var(--parchment);
     color: var(--ink);
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .15s;
     font-family: inherit;
 }

 .qty-btn:hover {
     background: var(--border);
 }

 .qty-input {
     width: 52px;
     height: 38px;
     border: none;
     border-left: 1.5px solid var(--border);
     border-right: 1.5px solid var(--border);
     text-align: center;
     font-size: 15px;
     font-weight: 600;
     font-family: inherit;
     color: var(--ink);
     background: #fff;
     outline: none;
 }

 /* CTA Buttons */
 .cta-row {
     display: flex;
     gap: 12px;
     margin-top: 8px;
     flex-wrap: wrap;
 }

 .btn-buy-now {
     flex: 1;
     background: var(--rust);
     color: #fff;
     border: none;
     border-radius: 8px;
     padding: 13px 20px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: background .2s, transform .15s;
     font-family: inherit;
     min-width: 140px;
 }

 .btn-buy-now:hover {
     background: var(--rust-dk);
     transform: translateY(-1px);
 }

 .btn-add-cart {
     flex: 1;
     background: var(--ink);
     color: #fff;
     border: none;
     border-radius: 8px;
     padding: 13px 20px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: background .2s, transform .15s;
     font-family: inherit;
     min-width: 140px;
 }

 .btn-add-cart:hover {
     background: #2d2318;
     transform: translateY(-1px);
 }

 .btn-wishlist {
     width: 50px;
     height: 50px;
     border: 1.5px solid var(--border);
     border-radius: 8px;
     background: #fff;
     color: var(--muted);
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .15s;
     flex-shrink: 0;
 }

 .btn-wishlist:hover {
     border-color: #e85d78;
     color: #e85d78;
 }

 .btn-wishlist.active {
     border-color: #e85d78;
     color: #e85d78;
     background: rgba(232, 93, 120, .05);
 }

 /* Delivery info */
 .delivery-box {
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     margin-top: 20px;
 }

 .delivery-row {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 13px 16px;
     font-size: 13.5px;
     border-bottom: 1px solid var(--border);
 }

 .delivery-row:last-child {
     border-bottom: none;
 }

 .delivery-row i {
     font-size: 20px;
     color: var(--rust);
     flex-shrink: 0;
     margin-top: 1px;
 }

 .delivery-row strong {
     font-weight: 600;
     font-size: 14px;
     display: block;
     color: var(--ink);
 }

 .delivery-row span {
     color: var(--muted);
     font-size: 12.5px;
 }

 /* ── Tabs ── */
 .detail-tabs {
     margin-top: 40px;
 }

 .nav-tabs {
     border-bottom: 2px solid var(--border);
     gap: 0;
 }

 .nav-tabs .nav-link {
     color: var(--muted);
     font-size: 14px;
     font-weight: 500;
     padding: 10px 20px;
     border: none;
     border-bottom: 2.5px solid transparent;
     margin-bottom: -2px;
     border-radius: 0;
     font-family: inherit;
     transition: color .15s;
 }

 .nav-tabs .nav-link:hover {
     color: var(--rust);
     border-bottom-color: var(--rust);
     background: transparent;
 }

 .nav-tabs .nav-link.active {
     color: var(--rust);
     border-bottom-color: var(--rust);
     background: transparent;
     font-weight: 600;
 }

 .tab-content {
     padding: 28px 0;
 }

 /* Book details table */
 .detail-table {
     width: 100%;
     font-size: 14px;
 }

 .detail-table tr {
     border-bottom: 1px solid var(--border);
 }

 .detail-table tr:last-child {
     border-bottom: none;
 }

 .detail-table td {
     padding: 11px 8px;
 }

 .detail-table td:first-child {
     color: var(--muted);
     width: 40%;
     font-weight: 500;
 }

 .detail-table td:last-child {
     color: var(--ink);
     font-weight: 400;
 }

 /* Description */
 .desc-text {
     font-size: 15px;
     color: #3a3228;
     line-height: 1.85;
 }

 .desc-text p {
     margin-bottom: 14px;
 }

 .read-more-btn {
     background: none;
     border: 1.5px solid var(--border);
     padding: 7px 18px;
     border-radius: 6px;
     font-size: 13px;
     color: var(--rust);
     cursor: pointer;
     font-family: inherit;
     transition: all .15s;
     margin-top: 4px;
 }

 .read-more-btn:hover {
     background: var(--parchment);
 }

 /* ── Reviews ── */
 .review-summary {
     background: var(--parchment);
     border-radius: 12px;
     padding: 24px;
     margin-bottom: 28px;
 }

 .review-big-num {
     font-family: 'Playfair Display', serif;
     font-size: 56px;
     font-weight: 700;
     color: var(--ink);
     line-height: 1;
 }

 .review-stars-big {
     color: var(--gold);
     font-size: 22px;
     margin: 6px 0;
 }

 .review-total {
     font-size: 13px;
     color: var(--muted);
 }

 .rating-bar-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 7px;
     font-size: 13px;
 }

 .rating-bar-label {
     white-space: nowrap;
     min-width: 30px;
     color: var(--muted);
 }

 .rating-bar-track {
     flex: 1;
     height: 7px;
     background: var(--border);
     border-radius: 99px;
     overflow: hidden;
 }

 .rating-bar-fill {
     height: 100%;
     background: var(--gold);
     border-radius: 99px;
 }

 .rating-bar-count {
     min-width: 28px;
     text-align: right;
     color: var(--muted);
 }

 .review-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 20px;
     margin-bottom: 16px;
 }

 .reviewer-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: var(--parchment);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     font-weight: 700;
     color: var(--rust);
     border: 2px solid var(--border);
     flex-shrink: 0;
 }

 .reviewer-name {
     font-weight: 600;
     font-size: 14.5px;
     color: var(--ink);
 }

 .reviewer-date {
     font-size: 12px;
     color: var(--muted);
 }

 .review-stars {
     color: var(--gold);
     font-size: 14px;
 }

 .review-text {
     font-size: 14px;
     color: #4a4238;
     line-height: 1.75;
     margin-top: 8px;
 }

 .review-helpful {
     font-size: 12px;
     color: var(--muted);
     margin-top: 10px;
 }

 .review-helpful button {
     background: none;
     border: 1px solid var(--border);
     border-radius: 5px;
     padding: 3px 10px;
     font-size: 12px;
     color: var(--muted);
     cursor: pointer;
     font-family: inherit;
     margin-left: 6px;
     transition: all .15s;
 }

 .review-helpful button:hover {
     border-color: var(--rust);
     color: var(--rust);
 }

 .verified-badge {
     display: inline-block;
     background: rgba(74, 103, 65, 0.1);
     color: var(--sage);
     font-size: 11px;
     font-weight: 600;
     padding: 2px 8px;
     border-radius: 4px;
     margin-left: 6px;
 }

 /* ── Related books ── */
 .section-head-sm {
     margin-bottom: 20px;
 }

 .section-eyebrow-sm {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--rust);
     margin-bottom: 4px;
 }

 .section-title-sm {
     font-family: 'Playfair Display', serif;
     font-size: 22px;
     font-weight: 700;
     color: var(--ink);
     margin: 0;
 }

 .book-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     transition: box-shadow .2s, transform .2s;
 }

 .book-card:hover {
     box-shadow: 0 8px 28px rgba(28, 22, 16, .12);
     transform: translateY(-3px);
 }

 .book-cover-sm {
     aspect-ratio: 2/3;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding: 16px 12px;
     position: relative;
 }

 .book-badge {
     position: absolute;
     top: 8px;
     left: 8px;
     background: var(--rust);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     padding: 2px 7px;
     border-radius: 3px;
 }

 .book-badge.new {
     background: var(--sage);
 }

 .book-title-on-cover {
     font-family: 'Playfair Display', serif;
     font-size: 13px;
     font-weight: 700;
     color: #fff;
     text-align: center;
     line-height: 1.3;
     text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
 }

 .book-body-sm {
     padding: 12px 14px 14px;
 }

 .book-genre-sm {
     font-size: 11px;
     color: var(--muted);
     letter-spacing: .07em;
     text-transform: uppercase;
     margin-bottom: 2px;
 }

 .book-name-sm {
     font-family: 'Playfair Display', serif;
     font-size: 14px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 2px;
     line-height: 1.3;
 }

 .book-author-sm {
     font-size: 12px;
     color: var(--muted);
     margin-bottom: 6px;
 }

 .book-price-sm {
     font-size: 16px;
     font-weight: 700;
     color: var(--rust);
     margin-bottom: 8px;
 }

 .book-price-sm del {
     font-size: 12px;
     color: #aaa;
     font-weight: 400;
     margin-left: 5px;
 }

 .btn-cart-sm {
     background: var(--ink);
     color: #fff;
     border: none;
     border-radius: 6px;
     padding: 7px 0;
     width: 100%;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     transition: background .2s;
     font-family: inherit;
 }

 .btn-cart-sm:hover {
     background: var(--rust);
 }

 /* ── Footer mini ── */
 .footer-mini {
     background: var(--ink);
     color: #7a6f60;
     padding: 28px 0;
     font-size: 13px;
 }

 .footer-mini a {
     color: #7a6f60;
     text-decoration: none;
     margin: 0 10px;
 }

 .footer-mini a:hover {
     color: #d4c9b8;
 }

 /* Utility */
 .tag-pill {
     display: inline-block;
     background: var(--parchment);
     border: 1px solid var(--border);
     border-radius: 99px;
     padding: 4px 12px;
     font-size: 12px;
     color: var(--muted);
     margin: 3px;
     text-decoration: none;
     transition: all .15s;
 }

 .tag-pill:hover {
     border-color: var(--rust);
     color: var(--rust);
 }

 @media (max-width:768px) {
     .book-detail-title {
         font-size: 24px;
     }

     .price-current {
         font-size: 26px;
     }

     .book-cover-wrap {
         position: static;
     }

     .cta-row {
         flex-direction: column;
     }

     .btn-buy-now,
     .btn-add-cart {
         min-width: unset;
     }
 }

 /* =================================================================== */
 .quenty .price_quantity {
     width: 135px;
 }

 .quenty .price_quantity .btn-primary {
     width: 20%;
 }

 section {
     padding: 0px 0;
 }

    /* ══ Filter / Sort bar ══ */
    .filter-bar {
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 11px 0;
      position: sticky;
      top: 68px;
      z-index: 100;
    }
    .filter-bar-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    .filter-select {
      border: 1.5px solid var(--border);
      border-radius: 6px;
      padding: 7px 12px;
      font-size: 13px;
      color: var(--ink);
      background: #fff;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      transition: border-color .15s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237a6f60' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }
    .filter-select:focus { border-color: var(--rust); }

    .filter-btn {
      border: 1.5px solid var(--border);
      border-radius: 6px;
      padding: 7px 14px;
      font-size: 13px;
      color: var(--muted);
      background: #fff;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all .15s;
    }
    .filter-btn:hover, .filter-btn.active { border-color: var(--rust); color: var(--rust); background: rgba(184,74,46,.04); }
    .filter-btn .badge-count { background: var(--rust); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 99px; }

    .view-toggle { display: flex; border: 1.5px solid var(--border); border-radius: 6px; overflow: hidden; }
    .view-btn { width: 36px; height: 36px; border: none; background: #fff; color: var(--muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
    .view-btn.active { background: var(--rust); color: #fff; }
    .view-btn + .view-btn { border-left: 1.5px solid var(--border); }

    .result-count { font-size: 13px; color: var(--muted); margin-left: auto; white-space: nowrap; }

    /* ══ Sidebar Filters ══ */
    .sidebar { position: sticky; top: 120px; }

    .filter-panel {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .filter-panel-head {
      background: var(--parchment);
      border-bottom: 1px solid var(--border);
      padding: 11px 16px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
    }
    .filter-panel-head i { font-size: 12px; color: var(--muted); transition: transform .2s; }
    .filter-panel-head.open i { transform: rotate(180deg); }
    .filter-panel-body { padding: 14px 16px; }

    .filter-check {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      font-size: 13.5px;
      color: var(--ink);
      cursor: pointer;
      border-radius: 4px;
      transition: color .12s;
    }
    .filter-check:hover { color: var(--rust); }
    .filter-check input[type=checkbox] {
      width: 16px; height: 16px;
      accent-color: var(--rust);
      cursor: pointer;
      flex-shrink: 0;
    }
    .filter-check .fc-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }

    .price-range-wrap { padding: 4px 0; }
    .price-range { width: 100%; accent-color: var(--rust); cursor: pointer; }
    .price-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }

    .rating-filter { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
    .rating-filter:hover .rf-label { color: var(--rust); }
    .rf-stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
    .rf-label { font-size: 13px; color: var(--muted); }
    .rf-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }

    .sidebar-tag { display: inline-block; background: var(--parchment); border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; font-size: 12px; color: var(--muted); margin: 3px; cursor: pointer; transition: all .15s; }
    .sidebar-tag:hover, .sidebar-tag.active { border-color: var(--rust); color: var(--rust); background: rgba(184,74,46,.04); }

    .btn-clear-filter { width: 100%; background: none; border: 1.5px solid var(--border); border-radius: 6px; padding: 8px; font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit; transition: all .15s; }
    .btn-clear-filter:hover { border-color: var(--rust); color: var(--rust); }

    /* Active filter pills */
    .active-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
    .af-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(184,74,46,.08); border: 1px solid rgba(184,74,46,.2); color: var(--rust); border-radius: 99px; padding: 3px 10px 3px 12px; font-size: 12.5px; font-weight: 500; }
    .af-pill button { background: none; border: none; color: var(--rust); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; display: flex; align-items: center; }
    .af-label { font-size: 12.5px; color: var(--muted); }
    .af-clear { font-size: 12px; color: var(--rust); cursor: pointer; background: none; border: none; font-family: inherit; font-weight: 600; padding: 0; margin-left: 4px; }
    .af-clear:hover { text-decoration: underline; }

    /* ══ Book Cards — Grid View ══ */
    .book-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: box-shadow .2s, transform .2s;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .book-card:hover { box-shadow: 0 8px 28px rgba(28,22,16,.12); transform: translateY(-3px); }

    .book-cover {
      aspect-ratio: 2/3;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 16px 12px;
      position: relative;
      overflow: hidden;
    }
    .book-cover::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 12px;
      background: linear-gradient(90deg, rgba(0,0,0,.22), transparent);
    }
    .book-cover-title {
      font-family: 'Playfair Display', serif;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      line-height: 1.3;
      text-shadow: 0 1px 4px rgba(0,0,0,.4);
    }

 

    .book-badge {
      position: absolute;
      top: 10px; left: 10px;
      background: var(--rust);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: .04em;
      z-index: 1;
    }
    .book-badge.new   { background: var(--sage); }
    .book-badge.sale  { background: var(--gold); color: var(--ink); }
    .book-badge.hot   { background: #e85d2c; }

    .book-wish {
      position: absolute;
      top: 8px; right: 8px;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,.85);
      border: none;
      color: var(--muted);
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .15s;
      z-index: 1;
    }
    .book-wish:hover { background: #fff; color: #e85d78; }
    .book-wish.active { color: #e85d78; background: #fff; }

    .book-body {
      padding: 13px 14px 14px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .book-genre { font-size: 10.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
    .book-name { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; line-height: 1.3; }
    .book-author { font-size: 12px; color: var(--muted); margin-bottom: 7px; }
    .book-rating { color: var(--gold); font-size: 12px; margin-bottom: 9px; }
    .book-rating span { color: var(--muted); font-size: 11px; }
    .book-price { font-size: 17px; font-weight: 700; color: var(--rust); margin-top: auto; margin-bottom: 10px; }
    .book-price del { font-size: 12px; color: #bbb; font-weight: 400; margin-left: 6px; }
    .btn-add-cart {
      background: var(--ink);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 8px 0;
      width: 100%;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background .2s;
      font-family: inherit;
    }
    .btn-add-cart:hover { background: var(--rust); }

    /* ══ List View ══ */
    .book-list-item {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex;
      gap: 0;
      overflow: hidden;
      transition: box-shadow .2s, transform .2s;
      margin-bottom: 12px;
    }
    .book-list-item:hover { box-shadow: 0 6px 20px rgba(28,22,16,.1); transform: translateY(-2px); }
    .list-cover {
      width: 110px;
      flex-shrink: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 14px 10px;
      position: relative;
    }
    .list-cover::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 10px;
      background: linear-gradient(90deg, rgba(0,0,0,.22), transparent);
    }
    .list-cover-title { font-family: 'Playfair Display', serif; font-size: 11px; font-weight: 700; color: #fff; text-align: center; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
    .list-body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
    .list-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .list-info { flex: 1; }
    .list-actions { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .list-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.25; }
    .list-author { font-size: 13px; color: var(--rust); font-weight: 500; margin-bottom: 6px; }
    .list-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .list-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
    .list-tag { background: var(--parchment); border: 1px solid var(--border); border-radius: 99px; padding: 2px 10px; font-size: 11px; color: var(--muted); }
    .list-price { font-size: 20px; font-weight: 700; color: var(--rust); }
    .list-price del { font-size: 13px; color: #bbb; font-weight: 400; margin-left: 6px; }
    .list-price-badge { display: inline-block; background: var(--rust); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
    .btn-list-cart { background: var(--rust); color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .2s; font-family: inherit; white-space: nowrap; }
    .btn-list-cart:hover { background: var(--rust-dk); }
    .btn-list-wish { width: 36px; height: 36px; border: 1.5px solid var(--border); border-radius: 6px; background: #fff; color: var(--muted); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
    .btn-list-wish:hover { border-color: #e85d78; color: #e85d78; }

    /* ══ Pagination ══ */
    .pagination-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); }
    .pagination { margin: 0; gap: 4px; }
    .page-link { border: 1.5px solid var(--border); border-radius: 6px !important; color: var(--ink); font-size: 13.5px; padding: 6px 13px; font-family: inherit; transition: all .15s; }
    .page-link:hover { background: var(--parchment); border-color: var(--rust); color: var(--rust); }
    .page-item.active .page-link { background: var(--rust); border-color: var(--rust); color: #fff; }
    .page-item.disabled .page-link { color: var(--border); }
    .page-info { font-size: 13px; color: var(--muted); }

    /* ══ Empty state ══ */
    .empty-state { text-align: center; padding: 60px 20px; }
    .empty-state i { font-size: 56px; color: var(--border); margin-bottom: 16px; display: block; }
    .empty-state h4 { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
    .empty-state p { color: var(--muted); font-size: 14px; max-width: 320px; margin: 0 auto 20px; }

    /* ══ Footer mini ══ */
    .footer-mini { background: var(--ink); color: #7a6f60; padding: 28px 0; font-size: 13px; border-top: 3px solid var(--rust); }
    .footer-mini .foot-logo { font-family: 'Playfair Display', serif; font-size: 20px; color: #fff; }
    .footer-mini .foot-logo span { color: var(--rust); }
    .footer-mini a { color: #7a6f60; text-decoration: none; margin: 0 10px; }
    .footer-mini a:hover { color: #d4c9b8; }

    /* ══ Misc ══ */
    .section-divider { height: 1px; background: var(--border); margin: 8px 0; }

    @media (max-width: 991px) {
      .sidebar { position: static; }
      .filter-drawer { display: none; }
      .filter-drawer.open { display: block; }
    }
    @media (max-width: 576px) {
      .list-desc { display: none; }
      .list-cover { width: 80px; }
    }