/** Shopify CDN: Minification failed

Line 208:0 Unexpected "<"
Line 365:0 Unexpected "<"

**/

  * { box-sizing: border-box; }
  body { margin: 0; font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1B2A4E; background: #fff; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .stage-banner { background: #fff5e8; border-bottom: 2px solid #a45b16; padding: 10px 20px; text-align: center; font-size: 13px; color: #6a3500; font-weight: 600; }
  .stage-banner span { display: inline-block; padding: 2px 8px; background: #a45b16; color: #fff; border-radius: 3px; font-size: 11px; letter-spacing: .08em; margin-right: 8px; }
  .ov-ship-bar { background:#1B2A4E; color:#fff; padding:8px 16px; text-align:center; font-size:13px; position:sticky; top:0; z-index:50; }
  .ov-ship-bar strong { color:#7FB8E0; }
  .ov-ship-progress { display:inline-block; width:120px; height:6px; background:rgba(255,255,255,0.20); border-radius:3px; vertical-align:middle; margin:0 6px; overflow:hidden; }
  .ov-ship-progress > div { height:100%; background:#7FB8E0; }
  .ov-quiz-promo { background: #EBF5FB; color: #1B2A4E; padding: 10px 16px; text-align: center; font-size: 13px; border-bottom: 1px solid rgba(45,156,219,0.20); }
  .ov-quiz-promo strong { font-weight: 700; }
  .ov-quiz-promo a { color: #2D9CDB; font-weight: 700; text-decoration: none; margin-left: 8px; padding: 4px 12px; border: 1px solid #2D9CDB; border-radius: 14px; font-size: 12px; }
  .stage-nav { background: #0f171f; color: #fff; padding: 9px 16px; font-size: 12px; }
  .stage-nav .inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .stage-nav .label { color: #FF9F40; font-weight: 700; letter-spacing: .05em; margin-right: 8px; }
  .stage-nav a { color: #fff; text-decoration: none; padding: 5px 11px; border-radius: 4px; background: rgba(255,255,255,.08); }
  .stage-nav a.current { background: #14F195; color: #0f171f; font-weight: 700; }
  .stage-nav .sep { opacity:.5; margin: 0 4px; }
  .stage-nav .group { opacity: .6; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
  .ov-header { background: #fff; border-bottom: 1px solid rgba(27,42,78,0.06); padding: 18px 24px; }
  .ov-header-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .ov-header-nav { display: flex; gap: 28px; font-size: 14px; align-items: baseline; }
  .ov-header-nav a { color: #1B2A4E; text-decoration: none; font-weight: 500; padding-bottom: 4px; border-bottom: 2px solid transparent; }
  .ov-header-nav a.active { border-bottom-color: #2D9CDB; color: #2D9CDB; }
  .ov-logo { font-weight: 800; font-size: 24px; letter-spacing: 0.06em; color: #1B2A4E; text-decoration: none; }
  .ov-header-actions { display: flex; gap: 18px; align-items: center; font-size: 13px; }
  .ov-header-actions a { color: #1B2A4E; text-decoration: none; font-weight: 600; }
  .ov-promo-strip { background: #1B2A4E; color: #fff; padding: 10px 16px; text-align: center; font-size: 12.5px; }
  .ov-footer { background: #1B2A4E; color: #fff; padding: 48px 24px 32px; margin-top: 64px; }
  .ov-footer-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; }
  .ov-footer h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #7FB8E0; margin: 0 0 12px; }
  .ov-footer ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; line-height: 1.9; }
  .ov-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
  .ov-footer-bottom { max-width: 1180px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 11.5px; color: rgba(255,255,255,0.6); text-align: center; }


  /* ──────── Collection page layout (collagen, compression, all) ──────── */
  .col-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
  @media (min-width: 1024px) { .col-container { padding: 0 32px; } }

  /* Hero */
  .col-hero { padding: 48px 0 32px; background: #fff; border-bottom: 1px solid rgba(27,42,78,0.08); }
  @media (min-width: 1024px) { .col-hero { padding: 64px 0 40px; } }
  .col-hero-inner { max-width: 820px; }
  .col-hero-crumb { font-size: 12px; color: #52606e; margin: 0 0 14px; }
  .col-hero-crumb a { color: #52606e; text-decoration: none; }
  .col-hero-crumb a:hover { color: #2D9CDB; }
  .col-hero-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 14px; display: block; }
  .col-hero-h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; color: #1B2A4E; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.015em; }
  .col-hero-intro { font-size: 16.5px; line-height: 1.65; color: #43515e; max-width: 680px; margin: 0 0 14px; }
  .col-hero-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #2D9CDB; font-weight: 600; text-decoration: none; }
  .col-hero-link:hover { text-decoration: underline; }

  /* Shell with sidebar + grid */
  .col-shell { background: #fff; padding: 32px 0 64px; }
  @media (min-width: 1024px) { .col-shell { padding: 40px 0 96px; } }
  .col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  @media (min-width: 1024px) {
    .col-grid { grid-template-columns: 240px 1fr; gap: 40px; }
  }

  /* Filter sidebar */
  .col-sidebar { background: #fff; border: 1px solid rgba(27,42,78,0.08); padding: 22px 24px; align-self: start; }
  @media (min-width: 1024px) { .col-sidebar { position: sticky; top: 24px; } }
  .col-sidebar h3 { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 14px; }
  .col-filter-group { border-bottom: 1px solid rgba(27,42,78,0.08); padding: 14px 0; }
  .col-filter-group:last-child { border-bottom: none; padding-bottom: 0; }
  .col-filter-group:first-child { padding-top: 0; }
  .col-filter-group h4 { font-size: 11px; font-weight: 700; color: #1B2A4E; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; }
  .col-filter-opt { display: flex; align-items: center; padding: 5px 0; font-size: 13px; color: #43515e; cursor: pointer; }
  .col-filter-opt input[type="checkbox"] { margin-right: 9px; accent-color: #2D9CDB; }
  .col-filter-opt .count { color: #52606e; font-size: 12px; margin-left: 6px; }

  /* Sort + product count toolbar */
  .col-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 18px; border-bottom: 1px solid rgba(27,42,78,0.08); margin-bottom: 24px; font-size: 13px; color: #52606e; }
  .col-toolbar select { border: 1px solid rgba(27,42,78,0.15); padding: 7px 28px 7px 10px; font-size: 13px; font-family: inherit; color: #1B2A4E; background: #fff; }

  /* Product grid */
  .col-products { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @media (min-width: 640px) { .col-products { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .col-products { grid-template-columns: 1fr 1fr 1fr; } }
  .col-product { background: #fff; border: 1px solid rgba(27,42,78,0.08); transition: box-shadow .15s, transform .15s; cursor: pointer; }
  .col-product:hover { box-shadow: 0 12px 28px rgba(27,42,78,0.10); transform: translateY(-2px); }
  .col-product__img { aspect-ratio: 1/1; background: #F7F9FC; display: grid; place-items: center; color: #52606e; font-size: 11px; letter-spacing: .04em; position: relative; overflow: hidden; }
  .col-product__img .badge { position: absolute; top: 10px; left: 10px; background: #1B2A4E; color: #fff; padding: 4px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .col-product__body { padding: 18px 20px 22px; }
  .col-product__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
  .col-product__pill { display: inline-block; padding: 3px 8px; background: #F7F9FC; color: #2D9CDB; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
  .col-product__title { font-size: 15px; font-weight: 600; color: #1B2A4E; margin: 0 0 6px; line-height: 1.3; }
  .col-product__desc { font-size: 13px; color: #52606e; margin: 0 0 12px; line-height: 1.55; }
  .col-product__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .col-product__price-amt { font-size: 17px; font-weight: 700; color: #1B2A4E; }
  .col-product__price-sub { font-size: 12px; color: #52606e; }

  /* Comparison table block */
  .col-compare { background: #F7F9FC; padding: 56px 0; margin: 56px 0 0; border-top: 1px solid rgba(27,42,78,0.08); }
  @media (min-width: 1024px) { .col-compare { padding: 80px 0; } }
  .col-compare-inner { max-width: 1024px; margin: 0 auto; }
  .col-compare-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 12px; display: block; }
  .col-compare-h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #1B2A4E; line-height: 1.15; margin: 0 0 28px; letter-spacing: -.01em; }
  .col-compare-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(27,42,78,0.08); font-size: 14px; }
  .col-compare-table th { background: #F7F9FC; color: #1B2A4E; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(27,42,78,0.08); }
  .col-compare-table th.is-us { background: #1B2A4E; color: #fff; }
  .col-compare-table td { padding: 14px 16px; border-bottom: 1px solid rgba(27,42,78,0.06); color: #43515e; vertical-align: top; }
  .col-compare-table td.is-us { background: #F0F7FD; color: #1B2A4E; font-weight: 600; }
  .col-compare-table tr:last-child td { border-bottom: none; }
  .col-compare-table td:first-child { color: #1B2A4E; font-weight: 500; }
  .col-compare-yes { color: #16A34A; font-weight: 700; }
  .col-compare-no { color: #DC2626; font-weight: 500; opacity: 0.7; }


  /* New-page additions to Ovena design system, match .ov-* tokens */
  .ov-page-hero { padding: 56px 16px 32px; background: #fff; }
  @media (min-width: 1024px) { .ov-page-hero { padding: 96px 32px 56px; } }
  .ov-page-hero-inner { max-width: 880px; margin: 0 auto; }
  .ov-page-h1 { font-size: 32px; font-weight: 600; color: #1B2A4E; line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 16px; }
  @media (min-width: 1024px) { .ov-page-h1 { font-size: 44px; } }
  .ov-page-lede { font-size: 17px; line-height: 1.6; color: #4B5563; max-width: 720px; margin: 0 0 8px; }

  .ov-content { padding: 32px 16px 96px; background: #fff; }
  @media (min-width: 1024px) { .ov-content { padding: 48px 32px 120px; } }
  .ov-content-inner { max-width: 880px; margin: 0 auto; color: #1B2A4E; }
  .ov-content h2 { font-size: 22px; font-weight: 600; color: #1B2A4E; line-height: 1.2; margin: 48px 0 14px; letter-spacing: -.005em; }
  @media (min-width: 1024px) { .ov-content h2 { font-size: 26px; } }
  .ov-content h3 { font-size: 16px; font-weight: 600; color: #1B2A4E; margin: 28px 0 8px; }
  .ov-content p { font-size: 15px; line-height: 1.7; color: #4B5563; margin: 0 0 14px; }
  .ov-content ul, .ov-content ol { font-size: 15px; line-height: 1.7; color: #4B5563; margin: 0 0 14px; padding-left: 22px; }
  .ov-content li { margin-bottom: 6px; }
  .ov-content strong { color: #1B2A4E; font-weight: 600; }
  .ov-content a { color: #2D9CDB; text-decoration: none; font-weight: 500; }
  .ov-content a:hover { text-decoration: underline; }

  .ov-toc { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; margin: 24px 0 32px; }
  .ov-toc-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #2D9CDB; font-weight: 600; margin: 0 0 12px; }
  .ov-toc ol { list-style: none; counter-reset: tt; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
  .ov-toc li { counter-increment: tt; padding: 4px 0; font-size: 14px; }
  .ov-toc li::before { content: counter(tt, decimal-leading-zero) "  "; color: #2D9CDB; font-weight: 600; margin-right: 6px; }
  .ov-toc a { color: #1B2A4E; }
  @media (max-width: 700px) { .ov-toc ol { columns: 1; } }

  .ov-card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 16px 0 24px; }
  @media (min-width: 640px) { .ov-card-grid { grid-template-columns: 1fr 1fr; } }
  .ov-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 28px; transition: background 0.2s; }
  .ov-card:hover { background: #F0F7FD; }
  .ov-card h3 { color: #1B2A4E; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
  .ov-card p { font-size: 14px; line-height: 1.65; color: #6B7280; margin: 0; }

  .ov-table { width: 100%; border-collapse: collapse; margin: 14px 0 24px; font-size: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
  .ov-table th { background: #F9FAFB; color: #1B2A4E; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; text-align: left; border-bottom: 1px solid #E5E7EB; }
  .ov-table td { padding: 14px 16px; border-bottom: 1px solid #F3F4F6; vertical-align: top; color: #4B5563; }
  .ov-table tr:last-child td { border-bottom: none; }
  .ov-table td:first-child { color: #1B2A4E; font-weight: 500; }
  .ov-table code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #F3F4F6; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; color: #1B2A4E; }

  .ov-faq { border-bottom: 1px solid #E5E7EB; padding: 4px 0; }
  .ov-faq summary { cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 600; color: #1B2A4E; list-style: none; position: relative; padding-right: 36px; }
  .ov-faq summary::-webkit-details-marker { display: none; }
  .ov-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: #2D9CDB; font-weight: 400; line-height: 1; }
  .ov-faq[open] summary::after { content: '−'; }
  .ov-faq .a { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: #4B5563; }

  .ov-callout { padding: 18px 22px; border-radius: 10px; margin: 20px 0; font-size: 14.5px; line-height: 1.6; }
  .ov-callout-info { background: #F0F7FD; border-left: 3px solid #2D9CDB; color: #1B2A4E; }
  .ov-callout-warn { background: #FEF7E6; border-left: 3px solid #D97706; color: #92400E; }
  .ov-callout-good { background: #ECFDF5; border-left: 3px solid #10B981; color: #065F46; }

  .ov-cta-block { background: #1B2A4E; color: #fff; padding: 32px 32px 28px; border-radius: 14px; margin: 32px 0 0; }
  .ov-cta-block h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }
  .ov-cta-block p { color: rgba(255,255,255,0.82); margin: 0 0 8px; font-size: 15px; }
  .ov-cta-block a { color: #2D9CDB; font-weight: 600; }

  .ov-use-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 24px; }
  @media (min-width: 640px) { .ov-use-grid { grid-template-columns: 1fr 1fr 1fr; } }
  .ov-use-cell { padding: 16px 20px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; font-size: 14px; color: #1B2A4E; font-weight: 500; line-height: 1.5; }

  /* Mini buy box for PDP mockups */
  .ov-pdp-buy { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 24px 0 40px; padding: 32px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px; }
  @media (min-width: 768px) { .ov-pdp-buy { grid-template-columns: 1fr 360px; } }
  .ov-pdp-photo { aspect-ratio: 1/1; background: linear-gradient(135deg, #1B2A4E 0%, #2D9CDB 100%); border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 14px; letter-spacing: .04em; }
  .ov-pdp-price { font-size: 12px; color: #6B7280; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
  .ov-pdp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
  .ov-pdp-badge { display: inline-block; padding: 5px 10px; background: #fff; border: 1px solid #2D9CDB; color: #2D9CDB; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
  .ov-pdp-size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 18px; }
  .ov-pdp-size { padding: 11px; text-align: center; border: 1px solid #E5E7EB; background: #fff; border-radius: 6px; font-size: 13px; color: #4B5563; cursor: pointer; }
  .ov-pdp-size--active { border-color: #1B2A4E; border-width: 1.5px; color: #1B2A4E; font-weight: 600; }
  .ov-pdp-cart { width: 100%; padding: 14px; background: #1B2A4E; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .04em; font-family: inherit; }
  .ov-pdp-cart:hover { background: #2D9CDB; }


.ov-header-nav .ov-has-dropdown { position:relative; }
.ov-header-nav .ov-dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; min-width:240px; border:1px solid rgba(27,42,78,0.10); border-radius:4px; padding:8px 0; box-shadow:0 8px 20px rgba(27,42,78,0.10); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, visibility .15s; z-index:30; }
.ov-header-nav .ov-has-dropdown:hover .ov-dropdown { opacity:1; visibility:visible; pointer-events:auto; }
.ov-header-nav .ov-dropdown a { display:block; padding:9px 18px; font-size:13.5px; color:#1B2A4E; text-decoration:none; border-bottom:0; white-space:nowrap; }
.ov-header-nav .ov-dropdown a:hover { background:#F7F9FC; color:#2D9CDB; }

<style>
  /* ──────── Collection page layout (collagen, compression, all) ──────── */
  .col-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
  @media (min-width: 1024px) { .col-container { padding: 0 32px; } }

  /* Hero */
  .col-hero { padding: 48px 0 32px; background: #fff; border-bottom: 1px solid rgba(27,42,78,0.08); }
  @media (min-width: 1024px) { .col-hero { padding: 64px 0 40px; } }
  .col-hero-inner { max-width: 820px; }
  .col-hero-crumb { font-size: 12px; color: #52606e; margin: 0 0 14px; }
  .col-hero-crumb a { color: #52606e; text-decoration: none; }
  .col-hero-crumb a:hover { color: #2D9CDB; }
  .col-hero-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 14px; display: block; }
  .col-hero-h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; color: #1B2A4E; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.015em; }
  .col-hero-intro { font-size: 16.5px; line-height: 1.65; color: #43515e; max-width: 680px; margin: 0 0 14px; }
  .col-hero-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #2D9CDB; font-weight: 600; text-decoration: none; }
  .col-hero-link:hover { text-decoration: underline; }

  /* Shell with sidebar + grid */
  .col-shell { background: #fff; padding: 32px 0 64px; }
  @media (min-width: 1024px) { .col-shell { padding: 40px 0 96px; } }
  .col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  @media (min-width: 1024px) {
    .col-grid { grid-template-columns: 240px 1fr; gap: 40px; }
  }

  /* Filter sidebar */
  .col-sidebar { background: #fff; border: 1px solid rgba(27,42,78,0.08); padding: 22px 24px; align-self: start; }
  @media (min-width: 1024px) { .col-sidebar { position: sticky; top: 24px; } }
  .col-sidebar h3 { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 14px; }
  .col-filter-group { border-bottom: 1px solid rgba(27,42,78,0.08); padding: 14px 0; }
  .col-filter-group:last-child { border-bottom: none; padding-bottom: 0; }
  .col-filter-group:first-child { padding-top: 0; }
  .col-filter-group h4 { font-size: 11px; font-weight: 700; color: #1B2A4E; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; }
  .col-filter-opt { display: flex; align-items: center; padding: 5px 0; font-size: 13px; color: #43515e; cursor: pointer; }
  .col-filter-opt input[type="checkbox"] { margin-right: 9px; accent-color: #2D9CDB; }
  .col-filter-opt .count { color: #52606e; font-size: 12px; margin-left: 6px; }

  /* Sort + product count toolbar */
  .col-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 18px; border-bottom: 1px solid rgba(27,42,78,0.08); margin-bottom: 24px; font-size: 13px; color: #52606e; }
  .col-toolbar select { border: 1px solid rgba(27,42,78,0.15); padding: 7px 28px 7px 10px; font-size: 13px; font-family: inherit; color: #1B2A4E; background: #fff; }

  /* Product grid */
  .col-products { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @media (min-width: 640px) { .col-products { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .col-products { grid-template-columns: 1fr 1fr 1fr; } }
  .col-product { background: #fff; border: 1px solid rgba(27,42,78,0.08); transition: box-shadow .15s, transform .15s; cursor: pointer; }
  .col-product:hover { box-shadow: 0 12px 28px rgba(27,42,78,0.10); transform: translateY(-2px); }
  .col-product__img { aspect-ratio: 1/1; background: #F7F9FC; display: grid; place-items: center; color: #52606e; font-size: 11px; letter-spacing: .04em; position: relative; overflow: hidden; }
  .col-product__img .badge { position: absolute; top: 10px; left: 10px; background: #1B2A4E; color: #fff; padding: 4px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .col-product__body { padding: 18px 20px 22px; }
  .col-product__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
  .col-product__pill { display: inline-block; padding: 3px 8px; background: #F7F9FC; color: #2D9CDB; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
  .col-product__title { font-size: 15px; font-weight: 600; color: #1B2A4E; margin: 0 0 6px; line-height: 1.3; }
  .col-product__desc { font-size: 13px; color: #52606e; margin: 0 0 12px; line-height: 1.55; }
  .col-product__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .col-product__price-amt { font-size: 17px; font-weight: 700; color: #1B2A4E; }
  .col-product__price-sub { font-size: 12px; color: #52606e; }

  /* Comparison table block */
  .col-compare { background: #F7F9FC; padding: 56px 0; margin: 56px 0 0; border-top: 1px solid rgba(27,42,78,0.08); }
  @media (min-width: 1024px) { .col-compare { padding: 80px 0; } }
  .col-compare-inner { max-width: 1024px; margin: 0 auto; }
  .col-compare-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 12px; display: block; }
  .col-compare-h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #1B2A4E; line-height: 1.15; margin: 0 0 28px; letter-spacing: -.01em; }
  .col-compare-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(27,42,78,0.08); font-size: 14px; }
  .col-compare-table th { background: #F7F9FC; color: #1B2A4E; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(27,42,78,0.08); }
  .col-compare-table th.is-us { background: #1B2A4E; color: #fff; }
  .col-compare-table td { padding: 14px 16px; border-bottom: 1px solid rgba(27,42,78,0.06); color: #43515e; vertical-align: top; }
  .col-compare-table td.is-us { background: #F0F7FD; color: #1B2A4E; font-weight: 600; }
  .col-compare-table tr:last-child td { border-bottom: none; }
  .col-compare-table td:first-child { color: #1B2A4E; font-weight: 500; }
  .col-compare-yes { color: #16A34A; font-weight: 700; }
  .col-compare-no { color: #DC2626; font-weight: 500; opacity: 0.7; }


  /* New-page additions to Ovena design system, match .ov-* tokens */
  .ov-page-hero { padding: 56px 16px 32px; background: #fff; }
  @media (min-width: 1024px) { .ov-page-hero { padding: 96px 32px 56px; } }
  .ov-page-hero-inner { max-width: 880px; margin: 0 auto; }
  .ov-page-h1 { font-size: 32px; font-weight: 600; color: #1B2A4E; line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 16px; }
  @media (min-width: 1024px) { .ov-page-h1 { font-size: 44px; } }
  .ov-page-lede { font-size: 17px; line-height: 1.6; color: #4B5563; max-width: 720px; margin: 0 0 8px; }

  .ov-content { padding: 32px 16px 96px; background: #fff; }
  @media (min-width: 1024px) { .ov-content { padding: 48px 32px 120px; } }
  .ov-content-inner { max-width: 880px; margin: 0 auto; color: #1B2A4E; }
  .ov-content h2 { font-size: 22px; font-weight: 600; color: #1B2A4E; line-height: 1.2; margin: 48px 0 14px; letter-spacing: -.005em; }
  @media (min-width: 1024px) { .ov-content h2 { font-size: 26px; } }
  .ov-content h3 { font-size: 16px; font-weight: 600; color: #1B2A4E; margin: 28px 0 8px; }
  .ov-content p { font-size: 15px; line-height: 1.7; color: #4B5563; margin: 0 0 14px; }
  .ov-content ul, .ov-content ol { font-size: 15px; line-height: 1.7; color: #4B5563; margin: 0 0 14px; padding-left: 22px; }
  .ov-content li { margin-bottom: 6px; }
  .ov-content strong { color: #1B2A4E; font-weight: 600; }
  .ov-content a { color: #2D9CDB; text-decoration: none; font-weight: 500; }
  .ov-content a:hover { text-decoration: underline; }

  .ov-toc { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; margin: 24px 0 32px; }
  .ov-toc-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #2D9CDB; font-weight: 600; margin: 0 0 12px; }
  .ov-toc ol { list-style: none; counter-reset: tt; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
  .ov-toc li { counter-increment: tt; padding: 4px 0; font-size: 14px; }
  .ov-toc li::before { content: counter(tt, decimal-leading-zero) "  "; color: #2D9CDB; font-weight: 600; margin-right: 6px; }
  .ov-toc a { color: #1B2A4E; }
  @media (max-width: 700px) { .ov-toc ol { columns: 1; } }

  .ov-card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 16px 0 24px; }
  @media (min-width: 640px) { .ov-card-grid { grid-template-columns: 1fr 1fr; } }
  .ov-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 28px; transition: background 0.2s; }
  .ov-card:hover { background: #F0F7FD; }
  .ov-card h3 { color: #1B2A4E; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
  .ov-card p { font-size: 14px; line-height: 1.65; color: #6B7280; margin: 0; }

  .ov-table { width: 100%; border-collapse: collapse; margin: 14px 0 24px; font-size: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
  .ov-table th { background: #F9FAFB; color: #1B2A4E; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; text-align: left; border-bottom: 1px solid #E5E7EB; }
  .ov-table td { padding: 14px 16px; border-bottom: 1px solid #F3F4F6; vertical-align: top; color: #4B5563; }
  .ov-table tr:last-child td { border-bottom: none; }
  .ov-table td:first-child { color: #1B2A4E; font-weight: 500; }
  .ov-table code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #F3F4F6; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; color: #1B2A4E; }

  .ov-faq { border-bottom: 1px solid #E5E7EB; padding: 4px 0; }
  .ov-faq summary { cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 600; color: #1B2A4E; list-style: none; position: relative; padding-right: 36px; }
  .ov-faq summary::-webkit-details-marker { display: none; }
  .ov-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: #2D9CDB; font-weight: 400; line-height: 1; }
  .ov-faq[open] summary::after { content: '−'; }
  .ov-faq .a { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: #4B5563; }

  .ov-callout { padding: 18px 22px; border-radius: 10px; margin: 20px 0; font-size: 14.5px; line-height: 1.6; }
  .ov-callout-info { background: #F0F7FD; border-left: 3px solid #2D9CDB; color: #1B2A4E; }
  .ov-callout-warn { background: #FEF7E6; border-left: 3px solid #D97706; color: #92400E; }
  .ov-callout-good { background: #ECFDF5; border-left: 3px solid #10B981; color: #065F46; }

  .ov-cta-block { background: #1B2A4E; color: #fff; padding: 32px 32px 28px; border-radius: 14px; margin: 32px 0 0; }
  .ov-cta-block h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }
  .ov-cta-block p { color: rgba(255,255,255,0.82); margin: 0 0 8px; font-size: 15px; }
  .ov-cta-block a { color: #2D9CDB; font-weight: 600; }

  .ov-use-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 24px; }
  @media (min-width: 640px) { .ov-use-grid { grid-template-columns: 1fr 1fr 1fr; } }
  .ov-use-cell { padding: 16px 20px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; font-size: 14px; color: #1B2A4E; font-weight: 500; line-height: 1.5; }

  /* Mini buy box for PDP mockups */
  .ov-pdp-buy { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 24px 0 40px; padding: 32px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px; }
  @media (min-width: 768px) { .ov-pdp-buy { grid-template-columns: 1fr 360px; } }
  .ov-pdp-photo { aspect-ratio: 1/1; background: linear-gradient(135deg, #1B2A4E 0%, #2D9CDB 100%); border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 14px; letter-spacing: .04em; }
  .ov-pdp-price { font-size: 12px; color: #6B7280; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
  .ov-pdp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
  .ov-pdp-badge { display: inline-block; padding: 5px 10px; background: #fff; border: 1px solid #2D9CDB; color: #2D9CDB; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
  .ov-pdp-size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 18px; }
  .ov-pdp-size { padding: 11px; text-align: center; border: 1px solid #E5E7EB; background: #fff; border-radius: 6px; font-size: 13px; color: #4B5563; cursor: pointer; }
  .ov-pdp-size--active { border-color: #1B2A4E; border-width: 1.5px; color: #1B2A4E; font-weight: 600; }
  .ov-pdp-cart { width: 100%; padding: 14px; background: #1B2A4E; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .04em; font-family: inherit; }
  .ov-pdp-cart:hover { background: #2D9CDB; }

<style>
  /* New-page additions to Ovena design system, match .ov-* tokens */
  .ov-page-hero { padding: 56px 16px 32px; background: #fff; }
  @media (min-width: 1024px) { .ov-page-hero { padding: 96px 32px 56px; } }
  .ov-page-hero-inner { max-width: 880px; margin: 0 auto; }
  .ov-page-h1 { font-size: 32px; font-weight: 600; color: #1B2A4E; line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 16px; }
  @media (min-width: 1024px) { .ov-page-h1 { font-size: 44px; } }
  .ov-page-lede { font-size: 17px; line-height: 1.6; color: #4B5563; max-width: 720px; margin: 0 0 8px; }

  .ov-content { padding: 32px 16px 96px; background: #fff; }
  @media (min-width: 1024px) { .ov-content { padding: 48px 32px 120px; } }
  .ov-content-inner { max-width: 880px; margin: 0 auto; color: #1B2A4E; }
  .ov-content h2 { font-size: 22px; font-weight: 600; color: #1B2A4E; line-height: 1.2; margin: 48px 0 14px; letter-spacing: -.005em; }
  @media (min-width: 1024px) { .ov-content h2 { font-size: 26px; } }
  .ov-content h3 { font-size: 16px; font-weight: 600; color: #1B2A4E; margin: 28px 0 8px; }
  .ov-content p { font-size: 15px; line-height: 1.7; color: #4B5563; margin: 0 0 14px; }
  .ov-content ul, .ov-content ol { font-size: 15px; line-height: 1.7; color: #4B5563; margin: 0 0 14px; padding-left: 22px; }
  .ov-content li { margin-bottom: 6px; }
  .ov-content strong { color: #1B2A4E; font-weight: 600; }
  .ov-content a { color: #2D9CDB; text-decoration: none; font-weight: 500; }
  .ov-content a:hover { text-decoration: underline; }

  .ov-toc { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; margin: 24px 0 32px; }
  .ov-toc-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #2D9CDB; font-weight: 600; margin: 0 0 12px; }
  .ov-toc ol { list-style: none; counter-reset: tt; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
  .ov-toc li { counter-increment: tt; padding: 4px 0; font-size: 14px; }
  .ov-toc li::before { content: counter(tt, decimal-leading-zero) "  "; color: #2D9CDB; font-weight: 600; margin-right: 6px; }
  .ov-toc a { color: #1B2A4E; }
  @media (max-width: 700px) { .ov-toc ol { columns: 1; } }

  .ov-card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 16px 0 24px; }
  @media (min-width: 640px) { .ov-card-grid { grid-template-columns: 1fr 1fr; } }
  .ov-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 28px; transition: background 0.2s; }
  .ov-card:hover { background: #F0F7FD; }
  .ov-card h3 { color: #1B2A4E; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
  .ov-card p { font-size: 14px; line-height: 1.65; color: #6B7280; margin: 0; }

  .ov-table { width: 100%; border-collapse: collapse; margin: 14px 0 24px; font-size: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
  .ov-table th { background: #F9FAFB; color: #1B2A4E; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; text-align: left; border-bottom: 1px solid #E5E7EB; }
  .ov-table td { padding: 14px 16px; border-bottom: 1px solid #F3F4F6; vertical-align: top; color: #4B5563; }
  .ov-table tr:last-child td { border-bottom: none; }
  .ov-table td:first-child { color: #1B2A4E; font-weight: 500; }
  .ov-table code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #F3F4F6; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; color: #1B2A4E; }

  .ov-faq { border-bottom: 1px solid #E5E7EB; padding: 4px 0; }
  .ov-faq summary { cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 600; color: #1B2A4E; list-style: none; position: relative; padding-right: 36px; }
  .ov-faq summary::-webkit-details-marker { display: none; }
  .ov-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: #2D9CDB; font-weight: 400; line-height: 1; }
  .ov-faq[open] summary::after { content: '−'; }
  .ov-faq .a { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: #4B5563; }

  .ov-callout { padding: 18px 22px; border-radius: 10px; margin: 20px 0; font-size: 14.5px; line-height: 1.6; }
  .ov-callout-info { background: #F0F7FD; border-left: 3px solid #2D9CDB; color: #1B2A4E; }
  .ov-callout-warn { background: #FEF7E6; border-left: 3px solid #D97706; color: #92400E; }
  .ov-callout-good { background: #ECFDF5; border-left: 3px solid #10B981; color: #065F46; }

  .ov-cta-block { background: #1B2A4E; color: #fff; padding: 32px 32px 28px; border-radius: 14px; margin: 32px 0 0; }
  .ov-cta-block h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }
  .ov-cta-block p { color: rgba(255,255,255,0.82); margin: 0 0 8px; font-size: 15px; }
  .ov-cta-block a { color: #2D9CDB; font-weight: 600; }

  .ov-use-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 24px; }
  @media (min-width: 640px) { .ov-use-grid { grid-template-columns: 1fr 1fr 1fr; } }
  .ov-use-cell { padding: 16px 20px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; font-size: 14px; color: #1B2A4E; font-weight: 500; line-height: 1.5; }

  /* Mini buy box for PDP mockups */
  .ov-pdp-buy { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 24px 0 40px; padding: 32px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px; }
  @media (min-width: 768px) { .ov-pdp-buy { grid-template-columns: 1fr 360px; } }
  .ov-pdp-photo { aspect-ratio: 1/1; background: linear-gradient(135deg, #1B2A4E 0%, #2D9CDB 100%); border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 14px; letter-spacing: .04em; }
  .ov-pdp-price { font-size: 12px; color: #6B7280; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
  .ov-pdp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
  .ov-pdp-badge { display: inline-block; padding: 5px 10px; background: #fff; border: 1px solid #2D9CDB; color: #2D9CDB; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
  .ov-pdp-size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 18px; }
  .ov-pdp-size { padding: 11px; text-align: center; border: 1px solid #E5E7EB; background: #fff; border-radius: 6px; font-size: 13px; color: #4B5563; cursor: pointer; }
  .ov-pdp-size--active { border-color: #1B2A4E; border-width: 1.5px; color: #1B2A4E; font-weight: 600; }
  .ov-pdp-cart { width: 100%; padding: 14px; background: #1B2A4E; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .04em; font-family: inherit; }
  .ov-pdp-cart:hover { background: #2D9CDB; }


  /* ──────── Collection page layout (collagen, compression, all) ──────── */
  .col-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
  @media (min-width: 1024px) { .col-container { padding: 0 32px; } }

  /* Hero */
  .col-hero { padding: 48px 0 32px; background: #fff; border-bottom: 1px solid rgba(27,42,78,0.08); }
  @media (min-width: 1024px) { .col-hero { padding: 64px 0 40px; } }
  .col-hero-inner { max-width: 820px; }
  .col-hero-crumb { font-size: 12px; color: #52606e; margin: 0 0 14px; }
  .col-hero-crumb a { color: #52606e; text-decoration: none; }
  .col-hero-crumb a:hover { color: #2D9CDB; }
  .col-hero-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 14px; display: block; }
  .col-hero-h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; color: #1B2A4E; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.015em; }
  .col-hero-intro { font-size: 16.5px; line-height: 1.65; color: #43515e; max-width: 680px; margin: 0 0 14px; }
  .col-hero-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #2D9CDB; font-weight: 600; text-decoration: none; }
  .col-hero-link:hover { text-decoration: underline; }

  /* Shell with sidebar + grid */
  .col-shell { background: #fff; padding: 32px 0 64px; }
  @media (min-width: 1024px) { .col-shell { padding: 40px 0 96px; } }
  .col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  @media (min-width: 1024px) {
    .col-grid { grid-template-columns: 240px 1fr; gap: 40px; }
  }

  /* Filter sidebar */
  .col-sidebar { background: #fff; border: 1px solid rgba(27,42,78,0.08); padding: 22px 24px; align-self: start; }
  @media (min-width: 1024px) { .col-sidebar { position: sticky; top: 24px; } }
  .col-sidebar h3 { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 14px; }
  .col-filter-group { border-bottom: 1px solid rgba(27,42,78,0.08); padding: 14px 0; }
  .col-filter-group:last-child { border-bottom: none; padding-bottom: 0; }
  .col-filter-group:first-child { padding-top: 0; }
  .col-filter-group h4 { font-size: 11px; font-weight: 700; color: #1B2A4E; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; }
  .col-filter-opt { display: flex; align-items: center; padding: 5px 0; font-size: 13px; color: #43515e; cursor: pointer; }
  .col-filter-opt input[type="checkbox"] { margin-right: 9px; accent-color: #2D9CDB; }
  .col-filter-opt .count { color: #52606e; font-size: 12px; margin-left: 6px; }

  /* Sort + product count toolbar */
  .col-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 18px; border-bottom: 1px solid rgba(27,42,78,0.08); margin-bottom: 24px; font-size: 13px; color: #52606e; }
  .col-toolbar select { border: 1px solid rgba(27,42,78,0.15); padding: 7px 28px 7px 10px; font-size: 13px; font-family: inherit; color: #1B2A4E; background: #fff; }

  /* Product grid */
  .col-products { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @media (min-width: 640px) { .col-products { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .col-products { grid-template-columns: 1fr 1fr 1fr; } }
  .col-product { background: #fff; border: 1px solid rgba(27,42,78,0.08); transition: box-shadow .15s, transform .15s; cursor: pointer; }
  .col-product:hover { box-shadow: 0 12px 28px rgba(27,42,78,0.10); transform: translateY(-2px); }
  .col-product__img { aspect-ratio: 1/1; background: #F7F9FC; display: grid; place-items: center; color: #52606e; font-size: 11px; letter-spacing: .04em; position: relative; overflow: hidden; }
  .col-product__img .badge { position: absolute; top: 10px; left: 10px; background: #1B2A4E; color: #fff; padding: 4px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .col-product__body { padding: 18px 20px 22px; }
  .col-product__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
  .col-product__pill { display: inline-block; padding: 3px 8px; background: #F7F9FC; color: #2D9CDB; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
  .col-product__title { font-size: 15px; font-weight: 600; color: #1B2A4E; margin: 0 0 6px; line-height: 1.3; }
  .col-product__desc { font-size: 13px; color: #52606e; margin: 0 0 12px; line-height: 1.55; }
  .col-product__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .col-product__price-amt { font-size: 17px; font-weight: 700; color: #1B2A4E; }
  .col-product__price-sub { font-size: 12px; color: #52606e; }

  /* Comparison table block */
  .col-compare { background: #F7F9FC; padding: 56px 0; margin: 56px 0 0; border-top: 1px solid rgba(27,42,78,0.08); }
  @media (min-width: 1024px) { .col-compare { padding: 80px 0; } }
  .col-compare-inner { max-width: 1024px; margin: 0 auto; }
  .col-compare-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #2D9CDB; font-weight: 700; margin: 0 0 12px; display: block; }
  .col-compare-h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #1B2A4E; line-height: 1.15; margin: 0 0 28px; letter-spacing: -.01em; }
  .col-compare-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(27,42,78,0.08); font-size: 14px; }
  .col-compare-table th { background: #F7F9FC; color: #1B2A4E; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(27,42,78,0.08); }
  .col-compare-table th.is-us { background: #1B2A4E; color: #fff; }
  .col-compare-table td { padding: 14px 16px; border-bottom: 1px solid rgba(27,42,78,0.06); color: #43515e; vertical-align: top; }
  .col-compare-table td.is-us { background: #F0F7FD; color: #1B2A4E; font-weight: 600; }
  .col-compare-table tr:last-child td { border-bottom: none; }
  .col-compare-table td:first-child { color: #1B2A4E; font-weight: 500; }
  .col-compare-yes { color: #16A34A; font-weight: 700; }
  .col-compare-no { color: #DC2626; font-weight: 500; opacity: 0.7; }


.col-hero-h1, .col-hero-h2, .col-compare-h2, .col-hero h1, .col-hero h2 {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.col-product__title, .col-product__desc, .col-shell, .col-shell h2, .col-shell h3, .col-shell p {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Hide breadcrumb / pathway */
.col-breadcrumb, .col-crumb, nav[aria-label="Breadcrumb"], .breadcrumbs, .ov-breadcrumb {
  display: none !important;
}


.ov-shop-mega { position: relative; }
.ov-shop-mega > a { cursor: pointer; }
.ov-shop-mega .ov-flyout { position:absolute; background:#fff; min-width:220px; border:1px solid rgba(27,42,78,0.10); border-radius:6px; padding:8px 0; box-shadow:0 8px 24px rgba(27,42,78,0.12); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, visibility .15s; }
.ov-shop-mega .ov-l1 { top:100%; left:0; z-index:60; }
.ov-shop-mega:hover > .ov-l1 { opacity:1; visibility:visible; pointer-events:auto; }
.ov-menu-item { position:relative; }
.ov-menu-item > a { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; font-size:13.5px; color:#1B2A4E; text-decoration:none; white-space:nowrap; }
.ov-menu-item > a:hover { background:#F7F9FC; color:#2D9CDB; }
.ov-menu-item.has-sub > a::after { content:'›'; color:#9ca3af; font-size:15px; margin-left:14px; }
.ov-menu-item > .ov-flyout { top:-9px; left:100%; z-index:61; }
.ov-menu-item:hover > .ov-flyout { opacity:1; visibility:visible; pointer-events:auto; }



.ov-header-nav > a, .ov-header-nav > span > a, .ov-shop-mega > a, .ov-has-dropdown > a, .ov-res-dropdown > a, .ov-learn-mega > a {
  position: relative; padding: 8px 6px 8px; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.ov-header-nav > a:hover, .ov-header-nav > span > a:hover, .ov-shop-mega:hover > a, .ov-has-dropdown:hover > a, .ov-res-dropdown:hover > a, .ov-learn-mega:hover > a {
  color: #2D9CDB !important; border-bottom: 3px solid #2D9CDB !important; background-color: rgba(45,156,219,0.08) !important;
}
.ov-header-nav a.ov-active { color: #2D9CDB !important; border-bottom: 3px solid #2D9CDB !important; }
/* Resources dropdown */
.ov-res-dropdown { position: relative; }
.ov-res-dropdown .ov-res-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; min-width:220px; border:1px solid rgba(27,42,78,0.10); border-radius:6px; padding:8px 0; box-shadow:0 8px 24px rgba(27,42,78,0.12); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, visibility .15s; z-index:60; }
.ov-res-dropdown:hover .ov-res-menu { opacity:1; visibility:visible; pointer-events:auto; }
.ov-res-menu a { display:block; padding:9px 18px; font-size:13.5px; color:#1B2A4E; text-decoration:none; white-space:nowrap; border-bottom:0 !important; }
.ov-res-menu a:hover { background:#F7F9FC; color:#2D9CDB; }

.ov-has-dropdown:hover .ov-dropdown{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}.ov-has-dropdown .ov-dropdown a:hover{background:#F7F9FC;color:#2D9CDB;}

.ov-learn-mega { position: relative; display: inline-block; }
.ov-learn-mega > a { padding: 4px 0; border-bottom: 2px solid transparent; cursor: pointer; }
.ov-learn-mega:hover > a { border-bottom-color: #2D9CDB; color: #2D9CDB; }

/* ALL flyouts inside the Learn mega-nav are absolute-positioned + hidden by default */
.ov-learn-mega .ov-flyout {
  position: absolute !important;
  background: #fff;
  min-width: 240px;
  border: 1px solid rgba(27,42,78,0.10);
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(27,42,78,0.12);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .15s, visibility .15s;
}

/* L1 (drops below "Learn") */
.ov-learn-mega .ov-l1 { top: 100%; left: 0; z-index: 60; margin-top: 4px; }
.ov-learn-mega:hover > .ov-l1 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Menu items (in all levels) */
.ov-learn-mega .ov-menu-item { position: relative; }
.ov-learn-mega .ov-menu-item > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; font-size: 13.5px; color: #1B2A4E;
  text-decoration: none; white-space: nowrap;
}
.ov-learn-mega .ov-menu-item > a:hover { background: #F7F9FC; color: #2D9CDB; }
.ov-learn-mega .ov-menu-item.has-sub > a::after {
  content: '›'; color: #9ca3af; font-size: 15px; margin-left: 14px;
}

/* L2, sub-flyouts slide out to the right of their parent menu-item */
.ov-learn-mega .ov-menu-item > .ov-flyout {
  top: -9px !important;
  left: 100% !important;
  z-index: 61;
  min-width: 260px;
}
.ov-learn-mega .ov-menu-item:hover > .ov-flyout {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Transparent header, no border-bottom. Logo sized to fit header padding (~20px top+bottom). */
header.ov-header {
  background: transparent !important;
  border-bottom: 0 !important;
  overflow: visible !important;
}
header.ov-header > div {
  overflow: visible !important;
}
header.ov-header a[href*="index"] {
  display: inline-block !important;
  line-height: 0 !important;
  overflow: visible !important;
}
header.ov-header img[alt="Ovena Health"] {
  max-height: 100px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
}
/* Mobile: scale down */
@media (max-width: 720px) {
  header.ov-header img[alt="Ovena Health"] {
    max-height: 70px !important;
  }
}


/* Unified brand: Assistant (sans-serif) for ALL hero text sitewide.
   Boosted specificity with body-prefix to defeat any per-page rules. */

/* H1 selectors */
body .ova-hero-h1,
body .hero h1, body .ova-hero h1, body .ovh-hero h1, body .ov-hero h1,
body section[class*="hero"] h1,
body .gh-hero h1, body .lcg-hero h1, body .lcp-hero h1,
body .ov-rl-hero h1, body .ov-cmp-hero h1,
body .ovp-h1, body .product__title,
body header + section h1, body header + section > .container h1,
body .post-hero h1,
body main h1 {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}

/* Hero dek / subtitle paragraphs */
body .post-hero p, body .post-dek,
body .gh-hero p, body .ov-rl-dek, body .ov-cmp-dek,
body .ova-hero p, body .ovh-hero p, body .ov-hero p,
body section[class*="hero"] p,
body .ova-hero-sub, body .ovh-hero-sub,
body .lcg-hero p, body .lcp-hero p {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Hero kicker */
body .gh-hero .kicker, body .ov-rl-hero .kicker, body .ov-cmp-hero .kicker,
body .post-hero .kicker, body .ova-hero .kicker, body .kicker {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* CANONICAL hero background gradient sitewide.
   Excludes .col-hero (white-bg collection hero with dark navy text), .post-hero,
   .lp-hero (landing page hero with custom backgrounds), .ovp-hero (PDP hero). */
body .ova-hero, body .ovh-hero, body .ov-hero,
body .gh-hero, body .ov-rl-hero, body .ov-cmp-hero,
body section.page-hero,
body section[class*="hero"]:not(.post-hero):not(.col-hero):not(.lp-hero):not(.ovp-hero):not(.lcg-hero):not(.lcp-hero) {
  background: linear-gradient(135deg, #1B2A4E 0%, #2D4060 100%) !important;
}


/* ============================================================
   CANONICAL HERO POSITIONING - identical layout across all heroes
   Kicker COLOR varies by page type (user OK'd that).
   Background gradient already normalized elsewhere.
   ============================================================ */

/* 1. Hero section: same padding sitewide */
body .page-hero,
body .gh-hero,
body .ov-rl-hero,
body .ov-cmp-hero,
body .ova-hero,
body .ovh-hero,
body .ov-hero,
body .post-hero,
body section[class*="hero"]:not(.lp-hero):not(.ovp-hero):not(.lcg-hero):not(.lcp-hero):not(.col-hero):not(.ova-hero):not(.ov-hero-new):not(.post-hero) {
  padding: 72px 24px 56px !important;
  text-align: left !important;
  margin: 0 !important;
}

/* 2. Inner container: same max-width sitewide */
body .page-hero .container,
body .page-hero-grid,
body .gh-hero-inner,
body .ov-rl-hero-inner,
body .ov-cmp-hero-inner,
body .ova-hero-inner,
body .ovh-hero > div,
body .ov-hero > div,
body .post-hero > div {
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* 3. Kicker: same margin, same typography (color preserved per-page) */
body .page-hero .kicker,
body .gh-hero .kicker,
body .ov-rl-hero .kicker,
body .ov-cmp-hero .kicker,
body .ova-hero .kicker,
body .post-hero .kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* 4. H1: identical typography sitewide */
body .page-hero h1,
body .gh-hero h1,
body .ov-rl-hero h1,
body .ov-cmp-hero h1,
body .ova-hero h1, body .ova-hero-h1,
body .ovh-hero h1, body .ov-hero h1,
body .post-hero h1 {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: clamp(34px, 4.5vw, 50px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  max-width: 820px !important;
}

/* 5. Lede / dek paragraph: identical typography sitewide.
   :not(.kicker):not(.label) so the kicker keeps its per-page color (user OK'd that). */
body .page-hero .lede,
body .gh-hero p:not(.kicker):not(.label),
body .gh-hero-inner > p:not(.kicker):not(.label),
body .ov-rl-hero .ov-rl-dek,
body .ov-rl-hero p:not(.kicker):not(.label),
body .ov-cmp-hero .ov-cmp-dek,
body .ov-cmp-hero p:not(.kicker):not(.label),
body .ova-hero p:not(.kicker):not(.label), body .ova-hero-desc,
body .ovh-hero p:not(.kicker):not(.label),
body .ov-hero p:not(.kicker):not(.label),
body .post-hero p:not(.kicker):not(.label), body .post-dek {
  font-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.88) !important;
  margin: 0 0 24px !important;
  max-width: 720px !important;
}

/* 6. CTA row: consistent spacing */
body .page-hero .cta-row,
body .gh-hero .cta-row,
body .ov-rl-hero .cta-row,
body .ov-cmp-hero .cta-row,
body .ova-hero .cta-row,
body .post-hero .cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* 7. Marketing page-hero 2-col grid (content + sidecard).
   Constrains content column so title/dek visual width matches learn pages. */
body .page-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px) !important;
  gap: 56px !important;
  align-items: start !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  body .page-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* 8. Sidecard: consistent treatment when present */
body .page-hero .sidecard {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  padding: 22px 24px !important;
}
body .page-hero .sidecard .label,
body .page-hero .sidecard p.label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #7FB8E0 !important;
  margin: 0 0 12px !important;
}
body .page-hero .sidecard ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .page-hero .sidecard li {
  font-size: 14px !important;
  line-height: 1.55 !important;
  padding: 5px 0 !important;
  color: rgba(255,255,255,0.86) !important;
}

/* 9. Mobile breakpoint: maintain consistent padding scale */
@media (max-width: 600px) {
  body .page-hero, body .gh-hero, body .ov-rl-hero,
  body .ov-cmp-hero, body .ova-hero, body .post-hero {
    padding: 48px 20px 40px !important;
  }
  body .page-hero h1, body .gh-hero h1, body .ov-rl-hero h1,
  body .ov-cmp-hero h1, body .ova-hero h1, body .ova-hero-h1,
  body .post-hero h1 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
}


/* ─── BASE: prevent horizontal overflow at any viewport ──────────── */
html { -webkit-text-size-adjust: 100%; }
html, body {
  max-width: 100% !important;
  overflow-x: clip !important;
}
img, video, iframe, svg, canvas {
  max-width: 100% !important;
  height: auto;
}
/* Third-party widget iframes that hardcode wide widths get clamped */
iframe[style*="width:"][style*="px"] {
  max-width: 100vw !important;
}

/* ─── TYPOGRAPHY: fluid sizing on small screens ──────────────────── */
@media (max-width: 760px) {
  h1 { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(17px, 4.5vw, 22px) !important; }
}

/* ─── HERO: stack page-hero grid + reduce padding ────────────────── */
@media (max-width: 760px) {
  body .page-hero,
  body .gh-hero,
  body .ov-rl-hero,
  body .ov-cmp-hero,
  body .ova-hero,
  body .ov-hero-new {
    padding: 40px 18px 36px !important;
  }
  body .page-hero-grid,
  body .ov-hero-new > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body .page-hero .sidecard,
  body .ova-hero .sidecard {
    margin-top: 0 !important;
  }
}

/* ─── BULK CALCULATOR responsive collapse ────────────────────────── */
@media (max-width: 760px) {
  body main .ov-bulk-calc { padding: 44px 16px 56px !important; }
  body main .ov-bulk-calc .ov-bulk-tier-ladder { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  body main .ov-bulk-calc .ov-bulk-live { padding: 22px 18px 20px !important; }
  body main .ov-bulk-calc .ov-bulk-benefits { grid-template-columns: 1fr !important; }
  body main .ov-bulk-calc .ov-bulk-proof { grid-template-columns: 1fr !important; }
  body main .ov-bulk-calc .ov-bulk-live-readout { grid-template-columns: 1fr 1fr !important; gap: 14px 18px !important; }
  body main .ov-bulk-calc .ov-bulk-live-annual { flex-direction: column !important; align-items: stretch !important; text-align: left !important; }
  body main .ov-bulk-calc .ov-bulk-live-annual-cta { text-align: center !important; }
  body main .ov-bulk-calc strong.ov-bulk-live-readout-value { font-size: 20px !important; }
  body main .ov-bulk-calc strong.ov-bulk-live-readout-value.is-strike { font-size: 17px !important; }
  body main .ov-bulk-calc .ov-bulk-tier-step { padding: 16px 12px 14px !important; }
  body main .ov-bulk-calc .ov-bulk-tier-step-discount { font-size: 24px !important; }
}
@media (max-width: 480px) {
  body main .ov-bulk-calc .ov-bulk-tier-ladder { grid-template-columns: 1fr !important; }
}

/* ─── PAGE-SECTION (about, contact, etc) ─────────────────────────── */
@media (max-width: 760px) {
  body main .page-section,
  body main .ova-section { padding: 40px 16px !important; }
  body main .page-section .container,
  body main .page-section-head,
  body main .ova-container { padding: 0 !important; }
}

/* ─── HEADER: stack into 2 rows on phones ────────────────────────── */
@media (max-width: 860px) {
  header.ov-header { padding: 12px 16px !important; }
  header.ov-header > div { grid-template-columns: 1fr auto !important; gap: 10px !important; }
  header.ov-header nav { display: none !important; }
  header.ov-header img[alt="Ovena Health"] { max-height: 60px !important; }
  /* Show a hamburger affordance if a mobile-menu trigger exists; otherwise hide nav */
}

/* ─── STAGED-NAV: horizontal scroll on phones ────────────────────── */
@media (max-width: 760px) {
  .stage-nav .inner {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }
  .stage-nav a, .stage-nav .group, .stage-nav .sep, .stage-nav .label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* ─── TABLES: wrap in a scroll container ─────────────────────────── */
@media (max-width: 760px) {
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; }
  .ova-table-wrap, .ovp-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ─── COLLECTION + PRODUCT grids: 1 col on mobile ────────────────── */
@media (max-width: 760px) {
  .ova-card-grid, .ova-card-grid--3,
  .ova-pdp-buy,
  .ova-product-grid,
  .col-grid, .collection-grid,
  .ov-cmp-pricing-grid, .ov-cmp-row,
  .ovp-grid,
  .lcg-grid, .lcp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── LEARN article hero (.post-hero) ────────────────────────────── */
@media (max-width: 760px) {
  body .post-hero { padding: 28px 16px 24px !important; }
}

/* ─── FLOATING UTILITY BUTTONS spacing on small screens ──────────── */
@media (max-width: 480px) {
  #ov-preview-cart-btn { bottom: 78px !important; right: 12px !important; padding: 9px 14px !important; font-size: 11.5px !important; }
  #ov-clinical-chat-btn, .ov-clinical-chat-btn { bottom: 12px !important; right: 12px !important; padding: 10px 14px !important; font-size: 12px !important; }
  .ov-lang-toggle { top: 96px !important; right: 8px !important; }
  .ov-a11y-toggle { bottom: 70px !important; right: 14px !important; width: 38px !important; height: 38px !important; }
}

/* ─── EMAIL POPUP fits on phones ─────────────────────────────────── */
@media (max-width: 480px) {
  .ov-email-popup { width: calc(100% - 32px) !important; padding: 24px 22px !important; max-width: 360px !important; }
}

/* ─── COOKIE banner buttons wrap ─────────────────────────────────── */
@media (max-width: 600px) {
  .ov-cookie-banner { flex-direction: column !important; align-items: stretch !important; text-align: center !important; padding: 12px 16px !important; gap: 8px !important; }
  .ov-cookie-btn { width: 100% !important; padding: 10px !important; }
}

/* ─── FOOTER: stack columns ──────────────────────────────────────── */
@media (max-width: 760px) {
  footer.ov-footer > div, .ov-footer > div { flex-direction: column !important; gap: 32px !important; }
  footer.ov-footer > div > div { border-left: 0 !important; border-right: 0 !important; padding: 0 !important; }
}

/* ─── BAND CTAs ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body .ov-dist-inner { flex-direction: column !important; gap: 22px !important; text-align: left !important; }
  body .ov-dist, body .ova-cta-band { padding: 36px 20px !important; }
}

/* ─── PROMOTION BARS: smaller on phones ──────────────────────────── */
@media (max-width: 480px) {
  .ov-ship-bar { font-size: 11.5px !important; padding: 6px 10px !important; }
  .ov-ship-progress { width: 80px !important; }
  .ov-promo-strip { font-size: 11px !important; padding: 7px 10px !important; }
  .ov-quiz-promo { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ─── WIDE-SCREEN polish (≥1440) ─────────────────────────────────── */
@media (min-width: 1440px) {
  body .page-hero .container,
  body main .ov-bulk-calc .container,
  .ova-container { max-width: 1280px !important; }
}
@media (min-width: 1920px) {
  body .page-hero .container,
  body main .ov-bulk-calc .container,
  .ova-container { max-width: 1440px !important; }
}


/* ─── Learn nav dropdown stays open while cursor moves to it ───── */

/* Trigger anchor: extra vertical padding so the hover area extends down
   to where the dropdown sits, eliminating the dead zone. */
.ov-learn-mega { padding-bottom: 8px !important; }
.ov-learn-mega > a { padding: 4px 0 12px !important; }

/* L1 dropdown opens flush, not gapped */
.ov-learn-mega .ov-l1 {
  margin-top: 0 !important;
  top: calc(100% - 4px) !important;
  z-index: 200 !important;
}

/* Bridge: invisible filler above the L1 flyout that bridges any pixel
   gap between trigger and panel, keeping the hover continuous. */
.ov-learn-mega .ov-l1::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
  background: transparent;
}

/* L2 sub-flyouts: bridge the left-edge gap when moving cursor from
   parent item into the submenu. */
.ov-learn-mega .ov-menu-item > .ov-flyout {
  top: -10px !important;
  left: calc(100% - 4px) !important;
  z-index: 201 !important;
}
.ov-learn-mega .ov-menu-item > .ov-flyout::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -10px; width: 12px;
  background: transparent;
}

/* Slow the hide so accidental cursor flicks across the bridge don't
   kill the dropdown. Show is still snappy at .12s. */
.ov-learn-mega .ov-flyout {
  transition: opacity 0.12s ease-in, visibility 0.12s ease-in 0.15s !important;
}
.ov-learn-mega:hover .ov-l1,
.ov-learn-mega .ov-menu-item:hover > .ov-flyout {
  transition: opacity 0.12s ease-out, visibility 0s !important;
}

/* Also fix the .ov-shop-mega (Shop) dropdown using the same pattern,
   since it has the identical structure. */
.ov-shop-mega { padding-bottom: 8px !important; }
.ov-shop-mega > a { padding: 4px 0 12px !important; }
.ov-shop-mega .ov-l1 { margin-top: 0 !important; top: calc(100% - 4px) !important; z-index: 200 !important; }
.ov-shop-mega .ov-l1::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; background: transparent;
}
.ov-shop-mega .ov-menu-item > .ov-flyout {
  top: -10px !important; left: calc(100% - 4px) !important; z-index: 201 !important;
}
.ov-shop-mega .ov-menu-item > .ov-flyout::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -10px; width: 12px; background: transparent;
}
.ov-shop-mega .ov-flyout {
  transition: opacity 0.12s ease-in, visibility 0.12s ease-in 0.15s !important;
}
.ov-shop-mega:hover .ov-l1,
.ov-shop-mega .ov-menu-item:hover > .ov-flyout {
  transition: opacity 0.12s ease-out, visibility 0s !important;
}

/* Also fix the small "Contact" dropdown (.ov-has-dropdown). */
.ov-has-dropdown { padding-bottom: 8px !important; }
.ov-has-dropdown .ov-dropdown {
  margin-top: 0 !important;
  top: calc(100% - 2px) !important;
  z-index: 200 !important;
}
.ov-has-dropdown .ov-dropdown::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 14px; background: transparent;
}
.ov-has-dropdown .ov-dropdown {
  transition: opacity 0.12s ease-in, visibility 0.12s ease-in 0.15s !important;
}
.ov-has-dropdown:hover .ov-dropdown {
  transition: opacity 0.12s ease-out, visibility 0s !important;
}


/* Give all top-nav anchors more space between the word and the
   underline indicator, overrides the inline `padding-bottom:4px`.
   Selectors boosted with [href] attribute matchers so they beat the
   existing `header.ov-header a[href*="index"]` logo-fix rule that
   was forcing line-height:0 on the Home anchor. */
header.ov-header nav > a[href],
header.ov-header nav > span > a[href],
header.ov-header .ov-header-nav > a[href],
header.ov-header .ov-header-nav > span > a[href],
header.ov-header .ov-shop-mega > a[href],
header.ov-header .ov-learn-mega > a[href],
header.ov-header .ov-has-dropdown > a[href],
header.ov-header .ov-res-dropdown > a[href] {
  padding-bottom: 10px !important;
  padding-top: 4px !important;
  line-height: 1.4 !important;
  display: inline-block !important;
}

/* The logo-fix CSS uses `header.ov-header a[href*="index"]` which would
   normally hijack the Home nav anchor (since both Home and logo point
   to index.html). Scope this even tighter: the Home link is inside
   <nav>, the logo is not. */
header.ov-header nav > a[href*="index"] {
  padding-bottom: 10px !important;
  padding-top: 4px !important;
  line-height: 1.4 !important;
  display: inline-block !important;
}

/* Active state (when on that page), same spacing, just colored underline */
header.ov-header nav > a.ov-active,
header.ov-header .ov-header-nav > a.ov-active,
header.ov-header .ov-header-nav > a.active,
header.ov-header nav > a[href*="index"].ov-active {
  border-bottom: 2px solid #2D9CDB !important;
  padding-bottom: 10px !important;
}


/* ═══ WIDE-SCREEN FIT, let content breathe on big monitors ═══════ */

/* Default desktop (≥1024), slight bump from 1180→1280 baseline */
@media (min-width: 1024px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: 1280px !important;
  }
}

/* Large desktop ≥1440, content uses 1320px */
@media (min-width: 1440px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: 1320px !important;
  }
  /* Page hero gives a touch more breathing room */
  body .page-hero { padding-left: 32px !important; padding-right: 32px !important; }
}

/* Wide ≥1600, content uses 1480px */
@media (min-width: 1600px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: 1480px !important;
  }
  body .ov-products-grid { gap: 24px !important; }
}

/* Full HD ≥1920, content uses 1640px (≈ 85% of viewport) */
@media (min-width: 1920px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: 1640px !important;
  }
  body section.ov-hero-new { padding: 96px 32px 104px !important; }
}

/* Ultra-wide ≥2400, content caps at 1800px */
@media (min-width: 2400px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: 1800px !important;
  }
}

/* ─── Clip overflowing decorative pseudo-elements ───────────────── */
body .ov-bulk { overflow: hidden !important; }
body .ov-bulk::before {
  right: 0 !important;
  width: clamp(200px, 25vw, 400px) !important;
  top: -60px !important;
  height: clamp(200px, 25vw, 400px) !important;
}
body .ov-loyalty { overflow: hidden !important; }
body .ov-founder-video { overflow: hidden !important; }
body section.ov-hero-new { overflow: hidden !important; }

/* ─── Iframes can't push the page wider ──────────────────────────── */
body iframe { max-width: 100% !important; }
body iframe[style*="width:"] { max-width: 100vw !important; }

/* ─── Stage-nav stays inside viewport at any width ─────────────── */
body .stage-nav { max-width: 100vw !important; box-sizing: border-box !important; }

/* ─── Products grid uses 4 columns on really wide screens ──────── */
@media (min-width: 1600px) {
  body .ov-products-grid { grid-template-columns: repeat(4, 1fr) !important; }
}


/* Widen hero h1 / lede so they use the wider containers on big screens.
   Mobile / small-tablet caps stay tight via normal flow. */
@media (min-width: 1280px) {
  body section.ov-hero-new h1 { max-width: 820px !important; }
  body section.ov-hero-new p:nth-child(3) { max-width: 720px !important; }
  body .page-hero h1 { max-width: 1040px !important; }
  body .page-hero .lede { max-width: 920px !important; }
  body .gh-hero h1 { max-width: 1040px !important; }
  body .gh-hero p:not(.kicker) { max-width: 920px !important; }
  body .ov-rl-hero h1 { max-width: 1040px !important; }
  body .ov-rl-hero .ov-rl-dek { max-width: 920px !important; }
  body .ov-cmp-hero h1 { max-width: 1040px !important; }
  body .ov-cmp-hero .ov-cmp-dek { max-width: 920px !important; }
  body .post-hero h1 { max-width: 1040px !important; }
  body .post-hero p.post-dek { max-width: 920px !important; }
}
@media (min-width: 1600px) {
  body section.ov-hero-new h1 { max-width: 920px !important; font-size: clamp(38px, 4.4vw, 58px) !important; }
  body section.ov-hero-new p:nth-child(3) { max-width: 760px !important; font-size: 18px !important; }
  body .page-hero h1 { max-width: 1180px !important; font-size: clamp(38px, 4.2vw, 56px) !important; }
  body .page-hero .lede { max-width: 1040px !important; font-size: 18px !important; }
  body .gh-hero h1, body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    max-width: 1180px !important; font-size: clamp(38px, 4.2vw, 56px) !important;
  }
  body .gh-hero p:not(.kicker), body .ov-rl-hero .ov-rl-dek,
  body .ov-cmp-hero .ov-cmp-dek, body .post-hero p.post-dek {
    max-width: 1040px !important; font-size: 18px !important;
  }
}
@media (min-width: 1920px) {
  body section.ov-hero-new h1 { max-width: 1040px !important; }
  body section.ov-hero-new p:nth-child(3) { max-width: 820px !important; }
  body .page-hero h1, body .gh-hero h1, body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    max-width: 1320px !important;
  }
  body .page-hero .lede, body .gh-hero p:not(.kicker), body .ov-rl-hero .ov-rl-dek,
  body .ov-cmp-hero .ov-cmp-dek, body .post-hero p.post-dek {
    max-width: 1180px !important;
  }
}


/* User feedback: the top promo strip felt AI-generated; hide it sitewide.
   Also hide the top ov-ship-bar, its function is now in the floating
   #ov-ship-meter-btn. */
body .ov-promo-strip { display: none !important; }
body .ov-ship-bar, body .ov-ship-bar-sticky { display: none !important; }

/* Floating button cluster, sit tight at bottom-right, above the
   .ov-sticky-cta mini-bar (which has bottom:0 height ~60px). */
body #ov-clinical-chat-btn { bottom: 18px !important; right: 18px !important; }
body #ov-ship-meter-btn { bottom: 79px !important; right: 18px !important; }
body #ov-preview-cart-btn { bottom: 140px !important; right: 18px !important; }
body.ov-sticky-cta-shown #ov-clinical-chat-btn { bottom: 78px !important; }
body.ov-sticky-cta-shown #ov-ship-meter-btn { bottom: 139px !important; }
body.ov-sticky-cta-shown #ov-preview-cart-btn { bottom: 200px !important; }
@media (max-width: 480px) {
  body #ov-clinical-chat-btn { bottom: 14px !important; right: 12px !important; padding: 10px 14px !important; font-size: 12px !important; }
  body #ov-ship-meter-btn { bottom: 64px !important; right: 12px !important; padding: 8px 12px !important; font-size: 11px !important; }
  body #ov-preview-cart-btn { bottom: 112px !important; right: 12px !important; padding: 9px 13px !important; font-size: 11.5px !important; }
  body.ov-sticky-cta-shown #ov-clinical-chat-btn { bottom: 70px !important; }
  body.ov-sticky-cta-shown #ov-ship-meter-btn { bottom: 120px !important; }
  body.ov-sticky-cta-shown #ov-preview-cart-btn { bottom: 168px !important; }
}


/* ═══ ULTRA-WIDE HERO FIT (Stryker / Intuitive style) ═══════════════
   On 2K / 4K / 5K screens, containers scale fluidly via min(92vw, Npx)
   instead of capping at fixed pixel widths. Hero typography scales too. */

/* >=1440, comfy laptop. Match prior behavior. */
@media (min-width: 1440px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(92vw, 1340px) !important;
  }
}

/* >=1600 */
@media (min-width: 1600px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(92vw, 1520px) !important;
  }
}

/* >=1920, full HD */
@media (min-width: 1920px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(92vw, 1760px) !important;
  }
  body section.ov-hero-new h1 { max-width: min(64vw, 1180px) !important; font-size: clamp(42px, 4.4vw, 68px) !important; }
  body section.ov-hero-new p:nth-child(3) { max-width: min(48vw, 920px) !important; font-size: 19px !important; }
  body .page-hero h1, body .gh-hero h1, body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    max-width: min(72vw, 1440px) !important;
    font-size: clamp(42px, 4.2vw, 68px) !important;
  }
  body .page-hero .lede, body .gh-hero p:not(.kicker), body .ov-rl-hero .ov-rl-dek,
  body .ov-cmp-hero .ov-cmp-dek, body .post-hero p.post-dek {
    max-width: min(60vw, 1180px) !important;
    font-size: 19px !important;
  }
}

/* >=2560, 2K / WQHD */
@media (min-width: 2560px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(90vw, 2200px) !important;
  }
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(56px, 3.4vw, 88px) !important;
    max-width: min(72vw, 1760px) !important;
    line-height: 1.05 !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 21px !important;
    max-width: min(60vw, 1440px) !important;
  }
  body section.ov-hero-new { padding: 120px 32px 128px !important; }
  body .page-hero { padding: 112px 32px 96px !important; }
}

/* >=3200, 4K */
@media (min-width: 3200px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(88vw, 3200px) !important;
  }
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(72px, 2.8vw, 124px) !important;
    max-width: min(70vw, 2400px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 26px !important;
    max-width: min(58vw, 2000px) !important;
  }
  body section.ov-hero-new { padding: 144px 40px 160px !important; }
  body .page-hero { padding: 144px 40px 120px !important; }
}

/* >=4000, ultra-wide / 5K. Stryker-level edge-to-edge feel. */
@media (min-width: 4000px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(86vw, 3800px) !important;
  }
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(96px, 2.6vw, 144px) !important;
    max-width: min(70vw, 2800px) !important;
    line-height: 1.03 !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 30px !important;
    max-width: min(58vw, 2400px) !important;
  }
  body section.ov-hero-new { padding: 184px 56px 200px !important; }
  body .page-hero { padding: 168px 56px 144px !important; }
}

/* Fluid .page-hero-grid: sidecard scales with viewport too.
   CRITICAL: unset the 1180px max-width cap that an earlier normalizer set,
   otherwise the grid (and the h1 inside it) is capped at 1180 regardless
   of how wide the outer container grows. */
body .page-hero-grid { max-width: none !important; width: 100% !important; }
@media (min-width: 1280px) {
  body .page-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
    gap: 64px !important;
  }
}
@media (min-width: 1920px) {
  body .page-hero-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
    gap: 88px !important;
  }
}
@media (min-width: 2560px) {
  body .page-hero-grid {
    gap: 112px !important;
  }
}


/* HERO LATITUDE, keep original font sizes (moderate), but stretch the
   title block wider so it spans more screen latitude on big monitors. */

/* Baseline desktop (≥1024), original normalized sizes */
@media (min-width: 1024px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(34px, 4vw, 50px) !important;
    line-height: 1.12 !important;
    max-width: min(95%, 1280px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 17px !important;
    max-width: min(90%, 1080px) !important;
  }
}

@media (min-width: 1440px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(38px, 3.8vw, 56px) !important;
    max-width: min(95%, 1480px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 18px !important;
    max-width: min(90%, 1240px) !important;
  }
}

@media (min-width: 1920px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(42px, 3.4vw, 60px) !important;
    max-width: min(95%, 1720px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 19px !important;
    max-width: min(90%, 1440px) !important;
  }
}

@media (min-width: 2560px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(46px, 3vw, 62px) !important;
    max-width: min(95%, 2200px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 20px !important;
    max-width: min(90%, 1800px) !important;
  }
}

@media (min-width: 3200px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(52px, 2.4vw, 70px) !important;
    max-width: min(95%, 2800px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 21px !important;
    max-width: min(90%, 2200px) !important;
  }
}

@media (min-width: 4000px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(58px, 2.2vw, 76px) !important;
    max-width: min(95%, 3400px) !important;
  }
}

/* Tighten hero padding back to a sane scale (was ballooning to 200px) */
@media (min-width: 1920px) { body section.ov-hero-new, body .page-hero { padding: 96px 32px 88px !important; } }
@media (min-width: 2560px) { body section.ov-hero-new, body .page-hero { padding: 112px 40px 96px !important; } }
@media (min-width: 3200px) { body section.ov-hero-new, body .page-hero { padding: 128px 48px 112px !important; } }


/* Stretch PDP + collection inner containers on wide screens, same
   fluid pattern used on heroes and bulk-orders. */
@media (min-width: 1280px) {
  body .ovp-main, body .ovp-grid,
  body .col-container, body .col-hero-inner, body .col-grid,
  body .ovr-grid, body .lcg-grid, body .lcp-grid,
  body .ovp-further-grid, body .ovp-cred-grid,
  body .lp-container, body .ova-section-inner,
  body .ov-container, body .ovp-container {
    max-width: min(94%, 1320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 1440px) {
  body .ovp-main, body .ovp-grid,
  body .col-container, body .col-hero-inner, body .col-grid,
  body .ovr-grid, body .lcg-grid, body .lcp-grid,
  body .ovp-further-grid, body .ovp-cred-grid,
  body .lp-container, body .ova-section-inner,
  body .ov-container, body .ovp-container {
    max-width: min(94%, 1480px) !important;
  }
}
@media (min-width: 1920px) {
  body .ovp-main, body .ovp-grid,
  body .col-container, body .col-hero-inner, body .col-grid,
  body .ovr-grid, body .lcg-grid, body .lcp-grid,
  body .ovp-further-grid, body .ovp-cred-grid,
  body .lp-container, body .ova-section-inner,
  body .ov-container, body .ovp-container {
    max-width: min(92%, 1760px) !important;
  }
}
@media (min-width: 2560px) {
  body .ovp-main, body .ovp-grid,
  body .col-container, body .col-hero-inner, body .col-grid,
  body .ovr-grid, body .lcg-grid, body .lcp-grid,
  body .ovp-further-grid, body .ovp-cred-grid,
  body .lp-container, body .ova-section-inner,
  body .ov-container, body .ovp-container {
    max-width: min(90%, 2200px) !important;
  }
}
@media (min-width: 3200px) {
  body .ovp-main, body .ovp-grid,
  body .col-container, body .col-hero-inner, body .col-grid,
  body .ovr-grid, body .lcg-grid, body .lcp-grid,
  body .ovp-further-grid, body .ovp-cred-grid,
  body .lp-container, body .ova-section-inner,
  body .ov-container, body .ovp-container {
    max-width: min(88%, 2800px) !important;
  }
}
@media (min-width: 4000px) {
  body .ovp-main, body .ovp-grid,
  body .col-container, body .col-hero-inner, body .col-grid,
  body .ovr-grid, body .lcg-grid, body .lcp-grid,
  body .ovp-further-grid, body .ovp-cred-grid,
  body .lp-container, body .ova-section-inner,
  body .ov-container, body .ovp-container {
    max-width: min(86%, 3400px) !important;
  }
}

/* Product grid: more columns on wide screens */
@media (min-width: 1600px) {
  body .col-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 2200px) {
  body .col-grid { grid-template-columns: repeat(5, 1fr) !important; }
}


/* Stretch Learn-page hero/title containers to use the wide viewport.
   Article body containers (.gd-container, .post-body) stay narrower so
   the prose remains readable (60-80 chars per line is best for reading). */

/* TITLE/HERO inner wrappers, STRETCH */
@media (min-width: 1280px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner,
  body .post-hero {
    max-width: min(94%, 1320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 1440px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner,
  body .post-hero {
    max-width: min(94%, 1480px) !important;
  }
}
@media (min-width: 1920px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner,
  body .post-hero {
    max-width: min(92%, 1760px) !important;
  }
}
@media (min-width: 2560px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner,
  body .post-hero {
    max-width: min(90%, 2200px) !important;
  }
}
@media (min-width: 3200px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner,
  body .post-hero {
    max-width: min(88%, 2800px) !important;
  }
}
@media (min-width: 4000px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner,
  body .post-hero {
    max-width: min(86%, 3400px) !important;
  }
}

/* ARTICLE BODY containers (.gd-container etc), KEEP NARROW
   (typically 720-880px which is the sweet spot for prose readability) */
body .gd-container, body .post-body, body .gd-grid {
  /* Don't override, leave their author-set widths alone */
}

/* ARTICLE TITLES (.post-hero) are inside `<article class="post-shell">` which
   is 780px wide for body readability. Break the title out of that parent
   using negative-margin so it spans the full viewport. Inner text stays at
   a sensible width via internal padding. */
@media (min-width: 1024px) {
  body .post-hero {
    margin-left: calc(390px - 50vw) !important;
    margin-right: calc(390px - 50vw) !important;
    padding-left: max(32px, calc(50vw - 660px)) !important;
    padding-right: max(32px, calc(50vw - 660px)) !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1440px) {
  body .post-hero {
    padding-left: max(40px, calc(50vw - 740px)) !important;
    padding-right: max(40px, calc(50vw - 740px)) !important;
  }
}
@media (min-width: 1920px) {
  body .post-hero {
    padding-left: max(48px, calc(50vw - 880px)) !important;
    padding-right: max(48px, calc(50vw - 880px)) !important;
  }
}
@media (min-width: 2560px) {
  body .post-hero {
    padding-left: max(56px, calc(50vw - 1100px)) !important;
    padding-right: max(56px, calc(50vw - 1100px)) !important;
  }
}
@media (min-width: 3200px) {
  body .post-hero {
    padding-left: max(64px, calc(50vw - 1400px)) !important;
    padding-right: max(64px, calc(50vw - 1400px)) !important;
  }
}


/* Stretch every remaining inner-container class on wide screens. The list
   covers article shells, reimbursement / 101-guide bodies, contact body,
   PDP body grids, landing-page wrappers, and the page-hero sidecard. */

@media (min-width: 1280px) {
  body .post-shell,
  body .gd-container, body .gd-grid,
  body .uc-container, body .uc-grid,
  body .ova-section-inner,
  body .ov-pricing-grid, body .ov-cmp-row, body .ov-cmp-grid,
  body .ovp-page-grid, body .ovp-cred-grid, body .ovp-further-grid,
  body .lp-container, body .lcg-container, body .lcp-container,
  body .page-hero .sidecard {
    max-width: min(94%, 1320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 1440px) {
  body .post-shell,
  body .gd-container, body .gd-grid,
  body .uc-container, body .uc-grid,
  body .ova-section-inner,
  body .ov-pricing-grid, body .ov-cmp-row, body .ov-cmp-grid,
  body .ovp-page-grid, body .ovp-cred-grid, body .ovp-further-grid,
  body .lp-container, body .lcg-container, body .lcp-container,
  body .page-hero .sidecard {
    max-width: min(94%, 1480px) !important;
  }
}
@media (min-width: 1920px) {
  body .post-shell,
  body .gd-container, body .gd-grid,
  body .uc-container, body .uc-grid,
  body .ova-section-inner,
  body .ov-pricing-grid, body .ov-cmp-row, body .ov-cmp-grid,
  body .ovp-page-grid, body .ovp-cred-grid, body .ovp-further-grid,
  body .lp-container, body .lcg-container, body .lcp-container,
  body .page-hero .sidecard {
    max-width: min(92%, 1760px) !important;
  }
}
@media (min-width: 2560px) {
  body .post-shell,
  body .gd-container, body .gd-grid,
  body .uc-container, body .uc-grid,
  body .ova-section-inner,
  body .ov-pricing-grid, body .ov-cmp-row, body .ov-cmp-grid,
  body .ovp-page-grid, body .ovp-cred-grid, body .ovp-further-grid,
  body .lp-container, body .lcg-container, body .lcp-container,
  body .page-hero .sidecard {
    max-width: min(90%, 2200px) !important;
  }
}
@media (min-width: 3200px) {
  body .post-shell,
  body .gd-container, body .gd-grid,
  body .uc-container, body .uc-grid,
  body .ova-section-inner,
  body .ov-pricing-grid, body .ov-cmp-row, body .ov-cmp-grid,
  body .ovp-page-grid, body .ovp-cred-grid, body .ovp-further-grid,
  body .lp-container, body .lcg-container, body .lcp-container,
  body .page-hero .sidecard {
    max-width: min(88%, 2800px) !important;
  }
}
@media (min-width: 4000px) {
  body .post-shell,
  body .gd-container, body .gd-grid,
  body .uc-container, body .uc-grid,
  body .ova-section-inner,
  body .ov-pricing-grid, body .ov-cmp-row, body .ov-cmp-grid,
  body .ovp-page-grid, body .ovp-cred-grid, body .ovp-further-grid,
  body .lp-container, body .lcg-container, body .lcp-container,
  body .page-hero .sidecard {
    max-width: min(86%, 3400px) !important;
  }
}

/* "Zoom in", bump root font-size on ultra-wide screens so prose, ticks,
   and small UI text stay legible at the wider proportions. Affects rem-
   based sizes throughout the site; px-based sizes are unchanged. */
@media (min-width: 1920px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 19px; } }
@media (min-width: 3200px) { html { font-size: 22px; } }
@media (min-width: 4000px) { html { font-size: 26px; } }

/* Also bump body / article paragraph + list font on ultra-wide */
@media (min-width: 1920px) {
  body .gd-container p, body .gd-container li,
  body .post-shell p, body .post-shell li,
  body .ova-section p, body .ova-section li,
  body .uc-container p, body .uc-container li {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
}
@media (min-width: 2560px) {
  body .gd-container p, body .gd-container li,
  body .post-shell p, body .post-shell li,
  body .ova-section p, body .ova-section li,
  body .uc-container p, body .uc-container li {
    font-size: 19px !important;
    line-height: 1.7 !important;
  }
}
@media (min-width: 3200px) {
  body .gd-container p, body .gd-container li,
  body .post-shell p, body .post-shell li,
  body .ova-section p, body .ova-section li,
  body .uc-container p, body .uc-container li {
    font-size: 22px !important;
    line-height: 1.65 !important;
  }
}
@media (min-width: 4000px) {
  body .gd-container p, body .gd-container li,
  body .post-shell p, body .post-shell li,
  body .ova-section p, body .ova-section li,
  body .uc-container p, body .uc-container li {
    font-size: 26px !important;
    line-height: 1.6 !important;
  }
}

/* Body h2/h3 inside articles also scale */
@media (min-width: 1920px) {
  body .gd-container h2, body .post-shell h2, body .ova-section h2 { font-size: 32px !important; }
  body .gd-container h3, body .post-shell h3, body .ova-section h3 { font-size: 22px !important; }
}
@media (min-width: 2560px) {
  body .gd-container h2, body .post-shell h2, body .ova-section h2 { font-size: 38px !important; }
  body .gd-container h3, body .post-shell h3, body .ova-section h3 { font-size: 26px !important; }
}
@media (min-width: 3200px) {
  body .gd-container h2, body .post-shell h2, body .ova-section h2 { font-size: 46px !important; }
  body .gd-container h3, body .post-shell h3, body .ova-section h3 { font-size: 32px !important; }
}

/* Product card sizing on wide screens, slightly bigger images */
@media (min-width: 2560px) {
  body .ov-product-card-name { font-size: 17px !important; }
  body .ov-product-card-sub { font-size: 13.5px !important; }
}


/* RESET, keep root font-size normal at every viewport.
   The cascade is built on px units; bumping html { font-size } made
   every rem-based icon, padding, and small label inflate. */
html { font-size: 16px !important; }

/* No paragraph font-size scaling. Body prose stays at its natural 15-17px. */
body .gd-container p, body .gd-container li,
body .post-shell p, body .post-shell li,
body .ova-section p, body .ova-section li,
body .uc-container p, body .uc-container li {
  font-size: revert !important;
  line-height: revert !important;
}
body .gd-container h2, body .post-shell h2, body .ova-section h2 { font-size: revert !important; }
body .gd-container h3, body .post-shell h3, body .ova-section h3 { font-size: revert !important; }
body .ov-product-card-name, body .ov-product-card-sub { font-size: revert !important; }

/* SANE CONTAINER WIDTHS, wide enough to feel modern, capped so content
   doesn't sprawl on ultra-wide monitors. 1640px is the sweet spot used by
   Apple, Stryker, Linear, Vercel for content sites. */

/* Section + page-hero + bulk calc containers: 90% with 1640px cap */
@media (min-width: 1024px) {
  body main .ov-bulk-calc .container,
  body .page-hero .container,
  body .ova-container,
  body header.ov-header > div,
  body .ov-section-container,
  body section.ov-hero-new > div:nth-child(2),
  body .ov-bulk > div,
  body .ov-loyalty > div,
  body .ov-founder-video > div,
  body .ov-press > div,
  body .ov-diff > div,
  body .ov-who-head,
  body .ov-who-grid,
  body footer.ov-footer > div,
  body .ov-footer-grid {
    max-width: min(90vw, 1640px) !important;
  }
}

/* Hero TEXT, keep heading readable. Cap h1 at ~880-1000px. */
@media (min-width: 1024px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(34px, 3.6vw, 52px) !important;
    line-height: 1.15 !important;
    max-width: min(85%, 980px) !important;
    letter-spacing: -0.02em !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 17px !important;
    line-height: 1.6 !important;
    max-width: min(80%, 760px) !important;
  }
}
@media (min-width: 1440px) {
  body section.ov-hero-new h1, body .page-hero h1, body .gh-hero h1,
  body .ov-rl-hero h1, body .ov-cmp-hero h1, body .post-hero h1 {
    font-size: clamp(38px, 3.4vw, 56px) !important;
    max-width: min(85%, 1080px) !important;
  }
  body section.ov-hero-new p:nth-child(3),
  body .page-hero .lede, body .gh-hero p:not(.kicker),
  body .ov-rl-hero .ov-rl-dek, body .ov-cmp-hero .ov-cmp-dek,
  body .post-hero p.post-dek {
    font-size: 18px !important;
    max-width: min(80%, 840px) !important;
  }
}

/* Article body wrapper, KEEP NARROW (reading width). Article hero stays
   wide via its breakout, but the article content is comfortable to read. */
@media (min-width: 1024px) {
  body .post-shell {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .gd-container, body .uc-container {
    max-width: min(90vw, 1180px) !important;
  }
}

/* Article HERO ONLY (.post-hero), still spans wider via negative-margin
   breakout from the narrow .post-shell parent. */
@media (min-width: 1024px) {
  body .post-hero {
    margin-left: calc(440px - 50vw) !important;
    margin-right: calc(440px - 50vw) !important;
    padding-left: max(28px, calc(50vw - 600px)) !important;
    padding-right: max(28px, calc(50vw - 600px)) !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1920px) {
  body .post-hero {
    padding-left: max(40px, calc(50vw - 700px)) !important;
    padding-right: max(40px, calc(50vw - 700px)) !important;
  }
}

/* PDP main column, cap so the product image doesn't go billboard. */
@media (min-width: 1024px) {
  body .ovp-main, body .ovp-grid {
    max-width: min(90vw, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Resource page heroes (.ov-rl-hero-inner, .ov-cmp-hero-inner, .gh-hero-inner)
  , cap at 1640px so they don't sprawl on ultra-wide screens like before */
@media (min-width: 1024px) {
  body .ov-rl-hero-inner,
  body .ov-cmp-hero-inner,
  body .gh-hero-inner {
    max-width: min(90vw, 1640px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Resource page BODY containers (.ov-rl-shell, .ov-cmp-shell, .gh-shell)
  , readable width for prose, capped at 1080px */
@media (min-width: 1024px) {
  body .ov-rl-shell, body .ov-cmp-shell, body .gh-shell {
    max-width: min(90vw, 1080px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Collection page, comfortable grid */
@media (min-width: 1024px) {
  body .col-container, body .col-hero-inner, body .col-grid {
    max-width: min(90vw, 1480px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 1600px) {
  body .col-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Bulk calc tier ladder + benefit grid, don't oversize on wide screens */
@media (min-width: 1024px) {
  body main .ov-bulk-calc .ov-bulk-tier-ladder {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
  }
  body main .ov-bulk-calc .ov-bulk-benefits {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Page-hero grid, sidecard cap */
@media (min-width: 1024px) {
  body .page-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 360px) !important;
    gap: 56px !important;
  }
}
@media (min-width: 1600px) {
  body .page-hero-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 400px) !important;
    gap: 72px !important;
  }
}

/* Hide animation-timeline overshoot from earlier passes, only use
   our natural-fade JS approach */
@supports (animation-timeline: view()) {
  body main > section, body main > article {
    animation-timeline: none !important;
  }
}

html,body{-webkit-font-smoothing:antialiased !important;-moz-osx-font-smoothing:grayscale !important;}
html body [class*="hero"] h1,html body .ovx-hero h1,html body .post-hero h1,html body article.post-shell .post-hero h1{font-family:'Assistant',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;font-weight:600 !important;letter-spacing:-0.02em !important;font-size:clamp(32px,3.4vw,52px) !important;line-height:1.12 !important;-webkit-font-smoothing:antialiased !important;-moz-osx-font-smoothing:grayscale !important;font-synthesis:none !important;}

@media (min-width: 1024px){
  body .col-hero .col-hero-inner{ max-width: 760px !important; margin-left: 0 !important; margin-right: 0 !important; }
}

.ovx-pcard__img img,.col-product__img img,.ovp-photo img,.ovp-thumb img,.ov-bulk-product-info-img img,.ovx-main img,.ovx-card img{filter:drop-shadow(0 10px 22px rgba(27,42,78,0.18));}
@media (min-width:861px){header.ov-header{padding:12px 24px!important}html body header.ov-header>div{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}}
header.ov-header a:has(img),header.ov-header a:has(svg){border-bottom:0 !important;box-shadow:none !important;text-decoration:none !important;}

html.ov-js body main > section:not([class*="hero"]):not([class*="ovp-page"]),
html.ov-js body main > div.ov-home,
html.ov-js body main > article:not([class*="hero"]):not(.post-shell),
html.ov-js body main > article.post-shell > :not(.post-hero):not(script):not(style):not(link):not(template):not(meta){
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  html.ov-js body main > section,
  html.ov-js body main > div.ov-home,
  html.ov-js body main > article,
  html.ov-js body main > article.post-shell > *{ opacity:1 !important; transform:none !important; }
}


/* Mobile nav + sizing fix: the hamburger sits outside <header> (static), so the
   old show-rule never matched. Show it (fixed, top-left) under 760px, hide the
   inline nav, shrink the oversized logo, and prevent horizontal zoom/overflow. */
@media (max-width: 760px){
  header.ov-header nav, header nav.ov-header-nav { display: none !important; }
  .ovx-mobile-hamburger { display: inline-flex !important; position: fixed !important; top: 14px; left: 14px; z-index: 1200 !important; background: #fff !important; box-shadow: 0 2px 8px rgba(27,42,78,0.16); }
  header.ov-header img[src*="ovena-logo"], header img[alt*="Ovena"] { max-height: 44px !important; width: auto !important; }
  html, body { overflow-x: clip !important; max-width: 100% !important; }
}
@media (min-width: 761px){ .ovx-mobile-hamburger { display: none !important; } }

.ov-has-dropdown:hover .ov-dropdown { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } .ov-dropdown a:hover { background:#F7F9FC; color:#2D9CDB; }

html body .ovshop section.ovshop-top{background-image:linear-gradient(180deg,#FAF7F1 0%,#F5F0E8 100%)!important;background-color:#F5F0E8!important;}
.ovshop{--bone:#F5F0E8;--bone2:#FAF7F1;--navy:#1B2A4E;--blue:#2D9CDB;--ink:#2c3a52;--mist:#6a7385;--line:rgba(27,42,78,.10);background:var(--bone);font-family:Assistant,-apple-system,system-ui,sans-serif;color:var(--navy);-webkit-font-smoothing:antialiased;}
.ovshop *,.ovshop *::before,.ovshop *::after{box-sizing:border-box;}
.ovshop [class^="ovshop"],.ovshop [class^="ovfam"],.ovshop [class^="ovcard"],.ovshop [class^="ovneed"],.ovshop [class^="ovroute"],.ovshop [class^="ovbtn"],.ovshop [class^="ovtab"]{opacity:1!important;transform:none!important;}
.ovshop-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px);}
.ovshop-serif{font-family:'Fraunces',Georgia,serif;}
/* hero */
.ovshop-top{padding:clamp(96px,12vh,140px) 0 clamp(40px,6vh,64px);background:linear-gradient(180deg,var(--bone2),var(--bone));}
.ovshop-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 16px;}
.ovshop-h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(40px,5.4vw,68px);line-height:1.04;letter-spacing:-.015em;color:var(--navy);margin:0 0 18px;}
.ovshop-h1 .it{font-style:italic;color:var(--blue);}
.ovshop-lede{font-size:clamp(16px,1.4vw,18.5px);line-height:1.6;color:var(--mist);max-width:600px;margin:0 0 30px;}
.ovshop-cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.ovbtn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;letter-spacing:.01em;}
.ovbtn--navy{background:var(--navy);color:#fff;}
.ovbtn--navy:hover{transform:translateY(-2px);background:#16233f;box-shadow:0 10px 24px rgba(27,42,78,.18);}
.ovbtn--ghost{background:transparent;color:var(--navy);border:1.5px solid rgba(27,42,78,.22);}
.ovbtn--ghost:hover{border-color:var(--navy);transform:translateY(-2px);}
/* sticky tabs */
.ovshop-tabs{position:sticky;top:64px;z-index:40;background:rgba(245,240,232,.94);backdrop-filter:saturate(1.05) blur(8px);-webkit-backdrop-filter:saturate(1.05) blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ovshop-tabs-inner{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.ovshop-tabs-inner::-webkit-scrollbar{display:none;}
.ovtab{flex:0 0 auto;padding:16px 16px 14px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;}
.ovtab:hover{color:var(--blue);}
.ovtab.is-active{color:var(--navy);border-bottom-color:var(--blue);}
/* section heads */
.ovshop-section{padding:clamp(48px,7vh,84px) 0;}
.ovshop-section-h{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:-.01em;margin:0 0 6px;}
.ovshop-section-sub{font-size:15.5px;color:var(--mist);margin:0 0 34px;}
/* shop by need */
.ovneed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ovneed{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;position:relative;background:var(--bone2);border:1px solid var(--line);border-radius:14px;padding:24px 26px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;min-height:118px;}
.ovneed:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,42,78,.08);border-color:rgba(45,156,219,.4);}
.ovneed-t{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.01em;}
.ovneed-d{font-size:14px;line-height:1.5;color:var(--mist);}
.ovneed-arrow{position:absolute;right:22px;top:22px;color:var(--blue);font-size:18px;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s;}
.ovneed:hover .ovneed-arrow{opacity:1;transform:translateX(0);}
/* family */
.ovfam{padding:clamp(46px,6.5vh,76px) 0;scroll-margin-top:150px;}
.ovfam:nth-of-type(even){background:var(--bone2);}
.ovfam-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;margin:0 0 32px;}
.ovfam-h{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(32px,4vw,52px);letter-spacing:-.015em;color:var(--navy);margin:0;line-height:1;}
.ovfam-rule{flex:1;height:1.5px;background:linear-gradient(90deg,var(--blue),rgba(45,156,219,.12));min-width:40px;align-self:center;}
.ovfam-lede{flex:0 0 100%;font-size:16px;line-height:1.55;color:var(--mist);max-width:620px;margin:2px 0 0;}
/* cards */
.ovcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ovcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 1px 2px rgba(27,42,78,.04);}
.ovcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(27,42,78,.12);}
.ovcard-media{position:relative;aspect-ratio:1/1;background:var(--bone2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ovcard-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ovcard-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--navy);color:#fff;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:999px;}
.ovcard-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1;}
.ovcard-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 8px;}
.ovcard-title{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin:0 0 7px;line-height:1.2;}
.ovcard-desc{font-size:14px;line-height:1.55;color:var(--mist);margin:0 0 14px;}
.ovcard-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px;}
.ovcard-chips span{font-size:12px;font-weight:600;color:var(--navy);background:rgba(45,156,219,.10);border:1px solid rgba(45,156,219,.18);border-radius:999px;padding:5px 11px;}
.ovcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px;}
.ovcard-price{font-size:18px;font-weight:700;color:var(--navy);}
.ovcard-cta{font-size:13.5px;font-weight:600;color:var(--blue);white-space:nowrap;transition:transform .18s;}
.ovcard:hover .ovcard-cta{transform:translateX(3px);}
.ovcard-trust{font-size:12px;color:var(--mist);margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);}
/* routing */
.ovshop-route{background:var(--navy);color:#fff;padding:clamp(52px,7vh,84px) 0;}
.ovshop-route .ovshop-section-h{color:#fff;}
.ovshop-route .ovshop-section-sub{color:rgba(255,255,255,.72);}
.ovroute-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ovroute{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:24px;text-decoration:none;min-height:150px;transition:background .18s,transform .18s,border-color .18s;}
.ovroute:hover{background:rgba(255,255,255,.11);transform:translateY(-3px);border-color:rgba(127,196,238,.5);}
.ovroute-q{font-size:16.5px;font-weight:700;color:#fff;line-height:1.3;}
.ovroute-cta{font-size:14px;font-weight:600;color:#7FC4EE;}
/* bulk band */
.ovshop-bulk{padding:clamp(40px,6vh,72px) 0;}
.ovbulk-card{position:relative;border-radius:22px;overflow:hidden;background:#13203c;min-height:340px;display:grid;grid-template-columns:1.05fr 1fr;box-shadow:0 30px 60px -34px rgba(10,16,30,.5);}.ovbulk-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(218,177,86,.0),rgba(218,177,86,.75) 30%,rgba(230,201,136,.9) 50%,rgba(218,177,86,.75) 70%,rgba(218,177,86,0));z-index:3;pointer-events:none;}
.ovbulk-text{padding:clamp(36px,4vw,60px);display:flex;flex-direction:column;justify-content:center;color:#fff;z-index:2;}
.ovbulk-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9cc7ea;margin:0 0 14px;}
.ovbulk-h{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0 0 16px;letter-spacing:-.01em;}
.ovbulk-b{font-size:16.5px;line-height:1.6;color:#dbe4f2;margin:0 0 26px;max-width:42ch;}
.ovbulk-cta{align-self:flex-start;background:#fff;color:#1B2A4E;border-radius:999px;padding:14px 28px;font-weight:700;font-size:14px;text-decoration:none;transition:transform .18s;}
.ovbulk-cta:hover{transform:translateY(-2px);}
.ovbulk-card .ovbulk-media{display:block;}.ovbulk-media{background-image:linear-gradient(90deg,#13203c 0%,rgba(19,32,60,.55) 26%,rgba(19,32,60,.08) 62%,rgba(19,32,60,0) 100%),url(bulk-orders-shelf.webp);background-size:cover;background-position:center right;}
/* trust */
.ovshop-trust{background:var(--bone2);border-top:1px solid var(--line);}
.ovtrust-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,5vw,64px);padding:30px 0;}
.ovtrust-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--navy);}
.ovtrust-item svg{width:18px;height:18px;color:var(--blue);flex:0 0 auto;}
@media(max-width:980px){.ovneed-grid{grid-template-columns:repeat(2,1fr);}.ovcard-grid{grid-template-columns:repeat(2,1fr);}.ovroute-grid{grid-template-columns:repeat(2,1fr);}.ovbulk-card{grid-template-columns:1fr;}.ovbulk-media{min-height:240px;}.ovbulk-text{order:2;}}
@media(max-width:600px){.ovneed-grid{grid-template-columns:1fr;}.ovcard-grid{grid-template-columns:1fr;}.ovroute-grid{grid-template-columns:1fr;}.ovshop-tabs{top:58px;}}


/* Hero entrance, fade + rise on initial page load (staggered).
   Initial state only applies when JS is available (html.ov-js) so non-JS users
   see content immediately. */
html.ov-js body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :where(.kicker,[class*="kicker"],[class*="eyebrow"],h1,[class*="-h1"],[class*="dek"],[class*="lede"],[class*="hero-sub"],[class*="hero-desc"],[class*="intro"],[class$="__sub"],[class*="__copy"] > p, .ovx-hero__cta, .cta-row, .lp-hero-cta, .ova-cred, .post-meta) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
  will-change: opacity, transform;
}
html.ov-js.ov-loaded body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :where(.kicker,[class*="kicker"],[class*="eyebrow"],h1,[class*="-h1"],[class*="dek"],[class*="lede"],[class*="hero-sub"],[class*="hero-desc"],[class*="intro"],[class$="__sub"],[class*="__copy"] > p, .ovx-hero__cta, .cta-row, .lp-hero-cta, .ova-cred, .post-meta) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
html.ov-js body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :is(.kicker,[class*="kicker"],[class*="eyebrow"]) { transition-delay: 0.05s; }
html.ov-js body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :is(h1,[class*="-h1"]) { transition-delay: 0.18s; }
html.ov-js body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :is([class*="dek"],[class*="lede"],[class*="hero-sub"],[class*="hero-desc"],[class*="intro"],[class$="__sub"],[class*="__copy"] > p) { transition-delay: 0.32s; }
html.ov-js body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :is(.ovx-hero__cta, .cta-row, .lp-hero-cta, .ova-cred, .post-meta) { transition-delay: 0.44s; }


@media (prefers-reduced-motion: reduce) {
  html.ov-js body :is(.ov-hero-new,.page-hero,.gh-hero,.ov-rl-hero,.ov-cmp-hero,.post-hero,.ova-hero,.ovx-hero,.ov-cart-hero,.ov-tcr-hero,.ovx-bulk,.col-hero,.lp-hero) :where(.kicker,[class*="kicker"],[class*="eyebrow"],h1,[class*="-h1"],[class*="dek"],[class*="lede"],[class*="hero-sub"],[class*="hero-desc"],[class*="intro"],[class$="__sub"],[class*="__copy"] > p, .ovx-hero__cta, .cta-row, .lp-hero-cta, .ova-cred, .post-meta) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Wide-screen scaling, give the layout breathing room on 24"+ monitors.
   At 1600px+: containers grow from ~1180-1280 to ~1440.
   At 1900px+: grow further to ~1560. */
@media (min-width: 1600px) {
  html body .ovx-hero__wrap,
  html body .ovx-sec__wrap,
  html body .ovx-bulk__wrap,
  html body .ovx-founder__wrap,
  html body .ovx-press__wrap,
  html body .col-shell,
  html body .col-hero-inner,
  html body .col-products-grid,
  html body .col-page-inner,
  html body .ov-rl-hero-inner,
  html body .ov-rl-shell,
  html body .gh-hero-inner,
  html body .gh-shell,
  html body .ova-hero-inner,
  html body .ovp-page,
  html body .ov-cart-hero > div,
  html body .ov-page-switcher-inner,
  html body main > section > div[style*="max-width:1180px"],
  html body main > section > div[style*="max-width: 1180px"],
  html body main > section > div[style*="max-width:1240px"],
  html body main > section > div[style*="max-width: 1240px"],
  html body main > section > div[style*="max-width:1280px"],
  html body main > section > div[style*="max-width: 1280px"],
  html body section > div[style*="max-width:1180px"],
  html body section > div[style*="max-width:1240px"] {
    max-width: 1440px !important;
  }
  /* Slightly bigger gaps to match the wider canvas */
  html body .ovx-prod__grid { gap: 24px; }
}
@media (min-width: 1900px) {
  html body .ovx-hero__wrap,
  html body .ovx-sec__wrap,
  html body .ovx-bulk__wrap,
  html body .ovx-founder__wrap,
  html body .ovx-press__wrap,
  html body .col-shell,
  html body .col-hero-inner,
  html body .col-products-grid,
  html body .col-page-inner,
  html body .ov-rl-hero-inner,
  html body .ov-rl-shell,
  html body .gh-hero-inner,
  html body .gh-shell,
  html body .ova-hero-inner,
  html body .ovp-page,
  html body .ov-cart-hero > div,
  html body .ov-page-switcher-inner,
  html body main > section > div[style*="max-width:1180px"],
  html body main > section > div[style*="max-width: 1180px"],
  html body main > section > div[style*="max-width:1240px"],
  html body main > section > div[style*="max-width: 1240px"],
  html body main > section > div[style*="max-width:1280px"],
  html body main > section > div[style*="max-width: 1280px"],
  html body section > div[style*="max-width:1180px"],
  html body section > div[style*="max-width:1240px"] {
    max-width: 1560px !important;
  }
}


header.ov-header nav > a,
header.ov-header nav > span > a,
header.ov-header nav .ov-shop-mega > a,
header.ov-header nav .ov-has-dropdown > a,
header.ov-header nav .ov-res-dropdown > a,
header.ov-header nav .ov-learn-mega > a {
  padding: 8px 6px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 4px 4px 0 0 !important;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease !important;
}
header.ov-header nav > a:hover,
header.ov-header nav > span > a:hover,
header.ov-header nav .ov-shop-mega:hover > a,
header.ov-header nav .ov-has-dropdown:hover > a,
header.ov-header nav .ov-res-dropdown:hover > a,
header.ov-header nav .ov-learn-mega:hover > a {
  color: #2D9CDB !important;
  border-bottom-color: #2D9CDB !important;
  border-bottom: 3px solid #2D9CDB !important;
  background-color: rgba(45,156,219,0.10) !important;
}
header.ov-header nav a.ov-active {
  color: #2D9CDB !important;
  border-bottom: 3px solid #2D9CDB !important;
}


/* Lock layout to ~14" laptop view across all desktop screen sizes.
   On screens >= 1024px, cap key max-widths to 1280px so larger monitors
   don't stretch the layout. */
@media (min-width: 1024px) {
  html body .ovx-hero__wrap,
  html body .ovx-sec__wrap,
  html body .ovx-bulk__wrap,
  html body .ovx-founder__wrap,
  html body .ovx-press__wrap,
  html body .col-shell,
  html body .col-hero-inner,
  html body .col-products-grid,
  html body .col-page-inner,
  html body .col-container,
  html body .col-grid,
  html body .ov-rl-hero-inner,
  html body .ov-rl-shell,
  html body .gh-hero-inner,
  html body .gh-shell,
  html body .ova-hero-inner,
  html body .ovp-page,
  html body .ovp-main,
  html body .ov-cart-hero > div,
  html body .ov-page-switcher-inner,
  html body .ovp-cmpkit-wrap,
  html body main > section > div[style*="max-width:1180px"],
  html body main > section > div[style*="max-width: 1180px"],
  html body main > section > div[style*="max-width:1240px"],
  html body main > section > div[style*="max-width: 1240px"],
  html body main > section > div[style*="max-width:1280px"],
  html body main > section > div[style*="max-width: 1280px"],
  html body section > div[style*="max-width:1180px"],
  html body section > div[style*="max-width:1240px"] {
    /* Scale with viewport so larger screens fill proportionally (90vw),
       with a sane upper cap so 4K monitors don't get TOO wide. */
    max-width: min(92vw, 2000px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* Override the prior @media (max-width: 860px) rule that hid the nav.
   Keep nav visible down to ~700px, just shrink + wrap. Only below 700px do we
   hide the inline nav and rely on the hamburger drawer. */
@media (max-width: 1100px) {
  header.ov-header nav {
    flex-wrap: wrap !important;
    gap: 14px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 860px) {
  header.ov-header nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    font-size: 12.5px !important;
  }
  header.ov-header nav > a,
  header.ov-header nav > span > a {
    padding: 6px 4px !important;
  }
}
@media (max-width: 700px) {
  header.ov-header nav { display: none !important; }
  header.ov-header .ovx-mobile-hamburger { display: inline-flex !important; }
}

/* Hamburger button, hidden by default, shown only under 700px */
.ovx-mobile-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(27,42,78,0.20);
  border-radius: 6px;
  cursor: pointer;
  color: #1B2A4E;
  padding: 0;
  margin-left: 12px;
}
.ovx-mobile-hamburger svg { width: 22px; height: 22px; }

/* Slide-down drawer, anchored to the header */
.ovx-mobile-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid rgba(27,42,78,0.10);
  box-shadow: 0 14px 24px rgba(27,42,78,0.10);
  z-index: 9990;
  padding: 78px 20px 20px;
  max-height: 100vh;
  overflow-y: auto;
}
.ovx-mobile-drawer.is-open { display: block; }
.ovx-mobile-drawer a {
  display: block;
  padding: 14px 12px;
  color: #1B2A4E;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid rgba(27,42,78,0.06);
}
.ovx-mobile-drawer a:hover { background: #F4F7FB; color: #2D9CDB; }
.ovx-mobile-drawer .ovx-mobile-section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #52606e;
  padding: 18px 12px 8px;
}
.ovx-mobile-drawer-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid rgba(27,42,78,0.20);
  border-radius: 6px; cursor: pointer; color: #1B2A4E;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}


/* Scale the base font size with viewport so everything (text, padding, buttons)
   grows proportionally on larger screens, matching the "14-inch laptop" feel.
   Only applies on desktop viewports. */
@media (min-width: 1024px) {
  html {
    /* Base of 16px on a 1440px laptop, scaling up to 19.2px on a 2000px screen */
    font-size: clamp(16px, 1.0vw + 1.5px, 19.5px);
  }
  /* Bump key text bigger relative to base */
  html body .col-product__title { font-size: 1rem !important; }
  html body .col-product__desc { font-size: 0.92rem !important; }
  html body .ovp-h1 { font-size: clamp(28px, 2.5vw, 40px) !important; }
}
/* Push the product page gallery to take MORE of the available width
   on bigger screens so the hero photo looks substantial. */
@media (min-width: 1280px) {
  html body .ovp-main {
    grid-template-columns: minmax(0, 1.4fr) minmax(380px, 0.8fr) !important;
    gap: 64px !important;
  }
}
@media (min-width: 1600px) {
  html body .ovp-main {
    grid-template-columns: minmax(0, 1.5fr) minmax(420px, 0.7fr) !important;
    gap: 72px !important;
  }
}


/* Compact the filter sidebar + give product grid 4 columns at wider viewports */
@media (min-width: 1024px) {
  html body .col-grid { grid-template-columns: 220px 1fr !important; gap: 36px !important; }
  html body .col-sidebar { padding: 18px 18px !important; font-size: 13px !important; }
  html body .col-sidebar h3 { font-size: 10px !important; letter-spacing: 0.14em !important; margin: 0 0 10px !important; }
  html body .col-filter-group { padding: 10px 0 !important; }
  html body .col-filter-group h4 {
    font-size: 10.5px !important;
    letter-spacing: 0.10em !important;
    margin: 0 0 4px !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    cursor: pointer !important;
  }
  html body .col-filter-group h4::after {
    content: '−';
    font-size: 16px; font-weight: 700;
    color: #52606e;
    margin-left: 6px;
    transition: transform .15s;
  }
  html body .col-filter-group.is-collapsed h4::after { content: '+'; }
  html body .col-filter-group.is-collapsed .col-filter-opt { display: none !important; }
  html body .col-filter-opt { padding: 3px 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; }
  html body .col-filter-opt .count { font-size: 11px !important; }
}

/* 4-column product grid on wider screens */
@media (min-width: 1280px) {
  html body .col-products { grid-template-columns: 1fr 1fr 1fr 1fr !important; gap: 20px !important; }
}


.ovx-cchat{position:fixed;bottom:64px;right:18px;width:min(92vw,360px);height:min(72vh,520px);background:#fff;border:1px solid rgba(27,42,78,0.14);border-radius:14px;box-shadow:0 24px 60px rgba(27,42,78,0.28);z-index:100002;display:none;flex-direction:column;overflow:hidden;font-family:Assistant,-apple-system,sans-serif;}
.ovx-cchat.is-open{display:flex;}
.ovx-cchat__hd{background:#1B2A4E;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;}
.ovx-cchat__hd b{font-size:14px;font-weight:700;display:block;}
.ovx-cchat__hd small{display:block;font-size:11px;color:#A5DFFA;font-weight:500;}
.ovx-cchat__x{margin-left:auto;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1;}
.ovx-cchat__body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#F7F9FC;}
.ovx-cchat__msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;}
.ovx-cchat__msg--bot{background:#fff;border:1px solid rgba(27,42,78,0.10);color:#1B2A4E;align-self:flex-start;border-bottom-left-radius:4px;}
.ovx-cchat__msg--me{background:#2D9CDB;color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.ovx-cchat__ft{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(27,42,78,0.08);background:#fff;}
.ovx-cchat__in{flex:1;border:1px solid rgba(27,42,78,0.18);border-radius:18px;padding:9px 14px;font-size:13.5px;font-family:inherit;outline:none;}
.ovx-cchat__in:focus{border-color:#2D9CDB;}
.ovx-cchat__send{background:#1B2A4E;color:#fff;border:0;border-radius:18px;padding:0 16px;font-weight:700;font-size:13px;cursor:pointer;}


/* Mobile: center the header logo, and shrink the right-side floating buttons to
   compact icon circles so they stop covering page content. */
@media (max-width: 760px){
  header.ov-header > div{ position:relative !important; display:block !important; text-align:center !important; }
  header.ov-header > div > a{ display:inline-block !important; float:none !important; }
  header.ov-header > div > div{ position:absolute !important; right:10px !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; }
  html body #ov-preview-cart-btn, html body #ov-clinical-chat-btn, html body .ov-clinical-chat-btn, html body #ov-ship-meter-btn{
    width:46px !important; height:46px !important; min-width:0 !important; padding:0 !important;
    border-radius:50% !important; font-size:0 !important; line-height:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    overflow:hidden !important; gap:0 !important;
  }
  html body #ov-preview-cart-btn::before{ content:"\1F6D2"; font-size:21px; line-height:1; }
  html body #ov-clinical-chat-btn::before, html body .ov-clinical-chat-btn::before{ content:"\1F4AC"; font-size:21px; line-height:1; }
  html body #ov-ship-meter-btn::before{ content:"\1F4E6"; font-size:19px; line-height:1; }
  html body #ov-ship-meter-btn > span{ display:none !important; }
}


/* Collapse the header nav into the hamburger dropdown whenever it can't fit on
   one line (at ANY viewport width), instead of wrapping to two rows. JS toggles
   html.ov-nav-collapsed based on the nav's real fit in its column. */
header.ov-header nav,
header nav.ov-header-nav { flex-wrap: nowrap !important; }
html.ov-nav-collapsed header.ov-header nav,
html.ov-nav-collapsed header nav.ov-header-nav { display: none !important; }
html.ov-nav-collapsed .ovx-mobile-hamburger {
  display: inline-flex !important;
  position: fixed !important;
  top: 16px; left: 16px;
  z-index: 1200 !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(27,42,78,0.16);
}
/* Keep the logo centered (and icons right) when the nav collapses on grid-layout
   widths. Hiding the nav would otherwise let the 1fr/auto/1fr grid auto-place the
   logo into the empty left column. Inert under the <=760 mobile (block) layout,
   which already centers the logo via text-align. */
html.ov-nav-collapsed header.ov-header > div { grid-template-columns: 1fr auto 1fr !important; }
html.ov-nav-collapsed header.ov-header > div > a { grid-column: 2 !important; justify-self: center !important; }
html.ov-nav-collapsed header.ov-header > div > div { grid-column: 3 !important; justify-self: end !important; }

/* ── Modern collapsed-nav dropdown panel ────────────────────────────────
   Restyle the hamburger drawer: a clean left-anchored sheet with a brand
   accent bar, rounded corners, soft shadow, refined links + chevrons, and a
   smooth fade/slide. The .is-open class (toggled by the existing buttons)
   drives visibility, so no markup/JS changes are needed. */
.ovx-mobile-drawer {
  display: block !important; visibility: hidden; opacity: 0; transform: translateY(-10px);
  pointer-events: none; transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
  top: 0 !important; left: 0 !important; right: auto !important;
  width: min(382px, 100vw) !important;
  background: #fff !important; border: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 28px 64px -16px rgba(15,23,42,0.36) !important;
  padding: 72px 14px 16px !important; max-height: calc(100vh - 8px); overflow-y: auto;
}
.ovx-mobile-drawer.is-open { visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.ovx-mobile-drawer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1B2A4E 0%, #2D9CDB 58%, #DAB156 100%);
}
.ovx-mobile-drawer a {
  position: relative; display: flex !important; align-items: center; justify-content: space-between;
  padding: 12px 14px !important; margin: 1px 0 !important; border: 0 !important; border-radius: 10px !important;
  color: #1B2A4E !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em;
  text-decoration: none !important; transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.ovx-mobile-drawer a::after {
  content: "\203A"; font-size: 18px; line-height: 1; color: #c3ccd6; font-weight: 700;
  transition: transform .15s ease, color .15s ease;
}
.ovx-mobile-drawer a:hover { background: #F1F7FC !important; color: #2D9CDB !important; padding-left: 18px !important; }
.ovx-mobile-drawer a:hover::after { color: #2D9CDB; transform: translateX(3px); }
.ovx-mobile-drawer .ovx-mobile-section-label {
  font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: #8A97A6 !important; padding: 15px 14px 5px !important; margin: 5px 0 2px !important;
  border-top: 1px solid rgba(27,42,78,0.07);
}
.ovx-mobile-drawer-close {
  top: 15px !important; right: 14px !important; width: 38px !important; height: 38px !important;
  border: 0 !important; border-radius: 50% !important; background: #F1F4F8 !important; color: #1B2A4E !important;
  font-size: 20px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s ease, transform .2s ease;
}
.ovx-mobile-drawer-close:hover { background: #E2E8F0 !important; transform: rotate(90deg); }


html body header.ov-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;background-color:transparent!important;border-bottom:1px solid transparent!important;box-shadow:none!important;z-index:1200!important;transition:background-color .25s ease,border-color .25s ease!important;}
html body header.ov-header a{transition:color .25s ease!important;}
html body header.ov-header img[src*="ovena-logo"]{transition:filter .25s ease!important;}
html body header.ov-header.nav--dark a{color:#fff!important;}
html body header.ov-header.nav--dark img[src*="ovena-logo"]{filter:brightness(0) invert(1)!important;}
html body header.ov-header.nav--light a{color:#1B2A4E!important;}
html body header.ov-header.nav--light img[src*="ovena-logo"]{filter:none!important;}
html body header.ov-header .ov-flyout a,html body header.ov-header .ov-dropdown a,html body header.ov-header .ov-mega a{color:#1B2A4E!important;}
html body header.ov-header.nav--scrolled.nav--light{border-bottom-color:rgba(27,42,78,.12)!important;box-shadow:0 1px 0 rgba(27,42,78,.04)!important;}
html body header.ov-header.nav--scrolled.nav--dark{border-bottom-color:rgba(255,255,255,.16)!important;}