/* ==========================================================================
   Bookstore Core CSS
   Mobile-first, responsive across phone / tablet / desktop.
   Relies on CSS variables set by the Bookstore Styling plugin:
   --bookstore-primary, --bookstore-secondary, --bookstore-header-bg,
   --bookstore-header-text, --bookstore-footer-bg, --bookstore-footer-text,
   --bookstore-radius, --bookstore-font-en, --bookstore-font-ur
   ========================================================================== */

:root {
    --bookstore-transition: 0.2s ease;
    --bookstore-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bookstore-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --bookstore-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --bookstore-shadow-lg: 0 12px 32px rgba(0,0,0,0.16);

    /* Premium palette (Aug 2026 redesign). These also feed the
       --bookstore-* fallbacks below, so the Bookstore Styling admin
       panel can still override any of it per-site. */
    --qk-ink: #16332B;
    --qk-ink-soft: #1F4038;
    --qk-parchment: #FAF6EC;
    --qk-parchment-2: #F1EAD9;
    --qk-brass: #B8863B;
    --qk-brass-dark: #8F6425;
    --qk-cardinal: #A2392D;
    --qk-charcoal: #24211D;
    --qk-muted: #6E6A5E;
    --qk-line: #DED2B4;
    --qk-font-display: 'Fraunces', Georgia, serif;
    --qk-font-body: 'Inter', -apple-system, sans-serif;
    --qk-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Fallback values for the existing --bookstore-* variables the rest
       of this file already uses. The Bookstore Styling panel can still
       override any of these; these are just better defaults. */
    --bookstore-primary: var(--qk-ink);
    --bookstore-secondary: var(--qk-brass);
    --bookstore-header-bg: var(--qk-parchment);
    --bookstore-header-text: var(--qk-charcoal);
    --bookstore-footer-bg: var(--qk-ink);
    --bookstore-footer-text: var(--qk-parchment);
    --bookstore-radius: 3px;
}

body { font-family: var(--qk-font-body); color: var(--qk-charcoal); background: var(--qk-parchment); }
.bookstore-home-title, .bookstore-hero-title { font-family: var(--qk-font-display); }

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

/* ---------- Header ---------- */
.bookstore-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--bookstore-header-bg, #fff);
    color: var(--bookstore-header-text, #1a1a1a);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--bookstore-shadow-sm);
}

.bookstore-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
}

.bookstore-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--bookstore-transition);
}
.bookstore-logo:hover { opacity: 0.85; }
.bookstore-logo-mark { display: flex; align-items: center; }
.bookstore-logo-mark img { max-height: 44px; width: auto; display: block; }
.bookstore-footer .bookstore-logo-mark { background: var(--qk-parchment); border-radius: 8px; padding: 6px 10px; }
.bookstore-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.bookstore-logo-name { font-family: var(--qk-font-display); font-weight: 600; font-size: 19px; color: var(--qk-ink); }
.bookstore-footer .bookstore-logo-name { color: var(--qk-parchment); }
.bookstore-logo-url { font-family: var(--qk-font-mono); font-size: 10.5px; color: var(--qk-muted); letter-spacing: 0.02em; }
.bookstore-footer .bookstore-logo-url { color: rgba(250,246,236,0.55); }

/* Hamburger button (mobile only, see media query) */
.bookstore-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--bookstore-radius, 6px);
    transition: background var(--bookstore-transition);
}
.bookstore-mobile-toggle:hover,
.bookstore-mobile-toggle:focus-visible { background: rgba(0,0,0,0.05); }
.bookstore-burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    margin: 0 auto;
    transition: transform var(--bookstore-transition), opacity var(--bookstore-transition);
}
.bookstore-mobile-toggle[aria-expanded="true"] .bookstore-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bookstore-mobile-toggle[aria-expanded="true"] .bookstore-burger-line:nth-child(2) { opacity: 0; }
.bookstore-mobile-toggle[aria-expanded="true"] .bookstore-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bookstore-mobile-close {
    display: none;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--bookstore-radius, 6px);
}
.bookstore-mobile-close:hover { background: rgba(0,0,0,0.05); }

.bookstore-nav-drawer-header,
.bookstore-nav-drawer-footer,
.bookstore-drawer-logo { display: none; }

.bookstore-cart-link-mobile { display: none; }

/* ---------- Nav ---------- */
.bookstore-nav-wrap { flex: 1; display: flex; }
.bookstore-nav { width: 100%; }
.bookstore-nav > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.bookstore-nav li { position: relative; }
.bookstore-nav-item-row { display: flex; align-items: center; }
.bookstore-nav > ul > li > .bookstore-nav-item-row > a {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    color: inherit;
    padding: 10px 2px;
    position: relative;
    transition: color var(--bookstore-transition);
}
.bookstore-nav > ul > li > .bookstore-nav-item-row > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 2px;
    background: var(--bookstore-primary, #1F6F3E);
    transform: scaleX(0);
    transition: transform var(--bookstore-transition-slow);
    transform-origin: center;
}
.bookstore-nav > ul > li:hover > .bookstore-nav-item-row > a,
.bookstore-nav > ul > li > .bookstore-nav-item-row > a:focus-visible {
    color: var(--bookstore-primary, #1F6F3E);
}
.bookstore-nav > ul > li:hover > .bookstore-nav-item-row > a::after { transform: scaleX(1); }

.bookstore-submenu-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    width: 36px; height: 36px;
}
.bookstore-caret {
    display: inline-block;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--bookstore-transition);
}

.bookstore-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: var(--bookstore-shadow-lg);
    border-radius: var(--bookstore-radius, 6px);
    padding: 8px 0;
    min-width: 220px;
    z-index: 50;
    list-style: none;
    margin: 4px 0 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--bookstore-transition), transform var(--bookstore-transition);
}
.bookstore-rtl .bookstore-submenu { left: auto; right: 0; }
.bookstore-nav li.has-children:hover > .bookstore-submenu {
    display: block; opacity: 1; transform: translateY(0);
}
.bookstore-submenu li a {
    display: block; padding: 10px 18px; text-decoration: none; color: #333;
    font-size: 14px; transition: background var(--bookstore-transition);
}
.bookstore-submenu li a:hover { background: rgba(0,0,0,0.04); color: var(--bookstore-primary, #1F6F3E); }

/* ---------- Header actions (search / lang / account / cart) ---------- */
.bookstore-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.bookstore-icon-link {
    position: relative;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    transition: background var(--bookstore-transition);
}
.bookstore-icon-link:hover { background: rgba(22,51,43,0.08); }
.bookstore-cart-count {
    position: absolute; top: 0; right: 0;
    background: var(--qk-brass); color: #3A2A0E;
    font-size: 10px; font-weight: 600; line-height: 1;
    border-radius: 50%; min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    padding: 2px;
}

.bookstore-lang-switch { display: flex; align-items: center; border: 1px solid var(--qk-line); border-radius: 20px; overflow: hidden; font-family: var(--qk-font-mono); font-size: 11.5px; }
.bookstore-lang-switch a { text-decoration: none; color: var(--qk-muted); padding: 6px 12px; transition: background var(--bookstore-transition), color var(--bookstore-transition); }
.bookstore-lang-switch a:hover { background: rgba(22,51,43,0.06); }
.bookstore-lang-switch a.active { font-weight: 500; color: var(--qk-parchment); background: var(--qk-ink); }
.bookstore-footer-bottom .bookstore-lang-switch { border-color: rgba(250,246,236,0.25); }
.bookstore-footer-bottom .bookstore-lang-switch a { color: rgba(250,246,236,0.6); }
.bookstore-footer-bottom .bookstore-lang-switch a.active { background: var(--qk-brass); color: #3A2A0E; }

.bookstore-global-search { display: flex; align-items: center; border: 1px solid var(--qk-line); border-radius: 20px; padding: 0 4px 0 14px; background: #fff; }
.bookstore-global-search input {
    padding: 8px 4px; border: none; background: transparent; font-size: 13px; color: var(--qk-muted);
    width: 210px;
}
.bookstore-global-search input:focus { outline: none; }
.bookstore-global-search button {
    border: none; background: transparent; cursor: pointer; color: var(--qk-muted);
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.bookstore-global-search button:hover { background: rgba(22,51,43,0.06); color: var(--qk-ink); }

/* Overlay behind the mobile drawer */
.bookstore-nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 190;
    opacity: 0;
    transition: opacity var(--bookstore-transition-slow);
}
.bookstore-nav-overlay.open { display: block; opacity: 1; }

/* ---------- Buttons (shared) ---------- */
.bookstore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    min-height: 44px;
    color: #fff;
    background: var(--bookstore-primary, #1F6F3E);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--bookstore-radius, 6px);
    transition: transform var(--bookstore-transition), box-shadow var(--bookstore-transition), filter var(--bookstore-transition);
}
.bookstore-btn:hover { filter: brightness(1.08); box-shadow: var(--bookstore-shadow-md); transform: translateY(-1px); }
.bookstore-btn:active { transform: translateY(0); filter: brightness(0.96); }
.bookstore-btn.secondary { background: var(--bookstore-secondary, #D4A017); }
.bookstore-whatsapp-btn { background: #25D366; }

/* Brass primary CTA, used in the hero and anywhere a "premium" accent
   button is wanted instead of the ink-green default .bookstore-btn. */
.bookstore-btn-brass {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--qk-brass); color: #3A2A0E;
    font-weight: 600; font-size: 14.5px; padding: 13px 24px;
    border-radius: 3px; text-decoration: none; border: none; cursor: pointer;
    transition: filter var(--bookstore-transition), transform var(--bookstore-transition);
}
.bookstore-btn-brass:hover { filter: brightness(1.06); transform: translateY(-1px); }

.bookstore-whatsapp-stamp {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--qk-brass); color: var(--qk-brass);
    font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 2px;
    text-decoration: none; transition: background var(--bookstore-transition);
}
.bookstore-whatsapp-stamp:hover { background: rgba(184,134,59,0.12); }

/* ---------- Shop grid ---------- */
.bookstore-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.bookstore-book-card {
    border: 1px solid #eee;
    border-radius: var(--bookstore-radius, 6px);
    padding: 14px;
    text-align: center;
    background: #fff;
    transition: box-shadow var(--bookstore-transition-slow), transform var(--bookstore-transition-slow);
    display: flex;
    flex-direction: column;
}
.bookstore-book-card:hover { box-shadow: var(--bookstore-shadow-md); transform: translateY(-3px); }
.bookstore-book-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 8px; }
.bookstore-book-card h3 { font-size: 15px; margin: 6px 0; color: inherit; }
.bookstore-price { font-weight: 700; color: var(--bookstore-primary, #1F6F3E); margin: 4px 0 10px; }
.bookstore-book-card .bookstore-btn { margin-top: auto; width: 100%; }

/* ---------- Institution browse ---------- */
.bookstore-search-row input {
    width: 100%; padding: 14px 16px; font-size: 16px;
    border: 1px solid #ddd; border-radius: var(--bookstore-radius, 6px);
    transition: border-color var(--bookstore-transition), box-shadow var(--bookstore-transition);
}
.bookstore-search-row input:focus { outline: none; border-color: var(--bookstore-primary, #1F6F3E); box-shadow: 0 0 0 3px rgba(31,111,62,0.12); }
.bookstore-filter-row { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.bookstore-filter-row select {
    flex: 1; min-width: 140px; padding: 10px 12px;
    border: 1px solid #ddd; border-radius: var(--bookstore-radius, 6px); font-size: 14px;
}
.bookstore-institution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 20px;
}
.bookstore-institution-logo {
    border: 1px solid #eee; border-radius: var(--bookstore-radius, 6px);
    padding: 18px 12px; text-align: center; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #fff;
    transition: box-shadow var(--bookstore-transition-slow), transform var(--bookstore-transition-slow), border-color var(--bookstore-transition);
}
.bookstore-institution-logo:hover {
    box-shadow: var(--bookstore-shadow-md); transform: translateY(-3px);
    border-color: var(--bookstore-primary, #1F6F3E);
}
.bookstore-institution-logo img { max-width: 100%; height: auto; }
.bookstore-institution-logo span { font-size: 13px; font-weight: 600; }

/* ---------- Bundle cards ---------- */
.bookstore-bundle-card {
    border: 1px solid #eee; border-radius: var(--bookstore-radius, 6px);
    padding: 20px; margin-bottom: 16px; background: #fff;
    transition: box-shadow var(--bookstore-transition-slow);
}
.bookstore-bundle-card:hover { box-shadow: var(--bookstore-shadow-md); }
.bookstore-bundle-card h3 { margin: 0 0 6px; font-size: 17px; }
.bookstore-bundle-includes { color: #666; font-size: 14px; margin: 0 0 4px; }
.bookstore-bundle-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bookstore-bundle-actions .bookstore-btn { flex: 1; min-width: 140px; }
.bookstore-booklist {
    display: none; margin-top: 16px; border-top: 1px solid #f0f0f0; padding-top: 12px;
    animation: bookstore-fade-in var(--bookstore-transition-slow);
}
.bookstore-booklist.open { display: block; }
.bookstore-booklist-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 4px; border-bottom: 1px solid #f7f7f7; font-size: 14px; gap: 10px;
}
.bookstore-booklist-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.bookstore-booklist-price { color: var(--bookstore-primary, #1F6F3E); font-weight: 600; margin-left: auto; }

@keyframes bookstore-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Footer ---------- */
.bookstore-footer {
    background: var(--bookstore-footer-bg, #1a1a1a);
    color: var(--bookstore-footer-text, #f5f5f5);
    margin-top: 40px;
}
.bookstore-footer-top {
    max-width: 1280px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 32px;
    padding: 48px 16px 32px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(250,246,236,0.14);
}
.bookstore-footer-brand { flex: 1 1 240px; max-width: 280px; }
.bookstore-footer-brand p { font-size: 13.5px; color: rgba(250,246,236,0.62); line-height: 1.7; margin: 14px 0 0; }
.bookstore-footer-nav { display: flex; gap: 40px; flex-wrap: wrap; flex: 2 1 320px; }
.bookstore-footer-col { flex: 1 1 140px; }
.bookstore-footer-col h4 {
    margin: 0 0 14px; font-family: var(--qk-font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--qk-brass); font-weight: 500;
}
.bookstore-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bookstore-footer-col ul li { margin-bottom: 8px; }
.bookstore-footer-col ul li a { color: inherit; text-decoration: none; opacity: 0.8; font-size: 13.5px; transition: opacity var(--bookstore-transition); }
.bookstore-footer-col ul li a:hover { opacity: 1; text-decoration: underline; }
.bookstore-footer-bottom {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 18px 16px; font-size: 12px; opacity: 0.65;
}

/* ==========================================================================
   Tablet (≥ 481px and < 1024px): 2–3 col grids, drawer nav still used
   below 1024px since a full inline nav is cramped on most tablets.
   ========================================================================== */
@media (min-width: 481px) {
    .bookstore-shop-grid { grid-template-columns: repeat(3, 1fr); }
    .bookstore-institution-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .bookstore-shop-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .bookstore-institution-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .bookstore-header-inner { padding: 14px 24px; }
    .bookstore-global-search input { width: 240px; }
}

/* ==========================================================================
   Desktop (≥ 1024px): full inline nav replaces the drawer.
   ========================================================================== */
@media (min-width: 1024px) {
    .bookstore-shop-grid { grid-template-columns: repeat(5, 1fr); }
    .bookstore-institution-grid { grid-template-columns: repeat(5, 1fr); }

    .bookstore-mobile-toggle,
    .bookstore-mobile-close,
    .bookstore-nav-drawer-header,
    .bookstore-nav-drawer-footer,
    .bookstore-cart-link-mobile,
    .bookstore-nav-overlay { display: none !important; }

    .bookstore-submenu-toggle { display: none; }
}

/* ==========================================================================
   Below 1024px: hamburger + slide-in drawer nav (covers phones + tablets).
   ========================================================================== */
@media (max-width: 1023.98px) {
    .bookstore-header-inner { justify-content: space-between; }
    .bookstore-mobile-toggle { display: flex; }
    .bookstore-header-actions > .bookstore-global-search,
    .bookstore-header-actions > .bookstore-lang-switch,
    .bookstore-header-actions > .bookstore-icon-link { display: none; }
    .bookstore-header-actions { gap: 0; }
    .bookstore-cart-link-mobile { display: inline-flex; }

    .bookstore-nav-wrap {
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(320px, 86vw);
        background: #fff;
        box-shadow: var(--bookstore-shadow-lg);
        z-index: 210;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        transition: transform var(--bookstore-transition-slow);
    }
    /* LTR: drawer slides from the left. RTL (Urdu): slides from the right. */
    .bookstore-header:not(.bookstore-rtl) .bookstore-nav-wrap { left: 0; transform: translateX(-100%); }
    .bookstore-header.bookstore-rtl .bookstore-nav-wrap { right: 0; transform: translateX(100%); }
    .bookstore-nav-wrap.open { transform: translateX(0); }

    .bookstore-nav-drawer-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px; border-bottom: 1px solid #eee;
    }
    .bookstore-drawer-logo { display: block; }

    .bookstore-nav { padding: 8px 0; flex: 1; }
    .bookstore-nav > ul { flex-direction: column; align-items: stretch; gap: 0 !important; }
    .bookstore-nav > ul > li { border-bottom: 1px solid #f4f4f4; }
    .bookstore-nav-item-row { justify-content: space-between; padding: 4px 16px; }
    .bookstore-nav > ul > li > .bookstore-nav-item-row > a { padding: 12px 0; font-size: 16px; width: 100%; }
    .bookstore-nav > ul > li > .bookstore-nav-item-row > a::after { display: none; }
    .bookstore-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .has-children.open > .bookstore-nav-item-row .bookstore-caret { transform: rotate(225deg); }

    .bookstore-submenu {
        display: none;
        position: static; box-shadow: none; opacity: 1; transform: none;
        background: #fafafa; border-radius: 0; padding: 0; margin: 0;
    }
    .has-children.open > .bookstore-submenu { display: block; }
    .bookstore-submenu li a { padding: 12px 32px; font-size: 15px; }

    .bookstore-nav-drawer-footer {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px; border-top: 1px solid #eee; margin-top: auto;
    }

    .bookstore-footer-top { flex-direction: column; gap: 28px; }
    .bookstore-footer-nav { gap: 28px; width: 100%; }
}

/* Small phones: tighten spacing further */
@media (max-width: 380px) {
    .bookstore-header-inner { padding: 10px 12px; }
    .bookstore-shop-grid, .bookstore-institution-grid { gap: 10px; }
    .bookstore-book-card, .bookstore-institution-logo { padding: 10px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Single book buy box (auto-injected on single Book pages) */
.bookstore-single-buy-box { margin-top: 20px; padding: 16px; border: 1px solid #eee; border-radius: var(--bookstore-radius, 6px); max-width: 320px; }
.bookstore-single-price { font-size: 20px; }
.bookstore-single-buy-row { display: flex; gap: 10px; align-items: center; }
.bookstore-qty-input { width: 70px; padding: 8px; border: 1px solid #ccc; border-radius: var(--bookstore-radius, 6px); }
.bookstore-out-of-stock { color: #a32d2d; font-weight: 600; }

/* Print & Copy Services order form */
.bookstore-print-order { max-width: 420px; border: 1px solid #eee; border-radius: var(--bookstore-radius, 6px); padding: 20px; }
.bookstore-print-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.bookstore-print-field label { font-size: 13px; font-weight: 600; color: #444; }
.bookstore-print-field input, .bookstore-print-field select { padding: 9px 10px; border: 1px solid #ccc; border-radius: var(--bookstore-radius, 6px); font-size: 14px; }
.bookstore-print-estimate { display: flex; justify-content: space-between; font-weight: 700; padding: 10px 0; border-top: 1px solid #eee; margin-bottom: 14px; }
.bookstore-print-estimate-value { color: var(--bookstore-primary, #1F6F3E); }
.bookstore-add-print-to-cart { width: 100%; }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.bookstore-home-section { padding: 40px 16px; }
.bookstore-home-inner { max-width: 1200px; margin: 0 auto; }
.bookstore-home-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.bookstore-home-subtitle { font-size: 15px; color: #666; line-height: 1.6; margin: 0 0 16px; max-width: 480px; }
.bookstore-home-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.bookstore-home-view-all { color: var(--bookstore-primary, #1F6F3E); text-decoration: none; font-weight: 600; font-size: 14px; }
.bookstore-home-view-all:hover { text-decoration: underline; }

/* Shop category tiles, styled as a shelf of alternating spines rather
   than plain white cards. Colors cycle through the palette by position. */
.bookstore-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; align-items: end; }
.bookstore-category-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; text-decoration: none;
    border-radius: 3px 3px 0 0; padding: 24px 12px 20px;
    background: var(--qk-ink); color: var(--qk-parchment);
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 2px 4px 10px rgba(22,51,43,0.16);
}
.bookstore-category-tile::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--qk-brass); border-radius: 3px 3px 0 0;
}
.bookstore-category-tile:nth-child(2), .bookstore-category-tile:nth-child(4) { background: #2A4E43; }
.bookstore-category-tile:nth-child(6) { background: #5B4426; }
.bookstore-category-tile:hover { transform: translateY(-6px); box-shadow: 4px 12px 18px rgba(22,51,43,0.24); }
.bookstore-category-tile .dashicons { font-size: 26px; width: 26px; height: 26px; color: var(--qk-brass); }
.bookstore-category-tile span:last-child { font-size: 13px; font-weight: 500; line-height: 1.3; }

/* Promo band (School & College Books) */
.bookstore-home-promo-accent { background: rgba(31,111,62,0.06); border-radius: 12px; }
.bookstore-home-promo-inner { text-align: center; padding: 20px 0; }
.bookstore-home-promo-text { max-width: 560px; margin: 0 auto; }
.bookstore-home-promo-text .bookstore-home-subtitle { margin-left: auto; margin-right: auto; }
.bookstore-home-promo-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Three-up service promo cards */
.bookstore-promo-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bookstore-promo-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid #eee; border-radius: var(--bookstore-radius, 6px);
    padding: 24px; background: #fff;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bookstore-promo-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-3px); }
.bookstore-promo-card .dashicons { font-size: 30px; width: 30px; height: 30px; color: var(--bookstore-primary, #1F6F3E); margin-bottom: 10px; }
.bookstore-promo-card h3 { margin: 0 0 6px; font-size: 17px; }
.bookstore-promo-card p { margin: 0; font-size: 14px; color: #666; line-height: 1.5; }

/* Contact banner */
.bookstore-home-contact-banner { background: var(--bookstore-footer-bg, #1a1a1a); color: var(--bookstore-footer-text, #f5f5f5); border-radius: 12px; }
.bookstore-home-contact-banner .bookstore-home-subtitle { color: rgba(245,245,245,0.75); }
.bookstore-home-contact-inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding: 32px 24px; }
.bookstore-home-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (min-width: 600px) {
    .bookstore-category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .bookstore-home-section { padding: 56px 24px; }
    .bookstore-category-grid { grid-template-columns: repeat(6, 1fr); }
    .bookstore-promo-card-grid { grid-template-columns: repeat(3, 1fr); }
    .bookstore-home-contact-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Hero: the "call slip" panel + book-shelf illustration.
   ========================================================================== */
.bookstore-hero { padding: 48px 16px 56px; background: var(--qk-parchment); }
.bookstore-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }

.bookstore-call-slip {
    background: #fff; border: 1px solid var(--qk-line); border-left: 3px dashed var(--qk-brass);
    border-radius: 2px; padding: 32px 24px; position: relative;
}
.bookstore-call-slip::before,
.bookstore-call-slip::after {
    content: ''; position: absolute; left: -9px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--qk-parchment); border: 1px solid var(--qk-line);
}
.bookstore-call-slip::before { top: 24px; }
.bookstore-call-slip::after { bottom: 24px; }
.bookstore-slip-no { font-family: var(--qk-font-mono); font-size: 11.5px; color: var(--qk-muted); margin-bottom: 16px; }
.bookstore-hero-title { font-weight: 600; font-size: 34px; line-height: 1.14; margin: 0 0 16px; color: var(--qk-ink); letter-spacing: -0.01em; }
.bookstore-hero-title em { font-style: italic; color: var(--qk-cardinal); font-weight: 500; }
.bookstore-hero-sub { font-size: 15px; color: var(--qk-muted); line-height: 1.65; max-width: 440px; margin: 0 0 26px; }
.bookstore-hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 26px; }
.bookstore-hero-secondary-link { font-size: 14px; font-weight: 500; color: var(--qk-ink); text-decoration: none; border-bottom: 1px solid var(--qk-ink); padding-bottom: 2px; }

.bookstore-chip-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.bookstore-chip-label { font-family: var(--qk-font-mono); font-size: 11px; color: var(--qk-muted); margin-right: 4px; }
.bookstore-chip {
    font-size: 12.5px; font-weight: 500; padding: 7px 13px; border: 1px solid var(--qk-line);
    border-radius: 16px; color: var(--qk-charcoal); background: var(--qk-parchment-2);
    text-decoration: none; transition: background var(--bookstore-transition);
}
.bookstore-chip:hover { background: var(--qk-line); }
.bookstore-chip-more { color: var(--qk-muted); background: transparent; border-style: dashed; }

/* Shelf illustration */
.bookstore-shelf-art { position: relative; height: 360px; display: none; }
.bookstore-shelf-board {
    position: absolute; bottom: 56px; left: -14px; right: -14px; height: 14px; background: var(--qk-ink);
    border-radius: 1px; box-shadow: 0 10px 18px rgba(22,51,43,0.22);
}
.bookstore-shelf-board::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(250,246,236,0.05) 0 2px, transparent 2px 26px);
}
.bookstore-spines { position: absolute; bottom: 70px; left: 6%; right: 6%; display: flex; align-items: flex-end; justify-content: center; gap: 7px; }
.bookstore-spine {
    border-radius: 2px 3px 0 0; position: relative; flex: 0 0 auto; display: block;
    box-shadow: 2px 4px 10px rgba(22,51,43,0.18), inset -3px 0 0 rgba(0,0,0,0.14), inset 2px 0 0 rgba(255,255,255,0.10);
    cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; text-decoration: none;
}
.bookstore-spine:hover { transform: translateY(-10px); box-shadow: 4px 14px 20px rgba(22,51,43,0.28); }
.bookstore-spine-lean { transform: rotate(-6deg); transform-origin: bottom left; margin: 0 2px 0 6px; }
.bookstore-spine-lean:hover { transform: rotate(-6deg) translateY(-10px); }
.bookstore-spine::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--qk-brass); opacity: 0.85; border-radius: 2px 3px 0 0; }
.bookstore-spine::after { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: rgba(250,246,236,0.35); }
.bookstore-spine-band { position: absolute; left: 3px; right: 3px; height: 2px; background: rgba(184,134,59,0.55); }
.bookstore-spine-band.b1 { top: 34px; }
.bookstore-spine-band.b2 { bottom: 22px; }
.bookstore-spine-ring { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(184,134,59,0.65); }
.bookstore-spine-tt {
    position: absolute; top: 38px; left: 50%; transform: translateX(-50%) rotate(90deg); transform-origin: center;
    font-family: var(--qk-font-mono); font-size: 9.5px; letter-spacing: 0.05em; white-space: nowrap;
}
.bookstore-stamp {
    position: absolute; top: 10px; right: 2%; background: #fff; border: 1px solid var(--qk-line);
    padding: 12px 14px; border-radius: 2px; transform: rotate(3deg); box-shadow: 0 10px 24px rgba(22,51,43,0.09); z-index: 2;
}
.bookstore-stamp-k { font-family: var(--qk-font-mono); font-size: 10px; color: var(--qk-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.bookstore-stamp-v { font-family: var(--qk-font-display); font-size: 16px; color: var(--qk-cardinal); font-weight: 600; margin-top: 2px; }

@media (min-width: 900px) {
    .bookstore-hero-inner { grid-template-columns: 1.05fr 0.95fr; }
    .bookstore-shelf-art { display: block; }
    .bookstore-hero-title { font-size: 42px; }
    .bookstore-call-slip { padding: 38px 38px 34px; }
}

.bookstore-rtl .bookstore-call-slip { border-left: none; border-right: 3px dashed var(--qk-brass); }
.bookstore-rtl .bookstore-call-slip::before, .bookstore-rtl .bookstore-call-slip::after { left: auto; right: -9px; }
.bookstore-rtl .bookstore-hero-sub { font-family: var(--bookstore-font-ur, inherit); }