/** Shopify CDN: Minification failed

Line 370:7 Unexpected end of file

**/
:root {
   /* ========================================
     PX-001: TYPOGRAPHY SYSTEM
     Source: cinema/src/styles/typography.css
     ======================================== */

   /* Font Families */
   --ag-font-display: var(--ag-theme-font-display, 'Fraunces', 'Times New Roman', serif);
   --ag-font-body: var(--ag-theme-font-body, 'Crimson Text', Georgia, serif);
   --ag-font-ui: var(--ag-theme-font-ui, 'Work Sans', 'Helvetica Neue', sans-serif);
   --ag-font-system: var(--ag-theme-font-system, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   --ag-font-handwritten: var(--ag-theme-font-handwritten, 'Caveat', cursive);

   /* Font Size Scale - 4-tier hierarchy */
   --ag-font-size-xs: 0.75rem;
   --ag-font-size-sm: 0.875rem;
   --ag-font-size-base: 1rem;
   --ag-font-size-lg: 1.125rem;
   --ag-font-size-xl: 1.25rem;
   --ag-font-size-2xl: 1.5rem;
   --ag-font-size-3xl: 2rem;
   --ag-font-size-4xl: 2.75rem;
   --ag-font-size-5xl: 3.5rem;

   /* Heading Sizes - Responsive */
   --ag-h1-size: clamp(2.8rem, 7vw, 5rem);
   --ag-h2-size: clamp(1.75rem, 5vw, 2.5rem);
   --ag-h3-size: clamp(1.375rem, 3vw, 1.625rem);
   --ag-h4-size: clamp(1.125rem, 2vw, 1.25rem);

   /* Line Heights */
   --ag-line-height-tight: 1.2;
   --ag-line-height-snug: 1.35;
   --ag-line-height-normal: 1.5;
   --ag-line-height-base: 1.85;
   --ag-line-height-relaxed: 1.75;
   --ag-line-height-loose: 1.85;

   /* Letter Spacing */
   --ag-letter-spacing-tighter: -0.03em;
   --ag-letter-spacing-tight: -0.02em;
   --ag-letter-spacing-normal: 0;
   --ag-letter-spacing-wide: 0.035em;
   --ag-letter-spacing-wider: 0.05em;
   --ag-letter-spacing-widest: 0.08em;

   /* Font Weights */
   --ag-font-weight-light: 300;
   --ag-font-weight-regular: 400;
   --ag-font-weight-medium: 500;
   --ag-font-weight-semibold: 600;
   --ag-font-weight-bold: 700;
   --ag-font-weight-extrabold: 800;

   /* Component-Specific Typography Tokens - Added 2026-03-04 */
   --ag-font-size-card-title: clamp(1rem, 2vw, 1.25rem);
   --ag-font-size-card-title-sm: clamp(0.9375rem, 1.8vw, 1.125rem);
   --ag-font-price-display: clamp(1.75rem, 3.5vw, 2.5rem);
   --ag-font-price-large: clamp(1.5rem, 3vw, 2rem);
   --ag-font-label-ui: 0.75rem;
   --ag-font-label-ui-lg: 0.875rem;
   --ag-font-badge: 0.7rem;
   --ag-font-kicker: clamp(0.75rem, 1.4vw, 0.85rem);

   /* ========================================
     PX-002: COLOR SYSTEM
     Source: cinema/tailwind.config.js
     ======================================== */

   /* Forest - Primary Brand Color */
   --ag-color-forest-50: #eef5f1;
   --ag-color-forest-100: #d8e9e0;
   --ag-color-forest-200: #b4d4c4;
   --ag-color-forest-300: #7fb89a;
   --ag-color-forest-400: #4a9b70;
   --ag-color-forest-500: #2d6a4f;
   --ag-color-forest-600: #215840;
   --ag-color-forest-700: #1d4e35;
   --ag-color-forest-800: #184a2c;
   --ag-color-forest-900: #0e3e29;
   --ag-color-forest-950: #0a1f17;

   /* Cream - Background Colors */
   --ag-color-cream-50: #ffffff;
   --ag-color-cream-100: #f8f5f0;
   --ag-color-cream-200: #f5f3f0;
   --ag-color-cream-300: #ebe8e4;
   --ag-color-cream-400: #d9d5ce;

   /* Utility Colors */
   --ag-color-white: #ffffff;

   /* Gold - Call-to-Action Colors */
   --ag-color-gold-50: #fff7ed;
   --ag-color-gold-100: #ffedd5;
   --ag-color-gold-200: #fed7aa;
   --ag-color-gold-300: #fdba74;
   --ag-color-gold-400: #fb923c;
   --ag-color-gold-500: #ea580c;
   --ag-color-gold-600: #ea580c;
   --ag-color-gold-700: #c2410c;
   --ag-color-gold-bright: #f6b900;
   /* Brand gold for CTAs */

   /* Ink - Text Colors */
   --ag-color-ink-50: #f9f9f9;
   --ag-color-ink-100: #f0f0f0;
   --ag-color-ink-200: #e0e0e0;
   --ag-color-ink-300: #a3a3a3;
   --ag-color-ink-400: #8a8a8a;
   --ag-color-ink-500: #6b6b6b;
   --ag-color-ink-600: #525252;
   --ag-color-ink-700: #404040;
   --ag-color-ink-800: #2a2a2a;
   --ag-color-ink-900: #1a1a1a;
   --ag-color-ink-950: #0f0f0f;

   /* Terra - Warm Accent */
   --ag-color-terra-50: #fdf6f3;
   --ag-color-terra-100: #fae8de;
   --ag-color-terra-200: #f5d0bc;
   --ag-color-terra-300: #e8a987;
   --ag-color-terra-400: #d9865a;
   --ag-color-terra-500: #c9754b;
   --ag-color-terra-600: #b05e34;
   --ag-color-terra-700: #924a28;

   /* Semantic Status Colors */
   --ag-color-success: #10b981;
   --ag-color-success-700: #047857;
   --ag-color-warning: #f59e0b;
   --ag-color-warning-700: #b45309;
   --ag-color-error: #ef4444;
   --ag-color-error-700: #b91c1c;
   --ag-color-info: #3b82f6;
   --ag-color-info-700: #1d4ed8;

   /* Brand Colors - Two-Tone System */
   --ag-color-brand-headline-dark: #264653;
   --ag-color-brand-headline-accent: #e9c46a;
   --ag-color-brand-cta-primary: #f4a261;
   --ag-color-brand-cta-secondary: #2a9d8f;
   --ag-color-brand-text-body: #5a5a5a;

   /* Premium Accent */
   --ag-color-gold-mix: #d4941a;
   --ag-color-accent-rust: #cc5500;

   /* Background Tones - Tonal Separation */
   --ag-color-bg-beige-light: #fffaf5;
   --ag-color-bg-beige-products: #f5ebdb;
   --ag-color-bg-beige-medium: #f3ebdd;
   --ag-color-bg-beige-testimonials: #f1e3cd;
   --ag-color-bg-beige-latest: #ebdfc8;
   --ag-color-bg-beige-dark: #efe3cd;
   --ag-color-bg-cream: #faf8f3;
   --ag-color-bg-bestseller: #faf6ef;

   /* Semantic Color Tokens */
   --ag-color-bg-page: var(--ag-theme-background, var(--ag-color-cream-100));
   --ag-color-bg-surface: var(--ag-theme-surface, var(--ag-color-cream-50));

   /* IMPROVED: Use forest green for brand-aligned text with better contrast */
   --ag-color-text-primary: var(--ag-theme-text, var(--ag-color-forest-950));
   --ag-color-text-secondary: var(--ag-theme-text-muted, var(--ag-color-forest-700));
   --ag-color-text-muted: color-mix(in srgb, var(--ag-color-text-secondary) 76%, white);
   --ag-color-border-subtle: var(--ag-theme-border, color-mix(in srgb, var(--ag-theme-accent, var(--ag-color-forest-900)) 18%, white));
   --ag-color-border-strong: color-mix(in srgb, var(--ag-theme-accent, var(--ag-color-forest-900)) 30%, white);

   /* ENHANCED: Orange/Gold accent colors for CTAs and highlights */
   --ag-color-action: var(--ag-theme-accent, #f97316);
   --ag-color-action-hover: var(--ag-theme-accent-strong, #ea580c);
   --ag-color-action-strong: color-mix(in srgb, var(--ag-color-action) 82%, black);
   --ag-color-on-action: var(--ag-theme-on-accent, #fff);

   /* NEW: Accent color system for visual hierarchy */
   --ag-color-accent-primary: #f97316;
   /* Orange for primary CTAs */
   --ag-color-accent-secondary: #F6B900;
   /* Gold for highlights */
   --ag-color-accent-success: #10b981;
   /* Green for success states */
   --ag-color-focus-ring: var(--ag-color-forest-900);
   /* Improved contrast - dark forest green */
   --ag-color-focus-ring-strong: var(--ag-color-gold-bright);
   /* For light backgrounds */

   /* ========================================
     PX-003: SPACING SYSTEM
     Source: cinema/src/app/globals.css
     4px baseline grid system
     ======================================== */

   --ag-space-scale: var(--ag-theme-space-scale, 1);

   /* Base Spacing Scale */
   --ag-space-xs: calc(0.25rem * var(--ag-space-scale));
   --ag-space-sm: calc(0.5rem * var(--ag-space-scale));
   --ag-space-md: calc(1rem * var(--ag-space-scale));
   --ag-space-lg: calc(1.5rem * var(--ag-space-scale));
   --ag-space-xl: calc(2rem * var(--ag-space-scale));
   --ag-space-2xl: calc(3rem * var(--ag-space-scale));
   --ag-space-3xl: calc(4rem * var(--ag-space-scale));
   --ag-space-4xl: calc(6rem * var(--ag-space-scale));

   /* Legacy Numbered Scale */
   --ag-space-1: calc(0.25rem * var(--ag-space-scale));
   --ag-space-2: calc(0.5rem * var(--ag-space-scale));
   --ag-space-3: calc(0.75rem * var(--ag-space-scale));
   --ag-space-4: calc(1rem * var(--ag-space-scale));
   --ag-space-5: calc(1.5rem * var(--ag-space-scale));
   --ag-space-6: calc(2rem * var(--ag-space-scale));
   --ag-space-7: calc(3.5rem * var(--ag-space-scale));
   --ag-space-8: calc(5.5rem * var(--ag-space-scale));
   --ag-space-9: calc(7.5rem * var(--ag-space-scale));
   --ag-space-10: calc(9.5rem * var(--ag-space-scale));
   --ag-space-11: calc(12rem * var(--ag-space-scale));
   --ag-space-12: calc(15rem * var(--ag-space-scale));

   /* Motion Durations - Extended Scale */
   --ag-duration-350ms: calc(350ms * var(--ag-motion-scale));
   --ag-duration-extra-slow: calc(800ms * var(--ag-motion-scale));

   /* Semantic Spacing */
   --ag-section-pad-y: clamp(5.8rem, 12vw, 9.5rem);
   --ag-section-gap: clamp(3rem, 7vw, 5rem);
   --ag-section-padding: 6rem;
   --ag-section-margin-top: 3.125rem;
   --ag-component-gap: 1.25rem;
   --ag-card-padding: 1.5rem;
   --ag-form-field-spacing: 1rem;
   --ag-footer-padding: 5rem;

   /* ========================================
     BORDER, RADIUS, SHADOW PRIMITIVES
     ======================================== */

   --ag-border-width-thin: 1px;
   --ag-border-width-thick: 2px;

   --ag-radius-scale: var(--ag-theme-radius-scale, 1);
   --ag-radius-xs: calc(0.25rem * var(--ag-radius-scale));
   --ag-radius-sm: calc(0.375rem * var(--ag-radius-scale));
   --ag-radius-md: calc(0.5rem * var(--ag-radius-scale));
   --ag-radius-lg: calc(0.75rem * var(--ag-radius-scale));
   --ag-radius-xl: calc(1rem * var(--ag-radius-scale));
   --ag-radius-2xl: calc(1.25rem * var(--ag-radius-scale));
   --ag-radius-card: 1rem;
   --ag-radius-button: 0.875rem;
   --ag-radius-pill: 999px;

   --ag-shadow-strength: var(--ag-theme-shadow-strength, 1);
   --ag-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / calc(0.05 * var(--ag-shadow-strength)));
   --ag-shadow-md: 0 4px 6px -1px rgb(0 0 0 / calc(0.1 * var(--ag-shadow-strength))), 0 2px 4px -2px rgb(0 0 0 / calc(0.1 * var(--ag-shadow-strength)));
   --ag-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / calc(0.1 * var(--ag-shadow-strength))), 0 4px 6px -4px rgb(0 0 0 / calc(0.1 * var(--ag-shadow-strength)));
   --ag-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / calc(0.1 * var(--ag-shadow-strength))), 0 8px 10px -6px rgb(0 0 0 / calc(0.1 * var(--ag-shadow-strength)));
   --ag-shadow-card: 0 8px 30px -4px rgb(14 62 41 / 0.06), 0 4px 12px -2px rgb(14 62 41 / 0.04);
   --ag-shadow-card-hover: 0 25px 50px -12px rgb(14 62 41 / 0.12), 0 12px 24px -6px rgb(14 62 41 / 0.08);
   --ag-shadow-button: 0 4px 12px rgb(0 0 0 / 0.15);
   --ag-shadow-button-primary: 0 8px 24px rgb(243 82 1 / 0.35);

   /* ========================================
     PX-004: MOTION PRIMITIVES
     Source: cinema/src/styles/animations.css
     ======================================== */

   --ag-motion-scale: var(--ag-theme-motion-scale, 1);

   /* Durations */
   --ag-duration-fast: calc(120ms * var(--ag-motion-scale));
   --ag-duration-normal: calc(200ms * var(--ag-motion-scale));
   --ag-duration-medium: calc(300ms * var(--ag-motion-scale));
   --ag-duration-slow: calc(400ms * var(--ag-motion-scale));
   --ag-duration-slower: calc(600ms * var(--ag-motion-scale));

   /* Legacy Duration Aliases */
   --ag-motion-duration-fast: var(--ag-duration-fast);
   --ag-motion-duration-medium: var(--ag-duration-medium);
   --ag-motion-duration-slow: var(--ag-duration-slow);

   /* Easing Functions */
   --ag-ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ag-ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ag-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ag-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ag-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
   --ag-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   --ag-ease-glide: cubic-bezier(0.25, 0.1, 0.25, 1);
   --ag-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

   /* Legacy Easing Aliases */
   --ag-motion-ease-standard: var(--ag-ease-standard);
   --ag-motion-ease-emphasized: var(--ag-ease-emphasized);

   /* Motion Distances */
   --ag-motion-distance-sm: 1px;
   --ag-motion-distance-md: 3px;
   --ag-motion-distance-lg: 8px;

   /* ========================================
     Z-INDEX SYSTEM
     ======================================== */

   --ag-z-base: 0;
   --ag-z-content: 10;
   --ag-z-sticky: 20;
   --ag-z-dropdown: 50;
   --ag-z-sticky-header: 50;
   --ag-z-fixed: 100;
   --ag-z-modal-backdrop: 1000;
   --ag-z-modal: 1001;
   --ag-z-tooltip: 1010;
   --ag-z-notifications: 1020;

   /* ========================================
     LEGACY COMPATIBILITY ALIASES
     ======================================== */

   --ag-surface-page: var(--ag-color-bg-page);
   --ag-surface-card: var(--ag-color-bg-surface);
   --ag-text-primary: var(--ag-color-text-primary);
   --ag-text-secondary: var(--ag-color-text-secondary);
   --ag-text-muted: var(--ag-color-text-muted);
   --ag-border-subtle: var(--ag-color-border-subtle);
   --ag-focus-ring: var(--ag-color-focus-ring);
}

:root[data-ag-reduced-motion='true'] {
   --ag-motion-scale: 0;
}

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

html {
   font-size: 100%;
   scroll-behavior: smooth;
   overflow-x: clip;
   max-width: 100%;
}

body {
   margin: 0;
   font-family: var(--ag-font-body);
   font-size: var(--ag-font-size-base);
   font-weight: var(--ag-font-weight-regular);
   color: var(--ag-text-primary);
   background: var(--ag-color-bg-page);
   line-height: var(--ag-line-height-base);
   text-rendering: geometricPrecision;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: clip;
   max-width: 100%;
}

/* CRITICAL: Prevent horizontal scroll on mobile */
img,
video,
iframe,
embed,
object,