/** Shopify CDN: Minification failed

Line 356:0 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));

  /* 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: hidden;
  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: #f9f8f6;
  line-height: var(--ag-line-height-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

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