/* Reset and Base Styles */
html {
    zoom: 1.0;
}

/* Disable zoom on mobile - it breaks sticky positioning */
@media (max-width: 768px) {
    html {
        zoom: 1 !important;
    }
}

/* Brand Design System Tokens */
:root {
    /* Brand Core */
    --color-midnight:    #0D0D0D;   /* logo, primary headings */
    --color-catnip:      #7B3FE4;   /* CTAs, active states, links, hero banners */
    --color-catnip-dark: #6B35CC;   /* hover state for catnip */
    --color-lavender:    #F0E8FF;   /* surfaces, callout boxes, light backgrounds */
    --color-biscuit:     #F4A823;   /* warm accent, Popular badge, holiday elements */
    --color-blush:       #FFE8E4;   /* page border, envelope warmth, hover surfaces */
    --color-ash:         #6B7280;   /* secondary text, inactive UI, placeholders */
    --color-white:       #FFFFFF;   /* page background, card interiors */

    /* Text */
    --text-primary:      #0D0D0D;
    --text-secondary:    #6B7280;
    --text-muted:        #9CA3AF;

    /* Semantic (keep for status/destructive only) */
    --color-success:     #10b981;
    --color-danger:      #dc2626;

    /* Calendar-only semantic colors */
    --cal-card-release:  #7B3FE4;   /* Catnip Purple — most exciting event type */
    --cal-promo:         #F4A823;   /* Biscuit — deals feel warm */
    --cal-poll:          #C4B5FD;   /* Light purple — participatory, light */
    --cal-holiday:       #FFCDD4;   /* Warm pink/blush — seasonal */
    --cal-shipping:      #9CA3AF;   /* Ash — neutral, informational */
    --cal-ended:         #D1D5DB;   /* Light gray — past, faded */
}

/* Typography System - Brand Fonts */
/* Headings — use Amatic SC everywhere */
/* Note: Amatic SC is tall & narrow, so sizes are ~40% larger than typical fonts */
h1, h2, h3,
.page-title,
.section-heading,
.hero-title,
.card-name,
.dashboard-title {
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
}

/* Amatic SC sizing - compensate for narrow letterforms */
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
.hero-title { font-size: 4rem; }
.section-heading { font-size: 2.5rem; }
.page-title { font-size: 2.75rem; }
.card-name { font-size: 1.8rem; }

/* FAQ Accordion buttons - use Comic Relief for readability */
.accordion-button {
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Dashboard section titles */
.section-title {
    font-family: 'Amatic SC', cursive;
    font-size: 2.5rem;
    font-weight: 700;
}

/* Body copy — use Comic Relief everywhere */
body,
p,
.card-description,
.btn,
.pill,
.nav-link,
.filter-label,
.footer-text {
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
    font-weight: 400;
}

/* Functional UI only — system font */
input,
textarea,
select,
.character-count,
.order-id,
.timestamp,
table,
.price {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Button System */
/* Primary — Add to Cart, main CTAs */
.btn-primary {
    background: var(--color-catnip);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
    font-weight: 400;
}
.btn-primary:hover {
    background: var(--color-catnip-dark);
}

/* Secondary — Back to Cards, Edit, etc. */
.btn-secondary {
    background: var(--color-white);
    color: var(--color-catnip);
    border: 1.5px solid var(--color-catnip);
    border-radius: 8px;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
}

/* Ghost — Filter by Cat, minor actions */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--color-ash);
    border-radius: 8px;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    color: #7B3FE4 !important; /* Brand purple */
    border-color: #7B3FE4 !important;
}

/* Tab Components - Border indicator style */
.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab-btn.active {
    background: transparent;
    border-bottom: 2px solid var(--color-catnip);
    color: var(--color-catnip);
    font-weight: 700;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: white;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Development Notice Banner - Remove this section when ready to launch */
.dev-notice-banner {
    background: var(--color-catnip);
    color: var(--color-white);
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    position: relative;
    z-index: 1100;
}

/* Hide dev banner on customization page for cleaner UX */
.customization-page .dev-notice-banner {
    display: none !important;
}

.dev-notice-banner i {
    font-size: 1.1rem;
}

.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-banner {
    position: relative;
    width: 100%;
}

.banner-green-top,
.banner-green-bottom {
    width: 100%;
    height: 15px;
    background: #7fb069; /* Adjust this color to match your website_name.jpg green */
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1800px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: white;
}

.header-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.cats-illustration {
    max-height: 180px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.website-name {
    max-height: 150px;
    max-width: 800px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}

.account-link,
.cart-link {
    background: #f7fafc;
    color: #4a5568;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
    white-space: nowrap;
}

.account-link:hover,
.cart-link:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#cartCount {
    font-weight: bold;
    background-color: #7B3FE4 !important;
}

/* Main Navigation */
.main-nav {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.nav-btn {
    padding: 0.75rem 1.5rem;
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    color: #4a5568;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.nav-btn.active {
    background: var(--color-biscuit);
    color: white;
    border-color: var(--color-biscuit);
}

header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

header p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Multi-Page Layout */
main {
    padding: 2rem 0;
    min-height: 80vh;
}

.page {
    display: none;
}

.page.active {
    display: block;
    overflow: visible; /* Required for sticky children to work */
}

main.container {
    overflow: visible; /* Required for sticky children to work */
}

/* Page 1: Card Selection */
.card-selection-page .page-content {
    max-width: 100%;
    margin: 0 auto;
}

.page-subtitle {
    text-align: center;
    color: #718096;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Occasion Filters */
.filter-section {
    margin-top: 0;
    margin-bottom: 2rem;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-tab {
    padding: 0.75rem 1.25rem;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.25rem;
    color: #4a5568;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.filter-tab:hover {
    border-color: #F4A823;
    color: #F4A823;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244, 168, 35, 0.15);
}

/* More Occasions button - match other filter tabs with biscuit hover */
.filter-dropdown-toggle:hover {
    border-color: #F4A823 !important;
    color: #F4A823 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244, 168, 35, 0.15) !important;
}

/* Active dropdown shows clickable state on hover (can be clicked again to change selection) */
.filter-dropdown-toggle.active:hover {
    background: white !important;
    border-color: #F4A823 !important;
    color: #F4A823 !important;
    box-shadow: 0 2px 8px rgba(244, 168, 35, 0.15) !important;
}

.filter-tab.active {
    background: #F4A823;
    border-color: #F4A823;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 168, 35, 0.3);
}

/* Category Promo Banner */
.category-promo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    margin: 1rem auto;
    max-width: fit-content;
    animation: promoPulse 2s ease-in-out infinite;
}

.category-promo-banner .promo-icon {
    font-size: 1.25rem;
}

.category-promo-banner .promo-text {
    color: #92400e;
    font-size: 0.95rem;
    font-weight: 500;
}

.category-promo-banner .promo-code {
    background: #f59e0b;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 700;
    font-family: monospace;
    font-size: 0.95rem;
}

@keyframes promoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* Filter Dropdown Styling */
.filter-dropdown-container {
    position: relative;
    display: inline-block;
}

.filter-dropdown-toggle {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.filter-dropdown-toggle.active {
    background: #F4A823;
    border-color: #F4A823;
    color: white;
}

.filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    margin-top: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.filter-dropdown-menu.show {
    display: block;
}

.filter-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: none;
    background: white;
    color: #4a5568;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.filter-dropdown-item:last-child {
    border-bottom: none;
}

.filter-dropdown-item:hover {
    background: #f7fafc;
    color: var(--color-catnip);
    padding-left: 1.5rem;
}

.filter-dropdown-item.active {
    background: #F4A823;
    color: white;
    font-weight: 600;
}

/* Cat Filter Dropdown Styling */
.cat-filter-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    margin-bottom: 16px;
}

.cat-filter-dropdown-toggle {
    cursor: pointer;
    user-select: none;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cat-filter-dropdown-toggle:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* Dropdown is open */
.cat-filter-dropdown-toggle.active {
    background: var(--color-catnip);
    border-color: var(--color-catnip);
    color: white;
}

/* Filters are applied (but dropdown may be closed) */
.cat-filter-dropdown-toggle.has-filters {
    background: #e9d5ff;
    border-color: var(--color-catnip);
    color: var(--color-catnip);
}

.cat-filter-dropdown-toggle.has-filters:hover {
    background: #ddd6fe;
}

/* Clear filters button */
.clear-cat-filters-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: none;
}

.clear-cat-filters-btn.visible {
    display: inline-block;
}

.clear-cat-filters-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.cat-filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 280px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 12px;
}

.cat-filter-dropdown-menu.show {
    display: block;
}

.cat-filter-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cat-filter-close-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Travel Filter Dropdown */
.travel-filter-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.travel-filter-dropdown-toggle {
    cursor: pointer;
    user-select: none;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.travel-filter-dropdown-toggle:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* Dropdown is open */
.travel-filter-dropdown-toggle.active {
    background: var(--color-catnip);
    border-color: var(--color-catnip);
    color: white;
}

/* Filters are applied (but dropdown may be closed) */
.travel-filter-dropdown-toggle.has-filters {
    background: #e9d5ff;
    border-color: var(--color-catnip);
    color: var(--color-catnip);
}

.clear-travel-filters-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-travel-filters-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.travel-filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 320px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 12px;
}

.travel-filter-dropdown-menu.show {
    display: block;
}

.travel-filter-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.travel-filter-close-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.travel-filter-dropdown-menu .subfilter-group {
    margin-bottom: 12px;
}

.travel-filter-dropdown-menu .subfilter-group:last-child {
    margin-bottom: 0;
}

.travel-filter-dropdown-menu .subfilter-group h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.travel-filter-dropdown-menu .subfilter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.travel-filter-dropdown-menu .subfilter-tab {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 4px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.travel-filter-dropdown-menu .subfilter-tab:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.travel-filter-dropdown-menu .subfilter-tab.active {
    background: #F4A823;
    border-color: #F4A823;
    color: white;
}

.cat-filter-section {
    margin-bottom: 12px;
}

.cat-filter-section:last-child {
    margin-bottom: 0;
}

.cat-filter-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cat-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cat-filter-options .subfilter-tab {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 4px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cat-filter-options .subfilter-tab:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.cat-filter-options .subfilter-tab.active {
    background: #F4A823;
    border-color: #F4A823;
    color: white;
}

/* No cards message */
.no-cards-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #718096;
}

.no-cards-message p {
    margin-bottom: 0.5rem;
}

.no-cards-message small {
    color: #a0aec0;
}

/* Page 2: Customization Layout */
.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 20px; /* Even padding top/bottom */
    margin-bottom: 1rem; /* Space between header and toggle buttons */
    border-bottom: 1px solid #e2e8f0;
    position: fixed;
    top: 122px; /* Below the main navbar (dev banner is hidden on customization page) */
    left: 0;
    right: 0;
    z-index: 1010;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: white;
}

/* Spacer to push content below fixed header */
.customization-page .customization-layout {
    margin-top: 60px;
}

.page-header h2 {
    font-family: 'Amatic SC', cursive;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.back-btn {
    padding: 0.4rem 0.75rem;
    background: white;
    border: 2px solid #7B3FE4;
    border-radius: 6px;
    cursor: pointer;
    color: #7B3FE4;
    font-size: 1rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.back-btn:hover {
    background: #7B3FE4;
    border-color: #7B3FE4;
    color: white;
}

.customization-layout {
    display: flex;
    align-items: flex-start; /* Required for sticky to work in flex container */
    gap: 3rem;
}

.preview-column {
    position: sticky;
    top: 207px; /* Below navbar + page-header */
    width: 28%;
    flex-shrink: 0;
    align-self: flex-start; /* Required for sticky in flex container */
}

/* No longer needed - sticky handles this natively */
.preview-column.scrolling-with-page {
    /* Kept for backwards compatibility but not used */
}

.options-column {
    flex: 1;
    padding-left: 2rem;
    padding-top: 50px; /* Align with preview toggle buttons */
}

/* Card Selection Section */
.card-selection {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.card-selection h2 {
    color: #4a5568;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* Featured Section - New This Season */
.featured-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #F0E8FF;
    border-radius: 12px;
    border: 2px solid #7B3FE4;
}

.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.featured-header-content {
    text-align: left;
}

.featured-header h2 {
    color: #7B3FE4;
    margin-bottom: 0.25rem;
    font-size: 2.5rem;
}

.featured-subtitle {
    color: #6B7280;
    font-size: 0.9rem;
    margin: 0;
}

.featured-collapse-btn {
    background: none;
    border: 2px solid #7B3FE4;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #7B3FE4;
    flex-shrink: 0;
}

.featured-collapse-btn:hover {
    background: #F0E8FF;
}

.featured-collapse-btn .collapse-icon {
    transition: transform 0.3s ease;
    font-size: 14px;
}

.featured-section.collapsed .featured-collapse-btn .collapse-icon {
    transform: rotate(-90deg);
}

.featured-carousel-container {
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    overflow: hidden;
}

.featured-section.collapsed .featured-carousel-container {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

/* Featured Cards Carousel Container */
.featured-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 50px; /* More padding for arrow buttons */
}

.featured-cards {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 0.5rem 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #f59e0b #fef3c7;
    -webkit-overflow-scrolling: touch;
}

.featured-cards::-webkit-scrollbar {
    height: 8px;
}

.featured-cards::-webkit-scrollbar-track {
    background: #fef3c7;
    border-radius: 4px;
}

.featured-cards::-webkit-scrollbar-thumb {
    background: #f59e0b;
    border-radius: 4px;
}

/* Carousel Scroll Buttons */
.featured-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F4A823;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, transform 0.2s;
}

.featured-scroll-btn:hover {
    background: #D4900F;
    transform: translateY(-50%) scale(1.1);
}

.featured-scroll-btn.scroll-left {
    left: 0;
}

.featured-scroll-btn.scroll-right {
    right: 0;
}

.featured-scroll-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hide scroll buttons on mobile (touch scroll is natural) */
@media (max-width: 768px) {
    .featured-scroll-btn {
        display: none;
    }

    .featured-carousel-container {
        padding: 0;
    }
}

.featured-card {
    flex: 0 0 180px;
    min-width: 180px;
    position: relative;
    background: white;
    border-radius: 0;
    border: 2px solid #7B3FE4;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.featured-card img {
    width: 100%;
    aspect-ratio: 4.81 / 6.93;
    object-fit: contain;
    background: #f8f8f8;
}

/* Featured cards use horizontal bar badges above image */
.featured-card .card-badge {
    /* Override vertical style with horizontal bar */
    position: relative;
    writing-mode: horizontal-tb;
    text-orientation: initial;
    transform: none;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 5px 8px;
    text-align: center;
    border-radius: 0;
    font-size: 0.6rem;
    white-space: nowrap;
    display: block;
}

.featured-card .card-info {
    padding: 0.75rem;
}

.featured-card .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Badge color inherited from badge class (badge-new-release, badge-staff-pick, etc.) */

.featured-card .community-poll-badge {
    position: relative;
    display: block;
    background: var(--color-catnip);
    color: white;
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 0;
    font-weight: 600;
    text-align: left;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.75rem;
}

/* Series Grouped Layout */
.series-grouped-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.series-group {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
}

.series-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-catnip);
}

.series-header h3 {
    font-size: 1.5rem;
    color: #333;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.series-header p {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.series-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.75rem;
}

/* Mobile responsive for series layout */
@media (max-width: 768px) {
    .series-group {
        padding: 1rem;
    }

    .series-header h3 {
        font-size: 1.25rem;
    }

    .series-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

.card-option {
    position: relative;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.card-option:hover {
    border-color: var(--color-catnip);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
}

.card-option.selected {
    border-color: var(--color-catnip);
    background: #eef2ff;
}

.card-option img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: white;
}

.card-option .card-title {
    padding: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: #4a5568;
    font-size: 1.15rem;
}

/* ===========================================
   Card Badge Tags - Option A: Vertical Side Badge
   =========================================== */
.card-badge {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 24px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg); /* Text reads top-to-bottom */
    border-radius: 8px 0 0 8px;
}

/* New Release - Lavender with purple text */
.badge-new-release {
    background: var(--color-midnight);
    color: #ffffff;
}

/* Community Pick / Poll Winner - Blush pink */
.badge-community-pick {
    background: #FFE4EC;
    color: #9D174D;
}

/* Series Name - Uses lavender style */
.badge-series {
    background: var(--color-lavender);
    color: #4B2999;
    text-transform: none; /* Series names stay as-is */
}

/* Staff Pick - Purple (brand color) */
.badge-staff-pick {
    background: #7B3FE4;
    color: white;
}

/* Limited Edition - Ash Grey */
.badge-limited-edition {
    background: var(--color-ash);
    color: var(--color-white);
}

/* Popular - Biscuit (warm accent) */
.badge-popular {
    background: var(--color-biscuit);
    color: #ffffff;
}

/* ===========================================
   Card Badge Tags - Option D: Corner Ribbon (alternative)
   To use: add class "ribbon-style" to .card-badge
   =========================================== */
.card-badge.ribbon-style {
    /* Override vertical style with ribbon style */
    writing-mode: horizontal-tb;
    text-orientation: initial;
    transform: rotate(-45deg);
    top: 24px;
    left: -38px;
    bottom: auto;
    width: 155px;
    height: auto;
    padding: 5px 0;
    text-align: center;
    border-radius: 0;
    font-size: 0.6rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Favorite Paw Icon */
.favorite-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: white;
    color: #6B7280;
    border: 1px solid #6B7280;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
}

/* Favorited state - must come before hover to ensure proper cascade */
.favorite-icon.favorited {
    background: #F4A823 !important;
    color: white !important;
    border-color: #F4A823 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(244, 168, 35, 0.4) !important;
}

/* Paw image inside favorite icon - ensure transparency */
.favorite-icon img.fav-emoji {
    background: transparent !important;
    object-fit: contain;
    pointer-events: none;
}

/* Unfavorited hover state - when hovering on card OR icon */
/* Using !important to override inline styles set by JavaScript */
.card-option:hover .favorite-icon:not(.favorited),
.favorite-icon:not(.favorited):hover {
    background: #F0E8FF !important;
    color: #7B3FE4 !important;
    border-color: #7B3FE4 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(123, 63, 228, 0.2) !important;
}

/* Favorited hover state - dark charcoal with white paw, also when hovering on card */
.card-option:hover .favorite-icon.favorited,
.favorite-icon.favorited:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 6px 16px rgba(55, 65, 81, 0.5) !important;
    border-color: #374151 !important;
}

/* Disable hover effects on touch devices to prevent sticky hover states */
/* Uses .touch-device class added by JavaScript on first touch */
body.touch-device .card-option:hover .favorite-icon:not(.favorited),
body.touch-device .favorite-icon:not(.favorited):hover {
    background: white !important;
    color: #6B7280 !important;
    border-color: #6B7280 !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

body.touch-device .card-option:hover .favorite-icon.favorited,
body.touch-device .favorite-icon.favorited:hover {
    background: #F4A823 !important;
    color: white !important;
    border-color: #F4A823 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(244, 168, 35, 0.4) !important;
}

/* Active state for tapping - visual feedback */
body.touch-device .favorite-icon:not(.favorited):active {
    background: #F0E8FF !important;
    color: #7B3FE4 !important;
    border-color: #7B3FE4 !important;
    transform: scale(0.95) !important;
}

body.touch-device .favorite-icon.favorited:active {
    background: #374151 !important;
    transform: scale(0.95) !important;
    border-color: #374151 !important;
}

/* Customization Panel */
.customization-panel {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.customization-panel h2 {
    color: #7B3FE4;
    margin-bottom: 1.5rem;
    font-family: 'Amatic SC', cursive;
    font-size: 3rem;
    font-weight: 700;
}

/* Preview Section */
.preview-section {
    margin-bottom: 2rem;
    text-align: center;
}

/* Preview Toggle Buttons */
.preview-toggle {
    margin-top: 1rem; /* Match spacing below buttons */
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.toggle-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.15rem;
    color: #4a5568;
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    border-color: var(--color-biscuit);
    color: var(--color-biscuit);
}

.toggle-btn.active {
    background: var(--color-biscuit);
    border-color: var(--color-biscuit);
    color: white;
}

/* Card Preview Base */
.card-preview {
    position: relative;
    display: none;
    max-width: 400px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: white;
    transition: all 0.3s ease;
}

/* Inside view - solid background, no transparency issues */
.card-preview.inside-view {
    background: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* Dynamic card sizes based on paper selection - scaled proportionally */
.card-preview.size-5x7 {
    width: 300px;
    height: 420px; /* 4.81:6.93 ratio - baseline */
}

.card-preview.size-4x6 {
    width: 240px;
    height: 360px; /* 4:6 ratio - smaller overall */
}

.card-preview.size-square {
    width: 300px;
    height: 300px; /* 1:1 ratio - same as 5x7 width */
}

/* Inside view - same dimensions as outside (card is same size, just opened) */
.card-preview.inside-view.size-5x7 {
    width: 300px;
    height: 420px;
}

.card-preview.inside-view.size-4x6 {
    width: 240px;
    height: 360px;
}

.card-preview.inside-view.size-square {
    width: 300px;
    height: 300px;
}

/* Desktop - Card previews sized to fit on screen without scrolling */
@media (min-width: 1024px) {
    .card-preview.size-5x7 {
        width: 320px;
        height: 448px;
    }

    .card-preview.size-4x6 {
        width: 260px;
        height: 390px;
    }

    .card-preview.size-square {
        width: 320px;
        height: 320px;
    }

    /* Inside view - same dimensions as outside on desktop */
    .card-preview.inside-view.size-5x7 {
        width: 320px;
        height: 448px;
    }

    .card-preview.inside-view.size-4x6 {
        width: 260px;
        height: 390px;
    }

    .card-preview.inside-view.size-square {
        width: 320px;
        height: 320px;
    }

    /* Bigger card thumbnails on desktop */
    .card-option img {
        height: 280px;
    }

    .card-option {
        min-height: 360px;
    }
}

.card-preview.active {
    display: block !important;
}

.card-preview:not(.active) {
    display: none !important;
}

.preview-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Outside Preview */
.outside-view img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: white;
}

/* Inside Preview - canvas-rendered for consistency with zoom modal */
.inside-view {
    display: none;
    position: relative;
}

.inside-view.active {
    display: block !important;
}

#insidePreviewImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Customization Options */
.customization-options {
    margin-bottom: 2rem;
}

.option-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.option-group:last-child {
    border-bottom: none;
}

.option-group h3 {
    color: #7B3FE4;
    font-family: 'Amatic SC', cursive;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* Static Card Details */
.card-details-static .static-details {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
}

.card-details-static .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.card-details-static .detail-row:last-child {
    border-bottom: none;
}

.card-details-static .detail-label {
    color: #64748b;
    font-weight: 500;
}

.card-details-static .detail-value {
    color: #1e293b;
    font-weight: 600;
}

.option-group select,
.option-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1.15rem;
    transition: border-color 0.3s ease;
}

.option-group select:focus,
.option-group textarea:focus {
    outline: none;
    border-color: #7B3FE4;
    box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.1);
}

.option-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.character-count {
    text-align: right;
    font-size: 1rem;
    color: #718096;
    margin-top: 0.25rem;
}

/* Reset Message Button */
.reset-message-btn {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #4a5568;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.reset-message-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    color: #2d3748;
}

/* Leave Blank Checkbox */
.leave-blank-option {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.leave-blank-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #4a5568;
    font-size: 1.1rem;
}

.leave-blank-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.leave-blank-option span {
    user-select: none;
}

/* Color Options */
.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* White color swatch gets a subtle border so it's visible */
.color-swatch.color-white {
    border-color: #e2e8f0 !important;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.color-swatch.selected {
    border-color: #4a5568;
    transform: scale(1.1);
}

/* White swatch needs dark border when selected to be visible */
.color-swatch.color-white.selected {
    border-color: #333333 !important;
}

/* Custom tooltip for color names */
.color-swatch::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.color-swatch:hover::after {
    opacity: 1;
}

/* Style Options */
.style-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.style-option {
    text-align: center;
    padding: 1rem 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f7fafc;
}

.style-option:hover {
    border-color: var(--color-catnip);
    background: #eef2ff;
}

.style-option.selected {
    border-color: var(--color-catnip);
    background: #eef2ff;
    color: var(--color-catnip);
}

.style-option img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* Order Section */
.order-section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.price-display {
    margin-bottom: 1rem;
}

.price {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
}

.add-to-cart-btn,
.preview-order-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1.15rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 0.5rem;
}

.add-to-cart-btn {
    background: var(--color-catnip);
    color: white;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.preview-order-btn {
    background: #e2e8f0;
    color: #4a5568;
}

.preview-order-btn:hover {
    background: #cbd5e0;
}

/* Footer */
footer {
    background: #2d3748;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Header mobile adjustments */
    .header-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        justify-content: center;
    }

    .cats-illustration {
        max-height: 80px;
    }

    .website-name {
        max-height: 60px;
    }

    .customization-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .preview-column {
        position: static;
        order: 1;
        width: 100%;
        top: auto;
    }

    .options-column {
        padding-left: 0;
        padding-top: 0; /* Reset desktop padding */
        order: 2;
    }

    /* Reset page-header from fixed to normal flow on mobile */
    .page-header {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        z-index: auto;
        box-shadow: none;
    }

    /* Reset customization-layout margin on mobile */
    .customization-page .customization-layout {
        margin-top: 0;
    }

    main {
        padding: 1rem 0;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    .card-preview {
        max-width: 250px;
    }

    /* Responsive card size adjustments */
    .card-preview.size-5x7 {
        width: 200px;
        height: 280px;
    }

    .card-preview.size-4x6 {
        width: 160px;
        height: 240px;
    }

    .card-preview.size-square {
        width: 200px;
        height: 200px;
    }

    /* Mobile inside view - same dimensions as outside */
    .card-preview.inside-view.size-5x7 {
        width: 200px;
        height: 280px;
    }

    .card-preview.inside-view.size-4x6 {
        width: 160px;
        height: 240px;
    }

    .card-preview.inside-view.size-square {
        width: 200px;
        height: 200px;
    }

    .color-options {
        justify-content: center;
    }

    .style-options {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .add-to-cart-btn,
    .preview-order-btn {
        display: block;
        width: 100%;
        margin: 0.25rem 0;
    }

    .preview-toggle {
        flex-direction: row;
        gap: 0.5rem;
    }

    .filter-tabs {
        justify-content: center;
        gap: 0.2rem; /* Tighter spacing */
    }

    .filter-tab {
        padding: 0.4rem 0.75rem; /* More compact buttons */
        font-size: 0.8rem; /* Slightly smaller text */
    }

    /* Reduce filter section vertical space */
    .filter-section {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Mobile dropdown adjustments */
    .filter-dropdown-container {
        width: auto;
    }

    .filter-dropdown-toggle {
        width: auto;
    }

    /* Featured section - more compact on mobile */
    .featured-section {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .featured-header {
        margin-bottom: 0.5rem;
    }

    .featured-header h2 {
        font-size: 1.2rem;
    }

    .filter-dropdown-menu {
        left: 0;
        right: 0;
        width: 100%;
        min-width: unset;
    }

    .filter-dropdown-item {
        font-size: 0.8rem; /* Match filter-tab size */
        padding: 0.5rem 0.75rem; /* More compact */
    }

    .toggle-btn {
        flex: 1;
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }

    .page-header {
        margin-bottom: 0.75rem;
    }

    .inside-view {
        min-height: unset;
    }

}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .card-selection,
    .customization-panel {
        padding: 1rem;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .card-preview {
        max-width: 200px;
    }

    /* Extra small screen card sizes */
    .card-preview.size-5x7 {
        width: 150px;
        height: 210px;
    }

    .card-preview.size-4x6 {
        width: 120px;
        height: 180px;
    }

    .card-preview.size-square {
        width: 150px;
        height: 150px;
    }

    /* Extra small inside view - same dimensions as outside */
    .card-preview.inside-view.size-5x7 {
        width: 150px;
        height: 210px;
    }

    .card-preview.inside-view.size-4x6 {
        width: 120px;
        height: 180px;
    }

    .card-preview.inside-view.size-square {
        width: 150px;
        height: 150px;
    }

    header h1 {
        font-size: 1.75rem;
    }
}

/* Utility Classes */
.hidden {
    display: none;
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--color-catnip);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

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

/* ===== BUNDLE BUILDER STYLES ===== */

/* Bundle Builder Page */
.bundle-builder-page {
    display: none;
}

.bundle-builder-page.active {
    display: block;
}

/* Mobile Bundle Notice */
.mobile-bundle-notice {
    display: none; /* Hidden by default, shown on mobile */
    background: linear-gradient(135deg, #F0E8FF 0%, #E8DFFF 100%);
    border: 1px solid #D4C4FF;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 1rem 0;
    font-size: 14px;
    color: #5B21B6;
    align-items: center;
    gap: 10px;
}

.mobile-bundle-notice i {
    font-size: 18px;
    flex-shrink: 0;
}

.mobile-bundle-notice span {
    flex: 1;
}

.mobile-notice-dismiss {
    background: none;
    border: none;
    color: #7B3FE4;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .mobile-bundle-notice {
        display: flex;
    }
}

/* Bundle Type Tabs */
.bundle-type-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.bundle-type-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.bundle-type-tab {
    padding: 0.75rem 2rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #4a5568;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.bundle-type-tab:hover {
    border-color: var(--color-catnip);
    color: var(--color-catnip);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.bundle-type-tab.active {
    background: var(--color-catnip);
    color: white;
    border-color: var(--color-catnip);
}

/* Bundle Layout */
.bundle-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.bundle-cards-column {
    min-height: 100vh;
}

.bundle-summary-column {
    position: relative;
    height: 100%;
}

.bundle-cards-column h3,
.bundle-summary-column h3 {
    margin-bottom: 1.5rem;
    color: #2d3748;
    font-size: 1.75rem;
}

/* Bundle Filter Tabs */
.bundle-filter-section {
    margin-bottom: 2rem;
}

.bundle-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center bundle filter buttons */
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bundle-filter-tab {
    padding: 0.75rem 1.25rem;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.25rem;
    color: #4a5568;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bundle-filter-tab:hover {
    border-color: #F4A823;
    color: #F4A823;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244, 168, 35, 0.15);
}

.bundle-filter-tab.active {
    background: #F4A823;
    color: white;
    border-color: #F4A823;
}

/* Bundle Card Grid */
.bundle-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    position: relative;
    z-index: 10; /* Below sticky navbar (1020) to prevent overlap */
    width: 100%;
    max-width: none;
}

.pagination-btn {
    background: white;
    color: var(--color-catnip);
    border: 2px solid var(--color-catnip);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 11; /* Above pagination-controls but below navbar */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--color-catnip);
    color: white;
    border-color: var(--color-catnip);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info {
    /* Text info on shop cards page - no specific styling needed, uses inline styles */
}

.pagination-numbers {
    /* Page number buttons container for bundle pagination */
    display: flex;
    gap: 5px;
    align-items: center;
}

.bundle-card-option {
    position: relative;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.bundle-card-option:hover {
    border-color: #cbd5e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.bundle-card-option.selected {
    /* Border color now set via JS on the image based on card type (AI/overlay/regular) */
    background: #eef2ff;
}

.bundle-card-option img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: white;
}

.bundle-card-option .card-title {
    padding: 0.5rem;
    font-weight: 500;
    text-align: center;
    color: #4a5568;
    font-size: 1.15rem;
}

.bundle-card-option .add-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #48bb78;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bundle-card-option.selected .add-indicator {
    opacity: 1;
}

/* Bundle Quantity Badge (for duplicate cards) */
.bundle-quantity-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 32px;
    height: 32px;
    background: var(--color-catnip);
    color: white;
    border-radius: 16px;
    display: none; /* Hidden by default, shown by JS when count > 0 */
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 10;
}

.bundle-quantity-badge[style*="display: block"] {
    display: flex !important;
}

/* Bundle Card Ribbon Badges */
.bundle-card-option .card-badge.ribbon-style {
    /* Scale ribbon for smaller bundle cards */
    width: 125px;
    font-size: 0.55rem;
    top: 18px;
    left: -34px;
    padding: 3px 0;
    letter-spacing: -0.2px;
    /* Improve small text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Bundle Summary */
.bundle-summary-sticky {
    position: sticky;
    top: 2rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

/* Hide mobile-only bundle elements on desktop */
.mobile-bundle-drawer,
.mobile-bundle-fab,
.mobile-bundle-backdrop {
    display: none;
}

/* Bundle Size Selector */
.bundle-size-selector {
    margin-bottom: 2rem;
}

.bundle-size-selector h4 {
    margin-bottom: 1rem;
    color: #2d3748;
    font-size: 1.3rem;
}

.size-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.size-option {
    padding: 0.75rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #4a5568;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

.size-option:hover {
    border-color: var(--color-catnip);
    color: var(--color-catnip);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.size-option.active {
    background: var(--color-catnip);
    color: white;
    border-color: var(--color-catnip);
}

.size-option small {
    display: block;
    font-size: 1rem;
    margin-top: 0.25rem;
    opacity: 0.8;
}

/* Selected Cards Preview */
.selected-cards-preview {
    margin-bottom: 2rem;
}

.selected-cards-preview h4 {
    margin-bottom: 1rem;
    color: #2d3748;
    font-size: 1.3rem;
}

/* Bulk Settings Panel */
.bulk-settings-panel {
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.bulk-settings-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    transition: background-color 0.2s;
}

.bulk-settings-toggle:hover {
    background: #edf2f7;
}

.bulk-settings-toggle .toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.bulk-settings-toggle.expanded .toggle-icon {
    transform: rotate(90deg);
}

.bulk-settings-content {
    padding: 1rem;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.bulk-setting-group {
    margin-bottom: 1rem;
}

.bulk-setting-group:last-of-type {
    margin-bottom: 1rem;
}

.bulk-setting-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.bulk-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bulk-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.bulk-color-swatch:hover {
    transform: scale(1.1);
    border-color: var(--color-catnip);
}

.bulk-color-swatch.selected {
    border-color: var(--color-catnip);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

.bulk-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal !important;
}

.bulk-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.bulk-setting-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}

.bulk-setting-group textarea:focus {
    outline: none;
    border-color: var(--color-catnip);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.bulk-setting-group textarea:disabled {
    background: #f7fafc;
    color: #a0aec0;
}

.bulk-char-count {
    font-size: 0.75rem;
    color: #718096;
    text-align: right;
    margin-top: 0.25rem;
}

.bulk-settings-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bulk-apply-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    background: var(--color-catnip);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bulk-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.bulk-reset-btn {
    padding: 0.6rem 1rem;
    background: white;
    color: #e53e3e;
    border: 1px solid #e53e3e;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bulk-reset-btn:hover {
    background: #fff5f5;
}

.selected-cards-list {
    max-height: 580px; /* ~10 cards visible before scroll kicks in */
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem;
}

.selected-card-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: #f7fafc;
    border-radius: 4px;
    font-size: 1.15rem;
}

.selected-card-item:last-child {
    margin-bottom: 0;
}

.selected-card-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    background: white;
    border-radius: 4px;
    margin-right: 0.5rem;
}

.selected-card-item .card-name {
    flex: 1;
    color: #4a5568;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
}

.selected-card-item .remove-btn {
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.selected-card-item .remove-btn:hover {
    background: #c53030;
}

/* Bundle Pricing */
.bundle-pricing {
    margin-bottom: 2rem;
}

.pricing-breakdown {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1rem;
    background: #f7fafc;
}

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: #4a5568;
    font-size: 1.2rem;
}

.price-line:last-child {
    margin-bottom: 0;
}

.price-line.discount {
    color: #e53e3e;
}

.price-line.total {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: #2d3748;
}

/* Add Bundle Button */
.add-bundle-btn {
    width: 100%;
    padding: 1rem;
    background: var(--color-catnip);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-bundle-btn:hover:not(:disabled) {
    background: #6930c3;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(123, 63, 228, 0.4);
}

.add-bundle-btn:disabled {
    background: #a0aec0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Travel Sub-filters */
.travel-subfilters {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #f8f9ff;
    border-radius: 8px;
    border-left: 4px solid var(--color-catnip);
}

.cat-subfilters {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #fff8f5;
    border-radius: 8px;
    border-left: 4px solid #f6ad55;
}

.subfilter-group {
    margin-bottom: 1rem;
}

.subfilter-group:last-child {
    margin-bottom: 0;
}

.subfilter-group h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subfilter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.subfilter-tab {
    padding: 0.375rem 0.75rem;
    background: white;
    color: #718096;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subfilter-tab:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    color: #4a5568;
}

.subfilter-tab.active {
    background: #F4A823;
    color: white;
    border-color: #F4A823;
}

@media (max-width: 768px) {
    .travel-subfilters,
    .cat-subfilters {
        padding: 1rem;
    }

    .subfilter-tab {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Favorites Bundle Action */
.favorites-bundle-action {
    text-align: center;
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--color-catnip);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(123, 63, 228, 0.2);
}

.favorites-to-bundle-btn,
.clear-favorites-btn {
    background: white;
    color: var(--color-catnip);
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0.25rem 0.5rem;
}

.favorites-to-bundle-btn:hover,
.clear-favorites-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background: #f8f9ff;
}

.clear-favorites-btn {
    background: #e53e3e;
    color: white;
}

.clear-favorites-btn:hover {
    background: #c53030;
}

.bundle-action-hint {
    color: white;
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Bundle Section Display Control */
.custom-bundle-section,
.themed-bundle-section {
    display: none;
}

.custom-bundle-section.active,
.themed-bundle-section.active {
    display: block;
}

/* Themed Bundles Styles */
.themed-bundles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.themed-bundle-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.themed-bundle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: var(--color-catnip);
}

.themed-bundle-card .bundle-image:hover,
.themed-bundle-card h3:hover,
.themed-bundle-card p:hover {
    opacity: 0.8;
}

.bundle-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.bundle-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show full card instead of cropping */
    background: #f7fafc; /* Light background for any empty space */
    transition: transform 0.3s ease;
}

.themed-bundle-card:hover .bundle-image img {
    transform: scale(1.05);
}

.bundle-size-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(244, 168, 35, 0.95);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.series-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-catnip);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.bundle-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bundle-info h3 {
    margin: 0 0 0.5rem 0;
    font-family: 'Amatic SC', cursive;
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
}

.bundle-info p {
    margin: 0 0 1rem 0;
    color: #718096;
    font-size: 0.9rem;
    line-height: 1.5;
    flex-grow: 1;
    min-height: 3rem;
}

.bundle-pricing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.bundle-regular-price {
    font-size: 0.9rem;
    color: #a0aec0;
    text-decoration: line-through;
}

.bundle-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
}

.bundle-discount {
    background: #48bb78;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Selected Cards Display */
.selected-card-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8f9ff;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0;
}

.selected-card-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.selected-card-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: #4a5568;
}

.remove-card-btn {
    width: 24px;
    height: 24px;
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-card-btn:hover {
    background: #c53030;
    transform: scale(1.1);
}

/* Bundle Card Customization Badges */
.bundle-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-right: auto;
}

.bundle-card-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.bundle-card-badge.color-badge {
    background: var(--color-catnip);
    color: white;
}

.bundle-card-badge.blank-badge {
    background: #f0f0f0;
    color: #666;
    border: 1px solid #ccc;
}

.bundle-card-badge.message-badge {
    background: #48BB78;
    color: white;
}

.bundle-card-badge.ai-badge {
    background: #6B46C1;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.bundle-card-badge.overlay-badge {
    background: #EC4899;
    color: white;
    font-size: 12px;
}

.bundle-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 100px; /* Ensure consistent height whether 1 or 2 buttons */
    justify-content: flex-end; /* Align buttons to bottom */
}

.add-themed-bundle-btn,
.customize-bundle-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-themed-bundle-btn {
    background: var(--color-catnip);
    color: white;
    border: 2px solid var(--color-catnip);
}

.add-themed-bundle-btn:hover {
    background: white;
    color: var(--color-catnip);
    border: 2px solid var(--color-catnip);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 63, 228, 0.3);
}

.customize-bundle-btn {
    background: white;
    color: var(--color-catnip);
    border: 2px solid var(--color-catnip);
}

.customize-bundle-btn:hover {
    background: var(--color-catnip);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 63, 228, 0.3);
}

/* Bundle Preview Modal */
.bundle-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050; /* Above navbar (1020-1030) */
}

.bundle-preview-modal.active {
    display: block;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 90%;
    max-height: 85vh; /* Reduced to ensure it fits with navbar */
    margin-top: 20px; /* Push down slightly to avoid navbar overlap */
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2 {
    margin: 0;
    color: #7B3FE4;
    font-size: 2rem;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: #a0aec0;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #f7fafc;
    color: #4a5568;
}

.modal-body {
    padding: 1.5rem;
}

.preview-bundle-info {
    margin-bottom: 1.5rem;
}

.preview-bundle-info p {
    margin: 0 0 1rem 0;
    color: #718096;
    line-height: 1.6;
}

.preview-bundle-pricing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preview-regular-price {
    font-size: 1rem;
    color: #a0aec0;
    text-decoration: line-through;
}

.preview-bundle-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
}

.preview-bundle-discount {
    background: #48bb78;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.preview-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.preview-card-item {
    text-align: center;
}

.preview-card-item img {
    width: 100%;
    aspect-ratio: 4.81 / 6.93; /* 4.81x6.93 card ratio to show full card */
    object-fit: contain; /* Show full card instead of cropping */
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #f7fafc; /* Light background for any empty space */
}

.preview-card-item .card-title {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #4a5568;
    font-weight: 500;
}

/* Tap-to-flip card preview in bundle modal */
.preview-card-item {
    cursor: pointer;
}

.preview-card-item .card-front {
    width: 100%;
    aspect-ratio: 4.81 / 6.93;
}

.preview-card-item .card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.preview-card-item .card-inside {
    width: 100%;
    aspect-ratio: 4.81 / 6.93;
    border-radius: 8px;
    border: 2px solid #7B3FE4;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

.preview-card-item .inside-message-text {
    font-size: clamp(6px, 1.8vw, 10px);
    color: #333;
    line-height: 1.15;
    font-style: italic;
    text-align: center;
    max-height: 100%;
    overflow: hidden;
}

.preview-card-item .inside-blank-text {
    font-size: 0.55rem;
    color: #999;
    font-style: italic;
    text-align: center;
}

.preview-card-item .tap-hint {
    margin-top: 0.2rem;
    font-size: 0.55rem;
    color: #7B3FE4;
    text-align: center;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    position: sticky;
    bottom: 0;
    background: white;
    padding-bottom: 1rem;
    z-index: 10;
}

/* On mobile, make modal-body scrollable and modal-actions sticky */
@media (max-width: 768px) {
    .bundle-preview-modal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 90vh !important;
    }

    .bundle-preview-modal .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }

    .bundle-preview-modal .modal-header {
        flex-shrink: 0;
    }

    .bundle-preview-modal .modal-actions {
        flex-shrink: 0;
        margin-top: 0;
        padding: 1rem;
        background: white;
        border-top: 2px solid #e2e8f0;
    }
}

.modal-add-to-cart-btn,
.modal-customize-btn {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-add-to-cart-btn {
    background: var(--color-catnip);
    color: white;
}

.modal-add-to-cart-btn:hover {
    background: #6930c3;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(123, 63, 228, 0.4);
}

.modal-customize-btn {
    background: white;
    color: var(--color-catnip);
    border: 2px solid var(--color-catnip);
}

.modal-customize-btn:hover {
    background: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
        top: 5vh !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* Only center horizontally */
        margin-top: 0 !important;
    }

    .preview-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }

    .modal-actions {
        flex-direction: column;
    }
}

/* Mobile Responsiveness for Bundle Builder */
@media (max-width: 768px) {
    .bundle-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Reduce gap between header and bundle type tabs */
    .bundle-type-tabs {
        margin-bottom: 1rem; /* Reduced from 2rem */
    }

    /* Make bundle type tabs equal width and less thick on mobile */
    .bundle-type-tab {
        flex: 1; /* Equal width buttons */
        text-align: center;
        padding: 0.5rem 1.5rem; /* Reduced from 0.75rem 2rem */
    }

    .bundle-filter-tabs {
        gap: 0.25rem;
    }

    .bundle-filter-tab {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .bundle-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }

    .size-options {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem;
    }

    .main-nav {
        flex-direction: column;
        align-items: center;
    }

    .nav-btn {
        width: 200px;
    }

    .themed-bundles-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bundle-image {
        height: 180px;
    }

    .bundle-info {
        padding: 1.25rem;
    }

    .bundle-pricing {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* Bundle Card Customization Modal */
.bundle-card-customize-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040; /* Higher than pagination controls (1030) */
}

.bundle-card-customize-modal.active {
    display: block;
}

.bundle-card-customize-modal .modal-content {
    max-width: 600px;
}

.customize-preview {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
}

.customize-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.customize-options {
    margin-bottom: 1rem;
}

.modal-save-btn,
.modal-cancel-btn {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-save-btn {
    background: var(--color-catnip);
    color: white;
}

.modal-save-btn:hover {
    background: #6930c3;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(123, 63, 228, 0.4);
}

.modal-cancel-btn {
    background: #e2e8f0;
    color: #4a5568;
}

.modal-cancel-btn:hover {
    background: #cbd5e0;
}

/* Customize button in selected cards */
.customize-card-btn {
    width: 20px;
    height: 20px;
    background: var(--color-catnip);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    margin-left: 0.25rem;
}

.customize-card-btn:hover {
    background: #5a67d8;
}

.selected-card-item.customized {
    border-color: var(--color-catnip);
    background: #eef2ff;
}

/* Zoom Modal */
.zoom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10100; /* Above bundle-card-customize-modal (10001) so zoom works inside bundle modal */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zoom-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.zoom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.zoom-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10001;
}

.zoom-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    z-index: 10002;
}

.zoom-modal-close:hover {
    transform: scale(1.2);
}

#zoomModalImage {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.zoom-modal-label {
    margin-top: 1rem;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

/* Add zoom cursor hint to previews */
.card-preview {
    cursor: zoom-in;
}

.card-preview img {
    cursor: zoom-in;
}

/* Zoom navigation arrows */
.zoom-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.zoom-nav-arrow:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.zoom-nav-arrow span {
    font-size: 3rem;
    color: #2d3748;
    line-height: 1;
    margin-top: -4px; /* Nudge up to visually center the arrow characters */
}

.zoom-nav-left {
    left: 2rem;
}

.zoom-nav-right {
    right: 2rem;
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
    .zoom-nav-arrow {
        width: 50px;
        height: 50px;
    }

    .zoom-nav-arrow span {
        font-size: 2.5rem;
    }

    .zoom-nav-left {
        left: 1rem;
    }

    .zoom-nav-right {
        right: 1rem;
    }
}

/* ============================================
   AI Cat Customization Section
   ============================================ */

.ai-customization-section {
    background: var(--color-catnip);
    border: none;
    padding: 1.5rem;
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.ai-customization-section h3 {
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-family: 'Amatic SC', cursive;
    font-size: 2rem;
    font-weight: 700;
}

.ai-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
}

.ai-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.generation-counter {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

.ai-input-group {
    margin-bottom: 1rem;
}

.ai-input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: white;
}

.ai-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #2d3748;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-select:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: white;
}

.ai-select:focus {
    outline: none;
    border-color: white;
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.hair-length-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.radio-option {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radio-option:hover {
    background: rgba(255, 255, 255, 0.3);
}

.radio-option input[type="radio"] {
    cursor: pointer;
}

.radio-option input[type="radio"]:checked + span {
    font-weight: 600;
}

.radio-option span {
    color: white;
    font-size: 1rem;
}

.generate-ai-btn {
    width: 100%;
    padding: 1rem;
    background: white;
    color: var(--color-catnip);
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    position: relative;
}

.generate-ai-btn:hover:not(:disabled) {
    background: #f7fafc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.generate-ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.generate-ai-btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn-loading {
    display: none;
}

.generate-ai-btn.loading .btn-text {
    display: none;
}

.generate-ai-btn.loading .btn-loading {
    display: inline;
}

.save-custom-btn {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.75rem;
}

.save-custom-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
    transform: translateY(-2px);
}

/* Holiday Overlay Section */
.holiday-overlay-section {
    background: #7B3FE4;
    border: none;
    padding: 1.5rem;
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(123, 63, 228, 0.3);
}

.holiday-overlay-section h3 {
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.holiday-info {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.75rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-size: 1rem;
}

.holiday-info strong {
    color: white;
    font-size: 1.1rem;
}

.holiday-dates {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.accessory-preview {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.75rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.accessory-description {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 0.95rem;
}

.overlay-success {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem;
    text-align: center;
}

.overlay-success p {
    margin: 0;
    color: white;
    font-weight: 600;
}

/* Bundle Draft Indicator - In Progress (default) */
.bundle-draft-indicator {
    background: #F4A823;
    border: 2px solid #F4A823;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 2px 8px rgba(244, 168, 35, 0.3);
    transition: all 0.3s ease;
}

.draft-text {
    flex: 1;
    color: white;
    font-size: 0.95rem;
}

.draft-text strong {
    color: white;
    font-weight: 700;
}

/* Warning state - too many cards selected */
.draft-warning {
    color: white !important;
}

.draft-warning strong {
    color: white !important;
}

.draft-action-hint {
    display: block;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

/* Warning state banner styling */
.bundle-draft-indicator:has(.draft-warning) {
    background: #EF4444;
    border-color: #EF4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Complete state - bundle ready */
.draft-complete {
    color: white !important;
}

.draft-complete strong {
    color: white !important;
}

/* Complete state banner styling */
.bundle-draft-indicator:has(.draft-complete) {
    background: #10B981;
    border-color: #10B981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Clear button - default (in progress/biscuit) */
.draft-clear-btn {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #F4A823;
    border-radius: 6px;
    color: #F4A823;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.draft-clear-btn:hover {
    transform: translateY(-1px);
}

/* Update clear button color for warning state */
.bundle-draft-indicator:has(.draft-warning) .draft-clear-btn {
    border-color: #EF4444;
    color: #EF4444;
}

/* Update clear button color for complete state */
.bundle-draft-indicator:has(.draft-complete) .draft-clear-btn {
    border-color: #10B981;
    color: #10B981;
}

/* Multi-Cat Warning */
.multi-cat-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.multi-cat-warning h3 {
    color: #92400e;
    font-size: 2rem;  /* Amatic SC needs larger size to be readable */
    margin-bottom: 0.5rem;
}

.multi-cat-warning .info-text {
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* AI Art Disclosure Notice */
.ai-art-notice {
    background: #F0E8FF;
    border: 2px solid #7B3FE4;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.ai-art-notice p {
    color: #7B3FE4;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.ai-art-notice strong {
    color: #6B35CC;
}

/* Header Navigation Active States */
.navbar .nav-link.active {
    font-weight: 700 !important; /* Bold */
    color: var(--color-catnip) !important; /* Purple color */
    background: rgba(102, 126, 234, 0.1); /* Light purple background */
    border-radius: 6px;
    position: relative;
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--color-catnip);
    border-radius: 2px;
}

.navbar .nav-link {
    transition: all 0.2s ease;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    font-size: 1.1rem;
}

.navbar .nav-link:hover:not(.active) {
    color: var(--color-catnip) !important;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 6px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hair-length-options {
        flex-direction: column;
    }

    .radio-option {
        min-width: 100%;
    }

    /* Adjust navbar active indicator for mobile */
    .navbar .nav-link.active::after {
        display: none; /* Hide underline on mobile for cleaner look */
    }
}

/* ============================================
   Login Modal for AI Customization
   ============================================ */

.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.login-modal {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.login-modal h2 {
    margin-top: 0;
    color: var(--color-catnip);
    font-size: 1.5rem;
}

.login-modal p {
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.login-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-btn,
.register-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

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

.login-btn:hover {
    background: #6930c3;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(123, 63, 228, 0.4);
}

.register-btn {
    background: #48bb78;
    color: white;
}

.register-btn:hover {
    background: #38a169;
    transform: translateY(-2px);
}

.close-modal-btn {
    padding: 0.75rem 1.5rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #4a5568;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-modal-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* Pagination Styles */
.pagination-btn:hover {
    background: var(--color-catnip) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #999 !important;
}

.pagination-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.page-number-btn {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 3px;
    background: white;
    border: 2px solid #e0e0e0;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.page-number-btn:hover {
    background: white;
    border-color: var(--color-catnip);
    color: var(--color-catnip);
}

.page-number-btn.active {
    background: var(--color-catnip);
    color: white;
    border-color: var(--color-catnip);
}

.pagination-container {
    animation: fadeIn 0.3s ease-in;
    position: relative;
    z-index: 1; /* Lower than sticky navbar (1020) to prevent overlap */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===================================
   FOOTER STYLES
   =================================== */

/* Footer link hover effects */
footer a.text-muted:hover {
    color: var(--color-catnip) !important;
    transition: color 0.2s ease;
}

/* Footer icon spacing */
footer .bi {
    margin-right: 0.5rem;
}

/* Mobile responsiveness for footer */
@media (max-width: 767px) {
    footer .col-md-4 {
        text-align: center;
    }

    footer ul.list-unstyled {
        padding-left: 0;
    }
}

/* ========================================
   COMPREHENSIVE MOBILE FIXES (Jan 26, 2026)
   ======================================== */

@media (max-width: 768px) {
    /* 1. FIX HEADER SIZING */
    .navbar-brand img {
        height: 60px !important; /* Reduced from 120px */
    }

    .navbar-brand span {
        font-size: 1.8rem !important; /* Reduced from 3rem */
    }

    .navbar {
        padding: 0.25rem 0.75rem;
        z-index: 1030 !important; /* Above pagination controls */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important; /* Ensure solid background */
    }

    /* Add padding to body to account for fixed navbar (60px logo + padding) */
    body {
        padding-top: 75px !important;
    }

    /* Hide dev banner on mobile to simplify layout */
    .dev-notice-banner {
        display: none !important;
    }

    /* Ensure value-strip is visible below fixed navbar */
    .value-strip {
        position: relative;
        z-index: 1020; /* Just below navbar */
    }

    /* 2. FIX BUNDLE NAVIGATION OVERLAP */
    #paginationControls {
        z-index: 10 !important; /* Below header */
        flex-direction: row !important;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    #paginationControls button {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    #pageInfo {
        font-size: 0.9rem;
        margin: 0 0.5rem;
    }

    /* 3. FIX CART ITEM LAYOUT */
    .cart-item {
        flex-direction: column !important;
        padding: 1rem !important;
    }

    .cart-item img {
        width: 100% !important;
        max-width: 200px;
        margin: 0 auto 1rem;
    }

    .cart-item .item-details {
        width: 100% !important;
        text-align: center;
    }

    .cart-item .item-actions {
        width: 100% !important;
        margin-top: 1rem;
    }

    /* 4. FIX CARD INSIDE PREVIEW ASPECT RATIO */
    .card-preview-inside {
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
        aspect-ratio: 5 / 7 !important;
        margin: 0 auto;
    }

    .card-preview-inside img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #insideMessageOverlay {
        width: 100%;
        max-width: 300px;
        aspect-ratio: 4.81 / 6.93;
        overflow: hidden;
        white-space: normal !important;
    }

    #insideMessageText {
        width: 90%;
        max-height: 90%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        white-space: pre-wrap !important;
    }

    /* 5. FIX FOOTER STACKING */
    footer {
        padding: 2rem 1rem !important;
    }

    footer .row > div {
        margin-bottom: 1.5rem !important;
    }

    footer .col-md-4:last-child {
        margin-bottom: 0 !important;
    }

    footer h5 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    footer ul li {
        margin-bottom: 0.5rem;
    }

    footer .small {
        font-size: 0.85rem !important;
    }

    /* 6. FIX OCCASION FILTER BUTTONS */
    .occasion-filters {
        gap: 0.5rem !important;
    }

    .occasion-filters button {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* 7. FIX CARD GRID - 2 COLUMNS ON MOBILE */
    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important; /* Reduced gap for more space */
    }

    .card-item {
        width: 100%;
    }

    .card-item img {
        width: 100%;
        height: auto;
    }

    /* 8. REDUCE BUNDLE CARD IMAGE SIZE ON MOBILE */
    .bundle-card-option img {
        height: 120px !important; /* Match shop cards size */
    }

    .bundle-card-option .card-title {
        font-size: 0.9rem !important; /* Smaller text on mobile */
        padding: 0.4rem !important;
    }

    .card-option img {
        height: 100px !important; /* Slightly smaller shop cards */
    }

    .card-option .card-title {
        font-size: 0.9rem !important;
        padding: 0.5rem !important;
    }

    /* 9. FIX PAGINATION BUTTONS - ARROWS ONLY ON MOBILE */
    #prevPageBtn,
    #nextPageBtn,
    #bundlePrevPageBtn,
    #bundleNextPageBtn {
        padding: 10px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide text, show only arrows - Shop cards buttons */
    #prevPageBtn {
        font-size: 0 !important;
    }

    #prevPageBtn::after {
        content: "←";
        font-size: 1.3rem;
        display: block;
    }

    #nextPageBtn {
        font-size: 0 !important;
    }

    #nextPageBtn::after {
        content: "→";
        font-size: 1.3rem;
        display: block;
    }

    /* Hide text, show only arrows - Bundle buttons */
    #bundlePrevPageBtn {
        font-size: 0 !important;
    }

    #bundlePrevPageBtn .bi {
        display: none !important;
    }

    #bundlePrevPageBtn::after {
        content: "←";
        font-size: 1.3rem;
        display: block;
    }

    #bundleNextPageBtn {
        font-size: 0 !important;
    }

    #bundleNextPageBtn .bi {
        display: none !important;
    }

    #bundleNextPageBtn::after {
        content: "→";
        font-size: 1.3rem;
        display: block;
    }

    /* 10. FIX BUNDLE CARD GRID - 2 COLUMNS ON MOBILE */
    /* Note: Don't use !important on display - allows JS to hide grid for series view */
    .bundle-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* 11. FIX BUNDLE PAGINATION LAYOUT - PREVENT WRAPPING */
    .pagination-controls:not([style*="display: none"]),
    #bundlePagination:not([style*="display: none"]) {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        padding: 1rem 0.5rem !important;
        z-index: 10 !important; /* Below header */
    }

    .pagination-numbers {
        flex-shrink: 0 !important;
    }

    #bundlePageInfo {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }

    /* 12. REDUCE HERO BANNER HEIGHT ON MOBILE */
    .about-hero,
    .calendar-hero,
    .impact-hero,
    .contact-hero {
        padding: 2rem 1.5rem !important; /* Reduced from default ~4rem */
        min-height: auto !important;
    }

    .about-hero h1,
    .calendar-hero h1,
    .impact-hero h1,
    .contact-hero h1 {
        font-size: 1.8rem !important; /* Smaller heading */
        margin-bottom: 0.5rem !important;
    }

    .about-hero .lead,
    .calendar-hero .lead,
    .impact-hero .lead,
    .contact-hero .lead {
        font-size: 1rem !important; /* Smaller subtitle */
        margin-bottom: 0 !important;
    }

    /* Also fix page info text size */
    .pagination-info {
        font-size: 0.85rem !important;
    }

    /* 13. MODAL POSITIONING - Position from top on mobile */
    .bundle-preview-modal .modal-content,
    .bundle-card-customize-modal .modal-content {
        top: 2vh !important;
        transform: translateX(-50%) !important;
        max-height: 94vh !important;
        margin-top: 0 !important;
    }

    /* 14. MODAL Z-INDEX - Ensure modals appear above mobile bundle drawer (z-index: 9999) */
    .bundle-card-customize-modal {
        z-index: 10001 !important;
    }
    .bundle-card-customize-modal .modal-backdrop {
        z-index: 10000 !important;
    }
}

/* ========== PROMO NOTIFICATION ICON ========== */
.promo-notification-icon {
    display: none;
    font-size: 1.1em;
    margin-left: 4px;
    animation: promoBounce 1s ease-in-out infinite;
}

.promo-notification-icon.visible {
    display: inline-block;
}

@keyframes promoBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-2px);
    }
}

/* ========================================
   Search Bar
   ======================================== */

.search-bar-container {
    max-width: 500px;
    margin: 0.75rem auto;
    padding: 0 1rem;
}

.search-bar {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 25px;
    padding: 0.5rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar:focus-within {
    border-color: var(--color-catnip);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-icon {
    color: #9CA3AF;
    font-size: 1rem;
    margin-right: 0.75rem;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    background: transparent;
}

.search-input::placeholder {
    color: #9CA3AF;
}

.search-clear-btn {
    background: none;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.search-clear-btn:hover {
    color: var(--color-catnip);
}

/* Mobile adjustments for search */
@media (max-width: 768px) {
    .search-bar-container {
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .search-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}

/* No cards found message */
.no-cards-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #6B7280;
    font-size: 1rem;
    background: #F0E8FF;
    border: 2px solid #7B3FE4;
    border-radius: 12px;
    margin: 1rem 0;
}

.no-cards-message .no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.no-cards-message h3 {
    color: #7B3FE4;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.no-cards-message p {
    margin: 0.5rem 0;
}

.no-cards-message .no-results-suggestions {
    margin-top: 1.5rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.no-cards-message .no-results-suggestions ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
    text-align: left;
}

.no-cards-message .no-results-suggestions li {
    margin: 0.25rem 0;
    color: #6B7280;
}

.no-cards-message .clear-search-btn {
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: #F4A823;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.no-cards-message .clear-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 168, 35, 0.4);
}

/* ========================================
   Extra Small Mobile Breakpoint (480px)
   Fixes for 390px iPhone-class viewports
   ======================================== */
@media (max-width: 480px) {
    /* Global overflow prevention for mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* MOBILE-1: Fix Bundles page horizontal overflow */
    .search-bar-container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
    }

    .search-bar,
    .search-input {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bundle-cards-column {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .bundle-filter-section {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 0.25rem !important;
        box-sizing: border-box !important;
    }

    .bundle-filter-tabs {
        max-width: 100% !important;
        padding: 0 0.25rem !important;
        box-sizing: border-box !important;
    }

    /* MOBILE-3: Convert filter pills to horizontal scroll */
    /* Note: More comprehensive styles in section 7 below */
    .filter-tabs,
    .bundle-filter-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        padding-top: 6px;
        scrollbar-width: thin;
        justify-content: flex-start !important;
    }

    .filter-tab,
    .bundle-filter-tab {
        flex-shrink: 0 !important;
        white-space: nowrap;
    }

    /* MOBILE-4: Shorten Coming Soon banner */
    .dev-notice-banner {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    .dev-notice-banner .mobile-hide,
    .mobile-hide {
        display: none !important;
    }

    .dev-notice-banner .mobile-show,
    .mobile-show {
        display: inline !important;
    }

    /* MOBILE-5: Increase color swatches to 44px touch target */
    .color-swatch {
        width: 44px !important;
        height: 44px !important;
    }

    .bulk-color-swatch {
        width: 36px !important;
        height: 36px !important;
    }

    /* General container padding reduction */
    .container {
        padding: 0 10px;
    }
}

/* Hide mobile-show spans by default (shown only in 480px breakpoint) */
.mobile-show,
.dev-notice-banner .mobile-show {
    display: none;
}

/* Ensure mobile-hide is visible by default */
.mobile-hide,
.dev-notice-banner .mobile-hide {
    display: inline;
}

/* ============================================
   MOBILE RESPONSIVENESS FIXES (390px viewport)
   ============================================ */

@media (max-width: 480px) {
    /* 1. DISABLE ZOOM ON MOBILE - prevents width issues */
    html {
        zoom: 1 !important;
    }

    /* 2. FULL WIDTH CONTAINERS */
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .container,
    main.container {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* 3. VALUE STRIP BANNER - Horizontal scroll with hint */
    .value-strip {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .value-strip-inner {
        /* Show scroll hint by not centering */
        justify-content: flex-start !important;
        padding-right: 20px; /* Extra space at end to show more content exists */
    }

    .value-item {
        padding: 10px 12px !important;
        font-size: 11px !important;
    }

    /* Add scroll indicator gradient on right edge */
    .value-strip::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(123, 63, 228, 0.1));
        pointer-events: none;
    }

    /* 4. CUSTOMIZATION HEADER - Stack vertically */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.75rem 15px !important;
    }

    .page-header .back-btn {
        width: auto;
        margin-bottom: 0.25rem;
    }

    .page-header h2 {
        font-size: 2rem !important;
        line-height: 1.1;
    }

    /* 5. PAGINATION - Prevent cutoff */
    .pagination-controls,
    #paginationControls,
    #bundlePagination {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 5px !important;
        overflow-x: visible !important;
        box-sizing: border-box;
    }

    .pagination-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        min-width: 36px !important;
    }

    .page-number-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-width: 32px !important;
    }

    .pagination-info,
    #pageInfo,
    #bundlePageInfo {
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* Reduce gap between pagination elements */
    .pagination-numbers {
        gap: 3px !important;
    }

    /* 6. CARD GRID - Ensure full width */
    .card-grid {
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    /* 7. FILTER TABS - Allow horizontal scroll */
    .filter-tabs,
    .bundle-filter-tabs {
        overflow-x: auto;
        overflow-y: visible; /* Allow dropdowns to overflow vertically */
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 8px;
        padding-top: 6px; /* Prevent top cutoff */
        margin-top: 4px; /* Extra space above */
        justify-content: flex-start !important;
        gap: 6px !important; /* Consistent spacing between tabs */
    }

    .filter-tab,
    .bundle-filter-tab {
        flex-shrink: 0;
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap; /* Prevent tab text from wrapping */
    }

    /* 7b. DROPDOWN MENU - Full-width bottom sheet on mobile (more reliable than centered modal) */
    .filter-dropdown-menu {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 60vh !important;
        z-index: 99999 !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3) !important;
        background: white !important;
        overflow-y: auto !important;
        border: none !important;
        border-top: 3px solid #7B3FE4 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .filter-dropdown-container {
        position: static !important;
    }

    .filter-dropdown-item {
        padding: 0.9rem 1.25rem !important; /* Larger touch targets on mobile */
    }

    /* 8. SEARCH BAR - Full width */
    .search-bar-container,
    .search-bar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 9. BUNDLE SECTION - Full width */
    .bundle-cards-column,
    .bundle-filter-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
    }

    /* ========================================
       MOBILE BUNDLE DRAWER
       ======================================== */

    /* Hide the original bundle summary column on mobile */
    .bundle-summary-column {
        display: none !important;
    }

    /* Floating "View Bundle" button on LEFT side (mirrors return-to-top on right) */
    .mobile-bundle-fab {
        /* display controlled by JavaScript */
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #7B3FE4 0%, #9F7AEA 100%);
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(123, 63, 228, 0.4);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1000;
        transition: transform 0.2s, box-shadow 0.2s;
        border: none;
    }

    .mobile-bundle-fab:hover,
    .mobile-bundle-fab:active {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(123, 63, 228, 0.5);
    }

    .mobile-bundle-fab i {
        font-size: 24px;
        color: white;
    }

    /* Badge showing selected count on FAB */
    .mobile-bundle-fab .fab-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #F4A823;
        color: white;
        font-size: 12px;
        font-weight: bold;
        min-width: 22px;
        height: 22px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }

    /* Bundle drawer backdrop */
    .mobile-bundle-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-bundle-backdrop.active {
        display: block;
        opacity: 1;
    }

    /* Bundle drawer panel */
    .mobile-bundle-drawer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 1060;
        max-height: 85vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }

    .mobile-bundle-drawer.active {
        transform: translateY(0);
    }

    /* Drawer handle/header */
    .mobile-bundle-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        z-index: 1;
    }

    .mobile-bundle-drawer-header h3 {
        margin: 0;
        font-size: 18px;
        color: #7B3FE4;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-bundle-drawer-header .close-drawer {
        background: #f5f5f5;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Drawer content - reuse bundle-summary-sticky styles */
    .mobile-bundle-drawer .drawer-content {
        padding: 16px 20px;
    }

    /* Hide the mobile bundle notice since drawer is now the UX */
    .mobile-bundle-notice {
        display: none !important;
    }
}

/* ===== Mobile Bottom Sheet Modal Scrollbar ===== */
/* Make scrollbar visible on mobile bottom sheet for better UX */
#mobileBottomSheet > div {
    /* Show scrollbar on webkit (iOS Safari, Chrome) */
    -webkit-overflow-scrolling: touch;
}

#mobileBottomSheet > div::-webkit-scrollbar {
    width: 8px;
}

#mobileBottomSheet > div::-webkit-scrollbar-track {
    background: #e9e9e9;
    border-radius: 4px;
}

#mobileBottomSheet > div::-webkit-scrollbar-thumb {
    background: #9061e0;
    border-radius: 4px;
}

#mobileBottomSheet > div::-webkit-scrollbar-thumb:hover {
    background: #7B3FE4;
}

/* Body scroll lock — used when a modal/sheet is open on touch devices */
body.modal-scroll-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* ===== Tablet Responsiveness (769px - 1024px) ===== */
/* Handles the gap between mobile and desktop breakpoints */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Hide inline .vt tooltips on tablet — tapping opens bottom-sheet modal instead */
    .vt {
        display: none !important;
    }

    /* Filter tabs - horizontal scroll on tablet */
    .filter-tabs,
    .bundle-filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #c4b5fd #f1f1f1;
        /* Critical: constrain width so the tabs don't push the page wider than the viewport */
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .filter-tabs::-webkit-scrollbar,
    .bundle-filter-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .filter-tabs::-webkit-scrollbar-track,
    .bundle-filter-tabs::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .filter-tabs::-webkit-scrollbar-thumb,
    .bundle-filter-tabs::-webkit-scrollbar-thumb {
        background: #c4b5fd;
        border-radius: 3px;
    }

    /* Info bar (value strip) — scrollable on portrait tablet.
       Desktop CSS sets overflow:visible for tooltips, but on tablet .vt is hidden
       so we can safely scroll without clipping concern. */
    .value-strip {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .value-strip-inner {
        overflow: auto !important;
        justify-content: flex-start !important;
        padding-right: 16px;
    }
    .value-item {
        flex-shrink: 0;
        padding: 10px 14px; /* Slightly tighter than desktop so more items fit */
    }

    /* Prevent page-level horizontal overflow */
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Navbar adjustments for tablet */
    .navbar .nav-link {
        font-size: 1rem;
        padding: 0.4rem 0.6rem !important;
        margin: 0 0.1rem;
        white-space: nowrap;
    }

    /* Override the inline margin:-10px 0 on .navbar-brand. That negative margin is sized
       for the tall 120px desktop navbar; on the short tablet navbar it pulls the 70px
       logo up past the top edge (clipped) and down into the content below (overlap). */
    .navbar-brand {
        margin: 0 !important;
        align-items: center;
    }

    .navbar-brand span {
        font-size: 2rem !important;
    }

    .navbar-brand img {
        height: 70px !important;
    }

    /* Customization page: use the stacked layout (same as mobile) instead of the
       desktop fixed-header + sticky-28%-preview approach. Trying to pixel-tune the
       fixed/sticky offsets against a variable-height tablet navbar left a gap below the
       navbar AND let the narrow 28% preview column overlap the options column. Stacking
       (preview on top, options below, everything in normal flow) removes all of that. */
    .customization-page .customization-layout {
        flex-direction: column;
        align-items: stretch; /* Override desktop flex-start so columns span full width */
        gap: 1.5rem;
        margin-top: 0;
    }
    .preview-column {
        position: static;
        top: auto;
        order: 1;
        width: 100%;
    }
    .options-column {
        order: 2;
        padding-left: 0;
        padding-top: 0;
        width: 100%; /* Full width in the stacked column layout */
    }
    /* Center the card preview + toggle buttons in the now full-width column */
    .preview-column .card-preview {
        margin-left: auto;
        margin-right: auto;
    }
    /* Sticky back/title bar — stays in document flow (no gap) and locks just below navbar.
       Extend by container's 20px padding on each side so it spans the full viewport width. */
    .page-header {
        position: sticky;
        top: var(--navbar-h, 80px); /* JS sets --navbar-h to measured navbar height */
        left: auto;
        right: auto;
        z-index: 1019; /* below Bootstrap navbar (1020) so navbar stays on top */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        /* Break out of .container's 20px horizontal padding */
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Bundle card customize modal must sit above the mobile/tablet bundle drawer (z-index 9999) */
    .bundle-card-customize-modal {
        z-index: 10001 !important;
    }

    /* Prevent page-level horizontal overflow from filter tabs or card grids.
       Using overflow-x: clip instead of hidden to avoid creating a containing
       block/BFC that can interfere with click-event hit-testing on child elements. */
    .card-selection-page,
    .bundle-builder-page {
        overflow-x: clip;
        max-width: 100vw;
    }

    /* Meet Our Muses: 2 columns on portrait tablet so each cat card isn't too narrow */
    #meet-our-muses .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* Add vertical gap between rows so second-row card doesn't overlap first row */
    #meet-our-muses .equal-height-row {
        row-gap: 1.5rem;
    }
    /* Last cat card (Samwise) — center it when alone in second row */
    #meet-our-muses .col-md-4:last-child {
        margin-left: 25%; /* Centers a 50%-wide card in a 100%-wide row */
        float: none;
    }

    /* By The Numbers: 2 columns on portrait tablet */
    #by-the-numbers .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Impact page CTA: 2 columns on portrait tablet so boxes aren't too narrow */
    .cta-box .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Footer: compact policy links row on tablet */
    footer .col-md-6:last-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0.75rem;
        text-align: center;
    }
    footer .col-md-6:last-child a {
        margin-right: 0 !important;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    /* Card grid - 3 columns on tablet */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        min-width: 0;
    }

    /* Bundle card grid - 3 columns on tablet (matches shop cards grid layout) */
    .bundle-card-grid {
        grid-template-columns: repeat(3, 1fr);
        min-width: 0;
    }

    /* Match bundle card image height to shop cards (.card-option img = 180px) */
    .bundle-card-option img {
        height: 180px;
    }

    /* ========================================
       TABLET BUNDLE LAYOUT - use FAB drawer same as mobile
       ======================================== */

    /* Switch bundle to single column - sidebar replaced by FAB/drawer */
    .bundle-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bundle-summary-column {
        display: none !important;
    }

    .bundle-cards-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Allow CSS grid item to shrink below content size */
        overflow-x: clip !important; /* clip avoids BFC/containing-block side effects of hidden */
        box-sizing: border-box !important;
    }

    /* Bundle FAB - fixed floating button */
    .mobile-bundle-fab {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #7B3FE4 0%, #9F7AEA 100%);
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(123, 63, 228, 0.4);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1000;
        transition: transform 0.2s, box-shadow 0.2s;
        border: none;
    }

    .mobile-bundle-fab i {
        font-size: 24px;
        color: white;
    }

    .mobile-bundle-fab .fab-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #F4A823;
        color: white;
        font-size: 12px;
        font-weight: bold;
        min-width: 22px;
        height: 22px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }

    /* Bundle drawer backdrop */
    .mobile-bundle-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-bundle-backdrop.active {
        display: block;
        opacity: 1;
    }

    /* Bundle slide-up drawer panel */
    .mobile-bundle-drawer {
        display: block !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 1060;
        max-height: 85vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .mobile-bundle-drawer.active {
        transform: translateY(0);
    }

    .mobile-bundle-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
    }

    .mobile-bundle-drawer-header h3 {
        margin: 0;
        font-size: 1.1rem;
        color: #2d3748;
    }

    .mobile-bundle-drawer-header .close-drawer {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #666;
    }

    .mobile-bundle-drawer .drawer-content {
        padding: 16px 20px;
    }

    .mobile-bundle-notice {
        display: none !important;
    }
}

/* ===== Portrait Tablet hamburger mode (769px - 991px) ===== */
/* Bootstrap lg breakpoint is 992px — below that the navbar collapses to hamburger. */
@media (min-width: 769px) and (max-width: 991px) {
    /* NOTE: Do NOT absolutely-position .navbar-brand to center it here.
       position:absolute pulls the 70px logo out of flow, collapsing the navbar
       height to the toggler (~40px). That left a gap below the navbar before the
       sticky Back-to-Cards bar (top:80px) and let the logo overflow into content. */

    /* Hamburger dropdown links — comfortably sized for tap targets */
    .navbar-collapse .navbar-nav .nav-link {
        font-size: 1.1rem !important;
        padding: 0.65rem 1rem !important;
    }
}

/* ===== iPad Landscape / Large Tablet (1025px - 1366px) ===== */
/* iPads in landscape mode report viewport widths of 1133-1366px, exceeding the
   769-1024 tablet block. This block restores the most important tablet behaviours
   (scrollable filter tabs, touch tooltip hiding) without shrinking the navbar or
   switching the bundle layout to FAB mode, which would look wrong on small laptops
   that happen to share this width range. */
@media (min-width: 1025px) and (max-width: 1366px) {
    /* Scrollable filter tabs — prevents wrapping onto multiple rows */
    .filter-tabs,
    .bundle-filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #c4b5fd #f1f1f1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .filter-tabs::-webkit-scrollbar,
    .bundle-filter-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .filter-tabs::-webkit-scrollbar-track,
    .bundle-filter-tabs::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .filter-tabs::-webkit-scrollbar-thumb,
    .bundle-filter-tabs::-webkit-scrollbar-thumb {
        background: #c4b5fd;
        border-radius: 3px;
    }

    /* Hide inline tooltips — touch users can't hover so they'd never dismiss */
    .vt {
        display: none !important;
    }

    /* Prevent horizontal page overflow from filter tabs */
    .card-selection-page,
    .bundle-builder-page {
        overflow-x: clip;
        max-width: 100vw;
    }

    /* Navbar is expanded (not hamburger) at this width — 8 links + brand overflow and
       wrap. Shrink link font/padding and brand so the row fits on one line. */
    .navbar .nav-link {
        font-size: 0.9rem;
        padding: 0.4rem 0.5rem !important;
        white-space: nowrap;
    }
    .navbar-brand span {
        font-size: 2.6rem !important;
    }
    .navbar-brand img {
        height: 90px !important;
    }

    /* Bundle two-column layout stays (desktop-style), but the cards column is a grid
       item that defaults to min-width:auto — the nowrap scrollable filter tabs give it
       a huge min-content width, blowing the whole 2fr/1fr grid ~2x past the viewport.
       min-width:0 lets the grid tracks shrink so the tabs scroll inside their column. */
    .bundle-layout {
        min-width: 0;
        max-width: 100%;
    }
    .bundle-cards-column,
    .bundle-summary-column {
        min-width: 0;
    }
}