/* ==========================================================================
   GLOBAL STYLES (Used across all pages)
   ========================================================================== */

/* --- CSS VARIABLES & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&family=Roboto:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap');

@font-face {
    font-family: 'OWSans300';
    src: url('../assets/fonts/OWSans300.woff2') format('woff2');
    font-weight: normal;
}
@font-face {
    font-family: 'OWSans400';
    src: url('../assets/fonts/OWSans400.woff2') format('woff2');
    font-weight: normal;
}
@font-face {
    font-family: 'OWSans700';
    src: url('../assets/fonts/OWSans700.woff2') format('woff2');
    font-weight: normal;
}

:root {
  /* Stone Palette */
  --stone-50: #f8f9fa;
  --stone-100: #f1f3f5;
  --stone-200: #e9ecef;
  --stone-400: #ced4da;
  --stone-600: #6c757d;
  --stone-800: #343a40;
  
  /* Red Palette */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  
  /* Brand Custom Palette */
  --brand-green-dark: #5d824a;
  --brand-green-light: #c9d672;
  --brand-lavender: #aca7cf;
  --brand-yellow: #fffbc6;
  --brand-pink: #ffa7dd;
  --brand-purple: #c166a8;
  
  /* Fonts */
  --font-sans: 'Inter', Helvetica, Arial, sans-serif;
  --font-serif: 'Palash', Georgia, serif;
}

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

body {
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: black;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-size: 1rem;
}

body::-webkit-scrollbar { display: none; }

button, input, select {
  font-family: inherit;
  border: none;
  background: none;
  outline: none;
}
button { cursor: pointer; }
a { text-decoration: none; color: inherit; }

/* --- LAYOUT UTILITIES --- */
.container { max-width: 1152px; margin: 0 auto; padding: 0 1rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.hide-on-mobile { display: inline; }

@media (max-width: 768px) { 
    .checkout-header-inner { padding: 0 1rem; flex-direction: column !important; gap: 0.75rem; } 
    .btn-back { display: none !important; } 
    .hide-on-mobile { display: none !important; } 
    .checkout-timeline { font-size: 0.8rem; gap: 0.4rem; }
    .timeline-step { gap: 0.25rem; }
    .timeline-divider { width: 1rem; }
    .timeline-bullet { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; }
}

/* --- TYPOGRAPHY UTILITIES --- */
.font-ow300 { font-family: 'OWSans300', sans-serif; font-weight: normal; }
.font-ow400 { font-family: 'OWSans400', sans-serif; font-weight: normal; }
.font-ow700 { font-family: 'OWSans700', sans-serif; font-weight: normal; }
.font-inter { font-family: 'Inter', sans-serif; font-weight: normal; }
.font-author { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: normal; }
.font-serif { font-family: var(--font-serif); font-weight: normal; }
.rem90 { font-size: 0.9rem; }
.rem85 { font-size: 0.85rem; }
.text-caps { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.font-gray { color: var(--stone-600); }
/* --- GLOBAL COMPONENTS --- */
.btn-primary {
  display: block; width: 100%; text-align: center; padding: 0.75rem; border-radius: 0.125rem;
  background-color: var(--stone-800); color: white; font-weight: 500; transition: background-color 0.15s, opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; } 
.btn-primary:disabled { opacity: 0.5; pointer-events: none; }

/* New Storefront Unified Buttons */
.btn-light {
  display: block; width: 100%; text-align: center; padding: 0.65rem; border-radius: 9999px;
  background-color: white; color: var(--stone-800); border: 1px solid var(--stone-800);
  transition: all 0.2s ease; cursor: pointer; font-size: 0.9rem;
}
.btn-light:hover:not(:disabled) { background-color: var(--brand-green-light); color: var(--brand-green-dark); border-color: var(--brand-green-dark); }
.btn-light:disabled { opacity: 0.5; pointer-events: none; }

.btn-green {
  display: block; width: 100%; text-align: center; padding: 0.75rem; border-radius: 9999px;
  background-color: var(--brand-green-dark); color: var(--brand-yellow); border: none;
  transition: all 0.2s ease; cursor: pointer; font-size: 1rem;
}
.btn-green:hover:not(:disabled) { background-color: var(--brand-green-light); color: var(--brand-green-dark); }
.btn-green:disabled { opacity: 0.5; pointer-events: none; }


/* ==========================================================================
   HOME PAGE (index.html)
   ========================================================================== */

/* --- HERO SECTION --- */
.hero { position: relative; height: 110vh; width: 100%; background-color: #a9c7d1; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30vh; background: linear-gradient(to bottom, rgba(169, 199, 209, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 2; pointer-events: none; }
.hero-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 0 1.5rem; text-align: center; width: 100vw; will-change: opacity, transform; }
.hero-logo { width: 80%; height: auto; filter: brightness(0) invert(1); max-width: 850px; min-width: 300px; }
@media (min-width: 768px) { .hero-logo { width: 50%; } }

.hero-text { font-family: 'Roboto', sans-serif; color: white; font-size: clamp(1.3rem, 2vw, 2.15rem); line-height: 1.6; margin-top: clamp(1vw, 2vw, 3vw); font-weight: 400; }

/* Clouds Animation */
.cloud { position: absolute; background-size: contain; background-repeat: no-repeat; z-index: 1; }
@keyframes driftAndSwell { 0% { transform: translateX(-100%) scale(1); } 50% { transform: translateX(50vw) scale(1.15); } 100% { transform: translateX(100vw) scale(1); } }
@keyframes driftAndSwellReverse { 0% { transform: translateX(100vw) scale(1); } 50% { transform: translateX(50vw) scale(1.15); } 100% { transform: translateX(-100%) scale(1); } }
.cloud-1 { background-image: url('../assets/images/cloud1.png'); width: 1050px; height: 550px; top: 10%; animation: driftAndSwell 60s linear infinite -15s; left: 0px; }
.cloud-2 { background-image: url('../assets/images/cloud2.png'); width: 950px; height: 550px; top: 40%; right: 0px; animation: driftAndSwellReverse 80s linear infinite -50s; }
.cloud-3 { background-image: url('../assets/images/cloud3.png'); width: 750px; height: 550px; top: 70%; left: 0px; animation: driftAndSwell 50s linear infinite -5s; }
.cloud-4 { background-image: url('../assets/images/cloud4.png'); width: 1250px; height: 620px; top: -20%; right: 0px; animation: driftAndSwellReverse 95s linear infinite -75s; }

/* Mobile Cloud Adjustments */
@media (max-width: 767px) {
.cloud-3, .cloud-4 { display: none; }
.cloud-1 { top: -30%; }
.cloud-2 { top: auto; bottom: -5%; animation: driftAndSwellReverse 80s linear infinite -10s; }
}

/* --- STORE MAIN CONTENT --- */
.main-content { padding: 3rem 1rem; min-height: 100vh; }

.store-controls { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; }
.store-search { border: none; border-bottom: 1px solid white; background: transparent; padding: 0.25rem 0; width: 200px; transition: border-color 0.2s ease; font-size: 1rem; color: black; }
.store-search:hover, .store-search:focus { border-bottom-color: black; outline: none; }
.store-search::placeholder { font-size: 1rem; color: black; }

.custom-sort-wrapper { position: relative; }
.sort-toggle-btn { background: transparent; border: none; padding: 0.25rem 0; font-size: 1rem; color: black; }
.sort-menu { position: absolute; top: 100%; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; padding: 1rem; background-color: white; z-index: 20; min-width: max-content; }
.sort-option { background: transparent; border: none; color: var(--stone-600); font-size: 0.9rem; transition: color 0.15s ease; }
.sort-option:hover { color: var(--stone-800); }

/* --- BOOK GRID & CARDS --- */
.book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 1rem; margin-bottom: 70px; }
@media (min-width: 768px) { .book-grid { grid-template-columns: repeat(3, 1fr); gap: 5rem 2.2rem; margin-bottom: 150px; } }
.book-card { display: flex; flex-direction: column; height: 100%; }
.book-image-wrap { background-color: var(--stone-200); aspect-ratio: 2/3; width: 100%; border-radius: 0.125rem; overflow: hidden; position: relative; cursor: pointer; }
.book-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.book-image-wrap img.out-of-stock { opacity: 0.6; filter: grayscale(100%); }
.book-title { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 1.3; margin-bottom: 0.25rem; }
.book-author { color: var(--stone-600); font-size: clamp(1.1rem, 2vw, 1.2rem);; }
.book-info { display: flex; flex-direction: column; flex-grow: 1; padding-top: 1rem; }
.book-bottom-group { margin-top: auto; padding-top: 1.5rem; font-size: clamp(0.8rem, 2vw, 0.9rem); }
.book-meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.book-price.strikethrough { color: var(--stone-400); text-decoration: line-through; }
.book-footer { display: flex; justify-content: space-between; align-items: center; }
.sold-out-text { font-size: 0.875rem; color: var(--stone-600); font-style: italic; padding: 0.25rem 0.5rem; }

/* Book Blurb Overlay */
.book-blurb-overlay { position: absolute; inset: 0; background-color: rgba(28, 25, 23, 0.85); color: white; padding: 2rem 1.5rem; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 0.3s ease; font-size: 0.9rem; line-height: 1.6; pointer-events: none; }
.book-image-wrap.show-blurb .book-blurb-overlay { opacity: 1; }
@media (min-width: 1024px) { .book-image-wrap:hover .book-blurb-overlay { opacity: 1; font-size: 1rem; } }

/* --- SIDE CART TOGGLE & PANEL --- */
.side-cart-toggle { position: fixed; top: 3rem; right: 0; background-color: var(--stone-50); color: var(--stone-800); font-family: 'Roboto Mono', monospace; padding: 1rem 0; font-size: 0.875rem; font-weight: 400; border-radius: 0.7rem 0 0 0.7rem; border: 1px solid var(--stone-200); border-right: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: -4px 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s; z-index: 60; width: 34px; }
.cart-tab-text { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; }
.side-cart-toggle.is-open { transform: translateX(calc(-100vw + 34px)) !important; background-color: var(--stone-50) !important; }
@media (min-width: 445px) { .side-cart-toggle.is-open { transform: translateX(-25rem) !important; } }
.side-cart-toggle.scrolled-past-hero:not(.is-open) { background-color: var(--brand-pink); }

/* Only apply peek animations on devices with a real mouse/cursor */
@media (hover: hover) {
    .side-cart-toggle:hover { background-color: #e5e5e5; }
    .side-cart-toggle:not(.is-open):hover { transform: translateX(-10px); }
    .side-cart-toggle:not(.is-open):hover ~ .cart-panel { transform: translateX(calc(100% - 10px)); }
}

.cart-overlay { position: fixed; inset: 0; background-color: rgba(33, 37, 41, 0.5); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-panel { 
    position: fixed; top: 0; bottom: 0; right: 0; height: 100%; height: 100dvh; width: 100%; max-width: 25rem; 
    background-color: var(--stone-50); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); z-index: 50; 
    transform: translateX(100%); 
    visibility: hidden; /* Hides it fully from Safari so the browser drops the tint */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; 
    display: flex; flex-direction: column; 
}
.cart-panel.is-open { 
    transform: translateX(0); 
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; 
}
/* This scales the panel perfectly to your specific phone width and hides the overlay */
@media (max-width: 444px) {
    .cart-panel { max-width: calc(100vw - 34px); }
    .cart-overlay { display: none !important; }
}

.cart-body { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-item { display: flex; gap: 1rem; border-bottom: 1px solid var(--stone-100); padding-bottom: 1rem; }
.cart-item-img { width: 60px; height: 90px; background-color: var(--stone-200); border-radius: 0.125rem; border: 1px solid var(--stone-100); overflow: hidden; flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cart-item-header { display: flex; justify-content: space-between; align-items: flex-start; }

.cart-item-remove { color: var(--stone-400); font-size: 1.125rem; line-height: 1; }
.cart-item-remove:hover { color: var(--red-500); }
.cart-item-meta { color: var(--stone-600); margin-top: 0.25rem; }
.cart-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }

.qty-control { display: flex; align-items: center; border: 1px solid var(--stone-400); border-radius: 0.125rem; }
.qty-btn { padding: 0 0.5rem; color: var(--stone-600); background-color: var(--stone-50); }
.qty-btn:hover { color: var(--stone-800); }
.qty-num { font-size: 0.75rem; font-weight: 500; padding: 0 0.5rem; }

.cart-footer { padding: 1.5rem; background-color: white; border-top: 1px solid var(--stone-200); }
.cart-subtotal-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.cart-subtotal-label, .cart-subtotal-value { font-size: 1.125rem; color: black; }

/* --- CHECKOUT MODAL --- */
.checkout-modal { position: fixed; inset: 0; z-index: 70; overflow-y: auto; overflow-x: hidden; background-color: var(--stone-50); }
.checkout-header { background-color: white; border-bottom: 1px solid var(--stone-200); padding: 1.5rem 0; position: sticky; top: 0; z-index: 20; }
.checkout-header-inner { display: flex; flex-direction: row !important; justify-content: space-between; align-items: center; width: 100%; padding: 0 2rem; }

.btn-back { position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.5rem; color: var(--stone-800); font-size: 1rem; background: none; border: none; cursor: pointer; padding: 0; z-index: 30; }
.btn-back:hover { color: var(--stone-400); }

.checkout-title { font-size: 1.125rem; color: var(--stone-800); margin: 0; text-align: center; }
@media (min-width: 1200px) { .checkout-title { margin-left: 0; } }

.checkout-timeline { justify-self: end; display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; color: var(--stone-800); flex-wrap: wrap; justify-content: center; }
.timeline-step { display: flex; align-items: center; gap: 0.5rem; }
.timeline-divider { width: 2rem; height: 1px; background-color: var(--stone-200); }
.timeline-bullet { width: 1.5rem; height: 1.5rem; background-color: var(--stone-200); color: var(--stone-800); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.timeline-step.active .checkout-bullet { background-color: var(--brand-green-dark); color: #f3f7d9; }

/* Mobile Header & Timeline Fixes */
@media (max-width: 768px) { 
    .checkout-header-inner { padding: 0 1rem; flex-direction: column !important; gap: 0.75rem; } 
    .btn-back { top: 1.5rem; transform: none; left: 1rem; }
    .checkout-timeline { font-size: 0.8rem; gap: 0.4rem; }
    .timeline-step { gap: 0.25rem; }
    .timeline-divider { width: 1rem; }
    .timeline-bullet { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; }
}

/* ==========================================
   DESKTOP & TABLET ORDER SUMMARY FIXES
   ========================================== */
@media (min-width: 769px) {
    .order-summary-header {
        display: flex !important;
        justify-content: center !important;
        cursor: default !important;
    }
    
    .summary-left {
        width: auto !important; /* Prevents it from taking full width on desktop */
    }

    .summary-arrow, 
    .hide-on-desktop {
        display: none !important; /* Hides the SVG arrow and the total price */
    }
    
    .checkout-summary-inner {
        display: flex !important;
        max-height: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ==========================================
   MOBILE ORDER SUMMARY & FORM OVERRIDES
   ========================================== */
@media (max-width: 768px) {
    /* --- Order Summary Fixes --- */
    .checkout-summary-side { 
        order: 1; 
        padding: 0 !important; 
        margin: 0 calc(-50vw + 50%) !important; 
        width: 100vw !important; 
        max-width: 100vw !important; 
    }
    
    .checkout-layout { display: flex !important; flex-direction: column; }
    .checkout-form-side { order: 2; padding: 2rem 1.5rem !important; }

    .order-summary-card { 
        border-radius: 0 !important; 
        width: 100%; 
        box-shadow: none !important; 
        border-bottom: 1px solid var(--stone-200); 
    }

    .order-summary-header {
        display: flex !important;
        justify-content: space-between; /* Pushes total to the right */
        align-items: center;
        padding: 1.1rem 1.5rem !important; 
        border-radius: 0 !important;
    }

    /* Resets the summary-left flex container for mobile */
    .summary-left {
        width: auto !important;
        justify-content: flex-start !important;
    }

    /* SVG Arrow Rotation */
    .summary-arrow { 
        transform: rotate(0deg); 
        transform-origin: center; 
    }
    .order-summary-header.is-open .summary-arrow { 
        transform: rotate(180deg) !important; 
    }

    .checkout-summary-inner {
        display: block !important; 
        transition: all 0.3s ease-out;
        visibility: visible;
        max-height: 2000px; 
        overflow: hidden;
        opacity: 1;
    }

    .checkout-summary-inner.is-collapsed {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
        opacity: 0;
        visibility: hidden;
    }

/* --- Checkout Form Card Fixes --- */
    .checkout-form-side {
        padding-top: 0 !important; /* Removes the gap below the order summary */
    }

    .checkout-form-header { 
        display: none !important; 
    }
    
    .checkout-form-card {
        margin: 0 calc(-50vw + 50%) !important; 
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important; 
        box-shadow: none !important;
        padding: 0; /* Reduced from 1.5rem to give the inputs more breathing room */
    }
}

.checkout-layout { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 61px); }
@media (min-width: 1024px) { .checkout-layout { grid-template-columns: 7fr 5fr; } }
.checkout-form-side { background-color: transparent; padding-top: 2rem; padding-bottom: 1rem; }
@media (min-width: 1024px) { .checkout-form-side { padding-right: 3rem; padding-bottom: 2rem; } }

.checkout-form-card { background-color: white; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); overflow: hidden; }
.checkout-form-header { background-color: #9cafcf; padding: 0.75rem 1.5rem; margin: 0; text-align: center; }
.checkout-section { margin-bottom: 2rem; }
.checkout-section-title { font-size: 1.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--stone-200); padding-bottom: 0.5rem; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.col-full { grid-column: 1 / -1; }
.form-input, .form-select { width: 100%; padding: 0.75rem 1rem; border: 1px solid #dee2e6; border-radius: 0.125rem; font-size: 16px; background-color: white; }
.form-input:focus, .form-select:focus { border-color: var(--stone-800); }

.radio-card { display: flex; align-items: center; padding: 1rem; border: 1px solid var(--stone-200); border-radius: 0.125rem; cursor: pointer; margin-bottom: 0.75rem; transition: background-color 0.15s; }
.radio-card:hover { background-color: var(--stone-50); }
.radio-card input { margin-right: 1rem; accent-color: var(--stone-800); }
.radio-label { flex: 1; }
.radio-title { display: block; font-weight: 500; font-size: 0.875rem; }
.radio-desc { font-size: 0.75rem; color: var(--stone-600); }

.info-box { background-color: #f9f9f9; padding: 1.5rem; border: 1px solid #d9d9d9; font-size: 0.875rem; color: var(--stone-800); }
.info-box p { margin-bottom: 0.5rem; font-family: 'OWSans300', 'Helvetica', 'Arial'; }
.text-danger { color: var(--red-700); font-weight: 500; }

.checkbox-label { display: flex; align-items: flex-start; margin-top: 1rem; cursor: pointer; }
.checkbox-label input { margin-top: 0.25rem; margin-right: 0.75rem; accent-color: var(--stone-800); }
.checkbox-label span { font-size: 0.75rem; font-family: OWSans300; color: var(--stone-800); line-height: 1.6; }

/* Checkout Order Summary */
.checkout-summary-side { background-color: transparent; border: none; padding: 1.5rem 0; }
@media (min-width: 1024px) { .checkout-summary-side { border-top: none; border-left: none; padding: 2rem 1.5rem; } }
.order-summary-card { background-color: white; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); overflow: hidden; }
.checkout-summary-inner { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.order-summary-header { background-color: var(--brand-green-light); color: white; padding: 0.75rem 1.5rem; margin: 0; font-size: 1rem; text-align: center; }

#modal-checkout-items { margin-bottom: 1.5rem; max-height: 45vh; overflow-y: auto; padding-right: 0.5rem; padding-top: 0.75rem; }
.modal-item { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.modal-item-img { position: relative; width: 55px; height: 80px; background-color: transparent; border: none; border-radius: 0.125rem; flex-shrink: 0; overflow: visible; }
.modal-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.125rem; }

.summary-quantity { position: absolute; top: -0.65rem; right: -0.65rem; background-color: var(--brand-purple); color: white; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; z-index: 10; }
.modal-item-details { flex: 1; padding-left: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }

.summary-totals { border-top: 1px solid var(--stone-200); padding-top: 1.5rem; margin-top: 1.5rem; font-size: 0.9rem}
.summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.summary-total-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--stone-200); padding-top: 1.5rem; margin-top: 1rem; }

/* --- FOOTER --- */
.site-footer { position: relative; background-color: var(--brand-lavender); color: white; padding: 13rem 1rem 3rem; font-size: 1rem; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 250px; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(172, 167, 207, 0) 100%); pointer-events: none; }
.footer-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 3rem; padding: 0 1.5rem; }
@media (min-width: 768px) { .footer-content { flex-direction: row; align-items: flex-end; padding: 0 4rem; } }

.footer-left { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .footer-left { flex-direction: row; align-items: flex-end; gap: 2rem; } }
.footer-logo { width: clamp(280px, 45vw, 550px); height: auto; filter: brightness(0) invert(1); }

.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; margin-bottom: 30px; }
@media (min-width: 768px) { .footer-contact { text-align: left; } }
.ig-link svg { width: 26px; height: 26px; fill: white; transition: opacity 0.2s ease; }
.ig-link:hover svg { opacity: 0.7; }
.footer-contact p { line-height: 1.5; letter-spacing: 0.02em; }

.footer-right { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { .footer-right { align-items: flex-end; } }
.footer-barcode { width: 160px; height: auto; mix-blend-mode: multiply; }


/* ==========================================================================
   PAYMENT PAGE (payment.html)
   ========================================================================== */

/* --- PAYMENT MAIN --- */
.payment-main { margin: 0 auto; padding: 2rem 1rem; display: flex; flex-direction: column; gap: 2.5rem; }
.payment-intro { text-align: center; max-width: 42rem; margin: 0 auto; }
.payment-intro h1 { font-size: 1.875rem; margin-bottom: 1rem; }
.payment-intro p { color: var(--stone-600); margin-bottom: 1rem; line-height: 1.6; }

.payment-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
@media (min-width: 768px) { .payment-grid { grid-template-columns: 1fr 1fr; } }
.items-start { align-items: flex-start; }

.payment-card { padding: 1.5rem; border: 1px solid var(--stone-200); border-radius: 0.125rem; display: flex; flex-direction: column; }
@media (min-width: 768px) { .payment-card { padding: 2rem; } }
.payment-card.bg-stone-100 { background-color: var(--stone-100); }
.payment-card.bg-white { background-color: white; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.payment-card-title { font-size: 1.125rem; border-bottom: 1px solid var(--stone-200); padding-bottom: 0.5rem; margin-bottom: 1rem; }
/* --- ORDER CONFIRMED DIVIDER --- */
/* Hide it on desktop/tablet by default */
.mobile-order-divider {
    display: none;
    border: none;
    height: 1px;
    background-color: var(--stone-200); /* Matches your existing subtle borders */
    margin: 1.5rem 0; /* Gives it nice breathing room above and below */
    width: 100%;
}

/* Show it only on mobile screens */
@media (max-width: 768px) {
    .mobile-order-divider {
        display: block;
    }
}
.details-list { display: flex; flex-direction: column; gap: 1rem; color: var(--stone-600); flex: 1; }
.detail-label { display: block; font-size: 0.75rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.05em; }
.detail-value { font-weight: 500; color: var(--stone-800); }

/* Summary List Items */
.summary-items { overflow-y: auto; max-height: 10rem; padding-right: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--stone-200); padding-bottom: 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.summary-item-row { display: flex; justify-content: space-between; align-items: flex-start; }
.summary-item-info { padding-right: 1rem; }
.summary-item-title { font-family: 'OWSans300', sans-serif; font-size: 1rem; font-weight: 400; color: var(--stone-800); }
.summary-item-author { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.875rem; color: var(--stone-600); }
.summary-item-format { font-family: 'OWSans300', sans-serif; text-transform: uppercase; font-size: 0.75rem; color: var(--stone-400); }
.summary-item-price { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; color: var(--stone-800); }

.summary-totals-row { display: flex; justify-content: space-between; }
.summary-totals-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem; font-family: var(--font-serif); color: var(--stone-800); padding-top: 1rem; border-top: 1px solid var(--stone-200); margin-top: 0.5rem; }

.express-note { font-size: 0.8rem; line-height: 1.25; color: var(--stone-600); font-style: italic; margin-top: 0.5rem; background-color: rgba(233,236,239,0.5); padding: 0.8rem; border: 1px solid var(--stone-200); border-radius: 0.125rem; }
.shipping-express-text { color: var(--stone-400); font-style: italic; font-size: 0.75rem; }

/* Bank Details & QR */
.bank-details p { margin-top: 0.75rem; }
.qr-box { text-align: center; border-top: 1px solid var(--stone-100); padding-top: 1rem; margin-top: 1rem; }
.qr-box img { width: 12rem; height: 12rem; border: 1px solid var(--stone-200); padding: 0.5rem; border-radius: 0.125rem; margin: 0 auto; }

.payment-alert { background-color: var(--red-50); color: var(--red-800); padding: 1.5rem; border: 1px solid var(--red-100); border-radius: 0.125rem; font-size: 0.875rem; line-height: 1.6; }

/* Form & Upload */
.sticky-col { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.payment-form-group { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; }
.payment-form-label { font-size: 0.875rem; font-weight: 500; color: var(--stone-600); cursor: pointer; }
.payment-form-input { padding: 0.5rem 0.75rem; border: 1px solid var(--stone-200); border-radius: 0.125rem; background-color: var(--stone-100); color: var(--stone-400); font-family: monospace; font-size: 0.875rem; cursor: not-allowed; width: 100%; }
.payment-form-help { font-size: 0.75rem; color: var(--stone-400); }

.upload-box { border: 1px dashed var(--stone-300); padding: 1.5rem; border-radius: 0.125rem; background-color: var(--stone-50); text-align: center; margin-bottom: 1.5rem; }
.upload-input { font-size: 0.875rem; color: var(--stone-400); cursor: pointer; width: 100%; margin: 0 auto; display: block; }
.upload-input::file-selector-button { margin-right: 1rem; padding: 0.5rem 1rem; border-radius: 0.125rem; border: none; font-size: 0.875rem; font-weight: 500; background-color: var(--stone-200); color: var(--stone-800); cursor: pointer; transition: background-color 0.15s; }
.upload-input::file-selector-button:hover { background-color: var(--stone-200); opacity: 0.85; }

.success-message { text-align: center; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.success-icon { color: var(--brand-green-dark); font-size: 3rem; line-height: 1; }
.success-link { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; color: var(--stone-800); border-bottom: 1px solid var(--stone-800); padding-bottom: 0.25rem; transition: color 0.15s, border-color 0.15s; }
.success-link:hover { color: var(--stone-400); border-color: var(--stone-400); }


/* ==========================================================================
   ADMIN DASHBOARD (admin.html)
   ========================================================================== */

/* --- ADMIN HEADER & MAIN --- */
body.admin-page { background-color: var(--stone-50); }
.admin-header { background-color: white; color: black; padding: 1.5rem 0; border-bottom: 1px solid var(--stone-200); }
.admin-header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 76rem; margin: 0 auto; padding: 0 1rem; width: 100% !important; }
.admin-nav-link { font-size: 1rem; color: black; transition: color 0.15s; }
.admin-nav-link:hover { color: var(--stone-500); }
.btn-logout { font-size: 1rem; background-color: transparent; color: black; padding: 0; border-radius: 0; transition: color 0.15s; }
.btn-logout:hover { color: var(--stone-500); }

.admin-main { max-width: 76rem !important; margin: 0 auto; padding: 3rem 1rem; display: flex; flex-direction: column; gap: 3rem; }
.admin-card { background-color: white; padding: 2rem; border: 1px solid var(--stone-200); border-radius: 0.125rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.admin-card-title { font-size: 2rem; color: black; margin-bottom: 1.5rem; border-bottom: 1px solid var(--stone-100); padding-bottom: 1rem; }

.admin-2col-layout { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) {
  .admin-2col-layout { display: grid; grid-template-columns: 1fr 1.5fr; align-items: start; }
}

/* --- ADMIN TABS & SUBTABS --- */
.admin-tabs-wrapper { background-color: white; border-bottom: 1px solid var(--stone-200); }
.admin-tabs-nav { display: flex; gap: 2rem; margin: 0 auto; padding: 0 1rem; width: 100% !important; max-width: 76rem; }
.admin-tab-btn { padding: 1.25rem 0; color: var(--stone-400); border-bottom: 2px solid transparent; transition: all 0.15s; font-size: 1.125rem; background: none; }
.admin-tab-btn:hover { color: black; border-bottom-color: var(--brand-purple); }
.admin-tab-btn.active { color: black; border-bottom-color: var(--brand-purple); font-weight: 500; }
.admin-tab-content { display: flex; flex-direction: column; gap: 3rem; }

.admin-subtabs-nav { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--stone-100); padding-bottom: 1rem; overflow-x: auto; }
.admin-subtab-btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; color: black; background-color: #fdfccf; border-radius: 9999px; transition: all 0.15s; white-space: nowrap; }
.admin-subtab-btn:hover { background-color: #ebeab2; }
.admin-subtab-btn.active { background-color: #d1de77; color: black; font-family: OWSans400; }
.admin-subtab-btn.archive-btn { background-color: var(--stone-300) !important; color: black !important; }
.admin-subtab-btn.archive-btn:hover { background-color: var(--stone-400) !important; }

/* --- ADMIN TABLES --- */
.admin-table-wrapper { overflow-x: auto; }
.admin-table { width: 100%; text-align: left; font-size: 0.875rem; border-collapse: collapse; white-space: normal; }
.admin-table th { background-color: #f9f9f9; color: black; font-family: 'OWSans400', sans-serif; font-weight: normal; padding: 1.25rem 1rem; border-bottom: none; }
.admin-table td { padding: 1rem 1rem; border-bottom: 1px solid var(--stone-100); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }

.status-select { background-color: var(--stone-50); border: 1px solid var(--stone-200); font-size: 0.875rem; padding: 0.25rem 0.5rem; border-radius: 0.125rem; cursor: pointer; outline: none; font-family: 'OWSans300', sans-serif; color: black; text-transform: uppercase; }
.status-select:focus { border-color: var(--stone-800); }

.action-btn { font-weight: normal; transition: color 0.15s; font-size: 0.875rem; cursor: pointer; font-family: 'OWSans300', sans-serif; color: black; }
.action-btn.view { color: var(--stone-600); }
.action-btn.view:hover { color: black; }
.action-btn.notify { color: black; padding-left: 0.75rem; border-left: 1px solid var(--stone-200); margin-left: 0.75rem; }
.action-btn.notify:hover { color: var(--stone-600); }
.action-btn.delete { color: var(--red-700); margin-left: 1rem; }
.action-btn.delete:hover { color: var(--red-800); }

.stock-input { width: 5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--stone-200); border-radius: 0.125rem; text-align: center; }

/* --- EXPANDABLE ORDER ROWS --- */
.admin-table tbody tr.main-order-row { transition: background-color 0.15s; cursor: pointer; font-family: 'OWSans300', sans-serif; color: black; }
.admin-table tbody tr.main-order-row:hover { background-color: var(--stone-50); }
.admin-table tbody tr.main-order-row td { color: black; }

.btn-expand { background: none; border: none; cursor: pointer; font-size: 0.75rem; color: var(--stone-400); padding: 0.25rem 0.5rem; margin-right: 0.5rem; transition: transform 0.2s, color 0.15s; display: inline-flex; align-items: center; justify-content: center; }
.btn-expand:hover { color: var(--stone-800); }
.btn-expand.is-open { transform: rotate(90deg); color: var(--stone-800); }

.order-details-row { display: none; background-color: white; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02); }
.order-details-row.is-open { display: table-row; }

.order-details-inner { padding: 1.5rem 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; font-size: 0.875rem; color: var(--stone-600); }
@media (min-width: 768px) { .order-details-inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.details-section h4 { font-family: 'OWSans400', sans-serif; font-size: 1.125rem; color: black; margin-bottom: 1rem; border-bottom: 1px solid var(--stone-200); padding-bottom: 0.5rem; font-weight: normal; }

.breakdown-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.breakdown-item { display: flex; justify-content: space-between; align-items: flex-start; }
.breakdown-item-info { flex: 1; padding-right: 1rem; }
.breakdown-item-title { font-family: 'OWSans300', sans-serif; font-weight: normal; color: black; display: block; font-size: 1rem; }
.breakdown-item-meta { font-family: 'OWSans300', sans-serif; font-size: 0.85rem; color: var(--stone-500); }
.breakdown-item-price { font-family: 'OWSans300', sans-serif; font-weight: normal; color: black; font-size: 1rem; }

.breakdown-totals { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px dotted var(--stone-300); padding-top: 1.25rem; margin-top: 0.5rem; }
.breakdown-totals-row { display: flex; justify-content: space-between; font-family: 'OWSans400', sans-serif; font-size: 0.95rem; color: black; text-transform: uppercase; }
.breakdown-totals-main { display: flex; justify-content: space-between; font-family: 'OWSans700', sans-serif; font-size: 1rem; font-weight: normal; color: var(--red-800); border-top: 1px solid var(--stone-100); margin-top: 0.25rem; padding-top: 1rem; text-transform: uppercase; }

.shipping-details-list { display: flex; flex-direction: column; gap: 0.75rem; }
.shipping-details-row { display: flex; flex-direction: column; gap: 0.125rem; }
.shipping-details-label { font-size: 0.75rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.05em; }
.shipping-details-value { font-weight: 500; color: var(--stone-800); line-height: 1.4; }

/* --- COPYABLE ADDRESS --- */
.copyable-address { background-color: #f9f9f9; border: 1px dashed #d9d9d9; padding: 1.5rem; border-radius: 0.125rem; cursor: pointer; position: relative; transition: background-color 0.15s, border-color 0.15s; font-family: 'OWSans300', sans-serif; font-size: 0.95rem; color: black; line-height: 1.8; }
.copyable-address:hover { background-color: #f1f1f1; border-color: var(--stone-300); }
.copy-indicator { position: absolute; top: 1rem; right: 1rem; font-size: 0.75rem; color: #000000; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; font-weight: normal; font-family: 'OWSans300', sans-serif; }

/* --- INVENTORY UPLOAD FORM & CSV --- */
.upload-form-layout { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) {
  .upload-form-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 1.5rem; }
  .upload-form-row.align-top { align-items: flex-start; }
  .admin-2col-layout .upload-form-row { grid-template-columns: 140px 1fr !important; }
}

.upload-form-label { font-size: 0.875rem; font-weight: 500; color: var(--stone-800); }
.upload-form-multi { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 767px) { .upload-form-multi { grid-template-columns: 1fr; gap: 1rem; } }

.no-spinners::-webkit-outer-spin-button, .no-spinners::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinners { -moz-appearance: textfield; }

.upload-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.upload-help { font-size: 0.75rem; color: var(--stone-400); margin-top: 0.5rem; }

.imported-books-container { margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.imported-book-card { padding: 1.5rem; background-color: var(--stone-50); border: 1px solid var(--stone-200); border-radius: 0.125rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .imported-book-card { flex-direction: row; } }
.imported-book-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.imported-book-title { font-size: 1.125rem; font-weight: bold; }
.imported-book-meta { font-size: 0.875rem; color: var(--stone-600); }
.imported-book-blurb { font-size: 0.75rem; color: var(--stone-400); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.imported-book-cover-wrap { display: flex; flex-direction: column; justify-content: center; width: 100%; border-top: 1px solid var(--stone-200); padding-top: 1.5rem; }
@media (min-width: 768px) { .imported-book-cover-wrap { width: 33.333%; border-top: none; border-left: 1px solid var(--stone-200); padding-top: 0; padding-left: 1.5rem; } }

.single-upload-form { display: flex; flex-direction: column; gap: 1rem; }
.cover-upload-box { background-color: var(--stone-50); padding: 1.5rem; border: 1px dashed var(--stone-200); border-radius: 0.125rem; text-align: center; }
.cover-upload-box label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }

/* --- ADMIN RECEIPT MODAL --- */
.receipt-modal-overlay { position: fixed; inset: 0; background-color: rgba(28, 25, 23, 0.8); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.receipt-modal-box { background-color: white; padding: 1.5rem; border-radius: 0.125rem; max-width: 42rem; width: 100%; position: relative; }
.btn-close-modal { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; color: var(--stone-400); transition: color 0.15s; }
.btn-close-modal:hover { color: var(--stone-800); }
.receipt-img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }

/* ==========================================
   LOGIN PAGE SPECIFIC STYLES
   ========================================== */

/* Defines Project Fonts (Serif) */
.login-card .font-serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
}

/* Specific styling for the form input boxes */
.login-card .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--stone-200);
    border-radius: 0.125rem;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 300;
}
.login-card .form-input:focus {
    outline: none;
    border-color: var(--stone-900);
}

/* Shadow definition */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* ==========================================
   MOBILE LOGIN BREAKOUT FIXES
   ========================================== */
@media (max-width: 768px) {
    /* Uses the 'calc(-50vw + 50%)' trick from Turn 4 for consistency */
    .breakout-card-mobile { 
        margin: 0 calc(-50vw + 50%) !important; 
        width: 100vw !important; 
        max-width: 100vw !important; 
        
        border-radius: 0 !important; /* Premium zero-radius breakout style */
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
        
        /* Adjust padding slightly for tighter screens */
        padding: 3rem 1.5rem !important;
    }
}

/* ==========================================
   ORDER SLIP PRINT STYLES
   ========================================== */
@media print {
    /* Hide everything except the print section */
    body * { visibility: hidden; }
    #print-section, #print-section * { visibility: visible; }
    #print-section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block !important;
        color: black;
        background: transparent;
        font-family: 'Cormorant Garamond', Georgia, serif;
    }

    /* Slip Styling */
    .slip-container {
        padding: 40px;
        max-width: 800px;
        margin: 0 auto;
    }
    .slip-header {
        text-align: center;
        border-bottom: 1px solid #000;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    .slip-logo {
        width: 250px;
        filter: grayscale(100%) contrast(200%);
        margin-bottom: 10px;
    }
    .slip-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }
    .slip-section-title {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        display: block;
    }
    .slip-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 30px;
    }
    .slip-table th {
        text-align: left;
        border-bottom: 1px solid #000;
        padding: 10px 0;
        font-size: 14px;
    }
    .slip-table td {
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        font-size: 15px;
        vertical-align: top;
    }
    .slip-footer {
        margin-top: 50px;
        text-align: center;
        font-size: 13px;
        border-top: 1px solid #000;
        padding-top: 20px;
    }
}