/*
Theme Name: Stratus Medical
Template: generatepress
Author: Stratus Medical
Version: 1.0
*/

/* 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; }
/* ===========================================================
   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: #2A90C3;
  --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(42, 144, 195, 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(42, 144, 195, 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(42, 144, 195, 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;
}