/** Shopify CDN: Minification failed

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

**/
/* =========================================================
   SOLARA Design System — Core tokens
   Canonical source: Solara Brand Guidelines PDF
   Live reference: www.solara.in (Apr 2026)
   ========================================================= */

/* ---------- Web fonts ---------- */
/* Brand canonical is Gilroy (commercial). We ship Geologica
   as a nearest open-source match, and Playfair Display for
   the editorial serif. Replace with Gilroy .otf/.woff2 when
   licensed files are available. */

@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'),
       url('Geologica-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'),
       url('Geologica-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'),
       url('Geologica-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'),
       url('Geologica-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'),
       url('Geologica-Black.woff2') format('woff2');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* ===== Brand colors (canonical) ===== */
  --brand-navy:        #004984;
  --brand-navy-dark:   #003366;   /* hover / pressed */
  --brand-sky:         #86BDD5;
  --brand-cream:       #FFF7E0;
  --brand-gray:        #959595;

  /* ===== Surfaces ===== */
  --surface-white:     #FFFFFF;
  --surface-cream:     #FFF7E0;
  --surface-sand:      #EBE5D4;   /* product card bg on live site */
  --surface-blue-tint: #f0f7ff;
  --surface-card:      #FFFFFF;

  /* ===== Text ===== */
  --text-primary:      #1a1a1a;
  --text-muted:        #6b7c93;
  --text-on-navy:      #FFFFFF;
  --text-on-cream:     #004984;

  /* ===== Semantic ===== */
  --success:           #16a34a;
  --success-bg:        #ecfdf5;
  --warning:           #f59e0b;
  --warning-bg:        #fef3c7;
  --danger:            #e74c3c;
  --danger-bg:         #fee2e2;
  --info:              #004984;
  --info-bg:           #f0f7ff;

  /* ===== Borders ===== */
  --border-default:    #e5e7eb;
  --border-muted:      #f0f0f0;
  --border-focus:      #004984;

  /* ===== Radii ===== */
  --radius-xs:         4px;
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         14px;
  --radius-pill:       999px;

  /* ===== Shadows ===== */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:         0 8px 24px rgba(0,0,0,0.12);
  --shadow-card:       rgba(99,99,99,0.2) 0 2px 8px 0;
  --shadow-sticky:     0 -4px 20px rgba(0,0,0,0.08);
  --shadow-focus:      0 0 0 3px rgba(0,73,132,0.1);

  /* ===== Spacing (4-pt scale) ===== */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* ===== Layout ===== */
  --container-max:       1400px;
  --container-narrow:    1150px;
  --gutter-mobile:       16px;
  --gutter-desktop:      20px;

  /* ===== Typography stacks ===== */
  --font-primary: 'Gilroy', 'Geologica', 'Inter', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-alt:     'Poppins', 'Gilroy', system-ui, sans-serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ===== Type scale (live site computed) ===== */
  --fs-display:  40px;   /* hero */
  --fs-h1:       24px;
  --fs-h2:       24px;
  --fs-h3:       18px;
  --fs-body-lg:  16px;
  --fs-body:     14px;
  --fs-small:    12px;
  --fs-micro:    10px;

  --lh-display:  1.15;
  --lh-heading:  1.3;
  --lh-body:     1.6;
  --lh-tight:    1.25;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  /* Transitions */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* =========================================================
   Semantic element styles — apply to plain HTML nodes
   ========================================================= */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h-display {
  font-family: var(--font-primary);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

h2, .h-h2 {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--text-primary);
  margin: 0;
}

h3, .h-h3 {
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
}

.t-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0;
}

.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.t-muted {
  color: var(--text-muted);
}

.t-small {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.t-micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.t-price {
  font-size: 26px;
  font-weight: 900;
  color: var(--brand-navy);
  letter-spacing: -0.01em;
}

.t-strike {
  font-size: var(--fs-body);
  color: #999;
  text-decoration: line-through;
}

/* =========================================================
   Core component primitives
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
  text-decoration: none;
}

.btn-primary {
  background: var(--brand-navy);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-navy-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: #fff;
  color: var(--brand-navy);
  border: 1.5px solid var(--brand-navy);
  padding: 12px 18px;
  font-size: 13px;
}
.btn-secondary:hover { background: var(--surface-blue-tint); }

.btn-pill {
  border-radius: var(--radius-pill);
}

.input {
  width: 100%;
  font-family: var(--font-primary);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
.badge-save    { background: var(--success);  color: #fff; }
.badge-warn    { background: var(--warning);  color: #1a1a1a; }
.badge-sale    { background: var(--danger);   color: #fff; }
.badge-info    { background: var(--info-bg);  color: var(--brand-navy); }