/* CSS Variables */
:root {
    --color-primary: #2d5f4a;
    --color-primary-dark: #1e3f32;
    --color-primary-light: #e8f0ec;
    --color-secondary: #faf7f2;
    --color-accent: #b45309;
    --color-accent-light: #fef3e2;
    --color-rust: #b7410e;
    --color-text: #2c2c2c;
    --color-text-light: #6b6b6b;
    --color-text-muted: #9a9a9a;
    --color-border: #e5e0d8;
    --color-border-light: #f0ece6;
    --color-success: #2d7a4f;
    --color-warning: #d4a017;
    --color-error: #c0392b;
    --color-white: #fff;
    --color-cream: #fdfcf9;
    /* Shared background for "feature" panels (themed collection, newsletter) so they always match */
    --color-panel-kraft: #e3d3bc;
    --color-panel-kraft-label: #8f4516;
    --color-panel-kraft-text: #54483a;
    /* Themed collection background presets — see .themed-collection--* below. Parchment, Sage and
       Festive green reuse existing brand vars (--color-secondary, --color-primary-dark) so palettes
       stay in sync; the rest are dedicated to this panel. All pairings are checked for WCAG AA. */
    --color-panel-sage: #f0f5ec;
    --color-panel-berry: #4a1524;
    --color-panel-berry-label: #d4af6a;
    --color-panel-midnight: #16283f;
    --color-panel-light-orange: #f0a860;
    /* Maker/products-app palette */
    --maker-green: #2A4B3C;
    --maker-text-muted: #5E5A52;
    --maker-text-faint: #8A857A;
    --maker-select-border: #C9C3B4;
    --maker-cream: #FAF6EF;
    --max-width: 1200px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2rem;

    /* Status colours */
    --status-pending-bg: #fef3e2;
    --status-pending-text: #92710c;
    --status-paid-bg: #ecf7f0;
    --status-paid-text: #1a5c35;
    --status-shipped-bg: #edf5f8;
    --status-shipped-text: #0e6e8c;
    --status-completed-bg: var(--color-primary-light);
    --status-completed-text: var(--color-primary);
    --status-cancelled-bg: #fdf0ee;
    --status-cancelled-text: #8b2019;

    /* Feedback colours */
    --feedback-success-bg: #e8f5e9;
    --feedback-success-text: #2e7d32;
    --feedback-error-bg: #ffebee;
    --feedback-error-text: #c62828;
    --feedback-info-bg: #e3f2fd;
    --feedback-info-text: #1565c0;
    --feedback-warning-bg: #fff3e0;
    --feedback-warning-text: #e65100;
    --badge-staff-bg: #f3e5f5;
    --badge-staff-text: #6a1b9a;

    /* Accent/error hover states */
    --color-accent-dark: #9a4508;
    --color-error-dark: #a93226;
    --color-danger: var(--color-error);

    /* Focus */
    --focus-ring-shadow: 0 0 0 3px rgba(45, 95, 74, 0.15);
}

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

/* Base */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Header */
.site-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-primary-dark);
}

.header {
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding: var(--spacing-md) 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
}

.logo-block {
    display: flex;
    flex-direction: column;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.logo-img {
    max-height: 40px;
    width: auto;
    display: block;
}

.search-form {
    display: flex;
    flex: 1;
    max-width: 420px;
}

.search-input {
    flex: 1;
    padding: 0.6rem var(--spacing-md);
    border: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-input:focus {
    outline: none;
    background: var(--color-white);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.search-btn {
    padding: 0.6rem var(--spacing-lg);
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color 0.2s;
}

.search-btn:hover {
    background: var(--color-accent-dark);
}

/* Mobile-only header controls (hidden on desktop). .cart-link--mobile also carries
   the shared .cart-link class for its pill styling, so this needs to out-specificity
   that base rule's `display: inline-flex` — hence the doubled-up selector. */
.search-toggle,
.search-close,
.cart-link--mobile.cart-link--mobile {
    display: none;
}

/* Search typeahead dropdown */

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.1s;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: var(--color-primary-light);
}

.search-suggestion-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.search-suggestion-thumb-placeholder {
    display: block;
    background: var(--color-border);
}

.search-suggestion-text {
    flex: 1;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-type {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* Pushes the nav (and cart) flush to the container's right edge regardless of how much
       free space is left after the search form grows to its max-width — without this, a flex
       row with no justify-content packs everything to the start, leaving a gap after the cart
       instead of the row spanning the full content width like the hero/sections below it. */
    margin-left: auto;
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9375rem;
    font-weight: 400;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--color-white);
    text-decoration: none;
}

.nav-link-admin {
    font-size: 0.8125rem;
    opacity: 0.6;
}

.nav-link-admin:hover {
    opacity: 1;
}

.admin-edit-link {
    font-size: 0.75rem;
    opacity: 0.35;
    color: var(--color-text-light);
    margin-left: 0.35rem;
    vertical-align: middle;
}

.admin-edit-link:hover {
    opacity: 0.8;
}

.staff-sku {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    opacity: 0.5;
    font-family: monospace;
    letter-spacing: 0.03em;
}

/* Nav dropdown (Explore menu) */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    cursor: pointer;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    list-style: none;
    min-width: 200px;
    z-index: 100;
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xs) 0;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 400;
    transition: background-color 0.2s, color 0.2s;
}

.nav-dropdown-menu a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Hamburger Toggle (hidden on desktop) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 20;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
}

.nav-toggle-icon::before {
    top: -7px;
}

.nav-toggle-icon::after {
    top: 7px;
}

.nav-toggle.active .nav-toggle-icon {
    background: transparent;
}

.nav-toggle.active .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle.active .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Nav dropdown chevron */
.nav-chevron {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-accent);
    border-radius: var(--border-radius);
    padding: 0.4rem var(--spacing-md);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color 0.2s;
}

.cart-link:hover {
    background: var(--color-accent-dark);
}

.cart-link svg {
    flex-shrink: 0;
}

/* Mobile Categories (inside hamburger menu) */
.mobile-categories {
    display: none;
}

/* Category Nav */
.category-nav {
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-sm) 0;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    /* Each link has its own padding-left (for a comfortable click target), which otherwise
       indents the first item's visible text past the container edge — pull the whole list
       back by that same amount so the text itself lines up with the logo and hero text above. */
    margin-left: calc(-1 * var(--spacing-md));
}

.category-list > li {
    position: relative;
}

.category-list a {
    color: var(--color-text-light);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s;
}

.category-list > li > a:hover {
    color: var(--color-primary);
}

.subcategory-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    list-style: none;
    min-width: 260px;
    z-index: 100;
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xs) 0;
}

.category-list > li:hover .subcategory-list {
    display: block;
}

.subcategory-list a {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
}

.subcategory-list a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Main */
.main {
    flex: 1;
    padding: var(--spacing-2xl) 0;
}

/* Messages */
.messages {
    margin-bottom: var(--spacing-lg);
}

.maintenance-banner {
    background: var(--feedback-warning-bg);
    color: var(--feedback-warning-text);
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.production-banner {
    background: var(--color-error);
    color: var(--color-white);
    text-align: center;
    padding: var(--spacing-xs) 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dev-banner {
    background: #2980b9;
    color: var(--color-white);
    text-align: center;
    padding: var(--spacing-xs) 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.message {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9375rem;
    border-left: 4px solid transparent;
}

.message-success {
    background: #ecf7f0;
    color: #1a5c35;
    border-left-color: var(--color-success);
}

.message-warning {
    background: #fdf8ec;
    color: #7a6112;
    border-left-color: var(--color-warning);
}

.message-error {
    background: #fdf0ee;
    color: #8b2019;
    border-left-color: var(--color-error);
}

.message-info {
    background: #edf5f8;
    color: #0c5460;
    border-left-color: #2d8fba;
}

.message-action {
    float: right;
    background: var(--color-success);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    margin-left: var(--spacing-md);
}

.message-action:hover {
    background: #1e3f32;
    color: #fff;
}

@media (max-width: 768px) {
    .message-action {
        float: none;
        display: block;
        text-align: center;
        width: fit-content;
        margin: var(--spacing-sm) auto 0;
    }
}

/* Sold notice */
.sold-notice {
    background: #fdf8ec;
    border-left: 4px solid var(--color-error);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.sold-notice h2 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.125rem;
    color: #7a6112;
}

.sold-notice p {
    margin: 0;
    color: #7a6112;
    font-size: 0.9375rem;
}

.sold-notice a {
    color: #7a6112;
    font-weight: 600;
    text-decoration: underline;
}

.offsite-notice {
    background: var(--color-primary-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md) var(--spacing-lg);
}

.offsite-notice p {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 0.9375rem;
}

/* Bar shown at the top of a book page reached via /surprise/ (?surprise=1).
   Full width, matching the page content column; contents centred inside it. */
.try-another-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-panel-kraft);
    border-radius: var(--border-radius);
    padding: 0.875rem 1.5rem;
    margin-bottom: var(--spacing-lg);
}

.try-another-text {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--color-primary-dark);
}

/* Genre pills + "Change it", grouped so they wrap together as a unit under the text. */
.try-another-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Pill shape matches .homepage-chip (Quick Finds) for visual consistency; solid
   orange (site's standard accent) with white text — contrast checked at ~5:1
   normal and ~6.5:1 hover/focus, both comfortably above the 4.5:1 AA minimum. */
.try-another-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.try-another-pill:hover,
.try-another-pill:focus-visible {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    text-decoration: none;
}

.try-another-icon {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .try-another-bar {
        padding: 0.75rem 1rem;
    }
}

/* Book Grid */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.book-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.book-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.book-card-image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-border-light);
}

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

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

.book-card-body {
    padding: var(--spacing-md) var(--spacing-lg);
}

.book-card-title {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card-title a {
    color: var(--color-text);
    text-decoration: none;
}

.book-card-title a:hover {
    color: var(--color-primary);
}

.book-card-author {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

.book-card-author a {
    color: var(--maker-green);
    text-decoration: none;
}

.book-card-author a:hover {
    text-decoration: underline;
}

.book-card-meta-sep {
    color: var(--color-text-light);
    font-style: normal;
}

.book-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.book-card-condition {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem var(--spacing-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
}

.book-card-format {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem var(--spacing-sm);
    background: var(--color-secondary);
    color: var(--color-text-light);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
}

.book-card-attribute {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
}

.book-card-attribute--positive {
    background: var(--feedback-success-bg);
    color: var(--feedback-success-text);
}

.book-card-attribute--negative {
    background: #f5f5f5;
    color: #757575;
}

.book-card-attribute--promo-green  { background: var(--feedback-success-bg); color: var(--feedback-success-text); }
.book-card-attribute--promo-orange { background: var(--feedback-warning-bg); color: var(--feedback-warning-text); }
.book-card-attribute--promo-blue   { background: var(--feedback-info-bg);    color: var(--feedback-info-text); }
.book-card-attribute--promo-red    { background: var(--feedback-error-bg);   color: var(--feedback-error-text); }

.book-card-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
}

.book-card-badge--offsite {
    background: var(--feedback-warning-bg);
    color: var(--feedback-warning-text);
}

.book-card-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-xs) 0;
}

.book-card-notes {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin: var(--spacing-xs) 0 var(--spacing-sm) 0;
    line-height: 1.5;
}

.book-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.book-card-price .original-price {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 1rem;
}

.book-card-footer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    margin-top: auto;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.6rem var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s, transform 0.1s;
    letter-spacing: 0.01em;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-border-light);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.btn-disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

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

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-outline:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.btn-outline:disabled:hover {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-white);
}

.btn-success:hover {
    background: #236840;
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-accent:hover {
    background: var(--color-accent-dark);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.875rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* AJAX cart button loading spinner */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.5s linear infinite;
}

.btn-primary.btn-loading::after {
    border-color: rgba(255, 255, 255, 0.4);
    border-right-color: transparent;
}

.btn-secondary.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.25);
    border-right-color: transparent;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Title Hero (Book Title Page) */
.title-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-2xl);
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-2xl);
}

.title-hero-image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--border-radius);
    background: var(--color-border-light);
}

.title-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title-hero-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.title-hero-info .book-title {
    font-size: 2rem;
    margin-bottom: 0;
}

.title-hero-info .book-author {
    margin-bottom: var(--spacing-sm);
}

.title-hero-info .book-description {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-md);
}

.title-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.category-tag {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-secondary);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.category-tag:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

.title-hero-pricing {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-lg);
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.title-from-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.title-copy-count {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .title-hero {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
    }

    .title-hero-image {
        max-width: 220px;
        margin: 0 auto;
    }

    .title-hero-info .book-title {
        font-size: 1.5rem;
    }
}

/* Book Detail */
.book-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
}

.book-images {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.book-main-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--border-radius);
    background: var(--color-border-light);
    cursor: zoom-in;
}

.book-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-thumbnails {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
}

.book-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--color-border-light);
    transition: border-color 0.2s;
}

.book-thumbnail:hover,
.book-thumbnail.active {
    border-color: var(--color-primary);
}

.book-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.book-title {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-xs);
}

.book-author {
    font-size: 1.125rem;
    color: var(--color-text-light);
    font-style: italic;
}

.book-author a {
    color: var(--color-primary);
    text-decoration: none;
}

.book-author a:hover {
    text-decoration: underline;
}

.book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--color-text-light);
    padding: var(--spacing-md);
    background: var(--color-secondary);
    border-radius: var(--border-radius);
}

.book-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
}

.book-price .notes {
    font-size: 1rem;
    color: var(--color-text);
}

.book-price .original-price {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 1.25rem;
}

.book-condition {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--border-radius);
    font-weight: 500;
}

.book-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.book-attribute {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-weight: 500;
}

.book-attribute--positive {
    background: var(--feedback-success-bg);
    color: var(--feedback-success-text);
}

.book-attribute--negative {
    background: #f5f5f5;
    color: #757575;
}

.book-attribute--promo-green  { background: var(--feedback-success-bg); color: var(--feedback-success-text); }
.book-attribute--promo-orange { background: var(--feedback-warning-bg); color: var(--feedback-warning-text); }
.book-attribute--promo-blue   { background: var(--feedback-info-bg);    color: var(--feedback-info-text); }
.book-attribute--promo-red    { background: var(--feedback-error-bg);   color: var(--feedback-error-text); }

.book-description {
    line-height: 1.8;
    color: var(--color-text-light);
}

.book-description p {
    margin-bottom: var(--spacing-md);
}

.book-notes {
    background: var(--color-accent-light);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-style: italic;
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-light);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
}

.form-input {
    width: 100%;
    padding: 0.6rem var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    line-height: 1.4;
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-shadow);
}

/* <select class="form-input"> (e.g. the contact form's "What's it about?") inherits the box
   model above, but needs its native appearance (arrow, sizing) reset to actually match the
   text inputs' height/padding rather than just approximate it. */
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%232A4B3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: 12px 12px;
    cursor: pointer;
}

.form-error {
    color: var(--color-error);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
}

/* Cart */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.cart-table th,
.cart-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.cart-table th {
    background: var(--color-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.cart-item-image {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.cart-item-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
}

.cart-item-condition {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.cart-item-unavailable {
    opacity: 0.7;
}

.cart-item-flag {
    font-size: 0.8125rem;
    color: var(--color-error);
    font-weight: 600;
    margin-top: 0.25rem;
}

.cart-summary {
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
}

.cart-total {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
}

.cart-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-coupon {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
}

.cart-coupon-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-coupon-savings {
    color: var(--color-success);
    margin-left: var(--spacing-sm);
}

.cart-coupon-form {
    display: flex;
    gap: var(--spacing-sm);
}

.cart-coupon-input {
    flex: 1;
    padding: 0.6rem var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cart-coupon-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-shadow);
}

.cart-coupon-error {
    color: var(--color-error);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

.cart-totals {
    margin-bottom: var(--spacing-md);
}

.cart-totals-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.cart-totals-row--strike {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.cart-totals-row--savings {
    color: var(--color-success);
}

.cart-totals-final {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: bold;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.cart-actions {
    display: flex;
    gap: 1rem;
}

.cart-suggestions {
    margin-top: var(--spacing-2xl);
}

/* Checkout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
}

.checkout-form {
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
}

.checkout-summary {
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
    height: fit-content;
    position: sticky;
    top: var(--spacing-lg);
}

/* Free Shipping Callout — dark green fill sweeps across the box as the cart
   subtotal rises. The cream text is a child of the fill element itself (not
   a second independently-clipped layer), sized to its own natural (unclipped)
   width and positioned to line up exactly with the dark base text underneath;
   the fill's own `overflow: hidden` is what clips it. That way there is only
   ever one width to set — see assets/js/main.js:updateShippingProgress —
   and the text/colour boundary cannot drift from the fill edge on any code
   path. `.shipping-fill--animated` (added once by JS shortly after page
   load) is what gates the transition, so the bar never animates in on the
   initial server-rendered page load — only on live updates. */
.shipping-free-cta {
    position: relative;
    margin-top: var(--spacing-sm);
    background: var(--feedback-success-bg);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-success);
    overflow: hidden;
}

.shipping-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--color-primary-dark);
}

.shipping-fill--animated {
    transition: width 0.4s ease;
}

.shipping-msg {
    padding: 0.625rem 1rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shipping-msg strong {
    font-weight: 600;
}

.shipping-msg--base {
    color: var(--color-primary-dark);
}

.shipping-msg--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    color: var(--color-secondary);
}

.shipping-msg-short {
    display: none;
}

@media (max-width: 768px) {
    /* Fluid between the 320px floor and 430px, where both values land back on
       the desktop padding/font-size (0.625rem / var(--font-size-sm), i.e.
       0.8125rem) — so anything from 430px up to the 768px boundary reads the
       same as desktop, and only phones genuinely short on width shrink. */
    .shipping-msg {
        padding: clamp(0.5rem, 0.1364rem + 1.8182vw, 0.625rem) 0.75rem;
        font-size: clamp(0.625rem, 0.0795rem + 2.7273vw, 0.8125rem);
    }
}

/* Plain usage elsewhere (product/copy detail pages, checkout) — just the box and a
   single text line, no fill/animation. Targets a bare <span> child so it never
   collides with the cart page's .shipping-msg layers above. */
.shipping-free-cta > span {
    display: block;
    padding: 0.625rem 1rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--feedback-success-text);
}

.shipping-free-cta > span strong {
    font-weight: 600;
}

@media (max-width: 768px) {
    .shipping-free-cta > span {
        padding: 0.5rem 0.75rem;
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .shipping-msg-full {
        display: none;
    }

    .shipping-msg-short {
        display: inline;
    }

    /* Narrower horizontal padding than the 481-768px tier above — vertical
       padding and font-size stay on the fluid clamp() from that rule. */
    .shipping-msg {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-2xl);
}

.pagination a,
.pagination span {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination .current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Filters */
.filters {
    background: var(--color-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: center;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-group label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.filter-group select {
    padding: 0.4rem var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    background: var(--color-white);
    cursor: pointer;
}

/* Restyled select used on the products filter bar — scoped to .filter-select
   so it doesn't affect other pages' .filter-group selects (e.g. artist_detail.html). */
.filter-group select.filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    border: 0.5px solid var(--maker-select-border);
    border-radius: 6px;
    font-size: 13px;
    background-color: var(--maker-cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%232A4B3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 12px 12px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.filter-group select.filter-select::-ms-expand {
    display: none;
}

.filter-group select.filter-select:focus-visible {
    outline: none;
    border-color: var(--maker-green);
    box-shadow: var(--focus-ring-shadow);
}

.filter-group select.filter-select.filter-active {
    border-color: var(--maker-green);
    background-color: var(--color-white);
}

/* Inline link treatment for a maker's name where it links out to her own link field. */
.maker-link {
    color: var(--color-rust);
    font-weight: 500;
    text-decoration: none;
}

.maker-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }

    .filter-group select.filter-select {
        width: 100%;
    }

    .filter-count {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
}

/* Page Header */
/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: var(--spacing-lg);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin: 0 0.5rem;
    color: var(--color-text-muted);
}

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

.breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.page-header {
    margin-bottom: var(--spacing-2xl);
}

.page-title {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
}

.page-subtitle {
    color: var(--color-text-light);
    font-size: 1.0625rem;
}

.category-description {
    font-size: 17px;
    color: var(--maker-text-muted);
    line-height: 1.65;
    max-width: 62ch;
}

/* Products list/category page header: tighter, self-contained spacing so the
   intro (title + description) groups visually and the filter bar/grid follow
   at a deliberate rhythm, now that the item count lives in the filter bar. */
.page-header--tight {
    margin-bottom: var(--spacing-xl);
}

.filters--tight {
    margin-bottom: 22px;
}

.page-title:has(+ .category-description) {
    margin-bottom: 14px;
}

.filter-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--maker-text-faint);
}

.genre-intro {
    max-width: 620px;
    margin: 0 auto var(--spacing-2xl);
    padding: 0 var(--spacing-md);
    text-align: center;
}

/* Split from .genre-intro-tail so the intro paragraph between them can sit
   directly in .container and size itself against the full content width,
   instead of being capped by this 620px block. */
.genre-intro-head {
    margin-bottom: 0;
}

/* Pages using the genre_intro block already get generous spacing from the block
   itself, so trim .main's top padding here to avoid two gaps stacking on top of
   each other between the category nav and the breadcrumb. */
.main:has(.genre-intro) {
    padding-top: var(--spacing-lg);
}

.genre-intro-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-rust);
    margin: 0 0 10px;
}

.genre-intro-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.genre-intro-heading {
    font-size: 34px;
    font-weight: 400;
    color: var(--color-primary-dark);
    margin: 0 0 12px;
}

.genre-intro-divider {
    width: 48px;
    height: 2px;
    margin: 0 auto 20px;
    border: 0;
    background: var(--color-rust);
}

.genre-intro-paragraph {
    max-width: 75%;
    margin: 0 auto;
    text-align: center;
    color: #2A2A26;
    font-size: 16px;
    line-height: 1.75;
}

.genre-intro-paragraph a,
.category-description a {
    color: var(--color-rust);
    font-weight: 500;
    text-decoration: none;
}

.genre-intro-paragraph a:hover,
.category-description a:hover {
    text-decoration: underline;
}

.genre-sibling-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 20px;
}

.genre-sibling-link {
    font-size: 12px;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-rust);
    text-decoration: none;
}

.genre-sibling-link:hover {
    text-decoration: underline;
}

.genre-sibling-icon {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.genre-intro-delivery {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--color-text-muted);
}

.genre-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 8px 18px;
    background: #eaf0e7;
    border: 1px solid #cfdccb;
    border-radius: 20px;
}

.genre-intro-badge-icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary-dark);
    flex-shrink: 0;
}

.genre-intro-badge-text {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-primary-dark);
}

@media (max-width: 768px) {
    .genre-intro-heading {
        font-size: 27px;
    }

    .genre-intro-paragraph {
        max-width: 100%;
    }
}

/* Order */
.order-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.order-body {
    padding: var(--spacing-lg);
}

.order-status {
    display: inline-block;
    padding: 0.2rem var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
}

.order-status-pending {
    background: var(--status-pending-bg);
    color: var(--status-pending-text);
}

.order-status-paid {
    background: var(--status-paid-bg);
    color: var(--status-paid-text);
}

.order-status-shipped {
    background: var(--status-shipped-bg);
    color: var(--status-shipped-text);
}

.order-status-completed {
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.order-status-cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
}

.order-cancellation-reason {
    padding: 0.75rem 1.25rem;
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
    font-size: 0.9rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Success Page */
.success-page {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-2xl);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
}

.success-icon {
    font-size: 4rem;
    color: var(--color-success);
    margin-bottom: var(--spacing-lg);
}

/* Auth Forms */
.auth-form {
    max-width: 420px;
    margin: 0 auto;
    background: var(--color-white);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
}

.auth-form h1 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.auth-links {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: 0.9375rem;
}

.auth-links a {
    color: var(--color-primary);
    font-weight: 500;
}

/* Other Copies */
.other-copies {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

.section-title {
    font-size: 1.375rem;
    margin-bottom: var(--spacing-xl);
    letter-spacing: -0.01em;
}

.section-title a {
    color: inherit;
    text-decoration: none;
}

.section-title a:hover {
    text-decoration: underline;
}

.section-subtitle {
    color: var(--color-text-light);
    margin-top: calc(-1 * var(--spacing-lg));
    margin-bottom: calc(var(--spacing-lg) + var(--spacing-xs));
}

/* Shared homepage section heading: small eyebrow label + smaller/lighter serif heading.
   Mobile: label above heading, left-aligned, "See all" inline on the heading row.
   Desktop: label centred between rules, heading centred beneath, "See all" moves to
   .section-see-all-desktop under the section's content instead (see below). */
.section-heading {
    margin-bottom: var(--spacing-xl);
}

.section-heading-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--spacing-xs);
}

.section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.section-heading-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.section-heading-see-all {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-heading-see-all:hover {
    text-decoration: underline;
}

.section-heading .section-subtitle {
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

.section-see-all-desktop {
    display: none;
}

@media (min-width: 701px) {
    .section-heading {
        text-align: center;
    }

    .section-heading-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
        margin: 0 0 var(--spacing-sm);
    }

    .section-heading-label::before,
    .section-heading-label::after {
        content: "";
        flex: 1 1 auto;
        max-width: 6rem;
        height: 1px;
        background: var(--color-border);
    }

    .section-heading-row {
        justify-content: center;
    }

    .section-heading-title {
        font-size: 1.375rem;
    }

    .section-heading-see-all {
        display: none;
    }

    .section-see-all-desktop {
        display: flex;
        justify-content: center;
        margin-top: var(--spacing-lg);
    }

    .section-see-all-desktop a {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-primary);
        text-decoration: none;
    }

    .section-see-all-desktop a:hover {
        text-decoration: underline;
    }
}

.see-more-btn {
    background: transparent;
    color: var(--color-primary-dark);
    border: 1.5px solid var(--color-primary-dark);
    font-weight: 500;
}

.see-more-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "heading button";
    align-items: center;
    column-gap: var(--spacing-md);
}

.section-heading-group {
    grid-area: heading;
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-bottom: var(--spacing-xl);
}

.section-heading-bar {
    flex: 0 0 4px;
    width: 4px;
    border-radius: 2px;
    background: var(--color-rust);
}

.section-heading-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.section-heading-group .section-title {
    font-size: 28px;
    color: var(--color-primary-dark);
    margin-bottom: 0;
}

.section-heading-group .section-subtitle {
    margin: 0;
}

.section-header .see-more-btn {
    grid-area: button;
    justify-self: end;
    align-self: start;
}

@media (max-width: 768px) {
    .section-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "button";
    }

    .section-header .see-more-btn {
        justify-self: start;
        margin-bottom: var(--spacing-xl);
    }
}

/* Footer: four-column grid (brand, Shop, Help, StrangeBooks) + a bottom bar. See
   templates/base.html — the Shop/Help/StrangeBooks columns come from the admin-editable
   FooterLink model (pages app), grouped by column in pages.context_processors.footer_links. */
.footer {
    background: var(--color-primary-dark);
    padding: var(--spacing-2xl) 0;
    margin-top: auto;
    font-size: 0.9375rem;
}

.footer-sha {
    font-family: monospace;
    font-size: 0.65rem;
    opacity: 0.15;
    margin-top: var(--spacing-sm);
    font-style: normal;
    letter-spacing: 0.05em;
    user-select: all;
    text-align: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--spacing-xl);
    column-gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.footer-col-brand,
.footer-col-strangebooks {
    grid-column: 1 / -1;
}

.footer-col-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
}

.footer-logo-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
}

.footer-logo {
    max-height: 36px;
    width: auto;
    display: block;
}

.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
    max-width: 32ch;
}

.footer-col-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-panel-light-orange);
    margin: 0 0 var(--spacing-md);
}

.footer-col-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-col-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s ease;
}

.footer-col-links a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.75);
}

.footer-bottom a:hover {
    color: var(--color-white);
}

.footer-bottom-copyright,
.footer-bottom-delivery,
.footer-sister-site {
    margin: 0;
}

@media (min-width: 701px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }

    .footer-col-brand,
    .footer-col-strangebooks {
        grid-column: auto;
    }

    .footer-col-brand {
        align-items: flex-start;
        text-align: left;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }

    .footer-bottom-right {
        text-align: right;
    }

    .footer-sha {
        text-align: left;
    }
}

@media (max-width: 700px) {
    .footer-link-desktop-only {
        display: none;
    }
}

/* Page Content */
.page-content {
    background: var(--color-white);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-light);
}

.page-content h1 {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.page-body {
    line-height: 1.8;
}

.page-body h2, .page-body h3, .page-body h4 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.page-body p {
    margin-bottom: var(--spacing-md);
}

.page-body ul, .page-body ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.page-body a {
    color: var(--color-primary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
    color: var(--color-text-light);
}

.empty-state h2 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
}

.empty-state p {
    margin-bottom: var(--spacing-lg);
}

.empty-state a:not(.btn) {
    color: var(--color-primary);
    font-weight: 500;
}

.error-code {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-border);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .header {
        padding: 0.6rem 0;
    }

    .header-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-sm);
        position: relative;
    }

    .logo-block {
        flex: 1;
        min-width: 0;
        order: 1;
    }

    .logo {
        font-size: 1.125rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logo-img {
        max-height: 26px;
    }

    /* Search icon toggles the search bar below the header */
    .search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 2;
        width: 36px;
        height: 36px;
        padding: 0;
        background: none;
        border: none;
        color: var(--color-white);
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Cart icon + count, always visible on mobile */
    .cart-link--mobile.cart-link--mobile {
        display: inline-flex;
        order: 3;
        align-items: center;
        gap: 0.3rem;
        background: none;
        padding: 0;
        flex-shrink: 0;
    }

    .cart-link-count {
        background: var(--color-accent);
        color: var(--color-white);
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.3rem;
    }

    .search-form {
        display: none;
        max-width: none;
        order: 5;
        flex-basis: 100%;
        margin-top: var(--spacing-xs);
        align-items: stretch;
    }

    .search-form.open {
        display: flex;
    }

    .search-close {
        display: block;
        flex-shrink: 0;
        background: none;
        border: none;
        color: var(--color-text-light);
        font-size: 1.5rem;
        line-height: 1;
        padding: 0 0.6rem;
        margin-left: 0.25rem;
        cursor: pointer;
    }

    .search-suggestions {
        left: 0;
        right: 0;
    }

    /* Hamburger visible on mobile */
    .nav-toggle {
        display: block;
        order: 4;
    }

    /* Mobile nav: hidden by default, slides down when open */
    .nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        order: 6;
        flex-basis: 100%;
        padding-top: var(--spacing-sm);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-top: var(--spacing-sm);
        margin-left: 0;
    }

    /* The cart link inside the hamburger menu is redundant with the always-visible one */
    .nav > .cart-link {
        display: none;
    }

    body.menu-open {
        overflow: hidden;
    }

    .nav.open {
        display: flex;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-link {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;
        display: flex;
        align-items: center;
        border-radius: var(--border-radius-sm);
    }

    .nav-link:hover,
    .nav-link:active {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Cart link full width on mobile */
    .cart-link {
        justify-content: center;
        margin-top: var(--spacing-xs);
    }

    /* Nav dropdown on mobile: inline flow, not absolute */
    .nav-dropdown-menu {
        position: static;
        display: none;
        background: rgba(255, 255, 255, 0.08);
        border: none;
        border-radius: var(--border-radius-sm);
        box-shadow: none;
        min-width: 0;
        padding: 0;
        margin-top: var(--spacing-xs);
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    /* Disable hover-based open on mobile */
    .nav-dropdown:hover .nav-dropdown-menu {
        display: none;
    }

    .nav-dropdown.open:hover .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-menu a {
        color: rgba(255, 255, 255, 0.85);
        padding: var(--spacing-sm) var(--spacing-lg);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-white);
    }

    /* Category nav on mobile */
    .category-nav {
        padding: var(--spacing-xs) 0;
    }

    .category-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }

    .category-list::-webkit-scrollbar {
        display: none;
    }

    .category-list > li {
        flex-shrink: 0;
    }

    .category-list a {
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }

    /* Subcategory list on mobile: inline flow */
    .subcategory-list {
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        background: var(--color-secondary);
        border-top: 1px solid var(--color-border-light);
    }

    .subcategory-list.open {
        display: block;
    }

    /* Disable hover-based subcategory open on mobile */
    .category-list > li:hover .subcategory-list {
        display: none;
    }

    .category-list > li:hover .subcategory-list.open {
        display: block;
    }

    .subcategory-list a {
        white-space: nowrap;
    }

    /* Hide standalone category bar on mobile */
    .category-nav {
        display: none;
    }

    /* Show categories inside hamburger menu */
    .mobile-categories {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
    }

    .mobile-categories-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.45);
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .mobile-cat-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.85);
        font-family: var(--font-body);
        font-size: 0.9375rem;
        font-weight: 400;
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;
        cursor: pointer;
        border-radius: var(--border-radius-sm);
        transition: background-color 0.2s;
    }

    .mobile-cat-toggle:hover,
    .mobile-cat-toggle:active {
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-cat-group.open .mobile-cat-toggle .nav-chevron {
        transform: rotate(180deg);
    }

    .mobile-cat-submenu {
        display: none;
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--border-radius-sm);
        margin-top: var(--spacing-xs);
        padding: 0;
    }

    .mobile-cat-group.open .mobile-cat-submenu {
        display: block;
    }

    .mobile-cat-submenu .nav-link {
        padding-left: var(--spacing-xl);
    }

    .book-detail {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-table {
        display: block;
    }

    .cart-table thead {
        display: none;
    }

    .cart-table tbody {
        display: block;
    }

    .cart-table tr {
        display: block;
        margin-bottom: var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
    }

    .cart-table td {
        display: flex;
        justify-content: space-between;
        border: none;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .cart-table td::before {
        content: attr(data-label);
        font-weight: 500;
    }

    .cart-table td[data-label="Item"] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .cart-item-info {
        width: 100%;
        gap: 0.75rem;
    }

    .cart-item-image {
        flex-shrink: 0;
        width: 60px;
        height: 75px;
    }
}

/* No Image Placeholder */
.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border-light);
    color: var(--color-text-light);
    font-size: 0.875rem;
    font-style: italic;
    width: 100%;
    height: 100%;
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--spacing-xs) 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease-in-out;
}

.cookie-banner-bottom {
    bottom: 0;
}

.cookie-banner-top {
    top: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cookie-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.cookie-banner-text {
    flex: 1;
    min-width: 200px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.cookie-banner-link {
    text-decoration: underline;
    margin-left: var(--spacing-xs);
}

.cookie-banner-link:hover {
    opacity: 0.8;
}

.cookie-banner-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
}

.cookie-banner.hidden {
    transform: translateY(100%);
}

.cookie-banner-top.hidden {
    transform: translateY(-100%);
}

@media (max-width: 768px) {
    .cookie-banner-inner {
        gap: var(--spacing-sm);
    }

    .cookie-banner-text {
        min-width: auto;
        font-size: 0.75rem;
    }
}

/* Express Checkout (Apple Pay / Google Pay) */
#express-checkout-element {
    min-height: 44px;
    margin: var(--spacing-sm) 0;
    display: none;        /* hidden until Stripe confirms availability */
}

.express-checkout-divider {
    display: none;        /* hidden until Stripe confirms availability */
    align-items: center;
    text-align: center;
    margin: var(--spacing-md) 0;
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.express-checkout-divider::before,
.express-checkout-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}

.express-checkout-divider span {
    padding: 0 var(--spacing-md);
}

/* Checkout sections */
.checkout-section {
    border: none;
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-lg) 0 0;
    margin: 0 0 var(--spacing-md);
}

.checkout-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.checkout-section legend {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.checkout-login-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: var(--spacing-xs) 0 0;
}

.checkout-login-hint a {
    color: var(--color-primary);
    font-weight: 500;
}

/* Checkout extras box (account creation) */
.checkout-extras-box {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-secondary);
}

.checkout-extras-box__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: 500;
}

.checkout-extras-box__hint {
    margin: var(--spacing-xs) 0 0 1.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Spaced modifier for second option in extras box */
.checkout-extras-box__label--spaced {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* Order summary items */
.summary-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.summary-item__image {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.summary-item__details {
    flex: 1;
}

.summary-item__title {
    font-weight: 500;
}

.summary-item__meta {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

.summary-item__price {
    font-weight: 500;
    text-align: right;
}

.summary-item__price--struck {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.summary-item__price--sale {
    color: var(--color-success);
}

/* Summary rows */
.summary-totals {
    padding-top: var(--spacing-md);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.summary-row__label {
    color: var(--color-text-light);
}

.summary-row--discount {
    color: var(--color-success);
}

.summary-row--total {
    font-size: 1.25rem;
    font-weight: bold;
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* Coupon forms in summary */
.coupon-applied__form {
    margin: 0;
}

.coupon-form__inner {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
}

.coupon-form__input {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
}

/* Shipping display card */
.shipping-display {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-cream);
}

.shipping-display__loading {
    padding: var(--spacing-md);
    color: var(--color-text-light);
}

.shipping-display__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.shipping-display__name {
    font-weight: 500;
}

.shipping-display__estimate {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

.shipping-display__promo {
    font-size: var(--font-size-base);
    color: var(--color-success);
    margin-top: var(--spacing-xs);
}

.shipping-display__price {
    font-weight: 500;
    text-align: right;
}

.shipping-display__price--struck {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.shipping-display__price--promo {
    color: var(--color-success);
}

/* Address skeleton loading placeholder */
.address-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.skeleton-line {
    height: 44px;
    background: var(--color-border-light);
    border-radius: var(--border-radius);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line-row {
    display: flex;
    gap: var(--spacing-md);
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Homepage Sections */
.homepage-section {
    margin-bottom: var(--spacing-2xl);
}

.homepage-section-sale {
    background: var(--color-accent-light);
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

.section-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Hero Feature */
.hero-feature {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.hero-feature-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.hero-feature-image {
    position: absolute;
    inset: 0;
    background: var(--color-border-light);
}

.hero-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-feature-overlay {
    position: relative;
    margin-top: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 65%, transparent 100%);
    padding: 6rem var(--spacing-xl) var(--spacing-xl);
}

.hero-feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hero-feature-label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    border-left: 3px solid var(--color-accent);
    padding-left: var(--spacing-sm);
    width: fit-content;
}

.hero-feature-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
}

.hero-feature-author {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}

.hero-feature-quote {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xs) 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.hero-feature-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.hero-feature-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.hero-feature-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.hero-feature-price .price {
    color: #fff;
    font-size: 1.75rem;
}

.hero-feature-price .sale-price {
    color: #fff;
    font-weight: 700;
}

.hero-feature-price .original-price {
    font-weight: 400;
    opacity: 0.65;
}

.hero-feature-price .sale-badge,
.hero-feature-price .discount-badge {
    font-size: 0.75rem;
}

.hero-feature-overlay .hero-feature-btn {
    align-self: flex-start;
    margin-top: var(--spacing-sm);
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.hero-feature-overlay .hero-feature-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .hero-feature {
        min-height: 300px;
    }

    .hero-feature-overlay {
        padding: 4rem var(--spacing-md) var(--spacing-md);
    }

    .hero-feature-title {
        font-size: 1.5rem;
    }

    .hero-feature-price,
    .hero-feature-price .price,
    .hero-feature-price .sale-price {
        font-size: 1.375rem;
    }
}

/* Hero Carousel */
.hero-carousel {
    position: relative;
}

.hero-carousel-track {
    display: flex;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.hero-carousel-track .hero-feature {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.hero-carousel .hero-feature-overlay {
    padding-left: 4.5rem;   /* clears arrow: 1rem offset + 44px width + 1rem gap */
    padding-right: 4.5rem;
}

.hero-carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
    align-items: center;
    justify-content: center;
}

.hero-carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

[data-carousel-ready] .hero-carousel-arrow {
    display: flex;
}

.hero-carousel-prev {
    left: 1rem;
}

.hero-carousel-next {
    right: 1rem;
}

.hero-carousel-dots {
    display: none;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

[data-carousel-ready] .hero-carousel-dots {
    display: flex;
}

/* Visible dot is 10px (8px in the mobile/featured overrides below) — the button itself is a
   24x24 tap target (WCAG 2.5.8), touching its neighbours (no gap) so dots stay exactly 24px
   apart centre-to-centre; the dot graphic and its old 8px visual spacing are unchanged. */
.hero-carousel-dot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.hero-carousel-dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease;
}

.hero-carousel-dot:hover::before {
    background: rgba(255, 255, 255, 0.75);
}

.hero-carousel-dot.active::before {
    background: #fff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .hero-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .hero-carousel-prev {
        left: 0.5rem;
    }

    .hero-carousel-next {
        right: 0.5rem;
    }

    .hero-carousel .hero-feature-overlay {
        padding-left: 3.5rem;   /* clears arrow: 0.5rem offset + 36px width + 0.75rem gap */
        padding-right: 3.5rem;
    }

    .hero-carousel-dot::before {
        width: 8px;
        height: 8px;
    }
}

/* Featured Books: swipe carousel on mobile, side-by-side cards on desktop */
.featured-grid {
    display: none;
}

@media (min-width: 701px) {
    .featured-mobile-carousel {
        display: none;
    }

    .featured-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 270px));
        justify-content: center;
        gap: var(--spacing-xl);
    }
}

@media (max-width: 700px) {
    /* Smaller arrows, pinned flush to the edges, clear of the note/button text */
    .featured-mobile-carousel .hero-carousel-arrow {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .featured-mobile-carousel .hero-carousel-prev {
        left: 0.25rem;
    }

    .featured-mobile-carousel .hero-carousel-next {
        right: 0.25rem;
    }

    .featured-mobile-carousel .hero-feature-overlay {
        padding-left: 2.5rem;   /* clears arrow: 0.25rem offset + 28px width + 0.5rem gap */
        padding-right: 2.5rem;
    }

    /* Dots move below the slide instead of overlaying the "See this book" button */
    .featured-mobile-carousel {
        padding-bottom: 2rem;
        position: relative;
    }

    .featured-mobile-carousel .hero-carousel-dots {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        justify-content: center;
    }

    /* Sitting below the slide on the cream page background now, not over the image, so
       match .review-scroll-dot's colours/size instead of the white default for on-image use. */
    .featured-mobile-carousel .hero-carousel-dot::before {
        width: 8px;
        height: 8px;
        background: var(--color-border);
    }

    .featured-mobile-carousel .hero-carousel-dot:hover::before {
        background: var(--color-border);
    }

    .featured-mobile-carousel .hero-carousel-dot.active::before {
        background: var(--color-primary);
    }
}

.featured-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
}

.featured-card-image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-border-light);
}

.featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card-body {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.featured-card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card-author {
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-style: italic;
    margin: 0 0 var(--spacing-sm);
}

.featured-card-note {
    /* No line-clamp: BookCopyFeature.homepage_text is capped at 130 chars (see model
       help_text) — the desktop card's own 4-line capacity, which is tighter than the
       mobile carousel slide's 6-line budget — so the full note always shows, never
       truncated, on either surface. */
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0 0 var(--spacing-md);
}

.featured-card-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.featured-card-btn {
    margin-top: auto;
    text-align: center;
}

/* Hero Content Carousel */
.hero-content-carousel {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.hero-slide {
    background: var(--color-primary);
    color: #fff;
    min-height: 150px;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
}

.hero-slide-content {
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: center;
}

.hero-slide-content h1,
.hero-slide-content h2,
.hero-slide-content h3 {
    font-family: var(--font-heading);
    color: #fff;
    margin-bottom: var(--spacing-sm);
}

.hero-slide-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.0625rem;
}

/* Category Grid */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 180px;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.category-card-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.category-card-count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Genre grid: fits all tiles on one row, shrinking to fill the width */
.category-grid-genres {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-md);
}

.category-grid-genres .category-card {
    width: auto;
    padding: var(--spacing-lg) var(--spacing-sm);
}

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

@media (max-width: 480px) {
    .category-grid-genres {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Article Grid */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.article-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.card-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-rust);
}

.article-card-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
}

.article-card-excerpt {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.article-card-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
}

/* Profile Layout */
.profile-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
    align-items: start;
}

.profile-section-heading {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}

.section-helper-text {
    font-style: italic;
    color: var(--color-text-light);
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.profile-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
}

.profile-card h3 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
}

.profile-card p {
    color: var(--color-text-light);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Order History Nav */
.order-history-nav {
    margin-bottom: var(--spacing-xl);
}

.order-history-nav a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
}

.order-history-nav a:hover {
    text-decoration: underline;
}

/* Order Date */
.order-date {
    color: var(--color-text-light);
    margin-left: var(--spacing-md);
}

/* Order Items */
.order-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.order-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    background: var(--color-secondary);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    max-width: 300px;
}

.order-item-image {
    width: 40px;
    height: 52px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.order-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item-no-image {
    width: 40px;
    height: 52px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.order-item-no-image svg {
    width: 20px;
    height: 20px;
}

.order-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.order-item-price {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* Order Footer */
.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.order-footer-destination {
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.order-footer-shipping {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* Order Status Guide */
.order-status-guide {
    margin-top: var(--spacing-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.order-status-guide h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
}

.order-status-guide dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    font-size: 0.875rem;
}

.order-status-guide dt {
    font-weight: 600;
}

.order-status-guide dd {
    color: var(--color-text-light);
}

/* Empty State Icon */
.empty-state-icon {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.empty-state-icon svg {
    width: 64px;
    height: 64px;
}

/* Responsive: Profile & Order History */
@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .order-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Reviews */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.review-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.review-card-date {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.review-card-title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
}

.review-card-comment {
    font-style: italic;
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-md);
    padding: 0;
    border: none;
    line-height: 1.5;
}

.review-card-author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: auto;
}

.review-card-toggle {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
}

.review-card-toggle:hover {
    text-decoration: underline;
}

/* Star Rating */
.star-rating {
    display: inline-flex;
    gap: 2px;
}

.star-filled {
    color: var(--color-accent);
}

.star-empty {
    color: var(--color-border);
}

/* Star Rating Input — DOM order is 5,4,3,2,1; row-reverse displays as 1,2,3,4,5 */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--spacing-xs);
}

.star-radio-label {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.star-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.star-radio-label .star {
    color: var(--color-border);
    transition: color 0.15s;
}

.star-radio-label:hover .star,
.star-radio-label:hover ~ .star-radio-label .star {
    color: var(--color-accent);
    fill: currentColor;
}

.star-radio-label:has(input:checked) .star,
.star-radio-label:has(input:checked) ~ .star-radio-label .star {
    color: var(--color-accent);
    fill: currentColor;
}

/* Review Form */
.review-form-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

.review-form {
    max-width: 600px;
}

.review-form .form-group {
    margin-bottom: var(--spacing-lg);
}

/* Staff Review Moderation */
.review-moderation-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.review-pending {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.review-pending-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.review-pending-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.review-pending-actions {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
}

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-danger {
    background: var(--color-error);
    color: var(--color-white);
}

.btn-danger:hover {
    background: var(--color-error-dark);
}

@media (max-width: 768px) {
    .review-grid {
        grid-template-columns: 1fr;
    }
}

/* Homepage reviews on mobile: sideways swipe row with scroll-snap + dots, instead of the
   stacked grid above. Scoped to [data-scroll-dots] (set only in catalog/home.html) so the
   genre-landing reviews section keeps its plain stacked layout untouched. */
@media (max-width: 700px) {
    .review-grid[data-scroll-dots] {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--spacing-md);
        padding-bottom: var(--spacing-xs);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .review-grid[data-scroll-dots]::-webkit-scrollbar {
        display: none;
    }

    .review-grid[data-scroll-dots] .review-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        padding: var(--spacing-md);
    }

    .review-grid[data-scroll-dots] .review-card-comment {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .review-grid[data-scroll-dots] .review-card-toggle,
    .review-grid[data-scroll-dots] .review-card-comment-full {
        display: none;
    }

    .review-grid[data-scroll-dots] .review-card-more-link {
        display: inline-block;
    }

    .review-grid[data-scroll-dots] ~ .review-scroll-dots {
        display: flex;
    }
}

.review-card-more-link {
    display: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--spacing-xs);
}

.review-scroll-dots {
    display: none;
    justify-content: center;
    margin-top: var(--spacing-md);
}

/* Visible dot stays 8px — the button is a 24x24 tap target (WCAG 2.5.8), touching its
   neighbours (no gap) so dots stay exactly 24px apart centre-to-centre. */
.review-scroll-dot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.review-scroll-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 0.2s ease;
}

.review-scroll-dot.active::before {
    background: var(--color-primary);
}

/* Announcement Banners */
.announcement-banners {
    margin: var(--spacing-lg) 0;
}

/* Extra breathing room below the /gifts/ postage notice, before the first
   category section's title. */
.gifts-postage-notice {
    margin-bottom: var(--spacing-2xl);
}

.announcement-banner {
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
}

.announcement-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    text-align: center;
    flex-wrap: wrap;
}

.announcement-banner-text {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.announcement-banner-link {
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.announcement-banner-link:hover {
    text-decoration: underline;
}

/* Banner style modifiers */
.announcement-banner--orange {
    background: var(--color-accent-dark);
    color: #fff;
}

.announcement-banner--orange .announcement-banner-link {
    color: #fff;
}

.announcement-banner--dark-green {
    background: var(--color-primary-dark);
    color: #fff;
}

.announcement-banner--dark-green .announcement-banner-link {
    color: #fff;
}

.announcement-banner--blue {
    background: var(--feedback-info-text);
    color: #fff;
}

.announcement-banner--blue .announcement-banner-link {
    color: #fff;
}

.announcement-banner--green {
    background: var(--feedback-success-text);
    color: #fff;
}

.announcement-banner--green .announcement-banner-link {
    color: #fff;
}

@media (max-width: 768px) {
    .announcement-banner-inner {
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* News page layout */
.news-page {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Newsletter archive cards */
.newsletter-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.newsletter-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.newsletter-card:hover {
    box-shadow: var(--shadow-md);
}

.newsletter-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.newsletter-card h3 {
    margin: 0 0 var(--spacing-xs);
    color: var(--color-primary);
}

.newsletter-card .card-eyebrow {
    margin: 0 0 var(--spacing-xs);
}

.newsletter-card-date {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-xs);
}

.newsletter-card-preview {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.newsletter-card-image {
    margin: calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) var(--spacing-md) calc(var(--spacing-lg) * -1);
    overflow: hidden;
}

.newsletter-card-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* Cart Turnstile challenge modal */
.cart-turnstile-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.cart-turnstile-modal[hidden] {
    display: none;
}

.cart-turnstile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.cart-turnstile-modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18));
    padding: var(--spacing-lg);
    max-width: 22rem;
    width: 100%;
    text-align: center;
}

.cart-turnstile-modal-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.25rem;
}

.cart-turnstile-modal-text {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.cart-turnstile-widget {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    min-height: 65px;
}

.cart-turnstile-error {
    margin-bottom: var(--spacing-sm);
}

body.cart-turnstile-open {
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Site-wide announcement bar: delivery message (always first, driven  */
/* by the cart) + up to 2 admin AnnouncementMessage rows. See           */
/* pages.context_processors.announcement_bar and assets/js/main.js's   */
/* updateAnnouncementBar() for the update-without-reload logic.        */
/*                                                                      */
/* Colours are the 5 variables below — the only place to change to try */
/* a different scheme (kraft, cream, the burnt orange, etc). Currently */
/* trialing a shade darker than the header green, with cream text      */
/* (14.13:1) and light orange icons (7.09:1) — both comfortably pass   */
/* WCAG AA; the dot and border are decorative, no AA requirement.      */
/* ------------------------------------------------------------------ */
:root {
    --announcement-bg: #172a22;
    --announcement-text: var(--color-secondary);
    --announcement-icon: #e7a36e;
    --announcement-dot: #6b7b72;
    --announcement-border: #2f4a3e;
}

.announcement-bar {
    background: var(--announcement-bg);
    color: var(--announcement-text);
    border-bottom: 1px solid var(--announcement-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem var(--spacing-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.announcement-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.announcement-item[href]:hover {
    text-decoration: underline;
}

.announcement-item:not(:first-child)::before {
    content: "\00B7";
    margin-right: 0.35rem;
    color: var(--announcement-dot);
    font-weight: 700;
}

.announcement-icon {
    display: inline-flex;
    color: var(--announcement-icon);
    flex-shrink: 0;
}

/* Without this, the unconditional display:inline-flex above beats the browser's default
   [hidden] { display: none } — the truck/tick icons showed together on every state. */
.announcement-icon[hidden] {
    display: none;
}

.announcement-icon svg {
    width: 14px;
    height: 14px;
}

.announcement-bar--tight .announcement-item--admin-2 {
    display: none;
}

@media (max-width: 700px) {
    .announcement-item--admin {
        display: none;
    }
}

/* Static hero (replaces the 3-slide carousel) — sits on the page background, no box */
.static-hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    padding: var(--spacing-md) 0 var(--spacing-lg);
}

.static-hero-text {
    flex: 1 1 50%;
    min-width: 0;
    text-align: left;
}

.static-hero-text h1 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    margin: 0 0 var(--spacing-sm);
    font-size: 2.75rem;
    text-wrap: balance;
}

/* Forced line break after the heading's comma / the subline's "by me," — mobile only (see media query below) */
.hero-heading-break,
.hero-subline-break {
    display: none;
}

/* Dev-only placeholder for a hero image that hasn't been set yet — never shown in production */
.static-hero-image--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 260px;
    background: var(--color-border-light);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--spacing-xl);
}

.static-hero-image--placeholder p {
    margin: 0;
    font-size: 0.9375rem;
}

/* No image set (production): fall back to a centred single-column hero, like mobile */
@media (min-width: 701px) {
    .static-hero--no-image {
        flex-direction: column;
        text-align: center;
        max-width: 640px;
        margin-inline: auto;
    }

    .static-hero--no-image .static-hero-text {
        text-align: center;
    }

    .static-hero--no-image .static-hero-buttons,
    .static-hero--no-image .static-hero-rating {
        justify-content: center;
    }
}

.static-hero-subline {
    color: var(--color-text-light);
    font-size: 1.0625rem;
    margin-bottom: var(--spacing-lg);
    text-wrap: balance;
}

.static-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

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

.btn-outline-primary:hover {
    background: var(--color-primary-light);
}

.static-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
    text-decoration: none;
}

.static-hero-rating:hover {
    text-decoration: underline;
}

.static-hero-image {
    flex: 1 1 50%;
    min-width: 0;
}

.static-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
}

@media (max-width: 700px) {
    /* Homepage hero sits right under the header on mobile — .main's default
       spacing-2xl top padding leaves a big gap before the heading. */
    .main:has(.static-hero) {
        padding-top: var(--spacing-md);
    }

    .static-hero {
        flex-direction: column;
        padding: var(--spacing-xs) 0 var(--spacing-md);
        gap: var(--spacing-md);
        text-align: center;
    }

    .static-hero-text {
        order: 1;
        width: 100%;
        text-align: center;
    }

    /* Mobile hero is text-only, single column — no image, no placeholder */
    .static-hero-image {
        display: none;
    }

    .hero-heading-break,
    .hero-subline-break {
        display: inline;
    }

    .static-hero-text h1 {
        font-size: 1.875rem;
        margin-bottom: var(--spacing-xs);
        white-space: nowrap;
    }

    .static-hero-subline {
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-sm);
    }

    .static-hero-buttons {
        flex-wrap: nowrap;
        justify-content: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-xs);
    }

    .static-hero-buttons .btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .static-hero-rating {
        justify-content: center;
        width: 100%;
    }
}

/* Homepage category chips */
.homepage-chips {
    margin-bottom: var(--spacing-xl);
}

.homepage-chips-track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.homepage-chip {
    display: inline-block;
    white-space: nowrap;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.homepage-chip:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-color: var(--color-primary);
}

.homepage-chip--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Quick finds — under the hero at every width, replacing the old category chips */
.quick-finds-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
}

.homepage-quick-finds .homepage-chips-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.homepage-quick-finds .homepage-chips-track::-webkit-scrollbar {
    display: none;
}

@media (min-width: 701px) {
    .homepage-quick-finds {
        margin-top: var(--spacing-lg);
    }
}

/* Gifts band category chips — centred under the grid */
.homepage-chips--gifts .homepage-chips-track {
    justify-content: center;
}

@media (max-width: 700px) {
    .homepage-chips {
        margin-bottom: var(--spacing-md);
    }

    .homepage-chips-track {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--spacing-xs);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .homepage-chips-track::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 700px) {
    /* Recently Added: mobile shows only the first 4 */
    .book-grid--recent > :nth-child(n+5) {
        display: none;
    }

    /* Homepage book grids (Recently Added, themed collection, Rare Treats) become a single
       column of compact list rows on mobile — image left (~30%), details right. Desktop keeps
       the normal stacked grid cards; nothing here touches .book-card anywhere else on the site. */
    .homepage-book-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .homepage-book-grid .book-card {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 0;
        overflow: hidden;
        align-items: stretch;
    }

    .homepage-book-grid .book-card-image {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        /* Base rule sets aspect-ratio: 3/4 for the standalone desktop card. Combined with
           height:100% here (but no explicit width), that made the browser derive this box's
           width from the aspect ratio and the row height instead of the 110px track — a taller
           card (e.g. a 2-line author) produced a wider photo that overlapped the text column.
           Overriding to aspect-ratio:auto forces the width back to the grid track. */
        aspect-ratio: auto;
    }

    .homepage-book-grid .book-card-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .homepage-book-grid .book-card-image .no-image {
        width: 100%;
        height: 100%;
    }

    .homepage-book-grid .book-card-body {
        grid-column: 2;
        grid-row: 1;
        /* Grid items default to min-width:auto, which sizes to their content's min-content
           width — a long price/button could otherwise force this column wider than its 1fr
           share and push into (overlap) the fixed-width image column. min-width:0 lets it
           shrink to fit instead, whatever the container width. */
        min-width: 0;
        padding: var(--spacing-sm) var(--spacing-sm) 0 0;
    }

    .homepage-book-grid .book-card-footer {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm) 0;
        margin-top: 0;
    }

    .homepage-book-grid .book-card-title {
        font-size: 0.875rem;
        margin-bottom: 0.15rem;
    }

    .homepage-book-grid .book-card-author {
        font-size: 0.8125rem;
        margin-bottom: 0.25rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .homepage-book-grid .book-card-badges,
    .homepage-book-grid .book-card-condition {
        margin-bottom: 0.25rem;
    }

    .homepage-book-grid .book-card-price {
        font-size: 1rem;
    }

    .homepage-book-grid .book-card-footer .btn {
        padding: 0.4rem var(--spacing-md);
        font-size: 0.8125rem;
        white-space: nowrap;
    }
}

/* Themed collection: coloured panel to feel distinct from the plain grids. Background is one of
   HomepageCollection.Background — each preset is just a set of custom-property overrides below,
   so a new preset is a new .themed-collection--<slug> block plus a model choice. The admin preview
   (templates/admin/books/homepagecollection/preview.html) loads this same stylesheet, so it always
   matches. Book cards are unaffected — .book-card is always white, on every preset. */
.themed-collection {
    --panel-bg: var(--color-panel-kraft);
    --panel-heading: var(--color-text);
    --panel-label: var(--color-panel-kraft-label);
    --panel-text: var(--color-panel-kraft-text);
    --panel-link: var(--color-primary);
    background: var(--panel-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl) var(--spacing-xl);
}

.themed-collection .section-title,
.themed-collection .section-subtitle {
    margin-left: 0;
}

.themed-collection .section-heading-title {
    color: var(--panel-heading);
}

.themed-collection .section-heading-label {
    color: var(--panel-label);
}

.themed-collection .section-subtitle {
    color: var(--panel-text);
}

.themed-collection .section-heading-see-all,
.themed-collection .section-see-all-desktop a {
    color: var(--panel-link);
}

.themed-collection--parchment {
    --panel-bg: var(--color-secondary);
    --panel-heading: var(--color-text);
    --panel-label: var(--color-accent);
    --panel-text: var(--color-text-light);
    --panel-link: var(--color-primary);
}

.themed-collection--sage {
    --panel-bg: var(--color-panel-sage);
    --panel-heading: var(--color-text);
    --panel-label: var(--color-accent);
    --panel-text: var(--color-text-light);
    --panel-link: var(--color-primary);
}

.themed-collection--festive-green {
    --panel-bg: var(--color-primary-dark);
    --panel-heading: var(--color-secondary);
    --panel-label: var(--color-panel-light-orange);
    --panel-text: var(--color-secondary);
    --panel-link: var(--color-secondary);
}

.themed-collection--berry {
    --panel-bg: var(--color-panel-berry);
    --panel-heading: var(--color-secondary);
    --panel-label: var(--color-panel-berry-label);
    --panel-text: var(--color-secondary);
    --panel-link: var(--color-secondary);
}

.themed-collection--midnight {
    --panel-bg: var(--color-panel-midnight);
    --panel-heading: var(--color-secondary);
    --panel-label: var(--color-panel-light-orange);
    --panel-text: var(--color-secondary);
    --panel-link: var(--color-secondary);
}

/* Match Recently Added's 4-column desktop layout instead of auto-fill (the panel's own
   padding otherwise leaves room for only 3 columns at the same container width). */
@media (min-width: 701px) {
    .themed-collection .book-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Bookish Gifts band */
.gifts-band-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.gift-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.gift-card-image {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--color-border-light);
}

.gift-card-image img,
.gift-card-image .no-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gift-card-label {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--color-primary-dark);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

.gift-card-body {
    padding: var(--spacing-md);
}

.gift-card-title {
    font-size: 0.9375rem;
    margin: 0 0 var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gift-card-title a {
    color: inherit;
    text-decoration: none;
}

.gift-card-price {
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
}

.gift-card-maker {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin: 0;
}

@media (max-width: 900px) {
    .gifts-band-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .gifts-band-row {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 65%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gifts-band-row::-webkit-scrollbar {
        display: none;
    }
}

/* Newsletter section: sage newsletter panel + white author-alerts card, side by side */
.newsletter-section {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-xl);
    align-items: stretch;
}

/* Shared small uppercase orange eyebrow — same values as .section-heading-label, but kept
   as its own class since that one turns into a centered flex row with divider lines at
   desktop widths (right for every other homepage section, wrong for this left-aligned panel). */
.newsletter-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--spacing-xs);
}

.newsletter-panel {
    background: var(--color-panel-kraft);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl) var(--spacing-xl);
}

.newsletter-panel .newsletter-label {
    color: var(--color-panel-kraft-label);
}

.newsletter-heading {
    margin-bottom: var(--spacing-sm);
}

.newsletter-panel-text {
    color: var(--color-panel-kraft-text);
    max-width: 46ch;
    margin: 0 0 var(--spacing-lg);
}

.newsletter-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    max-width: 480px;
    margin-bottom: var(--spacing-sm);
}

.newsletter-inline-form .form-input {
    flex: 1 1 260px;
}

.newsletter-honeypot {
    display: none;
}

.newsletter-fineprint {
    font-size: 0.8125rem;
    color: var(--color-panel-kraft-text);
    margin: 0;
}

/* Author alerts card: whole card is a link, content vertically centred within the
   panel's matched height (grid's default align-items: stretch makes both columns equal). */
.author-alerts-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.author-alerts-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.author-alerts-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.author-alerts-eyebrow .newsletter-label {
    margin: 0;
}

.author-alerts-icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.author-alerts-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.0625rem;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.author-alerts-text {
    color: var(--color-text-light);
    font-size: 0.9375rem;
    margin: 0;
    text-wrap: balance;
}

.author-alerts-btn {
    margin-top: var(--spacing-xs);
}

@media (max-width: 700px) {
    .newsletter-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .newsletter-panel {
        text-align: center;
    }

    .newsletter-panel-text {
        margin-left: auto;
        margin-right: auto;
    }

    .newsletter-inline-form {
        flex-direction: column;
        max-width: none;
    }

    .newsletter-inline-form .form-input,
    .newsletter-inline-form .btn {
        width: 100%;
        /* .form-input's flex-basis:260px (set for the desktop row layout) would otherwise be
           read as a *height* basis now the form is flex-direction:column, stretching the
           email field to 260px tall. */
        flex: none;
    }

    /* Same content as desktop, stacked — just tighter padding on the card itself */
    .author-alerts-card {
        padding: var(--spacing-lg);
    }
}

/* Contact page: form card (left, ~60%) + topic panel and "before you ask" card (right, ~40%)
   on desktop; single column on mobile. The panel (#author-alerts) is a direct child of this
   grid on desktop like the other two areas, but on mobile assets/js/main.js's
   initContactPanelPosition() moves that same node to sit right after the "What's it about?"
   dropdown, so the visitor sees it change as they pick a topic — no duplicated markup, so
   aria-live and the topic-switching JS only ever touch one copy. Without JS the panel simply
   stays in its default position here, above the form. */
.contact-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

@media (min-width: 701px) {
    .contact-layout {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-areas: "form alerts" "form before";
        align-items: start;
    }

    .contact-form-area {
        grid-area: form;
    }

    .contact-panel {
        grid-area: alerts;
    }

    .contact-before-area {
        grid-area: before;
    }
}

/* Same kraft variables as the homepage panels (themed collection, newsletter). Holds one
   .contact-panel-option per ContactMessage.Topic — all but the selected topic are [hidden]. */
.contact-panel {
    background: var(--color-panel-kraft);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.contact-panel-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.contact-panel-eyebrow .newsletter-label {
    margin: 0;
    color: var(--color-panel-kraft-label);
}

.contact-panel-icon {
    color: var(--color-panel-kraft-label);
    flex-shrink: 0;
}

.contact-panel-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
    letter-spacing: -0.01em;
}

.contact-panel-text {
    color: var(--color-panel-kraft-text);
    line-height: 1.6;
    margin: 0;
}

/* Same style as .contact-before-list a — currently only the order panel's {shipping_link}
   (see pages/views.py:_contact_panel_text) renders a link here. #2d5f4a on the kraft
   background (#e3d3bc) is ~5:1 contrast, passing WCAG AA. */
.contact-panel-text a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.contact-panel-text a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    /* On mobile the panel sits inline between form fields (see initContactPanelPosition in
       assets/js/main.js) — give it the same spacing below as a .form-group gets. */
    .contact-panel {
        margin-bottom: var(--spacing-lg);
    }
}

.contact-before-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.contact-before-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contact-before-list a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9375rem;
}

.contact-before-list a:hover {
    text-decoration: underline;
}

/* Newsletter page: form card (left, ~60%) + kraft "what's inside" panel and author-alerts
   card (right, ~40%) on desktop; single column on mobile, in document order (form, panel,
   alerts) so no CSS reordering is needed there. */
.newsletter-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

@media (min-width: 701px) {
    .newsletter-layout {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-areas: "form panel" "form alerts";
        align-items: start;
    }

    .newsletter-form-area {
        grid-area: form;
    }

    .newsletter-panel-area {
        grid-area: panel;
    }

    .newsletter-alerts-area {
        grid-area: alerts;
    }
}

/* Same kraft variables as the homepage newsletter panel and the contact-page .contact-panel */
.newsletter-whats-inside {
    background: var(--color-panel-kraft);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.newsletter-whats-inside-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.newsletter-whats-inside-eyebrow .newsletter-label {
    margin: 0;
    color: var(--color-panel-kraft-label);
}

.newsletter-whats-inside-icon {
    color: var(--color-panel-kraft-label);
    flex-shrink: 0;
}

.newsletter-whats-inside-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
    letter-spacing: -0.01em;
}

.newsletter-whats-inside-text {
    color: var(--color-panel-kraft-text);
    line-height: 1.6;
    margin: 0;
}

/* Footer social icons */
.footer-social {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-border-light);
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease;
}

.footer-social-icon:hover {
    background: var(--color-primary);
    color: #fff;
}

.footer-social-icon svg {
    width: 18px;
    height: 18px;
}