/** Shopify CDN: Minification failed

Line 410:0 All "@import" rules must come first

**/
/* ============================================================
   SKY PRINT HOUSE - TYPOGRAPHY DESIGN SYSTEM v1.0
   Industry Standard Type Scale (Major Third 1.25 ratio)
   Based on: Tailwind CSS, Material Design, IBM Carbon
   ============================================================ */
:root {
    /* ===== FONT FAMILIES ===== */
    --sph-font-display: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --sph-font-body: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --sph-font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;
    /* ===== TYPE SCALE (Major Third - 1.25 ratio) ===== 
     Base: 16px (1rem)
     Scale: 12 → 14 → 16 → 20 → 24 → 30 → 36 → 48 → 60 → 72
  */
    /* Display - Hero Headlines */
    --sph-text-display-2xl: clamp(3rem, 6vw, 4.5rem);
    /* 48-72px */
    --sph-text-display-xl: clamp(2.5rem, 5vw, 3.75rem);
    /* 40-60px */
    --sph-text-display-lg: clamp(2.25rem, 4.5vw, 3rem);
    /* 36-48px */
    /* Headings */
    --sph-text-h1: clamp(2rem, 4vw, 2.5rem);
    /* 32-40px */
    --sph-text-h2: clamp(1.5rem, 3vw, 1.875rem);
    /* 24-30px */
    --sph-text-h3: clamp(1.25rem, 2.5vw, 1.5rem);
    /* 20-24px */
    --sph-text-h4: 1.125rem;
    /* 18px */
    --sph-text-h5: 1rem;
    /* 16px */
    --sph-text-h6: 0.875rem;
    /* 14px */
    /* Body Text */
    --sph-text-xl: 1.25rem;
    /* 20px - Large paragraphs */
    --sph-text-lg: 1.125rem;
    /* 18px - Prominent text */
    --sph-text-base: 1rem;
    /* 16px - Default body */
    --sph-text-sm: 0.875rem;
    /* 14px - Secondary text */
    --sph-text-xs: 0.75rem;
    /* 12px - Captions, labels */
    --sph-text-2xs: 0.6875rem;
    /* 11px - Micro text */
    /* ===== FONT WEIGHTS ===== */
    --sph-font-light: 300;
    --sph-font-normal: 400;
    --sph-font-medium: 500;
    --sph-font-semibold: 600;
    --sph-font-bold: 700;
    --sph-font-extrabold: 800;
    --sph-font-black: 900;
    /* ===== LINE HEIGHTS ===== */
    --sph-leading-none: 1;
    --sph-leading-tight: 1.1;
    /* Headlines */
    --sph-leading-snug: 1.25;
    /* Subheadings */
    --sph-leading-normal: 1.5;
    /* Body text */
    --sph-leading-relaxed: 1.625;
    /* Long form content */
    --sph-leading-loose: 1.75;
    /* Maximum readability */
    /* ===== LETTER SPACING ===== */
    --sph-tracking-tighter: -0.05em;
    /* Large headlines */
    --sph-tracking-tight: -0.025em;
    /* Headlines */
    --sph-tracking-normal: 0;
    /* Body text */
    --sph-tracking-wide: 0.025em;
    /* Buttons, small text */
    --sph-tracking-wider: 0.05em;
    /* Labels */
    --sph-tracking-widest: 0.1em;
    /* Uppercase labels */
    /* ===== PARAGRAPH SPACING ===== */
    --sph-paragraph-spacing: 1.5em;
    /* ===== MAX LINE WIDTH (Optimal readability: 45-75 chars) ===== */
    --sph-prose-width: 65ch;
    --sph-prose-width-sm: 45ch;
    --sph-prose-width-lg: 75ch;
}
/* ===== BASE TYPOGRAPHY RESET ===== */
.sph-typography,
[data-sph-typography] {
    font-family: var(--sph-font-body);
    font-size: var(--sph-text-base);
    line-height: var(--sph-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* ===== HEADING STYLES ===== */
.sph-display-2xl {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-display-2xl);
    font-weight: var(--sph-font-extrabold);
    line-height: var(--sph-leading-tight);
    letter-spacing: var(--sph-tracking-tighter);
}
.sph-display-xl {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-display-xl);
    font-weight: var(--sph-font-extrabold);
    line-height: var(--sph-leading-tight);
    letter-spacing: var(--sph-tracking-tighter);
}
.sph-display-lg {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-display-lg);
    font-weight: var(--sph-font-extrabold);
    line-height: var(--sph-leading-tight);
    letter-spacing: var(--sph-tracking-tight);
}
.sph-h1 {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-h1);
    font-weight: var(--sph-font-bold);
    line-height: var(--sph-leading-tight);
    letter-spacing: var(--sph-tracking-tight);
}
.sph-h2 {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-h2);
    font-weight: var(--sph-font-bold);
    line-height: var(--sph-leading-snug);
    letter-spacing: var(--sph-tracking-tight);
}
.sph-h3 {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-h3);
    font-weight: var(--sph-font-semibold);
    line-height: var(--sph-leading-snug);
    letter-spacing: var(--sph-tracking-normal);
}
.sph-h4 {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-h4);
    font-weight: var(--sph-font-semibold);
    line-height: var(--sph-leading-snug);
}
.sph-h5 {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-h5);
    font-weight: var(--sph-font-semibold);
    line-height: var(--sph-leading-normal);
}
.sph-h6 {
    font-family: var(--sph-font-display);
    font-size: var(--sph-text-h6);
    font-weight: var(--sph-font-semibold);
    line-height: var(--sph-leading-normal);
    text-transform: uppercase;
    letter-spacing: var(--sph-tracking-wider);
}
/* ===== BODY TEXT STYLES ===== */
.sph-body-xl {
    font-size: var(--sph-text-xl);
    line-height: var(--sph-leading-relaxed);
}
.sph-body-lg {
    font-size: var(--sph-text-lg);
    line-height: var(--sph-leading-relaxed);
}
.sph-body {
    font-size: var(--sph-text-base);
    line-height: var(--sph-leading-normal);
}
.sph-body-sm {
    font-size: var(--sph-text-sm);
    line-height: var(--sph-leading-normal);
}
.sph-caption {
    font-size: var(--sph-text-xs);
    line-height: var(--sph-leading-normal);
}
.sph-overline {
    font-size: var(--sph-text-xs);
    font-weight: var(--sph-font-bold);
    line-height: var(--sph-leading-normal);
    text-transform: uppercase;
    letter-spacing: var(--sph-tracking-widest);
}
/* ===== SPECIAL STYLES ===== */
/* Badge/Label text */
.sph-label {
    font-size: var(--sph-text-xs);
    font-weight: var(--sph-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--sph-tracking-wider);
}
/* Price text */
.sph-price {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-extrabold);
    letter-spacing: var(--sph-tracking-tight);
    font-variant-numeric: tabular-nums;
}
.sph-price-lg {
    font-size: var(--sph-text-h2);
}
.sph-price-md {
    font-size: var(--sph-text-h3);
}
.sph-price-sm {
    font-size: var(--sph-text-lg);
}
/* Button text */
.sph-button-text {
    font-size: var(--sph-text-sm);
    font-weight: var(--sph-font-bold);
    letter-spacing: var(--sph-tracking-wide);
}
.sph-button-text-lg {
    font-size: var(--sph-text-base);
    font-weight: var(--sph-font-bold);
    letter-spacing: var(--sph-tracking-wide);
}
/* Gradient text utility */
.sph-gradient-text {
    background: linear-gradient(135deg, var(--sph-navy, #00497a), var(--sph-cyan, #38bdf8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Prose container (optimal reading width) */
.sph-prose {
    max-width: var(--sph-prose-width);
}
.sph-prose>*+* {
    margin-top: var(--sph-paragraph-spacing);
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 640px) {
    :root {
        /* Slightly reduce large display sizes on mobile */
        --sph-text-display-2xl: clamp(2.25rem, 8vw, 3rem);
        --sph-text-display-xl: clamp(2rem, 7vw, 2.5rem);
        --sph-text-display-lg: clamp(1.75rem, 6vw, 2.25rem);
    }
}
/* ===== WEIGHT UTILITIES ===== */
.sph-font-light {
    font-weight: var(--sph-font-light);
}
.sph-font-normal {
    font-weight: var(--sph-font-normal);
}
.sph-font-medium {
    font-weight: var(--sph-font-medium);
}
.sph-font-semibold {
    font-weight: var(--sph-font-semibold);
}
.sph-font-bold {
    font-weight: var(--sph-font-bold);
}
.sph-font-extrabold {
    font-weight: var(--sph-font-extrabold);
}
.sph-font-black {
    font-weight: var(--sph-font-black);
}
/* ===== LINE HEIGHT UTILITIES ===== */
.sph-leading-none {
    line-height: var(--sph-leading-none);
}
.sph-leading-tight {
    line-height: var(--sph-leading-tight);
}
.sph-leading-snug {
    line-height: var(--sph-leading-snug);
}
.sph-leading-normal {
    line-height: var(--sph-leading-normal);
}
.sph-leading-relaxed {
    line-height: var(--sph-leading-relaxed);
}
.sph-leading-loose {
    line-height: var(--sph-leading-loose);
}
/* ===== TRACKING UTILITIES ===== */
.sph-tracking-tighter {
    letter-spacing: var(--sph-tracking-tighter);
}
.sph-tracking-tight {
    letter-spacing: var(--sph-tracking-tight);
}
.sph-tracking-normal {
    letter-spacing: var(--sph-tracking-normal);
}
.sph-tracking-wide {
    letter-spacing: var(--sph-tracking-wide);
}
.sph-tracking-wider {
    letter-spacing: var(--sph-tracking-wider);
}
.sph-tracking-widest {
    letter-spacing: var(--sph-tracking-widest);
}
/* ===== TEXT TRANSFORM UTILITIES ===== */
.sph-uppercase {
    text-transform: uppercase;
}
.sph-lowercase {
    text-transform: lowercase;
}
.sph-capitalize {
    text-transform: capitalize;
}
.sph-normal-case {
    text-transform: none;
}
/* ============================================================
   GLOBAL THEME OVERRIDE (Soft)
   Uses :where() for low specificity - won't override custom sections
   SPH custom sections are excluded to preserve their styles
   ============================================================ */
/* ===== BASE HTML ELEMENTS (Low specificity) ===== */
html {
    font-size: 16px;
}
:where(body) {
    font-family: var(--sph-font-body);
    font-size: var(--sph-text-base);
    line-height: var(--sph-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* ===== HEADINGS (Low specificity with :where) ===== */
/* These will NOT override SPH custom section headings */
:where(h1):not([class*="sph-"]) {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-bold);
    line-height: var(--sph-leading-tight);
}
:where(h2):not([class*="sph-"]) {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-bold);
    line-height: var(--sph-leading-snug);
}
:where(h3):not([class*="sph-"]) {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-semibold);
    line-height: var(--sph-leading-snug);
}
:where(h4, h5, h6):not([class*="sph-"]) {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-semibold);
}
/* ===== PARAGRAPHS (Low specificity) ===== */
:where(p):not([class*="sph-"]) {
    font-family: var(--sph-font-body);
    line-height: var(--sph-leading-normal);
}
/* ===== LINKS ===== */
:where(a) {
    font-family: inherit;
    transition: color 0.2s ease;
}
/* ===== FORM ELEMENTS ===== */
:where(input, textarea, select) {
    font-family: var(--sph-font-body);
}
:where(label) {
    font-family: var(--sph-font-body);
}
/* ===== SHOPIFY THEME ELEMENTS (Only theme defaults) ===== */
/* These target theme elements only, not SPH custom sections */
/* Theme Product titles */
:where(.product__title, .product-single__title, .card__heading):not([class*="sph-"]) {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-bold);
}
/* Theme Product prices */
:where(.price, .product__price, .money):not([class*="sph-"]) {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-font-bold);
    font-variant-numeric: tabular-nums;
}
/* Navigation - Keep working */
.gm-menu a,
.site-nav a,
.header__menu-item {
    font-family: var(--sph-font-body);
    font-weight: var(--sph-font-medium);
}
/* Footer */
:where(footer, .footer, .site-footer) {
    font-family: var(--sph-font-body);
}
/* Rich text / Blog */
:where(.rte, .article__content, .page__content) {
    font-family: var(--sph-font-body);
    line-height: var(--sph-leading-relaxed);
}
/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap');