/* ============================================================
   Stratus header fix — paste as the ENTIRE Additional CSS, Publish,
   then hard-reload (Cmd-Shift-R).

   What was actually wrong (reproduced locally against the theme's own
   style.css + nav.php, not guessed):

   1. Dark vertical bars / top sliver = backdrop-filter edge fringe. Safari
      paints a dark band at the edge of a blurred element. [data-utilbar] and
      [data-nav] each blurred themselves, putting such an edge at both viewport
      sides, and — once the utility bar collapses on scroll — along the nav's
      exposed top edge. The theme bled the bars -28px to hide it, but
      [data-chrome] had overflow:hidden and clipped the bleed right back.

   2. Gap above the header / logo pushed right = nav.php sets the chrome's
      position, top, left and right INLINE, so any stylesheet offset is ignored
      while its padding still applies, indenting the whole header.

   Fix: blur once, on a pseudo-element behind both tiers, bled 60px past the
   top and sides so every fringe-able edge is off-screen. The chrome's own box
   is left alone — js/stratus.js measures its height for the content spacer.
   ============================================================ */

html body [data-utilbar],
html body [data-nav] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  outline: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

html body [data-chrome] {
  overflow: visible !important;
  will-change: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body [data-chrome]::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -60px !important;
  left: -60px !important;
  right: -60px !important;
  bottom: 0 !important;
  backdrop-filter: saturate(1.7) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.7) blur(20px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* border-BOTTOM is deliberately untouched: stratus.js animates the utility
   bar's to 0px on scroll and adds the nav's hairline. An !important here would
   outrank that animation and leave a 1px line behind. */

html, body { margin-top: 0 !important; padding-top: 0 !important; }

html body .site-header,
html body .main-navigation,
html body .site-footer,
html body .site-info { display: none !important; }
/* ===========================================================
   Stratus Medical — WooCommerce cart & checkout restyle
   Covers BOTH the classic shortcode checkout and the newer
   Checkout/Cart blocks. Unused selectors are inert.

   Install: WP Admin → Appearance → Customize → Additional CSS
   (or enqueue this file from your theme/child theme).
   =========================================================== */

:root {
  --sm-blue: #298FC2;
  --sm-blue-dark: #237AA6;
  --sm-ink: #2B3138;
  --sm-body: #6E7378;
  --sm-muted: #9AA3AB;
  --sm-panel: #F5F6F8;
  --sm-line: rgba(42, 48, 54, 0.10);
  --sm-field-line: rgba(42, 48, 54, 0.14);
  --sm-radius: 20px;
  --sm-radius-field: 11px;
}

/* ---------- Typography + page frame ---------- */

.woocommerce-cart, .woocommerce-checkout,
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--sm-ink);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.wc-block-components-title {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #464646;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
  font-size: clamp(28px, 4.4vw, 44px);
  margin-bottom: clamp(24px, 3.5vw, 36px);
}

/* Woo's default notice / breadcrumb noise */
.woocommerce-info, .woocommerce-message {
  border-top: none;
  background: #EAF1F6;
  border-radius: 14px;
  padding: 14px 18px;
  color: #4B5157;
  font-size: 14px;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--sm-blue); }

/* ---------- Fields (classic + block) ---------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input {
  width: 100%;
  border: 1px solid var(--sm-field-line);
  background: #fff;
  border-radius: var(--sm-radius-field);
  padding: 13px 15px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--sm-ink);
  box-shadow: none;
  transition: border-color .2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--sm-blue);
  outline: none;
  box-shadow: none;
}

.woocommerce form .form-row label,
.wc-block-components-checkout-step__heading-content {
  font-size: 13px;
  font-weight: 600;
  color: #4B5157;
  margin-bottom: 6px;
}

.woocommerce form .form-row { margin-bottom: 12px; padding: 0; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 6px); }

/* Woo's asterisk */
.woocommerce form .form-row .required { color: var(--sm-muted); text-decoration: none; }

/* ---------- Grouped panels ---------- */

/* Classic: billing/shipping and order review */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-cart-form,
/* Blocks */
.wc-block-checkout__form .wc-block-components-checkout-step,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
  background: var(--sm-panel);
  border: none;
  border-radius: var(--sm-radius);
  padding: clamp(22px, 3vw, 28px);
  margin-bottom: 16px;
}

.woocommerce-checkout h3,
.woocommerce-cart .cart_totals h2,
.wc-block-components-checkout-step__title {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sm-muted);
  margin: 0 0 18px;
}

/* Two-column layout: form + summary */
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 20px;
    align-items: start;
  }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
  .woocommerce-checkout form.checkout #order_review,
  .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; }
  .woocommerce-checkout #customer_details .col2-set,
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
}

/* ---------- Order review / totals tables ---------- */

.woocommerce table.shop_table,
.woocommerce-cart .cart_totals table {
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 14.5px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: none;
  border-bottom: 1px solid var(--sm-line);
  padding: 11px 0;
  color: #4B5157;
  font-weight: 400;
}

.woocommerce table.shop_table th { color: var(--sm-muted); font-weight: 500; }

.woocommerce table.shop_table tfoot .order-total th,
.woocommerce table.shop_table tfoot .order-total td,
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-bottom: none;
  padding-top: 16px;
  font-size: 17px;
  color: var(--sm-ink);
}
.woocommerce table.shop_table tfoot .order-total .amount { font-weight: 500; font-size: 20px; }
.woocommerce .amount, .wc-block-formatted-money-amount { font-variant-numeric: tabular-nums; }

/* Product thumbnails: never crop the book cover */
.woocommerce table.cart img,
.wc-block-components-order-summary-item__image img {
  width: 76px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(42, 48, 54, 0.22);
  object-fit: contain;
}

/* Quantity control */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector {
  border: 1px solid var(--sm-field-line);
  border-radius: 999px;
  background: #fff;
  padding: 8px 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wc-block-components-quantity-selector { overflow: hidden; }

/* ---------- Buttons ---------- */

.woocommerce #payment #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background: var(--sm-blue);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(41, 143, 194, 0.32);
  transition: transform .2s ease, background .2s ease;
  width: 100%;
}

.woocommerce #payment #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--sm-blue-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* Secondary buttons (update cart, apply coupon) */
.woocommerce button.button,
.woocommerce a.button {
  background: rgba(41, 143, 194, 0.10);
  color: var(--sm-blue);
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}
.woocommerce button.button:hover, .woocommerce a.button:hover {
  background: rgba(41, 143, 194, 0.16);
  color: var(--sm-blue);
}

/* ---------- Payment box ---------- */

.woocommerce-checkout #payment,
.wc-block-checkout__payment-method {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--sm-panel);
  border-radius: 12px;
  color: var(--sm-body);
  font-size: 13.5px;
  line-height: 1.6;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--sm-line); padding: 0 0 14px; }

/* ---------- Coupon: collapsed, not shouting ---------- */

.woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  padding: 0 0 10px;
  font-size: 13.5px;
  color: var(--sm-muted);
}

/* ---------- Confirmation (thank you) page ---------- */

.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #464646;
  background: none;
  padding: 0;
  margin-bottom: 20px;
}
.woocommerce ul.order_details {
  background: var(--sm-panel);
  border-radius: var(--sm-radius);
  padding: 24px 26px;
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.woocommerce ul.order_details li {
  border: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-muted);
}
.woocommerce ul.order_details li strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sm-ink);
  margin-top: 5px;
}
/*
Theme Name: Stratus Medical
Template: generatepress
Author: Stratus Medical
Version: 1.4
*/

/* Styling lives inline in each template. Only global resets belong here. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* GeneratePress chrome we replace with our own nav/footer */
.site-header, .main-navigation, .site-footer, .site-info { display: none; }
.site-content, .content-area, .site-main { margin: 0; padding: 0; max-width: none; }

/* Kill the dark page frame: the parent theme paints a body background and
   insets/borders the content wrapper. Our pages own their own backgrounds. */
html, body, #page, .site, .site-content, .content-area, .site-main,
#sm-page, .entry-content, .page-content {
  background: #FFFFFF;
  border: 0;
  outline: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
  padding: 0;
  margin: 0;
}
#sm-page { display: block; }
/* GeneratePress separating-containers adds vertical gutters around content */
.separate-containers .site-main,
.separate-containers .inside-article,
.separate-containers .page-header { margin: 0; padding: 0; background: none; }
.one-container .site-content { padding: 0; }

/* Last resort on the dark frame: whatever paints it, this outranks it.
   Nothing in our design relies on a body-level background. */
html, body { background-color: #FFFFFF !important; }
#page, .site, #content, .site-content, .content-area, .site-main, #sm-page {
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* TranslatePress ships its own floating switcher; ours lives in the utility bar. */
#trp-floater-ls { display: none !important; }

/* Reveal-on-scroll (driven by js/stratus.js) */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
[data-reveal].sm-in { opacity: 1; transform: none; }

/* Phone nav: links become one thumb-scrollable row */
[data-navrow] { height: auto !important; min-height: 52px; }
@media (max-width: 760px) {
  [data-navrow] { flex-wrap: wrap !important; gap: 10px 14px !important; }
  [data-navlinks] { order: 3; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 22px !important; padding-bottom: 2px; }
  [data-navlinks]::-webkit-scrollbar { display: none; }
  [data-navlinks] a { flex: 0 0 auto; white-space: nowrap; padding: 6px 0; }
  [data-utilrow] { justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px !important; }
  [data-utilrow]::-webkit-scrollbar { display: none; }
  [data-utilrow] > * { flex: 0 0 auto; }
}

/* Fixed header: nothing outside our own markup may draw a line under it.
   (The nav's own hairline is applied by js/stratus.js on scroll.) */
[data-chrome] { border: 0 !important; box-shadow: none !important; }
[data-chrome] > div { border-top: 0 !important; }
[data-utilbar] { border-left: 0 !important; border-right: 0 !important; }

/* Some GeneratePress setups outline the content wrapper; that line reads as a
   dark bar directly beneath a fixed header. */
#content, #page, .site-content, .inside-article, .entry-content {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* backdrop-filter needs a compositing context to blur reliably when fixed. */
[data-chrome] { will-change: backdrop-filter; isolation: isolate; }

/* ===========================================================
   Phone hardening (<= 760px)
   =========================================================== */

/* 1. Opaque header. iOS Safari drops backdrop-filter on a fixed, transformed
      ancestor, which left page content legible straight through the nav. */
@media (max-width: 760px) {
  [data-utilbar] { background: #EDF1F4 !important; }
  [data-nav]     { background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(42,48,54,0.10); }
}
/* Same guard on any browser that cannot blur at all. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-utilbar] { background: #EDF1F4 !important; }
  [data-nav]     { background: #FFFFFF !important; }
}

@media (max-width: 760px) {
  /* 2. Nothing may exceed the viewport. Fixed px widths and heights get baked
        into inline styles by the block editor's resize handles; on a phone
        they cause horizontal overflow and clipped text. */
  #sm-page h1, #sm-page h2, #sm-page h3, #sm-page p,
  [data-herocopy], [data-herocopy] > * {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [data-herocopy] { max-width: 100% !important; }

  /* 3. Hero CTAs stack instead of running off the right edge. */
  [data-herobtns] { flex-wrap: wrap !important; gap: 8px !important; }
  [data-herobtns] > a { flex: 1 1 auto; justify-content: center; }

  /* 4. Nav collapses to a hamburger; the inline link row is replaced by the
        drop-down panel below the bar. */
  [data-navlinks] { display: none !important; }
  [data-navtoggle] { display: flex !important; }
  [data-navrow] { padding-left: 16px !important; padding-right: 16px !important; flex-wrap: nowrap !important; }
  [data-navpanel].sm-open { display: block !important; }

  /* Hamburger morphs to an X while the panel is open. */
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(2) { opacity: 0; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* 5. Horizontal card rails keep their scroll but reveal the next card. */
  [data-stagger] > [style*="flex:0 0 300px"],
  [data-stagger] > [style*="flex: 0 0 300px"] { flex: 0 0 82vw !important; }
}

/* 6. Belt and braces against a page wider than the screen. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Parent-theme wrappers occasionally paint side borders/outlines that read as
   dark vertical bars beside our fixed header. Nothing outside our markup draws. */
#page, .site, #content, .site-content, .content-area, .site-main,
.inside-article, .entry-content, .page-content, #sm-page {
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* The utility bar must collapse to nothing, hairline included. */
[data-utilbar] { min-height: 0 !important; box-sizing: border-box; }

/* Frosted header, without the edge fringe.
   Safari's backdrop-filter paints a dark band where the blurred element's edge
   is. Blurring [data-utilbar] and [data-nav] directly puts such an edge at both
   viewport sides (bars) and, once the utility bar collapses, along the nav's
   top (sliver). Bleeding them sideways failed because [data-chrome] clipped it.

   Instead the blur lives on a pseudo-element behind the two tiers, extended 60px
   past the top and both sides so every fringe-able edge is off-screen. The tiers
   keep their translucent tints and stop blurring. [data-chrome]'s own box is
   untouched — nav.php sets its offsets inline and js/stratus.js measures its
   height for the content spacer, so changing its padding/position breaks both. */
[data-utilbar], [data-nav] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 1;
}
/* The language menu hangs out of the utility bar and must clear the nav tier
   below it — the nav comes later in the DOM, so equal z-index put it on top. */
[data-utilbar] { z-index: 3; }
[data-utilbar][data-open] { overflow: visible !important; }
[data-chrome] { will-change: auto !important; overflow: visible !important; }
[data-chrome]::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: 0;
  backdrop-filter: saturate(1.7) blur(20px);
  -webkit-backdrop-filter: saturate(1.7) blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* Header search: the phone uses the field inside the drop-down panel instead. */
@media (max-width: 760px) { [data-search] { display: none !important; } }

/* ===========================================================
   Tablet (<= 1024px): the inline link row plus logo, search and
   CTA no longer fit on one line, so the hamburger takes over here
   too — not just on phones.
   =========================================================== */
@media (max-width: 1024px) {
  [data-navlinks]  { display: none !important; }
  [data-navtoggle] { display: flex !important; }
  [data-navrow]    { flex-wrap: nowrap !important; }
  [data-navpanel].sm-open { display: block !important; }
  [data-search]    { display: none !important; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(2) { opacity: 0; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* GeneratePress lays its content inside a width-capped .grid-container and
   paints the area outside it. That inset is what shows as dark vertical bars
   down each side of a full-bleed page. Our templates are full-bleed by design,
   so no wrapper may cap width or paint a frame. */
.grid-container, .site.grid-container, .container, .wp-site-blocks,
#page, #main, #primary, #content, .site, .site-content, .content-area, .site-main {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Whatever the parent theme paints behind that inset, it is not ours to show. */
html, body { background: #FFFFFF !important; background-image: none !important; }

/* Our page wrapper paints its own white. Earlier rules made every wrapper
   transparent, which is precisely what let a dark ancestor show through at the
   edges. #sm-page is the last layer before our content — it is never see-through. */
#sm-page {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
  z-index: 1;
}

/* Full-viewport white underlay, behind everything, pinned to the viewport so no
   ancestor's width cap or inset can expose a dark edge beside it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: -1;
  pointer-events: none;
}

[data-audience-card]:hover { border-color: rgba(41,143,194,0.35); box-shadow: 0 14px 34px rgba(42,48,54,0.10); transform: translateY(-3px); }

/* Product catalog page — cover cards and CTA lifts. */
[data-catalog-card]:hover { border-color: rgba(41,143,194,0.35); box-shadow: 0 16px 40px rgba(42,48,54,0.10); }


/* Product band: the overlay sits over the image on desktop. Narrow viewports
   shrink the image faster than the text, so below 760px it becomes a normal
   block on a dark panel instead of being clipped by the band's overflow. */
@media (max-width: 760px) {
  [data-band] { background: #2B3138; }
  [data-band-overlay] { position: static !important; width: 100% !important; padding: clamp(20px, 5vw, 28px) !important; }
}