/* MEDRAL HEALTH CO — UNIFIED STOREFRONT BUNDLE (v4.0 Gen-Z Crimson) */


/* === Start: theme.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — DESIGN TOKENS (v4.0 Gen-Z Premium Wellness)
   Single source of truth for design decisions across Storefront and Admin.
   Palette: Warm Cream (Background), Deep Charcoal (Text), Vibrant Crimson (Hero)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM TOKENS (Primitives)
     ------------------------------------------------------------------------ */

  /* Primary Brand — Vibrant Crimson / Berry Red */
  --color-primary:         #D31145;
  --color-primary-hover:   #B00E39;
  --color-primary-light:   #FDE7ED;
  --color-primary-muted:   #E68AA2;

  /* Secondary Brand — Muted Charcoal (For sophisticated contrast) */
  --color-secondary:       #2D2D2D;
  --color-secondary-hover: #1A1A1A;
  --color-secondary-light: #EBEBEB;

  /* Accent — Soft Peach (Complementary warmth) */
  --color-accent:          #F2C9B6;
  --color-accent-hover:    #E0A88D;
  --color-accent-light:    #FCF4F0;

  /* Neutral & Background Scale */
  --color-bg:              #FDFBF7; /* Warm Cream / Ivory Background */
  --color-surface:         #FFFFFF; /* Pure White Card / Component Surface */
  --color-surface-warm:    #F5F2EB; /* Warm Alternate Surface */
  --color-border:          #E8E4DF; /* Primary Border */
  --color-border-subtle:   #F2EFEA; /* Secondary / Soft Border */

  /* Text & Typography Colors */
  --color-text-primary:    #1F1F1F; /* Headlines, primary copy (Deep Charcoal) */
  --color-text-secondary:  #5C5C5C; /* Subtitles, body copy */
  --color-text-muted:      #8F8F8F; /* Captions, hints, meta */
  --color-text-inverse:    var(--color-surface); /* Light text on dark surfaces */

  /* Feedback Colors */
  --color-success:         #2E8B57;
  --color-success-bg:      #EAF4ED;
  --color-success-border:  #B5D8C1;
  --color-success-text:    #1C5434;

  --color-warning:         #D48806;
  --color-warning-bg:      #FFFBE6;
  --color-warning-border:  #FFE58F;
  --color-warning-text:    #875604;

  --color-danger:          #D31145; /* Align danger with primary crimson if appropriate, or use standard red */
  --color-danger-bg:       #FDE7ED;
  --color-danger-border:   #FFA39E;
  --color-danger-text:     #A8071A;

  /* Overlay & Blur */
  --color-overlay:         rgba(31, 31, 31, 0.5);
  --overlay-blur:          4px;

  /* Gradients */
  --gradient-primary:      linear-gradient(135deg, #D31145 0%, #A00C33 100%);
  --gradient-warm:         linear-gradient(135deg, #F5F2EB 0%, #FDFBF7 100%);
  
  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     ------------------------------------------------------------------------ */

  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:      'Instrument Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

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

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;

  /* Complete Type Scale */
  --type-display: 3.5rem;    /* 56px */
  --type-h1:      2.5rem;    /* 40px */
  --type-h2:      2rem;      /* 32px */
  --type-h3:      1.5rem;    /* 24px */
  --type-h4:      1.25rem;   /* 20px */
  --type-body-lg: 1.125rem;  /* 18px */
  --type-body:    1rem;      /* 16px */
  --type-small:   0.875rem;  /* 14px */
  --type-caption: 0.75rem;   /* 12px */

  /* Legacy Font Size Tokens */
  --font-size-display: var(--type-display);
  --font-size-h1:      var(--type-h1);
  --font-size-h2:      var(--type-h2);
  --font-size-h3:      var(--type-h3);
  --font-size-h4:      var(--type-h4);
  --font-size-body-lg: var(--type-body-lg);
  --font-size-body:    var(--type-body);
  --font-size-small:   var(--type-small);
  --font-size-caption: var(--type-caption);

  /* Legacy Alias Scale */
  --text-xs:   var(--type-caption); 
  --text-sm:   var(--type-small);   
  --text-base: var(--type-small);   
  --text-md:   var(--type-body);    
  --text-lg:   var(--type-body-lg); 
  --text-xl:   var(--type-h4);      
  --text-2xl:  var(--type-h3);      
  --text-3xl:  var(--type-h2);      
  --text-4xl:  var(--type-h1);      
  --text-5xl:  3rem;                     
  --text-6xl:  var(--type-display); 

  /* ------------------------------------------------------------------------
     3. SPACING SCALE
     ------------------------------------------------------------------------ */

  --space-0:    0;
  --space-1:    0.25rem;  
  --space-2:    0.5rem;   
  --space-3:    0.75rem;  
  --space-4:    1rem;     
  --space-5:    1.5rem;   
  --space-6:    2rem;     
  --space-7:    2.5rem;   
  --space-8:    3rem;     
  --space-10:   4rem;     
  --space-12:   5rem;     
  --space-16:   6rem;     
  --space-20:   7.5rem;   
  --space-24:   9rem;     

  /* Semantic Layout Spacing */
  --space-card-padding:      var(--space-6);   
  --space-section-padding:   var(--space-12);  
  --space-container-padding: var(--space-8);   

  /* ------------------------------------------------------------------------
     4. BORDER RADIUS SCALE (Pill-shaped Gen-Z aesthetic where appropriate)
     ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   12px;   
  --radius-lg:   16px;   
  --radius-xl:   24px;   
  --radius-pill: 999px;  
  --radius-full: 999px;

  /* Component Specific Radii */
  --radius-card:   var(--radius-lg);   
  --radius-input:  var(--radius-md);   
  --radius-button: var(--radius-pill); 
  --radius-badge:  var(--radius-pill); 

  /* ------------------------------------------------------------------------
     5. ELEVATION & SHADOWS (Sharp & Clean)
     ------------------------------------------------------------------------ */

  --shadow-color:    rgba(31, 31, 31, 0.04);
  --shadow-color-md: rgba(31, 31, 31, 0.06);
  --shadow-color-lg: rgba(31, 31, 31, 0.09);

  --shadow-xs:     0 1px 2px var(--shadow-color);
  --shadow-sm:     0 2px 8px var(--shadow-color);
  --shadow-md:     0 4px 16px var(--shadow-color-md);
  --shadow-lg:     0 8px 24px var(--shadow-color-lg);
  --shadow-xl:     0 16px 40px var(--shadow-color-lg);
  --shadow-drawer: -6px 0 24px var(--shadow-color-lg);

  /* ------------------------------------------------------------------------
     6. MOTION & TRANSITIONS
     ------------------------------------------------------------------------ */

  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-motion:  250ms;
  --duration-drawer:  250ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------------
     7. Z-INDEX LAYERS
     ------------------------------------------------------------------------ */

  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-drawer:     1000;
  --z-overlay:    1100;
  --z-modal:      1200;
  --z-toast:      1300;
  --z-tooltip:    1400;

  /* ------------------------------------------------------------------------
     8. LAYOUT CONTAINERS & BREAKPOINTS
     ------------------------------------------------------------------------ */

  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1280px;
  --container-max: 1280px;

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ------------------------------------------------------------------------
     9. BACKWARD COMPATIBILITY ALIAS MAPPINGS
     Routes existing variable usages seamlessly into the v4 system.
     ------------------------------------------------------------------------ */

  /* Brand Aliases */
  --brand-primary:         var(--color-primary);
  --brand-primary-hover:   var(--color-primary-hover);
  --brand-secondary:       var(--color-secondary);
  --brand-secondary-hover: var(--color-secondary-hover);
  --brand-accent:          var(--color-accent);
  --brand-accent-hover:    var(--color-accent-hover);

  --primary-color:         var(--color-primary);
  --primary-dark-color:    var(--color-primary-hover);
  --secondary-color:       var(--color-secondary);

  /* Typography Color Aliases */
  --text-primary:    var(--color-text-primary);
  --text-secondary:  var(--color-text-secondary);
  --text-tertiary:   var(--color-text-muted);
  --text-muted:      var(--color-text-muted);
  --text-inverse:    var(--color-text-inverse);
  --text-link:       var(--color-primary);
  --text-link-hover: var(--color-primary-hover);

  /* Surface & Background Aliases */
  --surface-primary:   var(--color-bg);
  --surface-secondary: var(--color-surface);
  --surface-tertiary:  var(--color-surface-warm);
  --surface-card:      var(--color-surface);
  --surface-inverse:   var(--color-text-primary);

  /* Border Aliases */
  --border-primary:   var(--color-border);
  --border-secondary: var(--color-border-subtle);
  --border-focus:     var(--color-primary);

  /* Legacy Palette Hex Aliases */
  --black:     var(--color-text-primary);
  --white:     var(--color-surface);
  --offwhite:  var(--color-bg);
  --gray:      var(--color-text-secondary);
  --lightgray: var(--color-border);

  /* Legacy teal/blue mappings (to avoid breaking unrefactored components) */
  --teal-700: var(--color-primary);
  --teal-800: var(--color-primary-hover);
  --blue-600: var(--color-secondary);
  --neutral-0: var(--color-surface);
  --neutral-50: var(--color-bg);

  /* Feedback Aliases */
  --feedback-error:          var(--color-danger);
  --feedback-error-bg:       var(--color-danger-bg);
  --feedback-error-border:   var(--color-danger-border);
  --feedback-error-text:     var(--color-danger-text);

  --feedback-success:        var(--color-success);
  --feedback-success-bg:     var(--color-success-bg);
  --feedback-success-border:  var(--color-success-border);
  --feedback-success-text:   var(--color-success-text);

  --feedback-warning:        var(--color-warning);
  --feedback-warning-bg:     var(--color-warning-bg);
  --feedback-warning-border:  var(--color-warning-border);
  --feedback-warning-text:   var(--color-warning-text);

  /* Overlay Alias */
  --overlay-bg: var(--color-overlay);
}

/* ------------------------------------------------------------------------
   MOTION UTILITY CLASSES
   ------------------------------------------------------------------------ */
.motion-fade { transition: opacity var(--duration-normal, 200ms) var(--ease-out); }
.motion-slide-up { transition: transform var(--duration-motion, 250ms) var(--ease-spring), opacity var(--duration-normal, 200ms) var(--ease-out); }
.motion-zoom { transition: transform var(--duration-normal, 200ms) var(--ease-out); }
.motion-card-hover { transition: transform var(--duration-normal, 200ms) var(--ease-spring), box-shadow var(--duration-normal, 200ms) var(--ease-spring), border-color var(--duration-normal, 200ms) var(--ease-default); }
.motion-button-hover { transition: transform var(--duration-fast, 150ms) var(--ease-spring), background-color var(--duration-fast, 150ms) var(--ease-default), box-shadow var(--duration-fast, 150ms) var(--ease-default); }

/* ------------------------------------------------------------------------
   ADMIN THEME OVERRIDES ([data-theme="admin"])
   Light cream shell — keep text dark for readable tables/forms.
   ------------------------------------------------------------------------ */
[data-theme="admin"] {
  --brand-primary:       var(--color-primary);
  --brand-primary-hover: var(--color-primary-hover);
  --brand-secondary:     var(--color-secondary);

  --text-primary:   #1F1F1F;
  --text-secondary: #5C5C5C;
  --text-tertiary:  #8F8F8F;
  --text-inverse:   #FFFFFF;

  --surface-primary:   #FDFBF7;
  --surface-secondary: #FFFFFF;
  --surface-tertiary:  #F5F2EB;
  --surface-elevated:  #FFFFFF;
  --surface-card:      #FFFFFF;

  --border-primary:   #E8E4DF;
  --border-secondary: #F2EFEA;
}
/* === End: theme.css === */

/* === Start: reset.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BASE RESET & ACCESSIBILITY STYLES
   Extracts normalize & element resets from medral-base.css (L1-36).
   ========================================================================== */

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

html {
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-primary, var(--color-text-primary));
  background: var(--surface-primary, var(--color-surface));
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Accessibility Focus Ring & Skip Link Styles */
:focus-visible {
  outline: 3px solid var(--brand-accent, #7c3aed) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm, 2px);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--brand-accent, #7c3aed) !important;
  outline-offset: 2px !important;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* === End: reset.css === */

/* === Start: medral-base.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BASE STOREFRONT STYLESHEET (medral-base.css)
   Phase 4 Homepage Experience: Editorial, Minimal, Healthcare Premium,
   Generous Whitespace, Soft Cream Surface (var(--color-bg)), Healthcare Teal (var(--color-primary)),
   Outfit Headings, Inter Body, and Photography-First Visual Cards.
   ========================================================================== */

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

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--black);
  background: var(--offwhite);
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
}

/* Accessibility Focus Ring & Skip Link Styles */
:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}

/* Skip link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--color-primary, #4e3686);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline-offset: 2px;
}

/* Keep hero CTA look when markup uses <button class="hs-cta"> */
button.hs-cta {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
}

/* Error state styling for invalid inputs */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15) !important;
}

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION HEADINGS & EYEBROWS
   -------------------------------------------------------------------------- */
.section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-eyebrow:before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 999px;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 48px;
}

.section-title--white {
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   HOMEPAGE SERVICES / CATEGORIES SECTION
   -------------------------------------------------------------------------- */
.services {
  padding: 80px 48px;
  background: var(--offwhite);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.services__item {
  padding: 36px 30px;
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(31, 41, 55, 0.03));
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.services__item:hover {
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.services__num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 44px;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 18px;
  opacity: 0.9;
}

.services__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--black);
  margin-bottom: 12px;
}

.services__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  flex: 1;
}

.services__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-color);
  margin-top: 20px;
  transition: gap 200ms;
}

.services__item:hover .services__link {
  gap: 10px;
}

/* --------------------------------------------------------------------------
   HOMEPAGE FEATURED PRODUCTS / CATALOG SECTION
   -------------------------------------------------------------------------- */
.products {
  padding: 80px 48px;
  background: var(--white);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.product-card__img {
  width: 100%;
  aspect-ratio: 1.1;
  object-fit: cover;
  padding: 16px;
  display: block;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transition: transform 300ms;
}

.product-card:hover .product-card__img {
  transform: scale(1.03);
}

.product-card__info {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--lightgray);
  background: var(--white);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__cat {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 6px;
}

.product-card__name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--black);
  transition: color 200ms;
  margin-bottom: 8px;
}

.product-card:hover .product-card__name {
  color: var(--primary-color);
}

.product-card__enq {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--primary-color);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card__enq {
  transform: translateY(0);
}

.products__more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
}

.btn--catalogue {
  background: var(--color-primary);
  border: none;
  color: var(--color-text-inverse);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 36px;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-sm);
  transition: all 200ms var(--ease-spring);
}

.btn--catalogue:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   HOMEPAGE TRUST & CERTIFICATIONS SECTION
   -------------------------------------------------------------------------- */
.certifications {
  padding: 80px 48px;
  background: var(--offwhite);
}

.certifications__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cert-card {
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  padding: 36px 30px;
  box-shadow: var(--shadow-xs);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cert-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.cert-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.cert-card__badge {
  width: 52px;
  height: 52px;
  background: var(--offwhite);
  border-radius: var(--radius-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-card__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--black);
}

.cert-card__body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   HOMEPAGE STATS SECTION
   -------------------------------------------------------------------------- */
.stats {
  padding: 64px 48px;
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stats__item {
  background: var(--offwhite);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.stats__num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 8px;
}

.stats__label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   HOMEPAGE CONTACT & NEWSLETTER CTA SECTION
   -------------------------------------------------------------------------- */
.cta-contact {
  background: var(--white);
  border-top: 1px solid var(--lightgray);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

/* Markup has a divider node between columns; hide it so it cannot break the 2-col grid */
.cta-contact__divider {
  display: none;
}

.cta-contact__left {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cta-contact__right {
  padding: 80px 64px;
  background: var(--offwhite);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-left: 1px solid var(--lightgray, var(--color-border, #e8e4df));
}

.cta-contact__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 18px;
}

.cta-contact__title em {
  color: var(--primary-color);
  font-style: normal;
}

.cta-contact__body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 32px;
  max-width: 440px;
  line-height: 1.6;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--black);
  margin-bottom: 12px;
  font-weight: 500;
}

.contact-detail a {
  color: inherit;
  text-decoration: none;
}

.contact-detail a:hover {
  text-decoration: underline;
}

.contact-detail__arrow {
  color: var(--primary-color);
  font-size: 18px;
}

.form-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 6px;
  display: block;
  margin-top: 16px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1.5px solid var(--lightgray);
  border-radius: var(--radius-input);
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: all 200ms;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
}

.form-select {
  appearance: none;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit {
  width: 100%;
  background: var(--primary-color);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px;
  border: none;
  border-radius: var(--radius-button);
  margin-top: 28px;
  transition: all 200ms;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.form-submit:hover {
  background: var(--primary-dark-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.form-error {
  margin: 6px 0 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--color-danger-text, #a8071a);
}

.form-banner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.45;
}

.form-banner--error {
  background: var(--color-danger-bg, #fde7ed);
  color: var(--color-danger-text, #a8071a);
  border: 1px solid var(--color-danger-border, #ffa39e);
}

.form-success-panel {
  padding: 28px 8px;
  text-align: center;
}

.form-success-panel__title {
  margin: 0 0 8px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.25rem;
  color: var(--color-text-primary, #1f1f1f);
}

.form-success-panel__text {
  margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text-secondary, #5c5c5c);
}

.form-submit__spinner {
  margin-left: 6px;
}

.form-submit:disabled {
  opacity: 0.75;
  cursor: wait;
  transform: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVE LAYOUT ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .services__grid,
  .products__grid,
  .certifications__grid,
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-contact__left,
  .cta-contact__right {
    padding: 64px 40px;
  }
}

@media (max-width: 768px) {
  .cta-contact {
    grid-template-columns: 1fr;
  }

  .cta-contact__right {
    border-left: none;
    border-top: 1px solid var(--lightgray, var(--color-border, #e8e4df));
  }

  .cta-contact__left,
  .cta-contact__right {
    padding: 56px 28px;
  }

  .cta-contact__title {
    font-size: clamp(26px, 7vw, 32px);
  }
}

@media (max-width: 640px) {
  .services,
  .products,
  .certifications,
  .stats {
    padding: 48px 20px;
  }

  .services__grid,
  .products__grid,
  .certifications__grid,
  .stats,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 32px;
  }
}


/* ==========================================================================
   HOMEPAGE WHY & PROCESS SECTION COMPONENT STYLES
   ========================================================================== */

/* ── WHY SECTION ── */
.why {
  padding: 80px 48px;
  background: var(--color-bg, #FDFBF7);
  border-top: 1px solid var(--color-border, #E8E4DF);
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.why-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  padding: 32px 28px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(31, 41, 55, 0.03));
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(31, 31, 31, 0.06));
  border-color: var(--color-primary, #D31145);
}

.why-card__num {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 36px;
  color: var(--color-primary, #D31145);
  line-height: 1;
  margin-bottom: 16px;
}

.why-card__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-text-primary, #1F1F1F);
  margin-bottom: 10px;
}

.why-card__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--color-text-secondary, #5C5C5C);
  line-height: 1.6;
}

/* ── PROCESS SECTION ── */
.process {
  padding: 80px 48px;
  background: var(--color-secondary, #2D2D2D);
  color: var(--color-surface, #FFFFFF);
}

.process .section-title {
  color: var(--color-surface, #FFFFFF);
}

.process__row {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.process__row--6 {
  grid-template-columns: repeat(6, 1fr);
}

.process__row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.process__row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.process__item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 12px);
  padding: 28px 20px;
  transition: all 250ms ease;
}

.process__item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary, #D31145);
  transform: translateY(-2px);
}

.process__num {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-primary, #D31145);
  line-height: 1;
  margin-bottom: 12px;
}

.process__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.process__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process__row--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why, .process {
    padding: 48px 20px;
  }
  .why__grid, .process__row--6, .process__row--4, .process__row--3 {
    grid-template-columns: 1fr;
  }
}
/* === End: medral-base.css === */

/* === Start: extracted-styles.css === */
/* Extracted Inline Styles */

/* Extracted from best-protein-supplement-manufacturer-for-quality-products.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from custom-supplement-manufacturing-by-nutrolife-science.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from discover-the-benefits-of-vegan-sports-nutrition-from-a-top-manufacturer.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from nutrolife-science-high-quality-protein-powder-manufacturing.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from private-label-manufacturing-launch-your-own-protein-brand.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from private-label-whey-protein-manufacturing-for-your-brand.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from business-growth-and-strategy.ejs */

/* ── ATOMS ── */
.blg-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.blg-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.blg-eyebrow--sm { font-size: 9px; }
.blg-eyebrow--white { color: rgba(255,255,255,0.5); }
.blg-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.blg-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.blg-hero::before {
  content: 'BLOG';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 220px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
  white-space: nowrap;
}
.blg-hero__inner { position: relative; z-index: 1; max-width: 680px; }
.blg-hero .blg-eyebrow { color: var(--color-primary); }
.blg-hero .blg-eyebrow::before { background: var(--color-primary); }
.blg-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--color-surface);
  line-height: 1.0;
  margin-bottom: 16px;
}
.blg-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 20px;
}
.blg-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blg-hero__dot {
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── FEATURED ── */
.blg-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.blg-featured__img-col {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--color-surface);
  min-height: 420px;
}
.blg-featured__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.15s;
}
.blg-featured__img-col:hover .blg-featured__img { transform: scale(1.01); }
.blg-featured__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-featured__img-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.blg-featured__/* Removed rogue body flex override */
.blg-featured__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 16px;
}
.blg-featured__title a { text-decoration: none; color: inherit; transition: color 0.15s; }
.blg-featured__title a:hover { color: var(--color-primary); }
.blg-featured__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.blg-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.blg-featured__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
}
.blg-featured__meta svg { stroke: var(--color-primary); flex-shrink: 0; }
.blg-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid var(--color-text-primary);
  transition: all 0.2s;
  align-self: flex-start;
}
.blg-featured__cta:hover { background: var(--color-primary); border-color: var(--color-primary); }

/* ── SECTION ── */
.blg-section { padding: 64px 56px 72px; background: #f5f5f3; }
.blg-section__header { margin-bottom: 40px; }
.blg-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

/* ── ARTICLE GRID ── */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── ARTICLE CARD ── */
.blg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.blg-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.blg-card__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f5f5f3;
  flex-shrink: 0;
}
.blg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.blg-card:hover .blg-card__img { transform: scale(1.05); }
.blg-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 1;
}
.blg-card__/* Removed rogue body flex override */
.blg-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color 0.15s;
}
.blg-card:hover .blg-card__title { color: var(--color-primary); }
.blg-card__excerpt {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}
.blg-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
  margin-top: auto;
}
.blg-card__footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blg-card__footer svg { stroke: var(--color-primary); transition: transform 0.2s; }
.blg-card:hover .blg-card__footer svg { transform: translateX(4px); }

/* ── PAGINATION ── */
.blg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.blg-page-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  padding: 10px 20px;
  transition: all 0.2s;
}
.blg-page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blg-page-info {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-border);
}

/* ── CTA ── */
.blg-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blg-cta::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.blg-cta__inner { position: relative; z-index: 1; }
.blg-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.blg-cta__title em { font-style: normal; color: rgba(255,255,255,0.65); }
.blg-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 28px;
}
.blg-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.blg-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .blg-grid { grid-template-columns: repeat(2, 1fr); }
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured__img-col { min-height: 280px; height: 280px; }
  .blg-featured__body { border-left: none; border-top: 1px solid var(--color-border); padding: 40px 40px; }
}
@media (max-width: 768px) {
  .blg-hero { padding: 48px 20px 40px; }
  .blg-hero__title { font-size: 40px; }
  .blg-section { padding: 40px 20px 56px; }
  .blg-grid { grid-template-columns: 1fr; gap: 16px; }
  .blg-featured__body { padding: 28px 20px; }
  .blg-featured__title { font-size: 24px; }
  .blg-cta { padding: 56px 20px; }
  .blg-cta__title { font-size: 30px; }
}


/* Extracted from nutrition-and-health.ejs */

/* ── ATOMS ── */
.blg-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.blg-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.blg-eyebrow--sm { font-size: 9px; }
.blg-eyebrow--white { color: rgba(255,255,255,0.5); }
.blg-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.blg-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.blg-hero::before {
  content: 'BLOG';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 220px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
  white-space: nowrap;
}
.blg-hero__inner { position: relative; z-index: 1; max-width: 680px; }
.blg-hero .blg-eyebrow { color: var(--color-primary); }
.blg-hero .blg-eyebrow::before { background: var(--color-primary); }
.blg-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--color-surface);
  line-height: 1.0;
  margin-bottom: 16px;
}
.blg-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 20px;
}
.blg-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blg-hero__dot {
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── FEATURED ── */
.blg-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.blg-featured__img-col {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--color-surface);
  min-height: 420px;
}
.blg-featured__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.15s;
}
.blg-featured__img-col:hover .blg-featured__img { transform: scale(1.01); }
.blg-featured__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-featured__img-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.blg-featured__/* Removed rogue body flex override */
.blg-featured__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 16px;
}
.blg-featured__title a { text-decoration: none; color: inherit; transition: color 0.15s; }
.blg-featured__title a:hover { color: var(--color-primary); }
.blg-featured__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.blg-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.blg-featured__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
}
.blg-featured__meta svg { stroke: var(--color-primary); flex-shrink: 0; }
.blg-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid var(--color-text-primary);
  transition: all 0.2s;
  align-self: flex-start;
}
.blg-featured__cta:hover { background: var(--color-primary); border-color: var(--color-primary); }

/* ── SECTION ── */
.blg-section { padding: 64px 56px 72px; background: #f5f5f3; }
.blg-section__header { margin-bottom: 40px; }
.blg-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

/* ── ARTICLE GRID ── */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── ARTICLE CARD ── */
.blg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.blg-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.blg-card__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f5f5f3;
  flex-shrink: 0;
}
.blg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.blg-card:hover .blg-card__img { transform: scale(1.05); }
.blg-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 1;
}
.blg-card__/* Removed rogue body flex override */
.blg-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color 0.15s;
}
.blg-card:hover .blg-card__title { color: var(--color-primary); }
.blg-card__excerpt {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}
.blg-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
  margin-top: auto;
}
.blg-card__footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blg-card__footer svg { stroke: var(--color-primary); transition: transform 0.2s; }
.blg-card:hover .blg-card__footer svg { transform: translateX(4px); }

/* ── PAGINATION ── */
.blg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.blg-page-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  padding: 10px 20px;
  transition: all 0.2s;
}
.blg-page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blg-page-info {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-border);
}

/* ── CTA ── */
.blg-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blg-cta::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.blg-cta__inner { position: relative; z-index: 1; }
.blg-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.blg-cta__title em { font-style: normal; color: rgba(255,255,255,0.65); }
.blg-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 28px;
}
.blg-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.blg-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .blg-grid { grid-template-columns: repeat(2, 1fr); }
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured__img-col { min-height: 280px; height: 280px; }
  .blg-featured__body { border-left: none; border-top: 1px solid var(--color-border); padding: 40px 40px; }
}
@media (max-width: 768px) {
  .blg-hero { padding: 48px 20px 40px; }
  .blg-hero__title { font-size: 40px; }
  .blg-section { padding: 40px 20px 56px; }
  .blg-grid { grid-template-columns: 1fr; gap: 16px; }
  .blg-featured__body { padding: 28px 20px; }
  .blg-featured__title { font-size: 24px; }
  .blg-cta { padding: 56px 20px; }
  .blg-cta__title { font-size: 30px; }
}


/* Extracted from private-label-partnerships.ejs */

/* ── ATOMS ── */
.blg-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.blg-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.blg-eyebrow--sm { font-size: 9px; }
.blg-eyebrow--white { color: rgba(255,255,255,0.5); }
.blg-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.blg-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.blg-hero::before {
  content: 'BLOG';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 220px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
  white-space: nowrap;
}
.blg-hero__inner { position: relative; z-index: 1; max-width: 680px; }
.blg-hero .blg-eyebrow { color: var(--color-primary); }
.blg-hero .blg-eyebrow::before { background: var(--color-primary); }
.blg-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--color-surface);
  line-height: 1.0;
  margin-bottom: 16px;
}
.blg-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 20px;
}
.blg-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blg-hero__dot {
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── FEATURED ── */
.blg-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.blg-featured__img-col {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--color-surface);
  min-height: 420px;
}
.blg-featured__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.15s;
}
.blg-featured__img-col:hover .blg-featured__img { transform: scale(1.01); }
.blg-featured__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-featured__img-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.blg-featured__/* Removed rogue body flex override */
.blg-featured__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 16px;
}
.blg-featured__title a { text-decoration: none; color: inherit; transition: color 0.15s; }
.blg-featured__title a:hover { color: var(--color-primary); }
.blg-featured__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.blg-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.blg-featured__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
}
.blg-featured__meta svg { stroke: var(--color-primary); flex-shrink: 0; }
.blg-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid var(--color-text-primary);
  transition: all 0.2s;
  align-self: flex-start;
}
.blg-featured__cta:hover { background: var(--color-primary); border-color: var(--color-primary); }

/* ── SECTION ── */
.blg-section { padding: 64px 56px 72px; background: #f5f5f3; }
.blg-section__header { margin-bottom: 40px; }
.blg-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

/* ── ARTICLE GRID ── */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── ARTICLE CARD ── */
.blg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.blg-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.blg-card__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f5f5f3;
  flex-shrink: 0;
}
.blg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.blg-card:hover .blg-card__img { transform: scale(1.05); }
.blg-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 1;
}
.blg-card__/* Removed rogue body flex override */
.blg-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color 0.15s;
}
.blg-card:hover .blg-card__title { color: var(--color-primary); }
.blg-card__excerpt {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}
.blg-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
  margin-top: auto;
}
.blg-card__footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blg-card__footer svg { stroke: var(--color-primary); transition: transform 0.2s; }
.blg-card:hover .blg-card__footer svg { transform: translateX(4px); }

/* ── PAGINATION ── */
.blg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.blg-page-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  padding: 10px 20px;
  transition: all 0.2s;
}
.blg-page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blg-page-info {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-border);
}

/* ── CTA ── */
.blg-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blg-cta::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.blg-cta__inner { position: relative; z-index: 1; }
.blg-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.blg-cta__title em { font-style: normal; color: rgba(255,255,255,0.65); }
.blg-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 28px;
}
.blg-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.blg-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .blg-grid { grid-template-columns: repeat(2, 1fr); }
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured__img-col { min-height: 280px; height: 280px; }
  .blg-featured__body { border-left: none; border-top: 1px solid var(--color-border); padding: 40px 40px; }
}
@media (max-width: 768px) {
  .blg-hero { padding: 48px 20px 40px; }
  .blg-hero__title { font-size: 40px; }
  .blg-section { padding: 40px 20px 56px; }
  .blg-grid { grid-template-columns: 1fr; gap: 16px; }
  .blg-featured__body { padding: 28px 20px; }
  .blg-featured__title { font-size: 24px; }
  .blg-cta { padding: 56px 20px; }
  .blg-cta__title { font-size: 30px; }
}


/* Extracted from supplement-manufacturing.ejs */

/* ── ATOMS ── */
.blg-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.blg-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.blg-eyebrow--sm { font-size: 9px; }
.blg-eyebrow--white { color: rgba(255,255,255,0.5); }
.blg-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.blg-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.blg-hero::before {
  content: 'BLOG';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 220px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
  white-space: nowrap;
}
.blg-hero__inner { position: relative; z-index: 1; max-width: 680px; }
.blg-hero .blg-eyebrow { color: var(--color-primary); }
.blg-hero .blg-eyebrow::before { background: var(--color-primary); }
.blg-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--color-surface);
  line-height: 1.0;
  margin-bottom: 16px;
}
.blg-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 20px;
}
.blg-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blg-hero__dot {
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── FEATURED ── */
.blg-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.blg-featured__img-col {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--color-surface);
  min-height: 420px;
}
.blg-featured__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.15s;
}
.blg-featured__img-col:hover .blg-featured__img { transform: scale(1.01); }
.blg-featured__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-featured__img-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.blg-featured__/* Removed rogue body flex override */
.blg-featured__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 16px;
}
.blg-featured__title a { text-decoration: none; color: inherit; transition: color 0.15s; }
.blg-featured__title a:hover { color: var(--color-primary); }
.blg-featured__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.blg-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.blg-featured__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
}
.blg-featured__meta svg { stroke: var(--color-primary); flex-shrink: 0; }
.blg-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid var(--color-text-primary);
  transition: all 0.2s;
  align-self: flex-start;
}
.blg-featured__cta:hover { background: var(--color-primary); border-color: var(--color-primary); }

/* ── SECTION ── */
.blg-section { padding: 64px 56px 72px; background: #f5f5f3; }
.blg-section__header { margin-bottom: 40px; }
.blg-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

/* ── ARTICLE GRID ── */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── ARTICLE CARD ── */
.blg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.blg-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.blg-card__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f5f5f3;
  flex-shrink: 0;
}
.blg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.blg-card:hover .blg-card__img { transform: scale(1.05); }
.blg-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 1;
}
.blg-card__/* Removed rogue body flex override */
.blg-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color 0.15s;
}
.blg-card:hover .blg-card__title { color: var(--color-primary); }
.blg-card__excerpt {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}
.blg-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
  margin-top: auto;
}
.blg-card__footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blg-card__footer svg { stroke: var(--color-primary); transition: transform 0.2s; }
.blg-card:hover .blg-card__footer svg { transform: translateX(4px); }

/* ── PAGINATION ── */
.blg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.blg-page-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  padding: 10px 20px;
  transition: all 0.2s;
}
.blg-page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blg-page-info {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-border);
}

/* ── CTA ── */
.blg-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blg-cta::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.blg-cta__inner { position: relative; z-index: 1; }
.blg-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.blg-cta__title em { font-style: normal; color: rgba(255,255,255,0.65); }
.blg-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 28px;
}
.blg-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.blg-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .blg-grid { grid-template-columns: repeat(2, 1fr); }
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured__img-col { min-height: 280px; height: 280px; }
  .blg-featured__body { border-left: none; border-top: 1px solid var(--color-border); padding: 40px 40px; }
}
@media (max-width: 768px) {
  .blg-hero { padding: 48px 20px 40px; }
  .blg-hero__title { font-size: 40px; }
  .blg-section { padding: 40px 20px 56px; }
  .blg-grid { grid-template-columns: 1fr; gap: 16px; }
  .blg-featured__body { padding: 28px 20px; }
  .blg-featured__title { font-size: 24px; }
  .blg-cta { padding: 56px 20px; }
  .blg-cta__title { font-size: 30px; }
}


/* Extracted from the-rise-of-whey-products-innovations-in-manufacturing.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from the-science-behind-the-manufacturing-of-protein-powder.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from the-ultimate-guide-to-private-label-supplements-in-india.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from top-protein-supplement-manufacturer-for-quality-products.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from top-reasons-to-choose-a-quality-whey-protein-manufacturer.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from why-iso-certification-matters-for-supplement-manufacturers.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from your-trusted-protein-powder-manufacturer-for-quality-products.ejs */

/* ── HERO ── */
.bl-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bl-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bl-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 84%) 50%, rgb(0 0 0) 100%  );
}
.bl-hero__meta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.bl-hero__back:hover { color: var(--color-surface); }
.bl-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bl-hero__breadcrumb a:hover { color: var(--color-surface); }
.bl-hero__breadcrumb span:not(a) { color: rgba(255,255,255,0.25); }
.bl-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 56px 56px;
  max-width: 860px;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bl-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.bl-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 20px;
}
.bl-hero__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-hero__date,
.bl-hero__author,
.bl-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.bl-hero__date svg,
.bl-hero__author svg,
.bl-hero__read svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── LAYOUT (article + sidebar) ── */
.bl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 56px 56px 72px;
  align-items: start;
  background: var(--color-surface);
}

/* ── ARTICLE BODY ── */
.bl-article { min-width: 0; }
.bl-article__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.85;
  margin-bottom: 48px;
}
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #8b0000; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f5f5f3;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f5f5f3; }

/* Tags */
.bl-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.bl-tags__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-border);
}
.bl-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.bl-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Share bar */
.bl-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: #f5f5f3;
  border-left: 3px solid var(--color-primary);
}
.bl-share__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.bl-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.bl-share__btn svg { width: 13px; height: 13px; fill: currentColor; }
.bl-share__btn:hover { background: var(--color-primary); }
.bl-share__btn--green { background: #25d366; }
.bl-share__btn--green:hover { background: #1da851; }



/* ── SIDEBAR ── */
.bl-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* CTA box */
.bl-sidebar__cta {
  background: var(--color-text-primary);
  padding: 28px 24px;
  border-top: 3px solid var(--color-primary);
}
.bl-sidebar__cta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bl-sidebar__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-surface);
  margin-bottom: 10px;
}
.bl-sidebar__cta-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.bl-sidebar__cta-btn:hover { background: var(--color-primary-hover); }
.bl-sidebar__cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.bl-sidebar__cta-note svg { stroke: rgba(255,255,255,0.3); }

/* Quick facts */
.bl-sidebar__facts {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 20px 20px 16px;
}
.bl-sidebar__facts-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 16px;
}
.bl-sidebar__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.bl-sidebar__fact:last-child { border-bottom: none; }
.bl-sidebar__fact-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}
.bl-sidebar__fact-num em { color: var(--color-primary); font-style: normal; }
.bl-sidebar__fact-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Related articles sidebar */
.bl-sidebar__related { display: flex; flex-direction: column; gap: 0; }
.bl-sidebar__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-border);
  margin-bottom: 12px;
}
.bl-related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.15s;
}
.bl-related-item:last-child { border-bottom: none; }
.bl-related-item:hover { opacity: 0.75; }
.bl-related-item__img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
}
.bl-related-item__img--placeholder {
  width: 64px;
  height: 48px;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.bl-related-item__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bl-related-item__date {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
}

/* Contact */
.bl-sidebar__contact { display: flex; flex-direction: column; gap: 8px; }
.bl-sidebar__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}
.bl-sidebar__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }
.bl-sidebar__contact-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── MORE ARTICLES ── */
.bl-more {
  background: #f5f5f3;
  padding: 64px 56px;
  border-top: 1px solid var(--color-border);
}
.bl-more__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-more__eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--color-primary); }
.bl-more__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.bl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.bl-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  overflow: hidden;
}
.bl-more-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.bl-more-card__img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f5f5f3;
}
.bl-more-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.bl-more-card:hover .bl-more-card__img { transform: scale(1.04); }
.bl-more-card__img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-more-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent 60%);
}
.bl-more-card__/* Removed rogue body flex override */
.bl-more-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bl-more-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.bl-more-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.bl-more__footer { text-align: center; }
.bl-more__all-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.bl-more__all-link:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bl-layout { grid-template-columns: 1fr; padding: 40px 32px 56px; gap: 36px; }
  .bl-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .bl-sidebar__cta { grid-column: 1 / -1; }
  .bl-more { padding: 48px 32px; }
  .bl-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bl-hero { min-height: 400px; }
  .bl-hero__meta-bar { padding: 20px 20px 0; }
  .bl-hero__content { padding: 32px 20px 40px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -0.5px; }
  .bl-hero__breadcrumb { display: none; }
  .bl-layout { padding: 28px 20px 40px; }
  .bl-article__body { font-size: 14px; }
  .bl-sidebar { grid-template-columns: 1fr; }
  .bl-share { flex-direction: column; align-items: flex-start; }
  .bl-more { padding: 40px 20px; }
  .bl-more__grid { grid-template-columns: 1fr; }
  .bl-more__title { font-size: 26px; }

}


/* Extracted from news.ejs */

/* ── ATOMS ── */
.blg-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.blg-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.blg-eyebrow--sm { font-size: 9px; }
.blg-eyebrow--white { color: rgba(255,255,255,0.5); }
.blg-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.blg-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.blg-hero::before {
  content: 'BLOG';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 220px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
  white-space: nowrap;
}
.blg-hero__inner { position: relative; z-index: 1; max-width: 680px; }
.blg-hero .blg-eyebrow { color: var(--color-primary); }
.blg-hero .blg-eyebrow::before { background: var(--color-primary); }
.blg-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--color-surface);
  line-height: 1.0;
  margin-bottom: 16px;
}
.blg-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 20px;
}
.blg-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blg-hero__dot {
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── FEATURED ── */
.blg-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.blg-featured__img-col {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--color-surface);
  min-height: 420px;
}
.blg-featured__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.15s;
}
.blg-featured__img-col:hover .blg-featured__img { transform: scale(1.01); }
.blg-featured__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-featured__img-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.blg-featured__/* Removed rogue body flex override */
.blg-featured__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 16px;
}
.blg-featured__title a { text-decoration: none; color: inherit; transition: color 0.15s; }
.blg-featured__title a:hover { color: var(--color-primary); }
.blg-featured__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.blg-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.blg-featured__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-border);
}
.blg-featured__meta svg { stroke: var(--color-primary); flex-shrink: 0; }
.blg-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid var(--color-text-primary);
  transition: all 0.2s;
  align-self: flex-start;
}
.blg-featured__cta:hover { background: var(--color-primary); border-color: var(--color-primary); }

/* ── SECTION ── */
.blg-section { padding: 64px 56px 72px; background: #f5f5f3; }
.blg-section__header { margin-bottom: 40px; }
.blg-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

/* ── ARTICLE GRID ── */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── ARTICLE CARD ── */
.blg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.blg-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.blg-card__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f5f5f3;
  flex-shrink: 0;
}
.blg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.blg-card:hover .blg-card__img { transform: scale(1.05); }
.blg-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 1;
}
.blg-card__/* Removed rogue body flex override */
.blg-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color 0.15s;
}
.blg-card:hover .blg-card__title { color: var(--color-primary); }
.blg-card__excerpt {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}
.blg-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
  margin-top: auto;
}
.blg-card__footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blg-card__footer svg { stroke: var(--color-primary); transition: transform 0.2s; }
.blg-card:hover .blg-card__footer svg { transform: translateX(4px); }

/* ── PAGINATION ── */
.blg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.blg-page-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  padding: 10px 20px;
  transition: all 0.2s;
}
.blg-page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blg-page-info {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-border);
}

/* ── CTA ── */
.blg-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blg-cta::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.blg-cta__inner { position: relative; z-index: 1; }
.blg-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.blg-cta__title em { font-style: normal; color: rgba(255,255,255,0.65); }
.blg-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 28px;
}
.blg-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.blg-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .blg-grid { grid-template-columns: repeat(2, 1fr); }
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured__img-col { min-height: 280px; height: 280px; }
  .blg-featured__body { border-left: none; border-top: 1px solid var(--color-border); padding: 40px 40px; }
}
@media (max-width: 768px) {
  .blg-hero { padding: 48px 20px 40px; }
  .blg-hero__title { font-size: 40px; }
  .blg-section { padding: 40px 20px 56px; }
  .blg-grid { grid-template-columns: 1fr; gap: 16px; }
  .blg-featured__body { padding: 28px 20px; }
  .blg-featured__title { font-size: 24px; }
  .blg-cta { padding: 56px 20px; }
  .blg-cta__title { font-size: 30px; }
}


/* Extracted from coming-soon.ejs (Scoped to coming-soon page) */
.coming-soon-/* Removed rogue body flex override */
.coming-soon-container {
  max-width: 600px;
  padding: 50px 40px;
  margin: 20px;
}
    

/* Extracted from index.ejs */

          #section-template--20946532663474__hero_slider_JAVAdh {
            background: var(--color-bg);
          }

          .hs-wrap {
            position: relative;
            overflow: hidden;
            background: var(--color-bg);
          }

          /* ── SLIDER TRACK ── */
          .hs-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
          }

          /* ── SINGLE SLIDE ── */
          .hs-slide {
            flex-shrink: 0;
            width: 100%;
            min-height: 580px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            padding: 72px 72px;
            gap: 48px;
            box-sizing: border-box;
          }

          /* ── LEFT: TEXT CONTENT ── */
          .hs-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
          }
          .hs-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-body, "Inter", sans-serif);
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-primary);
            margin-bottom: 18px;
          }
          .hs-eyebrow::before {
            content: "";
            display: block;
            width: 24px;
            height: 2px;
            background: var(--color-primary);
            border-radius: 999px;
          }
          .hs-heading {
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-weight: 700;
            font-size: 56px;
            line-height: 1.1;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            color: var(--color-text-primary);
            margin: 0 0 20px;
          }
          .hs-heading em {
            font-style: normal;
            color: var(--color-primary);
          }
          .hs-subtext {
            font-family: var(--font-body, "Inter", sans-serif);
            font-size: 16px;
            color: var(--color-text-secondary);
            line-height: 1.65;
            max-width: 460px;
            margin: 0 0 32px;
          }
          .hs-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary);
            color: var(--color-surface);
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-weight: 600;
            font-size: 15px;
            letter-spacing: 0.02em;
            padding: 14px 32px;
            border-radius: 999px;
            border: 1px solid transparent;
            cursor: pointer;
            text-decoration: none;
            box-shadow: var(--shadow-sm);
            transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
          }
          .hs-cta:hover {
            background: var(--color-primary-hover);
            color: var(--color-surface);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
          }
          .hs-cta--secondary {
            background: var(--color-surface);
            color: var(--color-text-primary);
            border: 1px solid var(--color-border);
            margin-left: 12px;
            box-shadow: var(--shadow-xs);
          }
          .hs-cta--secondary:hover {
            background: var(--color-secondary-light);
            color: var(--color-secondary-hover);
            border-color: var(--color-secondary);
          }

          /* ── RIGHT: VISUAL CARD STACK ── */
          .hs-right {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 420px;
          }

          /* Main image card */
          .hs-main-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-card, 16px);
            padding: 18px;
            width: 280px;
            box-shadow: var(--shadow-xs);
            position: relative;
            z-index: 2;
          }
          .hs-main-card img {
            width: 100%;
            height: 210px;
            object-fit: cover;
            border-radius: var(--radius-md, 12px);
            display: block;
          }
          .hs-main-card__label {
            font-family: var(--font-body, "Inter", sans-serif);
            font-size: 12px;
            font-weight: 600;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 12px;
          }
          .hs-main-card__value {
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-weight: 700;
            font-size: 18px;
            color: var(--color-text-primary);
            margin-top: 2px;
          }

          /* Floating stat chips */
          .hs-stats-grid {
            position: absolute;
            top: 0;
            right: -20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 3;
          }
          .hs-stat-chip {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-input, 12px);
            padding: 14px 18px;
            min-width: 150px;
            box-shadow: var(--shadow-xs);
          }
          .hs-stat-chip__num {
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-weight: 700;
            font-size: 24px;
            color: var(--color-text-primary);
            line-height: 1;
          }
          .hs-stat-chip__num span {
            color: var(--color-primary);
          }
          .hs-stat-chip__label {
            font-family: var(--font-body, "Inter", sans-serif);
            font-size: 11px;
            font-weight: 500;
            color: var(--color-text-secondary);
            margin-top: 4px;
          }

          /* Badge chip bottom left */
          .hs-badge-chip {
            position: absolute;
            bottom: 20px;
            left: -10px;
            background: var(--color-primary);
            color: var(--color-surface);
            padding: 12px 20px;
            border-radius: 999px;
            z-index: 3;
            box-shadow: var(--shadow-sm);
          }
          .hs-badge-chip__top {
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 0.02em;
          }
          .hs-badge-chip__sub {
            font-family: var(--font-body, "Inter", sans-serif);
            font-size: 11px;
            color: rgba(255, 255, 255, 0.85);
            margin-top: 2px;
          }

          /* Decorative ring behind main card */
          .hs-ring {
            position: absolute;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            border: 1px solid var(--color-border);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            pointer-events: none;
          }
          .hs-ring-2 {
            width: 220px;
            height: 220px;
            border-style: dashed;
          }

          /* ── CONTROLS ── */
          .hs-controls {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 0 72px 40px;
          }
          .hs-arrow {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--color-surface);
            border: 1.5px solid var(--color-border);
            color: var(--color-text-primary);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
          }
          .hs-arrow:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-surface);
          }
          .hs-arrow:disabled {
            opacity: 0.25;
            pointer-events: none;
          }
          .hs-dots {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
          }
          .hs-dot {
            width: 28px;
            height: 3px;
            background: var(--color-border);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: all 0.25s;
          }
          .hs-dot.is-active {
            background: var(--color-primary);
            width: 48px;
          }
          .hs-counter {
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-size: 12px;
            font-weight: 500;
            color: var(--color-text-muted);
            letter-spacing: 0.08em;
            white-space: nowrap;
          }
          .hs-counter strong {
            color: var(--color-text-primary);
            font-weight: 700;
          }

          /* ── PROGRESS BAR ── */
          .hs-progress {
            display: none !important;
          }

          /* ── RESPONSIVE ── */
          @media (max-width: 960px) {
            .hs-slide {
              grid-template-columns: 1fr;
              padding: 48px 32px;
              min-height: auto;
              gap: 40px;
            }
            .hs-heading {
              font-size: 40px;
            }
            .hs-right {
              min-height: 340px;
            }
            .hs-main-card {
              width: 200px;
            }
            .hs-main-card img {
              height: 150px;
            }
            .hs-stats-grid {
              right: 0;
            }
            .hs-controls {
              padding: 0 32px 32px;
            }
          }
          @media (max-width: 600px) {
            .hs-slide {
              padding: 36px 20px;
            }
            .hs-heading {
              font-size: 32px;
              letter-spacing: -0.5px;
            }
            .hs-subtext {
              font-size: 13px;
            }
            .hs-cta {
              padding: 12px 22px;
              font-size: 12px;
            }
            .hs-cta--secondary {
              margin-left: 8px;
            }
            .hs-right {
              display: none;
            }
            .hs-controls {
              padding: 0 20px 28px;
            }
          }

          /* ── PARTICLE CANVAS ── */
          .hs-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
          }
          /* ensure content sits above canvas */
          .hs-progress,
          .hs-track,
          .hs-controls {
            position: relative;
            z-index: 1;
          }
        


/* Extracted from index.ejs */

          .cert-card__badge {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: transparent;
          }
          .cert-card__badge img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
          }
        

/* Extracted from index.ejs */

                  div[id*="instafeed_app_block"] {
                    width: 100%;
                  }
                  div:has(> [id*="instafeed_app_block"]) {
                    width: 100%;
                  }
                  body #insta-feed {
                    margin-top: 20px !important;

                    margin-bottom: 20px !important;

                    margin-left: 30px !important;

                    margin-right: 30px !important;

                    text-align: center;
                  }

                  #insta-feed h2 {
                    font-size: 35px !important;
                  }
                

/* Extracted from index.ejs */

          #section-template--20946532663474__1776157077237278ca
            #insta-feed
            h2 {
            font-size: 35px !important;
            font-family: var(--font-heading);
            font-weight: 700;
            text-transform: uppercase;
            color: var(--black);
            letter-spacing: -0.5px;
            line-height: 1.1;
            margin-bottom: 16px;
          }
        

/* Extracted from index.ejs */

          @media (max-width: 860px) {
            .services__grid {
              grid-template-columns: repeat(2, 1fr) !important;
            }
            .services__item {
              border-right: 1px solid var(--lightgray);
              border-bottom: 1px solid var(--lightgray);
            }
            .services__item:nth-child(even) {
              border-right: none;
            }
            .services__item:nth-last-child(-n + 2):nth-child(odd),
            .services__item:nth-last-child(-n + 2):nth-child(even) {
              border-bottom: none;
            }
          }
        

/* Extracted from index.ejs */

          #section-template--20946532663474__manufacturing_moq_VPMQKz {
            --moq-accent: var(--color-primary);
            --moq-accent-tint: rgba(200, 16, 46, 0.08);
            --moq-bg: var(--color-surface);
          }

          .moq-section {
            background: var(--moq-bg);
            padding-top: 72px;
            padding-bottom: 72px;
          }
          .moq-inner {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 40px;
          }

          /* ── HEADER ── */
          .moq-eyebrow {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-body);
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--moq-accent);
            margin: 0 0 14px;
          }
          .moq-eyebrow::before {
            content: "";
            width: 34px;
            height: 2px;
            background: var(--moq-accent);
            display: block;
            flex-shrink: 0;
          }
          .moq-heading {
            font-family: var(--font-heading);, "Raleway", sans-serif;
            font-weight: 700;
            font-size: 42px;
            line-height: 1.05;
            letter-spacing: 0.01em;
            color: #141414;
            text-transform: uppercase;
            margin: 0 0 16px;
          }
          .moq-lead {
            font-family: var(--font-body);
            font-size: 15px;
            line-height: 1.7;
            color: var(--color-text-secondary);
            max-width: 640px;
            margin: 0 0 34px;
          }

          /* ── GRID ── */
          .moq-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 18px;
          }
          .moq-card {
            background: var(--color-surface);
            border: 1px solid #ececec;
            border-top: 3px solid var(--moq-accent);
            border-radius: 4px;
            padding: 26px 24px;
            display: flex;
            flex-direction: column;
            transition:
              box-shadow 0.2s,
              transform 0.2s;
          }
          .moq-card:hover {
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
            transform: translateY(-3px);
          }
          .moq-card__icon {
            width: 48px;
            height: 48px;
            border-radius: 4px;
            background: var(--moq-accent-tint);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
          }
          .moq-card__icon svg {
            width: 24px;
            height: 24px;
            stroke: var(--moq-accent);
            fill: none;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-linejoin: round;
          }
          .moq-card__cat {
            font-family: var(--font-body);
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #141414;
            margin: 0 0 7px;
          }
          .moq-card__desc {
            font-family: var(--font-body);
            font-size: 12px;
            line-height: 1.55;
            color: var(--color-text-muted);
            margin: 0 0 20px;
            flex: 1;
          }
          .moq-card__value {
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 32px;
            line-height: 1;
            color: var(--moq-accent);
            margin: 0;
          }
          .moq-card__value span {
            font-size: 15px;
            font-weight: 500;
            margin-left: 3px;
          }
          .moq-card__label {
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 10px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--color-border);
            margin-top: 7px;
          }

          /* ── FOOTER ── */
          .moq-foot {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-top: 30px;
            padding-top: 24px;
            border-top: 1px solid #ececec;
          }
          .moq-note {
            font-family: var(--font-body);
            font-size: 13px;
            line-height: 1.6;
            color: var(--color-text-muted);
            max-width: 560px;
            margin: 0;
          }
          .moq-cta {
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-surface);
            background: var(--moq-accent);
            border: none;
            padding: 14px 30px;
            border-radius: 2px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            white-space: nowrap;
            transition: filter 0.2s;
          }
          .moq-cta:hover {
            filter: brightness(0.9);
          }

          /* ── RESPONSIVE ── */
          @media (max-width: 1100px) {
            .moq-grid {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
          @media (max-width: 860px) {
            .moq-inner {
              padding: 0 24px;
            }
            .moq-heading {
              font-size: 32px;
            }
            .moq-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
          @media (max-width: 520px) {
            .moq-heading {
              font-size: 27px;
            }
            .moq-grid {
              grid-template-columns: 1fr;
            }
            .moq-cta {
              width: 100%;
              text-align: center;
            }
          }
        

/* Extracted from index.ejs */

          /* Dynamic column count */
          .process__row {
            display: grid;
            border: 1px solid #2a2a2a;
          }
          .process__row--1 {
            grid-template-columns: 1fr;
          }
          .process__row--2 {
            grid-template-columns: repeat(2, 1fr);
          }
          .process__row--3 {
            grid-template-columns: repeat(3, 1fr);
          }
          .process__row--4 {
            grid-template-columns: repeat(4, 1fr);
          }
          .process__row--5 {
            grid-template-columns: repeat(5, 1fr);
          }
          .process__row--6 {
            grid-template-columns: repeat(3, 1fr);
          }

          .process__item {
            padding: 28px 24px;
            border-right: 1px solid #2a2a2a;
          }
          .process__item:last-child {
            border-right: none;
          }

          /* Mobile: 2 columns, no blank gap */
          @media (max-width: 768px) {
            .process__row--3,
            .process__row--4,
            .process__row--5,
            .process__row--6 {
              grid-template-columns: repeat(2, 1fr);
            }
            .process__item {
              border-bottom: 1px solid #2a2a2a;
              border-right: none;
            }
            /* Restore right border for odd items (left column) */
            .process__item:nth-child(odd) {
              border-right: 1px solid #2a2a2a;
            }
            /* Remove bottom border from last row */
            .process__row--2
              .process__item:nth-last-child(-n + 2):nth-child(odd),
            .process__row--2
              .process__item:nth-last-child(-n + 2):nth-child(even),
            .process__row--3 .process__item:nth-last-child(-n + 2),
            .process__row--4 .process__item:nth-last-child(-n + 2),
            .process__row--5 .process__item:nth-last-child(-n + 2),
            .process__row--6 .process__item:nth-last-child(-n + 2) {
              border-bottom: none;
            }
          }
          @media (max-width: 480px) {
            .process__row--2,
            .process__row--3,
            .process__row--4,
            .process__row--5,
            .process__row--6 {
              grid-template-columns: repeat(2, 1fr);
            }
          }
        

/* Extracted from index.ejs */

          @media (max-width: 860px) {
            .why__grid {
              grid-template-columns: repeat(2, 1fr) !important;
            }
            .why-card {
              border-right: 1px solid var(--lightgray);
              border-bottom: 1px solid var(--lightgray);
            }
            .why-card:nth-child(even) {
              border-right: none;
            }
            .why-card:nth-last-child(-n + 2) {
              border-bottom: none;
            }
          }
          @media (max-width: 360px) {
            .why__grid {
              grid-template-columns: 1fr !important;
            }
          }
        


/* Extracted from index.ejs */

          /* Keep 2-col grid on ALL screen sizes including mobile */
          .form-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
          }

          /* On very small screens (below 360px) drop to 1 col */
          @media (max-width: 360px) {
            .form-grid-2 {
              grid-template-columns: 1fr;
            }
          }
        

/* Extracted from about-us.ejs */

.ab-eyebrow,.ab-section-label{font-family: var(--font-body);font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--color-primary);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.ab-eyebrow::before,.ab-section-label::before{content:'';display:block;width:24px;height:1.5px;background:var(--color-primary);flex-shrink:0}
.ab-section-title{font-family: var(--font-heading);font-weight:700;font-size:36px;text-transform:uppercase;letter-spacing:-.5px;color:var(--color-text-primary);line-height:1.1;margin-bottom:12px}
.ab-section-sub{font-family: var(--font-body);font-size:14px;color:var(--color-text-muted);line-height:1.75;max-width:480px;margin-bottom:28px}
.ab-tag{display:inline-block;font-family: var(--font-body);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);background:#f5f5f5;border:1px solid var(--color-border);padding:5px 12px}
.ab-tag--primary-color{color:var(--color-primary);background:var(--color-primary-light);border-color:var(--color-primary-muted)}

/* HERO */
.ab-hero{display:grid;grid-template-columns:1fr 1fr;min-height:560px;align-items:center;border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.ab-hero__left{padding:72px 56px;border-right:1px solid var(--color-border)}
.ab-hero__heading{font-family: var(--font-heading);font-weight:700;font-size:52px;text-transform:uppercase;letter-spacing:-1px;color:var(--color-text-primary);line-height:1.05;margin-bottom:20px}
.ab-hero__sub{font-family: var(--font-body);font-size:14px;color:var(--color-text-muted);line-height:1.8;margin-bottom:28px;max-width:440px}
.ab-hero__tags{display:flex;flex-wrap:wrap;gap:8px}
.ab-hero__right{background:#f5f5f3;display:flex;align-items:center;justify-content:center;padding:48px;min-height:560px;position:relative}
.ab-hero__img-wrap{position:relative;width:100%;max-width:400px}
.ab-hero__img{width:100%;height:380px;object-fit:cover;display:block;border:1px solid var(--color-border)}
.ab-hero__img-placeholder{width:100%;height:380px;background:#ebebeb;border:1.5px dashed var(--color-border);display:flex;align-items:center;justify-content:center}
.ab-hero__img-placeholder span{font-family: var(--font-body);font-size:11px;color:var(--color-border);text-transform:uppercase;letter-spacing:.1em}
.ab-chip{position:absolute;background:var(--color-text-primary);color:var(--color-surface);padding:10px 16px;z-index:2;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.ab-chip--tl{top:-16px;left:-16px}
.ab-chip--br{bottom:-16px;right:-16px}
.ab-chip__num{font-family: var(--font-heading);font-weight:700;font-size:22px;line-height:1;color:var(--color-surface)}
.ab-chip__num span{color:var(--color-primary)}
.ab-chip__lbl{font-family: var(--font-body);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-top:3px}

/* FOUNDERS */
.ab-founders{padding:80px 56px;background:#f5f5f3;border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:24px}
.ab-founders__list{display:flex;flex-direction:column;gap:24px}
/* Full-width card with 2-col grid inside: fixed image | fluid content */
.ab-founder-card{background:var(--color-surface);border:1px solid var(--color-border);display:grid;grid-template-columns:300px 1fr;overflow:hidden;transition:border-color .2s}
.ab-founder-card:hover{border-color:var(--color-primary)}
/* Image column */
.ab-founder-card__img-col{position:relative;overflow:hidden;min-height:320px;background:#f0f0f0}
.ab-founder-card__img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ab-founder-card__placeholder{width:100%;height:100%;min-height:320px;background:#ebebeb;border-right:1.5px dashed var(--color-border-subtle);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.ab-founder-card__placeholder span{font-family: var(--font-body);font-size:10px;color:var(--color-border);text-transform:uppercase;letter-spacing:.08em;text-align:center;line-height:1.6}
/* Content column */
.ab-founder-card__content{padding:36px 40px;display:flex;flex-direction:column;justify-content:flex-start}
.ab-founder-card__name{font-family: var(--font-heading);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-primary);margin-bottom:6px}
.ab-founder-card__role{font-family: var(--font-body);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--color-primary);margin-bottom:18px}
.ab-founder-card__bio{font-family: var(--font-body);font-size:13px;color:var(--color-text-secondary);line-height:1.8;margin:0 0 16px}
/* Bullet points */
.ab-founder-card__bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ab-founder-card__bullets li{font-family: var(--font-body);font-size:13px;color:var(--color-text-secondary);line-height:1.65;padding-left:18px;position:relative}
.ab-founder-card__bullets li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--color-primary);display:block}

/* STATS — dynamic columns */
.ab-stats{display:grid;background:var(--color-text-primary);border-bottom:1px solid var(--color-border)}
.ab-stats--1{grid-template-columns:1fr}
.ab-stats--2{grid-template-columns:repeat(2,1fr)}
.ab-stats--3{grid-template-columns:repeat(3,1fr)}
.ab-stats--4{grid-template-columns:repeat(4,1fr)}
.ab-stats--5{grid-template-columns:repeat(5,1fr)}
.ab-stats--6{grid-template-columns:repeat(6,1fr)}
.ab-stat{padding:32px 20px;text-align:center;border-right:1px solid var(--color-border)}
.ab-stat:last-child{border-right:none}
.ab-stat__num{font-family: var(--font-heading);font-weight:700;font-size:32px;color:var(--color-surface);letter-spacing:-1px;line-height:1}
.ab-stat__num span{color:var(--color-primary)}
.ab-stat__lbl{font-family: var(--font-body);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.3);margin-top:6px}

/* WHAT WE DO */
.ab-what{display:grid;grid-template-columns:1fr 1fr;align-items:start;padding:80px 56px;gap:56px;border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.ab-what__services{display:flex;flex-wrap:wrap;gap:8px}
.ab-service-pill{font-family: var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-primary);border:1.5px solid var(--color-text-primary);padding:7px 14px;transition:all .2s;cursor:default}
.ab-service-pill:hover{background:var(--color-text-primary);color:var(--color-surface)}
/* product grid — auto columns based on count */
.ab-products-grid{display:grid;gap:1px;background:var(--color-border);border:1px solid var(--color-border)}
.ab-products-grid--1,.ab-products-grid--2,.ab-products-grid--3{grid-template-columns:1fr}
.ab-products-grid--4,.ab-products-grid--5,.ab-products-grid--6{grid-template-columns:1fr 1fr}
.ab-product-item{background:var(--color-surface);padding:28px 20px;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.ab-product-item:hover{background:#f5f5f3}
.ab-product-item__icon{font-size:24px}
.ab-product-item__name{font-family: var(--font-heading);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-primary);line-height:1.3}

/* INNOVATION — redesigned */
.ab-innovation{
  background:#0a0a0a;
  padding:100px 56px;
  text-align:center;
  border-bottom:1px solid var(--color-border);
  position:relative;
  overflow:hidden;
}
/* Animated grid lines background */
.ab-inno__grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(200,16,46,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,16,46,0.06) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  z-index:0;
}
/* Radial vignette over grid */
.ab-innovation::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 30%,#0a0a0a 100%);
  pointer-events:none;
  z-index:1;
}
.ab-inno__inner{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
}
/* Badge with pulse dot */
.ab-inno__badge-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(200,16,46,0.12);
  border:1px solid rgba(200,16,46,0.3);
  padding:8px 20px;
  margin-bottom:36px;
}
.ab-inno__pulse{
  width:8px;height:8px;
  background:var(--color-primary);
  border-radius:50%;
  flex-shrink:0;
  animation:ab-pulse 1.8s ease-in-out infinite;
  display:block;
}
@keyframes ab-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,0.5)}
  50%{box-shadow:0 0 0 8px rgba(200,16,46,0)}
}
.ab-inno__badge{
  font-family: var(--font-heading);
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-primary);
}
/* Heading */
.ab-inno__heading{
  font-family: var(--font-heading);
  font-weight:700;
  font-size:62px;
  text-transform:uppercase;
  letter-spacing:-2px;
  line-height:1.0;
  margin-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.ab-inno__heading-plain{
  color:rgba(255,255,255,0.55);
  font-size:0.7em;
  letter-spacing:-1px;
}
.ab-inno__heading-highlight{
  color:var(--color-surface);
  font-size:1em;
  position:relative;
  display:inline-block;
  padding:4px 0;
  background:linear-gradient(135deg,var(--color-primary) 0%,#ff3355 50%,var(--color-primary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-2px;
}
/* Subtext */
.ab-inno__sub{
  font-family: var(--font-body);
  font-size:15px;
  color:rgba(255,255,255,0.4);
  line-height:1.8;
  max-width:560px;
  margin:0 auto 40px;
}
/* Stats row */
.ab-inno__stats{
  display:inline-flex;
  align-items:stretch;
  gap:0;
  border:1px solid #2a2a2a;
  background:var(--color-text-primary);
  margin-bottom:36px;
  max-width:100%;
}
.ab-inno__stat{
  padding:20px 36px;
  text-align:center;
  flex:1;
  min-width:0;
}
.ab-inno__stat-divider{
  width:1px;
  background:#2a2a2a;
  flex-shrink:0;
  align-self:stretch;
}
.ab-inno__stat-num{
  font-family: var(--font-heading);
  font-weight:700;font-size:28px;
  color:var(--color-surface);
  letter-spacing:-1px;line-height:1;
  margin-bottom:4px;
  white-space:nowrap;
}
.ab-inno__stat-num span{color:var(--color-primary)}
.ab-inno__stat-lbl{
  font-family: var(--font-body);
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,0.65);
  white-space:nowrap;
}
/* Pills */
.ab-inno__pills{
  display:flex;justify-content:center;
  gap:10px;flex-wrap:wrap;
}
.ab-inno__pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family: var(--font-heading);
  font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  border:1px solid #2a2a2a;
  padding:8px 16px;
  transition:all .2s;
}
.ab-inno__pill:hover{
  border-color:var(--color-primary);
  color:var(--color-surface);
  background:rgba(200,16,46,0.08);
}
@media (prefers-reduced-motion:reduce){.ab-inno__pulse{animation:none}}

/* WHY — dynamic columns */
.ab-why{padding:80px 56px;background:#f5f5f3;border-bottom:1px solid var(--color-border)}
.ab-why__grid{display:grid;gap:1px;background:var(--color-border);border:1px solid var(--color-border);margin-top:40px}
.ab-why__grid--1{grid-template-columns:1fr}
.ab-why__grid--2{grid-template-columns:repeat(2,1fr)}
.ab-why__grid--3,.ab-why__grid--6{grid-template-columns:repeat(3,1fr)}
.ab-why__grid--4{grid-template-columns:repeat(4,1fr)}
.ab-why__grid--5{grid-template-columns:repeat(3,1fr)}
.ab-why-item{background:var(--color-surface);padding:32px 28px;transition:background .2s}
.ab-why-item:hover{background:#f5f5f3}
.ab-why-item__num{font-family: var(--font-heading);font-weight:700;font-size:40px;color:var(--color-border);line-height:1;margin-bottom:12px;transition:color .2s}
.ab-why-item:hover .ab-why-item__num{color:var(--color-primary)}
.ab-why-item__title{font-family: var(--font-heading);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-primary);margin-bottom:8px}
.ab-why-item__desc{font-family: var(--font-body);font-size:12px;color:var(--color-text-muted);line-height:1.7}

/* CERTS — dynamic columns */
.ab-certs{padding:80px 56px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.ab-certs__grid{display:grid;gap:1px;background:var(--color-border);border:1px solid var(--color-border);margin-top:40px}
.ab-certs__grid--1{grid-template-columns:1fr}
.ab-certs__grid--2{grid-template-columns:repeat(2,1fr)}
.ab-certs__grid--3,.ab-certs__grid--6{grid-template-columns:repeat(3,1fr)}
.ab-certs__grid--4{grid-template-columns:repeat(4,1fr)}
.ab-certs__grid--5{grid-template-columns:repeat(3,1fr)}
.ab-cert-card{background:var(--color-surface);padding:32px 28px;display:flex;align-items:flex-start;gap:16px;transition:background .2s}
.ab-cert-card:hover{background:#f5f5f3}
.ab-cert-card__badge{width:52px;height:52px;background:var(--color-text-primary);color:var(--color-surface);font-family: var(--font-heading);font-weight:700;font-size:11px;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase;overflow:hidden;padding:0}
.ab-cert-card__badge img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;background:var(--color-surface);box-sizing:border-box}
.ab-cert-card__name{font-family: var(--font-heading);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-primary);margin-bottom:6px}
.ab-cert-card__desc{font-family: var(--font-body);font-size:12px;color:var(--color-text-muted);line-height:1.65}

/* VMP — dynamic columns */
.ab-vmp{display:grid;gap:1px;background:var(--color-border);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.ab-vmp--1{grid-template-columns:1fr}
.ab-vmp--2{grid-template-columns:repeat(2,1fr)}
.ab-vmp--3{grid-template-columns:repeat(3,1fr)}
.ab-vmp--4{grid-template-columns:repeat(4,1fr)}
.ab-vmp-card{background:var(--color-surface);padding:48px 40px}
.ab-vmp-card--dark{background:var(--color-text-primary)}
.ab-vmp-card__icon{font-size:28px;color:var(--color-border);margin-bottom:16px;display:block}
.ab-vmp-card__label{font-family: var(--font-heading);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--color-border);margin-bottom:14px}
.ab-vmp-card__text{font-family: var(--font-body);font-size:14px;color:var(--color-text-secondary);line-height:1.8;margin:0}

/* CTA */
.ab-cta{background:linear-gradient(135deg,var(--color-primary) 0%,#8b0000 100%);padding:80px 56px;text-align:center;position:relative;overflow:hidden}
.ab-cta__inner{position:relative;z-index:1}
.ab-cta__heading{font-family: var(--font-heading);font-weight:700;font-size:42px;text-transform:uppercase;letter-spacing:-.5px;color:var(--color-surface);line-height:1.1;margin-bottom:12px}
.ab-cta__sub{font-family: var(--font-body);font-size:14px;color:rgba(255,255,255,.65);margin-bottom:28px;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.7}
.ab-cta__btn{background:var(--color-surface);color:var(--color-primary);font-family: var(--font-heading);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:14px 36px;border:none;cursor:pointer;transition:all .2s}
.ab-cta__btn:hover{background:var(--color-text-primary);color:var(--color-surface)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .ab-hero{grid-template-columns:1fr}
  .ab-hero__left{padding:48px 28px;border-right:none;border-bottom:1px solid var(--color-border)}
  .ab-hero__heading{font-size:36px}
  .ab-hero__right{min-height:320px}
  .ab-founders{padding:56px 28px}
  .ab-founder-card{grid-template-columns:200px 1fr}
  .ab-founder-card__img-col{min-height:260px}
  .ab-founder-card__content{padding:28px 24px}
  .ab-founder-card__name{font-size:20px}
  .ab-stats--4,.ab-stats--5,.ab-stats--6{grid-template-columns:repeat(3,1fr)}
  .ab-what{grid-template-columns:1fr;padding:56px 28px;gap:36px}
  .ab-innovation{padding:56px 28px}
  .ab-innovation__heading{font-size:32px}
  .ab-why{padding:56px 28px}
  .ab-why__grid--3,.ab-why__grid--4,.ab-why__grid--5,.ab-why__grid--6{grid-template-columns:repeat(2,1fr)}
  .ab-certs{padding:56px 28px}
  .ab-certs__grid--3,.ab-certs__grid--4,.ab-certs__grid--5,.ab-certs__grid--6{grid-template-columns:repeat(2,1fr)}
  .ab-vmp--3,.ab-vmp--4{grid-template-columns:1fr}
  .ab-cta{padding:56px 28px}
  .ab-section-title{font-size:28px}
}
@media(max-width:600px){
  .ab-hero__left{padding:36px 20px}
  .ab-hero__heading{font-size:30px}
  .ab-hero__right{padding:28px 20px}
  .ab-founders{padding:40px 20px}
  /* Innovation stats — switch to 2-col grid so all 3 show */
  .ab-inno__stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:calc(100% - 0px);
    max-width:360px;
  }
  .ab-inno__stat{ padding:16px 10px; border-bottom:1px solid #2a2a2a; }
  .ab-inno__stat:last-child{ grid-column:1 / -1; border-bottom:none; }
  .ab-inno__stat-divider{ display:none; }
  .ab-inno__stat-num{ font-size:22px; }
  .ab-inno__stat-lbl{ font-size:8px; white-space:normal; }
  .ab-inno__heading{ font-size:36px; letter-spacing:-1px; }
  .ab-inno__heading-plain{ font-size:0.65em; }
  .ab-founder-card{grid-template-columns:1fr;display:block}
  .ab-founder-card__img-col{width:100%;height:260px;min-height:unset;max-height:260px;overflow:hidden}
  .ab-founder-card__img{width:100%;height:260px;object-fit:cover;object-position:top center}
  .ab-founder-card__content{padding:24px 20px;display:block;width:100%;box-sizing:border-box}
  .ab-founder-card__name{font-size:18px;word-break:break-word}
  .ab-founder-card__bio{word-break:break-word}
  .ab-founder-card__bullets li{word-break:break-word}
  .ab-founder-card__placeholder{width:100%}
  .ab-stats--2,.ab-stats--3,.ab-stats--4,.ab-stats--5,.ab-stats--6{grid-template-columns:repeat(2,1fr)}
  .ab-what{padding:40px 20px}
  .ab-products-grid--4,.ab-products-grid--5,.ab-products-grid--6{grid-template-columns:1fr}
  .ab-innovation{padding:40px 20px}
  .ab-why{padding:40px 20px}
  .ab-why__grid--2,.ab-why__grid--3,.ab-why__grid--4,.ab-why__grid--5,.ab-why__grid--6{grid-template-columns:1fr}
  .ab-certs{padding:40px 20px}
  .ab-certs__grid--2,.ab-certs__grid--3,.ab-certs__grid--4,.ab-certs__grid--5,.ab-certs__grid--6{grid-template-columns:1fr}
  .ab-vmp-card{padding:36px 20px}
  .ab-cta{padding:40px 20px}
  .ab-cta__heading{font-size:30px}
}

@media(max-width:480px){
  .ab-founder-card__img-col{height:220px;max-height:220px}
  .ab-founder-card__img{height:220px}
  .ab-founder-card__content{padding:20px 16px}
  .ab-founder-card__name{font-size:16px}
}
@media(max-width:400px){
  .ab-inno__stat{ padding:12px 8px; }
  .ab-inno__stat-num{ font-size:20px; }
  .ab-inno__heading{ font-size:26px; }
}



/* Extracted from b2b-white-labeling.ejs */

  .b2b-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    line-height: 1.6;
  }
  .b2b-header {
    text-align: center;
    margin-bottom: 60px;
  }
  .b2b-header h1 {
    font-size: 42px;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
  }
  .b2b-header h3 {
    font-size: 20px;
    color: var(--color-text-secondary);
    font-weight: 400;
  }
  .b2b-cta-btn {
    display: inline-block;
    margin-top: 32px;
    background-color: var(--color-primary);
    color: var(--color-surface);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(78, 54, 134, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .b2b-cta-btn:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(78, 54, 134, 0.3);
    color: var(--color-surface);
  }
  .b2b-intro {
    font-size: 18px;
    text-align: center;
    margin-bottom: 60px;
    color: var(--color-text-primary);
  }
  .b2b-section {
    margin-bottom: 50px;
  }
  .b2b-section h2 {
    font-size: 28px;
    color: var(--color-primary);
    margin-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
  }
  .b2b-section h3 {
    font-size: 22px;
    color: var(--color-text-primary);
    margin-top: 30px;
    margin-bottom: 15px;
  }
  .b2b-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  .b2b-list li {
    margin-bottom: 10px;
    font-size: 16px;
  }
  .b2b-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }
  .b2b-card {
    background: var(--color-bg);
    padding: 30px;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
  }
  .b2b-card h4 {
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 15px;
  }
  .b2b-check-list {
    list-style: none;
    padding: 0;
  }
  .b2b-check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
  }
  .b2b-check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 18px;
  }
  .b2b-cta {
    text-align: center;
    margin-top: 60px;
    padding: 40px;
    background: #fafafa;
    border-radius: 8px;
  }
  .b2b-cta h2 {
    font-size: 28px;
    color: var(--color-primary);
    margin-bottom: 20px;
    border: none;
  }


/* Extracted from certifications.ejs */

/* ── BASE ATOMS ── */
.cp-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
}
.cp-section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
}
.cp-section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 10px;
}
.cp-section-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 520px;
}

/* ── HERO ── */
.cp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 72px 56px;
  gap: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.cp-hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 50px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-text-primary);
  line-height: 1.05;
  margin-bottom: 18px;
}
.cp-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 440px;
}
.cp-cert-count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-left: 3px solid var(--color-primary);
  padding-left: 14px;
}
.cp-cert-count__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  color: var(--color-text-primary);
  line-height: 1;
}
.cp-cert-count__lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.cp-hero__right {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 36px 40px;
}
.cp-trust-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cp-trust-item {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.02em;
}
.cp-trust-dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* ── GRID SECTION ── */
.cp-grid-section {
  padding: 72px 56px;
  background: #f5f5f3;
}
.cp-grid-header {
  margin-bottom: 48px;
}

/* ── CERT GRID ── */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── CERT CARD ── */
.cp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.cp-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(200,16,46,0.1);
}

/* Preview area */
.cp-card__preview {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #fafafa;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.cp-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 16px;
  box-sizing: border-box;
  transition: transform 0.3s;
}
.cp-card:hover .cp-card__img {
  transform: scale(1.03);
}
.cp-card__empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cp-card__empty span {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-border);
}

/* Hover overlay */
.cp-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cp-card:hover .cp-card__overlay {
  opacity: 1;
}
.cp-card__overlay span {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface);
}

/* Badge */
.cp-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  z-index: 1;
}

/* Card info */
.cp-card__info {
  padding: 16px 16px 18px;
}
.cp-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 5px;
}
.cp-card__issuer {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.cp-card__validity {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-border);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── LIGHTBOX MODAL ── */
.cp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cp-modal.is-open {
  display: flex;
}
.cp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}
.cp-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: var(--color-text-primary);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}
.cp-modal__close:hover { background: var(--color-primary); }

/* Nav arrows */
.cp-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(17,17,17,0.7);
  border: none;
  color: var(--color-surface);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cp-modal__nav:hover { background: var(--color-primary); }
.cp-modal__nav--prev { left: 12px; }
.cp-modal__nav--next { right: 12px; }
.cp-modal__nav:disabled { opacity: 0.2; pointer-events: none; }

/* Image area */
.cp-modal__img-area {
  flex: 1;
  overflow: auto;
  background: #f5f5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 24px;
}
.cp-modal__img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  cursor: zoom-in;
  transition: transform 0.25s ease, max-height 0.25s ease, max-width 0.25s ease;
}
.cp-modal__img-area.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}
.cp-modal__img--zoomed {
  max-width: none;
  max-height: none;
  width: 160%;
  cursor: zoom-out;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cp-modal__img {
    transition: none;
  }
}

/* Footer */
.cp-modal__footer {
  padding: 18px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cp-modal__cert-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
}
.cp-modal__cert-meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.cp-modal__download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: var(--color-text-primary);
  padding: 9px 18px;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}
.cp-modal__download:hover { background: var(--color-primary); }

/* ── COMPLIANCE NOTE ── */
.cp-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 56px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.cp-note__icon { flex-shrink: 0; margin-top: 1px; }
.cp-note__text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .cp-hero { grid-template-columns: 1fr; padding: 48px 28px; gap: 36px; }
  .cp-hero__heading { font-size: 36px; }
  .cp-grid-section { padding: 56px 28px; }
  .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cp-note { padding: 24px 28px; }
  .cp-section-title { font-size: 28px; }
}
@media (max-width: 600px) {
  .cp-hero { padding: 36px 20px; }
  .cp-hero__heading { font-size: 30px; }
  .cp-grid-section { padding: 40px 20px; }
  .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cp-note { padding: 20px 20px; flex-direction: column; }
  .cp-modal__box { max-height: 95vh; }
  .cp-modal__nav { display: none; }
}


/* Contact page styles moved to layout/contact-layout.css */


/* Extracted from faqs.ejs */

.faq-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 0;
  border-right: 1px solid #e0e0e0;
  background: var(--color-surface);
  position: sticky;
  top: 64px;
  align-self: start;
}
.faq-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.25s ease, transform 0.2s ease;
  font-family: inherit;
}
.faq-tab:hover { color: var(--color-text-primary); background: #f5f5f3; }
.faq-tab--active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: #f5f5f3;
}
.faq-tab__icon { font-size: 16px; flex-shrink: 0; transition: transform 0.25s ease; }
.faq-tab--active .faq-tab__icon { transform: scale(1.08); }

/* ── PANELS (right content) ── */
.faq-panels { padding: 40px 56px 64px; }
.faq-panel { display: none; opacity: 0; }
.faq-panel--active {
  display: block;
  animation: faqPanelIn 0.28s ease forwards;
}
@keyframes faqPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Description highlight box */
.faq-panel__desc-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff8f8;
  border: 1px solid rgba(200,16,46,0.15);
  border-left: 3px solid var(--color-primary);
  padding: 14px 20px;
  margin-bottom: 28px;
}
.faq-panel__desc-icon { flex-shrink: 0; margin-top: 1px; }
.faq-panel__desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.65;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── FAQ ITEM (accordion) ── */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.faq-item.is-open { border-color: var(--color-primary); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.faq-item__q:hover { background: var(--color-bg); }
.faq-item.is-open .faq-item__q { background: #fff8f8; }

/* Arrow icon */
.faq-item__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #f5f5f3;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: all 0.2s;
}
.faq-item__arrow svg { transition: transform 0.25s ease; }
.faq-item.is-open .faq-item__arrow {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}
.faq-item.is-open .faq-item__arrow svg { transform: rotate(90deg); }

.faq-item__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  flex: 1;
  line-height: 1.3;
  transition: color 0.15s;
}
.faq-item.is-open .faq-item__text { color: var(--color-primary); }

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: all 0.2s;
  border-radius: 4px;
}
.faq-item.is-open .faq-item__icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
  transform: rotate(45deg);
}

/* Answer */
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.3s ease;
  display: block !important;
}
.faq-item__a[hidden] {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
.faq-item.is-open .faq-item__a {
  max-height: 2000px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.faq-item__a-inner {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  padding: 16px 24px 24px 66px;
  border-top: 1px solid #f5f5f5;
}
.faq-item__a-inner a { color: var(--color-primary); }
.faq-item__a-inner strong { color: var(--color-text-primary); }
.faq-item__a-inner ul { padding-left: 18px; margin: 8px 0; }
.faq-item__a-inner li { margin-bottom: 4px; }
.faq-item__a-inner li::marker { color: var(--color-primary); }

/* Empty state */
.faq-empty {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-border);
  padding: 32px;
  text-align: center;
  border: 1.5px dashed #e0e0e0;
}

/* ── CTA ── */
.faq-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-cta::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -150px; right: -80px;
  pointer-events: none;
}
.faq-cta__inner { position: relative; z-index: 1; }
.faq-cta__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.faq-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.faq-eyebrow--white { color: rgba(255,255,255,0.5); }
.faq-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.faq-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: 'FAQ';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 240px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
}
.faq-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.faq-hero .faq-eyebrow { color: var(--color-primary); }
.faq-hero .faq-eyebrow::before { background: var(--color-primary); }
.faq-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 14px;
}
.faq-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 500px;
  margin: 0;
}

/* ── BODY LAYOUT ── */
.faq-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: 500px;
  background: #f5f5f3;
}

/* ── TABS (left sidebar) ── */
.faq-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 0;
  border-right: 1px solid #e0e0e0;
  background: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.faq-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 24px;
}
.faq-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  flex: 1;
  line-height: 1.3;
  transition: color 0.15s;
}
.faq-item.is-open .faq-item__text { color: var(--color-primary); }

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: all 0.2s;
  border-radius: 4px;
}
.faq-item.is-open .faq-item__icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
  transform: rotate(45deg);
}

/* Answer */
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.3s ease;
  display: block !important;
}
.faq-item__a[hidden] {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
.faq-item.is-open .faq-item__a {
  max-height: 2000px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.faq-item__a-inner {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  padding: 16px 24px 24px 66px;
  border-top: 1px solid #f5f5f5;
}
.faq-item__a-inner a { color: var(--color-primary); }
.faq-item__a-inner strong { color: var(--color-text-primary); }
.faq-item__a-inner ul { padding-left: 18px; margin: 8px 0; }
.faq-item__a-inner li { margin-bottom: 4px; }
.faq-item__a-inner li::marker { color: var(--color-primary); }

/* Empty state */
.faq-empty {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-border);
  padding: 32px;
  text-align: center;
  border: 1.5px dashed #e0e0e0;
}

/* ── CTA ── */
.faq-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b0000 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-cta::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -150px; right: -80px;
  pointer-events: none;
}
.faq-cta__inner { position: relative; z-index: 1; }
.faq-cta__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.faq-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.faq-eyebrow--white { color: rgba(255,255,255,0.5); }
.faq-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.faq-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: 'FAQ';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 240px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
}
.faq-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.faq-hero .faq-eyebrow { color: var(--color-primary); }
.faq-hero .faq-eyebrow::before { background: var(--color-primary); }
.faq-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 14px;
}
.faq-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 500px;
  margin: 0;
}

/* ── BODY LAYOUT ── */
.faq-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: 500px;
  background: #f5f5f3;
}

/* ── TABS (left sidebar) ── */
.faq-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 0;
  border-right: 1px solid #e0e0e0;
  background: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.faq-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 24px;
}
.faq-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 32px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.faq-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .faq-hero { padding: 56px 28px 48px; }
  .faq-hero__title { font-size: 40px; }
  .faq-body { grid-template-columns: 1fr; }
  .faq-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    position: static;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .faq-tab {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 14px 18px;
    white-space: nowrap;
    font-size: 11px;
    scroll-snap-align: start;
  }
  .faq-tab--active { border-bottom-color: var(--color-primary); border-left-color: transparent; background: var(--color-surface); }
  .faq-panels { padding: 28px 28px 48px; }
}
@media (max-width: 600px) {
  .faq-hero { padding: 40px 20px 36px; }
  .faq-hero__title { font-size: 32px; }
  .faq-panels { padding: 20px 16px 40px; }
  .faq-item__q { padding: 16px 16px; gap: 12px; }
  .faq-item__text { font-size: 13px; }
  .faq-item__a-inner { padding: 0 16px 20px 16px; padding-top: 14px; }
  .faq-cta { padding: 56px 20px; }
  .faq-cta__heading { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-tab,
  .faq-tab__icon,
  .faq-item__a,
  .faq-panel--active {
    transition: none !important;
    animation: none !important;
  }
}


/* Extracted from privacy-policy.ejs */

/* ── HERO ── */
.pol-hero {
  background: var(--color-text-primary);
  padding: 64px 56px 56px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pol-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(200,16,46,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.pol-hero__inner { position: relative; z-index: 1; }
.pol-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pol-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
}
.pol-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 16px;
}
.pol-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pol-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.pol-hero__meta svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.pol-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.pol-hero__breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; }
.pol-hero__breadcrumb a:hover { color: var(--color-surface); }

/* ── LAYOUT ── */
.pol-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: start;
  background: var(--color-surface);
}

/* ── TOC SIDEBAR ── */
.pol-toc {
  padding: 48px 0 48px 0;
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 64px;
  background: var(--color-surface);
}
.pol-toc__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-border);
  padding: 0 24px;
  margin-bottom: 16px;
}
.pol-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  line-height: 1.4;
}
.pol-toc__link:hover { color: var(--color-text-primary); background: var(--color-bg); border-left-color: var(--color-border-subtle); }
.pol-toc__link.is-active { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--color-primary-light); }
.pol-toc__num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-border-subtle);
  flex-shrink: 0;
  min-width: 16px;
}
.pol-toc__contact {
  margin-top: 32px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}
.pol-toc__contact-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-border);
  margin-bottom: 8px;
}
.pol-toc__contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.pol-toc__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }

/* ── ARTICLE ── */
.pol-article {
  padding: 56px 64px 72px;
  max-width: 820px;
}
.pol-intro {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

/* ── POLICY SECTION ── */
.pol-section {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #f0f0f0;
  scroll-margin-top: 80px;
}
.pol-section:last-of-type { border-bottom: none; }
.pol-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pol-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pol-section__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.85;
}
/* RTE content */
.pol-section__body p { margin-bottom: 14px; }
.pol-section__body ul,
.pol-section__body ol { padding-left: 20px; margin-bottom: 14px; }
.pol-section__body li { margin-bottom: 6px; line-height: 1.7; }
.pol-section__body ul li::marker { color: var(--color-primary); }
.pol-section__body ol li::marker { color: var(--color-primary); font-weight: 700; }
.pol-section__body strong { color: var(--color-text-primary); font-weight: 700; }
.pol-section__body a { color: var(--color-primary); text-decoration: underline; }
.pol-section__body a:hover { color: #8b0000; }
.pol-section__body h3,.pol-section__body h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}

/* Divider block */
.pol-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}

/* Highlight block */
.pol-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-primary-muted);
  border-left: 3px solid var(--color-primary);
  padding: 16px 20px;
  margin: 24px 0;
}
.pol-highlight__icon { flex-shrink: 0; margin-top: 1px; }
.pol-highlight__text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Contact box */
.pol-contact-box {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 32px;
  margin-top: 48px;
}
.pol-contact-box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.pol-contact-box__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.pol-contact-box__items { display: flex; flex-direction: column; gap: 10px; }
.pol-contact-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pol-contact-box__item svg { stroke: var(--color-primary); flex-shrink: 0; }
.pol-contact-box__item a { color: var(--color-primary); text-decoration: none; }
.pol-contact-box__item a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .pol-hero { padding: 48px 28px 40px; }
  .pol-hero__title { font-size: 36px; }
  .pol-layout { grid-template-columns: 1fr; }
  .pol-toc {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
  }
  .pol-toc__title { width: 100%; padding: 0 20px; margin-bottom: 8px; }
  .pol-toc__link { padding: 8px 16px; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
  .pol-toc__link:hover { border-bottom-color: var(--color-border-subtle); border-left-color: transparent; }
  .pol-toc__link.is-active { border-bottom-color: var(--color-primary); border-left-color: transparent; }
  .pol-toc__contact { display: none; }
  .pol-article { padding: 36px 28px 56px; }
}
@media (max-width: 600px) {
  .pol-hero { padding: 36px 20px 32px; }
  .pol-hero__title { font-size: 28px; }
  .pol-article { padding: 24px 16px 40px; }
  .pol-contact-box { padding: 20px; }
}


/* Extracted from terms-and-conditions.ejs */

/* ── HERO ── */
.pol-hero {
  background: var(--color-text-primary);
  padding: 64px 56px 56px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pol-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(200,16,46,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.pol-hero__inner { position: relative; z-index: 1; }
.pol-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pol-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
}
.pol-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 16px;
}
.pol-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pol-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.pol-hero__meta svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.pol-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.pol-hero__breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; }
.pol-hero__breadcrumb a:hover { color: var(--color-surface); }

/* ── LAYOUT ── */
.pol-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: start;
  background: var(--color-surface);
}

/* ── TOC SIDEBAR ── */
.pol-toc {
  padding: 48px 0 48px 0;
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 64px;
  background: var(--color-surface);
}
.pol-toc__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-border);
  padding: 0 24px;
  margin-bottom: 16px;
}
.pol-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  line-height: 1.4;
}
.pol-toc__link:hover { color: var(--color-text-primary); background: var(--color-bg); border-left-color: var(--color-border-subtle); }
.pol-toc__link.is-active { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--color-primary-light); }
.pol-toc__num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-border-subtle);
  flex-shrink: 0;
  min-width: 16px;
}
.pol-toc__contact {
  margin-top: 32px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}
.pol-toc__contact-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-border);
  margin-bottom: 8px;
}
.pol-toc__contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.pol-toc__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }

/* ── ARTICLE ── */
.pol-article {
  padding: 56px 64px 72px;
  max-width: 820px;
}
.pol-intro {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

/* ── POLICY SECTION ── */
.pol-section {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #f0f0f0;
  scroll-margin-top: 80px;
}
.pol-section:last-of-type { border-bottom: none; }
.pol-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pol-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pol-section__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.85;
}
/* RTE content */
.pol-section__body p { margin-bottom: 14px; }
.pol-section__body ul,
.pol-section__body ol { padding-left: 20px; margin-bottom: 14px; }
.pol-section__body li { margin-bottom: 6px; line-height: 1.7; }
.pol-section__body ul li::marker { color: var(--color-primary); }
.pol-section__body ol li::marker { color: var(--color-primary); font-weight: 700; }
.pol-section__body strong { color: var(--color-text-primary); font-weight: 700; }
.pol-section__body a { color: var(--color-primary); text-decoration: underline; }
.pol-section__body a:hover { color: #8b0000; }
.pol-section__body h3,.pol-section__body h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}

/* Divider block */
.pol-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}

/* Highlight block */
.pol-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-primary-muted);
  border-left: 3px solid var(--color-primary);
  padding: 16px 20px;
  margin: 24px 0;
}
.pol-highlight__icon { flex-shrink: 0; margin-top: 1px; }
.pol-highlight__text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Contact box */
.pol-contact-box {
  background: #f5f5f3;
  border: 1px solid var(--color-border);
  padding: 32px;
  margin-top: 48px;
}
.pol-contact-box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.pol-contact-box__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.pol-contact-box__items { display: flex; flex-direction: column; gap: 10px; }
.pol-contact-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pol-contact-box__item svg { stroke: var(--color-primary); flex-shrink: 0; }
.pol-contact-box__item a { color: var(--color-primary); text-decoration: none; }
.pol-contact-box__item a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .pol-hero { padding: 48px 28px 40px; }
  .pol-hero__title { font-size: 36px; }
  .pol-layout { grid-template-columns: 1fr; }
  .pol-toc {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
  }
  .pol-toc__title { width: 100%; padding: 0 20px; margin-bottom: 8px; }
  .pol-toc__link { padding: 8px 16px; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
  .pol-toc__link:hover { border-bottom-color: var(--color-border-subtle); border-left-color: transparent; }
  .pol-toc__link.is-active { border-bottom-color: var(--color-primary); border-left-color: transparent; }
  .pol-toc__contact { display: none; }
  .pol-article { padding: 36px 28px 56px; }
}
@media (max-width: 600px) {
  .pol-hero { padding: 36px 20px 32px; }
  .pol-hero__title { font-size: 28px; }
  .pol-article { padding: 24px 16px 40px; }
  .pol-contact-box { padding: 20px; }
}


/* Extracted from footer.ejs */

/* OVERLAY */
.em-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s;
  backdrop-filter: blur(2px);
}
.em-overlay.is-open { display: block; opacity: 1; }

/* MODAL */
.em-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.em-modal.is-open {
  display: flex;
  pointer-events: all;
}
.em-modal__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  background: var(--color-surface);
  max-width: 840px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: em-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes em-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* CLOSE */
.em-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.em-close:hover { background: var(--color-primary); }

/* LEFT — Form */
.em-left {
  padding: 40px 36px 40px 40px;
  border-right: 1px solid var(--color-border);
}
.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.em-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.em-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.em-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.em-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-success-text);
  margin-bottom: 16px;
}
.em-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-primary-muted);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.em-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.em-field:last-child { margin-bottom: 0; }
.em-field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.em-field input,
.em-field select,
.em-field textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.em-field input:focus,
.em-field select:focus,
.em-field textarea:focus { border-color: var(--color-primary); }
.em-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.em-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
}
.em-submit:hover { background: var(--color-primary-hover); }
.em-submit:disabled { background: var(--color-border); cursor: not-allowed; }
@keyframes em-spin { to { transform: rotate(360deg); } }

/* RIGHT — Contact info */
.em-right {
  padding: 40px 24px 40px 28px;
  background: var(--color-text-primary);
  display: flex;
  flex-direction: column;
}
.em-right__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255);
  margin-bottom: 12px;
}
.em-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
.em-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.em-phone:hover { color: var(--color-surface); }
.em-phone svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.em-email {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.15s;
  word-break: break-all;
}
.em-email:hover { color: var(--color-surface); }
.em-email svg { stroke: rgba(255,255,255,0.7); flex-shrink: 0; }
.em-right__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}
.em-hours {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-surface);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.em-hours-note {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.em-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.em-cert {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.6);
  padding: 3px 8px;
}
.em-cert-note {
  font-family: var(--font-body);
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .em-modal__inner { grid-template-columns: 1fr; }
  .em-right { display: none; }
  .em-left { padding: 36px 24px; }
}
@media (max-width: 480px) {
  .em-grid { grid-template-columns: 1fr; }
  .em-left { padding: 28px 16px; }
  .em-heading { font-size: 22px; }
}


/* Extracted from products-by-forms.ejs */

      .page-hero__subtitle {
        max-width: 800px;
        margin: 20px auto 0;
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.9);
      }

      .intro-section {
        padding: 80px 20px 40px;
        max-width: 1000px;
        margin: 0 auto;
        text-align: center;
      }

      .intro-section__title {
        font-family: var(--font-heading);
        font-size: 32px;
        color: var(--primary-color, var(--color-primary));
        text-transform: uppercase;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
      }

      .intro-section__text {
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--gray, var(--color-text-muted));
        line-height: 1.8;
      }

      .category-section {
        padding: 60px 20px;
        max-width: 1200px;
        margin: 0 auto;
        border-bottom: 1px solid var(--lightgray, var(--color-border));
      }

      .category-section:last-of-type {
        border-bottom: none;
        padding-bottom: 100px;
      }

      .category-header {
        text-align: center;
        margin-bottom: 50px;
      }

      .category-header__title {
        font-family: var(--font-heading);
        font-size: 36px;
        text-transform: uppercase;
        color: var(--black, var(--color-text-primary));
        letter-spacing: -0.5px;
      }

      /* Product grid layout adjustment for 3-4 cards */
      @media (min-width: 1200px) {
        .category-section .product-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
    

/* Extracted from footer.html */

/* ── SHELL ── */
.nf-footer { background:var(--color-text-primary); color:rgba(255,255,255,0.35); font-family: var(--font-body); }

/* ── TOP BAND ── */
.nf-top { display:flex; align-items:center; justify-content:space-between; padding:40px 56px 32px; flex-wrap:wrap; gap:20px; }
.nf-brand { display:flex; flex-direction:column; gap:8px; }
.nf-logo { display:inline-block; }
.nf-tagline { font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.76); margin:0; }

/* ── SOCIAL ── */
.nf-social { display:flex; align-items:center; gap:8px; }
.nf-social__link { width:38px; height:38px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); transition:all 0.2s; flex-shrink:0; }
.nf-social__link svg { width:16px; height:16px; }
.nf-social__link:hover { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-surface); }

/* ── DIVIDER ── */
.nf-divider { height:1px; background:var(--color-border); margin:0 56px; }

/* ── MAIN GRID ── */
.nf-grid { display:grid; grid-template-columns:1.6fr 1.2fr 1fr 1fr; gap:0; padding:40px 56px; }
.nf-col { padding-right:32px; border-right:1px solid var(--color-border); padding-left:24px; }
.nf-col:first-child { padding-left:0; }
.nf-col:last-child { border-right:none; }
.nf-col__label { font-family: var(--font-heading); font-weight:600; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,1); margin-bottom:20px; }

/* ── OFFICES ── */
.nf-office { margin-bottom:20px; }
.nf-office__name { font-family: var(--font-heading); font-weight:600; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:5px; }
.nf-office__addr { font-size:12px; color:rgba(255,255,255,0.61); line-height:1.75; }

/* ── CONTACT ── */
.nf-contact-group { margin-bottom:20px; }
.nf-contact-group__title { font-family: var(--font-heading); font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:7px; }
/* Phones — 2-col grid always */
.nf-phones-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
.nf-contact-group__item { display:block; font-size:12px; color:rgba(255,255,255,0.61); text-decoration:none; margin-bottom:4px; transition:color 0.15s; white-space:nowrap; }
.nf-contact-group__item:hover { color:var(--color-primary); }
/* Emails — always 1-col, truncate overflow */
.nf-email-item { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* ── NAV LINKS ── */
.nf-nav-link { display:block; font-size:12px; color:rgba(255,255,255,0.3); text-decoration:none; margin-bottom:10px; transition:color 0.15s; letter-spacing:0.02em; }
.nf-nav-link:hover { color:var(--color-surface); }

/* ── CERT ROW ── */
.nf-certs-row { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 56px; }
.nf-certs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.nf-cert-tag { font-family: var(--font-heading); font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-surface); border:1px solid var(--color-surface); padding:5px 12px; transition:all 0.2s; }
.nf-cert-tag:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* ── DOWNLOAD BUTTONS ── */
.nf-download-btns { display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
/* Row 1: handbook + brochure side by side */
.nf-download-row1 { display:flex; align-items:center; gap:20px; }
/* Row 2: catalogue full width of its container */
.nf-download-row2 { display:flex; }
.nf-download-row2 .nf-dl-btn { flex:1; justify-content:center; }

.nf-dl-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-heading); font-weight:600; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:10px 20px; text-decoration:none; white-space:nowrap;
  transition:all 0.2s;
}
.nf-dl-btn--solid { background:var(--color-primary); color:var(--color-surface); border:1px solid var(--color-primary); }
.nf-dl-btn--solid:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.nf-dl-btn--outline { background:transparent; color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.2); }
.nf-dl-btn--outline:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.4); color:var(--color-surface); }
.nf-dl-btn svg { flex-shrink:0; }

/* ── BOTTOM BAR ── */
.nf-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px 56px 32px; flex-wrap:wrap; gap:12px; }
.nf-copyright { font-size:11px; color:rgba(255,255,255,0.2); letter-spacing:0.04em; }
.nf-policy-links { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.nf-policy-link { font-size:11px; color:rgba(255,255,255,0.2); text-decoration:none; letter-spacing:0.04em; transition:color 0.15s; position:relative; }
.nf-policy-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--color-primary); transition:width 0.2s; }
.nf-policy-link:hover { color:var(--color-surface); }
.nf-policy-link:hover::after { width:100%; }

/* ── RESPONSIVE — tablet ── */
@media (max-width: 960px) {
  .nf-top     { padding:24px 20px 18px; }
  .nf-divider { margin:0 20px; }
  .nf-grid    { grid-template-columns:1fr 1fr; padding:24px 20px; gap:20px 16px; }
  .nf-col     { border-right:none; padding-left:0; padding-right:0; border-bottom:1px solid var(--color-border); padding-bottom:18px; }
  .nf-col:nth-child(odd)  { border-right:1px solid var(--color-border); padding-right:16px; }
  .nf-col:nth-last-child(-n+2) { border-bottom:none; }
  .nf-office  { margin-bottom:12px; }
  .nf-office__addr { font-size:11px; line-height:1.55; }
  .nf-office__name { font-size:11px; }
  .nf-contact-group { margin-bottom:14px; }
  .nf-contact-group__item { font-size:11px; }
  .nf-nav-link { font-size:11px; margin-bottom:7px; }
  .nf-col__label { margin-bottom:12px; }
  .nf-certs-row { padding:12px 20px; gap:12px; }
  .nf-cert-tag  { font-size:8px; padding:4px 9px; }
  .nf-dl-btn    { font-size:10px; padding:8px 14px; }
  .nf-download-row1 { gap:10px; }
  .nf-bottom  { padding:12px 20px 20px; flex-direction:column; align-items:flex-start; gap:8px; }
  .nf-policy-links { gap:14px; flex-wrap:wrap; }
  .nf-copyright, .nf-policy-link { font-size:10px; }
}

/* ── RESPONSIVE — mobile ── */
@media (max-width: 600px) {
  .nf-top { padding:20px 16px 16px; flex-direction:column; align-items:flex-start; gap:14px; }
  .nf-social { gap:6px; }
  .nf-social__link { width:32px; height:32px; }
  .nf-social__link svg { width:14px; height:14px; }
  .nf-divider { margin:0 16px; }
  /* Stay 2-col grid — prevents excessive height */
  .nf-grid { grid-template-columns:1fr 1fr; padding:18px 16px; gap:16px 12px; }
  .nf-col:nth-child(odd) { padding-right:12px; }
  /* Phones stay 2-col */
  .nf-phones-grid { grid-template-columns:1fr 1fr; }
  /* Emails: truncate tightly */
  .nf-email-item { max-width:140px; font-size:10px; }
  /* Cert row stacks vertically */
  .nf-certs-row { padding:10px 16px; flex-direction:column; align-items:flex-start; gap:10px; }
  /* Download buttons: full width container */
  .nf-download-btns { width:100%; }
  /* Row 1: handbook + brochure share full width equally */
  .nf-download-row1 { width:100%; gap:10px; }
  .nf-download-row1 .nf-dl-btn { flex:1; justify-content:center; }
  /* Row 2: catalogue full width */
  .nf-download-row2 { width:100%; }
  .nf-bottom { padding:10px 16px 18px; }
}


/* Extracted from footer.html */

/* OVERLAY */
.em-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s;
  backdrop-filter: blur(2px);
}
.em-overlay.is-open { display: block; opacity: 1; }

/* MODAL */
.em-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.em-modal.is-open {
  display: flex;
  pointer-events: all;
}
.em-modal__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  background: var(--color-surface);
  max-width: 840px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: em-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes em-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* CLOSE */
.em-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.em-close:hover { background: var(--color-primary); }

/* LEFT — Form */
.em-left {
  padding: 40px 36px 40px 40px;
  border-right: 1px solid var(--color-border);
}
.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.em-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.em-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.em-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.em-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-success-text);
  margin-bottom: 16px;
}
.em-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-primary-muted);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.em-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.em-field:last-child { margin-bottom: 0; }
.em-field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.em-field input,
.em-field select,
.em-field textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.em-field input:focus,
.em-field select:focus,
.em-field textarea:focus { border-color: var(--color-primary); }
.em-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.em-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
}
.em-submit:hover { background: var(--color-primary-hover); }
.em-submit:disabled { background: var(--color-border); cursor: not-allowed; }
@keyframes em-spin { to { transform: rotate(360deg); } }

/* RIGHT — Contact info */
.em-right {
  padding: 40px 24px 40px 28px;
  background: var(--color-text-primary);
  display: flex;
  flex-direction: column;
}
.em-right__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255);
  margin-bottom: 12px;
}
.em-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
.em-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.em-phone:hover { color: var(--color-surface); }
.em-phone svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.em-email {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.15s;
  word-break: break-all;
}
.em-email:hover { color: var(--color-surface); }
.em-email svg { stroke: rgba(255,255,255,0.7); flex-shrink: 0; }
.em-right__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}
.em-hours {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-surface);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.em-hours-note {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.em-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.em-cert {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.6);
  padding: 3px 8px;
}
.em-cert-note {
  font-family: var(--font-body);
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .em-modal__inner { grid-template-columns: 1fr; }
  .em-right { display: none; } /* hide contact panel on mobile */
  .em-left { padding: 36px 24px; }
}
@media (max-width: 480px) {
  .em-grid { grid-template-columns: 1fr; }
  .em-left { padding: 28px 16px; }
  .em-heading { font-size: 22px; }
}
/* === End: extracted-styles.css === */

/* === Start: product-listing.css === */
/* Product Listing Section */
.product-listing-section {
  padding: 60px 20px 80px; /* 60px top, 80px bottom */
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .product-listing-section {
    padding-top: 80px;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-grid-card {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-xs);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all var(--duration-normal, 200ms) var(--ease-spring);
  height: 100%;
}

.product-grid-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-muted);
}

.product-grid-card__image {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 24px;
}

.product-grid-card__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.product-grid-card__btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 32px;
  border-radius: 50px; /* Pill shape */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.product-grid-card__btn:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-surface);
}

/* Page Hero Banner */
.page-hero {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  padding: 60px 20px;
  text-align: center;
  color: var(--color-surface);
}

.page-hero__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin: 0;
}
/* === End: product-listing.css === */

/* === Start: auth.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — STOREFRONT AUTHENTICATION STYLESHEET
   Shared layout, card container, form controls, and alerts for Customer
   Login (/account/login) and Account Registration (/account/register).
   ========================================================================== */

.auth-container {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--color-bg);
}

.auth-card {
  background: var(--color-surface, var(--color-surface));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  border: 1px solid var(--color-border);
}

/* Modifier for wider registration form */
.auth-card--wide {
  max-width: 520px;
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--text-2xl, 24px);
  font-weight: 700;
  color: var(--purple-950, var(--color-text-primary));
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: var(--text-base, 14px);
  color: var(--text-secondary, #666058);
}

.auth-alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-base, 14px);
  margin-bottom: 20px;
}

.auth-alert--danger {
  background: var(--feedback-error-bg, #fde8e8);
  color: var(--feedback-error-text, #991b1b);
  border: 1px solid var(--feedback-error-border, #fecaca);
}

.auth-alert--success {
  background: var(--feedback-success-bg, #ecfdf5);
  color: var(--feedback-success-text, #065f46);
  border: 1px solid var(--feedback-success-border, #a7f3d0);
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.auth-label-row .auth-label {
  margin-bottom: 0;
}

.auth-forgot-link {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

.auth-hint {
  font-size: 12px;
  color: var(--text-secondary, #666058);
  margin: -8px 0 20px;
  line-height: 1.4;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

.auth-form-group {
  margin-bottom: 20px;
}

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-950, var(--color-text-primary));
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--neutral-300, #ddd8d3);
  border-radius: var(--radius-md, 8px);
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-input:focus,
.auth-input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
  outline: none !important;
}

.auth-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-primary);
  color: var(--text-inverse, var(--color-surface));
  border: none;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.auth-btn:hover {
  background: var(--color-primary-hover);
}

.auth-footer-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-secondary, #666058);
}

.auth-footer-link a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer-link a:hover {
  text-decoration: underline;
}
/* === End: auth.css === */

/* === Start: layout/announcement-bar.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ANNOUNCEMENT BAR MARQUEE (announcement-bar.css)
   Thin top announcement bar with smooth infinite marquee scrolling,
   pause on hover, and mobile responsiveness.
   ========================================================================== */

#section-topbar {
  background: #1a1a1a;
  color: var(--color-surface);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  height: 40px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  max-height: 40px;
  z-index: 201;
}

#section-topbar.is-hidden {
  max-height: 0;
  opacity: 0;
  border-bottom: none;
}

.topbar-marquee-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Three identical tracks scroll by exactly one track width, so the loop repeats
   without a visible gap or jump. Keep MARQUEE_LOOPS in _announcement.ejs in sync
   with the translate distance below. */
.topbar-marquee {
  display: flex;
  align-items: center;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}

.topbar-marquee__track {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
}

.topbar-marquee-container:hover .topbar-marquee,
.topbar-marquee-container:focus-within .topbar-marquee {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.marquee-divider {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.3333%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-marquee {
    animation: none;
    justify-content: center;
    width: 100%;
  }
  .topbar-marquee__track:not(:first-child) {
    display: none;
  }
}

@media (max-width: 768px) {
  #section-topbar {
    height: 36px;
    max-height: 36px;
    font-size: 13px;
  }
  .marquee-item {
    font-size: 13px;
    gap: 8px;
  }
}
/* === End: layout/announcement-bar.css === */

/* === Start: layout/topbar.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — TOPBAR LAYOUT STYLESHEET (topbar.css)
   Replaces legacy topbar with top announcement marquee bar.
   ========================================================================== */

#section-topbar {
  background: #1a1a1a;
  color: var(--color-surface);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  height: 40px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  max-height: 40px;
  z-index: 201;
}

#section-topbar.is-hidden {
  max-height: 0;
  opacity: 0;
  border-bottom: none;
}
/* === End: layout/topbar.css === */

/* === Start: layout/nav.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — NAVIGATION LAYOUT STYLESHEET (nav.css)
   Left menu · mathematically centered logo · right utilities.
   Below 1100px the menu collapses to: hamburger · logo · search · cart.
   ========================================================================== */

.header-icon-sprite {
  display: none;
}

#section-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 200);
  background: var(--color-bg);
  transition: box-shadow var(--duration-motion, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

#section-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-border-subtle), 0 6px 24px -18px rgba(0, 0, 0, 0.35);
}

/* ── NAV CONTAINER ──
   A three-column grid keeps the logo optically centered regardless of how many
   menu items or utility icons sit either side of it. */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 96px;
  padding: 0 48px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  /* Height stays fixed while scrolled — changing it caused sticky header jitter. */
  transition: none;
  /* Must stay above the mega menu scrim, otherwise the scrim covers the trigger and
     the resulting mouseleave closes the menu the instant it opens. */
  position: relative;
  z-index: 70;
}

#section-header.is-scrolled .site-nav {
  height: 96px;
}

.site-nav .unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── ZONE 1: MENU ── */
.nav-left {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 34px;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-item__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  padding: 8px 0;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.nav-item__link:hover,
.nav-item__link:focus-visible {
  color: var(--color-primary);
}

.nav-item.is-active > .nav-item__link {
  color: var(--color-primary);
}

/* Underline reveal on hover, mirroring the reference micro-interaction. */
.nav-item__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.nav-item__link:hover::after,
.nav-item__link:focus-visible::after,
.nav-item.is-active > .nav-item__link::after,
.nav-item__link[aria-expanded='true']::after {
  transform: scaleX(1);
}

/* Caret drawn in CSS so it inherits colour and rotation without an extra request. */
.nav-item__caret {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.24s ease;
}

.nav-item__link[aria-expanded='true'] .nav-item__caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* ── ZONE 2: LOGO ── */
.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo img {
  display: block;
  width: auto;
  height: 74px;
  transition: height var(--duration-motion, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

#section-header.is-scrolled .nav-logo img {
  height: 68px;
}

/* ── ZONE 3: UTILITIES ── */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-utilities {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── COMPACT DROPDOWN ── */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 210px;
  padding: 8px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

/* Invisible bridge so the cursor can travel from trigger to panel. */
.nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 14px;
}

.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__link {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary, #4c4c4c);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding-left: 25px;
}

/* ── HAMBURGER (mobile only) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.nav-hamburger:hover {
  background: var(--color-surface-warm);
}

.nav-hamburger__bar {
  display: block;
  width: 21px;
  height: 1.5px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--color-text-primary);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── MINIMAL VARIANT (checkout) ── */
.site-nav--minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── RESPONSIVE ── */
@media (max-width: 1400px) {
  .nav-menu {
    gap: 26px;
  }
}

@media (max-width: 1280px) {
  .site-nav {
    padding: 0 32px;
  }
  .nav-menu {
    gap: 20px;
  }
  .nav-item__link {
    font-size: 15px;
  }
  .nav-logo img {
    height: 66px;
  }
}

@media (max-width: 1100px) {
  .site-nav {
    height: 72px;
    padding: 0 16px;
    gap: 12px;
  }
  #section-header.is-scrolled .site-nav {
    height: 72px;
  }
  .nav-menu {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  /* .utility-icon--desktop is hidden in utility-icons.css, which loads after this
     file and would otherwise win the display declaration at equal specificity. */
  .nav-logo img,
  #section-header.is-scrolled .nav-logo img {
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .nav-logo img,
  .nav-item__link,
  .nav-item__link::after,
  .nav-item__caret,
  .nav-dropdown,
  .nav-hamburger__bar {
    transition-duration: 0.01ms;
  }
}
/* === End: layout/nav.css === */

/* === Start: layout/product-hero.css === */
/* ==========================================================================
   PRODUCT HERO — homepage carousel slides (Reglow + Omega-3)
   Full-width composition: badge left · product center · bullets right.
   Portrait PNGs (1068×1473) on cream + crimson arc.
   ========================================================================== */

.hs-slide.ph-hero {
  display: flex;
  grid-template-columns: unset;
  align-items: stretch;
  justify-content: center;
  min-height: min(92vh, 860px);
  padding: 40px clamp(28px, 5.5vw, 96px) 56px;
  gap: 0;
  user-select: none;
  -webkit-user-select: none;
}

#hs-template--20946532663474__hero_slider_JAVAdh .hs-track {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#hs-template--20946532663474__hero_slider_JAVAdh .hs-track.is-dragging {
  cursor: grabbing;
}

#hs-template--20946532663474__hero_slider_JAVAdh .hs-track img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

#hs-template--20946532663474__hero_slider_JAVAdh .ph-cta {
  cursor: pointer;
  user-select: none;
}

.ph-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ph-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 4px;
}

.ph-headline {
  margin: 0 0 18px;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary, #d31145);
  text-transform: none;
}

.ph-sub {
  margin: 0 auto 28px;
  max-width: 600px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-text-secondary, #5c5c5c);
}

.ph-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 15px 40px;
  border-radius: 999px;
  background: var(--color-primary, #d31145);
  color: var(--color-surface, #fff);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(211, 17, 69, 0.55);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.ph-cta:hover,
.ph-cta:focus-visible {
  background: var(--color-primary-hover, #b00e39);
  color: var(--color-surface, #fff);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(211, 17, 69, 0.6);
}

.ph-cta:focus-visible {
  outline: 2px solid var(--color-primary, #d31145);
  outline-offset: 3px;
}

/* ── Visual row: spreads into left/right gutters ── */
.ph-visual {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 420px) minmax(220px, 1fr);
  align-items: center;
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: 28px;
  margin-top: clamp(16px, 2.5vh, 36px);
}

.ph-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  align-self: center;
  text-align: left;
  max-width: 280px;
  padding-left: clamp(0px, 1.5vw, 24px);
  color: var(--color-primary, #d31145);
}

.ph-badge__icon {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.ph-badge__icon svg {
  width: 48px;
  height: 48px;
}

.ph-badge__text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  line-height: 1.45;
  color: var(--color-text-secondary, #5c5c5c);
}

.ph-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: min(58vh, 560px);
}

.ph-arc {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 145%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(
    120% 100% at 50% 100%,
    #e3124a 0%,
    var(--color-primary, #d31145) 42%,
    #9e0c34 100%
  );
  pointer-events: none;
}

.ph-product {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(58vh, 560px);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 32px rgba(31, 31, 31, 0.2));
  animation: ph-float 5.5s ease-in-out infinite;
}

/* Only the active slide should float — inactive slides stay still */
.hs-slide:not(.is-active) .ph-product {
  animation: none;
}

/* Active-slide enter choreography (triggered by .is-entering from goTo) */
.hs-slide.ph-hero .ph-headline,
.hs-slide.ph-hero .ph-sub,
.hs-slide.ph-hero .ph-cta,
.hs-slide.ph-hero .ph-badge,
.hs-slide.ph-hero .ph-bullets {
  opacity: 1;
  transform: translateY(0);
}

.hs-slide.ph-hero.is-entering .ph-headline,
.hs-slide.ph-hero.is-entering .ph-sub,
.hs-slide.ph-hero.is-entering .ph-cta,
.hs-slide.ph-hero.is-entering .ph-badge,
.hs-slide.ph-hero.is-entering .ph-bullets {
  animation: ph-enter-up 0.55s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.hs-slide.ph-hero.is-entering .ph-headline { animation-delay: 40ms; }
.hs-slide.ph-hero.is-entering .ph-sub { animation-delay: 120ms; }
.hs-slide.ph-hero.is-entering .ph-cta { animation-delay: 200ms; }
.hs-slide.ph-hero.is-entering .ph-badge { animation-delay: 160ms; }
.hs-slide.ph-hero.is-entering .ph-bullets { animation-delay: 220ms; }

.hs-slide.ph-hero.is-entering .ph-stage {
  animation: ph-kenburns 6.5s var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
}

@keyframes ph-enter-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ph-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-slide.ph-hero.is-entering .ph-headline,
  .hs-slide.ph-hero.is-entering .ph-sub,
  .hs-slide.ph-hero.is-entering .ph-cta,
  .hs-slide.ph-hero.is-entering .ph-badge,
  .hs-slide.ph-hero.is-entering .ph-bullets,
  .hs-slide.ph-hero.is-entering .ph-stage {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

.ph-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: end;
  align-self: center;
  text-align: left;
  max-width: 320px;
  padding-right: clamp(0px, 1.5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ph-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.9rem, 1.15vw, 1.0625rem);
  line-height: 1.45;
  color: var(--color-text-secondary, #5c5c5c);
}

.ph-bullets__mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--color-primary, #d31145);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 16.6L4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z'/%3E%3Cpath fill='%23000' d='M12.2 16.6L7.8 12.2l1.4-1.4 3 3 1.2-1.2.8.8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 16.6L4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z'/%3E%3Cpath fill='%23000' d='M12.2 16.6L7.8 12.2l1.4-1.4 3 3 1.2-1.2.8.8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@keyframes ph-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ph-product {
    animation: none;
  }

  .ph-cta {
    transition: none;
  }

  .ph-cta:hover,
  .ph-cta:focus-visible {
    transform: none;
  }
}

/* Large desktops — pull callouts further into the side gutters */
@media (min-width: 1280px) {
  .ph-visual {
    grid-template-columns: minmax(260px, 1.15fr) minmax(320px, 460px) minmax(280px, 1.15fr);
    column-gap: clamp(48px, 6vw, 100px);
  }

  .ph-stage {
    max-width: 460px;
    min-height: min(60vh, 600px);
  }

  .ph-product {
    max-height: min(60vh, 600px);
  }

  .ph-badge {
    max-width: 300px;
  }

  .ph-bullets {
    max-width: 340px;
  }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .hs-slide.ph-hero {
    min-height: auto;
    padding: 36px 24px 56px;
  }

  .ph-visual {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
  }

  .ph-badge {
    justify-self: center;
    max-width: 300px;
    padding-left: 0;
    order: 2;
  }

  .ph-stage {
    order: 1;
    min-height: 380px;
    max-width: 300px;
  }

  .ph-product {
    max-height: 380px;
  }

  .ph-bullets {
    order: 3;
    justify-self: center;
    max-width: 340px;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .hs-slide.ph-hero {
    padding: 28px 18px 48px;
    display: flex;
  }

  .ph-headline {
    font-size: 2.125rem;
  }

  .ph-sub {
    font-size: 0.9375rem;
    margin-bottom: 22px;
  }

  .ph-stage {
    min-height: 300px;
    max-width: 240px;
  }

  .ph-product {
    max-height: 300px;
  }

  .ph-arc {
    width: 150%;
  }
}
/* === End: layout/product-hero.css === */

/* === Start: layout/mega-menu.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — MEGA MENU (mega-menu.css)
   Clean editorial browse panel. Hidden below 1100px (mobile drawer takes over).
   ========================================================================== */

/* ── Motion tokens (scoped to mega menu) ── */
.megamenu,
.megamenu-scrim {
  --mm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mm-duration: 250ms;
  --mm-duration-fast: 180ms;
}

/* ── OUTER WRAPPER (open/close choreography) ── */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 28px 24px;
  opacity: 0;
  transform: translateY(10px);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity var(--mm-duration) var(--mm-ease),
    transform var(--mm-duration) var(--mm-ease);
}

.megamenu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.megamenu[hidden] {
  display: none;
}

/* ── PANEL ── */
.megamenu__panel {
  padding: 28px 32px 26px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(31, 31, 31, 0.1));
  border-radius: 16px;
  box-shadow:
    0 4px 16px rgba(20, 16, 14, 0.05),
    0 20px 48px -16px rgba(20, 16, 14, 0.18);
}

.megamenu .unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── BACKDROP SCRIM ── */
.megamenu-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 16, 14, 0.4);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity var(--mm-duration) var(--mm-ease);
}

.megamenu-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.megamenu-scrim[hidden] {
  display: none;
}

/* ── LEVEL 1 TABS ── */
.megamenu__tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, rgba(31, 31, 31, 0.08));
}

.megamenu__tab {
  position: relative;
  padding: 0 0 10px;
  margin-bottom: -15px;
  background: none;
  border: none;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-secondary, #4c4c4c);
  cursor: pointer;
  transition: color var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary, #d31145);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__tab:hover {
  color: var(--color-text-primary);
}

.megamenu__tab:hover::after {
  transform: scaleX(0.4);
}

.megamenu__tab.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.megamenu__tab.is-active::after {
  transform: scaleX(1);
}

.megamenu__tab:focus-visible {
  outline: 2px solid var(--color-primary, #d31145);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── TAB PANELS ── */
.megamenu__tabpanel[hidden] {
  display: none;
}

.megamenu__layout {
  display: grid;
  grid-template-columns: minmax(160px, 180px) 1fr;
  gap: 36px;
  align-items: start;
}

/* ── LEVEL 2 RAIL ── */
.megamenu__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.megamenu__rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--color-text-secondary, #4c4c4c);
  cursor: pointer;
  transition:
    color var(--mm-duration-fast) var(--mm-ease),
    background-color var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__rail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 16px;
  background: var(--color-primary);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform var(--mm-duration-fast) var(--mm-ease);
  border-radius: 1px;
}

.megamenu__rail-item:hover {
  color: var(--color-text-primary);
  background: var(--color-bg, #fdfbf7);
}

.megamenu__rail-item:hover::before {
  transform: translateY(-50%) scaleY(0.55);
}

.megamenu__rail-item.is-active {
  color: var(--color-primary);
  font-weight: 600;
  background: rgba(211, 17, 69, 0.06);
}

.megamenu__rail-item.is-active::before {
  transform: translateY(-50%) scaleY(1);
}

.megamenu__rail-item:focus-visible {
  outline: 2px solid var(--color-primary, #d31145);
  outline-offset: 2px;
}

.megamenu__rail-label {
  flex: 1;
  min-width: 0;
}

.megamenu__rail-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--mm-duration-fast) var(--mm-ease),
    transform var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__rail-item:hover .megamenu__rail-chevron,
.megamenu__rail-item.is-active .megamenu__rail-chevron {
  opacity: 0.75;
  transform: translateX(0);
}

/* ── PRODUCT GRID ── */
.megamenu__group[hidden] {
  display: none;
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 14px;
  justify-content: start;
}

.megamenu__grid[data-count="1"],
.megamenu__grid[data-count="2"],
.megamenu__grid[data-count="3"],
.megamenu__grid[data-count="4"] {
  grid-template-columns: repeat(auto-fill, minmax(148px, 168px));
}

.megamenu__card {
  list-style: none;
  min-width: 0;
}

.megamenu__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__card-link:hover,
.megamenu__card-link:focus-visible {
  opacity: 1;
}

.megamenu__card-link:focus-visible {
  outline: 2px solid var(--color-primary, #d31145);
  outline-offset: 3px;
  border-radius: 6px;
}

.megamenu__card-media {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(31, 31, 31, 0.08));
  background: var(--color-bg, #fdfbf7);
  aspect-ratio: 1 / 1;
}

.megamenu__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--mm-ease);
}

.megamenu__card-link:hover .megamenu__card-media img,
.megamenu__card-link:focus-visible .megamenu__card-media img {
  transform: scale(1.04);
}

.megamenu__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  padding: 0;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--color-text-primary);
  transition: color var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__card-link:hover .megamenu__card-title,
.megamenu__card-link:focus-visible .megamenu__card-title {
  color: var(--color-primary);
}

/* ── VIEW ALL CTA ── */
.megamenu__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.megamenu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__view-all svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--mm-duration-fast) var(--mm-ease);
}

.megamenu__view-all:hover,
.megamenu__view-all:focus-visible {
  color: var(--color-primary-hover, #a00c33);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.megamenu__view-all:hover svg,
.megamenu__view-all:focus-visible svg {
  transform: translateX(3px);
}

.megamenu__view-all:focus-visible {
  outline: 2px solid var(--color-primary, #d31145);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1300px) {
  .megamenu__layout {
    gap: 28px;
  }

  .megamenu__panel {
    padding: 24px 26px 22px;
  }

  .megamenu__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 1100px) {
  .megamenu,
  .megamenu-scrim {
    display: none !important;
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .megamenu,
  .megamenu-scrim,
  .megamenu__tab,
  .megamenu__tab::after,
  .megamenu__rail-item,
  .megamenu__rail-item::before,
  .megamenu__rail-chevron,
  .megamenu__card-link,
  .megamenu__card-media img,
  .megamenu__card-title,
  .megamenu__view-all,
  .megamenu__view-all svg {
    transition-duration: 0.01ms !important;
  }

  .megamenu {
    transform: none;
  }

  .megamenu.is-open {
    transform: none;
  }

  .megamenu__card-link:hover .megamenu__card-media img,
  .megamenu__card-link:focus-visible .megamenu__card-media img {
    transform: none;
  }
}
/* === End: layout/mega-menu.css === */

/* === Start: layout/utility-icons.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ECOMMERCE UTILITY ICONS (utility-icons.css)
   Outline utility icons (Search, Account, Cart) with tooltips,
   hover micro-interactions, badge counters, and accessibility targets.
   ========================================================================== */

.nav-utilities {
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.utility-icon:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}

/* Account moves into the navigation drawer on mobile, keeping the bar to
   hamburger / logo / search / cart. */
@media (max-width: 1100px) {
  .utility-icon--desktop {
    display: none;
  }
}

.utility-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s ease;
}

/* Badge count for Cart / Wishlist */
.utility-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--color-surface);
  transform-origin: center center;
}

.utility-badge.is-bump {
  animation: utility-badge-bump 0.42s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes utility-badge-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .utility-badge.is-bump {
    animation: none;
  }
}

/* Tooltip on hover */
.utility-icon::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 1010;
}

.utility-icon:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Slide-down Search Bar Overlay */
.search-bar-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: 16px 48px;
  display: none;
  z-index: 1005;
}

.search-bar-overlay.is-active {
  display: block;
  animation: slide-down-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.search-bar-inner {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar-input {
  width: 100%;
  padding: 12px 44px 12px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-bar-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.12);
}

.search-bar-close {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666666;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.search-bar-close:hover {
  color: var(--color-text-primary);
}

@keyframes slide-down-fade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === End: layout/utility-icons.css === */

/* === Start: layout/nav-drawer.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — MOBILE NAV DRAWER (nav-drawer.css)
   Slide-in drawer with nested accordions and horizontally scrolling
   product carousels. Shown at 1100px and below.
   ========================================================================== */

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(31, 31, 31, 0.35);
  opacity: 0;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer-overlay.is-open {
  opacity: 1;
}

.nav-drawer-overlay[hidden],
.nav-drawer[hidden] {
  display: none;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: min(400px, 88vw);
  background: var(--color-bg);
  box-shadow: 0 0 60px -12px rgba(0, 0, 0, 0.4);
  transform: translateX(-100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer .unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── HEAD ── */
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.nav-drawer__logo img {
  display: block;
  width: auto;
  height: 42px;
}

.nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.nav-drawer__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.nav-drawer__close:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── BODY ── */
.nav-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.nav-drawer__item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.nav-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 12px;
}

.nav-drawer__row--nested {
  padding-right: 4px;
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  padding: 16px 20px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav-drawer__link:hover,
.nav-drawer__link:focus-visible {
  color: var(--color-primary);
}

.nav-drawer__link-arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
}

.nav-drawer__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: var(--color-surface-warm);
  border: none;
  border-radius: 50%;
  color: var(--color-text-primary);
  cursor: pointer;
  transition:
    background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer__expand:active {
  transform: scale(0.96);
}

.nav-drawer__expand:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.nav-drawer__expand--sm {
  width: 32px;
  height: 32px;
}

/* Plus that becomes a minus, drawn with pseudo-elements. */
.nav-drawer__expand-icon {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}

.nav-drawer__expand-icon::before,
.nav-drawer__expand-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer__expand-icon::after {
  transform: rotate(90deg);
}

.nav-drawer__expand.is-open .nav-drawer__expand-icon::after {
  transform: rotate(0deg);
}

/* ── ACCORDION PANELS ── */
.nav-drawer__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer__panel[hidden] {
  display: none;
}

.nav-drawer__section {
  padding: 4px 0 12px;
}

.nav-drawer__section-title {
  margin: 0;
  padding: 12px 20px 8px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.nav-drawer__sublink {
  display: block;
  flex: 1;
  padding: 14px 20px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-secondary, #4c4c4c);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer__sublink:hover,
.nav-drawer__sublink:focus-visible {
  color: var(--color-primary);
}

/* ── PRODUCT CAROUSEL ── */
.nav-drawer__carousel {
  display: flex;
  gap: 12px;
  padding: 4px 20px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav-drawer__carousel::-webkit-scrollbar {
  display: none;
}

.nav-drawer__card {
  flex: 0 0 120px;
  scroll-snap-align: start;
}

.nav-drawer__card-link {
  display: block;
  padding: 8px;
  border: 1px solid rgba(31, 31, 31, 0.05);
  border-radius: 14px;
  background: rgba(253, 251, 247, 0.5);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer__card-link:active {
  background: var(--color-surface, #fff);
  border-color: rgba(211, 17, 69, 0.12);
}

.nav-drawer__card-link img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--color-surface-warm);
}

.nav-drawer__card-title {
  display: block;
  margin-top: 8px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.nav-drawer__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 20px 16px;
  padding: 9px 16px;
  border: 1px solid rgba(211, 17, 69, 0.15);
  border-radius: 999px;
  background: rgba(253, 231, 237, 0.4);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition:
    background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer__view-all:active {
  background: rgba(253, 231, 237, 0.75);
}

.nav-drawer__view-all svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-drawer__view-all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── FOOT ── */
.nav-drawer__foot {
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.nav-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.nav-drawer__cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-drawer__cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.nav-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  text-align: center;
}

.nav-drawer__contact a {
  font-size: 13px;
  color: var(--color-text-secondary, #4c4c4c);
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav-drawer__contact a:hover {
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer-overlay,
  .nav-drawer__panel,
  .nav-drawer__expand,
  .nav-drawer__expand-icon::before,
  .nav-drawer__expand-icon::after,
  .nav-drawer__card-link,
  .nav-drawer__view-all {
    transition-duration: 0.01ms;
  }
}
/* === End: layout/nav-drawer.css === */

/* === Start: layout/footer.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — FOOTER LAYOUT STYLESHEET (footer.css)
   Phase 9 Header & Footer Refinement: Dark Gray Surface (var(--color-text-primary)),
   Healthcare Teal Brand Accents (var(--color-primary)), Outfit Section Headings, Inter Links,
   16px Office Card Containers, and 999px Pill Certificate Tags.
   ========================================================================== */

/* ── SHELL ── */
.nf-footer {
  background: var(--surface-inverse, var(--color-text-primary));
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body, 'Inter', sans-serif);
  border-top: 1px solid var(--border-primary, var(--color-border));
}

/* ── TOP BAND ── */
.nf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px var(--space-8, 56px) 36px;
  flex-wrap: wrap;
  gap: 24px;
}

.nf-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nf-logo {
  display: inline-block;
}

.nf-tagline {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ── SOCIAL ── */
.nf-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-social__link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button, 999px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  flex-shrink: 0;
  text-decoration: none;
}

.nf-social__link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nf-social__link:hover {
  background: var(--brand-primary, var(--color-primary));
  border-color: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  transform: translateY(-1px);
}

/* ── DIVIDER ── */
.nf-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 var(--space-8, 56px);
}

/* ── MAIN GRID ── */
.nf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
  gap: 32px;
  padding: 48px var(--space-8, 56px);
}

.nf-col {
  padding-right: 24px;
}

.nf-col__label {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-primary, var(--color-primary));
  margin-bottom: 20px;
}

/* ── OFFICES ── */
.nf-office {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card, 16px);
  padding: 16px;
}

.nf-office__name {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-surface);
  margin-bottom: 6px;
}

.nf-office__addr {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* ── CONTACT ── */
.nf-contact-group {
  margin-bottom: 20px;
}

.nf-contact-group__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.nf-phones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.nf-contact-group__item {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color var(--duration-fast, 150ms);
  white-space: normal;
  overflow-wrap: anywhere;
}

.nf-contact-group__item:hover {
  color: #99F6E4;
}

.nf-email-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── NAV LINKS ── */
.nf-nav-link {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color var(--duration-fast, 150ms);
}

.nf-nav-link:hover {
  color: var(--color-surface);
}

/* ── CERT ROW ── */
.nf-certs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px var(--space-8, 56px);
}

.nf-certs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nf-cert-tag {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-button, 999px);
  padding: 6px 16px;
  transition: all var(--duration-fast, 150ms);
}

.nf-cert-tag:hover {
  border-color: var(--brand-primary, var(--color-primary));
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
}

/* ── BOTTOM BAR ── */
.nf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--space-8, 56px) 36px;
  flex-wrap: wrap;
  gap: 16px;
}

.nf-copyright {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.nf-policy-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nf-policy-link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms);
}

.nf-policy-link:hover {
  color: var(--color-surface);
}

/* ── RESPONSIVE TABLET BREAKPOINT (<= 960px) ── */
@media (max-width: 960px) {
  .nf-top,
  .nf-grid,
  .nf-certs-row,
  .nf-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nf-divider {
    margin: 0 20px;
  }
  .nf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .nf-phones-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .nf-grid {
    grid-template-columns: 1fr;
  }
}
/* === End: layout/footer.css === */

/* === Start: layout/shop-layout.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — SHOP LAYOUT & CATALOG STYLESHEET (shop-layout.css)
   Phase 5 Shop & Product Experience: 16px Rounded Cards, Generous Whitespace,
   Outfit/Inter Typography, Healthcare Teal Accents, and 999px Pill Filters.
   ========================================================================== */

.shop-layout {
  max-width: 1280px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-6, 32px);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8, 36px);
}

@media (max-width: 992px) {
  .shop-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4, 20px);
  }

  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 88vw);
    max-width: 100%;
    z-index: calc(var(--z-modal, 1200) + 2);
    margin: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform var(--duration-drawer, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
    overflow-y: auto;
    height: 100%;
    box-shadow: var(--shadow-drawer, 6px 0 24px rgba(31, 41, 55, 0.12));
  }

  .shop-sidebar.is-open {
    transform: translateX(0);
  }

  .shop-filters-toggle {
    display: inline-flex;
  }
}

/* Sidebar Filters */
.shop-sidebar {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 32px);
  height: fit-content;
  box-shadow: var(--shadow-xs);
}

.filter-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-body, 16px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-4, 16px);
  padding-bottom: var(--space-2, 10px);
  border-bottom: 2px solid var(--border-primary, var(--color-border));
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.02em);
}

.filter-group {
  margin-bottom: var(--space-6, 28px);
}

.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-item {
  margin-bottom: var(--space-2, 10px);
}

.filter-link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  transition: all var(--duration-fast, 150ms);
}

.filter-link:hover,
.filter-link.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  font-weight: 600;
}

.filter-badge {
  background: var(--surface-primary, var(--color-bg));
  color: var(--text-secondary, var(--color-text-secondary));
  font-size: var(--font-size-caption, 12px);
  padding: 2px 10px;
  border-radius: var(--radius-button, 999px);
  border: 1px solid var(--border-primary, var(--color-border));
}

/* Subcategory Pills Filter */
.subcat-pills {
  display: flex;
  gap: var(--space-2, 10px);
  flex-wrap: wrap;
  margin-bottom: var(--space-5, 24px);
}

.subcat-pill {
  padding: 8px 18px;
  border-radius: var(--radius-button, 999px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  color: var(--text-secondary, var(--color-text-secondary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  box-shadow: var(--shadow-xs);
}

.subcat-pill.active,
.subcat-pill:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* Shop Toolbar Bar */
.shop-toolbar {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-4, 18px) var(--space-6, 28px);
  margin-bottom: var(--space-6, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 18px);
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}

.shop-search-form {
  display: flex;
  gap: var(--space-2, 8px);
  flex: 1;
  max-width: 420px;
}

.shop-search-input {
  flex: 1;
  padding: 10px 18px;
  border: 1.5px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-input, 14px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-primary, var(--color-text-primary));
  background: var(--surface-card, var(--color-surface));
  transition: all var(--duration-fast, 150ms);
}

.shop-search-input:focus {
  border-color: var(--brand-primary, var(--color-primary));
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
}

.shop-search-btn {
  padding: 10px 22px;
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: var(--font-size-small, 14px);
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

.shop-search-btn:hover {
  background: var(--brand-primary-hover, var(--color-primary-hover));
}

.shop-sort-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-sort-form .brand-select {
  flex: 0 1 auto;
}

@media (max-width: 640px) {
  .shop-sort-form {
    width: 100%;
  }

  .shop-sort-form .brand-select {
    flex: 1 1 160px;
  }
}

.shop-sort-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 500;
  color: var(--text-secondary, var(--color-text-secondary));
}

.shop-sort-select {
  padding: 8px 36px 8px 16px;
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-input, 14px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-primary, var(--color-text-primary));
  background-color: var(--surface-card, var(--color-surface));
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

.shop-sort-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Product Cards Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-6, 28px);
  margin-bottom: var(--space-8, 48px);
}

.product-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--duration-normal, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  position: relative;
  box-shadow: var(--shadow-xs);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 16px 40px -20px rgba(31, 31, 31, 0.22));
  border-color: var(--color-primary-muted);
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--radius-button, 999px);
  z-index: 2;
  box-shadow: var(--shadow-xs);
}

.product-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-primary, var(--color-bg));
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.product-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.product-card:hover .product-image-wrap img {
  transform: scale(1.04);
}

.product-info {
  padding: var(--space-5, 24px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-cat {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1, 6px);
}

.product-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h4, 18px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-2, 8px);
  line-height: var(--leading-snug, 1.3);
}

.product-title a {
  color: inherit;
  text-decoration: none;
}

.product-title a:hover {
  color: var(--color-primary);
}

.product-summary {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: var(--space-4, 16px);
  line-height: var(--leading-normal, 1.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price-row {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding-top: var(--space-3, 14px);
  border-top: 1px solid var(--border-primary, var(--color-border));
}

.product-price-row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.product-price {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary, #d31145);
  line-height: 1.2;
}

.product-old-price {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, var(--color-text-secondary));
  text-decoration: line-through;
  margin-left: 0;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-actions-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.btn-add-cart-sm,
.btn-view-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 12px;
  font-weight: 600;
}

.btn-add-cart-sm {
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) var(--ease-default),
    transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--duration-fast, 150ms) var(--ease-default);
}

.btn-add-cart-sm:hover {
  background: var(--color-primary-hover);
}

.btn-add-cart-sm:active {
  transform: scale(0.97);
}

.btn-add-cart-sm.is-adding {
  transform: scale(0.97);
  box-shadow: 0 0 0 3px var(--color-primary-light, #fde7ed);
}

.product-stock {
  display: block;
  margin-top: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success-text, #1c5434);
  line-height: 1.2;
}

@media (max-width: 640px) {
  .btn-add-cart-sm,
  .btn-view-product {
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  .product-price-row {
    min-height: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .product-price-row > div:first-child {
    flex: 1 1 auto;
  }

  .product-price-row .btn-add-cart-sm,
  .product-price-row .btn-view-product,
  .product-price-row .btn-out-of-stock-sm {
    flex: 0 0 auto;
  }

  .filter-link {
    min-height: 44px;
    padding: 10px 12px;
  }

  .subcat-pill--sm {
    min-height: 40px;
    padding: 10px 14px;
  }

  .shop-sidebar__close {
    width: 44px;
    height: 44px;
  }
}

.btn-out-of-stock-sm,
.btn-add-cart-sm:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: #94a3b8;
  pointer-events: none;
}

.btn-view-product {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted);
  text-decoration: none;
  transition: all var(--duration-fast, 150ms);
}

.btn-view-product:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

/* Pagination Wrapper */
.pagination-wrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-6, 28px);
}

.page-btn {
  padding: 10px 18px;
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-button, 999px);
  background: var(--surface-card, var(--color-surface));
  color: var(--text-primary, var(--color-text-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: var(--font-size-small, 14px);
  text-decoration: none;
  transition: all var(--duration-fast, 150ms);
}

.page-btn.active,
.page-btn:hover {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

/* Price Range Sidebar Filter Box */
.filter-group--bordered {
  margin-top: var(--space-6, 28px);
  padding-top: var(--space-5, 20px);
  border-top: 1px solid var(--border-primary, var(--color-border));
}

.price-range-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.price-input {
  width: 50%;
  padding: 10px 14px;
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-input, 14px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  background: var(--surface-card, var(--color-surface));
  color: var(--text-primary, var(--color-text-primary));
}

.price-range-sep {
  color: var(--text-secondary, var(--color-text-secondary));
}

.btn-price-filter {
  width: 100%;
  padding: 12px;
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: var(--font-size-small, 14px);
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

.btn-price-filter:hover {
  background: var(--brand-primary-hover, var(--color-primary-hover));
}

.price-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.subcat-pill--sm {
  font-size: var(--font-size-caption, 12px);
  padding: 6px 12px;
}

/* Empty Catalog State Card */
.catalog-empty-card {
  grid-column: 1 / -1;
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: 60px 24px;
  text-align: center;
}

.catalog-empty-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: 8px;
  font-size: var(--font-size-h3, 24px);
}

.catalog-empty-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-secondary, var(--color-text-secondary));
  font-size: var(--font-size-small, 14px);
}

.catalog-empty-reset {
  display: inline-block;
  margin-top: 18px;
  color: var(--brand-primary, var(--color-primary));
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Mobile filters toggle / overlay ── */
.shop-filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border-primary, var(--color-border));
  background: var(--surface-card, var(--color-surface));
  color: var(--text-primary, var(--color-text-primary));
  border-radius: var(--radius-button, 999px);
  padding: 10px 16px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.shop-filters-overlay {
  display: none;
}

@media (max-width: 992px) {
  .shop-filters-toggle {
    display: inline-flex;
  }

  .shop-filters-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 55, 0.45);
    z-index: calc(var(--z-modal, 1200) + 1);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration-drawer, 250ms) var(--ease-default),
      visibility var(--duration-drawer, 250ms) var(--ease-default);
  }

  .shop-filters-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .shop-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .shop-sidebar__close {
    border: 0;
    background: var(--color-primary-light, #fde7ed);
    color: var(--color-primary);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
}

@media (min-width: 993px) {
  .shop-sidebar__head {
    display: none;
  }
}

/* Active filter chips */
.shop-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.shop-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-primary-light, #fde7ed);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted, #e68aa2);
  text-decoration: none;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
}

.shop-filter-chip:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

.shop-filter-chip--clear {
  background: var(--surface-card, var(--color-surface));
  color: var(--text-secondary, var(--color-text-secondary));
  border-color: var(--border-primary, var(--color-border));
}

.shop-filter-chip__x {
  font-size: 14px;
  line-height: 1;
}

/* Skeleton cards */
.product-card--skeleton {
  pointer-events: none;
  min-height: 320px;
}

.skeleton-block {
  background: linear-gradient(90deg, #f0ebe4 25%, #f7f3ee 50%, #f0ebe4 75%);
  background-size: 200% 100%;
  animation: shop-skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 10px;
}

.skeleton-block--image {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 0;
}

.skeleton-block--line {
  height: 14px;
  margin-bottom: 10px;
}

.skeleton-block--sm { width: 40%; }
.skeleton-block--md { width: 70%; }

.shop-layout--reduce-motion .skeleton-block {
  animation: none;
  background: #f0ebe4;
}

@keyframes shop-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.catalog-empty-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.catalog-empty-help {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--text-secondary, var(--color-text-secondary));
}

.catalog-empty-help a {
  color: var(--color-primary);
  font-weight: 600;
}
/* === End: layout/shop-layout.css === */

/* === Start: layout/product-detail.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — PRODUCT DETAIL LAYOUT STYLESHEET (product-detail.css)
   Phase 5 Shop & Product Experience: Crisp Gallery Display, 16px Rounded Cards,
   Outfit Headings, Inter Body, Pill CTAs, and Refined Specifications Card.
   ========================================================================== */

.detail-container {
  max-width: 1280px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-6, 32px);
}

.detail-breadcrumbs {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: var(--space-7, 28px);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

.detail-breadcrumbs a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.detail-breadcrumbs a:hover {
  text-decoration: underline;
}

.detail-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9, 48px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-8, 48px);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-9, 48px);
}

@media (max-width: 900px) {
  .detail-main-grid {
    grid-template-columns: 1fr;
    padding: var(--space-6, 28px);
    gap: var(--space-8, 32px);
  }
}

@media (max-width: 640px) {
  .detail-container {
    margin: var(--space-5, 24px) auto;
    padding: 0 var(--space-3, 16px);
  }

  .detail-main-grid {
    padding: var(--space-4, 18px);
    gap: var(--space-5, 24px);
    border-radius: 12px;
  }

  .main-img-box {
    padding: 16px;
  }

  .detail-title {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: var(--space-2, 10px);
  }

  .detail-meta-row {
    flex-wrap: wrap;
    gap: var(--space-2, 10px);
    margin-bottom: var(--space-4, 16px);
  }

  .price-box {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: var(--space-4, 16px);
  }

  .price-current {
    font-size: clamp(26px, 8vw, 32px);
  }

  .price-old {
    font-size: 15px;
  }

  .detail-summary {
    font-size: 15px;
    margin-bottom: var(--space-5, 24px);
  }

  .qty-action-row {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: var(--space-5, 24px);
  }

  .qty-label {
    width: 100%;
  }

  .btn-detail-add-cart {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 48px;
    padding: 14px 20px;
    width: 100%;
  }
}

/* Gallery Module */
.gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

.main-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 28px;
}

.main-img-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.main-img-box:hover img {
  transform: scale(1.03);
}

.thumbs-list {
  display: flex;
  gap: var(--space-3, 12px);
  overflow-x: auto;
  padding-bottom: 6px;
}

.thumb-btn {
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-input, 14px);
  border: 2px solid var(--border-primary, var(--color-border));
  background: var(--surface-primary, var(--color-bg));
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: all var(--duration-fast, 150ms);
}

.thumb-btn.active,
.thumb-btn:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.15);
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Product Info Module */
.detail-info {
  display: flex;
  flex-direction: column;
}

.detail-brand {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-2, 8px);
}

.detail-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h2, 32px);
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  line-height: var(--leading-tight, 1.2);
  margin-bottom: var(--space-3, 14px);
}

.detail-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: var(--space-5, 24px);
  padding-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.stock-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--font-size-caption, 12px);
  padding: 4px 12px;
  border-radius: var(--radius-button, 999px);
  text-transform: uppercase;
}

.stock-in {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success, var(--color-success));
  border: 1px solid var(--feedback-success-border, #86EFAC);
}

.stock-out {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error, var(--color-danger));
  border: 1px solid var(--feedback-error-border, #FCA5A5);
}

.price-box {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 14px);
  margin-bottom: var(--space-5, 24px);
}

.price-current {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}

.price-old {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-body-lg, 18px);
  color: var(--text-secondary, var(--color-text-secondary));
  text-decoration: line-through;
}

.price-discount {
  background: #FEF2F2;
  color: var(--feedback-error, var(--color-danger));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-button, 999px);
  border: 1px solid #FCA5A5;
}

.detail-summary {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-body, 16px);
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: var(--leading-relaxed, 1.6);
  margin-bottom: var(--space-6, 28px);
}

/* Quantity Row */
.qty-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-4, 18px);
  margin-bottom: var(--space-7, 32px);
}

.qty-label {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary, var(--color-text-primary));
}

.qty-box {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-button, 999px);
  overflow: hidden;
  background: var(--surface-card, var(--color-surface));
}

.qty-btn {
  width: 40px;
  height: 40px;
  background: var(--surface-primary, var(--color-bg));
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  cursor: pointer;
  transition: background var(--duration-fast, 150ms);
}

.qty-btn:hover {
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
}

.qty-input {
  width: 54px;
  height: 40px;
  border: none;
  text-align: center;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  background: transparent;
}

.sku-code {
  color: var(--color-primary);
  font-weight: 600;
}

.btn-detail-add-cart {
  padding: 14px 32px;
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}

.btn-detail-add-cart:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-detail-add-cart:active {
  transform: scale(0.97);
}

.btn-detail-add-cart.is-adding {
  transform: scale(0.97);
  box-shadow: 0 0 0 3px var(--color-primary-light, #fde7ed);
}

.btn-out-of-stock {
  padding: 14px 28px;
  background: var(--color-border);
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 14px;
  cursor: not-allowed;
}

/* Specifications Card */
.spec-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-8, 48px);
  margin-bottom: var(--space-9, 48px);
  box-shadow: var(--shadow-xs);
}

.spec-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 24px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-4, 18px);
  padding-bottom: var(--space-3, 14px);
  border-bottom: 2px solid var(--border-primary, var(--color-border));
}

.spec-body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-body, 16px);
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: var(--leading-relaxed, 1.65);
  white-space: pre-line;
}

/* Related Products Grid */
.related-section {
  margin-bottom: 64px;
}

.related-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 24px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-6, 28px);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-5, 24px);
}

.related-product-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  transition: all var(--duration-normal, 250ms) var(--ease-spring);
  box-shadow: var(--shadow-xs);
}

.related-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary, var(--color-primary));
}

.related-img-wrap {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-primary, var(--color-bg));
  text-decoration: none;
}

.related-img-wrap img {
  max-height: 82%;
  max-width: 82%;
  object-fit: contain;
}

.related-info {
  padding: var(--space-4, 18px);
}

.related-cat {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  color: var(--brand-primary, var(--color-primary));
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.related-product-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h4, 18px);
  font-weight: 600;
  margin-bottom: 8px;
}

.related-product-title a {
  color: var(--text-primary, var(--color-text-primary));
  text-decoration: none;
}

.related-product-title a:hover {
  color: var(--brand-primary, var(--color-primary));
}

.related-price {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}
/* === End: layout/product-detail.css === */

/* === Start: layout/cart-layout.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — CART LAYOUT STYLESHEET (cart-layout.css)
   Phase 6 Checkout UX: Clean Card Containers, Crisp Outfit/Inter Typography,
   Trust Badges, Healthcare Teal Accents, and Streamlined Order Summaries.
   ========================================================================== */

.cart-layout {
  max-width: 1240px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-6, 32px);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-8, 36px);
}

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4, 20px);
  }
}

.cart-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.cart-table th {
  background: var(--surface-primary, var(--color-bg));
  padding: var(--space-4, 16px) var(--space-5, 24px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, var(--color-text-secondary));
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.cart-table td {
  padding: var(--space-5, 24px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  vertical-align: middle;
  font-family: var(--font-body, 'Inter', sans-serif);
}

.cart-table tr:last-child td {
  border-bottom: none;
}

.cart-prod-cell {
  display: flex;
  align-items: center;
  gap: var(--space-4, 18px);
}

.cart-prod-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-input, 14px);
  object-fit: contain;
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  flex-shrink: 0;
  padding: 4px;
}

.cart-prod-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-body, 16px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: 4px;
}

.cart-prod-title a {
  color: inherit;
  text-decoration: none;
}

.cart-prod-title a:hover {
  color: var(--brand-primary, var(--color-primary));
}

.cart-qty-box {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-button, 999px);
  overflow: hidden;
  background: var(--surface-card, var(--color-surface));
}

.cart-qty-box button {
  width: 34px;
  height: 34px;
  background: var(--surface-primary, var(--color-bg));
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-primary, var(--color-text-primary));
  transition: all var(--duration-fast, 150ms);
}

.cart-qty-box button:hover {
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
}

.cart-qty-box span {
  padding: 0 var(--space-3, 14px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
}

.cart-del-btn {
  background: none;
  border: none;
  color: var(--text-secondary, var(--color-text-secondary));
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  transition: color var(--duration-fast, 150ms);
}

.cart-del-btn:hover {
  color: var(--feedback-error, var(--color-danger));
}

/* Order Summary Box */
.summary-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 28px);
  height: fit-content;
  box-shadow: var(--shadow-xs);
}

.summary-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 20px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-5, 20px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 2px solid var(--border-primary, var(--color-border));
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: var(--space-3, 14px);
}

.summary-row.total-row {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  margin-top: var(--space-4, 18px);
  padding-top: var(--space-4, 18px);
  border-top: 1px solid var(--border-primary, var(--color-border));
}

.summary-row.total-row strong {
  color: var(--brand-primary, var(--color-primary));
}

.btn-checkout {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-top: var(--space-6, 24px);
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}

.btn-checkout:hover {
  background: var(--brand-primary-hover, var(--color-primary-hover));
  color: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Trust Badges Bar */
.cart-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-primary, var(--color-border));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Empty Cart State */
.cart-empty-wrapper {
  max-width: 640px;
  margin: var(--space-9, 60px) auto;
  text-align: center;
  padding: var(--space-8, 48px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 640px) {
  .cart-layout {
    padding: 0 var(--space-3, 16px);
    margin: var(--space-5, 24px) auto;
  }

  .cart-empty-wrapper {
    margin: var(--space-6, 32px) auto;
    padding: var(--space-5, 24px);
  }

  .cart-card > div:first-child {
    overflow: visible;
  }

  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td {
    display: block;
    width: 100%;
  }

  .cart-table thead {
    display: none;
  }

  .cart-table tr {
    position: relative;
    padding: 16px 44px 16px 0;
    border-bottom: 1px solid var(--border-primary, var(--color-border));
  }

  .cart-table tr:last-child {
    border-bottom: none;
  }

  .cart-table td {
    padding: 6px 0;
    border: none;
    text-align: left;
  }

  .cart-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, var(--color-text-secondary));
    margin-bottom: 4px;
  }

  .cart-table td[data-label=""]::before,
  .cart-table td:not([data-label])::before {
    display: none;
  }

  .cart-prod-cell {
    align-items: flex-start;
  }

  .cart-prod-thumb {
    width: 64px;
    height: 64px;
  }

  .cart-qty-box button {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .cart-qty-box span {
    min-width: 28px;
    text-align: center;
    padding: 0 12px;
  }

  .cart-del-btn {
    position: absolute;
    top: 12px;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-card > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 16px;
  }

  .cart-clear-btn {
    width: 100%;
    min-height: 44px;
  }
}
/* === End: layout/cart-layout.css === */

/* === Start: layout/checkout-layout.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — CHECKOUT LAYOUT STYLESHEET (checkout-layout.css)
   Phase 6 Checkout UX: Reduced Clutter, Secure Payment Card Selection,
   Structured Order Summaries, Outfit/Inter Typography, and Pill Actions.
   ========================================================================== */

.checkout-layout {
  max-width: 1240px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-6, 32px);
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-8, 36px);
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4, 20px);
  }
}

.form-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-8, 36px);
  box-shadow: var(--shadow-xs);
}

.form-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 22px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-6, 24px);
  padding-bottom: var(--space-3, 14px);
  border-bottom: 2px solid var(--border-primary, var(--color-border));
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 18px);
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-group {
  margin-bottom: 20px;
}

.form-group--half {
  max-width: 50%;
}

@media (max-width: 640px) {
  .form-group--half {
    max-width: 100%;
  }
}

.form-label {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-input, 14px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-primary, var(--color-text-primary));
  background: var(--surface-card, var(--color-surface));
  transition: all var(--duration-fast, 150ms);
}

.form-input:focus {
  border-color: var(--brand-primary, var(--color-primary));
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
}

.payment-option {
  border: 1.5px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-4, 20px);
  margin-bottom: var(--space-3, 14px);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 14px);
  cursor: pointer;
  background: var(--surface-card, var(--color-surface));
  transition: all var(--duration-fast, 150ms);
}

.payment-option:hover,
.payment-option.active {
  border-color: var(--brand-primary, var(--color-primary));
  background: var(--teal-50, #F0FDFA);
  box-shadow: var(--shadow-xs);
}

.payment-option input {
  margin-top: 4px;
  accent-color: var(--brand-primary, var(--color-primary));
}

/* Order Summary Box */
.summary-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 28px);
  height: fit-content;
  box-shadow: var(--shadow-xs);
}

.summary-item-list {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: var(--space-5, 20px);
  padding-right: 4px;
}

.summary-item {
  display: flex;
  gap: var(--space-3, 14px);
  margin-bottom: var(--space-3, 14px);
  align-items: center;
}

.summary-item-img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-input, 14px);
  object-fit: contain;
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  flex-shrink: 0;
  padding: 4px;
}

.summary-item-info {
  flex: 1;
  min-width: 0;
}

.summary-item-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-item-qty {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  color: var(--text-secondary, var(--color-text-secondary));
}

.summary-item-price {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-body, 15px);
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: var(--space-2, 10px);
}

.summary-row.total-row {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  margin-top: var(--space-4, 18px);
  padding-top: var(--space-4, 18px);
  border-top: 1px solid var(--border-primary, var(--color-border));
}

.btn-place-order {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  margin-top: var(--space-5, 24px);
  box-shadow: var(--shadow-sm);
}

.btn-place-order:hover {
  background: var(--brand-primary-hover, var(--color-primary-hover));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .summary-card {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--space-4, 16px);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(31, 41, 55, 0.08);
  }

  .form-card {
    padding: var(--space-5, 24px);
  }
}

@media (max-width: 480px) {
  .checkout-layout {
    padding: 0 var(--space-3, 16px);
    margin: var(--space-5, 24px) auto;
  }

  .btn-place-order {
    min-height: 52px;
    font-size: 15px;
  }
}

/* Security Trust Box */
.checkout-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
}
/* === End: layout/checkout-layout.css === */

/* === Start: layout/receipt-layout.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — RECEIPT / SUCCESS STYLESHEET (receipt-layout.css)
   Phase 6 Checkout UX: Clean Confirmation Layout, Outfit/Inter Typography,
   Status Badges, Healthcare Teal Accents, and 999px Pill Actions.
   ========================================================================== */

.receipt-container {
  max-width: 880px;
  margin: var(--space-9, 56px) auto;
  padding: 0 var(--space-6, 32px);
}

.receipt-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-8, 48px);
  box-shadow: var(--shadow-sm);
}

.receipt-header {
  text-align: center;
  margin-bottom: var(--space-8, 36px);
  padding-bottom: var(--space-6, 28px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.check-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success, var(--color-success));
  border: 1px solid var(--feedback-success-border, #86EFAC);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4, 18px);
  font-size: 36px;
  font-weight: 700;
}

.receipt-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h2, 32px);
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: var(--space-2, 8px);
}

.receipt-sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-body, 16px);
  color: var(--text-secondary, var(--color-text-secondary));
}

.receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6, 24px);
  margin-bottom: var(--space-8, 36px);
}

@media (max-width: 600px) {
  .receipt-grid {
    grid-template-columns: 1fr;
  }
}

.receipt-box {
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-5, 24px);
}

.receipt-box-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: var(--space-2, 10px);
}

.receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6, 28px);
}

.receipt-table th {
  background: var(--surface-primary, var(--color-bg));
  padding: var(--space-3, 14px) var(--space-4, 18px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary, var(--color-text-secondary));
  text-align: left;
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.receipt-table td {
  padding: var(--space-4, 16px) var(--space-4, 18px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: var(--text-primary, var(--color-text-primary));
}

.badge-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
}

.badge-pending {
  background: var(--feedback-warning-bg, #FEF3C7);
  color: var(--feedback-warning, #D97706);
  border: 1px solid var(--feedback-warning-border, #FCD34D);
}

.receipt-actions {
  display: flex;
  gap: var(--space-3, 14px);
  justify-content: center;
  margin-top: var(--space-8, 36px);
}
/* === End: layout/receipt-layout.css === */

/* === Start: layout/account-layout.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ACCOUNT & ORDERS STYLESHEET (account-layout.css)
   Phase 6 Checkout UX: Refined Customer Profile, Orders History, Stat Cards,
   Outfit/Inter Typography, Healthcare Teal Gradients, and Pill Actions.
   ========================================================================== */

.account-container,
.profile-container {
  max-width: 1200px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-6, 32px);
}

.profile-container {
  max-width: 920px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-5, 24px);
  color: var(--brand-primary, var(--color-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: var(--font-size-small, 14px);
  text-decoration: none;
  transition: all var(--duration-fast, 150ms);
}

.back-link:hover {
  color: var(--brand-primary-hover, var(--color-primary-hover));
  transform: translateX(-2px);
}

.account-banner,
.account-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-surface);
  padding: 40px var(--space-8, 40px);
  border-radius: var(--radius-card, 16px);
  margin-bottom: var(--space-8, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.account-welcome {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h2, 30px);
  font-weight: 700;
  margin-bottom: 4px;
}

.account-sub,
.account-email {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: rgba(255, 255, 255, 0.85);
}

.account-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.account-banner-form {
  display: inline;
  margin: 0;
}

.account-banner-actions .btn--inverse {
  text-decoration: none;
}

.account-banner-logout,
.account-banner-actions .btn--ghost {
  background: transparent;
  color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.account-banner-logout:hover,
.account-banner-actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Stats Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5, 24px);
  margin-bottom: var(--space-8, 36px);
}

.stat-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 28px);
  display: flex;
  align-items: center;
  gap: var(--space-4, 18px);
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast, 150ms);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary, var(--color-primary));
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-input, 14px);
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
}

.stat-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}

.stat-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  color: var(--text-secondary, var(--color-text-secondary));
  font-weight: 500;
}

/* Orders Cards & Tables */
.orders-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.orders-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 20px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  padding: var(--space-5, 24px) var(--space-6, 28px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.orders-table th {
  background: var(--surface-primary, var(--color-bg));
  padding: 16px var(--space-5, 24px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary, var(--color-text-secondary));
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.orders-table td {
  padding: var(--space-4, 18px) var(--space-5, 24px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  vertical-align: middle;
}

.orders-table tr:last-child td {
  border-bottom: none;
}

.badge-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
}

.status-pending {
  background: var(--feedback-warning-bg, #FEF3C7);
  color: var(--feedback-warning, #D97706);
  border: 1px solid var(--feedback-warning-border, #FCD34D);
}

.status-processing {
  background: var(--blue-50, #EFF6FF);
  color: var(--brand-secondary, var(--color-secondary));
  border: 1px solid var(--blue-200, #BFDBFE);
}

.status-delivered {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success, var(--color-success));
  border: 1px solid var(--feedback-success-border, #86EFAC);
}

.status-cancelled {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error, var(--color-danger));
  border: 1px solid var(--feedback-error-border, #FCA5A5);
}

.btn-view-receipt {
  padding: 8px 18px;
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
  border: 1px solid var(--teal-200, #99F6E4);
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration-fast, 150ms);
}

.btn-view-receipt:hover {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

/* 2-Column Dashboard Grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8, 36px);
}

@media (max-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .account-container,
  .profile-container {
    padding: 0 var(--space-4, 16px);
    margin: var(--space-5, 24px) auto;
  }

  .account-banner,
  .account-header {
    padding: 28px 20px;
  }

  .account-welcome {
    font-size: 22px;
  }

  .account-banner-actions {
    width: 100%;
  }

  .account-banner-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .thank-you-page__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .thank-you-page__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.action-link {
  display: block;
  padding: 14px 20px;
  border-radius: var(--radius-card, 16px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  text-decoration: none;
  margin-bottom: 12px;
  transition: all var(--duration-fast, 150ms);
}

.action-link:hover {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

.thank-you-page {
  max-width: 720px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-5, 20px);
  text-align: center;
}

.thank-you-page__title {
  margin-bottom: 12px;
}

.thank-you-page__copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary, #444);
}

.thank-you-page__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.orders-filter-form {
  margin-bottom: 20px;
}

.orders-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.orders-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #555);
}

.orders-filter-input,
.orders-filter-select {
  width: 100%;
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: var(--color-surface, #fff);
}

.orders-filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orders-alert {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.orders-alert--error {
  background: #fdecea;
  color: #b42318;
  border: 1px solid #f5c2c0;
}

.orders-empty {
  padding: 24px 8px;
  color: var(--text-secondary, #555);
}

.orders-table-wrap {
  overflow-x: auto;
}

.orders-payment-status {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #666);
  font-weight: 500;
}

.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.orders-pagination-meta {
  font-size: 13px;
  color: var(--text-secondary, #666);
}

@media (max-width: 900px) {
  .orders-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .orders-filter-grid {
    grid-template-columns: 1fr;
  }

  .orders-table thead {
    display: none;
  }

  .orders-table tr {
    display: block;
    border: 1px solid var(--border-primary, var(--color-border));
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
  }

  .orders-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: right !important;
    border: 0;
    padding: 8px 0;
  }

  .orders-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary, #666);
  }
}
/* === End: layout/account-layout.css === */

/* === Start: layout/contact-layout.css === */
/* Contact page — refined professional layout */

.ct-page {
  background: var(--color-bg, #fdfbf7);
  color: var(--color-text-primary);
}

.ct-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ct-shell {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

/* ── Eyebrows / section labels ── */
.ct-eyebrow,
.ct-col-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ct-eyebrow::before,
.ct-col-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-primary);
}

.ct-col-title {
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: clamp(1.35rem, 2vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 0 0 10px;
  text-transform: none;
}

.ct-col-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 38rem;
}

/* ── Hero ── */
.ct-hero {
  border-bottom: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}

.ct-hero__inner {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
  padding: 40px 0 36px;
}

.ct-hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  line-height: 1.12;
  margin: 0 0 14px;
  max-width: 16ch;
  text-transform: none;
}

.ct-hero__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 36rem;
}

.ct-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ct-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease;
}

.ct-hero__cta:hover {
  background: var(--color-primary-hover, #a00c33);
  border-color: var(--color-primary-hover, #a00c33);
}

.ct-hero__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.ct-hero__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 450;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ── Contact strip ── */
.ct-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.ct-strip__inner {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.ct-strip__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 8px;
  margin: 0;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--color-border);
  transition: opacity var(--duration-fast, 150ms) ease;
}

.ct-strip__link:first-child {
  padding-left: 0;
}

.ct-strip__link:last-child {
  border-right: none;
  padding-right: 0;
}

.ct-strip__link:hover {
  opacity: 0.82;
}

.ct-strip__link:hover .ct-strip__value {
  color: var(--color-primary);
}

.ct-strip__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ct-strip__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted, #f2b3c4);
  border-radius: 50%;
}

.ct-strip__icon--wa {
  background: transparent;
  color: #128c7e;
  border-color: rgba(18, 140, 126, 0.35);
}

.ct-strip__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ct-strip__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text-muted);
}

.ct-strip__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast, 150ms) ease;
}

/* ── Main grid ── */
.ct-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: start;
  padding: 48px 0 64px;
  scroll-margin-top: 96px;
  background: transparent;
  border-bottom: none;
}

.ct-form-col {
  padding: 0;
  border-right: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px 32px 36px;
}

.ct-form-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ct-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.ct-label {
  font-family: var(--font-body);
  font-weight: 550;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-bottom: 7px;
}

.ct-label span {
  color: var(--color-primary);
}

.ct-input,
.ct-select,
.ct-textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-bg, #fdfbf7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 11px 13px;
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.ct-input:hover,
.ct-select:hover,
.ct-textarea:hover {
  border-color: #d4cfc6;
}

.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus,
.ct-input:focus-visible,
.ct-select:focus-visible,
.ct-textarea:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
}

.ct-input--err {
  border-color: var(--color-primary);
  background: #fff8f9;
}

.ct-textarea {
  resize: vertical;
  min-height: 128px;
  line-height: 1.6;
}

.ct-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.ct-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.ct-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ct-checkbox {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 22px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
  margin-top: 8px;
}

.ct-submit:hover:not(:disabled) {
  background: var(--color-primary-hover, #a00c33);
  border-color: var(--color-primary-hover, #a00c33);
}

.ct-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.ct-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.ct-form .form-banner {
  margin-bottom: 16px;
}

.ct-form .form-success-panel {
  margin-bottom: 16px;
}

.ct-form .form-error {
  margin-top: 6px;
}

/* ── Offices ── */
.ct-offices-col {
  padding: 8px 0 0;
  background: transparent;
}

.ct-office-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 22px 18px;
  margin-bottom: 14px;
}

.ct-office-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ct-office-card__icon {
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted, #f2b3c4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.ct-office-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}

.ct-office-card__addr {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}

.ct-office-card__contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms) ease;
}

.ct-office-card__contact:hover {
  color: var(--color-primary);
}

.ct-hours {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 22px 16px;
  margin-bottom: 14px;
}

.ct-hours__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-hours__title svg {
  stroke: var(--color-primary);
}

.ct-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.ct-hours__row:last-of-type {
  border-bottom: none;
}

.ct-hours__time {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  letter-spacing: 0;
}

.ct-hours__time--closed {
  color: var(--color-primary);
}

.ct-hours__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 12px;
  line-height: 1.55;
}

.ct-all-phones {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px 22px;
}

.ct-all-phones__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.ct-all-phones__item {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--duration-fast, 150ms) ease;
}

.ct-all-phones__item:last-child {
  border-bottom: none;
}

.ct-all-phones__item:hover {
  color: var(--color-primary);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ct-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0 48px;
  }

  .ct-form-col {
    padding: 24px 20px 28px;
  }

  .ct-strip__inner {
    grid-template-columns: 1fr;
  }

  .ct-strip__link,
  .ct-strip__link:first-child,
  .ct-strip__link:last-child {
    padding: 16px 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .ct-strip__link:last-child {
    border-bottom: none;
  }

  .ct-strip__value {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 768px) {
  .ct-hero__inner,
  .ct-strip__inner,
  .ct-main,
  .ct-shell {
    width: min(1120px, calc(100% - 32px));
  }

  .ct-hero__inner {
    padding: 28px 0 24px;
  }

  .ct-form-grid2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* === End: layout/contact-layout.css === */

/* === Start: components/buttons.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BUTTON COMPONENT LIBRARY (buttons.css)
   Consolidated Button System: Pill Shape, Outfit Font, Soft Elevation,
   Smooth Spring Transitions, and Premium Clinical Wellness Token Integration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE BUTTON (.btn)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 44px;
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--color-primary-light) !important;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. BUTTON VARIANTS
   -------------------------------------------------------------------------- */

/* Primary Button (Crimson) */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

/* Secondary Button */
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-secondary);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary-hover);
}

/* Accent Button */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  background: var(--color-accent-hover);
  color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* Ghost Button */
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Danger / Destructive Button */
.btn--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.btn--danger:hover {
  background: var(--color-danger);
  color: var(--color-surface);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Inverse Button (On Dark Backgrounds) */
.btn--inverse {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: transparent;
}

.btn--inverse:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

/* Modifier: Pill Shape */
.btn--pill {
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   3. BUTTON SIZES
   -------------------------------------------------------------------------- */

/* Small Button (34px height) */
.btn--sm {
  height: 34px;
  padding: 0 var(--space-4);
  font-size: var(--type-caption);
  border-radius: var(--radius-pill);
}

/* Large Button (52px height) */
.btn--lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: var(--type-body);
  border-radius: var(--radius-pill);
}

/* Full Width Button */
.btn--full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   Ensures legacy button classes inherit canonical system styles.
   -------------------------------------------------------------------------- */

/* Legacy Primary CTAs */
.btn-primary,
.btn--solid,
.auth-btn,
.btn-submit,
.form-submit,
.btn-place-order,
.btn-drawer-cart,
.btn-checkout,
.btn--catalogue,
.btn-price-filter,
.btn-detail-add-cart,
.admin-btn,
.btn-update {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-primary:hover,
.btn--solid:hover,
.auth-btn:hover,
.btn-submit:hover,
.form-submit:hover,
.btn-place-order:hover,
.btn-drawer-cart:hover,
.btn-checkout:hover,
.btn--catalogue:hover,
.btn-price-filter:hover,
.btn-detail-add-cart:hover,
.admin-btn:hover,
.btn-update:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Legacy Outline / Secondary CTAs */
.btn--outline,
.btn-secondary,
.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn--outline:hover,
.btn-secondary:hover,
.btn-cancel:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary-hover);
  transform: translateY(-1px);
}

/* Legacy Header / Nav CTA */
.nav-cta {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-fast) var(--ease-spring);
  box-shadow: var(--shadow-xs);
}

.nav-cta:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Legacy Small Product Action Buttons — keep in sync with shop-layout card footer */
.btn-add-cart-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading);
  font-size: var(--type-caption);
  font-weight: 600;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-fast);
  box-sizing: border-box;
}

.btn-add-cart-sm:hover {
  background: var(--color-primary-hover);
}

.btn-out-of-stock-sm,
.btn-add-cart-sm:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: #94a3b8;
  pointer-events: none;
}

.btn-view-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading);
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: all var(--duration-fast);
}

.btn-view-product:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

/* Table Action Buttons */
.btn-edit {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: var(--color-secondary-light);
  color: var(--color-secondary-hover);
  border: 1px solid var(--color-border);
  transition: all var(--duration-fast);
}

.btn-edit:hover {
  background: var(--color-secondary);
  color: var(--color-surface);
}

.btn-delete {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
  transition: all var(--duration-fast);
}

.btn-delete:hover {
  background: var(--color-danger);
  color: var(--color-surface);
}

.btn-view {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted);
  transition: all var(--duration-fast);
}

.btn-view:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
  padding: 7px 14px;
  font-size: 12px;
  text-decoration: none;
  box-sizing: border-box;
}
/* === End: components/buttons.css === */

/* === Start: components/cards.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — CARD COMPONENT LIBRARY (cards.css)
   Consolidated Card Architecture: 16px Radius, Crisp Surface (var(--color-surface)),
   Generous Breathing Room (32px Padding), Soft Elevation, and Smooth Spring Hover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE CARD (.card)
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  padding: var(--space-card-padding, var(--space-6, 32px));
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-normal, 200ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   2. CARD VARIANTS
   -------------------------------------------------------------------------- */

/* Elevated Card (Soft Elevation Shadow) */
.card--elevated {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border-subtle, #F0ECE7);
  box-shadow: var(--shadow-md);
}

.card--elevated:hover {
  box-shadow: var(--shadow-lg);
}

/* Interactive Card (Hover lift & shadow expansion) */
.card--interactive {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, #E8E4DF);
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-muted, #7FA8A3);
}

.card--interactive:focus-visible {
  outline: 2px solid var(--color-primary, #1A3A3A);
  outline-offset: 2px;
}

/* Dark Theme Card (optional utility — not default admin shell) */
.card--dark {
  background: #1F1F1F;
  border: 1px solid #333;
  color: #f5f5f5;
}

.card--dark .card__header {
  border-bottom-color: #333;
}

.card--dark .card__footer {
  border-top-color: #333;
}

.card--dark .card__title {
  color: #fff;
}

.card--dark .card__subtitle {
  color: #b0b0b0;
}

/* --------------------------------------------------------------------------
   3. CARD SUB-COMPONENTS
   -------------------------------------------------------------------------- */
.card__header {
  padding-bottom: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border, #E8E4DF);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

.card__body {
  flex: 1;
}

.card__footer {
  padding-top: var(--space-4, 16px);
  margin-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border, #E8E4DF);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

.card__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-h3, 24px);
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  margin: 0;
  line-height: var(--leading-h3, 1.25);
}

.card__subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-secondary, #6B6560);
  margin-top: var(--space-1, 4px);
}

/* --------------------------------------------------------------------------
   4. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   -------------------------------------------------------------------------- */

/* Storefront Auth Card */
.auth-card {
  background: var(--color-surface, #FFFFFF);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  border: 1px solid var(--color-border, #E8E4DF);
}

.auth-card--wide {
  max-width: 520px;
}

/* Admin Dashboard Stat Card */
.stat-card {
  background: var(--admin-card-bg, #FFFFFF);
  border: 1px solid var(--admin-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 32px);
  display: flex;
  align-items: center;
  gap: var(--space-5, 24px);
  box-shadow: var(--shadow-sm);
}

/* Admin Welcome Banner Card */
.admin-welcome-card {
  background: linear-gradient(135deg, #D31145 0%, #8F0B2E 100%);
  border: none;
  border-radius: var(--radius-card, 16px);
  padding: var(--space-8, 48px);
  margin-bottom: var(--space-8, 48px);
  box-shadow: var(--shadow-md);
  color: #fff;
}

/* Admin Form Card — scoped; light surface aligned with brand */
[data-theme="admin"] .form-card {
  background: var(--admin-card-bg, #FFFFFF);
  border: 1px solid var(--admin-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  padding: 32px;
}

[data-theme="admin"] .form-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-h2, 32px);
  font-weight: 700;
  color: var(--admin-text-main, #1F1F1F);
  margin-bottom: var(--space-6, 32px);
}

/* Admin Login Viewport & Card */
.admin-login-body {
  font-family: var(--font-body, 'Inter', sans-serif);
  background: var(--admin-bg, #FDFBF7) !important;
  color: var(--admin-text-main, #1F1F1F) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 24px);
}

.admin-login-card {
  background: #FFFFFF;
  border: 1px solid var(--admin-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 44px 36px;
}

.admin-login-card .admin-btn {
  width: 100%;
  margin-top: 8px;
}

.admin-brand {
  text-align: center;
  margin-bottom: 32px;
}

.admin-brand img {
  height: 70px;
  width: auto;
  margin-bottom: 16px;
}

.admin-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--admin-text-main, #1F1F1F);
  margin-bottom: 6px;
}

.admin-subtitle {
  font-size: 13px;
  color: var(--admin-text-muted, #5C5C5C);
  letter-spacing: 0.02em;
}

/* Admin Data Table Card Container */
.table-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* === End: components/cards.css === */

/* === Start: components/forms.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — FORM COMPONENT LIBRARY (forms.css)
   Consolidated Form System: 12px Input Radius, Subtle Focus Ring (Deep Evergreen),
   Inter Font Family, Soft Borders, and Smooth Transitions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FORM GROUP WRAPPER
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-5, 24px);
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   2. FORM LABELS
   -------------------------------------------------------------------------- */
.form-label {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.02em);
  color: var(--color-text-primary, #1A1A1A);
  margin-bottom: var(--space-2, 8px);
}

[data-theme="admin"] .form-label {
  color: var(--admin-text-muted, #5C5C5C);
}

/* --------------------------------------------------------------------------
   3. FORM INPUTS & CONTROL ELEMENTS
   -------------------------------------------------------------------------- */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 18px;
  background-color: var(--color-surface, var(--color-surface));
  border: 1.5px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  appearance: none;
  transition: all var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted, #9B9590);
  opacity: 0.8;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary, #1A3A3A);
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
  background: var(--color-surface);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--color-surface-warm, #F5F2EE);
  color: var(--color-text-muted, #9B9590);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Admin Input Theme Overrides — light admin shell */
[data-theme="admin"] .form-input,
[data-theme="admin"] .form-select,
[data-theme="admin"] .form-textarea {
  background-color: #FFFFFF;
  border-color: var(--admin-border, #E8E4DF);
  color: var(--admin-text-main, #1F1F1F);
}

[data-theme="admin"] .form-input:focus,
[data-theme="admin"] .form-select:focus,
[data-theme="admin"] .form-textarea:focus {
  border-color: var(--admin-accent, #D31145);
  box-shadow: 0 0 0 4px rgba(211, 17, 69, 0.12);
}

/* --------------------------------------------------------------------------
   4. SPECIALIZED CONTROL TYPES
   -------------------------------------------------------------------------- */

/* Select Dropdown with Custom Caret */
.form-select {
  background-color: var(--color-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  padding-right: 44px;
  cursor: pointer;
}

[data-theme="admin"] .form-select {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
}

/* Textarea Field */
.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: var(--leading-normal, 1.5);
}

/* Checkbox & Radio Labels */
.form-checkbox-label,
.form-radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 10px);
  font-size: var(--type-small, 14px);
  font-weight: 500;
  color: var(--color-text-primary, #1A1A1A);
  cursor: pointer;
  user-select: none;
}

[data-theme="admin"] .form-checkbox-label,
[data-theme="admin"] .form-radio-label {
  color: var(--admin-text-main, #1F1F1F);
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE FORM GRID
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5, 24px);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   6. HINTS & VALIDATION ERROR STATES
   -------------------------------------------------------------------------- */
.form-hint {
  font-size: var(--type-caption, 12px);
  color: var(--color-text-secondary, #6B6560);
  margin-top: var(--space-1, 6px);
}

[data-theme="admin"] .form-hint {
  color: var(--admin-text-muted, #5C5C5C);
}

.form-error {
  font-size: var(--type-caption, 12px);
  color: var(--color-danger, #C44B3D);
  margin-top: var(--space-1, 6px);
  font-weight: 600;
}

/* Input Error State Modifier */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger, #C44B3D) !important;
  box-shadow: 0 0 0 4px rgba(196, 75, 61, 0.15) !important;
}

/* --------------------------------------------------------------------------
   7. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   -------------------------------------------------------------------------- */

/* Storefront Auth Forms */
.auth-form-group {
  margin-bottom: var(--space-5, 24px);
}

.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.auth-input {
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  transition: all var(--duration-fast, 150ms);
}

.auth-input:focus {
  border-color: var(--color-primary, #1A3A3A);
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

/* Filter Bar & Search Inputs */
.filter-form,
.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 220px;
  padding: 10px 18px;
  background: var(--color-surface, var(--color-surface));
  border: 1.5px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  transition: all var(--duration-fast, 150ms);
}

.search-input:focus {
  border-color: var(--color-primary, #1A3A3A);
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
}

.select-input {
  min-width: 140px;
  padding: 10px 38px 10px 18px;
  background-color: var(--color-surface, var(--color-surface));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  border: 1.5px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-primary, #1A1A1A);
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  transition: all var(--duration-fast, 150ms);
}

.select-input:focus {
  border-color: var(--color-primary, #1A3A3A);
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
}

.search-btn {
  padding: 10px 22px;
  height: 42px;
  border-radius: var(--radius-button, 999px);
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-small, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

.search-btn:hover {
  background: var(--color-primary-hover);
}

/* Form Actions Bar & Layout Helpers */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  margin-top: var(--space-7, 32px);
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--color-border, #E8E4DF);
}

.form-align-end {
  display: flex;
  align-items: flex-end;
  padding-bottom: 12px;
}

.form-group-spaced {
  margin-top: var(--space-3, 12px);
}

.form-textarea-lg {
  min-height: 140px;
}

/* File Upload Controls */
input[type="file"].form-input {
  padding: 10px 14px;
  cursor: pointer;
}

input[type="file"].form-input::file-selector-button {
  background: var(--color-primary, #1A3A3A);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-button, 999px);
  padding: 6px 16px;
  margin-right: 12px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-caption, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

input[type="file"].form-input::file-selector-button:hover {
  background: var(--color-primary-hover, #142E2E);
}

/* Gallery Grid Preview Manager */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
}

.gallery-item {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-input, 12px);
  overflow: hidden;
  border: 1px solid var(--color-border, #E8E4DF);
  background: var(--color-surface, var(--color-surface));
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(196, 75, 61, 0.9);
  color: var(--color-surface);
  border: none;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

.gallery-del-btn:hover {
  background: var(--color-danger, #C44B3D);
  transform: scale(1.1);
}

/* Admin Login Form Controls */
.admin-group {
  margin-bottom: 20px;
}

.admin-label {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-input {
  width: 100%;
  padding: 13px 18px;
  background: var(--color-surface, var(--color-surface));
  border: 1.5px solid var(--color-border, #E8E4DF);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  transition: all var(--duration-fast, 150ms);
}

.admin-input:focus {
  border-color: var(--color-primary, #1A3A3A);
  box-shadow: 0 0 0 4px rgba(26, 58, 58, 0.12);
  outline: none;
}
/* === End: components/forms.css === */

/* === Start: components/alerts.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ALERT COMPONENT LIBRARY (alerts.css)
   Phase 3 Component Polish: 14px Radius, Inter Font Family, Soft Tones,
   and Clean Icon Alignment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE ALERT (.alert)
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-radius: var(--radius-input, var(--radius-md, 14px));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 500;
  line-height: var(--leading-normal, 1.5);
  margin-bottom: var(--space-6, 24px);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  border: 1px solid transparent;
  position: relative;
  box-shadow: var(--shadow-xs);
}

/* Alert Sub-elements */
.alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-body, 16px);
  font-weight: 600;
  margin-bottom: var(--space-1, 4px);
}

.alert__text {
  font-size: var(--font-size-small, 14px);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   2. ALERT VARIANTS
   -------------------------------------------------------------------------- */

/* Success Variant */
.alert--success,
.alert-success {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success-text, var(--color-success));
  border-color: var(--feedback-success-border, #86EFAC);
}

/* Danger / Error Variant */
.alert--danger,
.alert-danger,
.auth-alert--danger {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error-text, var(--color-danger));
  border-color: var(--feedback-error-border, #FCA5A5);
}

/* Warning Variant */
.alert--warning,
.alert-warning {
  background: var(--feedback-warning-bg, #FFFBEB);
  color: var(--feedback-warning-text, #D97706);
  border-color: var(--feedback-warning-border, #FDE68A);
}

/* Info Variant */
.alert--info,
.alert-info {
  background: var(--blue-50, #EFF6FF);
  color: var(--brand-secondary, var(--color-secondary));
  border-color: var(--blue-200, #BFDBFE);
}

/* --------------------------------------------------------------------------
   3. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   -------------------------------------------------------------------------- */

/* Storefront Auth Alert Wrapper */
.auth-alert {
  padding: 14px 20px;
  border-radius: var(--radius-input, 14px);
  font-size: var(--font-size-small, 14px);
  margin-bottom: var(--space-5, 24px);
  border: 1px solid transparent;
}

/* Admin Login Alert */
.admin-alert {
  padding: 14px 20px;
  border-radius: var(--radius-input, 14px);
  font-size: 14px;
  margin-bottom: 24px;
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error-text, var(--color-danger));
  border: 1px solid var(--feedback-error-border, #FCA5A5);
}
/* === End: components/alerts.css === */

/* === Start: components/badges.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BADGE COMPONENT LIBRARY (badges.css)
   Phase 3 Component Polish: 999px Pill Radius, Inter Typography, Vibrant
   Soft Tones, and Clean Accessibility Contrast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE BADGE (.badge)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: 5px 12px;
  border-radius: var(--radius-badge, var(--radius-pill, 999px));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  letter-spacing: var(--tracking-wide, 0.02em);
  text-transform: capitalize;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   2. BADGE VARIANTS
   -------------------------------------------------------------------------- */

/* Success / Published / Delivered / Paid */
.badge--success,
.badge-success,
.badge-published,
.status-delivered,
.pay-paid {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success, var(--color-success));
  border-color: var(--feedback-success-border, #86EFAC);
}

/* Warning / Draft / Pending */
.badge--warning,
.badge-draft,
.status-pending,
.pay-pending {
  background: var(--feedback-warning-bg, #FFFBEB);
  color: var(--feedback-warning, #D97706);
  border-color: var(--feedback-warning-border, #FDE68A);
}

/* Info / Processing */
.badge--info,
.status-processing {
  background: var(--blue-50, #EFF6FF);
  color: var(--brand-secondary, var(--color-secondary));
  border-color: var(--blue-200, #BFDBFE);
}

/* Shipped / Primary */
.badge--purple,
.status-shipped {
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
  border-color: var(--teal-200, #99F6E4);
}

/* Danger / Cancelled / Failed */
.badge--danger,
.status-cancelled,
.pay-failed {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error, var(--color-danger));
  border-color: var(--feedback-error-border, #FCA5A5);
}

/* Accent / Category / Parent Tag / Featured */
.badge--accent,
.badge-category,
.badge-parent {
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
  border-color: var(--teal-200, #99F6E4);
}

.badge-featured {
  background: #FFFBEB;
  color: #D97706;
  border-color: #FDE68A;
}

.badge-secondary {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* --------------------------------------------------------------------------
   3. STOCK QUANTITY INDICATORS
   -------------------------------------------------------------------------- */
.stock-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-badge, 999px);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
}

.stock-qty.in-stock {
  background: #F0FDF4;
  color: var(--color-success);
  border: 1px solid #86EFAC;
}

.stock-qty.out-of-stock {
  background: #FEF2F2;
  color: var(--color-danger);
  border: 1px solid #FCA5A5;
}
/* === End: components/badges.css === */

/* === Start: components/tables.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — DATA TABLE COMPONENT LIBRARY (tables.css)
   Phase 3 Component Polish: 16px Radius Containers, Inter Typography,
   Soft Borders (var(--color-border)), Generous Cell Padding, and Smooth Hover Rows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESPONSIVE TABLE CONTAINER & WRAPPER
   -------------------------------------------------------------------------- */
.table-wrapper,
.admin-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Table Card Container */
.table-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.table-card-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   2. DATA TABLE BASE STYLES (.table / .admin-table)
   -------------------------------------------------------------------------- */
.table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
}

.table th,
.admin-table th {
  background: var(--surface-primary, var(--color-bg));
  padding: 16px 24px;
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.02em);
  color: var(--text-secondary, var(--color-text-secondary));
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  white-space: nowrap;
}

.table td,
.admin-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  vertical-align: middle;
  color: var(--text-primary, var(--color-text-primary));
  transition: background-color var(--duration-fast, 150ms);
}

.table tr:last-child td,
.admin-table tr:last-child td {
  border-bottom: none;
}

.table tr:hover,
.admin-table tr:hover {
  background: rgba(15, 118, 110, 0.03);
}

/* --------------------------------------------------------------------------
   3. TABLE THUMBNAIL / MEDIA ASSETS
   -------------------------------------------------------------------------- */
.table__thumb,
.prod-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-input, 14px);
  object-fit: cover;
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  display: block;
}

/* --------------------------------------------------------------------------
   4. PAGINATION CONTROLS
   -------------------------------------------------------------------------- */
.pagination-container {
  padding: 18px 28px;
  border-top: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  flex-wrap: wrap;
  gap: 12px;
}

.pagination-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-link {
  padding: 8px 16px;
  border-radius: var(--radius-button, 999px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  color: var(--text-primary, var(--color-text-primary));
  font-weight: 500;
  text-decoration: none;
  font-size: var(--font-size-caption, 12px);
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
}

.page-link:hover {
  background: var(--teal-50, #F0FDFA);
  border-color: var(--brand-primary, var(--color-primary));
  color: var(--brand-primary, var(--color-primary));
}

.page-link.active {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

.page-link--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.page-link--ellipsis {
  border: none;
  background: transparent;
  padding-left: 4px;
  padding-right: 4px;
  cursor: default;
}

/* --------------------------------------------------------------------------
   5. TABLE UTILITIES
   -------------------------------------------------------------------------- */
.text-right { text-align: right; }
.text-center { text-align: center; }
.inline-form { display: inline; }

.action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btns.text-right,
.action-btns--end {
  justify-content: flex-end;
}

.table-empty {
  text-align: center;
  padding: 48px !important;
  color: var(--text-secondary, var(--color-text-secondary));
}

.table-summary-count {
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
}

.product-title {
  color: var(--text-primary, var(--color-text-primary));
  font-size: 15px;
  font-weight: 600;
}

.product-sku-info {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

.product-sku-code {
  color: var(--brand-primary, var(--color-primary));
}

.product-subcat-info {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 3px;
}

.product-price {
  color: var(--brand-primary, var(--color-primary));
  font-size: 15px;
  font-weight: 700;
}

.product-sale-price {
  font-size: 12px;
  color: var(--feedback-error, var(--color-danger));
  text-decoration: line-through;
}

.category-description {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

/* Order Table Helpers */
.order-number {
  color: var(--text-primary, var(--color-text-primary));
  font-size: 14px;
  font-weight: 600;
}

.order-item-count {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

.customer-name {
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
}

.customer-contact,
.order-date {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
}

.payment-method {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

/* Admin table readability — explicit charcoal text on light rows */
[data-theme="admin"] .admin-table th {
  background: #1F1F1F;
  color: #FFFFFF;
  border-bottom-color: #1F1F1F;
}

[data-theme="admin"] .admin-table td {
  color: #1F1F1F;
  background: #FFFFFF;
}

[data-theme="admin"] .admin-table tr:hover td {
  background: #FDFBF7;
}

[data-theme="admin"] .product-title,
[data-theme="admin"] .customer-name,
[data-theme="admin"] .order-number {
  color: #1F1F1F;
}

[data-theme="admin"] .category-description,
[data-theme="admin"] .customer-contact,
[data-theme="admin"] .order-date,
[data-theme="admin"] .order-item-count,
[data-theme="admin"] .product-sku-info,
[data-theme="admin"] .product-subcat-info,
[data-theme="admin"] .table-summary-count,
[data-theme="admin"] .table-empty,
[data-theme="admin"] .payment-method {
  color: #5C5C5C;
}

[data-theme="admin"] .table-card-header {
  background: #FFFFFF;
  color: #1F1F1F;
}

/* Table Column Width Utilities */
.col-w-50 { width: 50px; }
.col-w-60 { width: 60px; }
.col-w-80 { width: 80px; }
.col-w-90 { width: 90px; }
.col-w-100 { width: 100px; }
.col-w-160 { width: 160px; }

/* Mobile card-stacking for admin/data tables */
@media (max-width: 768px) {
  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table tr {
    border: 1px solid var(--border-primary, var(--color-border));
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fff;
  }

  .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 0;
    text-align: right;
  }

  .admin-table td:last-child {
    border-bottom: none;
  }

  .admin-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary, #5c5c5c);
    flex: 0 0 42%;
  }

  .admin-table td.text-right,
  .admin-table .action-btns {
    justify-content: flex-end;
  }

  .admin-table .table-empty {
    text-align: center;
  }

  .admin-table .table-empty::before {
    display: none;
  }
}
/* === End: components/tables.css === */

/* === Start: components/modals.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — MODAL & DRAWER COMPONENT LIBRARY (modals.css)
   Consolidates storefront modals, slide-over cart drawers, overlays,
   dialog headers, body content, and action footers.
   Supports BEM syntax (.modal, .drawer, .overlay, etc.) with alias mapping
   for 100% backward compatibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BACKDROP OVERLAY (.overlay)
   -------------------------------------------------------------------------- */
.overlay,
.modal-overlay,
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 6, 26, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal, 1000);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              visibility var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.overlay.is-open,
.overlay.active,
.modal-overlay.is-open,
.modal-overlay.active,
.drawer-overlay.is-open,
.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   2. CENTERING MODAL DIALOG (.modal)
   -------------------------------------------------------------------------- */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal, 1000) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  pointer-events: none;
}

.modal,
.modal-content {
  background: var(--surface-primary, var(--color-surface));
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.2));
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.modal.is-open,
.modal.active,
.modal-content.is-open,
.modal-content.active {
  transform: scale(1);
  opacity: 1;
}

/* Dark Theme Scoped Modal */
[data-theme="admin"] .modal,
[data-theme="admin"] .modal-content {
  background: var(--admin-card-bg, #180d2e);
  border: 1px solid var(--admin-border, #2c1a4d);
  color: var(--admin-text-main, #f3f0ff);
}

/* --------------------------------------------------------------------------
   3. SLIDE-OVER DRAWER (.drawer / .cart-drawer)
   -------------------------------------------------------------------------- */
.drawer,
.drawer-cart,
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--surface-primary, var(--color-surface));
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.2));
  z-index: calc(var(--z-modal, 1000) + 10);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.drawer.is-open,
.drawer.active,
.drawer-cart.is-open,
.drawer-cart.active,
.cart-drawer.is-open,
.cart-drawer.active {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   4. MODAL & DRAWER SUB-COMPONENTS
   -------------------------------------------------------------------------- */
.modal__header,
.drawer__header {
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

[data-theme="admin"] .modal__header,
[data-theme="admin"] .drawer__header {
  border-bottom-color: var(--admin-border, #2c1a4d);
}

.modal__title,
.drawer__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--text-xl, 20px);
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  margin: 0;
}

[data-theme="admin"] .modal__title,
[data-theme="admin"] .drawer__title {
  color: var(--text-inverse, var(--color-surface));
}

.modal__close,
.drawer__close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #666058);
  font-size: var(--text-xl, 20px);
  cursor: pointer;
  padding: var(--space-1, 4px);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast, 150ms), background-color var(--duration-fast, 150ms);
}

.modal__close:hover,
.drawer__close:hover {
  color: var(--text-primary, var(--color-text-primary));
  background: var(--neutral-100, #f8f6f4);
}

[data-theme="admin"] .modal__close:hover,
[data-theme="admin"] .drawer__close:hover {
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.1);
}

.modal__body,
.drawer__body {
  padding: var(--space-6, 24px);
  overflow-y: auto;
  flex: 1;
}

.modal__footer,
.drawer__footer {
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-top: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3, 12px);
  background: var(--surface-secondary, var(--color-bg));
}

[data-theme="admin"] .modal__footer,
[data-theme="admin"] .drawer__footer {
  border-top-color: var(--admin-border, #2c1a4d);
  background: #140829;
}

/* --------------------------------------------------------------------------
   Admin confirmation dialog
   -------------------------------------------------------------------------- */
.admin-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 1000) + 50);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-confirm-modal.is-open,
.admin-confirm-modal:not([hidden]) {
  display: flex;
}

.admin-confirm-modal[hidden] {
  display: none !important;
}

.admin-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 6, 26, 0.65);
  backdrop-filter: blur(3px);
}

.admin-confirm-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #fff;
  color: #1f1f1f;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  padding: 24px;
}

.admin-confirm-modal__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-confirm-modal__message {
  margin: 0 0 20px;
  color: #5c5c5c;
  line-height: 1.5;
}

.admin-confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.admin-confirm-open {
  overflow: hidden;
}
/* === End: components/modals.css === */

/* === Start: components/toasts.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — TOAST COMPONENT LIBRARY (toasts.css)
   Phase 3 Component Polish: 14px Radius, Soft Elevation Shadows, Inter Fonts,
   Teal Primary Accents, and Smooth Spring Animations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOAST VIEWPORT CONTAINER (.toast-container)
   -------------------------------------------------------------------------- */
.toast-container,
.toast-viewport {
  position: fixed;
  bottom: var(--space-6, 32px);
  right: var(--space-6, 32px);
  z-index: var(--z-toast, 1300);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  max-width: 100%;
  pointer-events: none;
}

@media (max-width: 480px) {
  .toast-container,
  .toast-viewport {
    bottom: var(--space-4, 16px);
    right: var(--space-4, 16px);
    left: var(--space-4, 16px);
  }
}

.toast-container--drawer-open {
  right: auto;
  left: var(--space-6, 32px);
}

@media (max-width: 480px) {
  .toast-container--drawer-open {
    left: var(--space-4, 16px);
    right: auto;
    max-width: min(420px, calc(100vw - 32px));
  }
}

/* --------------------------------------------------------------------------
   2. TOAST CARD BASE STYLES (.toast)
   -------------------------------------------------------------------------- */
.toast,
.notification-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 14px 20px;
  min-width: 280px;
  max-width: 420px;
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-left: 4px solid var(--brand-primary, var(--color-primary));
  border-radius: var(--radius-input, var(--radius-md, 14px));
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(31, 41, 55, 0.06));
  color: var(--text-primary, var(--color-text-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  line-height: var(--leading-normal, 1.5);
  animation: toastSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 150ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Admin Scoped Dark Theme Toast */
[data-theme="admin"] .toast,
[data-theme="admin"] .notification-toast {
  background: var(--admin-card-bg, #180d2e);
  border: 1px solid var(--admin-border, #2c1a4d);
  color: var(--admin-text-main, #f3f0ff);
}

/* --------------------------------------------------------------------------
   3. TOAST VARIANTS
   -------------------------------------------------------------------------- */

/* Success Variant */
.toast--success,
.toast-success {
  border-left-color: var(--feedback-success, var(--color-success));
}

.toast--success .toast__icon {
  color: var(--feedback-success, var(--color-success));
}

/* Error / Danger Variant */
.toast--error,
.toast--danger,
.toast-error,
.toast-danger {
  border-left-color: var(--feedback-error, var(--color-danger));
}

.toast--error .toast__icon,
.toast--danger .toast__icon {
  color: var(--feedback-error, var(--color-danger));
}

/* Warning Variant */
.toast--warning,
.toast-warning {
  border-left-color: var(--feedback-warning, #D97706);
}

.toast--warning .toast__icon {
  color: var(--feedback-warning, #D97706);
}

/* Info Variant */
.toast--info,
.toast-info {
  border-left-color: var(--brand-secondary, var(--color-secondary));
}

.toast--info .toast__icon {
  color: var(--brand-secondary, var(--color-secondary));
}

/* --------------------------------------------------------------------------
   4. TOAST SUB-COMPONENTS
   -------------------------------------------------------------------------- */
.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.toast__message {
  flex: 1;
  font-weight: 500;
}

.toast__close {
  background: transparent;
  border: none;
  color: var(--text-secondary, var(--color-text-secondary));
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button, 999px);
  transition: all var(--duration-fast, 150ms);
}

.toast__close:hover {
  color: var(--text-primary, var(--color-text-primary));
  background: var(--surface-primary, var(--color-bg));
}

[data-theme="admin"] .toast__close {
  color: var(--admin-text-muted, #a497c6);
}

[data-theme="admin"] .toast__close:hover {
  color: var(--color-surface);
}
/* === End: components/toasts.css === */

/* === Start: components/hero.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — PAGE HERO COMPONENT LIBRARY (hero.css)
   Consolidates storefront page banners, hero sections, breadcrumb bars,
   headings, subtitles, and CTA action groups.
   Supports BEM syntax (.page-hero, .page-hero__title, etc.) with alias mapping
   for 100% backward compatibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE PAGE HERO (.page-hero)
   -------------------------------------------------------------------------- */
.page-hero,
.hero-section,
.page-banner,
.hero-banner {
  background: var(--gradient-primary);
  color: var(--color-text-inverse, var(--color-surface));
  padding: var(--space-9, 60px) var(--space-6, 24px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Modifiers */
.page-hero--compact {
  padding: var(--space-7, 40px) var(--space-6, 24px);
}

.page-hero--large {
  padding: var(--space-10, 80px) var(--space-6, 24px);
}

.page-hero--dark {
  background: var(--neutral-900, var(--color-text-primary));
}

/* --------------------------------------------------------------------------
   2. HERO SUB-COMPONENTS
   -------------------------------------------------------------------------- */

/* Hero Heading Title */
.page-hero__title,
.hero-title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(28px, 4vw, var(--text-4xl, 44px));
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.05em);
  text-transform: uppercase;
  color: var(--text-inverse, var(--color-surface));
  line-height: var(--leading-tight, 1.15);
  margin: 0 0 var(--space-3, 12px) 0;
}

/* Hero Subtitle / Description */
.page-hero__subtitle,
.hero-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-body-lg, 18px);
  color: var(--color-secondary-light, #F7F0E8);
  max-width: 680px;
  margin: 0 auto;
  line-height: var(--leading-relaxed, 1.6);
  font-weight: 400;
}

.page-hero--dark .page-hero__subtitle,
.page-hero--dark .hero-subtitle {
  color: var(--neutral-300, #ddd8d3);
}

/* Hero CTA Action Buttons Container */
.page-hero__actions,
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  margin-top: var(--space-7, 28px);
  flex-wrap: wrap;
}

/* Hero Breadcrumb Wrapper */
.page-hero__breadcrumb,
.breadcrumb-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  font-size: var(--text-sm, 13px);
  color: var(--admin-text-muted, #a497c6);
  margin-bottom: var(--space-4, 16px);
}

.page-hero__breadcrumb a,
.breadcrumb-wrapper a {
  color: var(--color-secondary-light, #F7F0E8);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms);
}

.page-hero__breadcrumb a:hover,
.breadcrumb-wrapper a:hover {
  color: var(--text-inverse, var(--color-surface));
  text-decoration: underline;
}
/* === End: components/hero.css === */

/* === Start: components/quantity.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — QUANTITY CONTROL COMPONENT LIBRARY (quantity.css)
   Consolidates product detail quantity pickers, cart item quantity adjustment
   steppers, plus/minus buttons, and spin-button-less number inputs.
   Supports BEM syntax (.qty-control, .qty-control__btn, etc.) with alias mapping
   for 100% backward compatibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE QUANTITY CONTROL WRAPPER (.qty-control)
   -------------------------------------------------------------------------- */
.qty-control,
.quantity-selector,
.cart-qty,
.item-quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-primary, var(--color-surface));
  height: 40px;
  overflow: hidden;
  user-select: none;
  transition: border-color var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.qty-control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.15);
}

/* Modifiers */
.qty-control--sm {
  height: 32px;
}

.qty-control--lg {
  height: 48px;
}

/* Admin Scoped Dark Theme */
[data-theme="admin"] .qty-control,
[data-theme="admin"] .quantity-selector {
  background: #0f0721;
  border-color: var(--admin-border, #2c1a4d);
}

[data-theme="admin"] .qty-control:focus-within {
  border-color: var(--admin-accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

/* --------------------------------------------------------------------------
   2. INCREMENT / DECREMENT STEPPER BUTTONS
   -------------------------------------------------------------------------- */
.qty-control__btn,
.qty-btn {
  width: 36px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary, var(--color-text-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--text-md, 16px);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast, 150ms),
              color var(--duration-fast, 150ms);
}

.qty-control__btn:hover,
.qty-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.qty-control__btn:active,
.qty-btn:active {
  background: var(--color-primary-light);
}

.qty-control__btn:disabled,
.qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

[data-theme="admin"] .qty-control__btn,
[data-theme="admin"] .qty-btn {
  color: var(--admin-text-main, #f3f0ff);
}

[data-theme="admin"] .qty-control__btn:hover,
[data-theme="admin"] .qty-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   3. QUANTITY INPUT FIELD
   -------------------------------------------------------------------------- */
.qty-control__input,
.qty-input {
  width: 44px;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--text-base, 14px);
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
}

.qty-control__input::-webkit-outer-spin-button,
.qty-control__input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-control__input:focus,
.qty-input:focus {
  outline: none;
}

[data-theme="admin"] .qty-control__input,
[data-theme="admin"] .qty-input {
  color: var(--admin-text-main, #f3f0ff);
}
/* === End: components/quantity.css === */

/* === Start: components/cart-drawer.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — CART DRAWER COMPONENT (cart-drawer.css)
   Phase 3 Component Polish: Soft Elevation, Teal Header, Inter/Outfit Fonts,
   14px Input/Thumb Radius, and Smooth Spring Transitions.
   ========================================================================== */

/* ── OVERLAY BACKDROP ── */
.mini-cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-bg, rgba(31, 41, 55, 0.5));
  backdrop-filter: blur(var(--overlay-blur, 4px));
  z-index: var(--z-modal, 1200);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              visibility var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.mini-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── DRAWER CONTAINER ── */
.mini-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background: var(--surface-card, var(--color-surface));
  z-index: calc(var(--z-modal, 1200) + 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drawer, -6px 0 24px rgba(31, 41, 55, 0.08));
  transform: translateX(100%);
  transition: transform var(--duration-drawer, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.mini-cart-drawer.is-open {
  transform: translateX(0);
}

/* ── DRAWER HEADER ── */
.mini-cart-header {
  padding: 22px 28px;
  background: var(--brand-primary, var(--color-primary));
  color: var(--text-inverse, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-cart-header-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 20px);
  font-weight: 600;
  margin: 0;
}

.mini-cart-close-btn {
  background: none;
  border: none;
  color: var(--text-inverse, var(--color-surface));
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  opacity: 0.9;
  transition: opacity var(--duration-fast, 150ms);
}

.mini-cart-close-btn:hover {
  opacity: 1;
}

/* ── DRAWER BODY & ITEMS ── */
.mini-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.mini-cart-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary, var(--color-text-secondary));
  font-family: var(--font-body, 'Inter', sans-serif);
}

.mini-cart-item {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  position: relative;
  align-items: center;
}

.mini-cart-thumb {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-input, 14px);
  object-fit: cover;
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  flex-shrink: 0;
}

.mini-cart-details {
  flex: 1;
  min-width: 0;
}

.mini-cart-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-cart-title a {
  color: inherit;
  text-decoration: none;
}

.mini-cart-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-cart-price {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary, var(--color-primary));
}

/* Quantity Steppers inside Cart Drawer */
.mini-cart-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-button, 999px);
  overflow: hidden;
}

.mini-cart-qty-ctrl button {
  width: 28px;
  height: 28px;
  background: var(--surface-primary, var(--color-bg));
  border: none;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary, var(--color-text-primary));
  transition: background-color var(--duration-fast, 150ms);
}

.mini-cart-qty-ctrl button:hover {
  background: var(--teal-50, #F0FDFA);
  color: var(--brand-primary, var(--color-primary));
}

.mini-cart-qty-ctrl span {
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
}

.mini-cart-remove-btn {
  background: none;
  border: none;
  color: var(--text-secondary, var(--color-text-secondary));
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  top: 0;
  right: 0;
  transition: color var(--duration-fast, 150ms);
}

.mini-cart-remove-btn:hover {
  color: var(--feedback-error, var(--color-danger));
}

/* ── DRAWER FOOTER & TOTALS ── */
.mini-cart-footer {
  padding: 24px 28px;
  border-top: 1px solid var(--border-primary, var(--color-border));
  background: var(--surface-primary, var(--color-bg));
}

.mini-cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  margin-bottom: 20px;
  color: var(--text-primary, var(--color-text-primary));
}

.mini-cart-subtotal-row strong {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 22px;
  color: var(--brand-primary, var(--color-primary));
}

.mini-cart-footer-actions {
  display: flex;
  gap: 12px;
}

.btn-drawer-cart {
  flex: 1;
  text-align: center;
  padding: 14px;
  background: var(--brand-primary, var(--color-primary));
  color: var(--text-inverse, var(--color-surface));
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  box-shadow: var(--shadow-sm);
  border: none;
  height: auto;
  min-height: 48px;
}

.btn-drawer-cart:hover {
  background: var(--brand-primary-hover, var(--color-primary-hover));
  color: var(--text-inverse, var(--color-surface));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-drawer-secondary {
  flex: 1;
  text-align: center;
  min-height: 48px;
  border: 1px solid var(--border-primary, var(--color-border));
  background: var(--surface-card, var(--color-surface));
  color: var(--text-primary, var(--color-text-primary));
  box-shadow: none;
}

.btn-drawer-secondary:hover {
  background: var(--surface-primary, var(--color-bg));
  border-color: var(--brand-primary, var(--color-primary));
  color: var(--brand-primary, var(--color-primary));
}

@media (max-width: 640px) {
  .mini-cart-qty-ctrl button {
    width: 36px;
    height: 36px;
  }

  .mini-cart-qty-ctrl span {
    min-width: 24px;
    text-align: center;
    padding: 0 8px;
  }

  .mini-cart-remove-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 420px) {
  .mini-cart-footer-actions {
    flex-direction: column;
  }
}
/* === End: components/cart-drawer.css === */

/* === Start: components/search-modal.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — HEADER SEARCH MODAL (search-modal.css)
   Premium top sheet. Form → /shop?q= ; live results → /shop/api/search.
   ========================================================================== */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

.search-modal[hidden] {
  display: none;
}

.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 14, 0.48);
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.search-modal.is-open .search-modal__backdrop {
  opacity: 1;
}

.search-modal__panel {
  position: relative;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--color-surface, #fff) 0%, var(--color-bg, #fdfbf7) 100%);
  border-bottom: 1px solid var(--color-border, rgba(31, 31, 31, 0.1));
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow:
    0 4px 16px rgba(20, 16, 14, 0.06),
    0 28px 56px -24px rgba(20, 16, 14, 0.28);
  transform: translateY(-100%);
  transition: transform var(--duration-drawer, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.search-modal.is-open .search-modal__panel {
  transform: translateY(0);
}

.search-modal__shell {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.search-modal .unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── INPUT ROW ── */
.search-modal__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0 20px;
}

.search-modal__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(31, 31, 31, 0.1));
  border-radius: 10px;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease;
}

.search-modal__field:focus-within {
  border-color: var(--color-primary, #d31145);
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
}

.search-modal__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.search-modal__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.search-modal__input:focus,
.search-modal__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.search-modal__input::placeholder {
  color: var(--color-text-muted, #9a9a9a);
  font-weight: 450;
}

.search-modal__input::-webkit-search-cancel-button {
  display: none;
}

.search-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border, rgba(31, 31, 31, 0.1));
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
}

.search-modal__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.search-modal__close:hover {
  background: var(--color-surface, #fff);
  border-color: var(--color-primary-muted, #f2b3c4);
  color: var(--color-primary);
}

.search-modal__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── BODY ── */
.search-modal__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 32px;
}

.search-modal__label {
  margin: 0 0 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9a9a9a);
}

.search-modal__hint {
  margin: 18px 0 0;
  max-width: 36rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted, #9a9a9a);
}

/* ── SUGGESTION CHIPS ── */
.search-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-modal__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--color-border, rgba(31, 31, 31, 0.1));
  border-radius: 6px;
  background: var(--color-surface, #fff);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary, #4c4c4c);
  text-decoration: none;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
}

.search-modal__chip:hover,
.search-modal__chip:focus-visible {
  border-color: var(--color-primary-muted, #f2b3c4);
  background: rgba(211, 17, 69, 0.05);
  color: var(--color-primary);
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.1);
}

/* ── RESULTS ── */
.search-modal__results[hidden] {
  display: none;
}

.search-results {
  display: grid;
  gap: 4px;
}

.search-result__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease;
}

.search-result__link:hover,
.search-result__link:focus-visible {
  background: var(--color-surface, #fff);
  border-color: var(--color-border, rgba(31, 31, 31, 0.08));
}

.search-result__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.search-result__image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(31, 31, 31, 0.08));
  background: var(--color-bg, #fdfbf7);
}

.search-result__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.search-result__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.search-result__meta {
  font-size: 12px;
  color: var(--color-text-muted, #9a9a9a);
}

.search-result__price {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

.search-modal__empty {
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
  color: var(--color-text-secondary, #4c4c4c);
}

.search-modal__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms) ease;
}

.search-modal__all:hover {
  color: var(--color-primary-hover, #a00c33);
  text-decoration: none;
}

@media (max-width: 1100px) {
  .search-modal__panel {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  .search-modal__shell {
    width: min(920px, calc(100% - 32px));
  }

  .search-modal__form {
    padding-top: 20px;
  }
}

@media (max-width: 640px) {
  .search-modal__shell {
    width: calc(100% - 24px);
  }

  .search-modal__form {
    gap: 8px;
    padding: 16px 0 14px;
  }

  .search-modal__input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .search-modal__close {
    width: 44px;
    height: 44px;
  }

  .search-modal__chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-modal__panel,
  .search-modal__backdrop {
    transition-duration: 0.01ms;
  }
}
/* === End: components/search-modal.css === */

/* === Start: components/faq-accordion.css === */
/* ==========================================================================
   Page FAQ accordion (pfq-*) — editorial premium, not card-stack + circles
   ========================================================================== */

.pfq {
  --pfq-rail: var(--color-primary);
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(211, 17, 69, 0.06), transparent 55%),
    linear-gradient(180deg, var(--color-surface-warm) 0%, var(--color-bg) 100%);
  border-top: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.pfq::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-primary) 0%, transparent 85%);
  opacity: 0.85;
}

.pfq__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.pfq__header {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.pfq__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pfq__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.pfq__subtitle {
  margin: 0.75rem 0 0;
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.pfq__panel {
  border-top: 1px solid var(--color-border);
}

.pfq__item {
  border-bottom: 1px solid var(--color-border);
}

.pfq__q-wrap {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.pfq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0.15rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.pfq__q:hover {
  color: var(--color-primary);
}

.pfq__q:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.pfq__num {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--color-primary);
  min-width: 1.5rem;
}

.pfq__q-text {
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.pfq__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform 0.28s ease, color 0.2s ease;
}

.pfq__item.is-open .pfq__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.pfq__item.is-open .pfq__q-text {
  color: var(--color-primary);
}

.pfq__a {
  overflow: hidden;
}

.pfq__a[hidden] {
  display: none;
}

.pfq__item.is-open .pfq__a {
  animation: pfqReveal 0.32s ease;
}

.pfq__a-inner {
  padding: 0 0 1.25rem 2.65rem;
  max-width: 40rem;
}

.pfq__a-inner p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@keyframes pfqReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .pfq__q {
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .pfq__a-inner {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfq__chevron,
  .pfq__q,
  .pfq__item.is-open .pfq__a {
    transition: none;
    animation: none;
  }
}
/* === End: components/faq-accordion.css === */

/* === Start: components/motion-reveal.css === */
/* ==========================================================================
   Scroll reveal — homepage / storefront sections ([data-reveal])
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.6s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

[data-reveal-child] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.5s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-inview [data-reveal-child] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-child] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* === End: components/motion-reveal.css === */

/* === Start: components/enquiry-modal.css === */
/* ==========================================================================
   Enquiry modal — motion + modern visual system
   Loaded after extracted-styles so these rules win the cascade.
   ========================================================================== */

.em-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 14, 0.55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.em-overlay.is-open {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.em-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.em-modal.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.em-modal__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  background: var(--color-surface);
  max-width: 900px;
  width: 100%;
  max-height: min(92vh, 760px);
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow:
    0 4px 16px rgba(20, 16, 14, 0.06),
    0 28px 64px -20px rgba(20, 16, 14, 0.28);
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  animation: none;
  transition:
    transform var(--duration-drawer, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--duration-drawer, 250ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.em-modal.is-open .em-modal__inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* CLOSE */
.em-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
}

.em-close:hover {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-text-primary);
}

.em-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* LEFT — Form */
.em-left {
  padding: 36px 36px 32px;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  background: var(--color-surface);
}

.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.em-eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-primary);
}

.em-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-text-primary);
  margin: 0 0 8px;
  line-height: 1.2;
}

.em-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 36rem;
}

.em-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-success-text);
  margin-bottom: 16px;
}

.em-error {
  background: #fff8f9;
  border: 1px solid var(--color-primary-muted, #f2b3c4);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0;
}

.em-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.em-field:last-of-type {
  margin-bottom: 0;
}

.em-field label {
  font-family: var(--font-body);
  font-weight: 550;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-secondary);
}

.em-field label span {
  color: var(--color-primary);
}

.em-field input,
.em-field select,
.em-field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-bg, #fdfbf7);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.em-field input:hover,
.em-field select:hover,
.em-field textarea:hover {
  border-color: #d4cfc6;
}

.em-field input:focus,
.em-field select:focus,
.em-field textarea:focus,
.em-field input:focus-visible,
.em-field select:focus-visible,
.em-field textarea:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
}

.em-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.em-field textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.55;
}

.em-field small {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.em-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 20px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  margin-top: 18px;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) ease;
}

.em-submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.em-submit:active:not(:disabled) {
  transform: scale(0.99);
}

.em-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.em-submit:disabled {
  background: #c8c2ba;
  border-color: #c8c2ba;
  cursor: not-allowed;
}

@keyframes em-spin {
  to {
    transform: rotate(360deg);
  }
}

/* RIGHT — Contact info */
.em-right {
  padding: 36px 28px 32px;
  background:
    linear-gradient(165deg, #1f1b19 0%, #2a2421 55%, #1a1614 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.88);
}

.em-right__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-surface);
  margin: 0 0 14px;
}

.em-phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.em-phone,
.em-email {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
  word-break: break-word;
}

.em-phone:hover,
.em-email:hover {
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.em-phone svg,
.em-email svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
}

.em-right__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 18px 0;
}

.em-hours {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-surface);
  letter-spacing: 0;
  margin-bottom: 6px;
}

.em-hours-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

.em-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.em-cert {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 5px 10px;
}

.em-cert-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.45;
}

.em-mobile-contacts {
  display: none;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.em-mobile-contacts a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

.em-mobile-contacts a:hover {
  border-color: var(--color-primary-muted, #f2b3c4);
  color: var(--color-primary);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .em-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .em-modal__inner {
    grid-template-columns: 1fr;
    max-height: min(94vh, 900px);
    border-radius: 16px 16px 12px 12px;
  }

  .em-right {
    display: none;
  }

  .em-left {
    padding: 28px 20px 24px;
    border-right: none;
  }

  .em-close {
    top: 12px;
    right: 12px;
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

  .em-close:hover {
    background: var(--color-surface);
    color: var(--color-primary);
  }

  .em-mobile-contacts {
    display: flex;
  }
}

@media (max-width: 480px) {
  .em-grid {
    grid-template-columns: 1fr;
  }

  .em-heading {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .em-overlay,
  .em-modal,
  .em-modal__inner {
    transition-duration: 0.01ms;
  }
}
/* === End: components/enquiry-modal.css === */

/* === Start: components/brand-select.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — Brand custom select (enhances native <select>)
   ========================================================================== */

.brand-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  vertical-align: middle;
}

.brand-select--block {
  display: flex;
  width: 100%;
}

.brand-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  appearance: none !important;
  pointer-events: none !important;
}

.brand-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 8px 14px 8px 16px;
  border: 1px solid var(--border-primary, var(--color-border, rgba(31, 31, 31, 0.12)));
  border-radius: var(--radius-input, 14px);
  background: var(--surface-card, var(--color-surface, #fff));
  color: var(--text-primary, var(--color-text-primary, #1f1f1f));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
}

.brand-select--block .brand-select__trigger {
  border-radius: 8px;
  min-height: 44px;
  padding: 11px 13px;
  background: var(--color-bg, #fdfbf7);
}

.brand-select__trigger:hover {
  border-color: #d4cfc6;
}

.brand-select__trigger:focus {
  outline: none;
}

.brand-select__trigger:focus-visible {
  border-color: var(--color-primary, #d31145);
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
  outline: none !important;
}

.brand-select.is-open .brand-select__trigger {
  border-color: var(--color-primary, #d31145);
  box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
}

.brand-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-select__value.is-placeholder {
  color: var(--text-secondary, var(--color-text-secondary, #6b6b6b));
  font-weight: 450;
}

.brand-select__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-secondary, #6b6b6b);
  transition: transform var(--duration-fast, 150ms) ease;
}

.brand-select.is-open .brand-select__chevron {
  transform: rotate(180deg);
  color: var(--color-primary, #d31145);
}

.brand-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-modal, 1200) + 5);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  background: var(--surface-card, var(--color-surface, #fff));
  border: 1px solid var(--border-primary, var(--color-border, rgba(31, 31, 31, 0.12)));
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(20, 16, 14, 0.06),
    0 18px 36px -16px rgba(20, 16, 14, 0.22);
}

.brand-select__list[hidden] {
  display: none !important;
}

.brand-select.is-drop-up .brand-select__list {
  top: auto;
  bottom: calc(100% + 6px);
}

.brand-select__option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary, var(--color-text-primary, #1f1f1f));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.brand-select__option:hover,
.brand-select__option.is-active {
  background: rgba(211, 17, 69, 0.08);
  color: var(--color-primary, #d31145);
}

.brand-select__option.is-selected {
  background: var(--color-primary, #d31145);
  color: #fff;
}

.brand-select__option.is-selected:hover,
.brand-select__option.is-selected.is-active {
  background: var(--color-primary-hover, #a00c33);
  color: #fff;
}

.brand-select__option:disabled,
.brand-select__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.brand-select--compact {
  min-width: 180px;
}

.brand-select--compact .brand-select__trigger {
  min-height: 40px;
  padding: 8px 36px 8px 16px;
  border-radius: var(--radius-input, 14px);
}

@media (max-width: 640px) {
  .brand-select--compact {
    min-width: 0;
    width: 100%;
  }

  .brand-select__option {
    min-height: 44px;
    padding: 12px 14px;
  }

  .brand-select__trigger {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-select__trigger,
  .brand-select__chevron,
  .brand-select__option {
    transition: none;
  }
}
/* === End: components/brand-select.css === */

/* === Start: components/page-nav.css === */
/* ==========================================================================
   Homepage section nav + back-to-top
   ========================================================================== */

.page-section-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(12px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  background: rgba(253, 251, 247, 0.92);
  border: 1px solid var(--color-border, #e8e4df);
  border-radius: 16px;
  box-shadow: 0 12px 32px -18px rgba(31, 31, 31, 0.35);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-motion, 250ms) var(--ease-out),
    transform var(--duration-motion, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility var(--duration-motion, 250ms);
}

.page-section-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.page-section-nav__link,
.page-section-nav__top {
  display: block;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #5c5c5c);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    color var(--duration-fast, 150ms),
    background var(--duration-fast, 150ms);
}

.page-section-nav__link:hover,
.page-section-nav__top:hover {
  color: var(--color-primary, #d31145);
  background: var(--color-primary-light, #fde7ed);
}

.page-section-nav__link.is-active {
  color: var(--color-primary, #d31145);
  background: var(--color-primary-light, #fde7ed);
}

.page-section-nav__top {
  margin-top: 4px;
  border-top: 1px solid var(--color-border-subtle, #f2efea);
  border-radius: 0 0 10px 10px;
  color: var(--color-text-primary, #1f1f1f);
}

@media (max-width: 900px) {
  .page-section-nav {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%) translateY(12px);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    gap: 4px;
    padding: 8px;
    border-radius: 999px;
  }

  .page-section-nav.is-visible {
    transform: translateX(-50%) translateY(0);
  }

  .page-section-nav__link,
  .page-section-nav__top {
    white-space: nowrap;
    font-size: 10px;
    padding: 8px 12px;
  }

  .page-section-nav__top {
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--color-border-subtle, #f2efea);
    border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-section-nav {
    transition: none;
  }
}
/* === End: components/page-nav.css === */

/* === Start: sections/who-we-are.css === */
/* ═══════════════════════════════════════════════════════════════════
   WHO WE ARE SECTION (HOMEPAGE)
   ═══════════════════════════════════════════════════════════════════ */
.who-we-are-section {
  background-color: #f8fafc;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}

.who-we-are-container {
  max-width: 1280px;
  margin: 0 auto;
}

.who-we-are-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.who-we-are-media {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
}

.who-we-are-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #e2e8f0;
}

.who-we-are-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.who-we-are-media:hover .who-we-are-img {
  transform: scale(1.03);
}

.who-we-are-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.who-we-are-eyebrow {
  color: #c8102e;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: inline-block;
}

.who-we-are-heading {
  font-size: 2.65rem;
  font-weight: 800;
  line-height: 1.22;
  color: #0f172a;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.who-we-are-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 36px;
  max-width: 580px;
}

.who-we-are-cta-wrap {
  margin-top: 8px;
}

.who-we-are-btn {
  background-color: #c8102e;
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.25);
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.who-we-are-btn:hover {
  background-color: #a00c24;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(200, 16, 46, 0.35);
}

@media (max-width: 991px) {
  .who-we-are-section {
    padding: 56px 20px;
  }

  .who-we-are-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .who-we-are-heading {
    font-size: 2rem;
  }

  .who-we-are-text {
    font-size: 1rem;
    margin-bottom: 28px;
  }
}
/* === End: sections/who-we-are.css === */

/* === Start: sections/about-us.css === */
/* ═══════════════════════════════════════════════════════════════════
   REDESIGNED ABOUT US PAGE STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO BANNER ── */
.about-hero {
  position: relative;
  height: 440px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 48px;
  color: #ffffff;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.4) 60%,
    rgba(15, 23, 42, 0.15) 100%
  );
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.about-hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ── 2. SPLIT ROW SECTIONS (OUR STORY & OUR PEOPLE) ── */
.about-split-row {
  display: flex;
  min-height: 520px;
  width: 100%;
}

.about-split-card--red {
  flex: 1;
  background-color: #c8102e;
  color: #ffffff;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-split-card--white {
  flex: 1;
  background-color: #ffffff;
  color: #0f172a;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-split-media {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.about-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dual Media Grid for Our People */
.about-dual-media {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background-color: #f1f5f9;
}

.about-dual-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Eyebrows & Typography */
.about-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.about-eyebrow--light {
  color: rgba(255, 255, 255, 0.85);
}

.about-eyebrow--red {
  color: #c8102e;
}

.about-heading {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.about-heading--light {
  color: #ffffff;
}

.about-heading--dark {
  color: #0f172a;
}

.about-paragraph {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 20px;
}

.about-paragraph--light {
  color: rgba(255, 255, 255, 0.9);
}

.about-paragraph--dark {
  color: #475569;
}

/* ── 3. OUR VALUES SECTION ── */
.about-values-section {
  padding: 100px 24px;
  background-color: #ffffff;
  text-align: center;
}

.about-values-container {
  max-width: 1280px;
  margin: 0 auto;
}

.about-values-header {
  margin-bottom: 60px;
  text-align: center;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.about-value-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.about-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-value-img-wrap {
  height: 240px;
  width: 100%;
  overflow: hidden;
}

.about-value-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.about-value-card:hover .about-value-img-wrap img {
  transform: scale(1.05);
}

.about-value-body {
  padding: 24px 20px;
  flex: 1;
}

.about-value-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.about-value-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #64748b;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .about-hero {
    height: 320px;
    padding: 0 24px;
  }

  .about-hero-title {
    font-size: 2.5rem;
  }

  .about-split-row {
    flex-direction: column;
    min-height: auto;
  }

  .about-split-row--reverse {
    flex-direction: column-reverse;
  }

  .about-split-card--red,
  .about-split-card--white {
    padding: 48px 24px;
  }

  .about-split-media {
    height: 350px;
  }

  .about-heading {
    font-size: 2rem;
  }

  .about-values-section {
    padding: 60px 20px;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-dual-media {
    grid-template-columns: 1fr;
    height: auto;
  }

  .about-dual-media img {
    height: 250px;
  }
}
/* === End: sections/about-us.css === */

/* === Start: sections/what-makes-us-better.css === */
/* ═══════════════════════════════════════════════════════════════════
   WHAT MAKES US BETTER SECTION (HOMEPAGE)
   ═══════════════════════════════════════════════════════════════════ */
.wmub-section {
  padding: 40px 24px 80px 24px;
  background-color: #f8fafc;
}

.wmub-container {
  max-width: 1280px;
  margin: 0 auto;
}

.wmub-card {
  background-color: #c8102e;
  border-radius: 28px;
  padding: 56px 48px;
  color: #ffffff;
  box-shadow: 0 20px 50px -10px rgba(200, 16, 46, 0.25);
}

.wmub-title {
  font-size: 2.25rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
  font-family: inherit;
}

.wmub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.wmub-item {
  background-color: rgba(150, 10, 32, 0.55);
  border-radius: 18px;
  padding: 32px 30px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: transform 0.25s ease, background-color 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wmub-item:hover {
  background-color: rgba(130, 8, 28, 0.75);
  transform: translateY(-2px);
}

.wmub-icon {
  color: #ffffff;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wmub-content {
  flex: 1;
}

.wmub-item-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.wmub-item-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.wmub-readmore {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.wmub-readmore:hover {
  opacity: 0.85;
}

@media (max-width: 991px) {
  .wmub-section {
    padding: 24px 16px 56px 16px;
  }

  .wmub-card {
    padding: 36px 24px;
    border-radius: 20px;
  }

  .wmub-title {
    font-size: 1.85rem;
    margin-bottom: 28px;
  }

  .wmub-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wmub-item {
    padding: 24px 20px;
    gap: 16px;
  }

  .wmub-item-title {
    font-size: 1.2rem;
  }
}
/* === End: sections/what-makes-us-better.css === */

/* === Start: sections/mission-statement.css === */
/* ═══════════════════════════════════════════════════════════════════
   MISSION STATEMENT SECTION (HOMEPAGE) WITH PREMIUM ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */
.mission-statement-section {
  padding: 60px 24px 90px 24px;
  background-color: #f8fafc;
  display: flex;
  justify-content: center;
}

.mission-statement-container {
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
}

.mission-statement-text {
  font-size: 1.85rem;
  line-height: 1.55;
  font-weight: 300;
  color: #334155;
  margin: 0;
  letter-spacing: -0.01em;
  font-family: inherit;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mission-statement-text.ms-animated {
  opacity: 1;
  transform: translateY(0);
}

/* Premium Liquid Shimmering Red Highlight Text */
.ms-highlight {
  color: #c8102e;
  font-weight: 700;
  display: inline-block;
  background: linear-gradient(120deg, #c8102e 0%, #ff4d6d 50%, #c8102e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: msShimmer 4s linear infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: default;
}

.ms-highlight:hover {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 4px 12px rgba(200, 16, 46, 0.35));
}

@keyframes msShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

@media (max-width: 991px) {
  .mission-statement-section {
    padding: 40px 20px 60px 20px;
  }

  .mission-statement-text {
    font-size: 1.35rem;
    line-height: 1.5;
  }
}
/* === End: sections/mission-statement.css === */