/*
Theme Name: Obelisk BioScience v0.1.10
Author: Obelisk BioScience
Description: Bespoke department storefront with product imagery, bulk pricing, and order calculations.
Version: 0.1.10
Text Domain: obelisk-bioscience-v0-1-1
*/

:root {
  --white: #fff;
  --canvas: #f4f6f8;
  --canvas-2: #e8edf0;
  --slate: #1c252c;
  --slate-2: #2d3748;
  --ink: #11191e;
  --muted: #65717b;
  --line: #d8e0e5;
  --teal: #00a896;
  --teal-dark: #007f72;
  --emerald: #10b981;
  --mint: #e4f7f3;
  --steel: #52758d;
  --coral: #a9665c;
  --shadow-sm: 0 8px 26px rgba(28, 37, 44, .08);
  --shadow-lg: 0 24px 70px rgba(17, 25, 30, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 145px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--slate);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
}
body.admin-bar .site-header { top: 32px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
button { color: inherit; }
.wrap { width: min(1240px, calc(100% - 42px)); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.utility-bar { background: #0b1115; color: #c6d0d5; font-size: 11px; }
.utility-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.utility-inner strong { color: #87ded2; text-transform: uppercase; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.main-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-logo { width: 38px; height: 52px; flex: 0 0 38px; object-fit: contain; }
.brand-copy strong { display: block; font-size: 15px; line-height: 1; }
.brand-copy small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links > a { color: var(--slate-2); font-size: 12px; font-weight: 850; text-decoration: none; }
.nav-links > a:hover { color: var(--teal-dark); }
.order-link { display: inline-flex !important; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--slate); border-radius: 5px; }
.order-count { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--white); font-size: 10px; }

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--teal);
  border-radius: 5px;
  background: var(--teal);
  color: var(--white);
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-1px); background: var(--teal-dark); border-color: var(--teal-dark); }
.button.secondary { background: transparent; border-color: rgba(255,255,255,.72); }
.button.secondary:hover { background: var(--white); color: var(--slate); }
.button:disabled { background: #aab5bc; border-color: #aab5bc; cursor: not-allowed; transform: none; }

.catalog-lead { position: relative; min-height: 610px; overflow: hidden; background: var(--slate); color: var(--white); border-bottom: 6px solid var(--teal); }
.catalog-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent 15%, #000 100%);
}
.lead-inner { position: relative; min-height: 610px; display: flex; align-items: center; }
.lead-copy { position: relative; z-index: 4; width: min(690px, 61%); padding: 72px 0 82px; }
.eyebrow { margin: 0 0 11px; color: var(--teal-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.catalog-lead .eyebrow { color: #86dfd4; }
h1, h2, h3 { margin-top: 0; color: var(--slate); font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.08; letter-spacing: 0; }
h1 { max-width: 750px; margin-bottom: 21px; color: var(--white); font-size: clamp(50px, 6vw, 80px); }
h2 { margin-bottom: 13px; font-size: clamp(35px, 4vw, 52px); }
h3 { margin-bottom: 10px; font-size: 29px; }
.lead-copy > p:not(.eyebrow) { max-width: 660px; margin: 0; color: #cad5da; font-size: 18px; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.lead-signals { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 40px; }
.lead-signals div { min-width: 120px; padding-left: 13px; border-left: 2px solid var(--teal); }
.lead-signals strong { display: block; color: var(--white); font-size: 17px; }
.lead-signals span { color: #aab8bf; font-size: 11px; }
.product-constellation { position: absolute; top: 45px; right: -10px; bottom: 30px; width: 47%; }
.lead-product { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-lg); }
.lead-product img { width: 100%; height: 100%; object-fit: cover; }
.lead-product.primary { right: 0; bottom: 0; width: 56%; height: 73%; z-index: 2; }
.lead-product.secondary { top: 0; left: 0; width: 48%; height: 51%; }
.lead-product.tertiary { left: 8%; bottom: 0; width: 35%; height: 40%; z-index: 3; }
.lead-fade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, var(--slate) 0%, rgba(28,37,44,.92) 40%, rgba(28,37,44,.08) 76%); pointer-events: none; }

.department-rail { position: sticky; top: 76px; z-index: 65; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(28,37,44,.05); }
.rail-inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.rail-inner a { min-width: 0; padding: 16px 10px; border-right: 1px solid var(--line); color: var(--slate-2); font-size: 10px; font-weight: 850; line-height: 1.35; text-align: center; text-decoration: none; text-transform: uppercase; }
.rail-inner a:first-child { border-left: 1px solid var(--line); }
.rail-inner a:hover { background: var(--mint); color: var(--teal-dark); }

.department { padding: 92px 0 102px; border-bottom: 1px solid var(--line); }
.department.soft { background: var(--canvas); }
.section-heading { display: grid; grid-template-columns: 72px minmax(0, 1fr) 260px; gap: 28px; align-items: end; margin-bottom: 38px; }
.section-number { color: #cfd8dd; font-family: Georgia, serif; font-size: 67px; font-weight: 700; line-height: .85; }
.section-title p:not(.eyebrow) { max-width: 750px; margin: 0; color: var(--muted); }
.section-stat { padding: 13px 0 13px 19px; border-left: 3px solid var(--teal); }
.section-stat strong { display: block; font-size: 14px; }
.section-stat span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

.catalog-product { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: visible; box-shadow: var(--shadow-sm); }
.product-media { position: relative; overflow: hidden; background: var(--canvas-2); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease, transform .35s ease; }
.catalog-product:hover .product-media img { transform: scale(1.018); }
.product-status { position: absolute; top: 13px; left: 13px; z-index: 2; padding: 5px 8px; border-radius: 3px; background: rgba(255,255,255,.94); border: 1px solid rgba(28,37,44,.12); color: var(--slate); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.product-status.soon { background: var(--slate); border-color: var(--slate); color: var(--white); }
.product-copy { min-width: 0; display: flex; flex-direction: column; padding: 27px; }
.product-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.product-kicker { margin: 0; color: var(--teal-dark); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.product-container { color: var(--muted); font-size: 10px; font-weight: 750; }
.product-copy h3 { font-size: 29px; }
.product-blurb { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.product-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 17px; padding: 0; list-style: none; }
.product-facts li { color: var(--slate-2); font-size: 10px; font-weight: 800; }
.product-facts li::before { content: ""; width: 6px; height: 6px; display: inline-block; margin-right: 7px; background: var(--teal); }
.research-overview { margin: 0 0 21px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.research-overview summary { padding: 12px 0; color: var(--slate-2); font-size: 11px; font-weight: 850; cursor: pointer; }
.research-overview p { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.62; }
.research-overview a { color: var(--teal-dark); font-weight: 850; }

.flagship-product { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); margin-bottom: 24px; }
.flagship-product .product-media { min-height: 610px; border-radius: 7px 0 0 7px; }
.flagship-product .product-copy { padding: 45px; }
.flagship-product h3 { font-size: 44px; }
.metabolic-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.comparison-product { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); }
.comparison-product .product-media { min-height: 520px; border-radius: 7px 0 0 7px; }
.comparison-product .product-copy { padding: 27px; }
.editorial-product { display: grid; grid-template-columns: minmax(350px, .85fr) minmax(0, 1.15fr); }
.editorial-product .product-media { min-height: 560px; border-radius: 7px 0 0 7px; }
.editorial-product .product-copy { padding: 48px; }
.editorial-product h3 { font-size: 43px; }
.neuro-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 24px; align-items: start; }
.neuro-product .product-media { height: 460px; border-radius: 7px 7px 0 0; }
.neuro-product.offset { margin-top: 62px; }
.supply-product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); }
.supply-product .product-media { order: 2; min-height: 560px; border-radius: 0 7px 7px 0; }
.supply-product .product-copy { order: 1; padding: 46px; }

.protein-active-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 24px; align-items: start; }
.protein-product .product-media { height: 470px; border-radius: 7px 7px 0 0; }
.protein-product.secondary-protein { margin-top: 56px; }
.coming-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 72px 0 24px; padding-top: 27px; border-top: 1px solid var(--line); }
.coming-heading h3 { margin: 0; font-size: 31px; }
.coming-heading p { max-width: 450px; margin: 0; color: var(--muted); font-size: 12px; }
.coming-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.coming-product { box-shadow: none; }
.coming-product .product-media { height: 250px; border-radius: 7px 7px 0 0; }
.coming-product .product-copy { padding: 19px; }
.coming-product h3 { font-size: 23px; }
.price-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: auto; background: var(--line); border: 1px solid var(--line); }
.price-matrix div { padding: 9px 6px; background: var(--canvas); text-align: center; }
.price-matrix strong { display: block; font-size: 12px; }
.price-matrix span { color: var(--muted); font-size: 10px; }
.coming-button { width: 100%; margin-top: 11px; }

/* Product presentation stays consistent across every department. */
.uniform-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.uniform-product-grid .catalog-product {
  width: 100%;
  height: 980px;
  display: flex;
  flex-direction: column;
}
.uniform-product-grid .product-media {
  width: 100%;
  height: 340px;
  flex: 0 0 340px;
  border-radius: 7px 7px 0 0;
}
.uniform-product-grid .product-copy {
  min-height: 0;
  flex: 1;
  padding: 26px;
}
.uniform-product-grid .product-copy h3 {
  min-height: 104px;
  margin-bottom: 12px;
  font-size: 29px;
}
.uniform-product-grid .product-blurb { min-height: 102px; }
.uniform-product-grid .product-facts { min-height: 42px; }
.uniform-product-grid .research-overview { flex: 0 0 auto; }
.uniform-product-grid .research-overview[open] { max-height: 190px; overflow: auto; padding-right: 8px; }
.uniform-product-grid .product-controls,
.uniform-product-grid .price-matrix { margin-top: auto; }
.uniform-product-grid.coming-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uniform-product-grid .coming-product .product-media { height: 340px; }
.uniform-product-grid .coming-product .product-copy { padding: 26px; }
.uniform-product-grid .coming-product h3 { min-height: 104px; font-size: 29px; }

.product-controls { margin-top: auto; }
.control-label { display: block; margin-bottom: 6px; color: var(--slate-2); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  height: 49px;
  padding: 0 47px 0 13px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--slate);
  border-radius: 5px;
  background: var(--white);
  color: var(--slate);
  font-weight: 800;
}
.select-wrap::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 17px;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
  transform: rotate(45deg);
  pointer-events: none;
}
.select-wrap.enhanced select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.variant-trigger { width: 100%; height: 49px; padding: 0 47px 0 13px; border: 2px solid var(--slate); border-radius: 5px; background: var(--white); font-weight: 800; text-align: left; cursor: pointer; }
.variant-trigger:focus { border-color: var(--teal); outline: 3px solid rgba(0,168,150,.16); }
.variant-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow-lg); }
.variant-menu[hidden] { display: none; }
.variant-option { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 0; border-radius: 3px; background: var(--white); font-weight: 800; cursor: pointer; }
.variant-option:hover, .variant-option:focus { background: var(--mint); outline: none; }
.variant-option[aria-selected="true"] { background: var(--canvas); }
.variant-option-price { color: var(--teal-dark); }
.select-wrap.open::after { top: 21px; transform: rotate(225deg); }
.bundle-control { margin-top: 14px; }
.bundle-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bundle-option { min-width: 0; min-height: 48px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); font-size: 10px; font-weight: 850; cursor: pointer; }
.bundle-option span { display: block; }
.bundle-option small { display: block; color: var(--teal-dark); font-size: 8px; }
.bundle-option[aria-pressed="true"] { border-color: var(--teal); background: var(--mint); box-shadow: inset 0 0 0 1px var(--teal); }
.purchase-row { display: grid; grid-template-columns: auto minmax(125px, 1fr); gap: 13px; align-items: center; margin-top: 15px; }
.price-stack strong { display: block; font-size: 26px; line-height: 1; white-space: nowrap; }
.price-stack small { display: block; min-height: 16px; margin-top: 5px; color: var(--muted); font-size: 9px; }
.price-stack small.savings { color: var(--teal-dark); font-weight: 800; }
.purchase-row .button { min-height: 44px; padding-inline: 12px; font-size: 11px; }

.order-section { padding: 94px 0; background: #0d151a; color: var(--white); }
.order-heading { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 55px; align-items: end; margin-bottom: 34px; }
.order-heading h2 { color: var(--white); }
.order-heading p { margin: 0; color: #b7c3c9; }
.order-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 24px; align-items: start; }
.chart-panel { min-height: 320px; overflow: hidden; background: var(--white); border-radius: 7px; color: var(--slate); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.chart-head strong { font-size: 13px; }
.chart-head span { color: var(--muted); font-size: 11px; }
.order-empty { padding: 74px 22px; color: var(--muted); text-align: center; }
.order-item { display: grid; grid-template-columns: minmax(0, 1fr) 104px auto 36px; gap: 13px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.order-item strong { display: block; font-size: 13px; }
.order-item small { color: var(--muted); }
.order-item-price { font-weight: 900; }
.chart-quantity input { width: 100%; height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--slate); text-align: center; }
.chart-quantity input:focus { border-color: var(--teal); outline: 3px solid rgba(0,168,150,.16); }
.chart-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.chart-actions span, .chart-account-note { color: var(--muted); font-size: 10px; }
.chart-account-note { padding: 13px 20px 17px; background: var(--canvas); border-top: 1px solid var(--line); }
.chart-account-note a { color: var(--teal-dark); font-weight: 850; }
.cart-quantity { width: 104px; height: 36px; display: grid; grid-template-columns: 34px 36px 34px; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.cart-quantity span { display: grid; place-items: center; height: 100%; border-right: 1px solid var(--line); border-left: 1px solid var(--line); font-size: 11px; font-weight: 900; }
.cart-quantity-button { width: 34px; height: 34px; padding: 0; border: 0; background: var(--white); color: var(--slate); font-size: 18px; font-weight: 800; cursor: pointer; }
.cart-quantity-button:hover { background: var(--mint); color: var(--teal-dark); }
.remove-item { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--muted); font-size: 18px; cursor: pointer; }
.remove-item:hover { border-color: var(--coral); color: var(--coral); }
.payment-panel { padding: 18px 20px; background: var(--canvas); border-top: 1px solid var(--line); }
.payment-panel > strong { display: block; margin-bottom: 9px; font-size: 11px; text-transform: uppercase; }
.payment-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; }
.payment-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 1px 7px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); font-size: 11px; font-weight: 850; cursor: pointer; }
.payment-choice input { grid-row: 1 / 3; width: 16px; height: 16px; accent-color: var(--teal); }
.payment-choice strong, .payment-choice small { grid-column: 2; }
.payment-choice small { display: block; color: var(--muted); }
.payment-choice:focus-within { border-color: var(--teal); background: var(--mint); color: var(--teal-dark); }
.payment-choice.is-disabled { background: #edf1f3; color: #89949b; cursor: not-allowed; opacity: .78; }
.payment-choice.is-disabled input { cursor: not-allowed; }
.payment-choice.is-disabled:focus-within { border-color: var(--line); background: #edf1f3; color: #89949b; }
.cod-confirmation { margin-top: 12px; padding: 13px 14px; border: 1px solid #b9c5cb; border-left: 4px solid var(--teal); border-radius: 4px; background: var(--canvas); }
.cod-confirmation[hidden] { display: none; }
.gate .cod-confirmation label { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; margin: 0; color: var(--slate); font-size: 11px; font-weight: 750; line-height: 1.45; text-transform: none; cursor: pointer; }
.cod-confirmation input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--teal); }
.totals { padding: 15px 20px 20px; background: var(--canvas); }
.total-line { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; color: var(--muted); font-size: 11px; }
.total-line.final { margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--slate); font-size: 15px; font-weight: 900; }
.gate { padding: 29px; background: var(--white); border-radius: 7px; color: var(--slate); box-shadow: var(--shadow-lg); }
.gate h3 { font-size: 27px; }
.gate > p { color: var(--muted); font-size: 12px; }
.gate fieldset { margin: 18px 0 0; padding: 0; border: 0; }
.gate legend { margin-bottom: 8px; color: var(--slate-2); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.gate label { display: block; margin: 20px 0 8px; color: var(--slate-2); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.gate > input { width: 100%; height: 51px; padding: 0 13px; border: 2px solid var(--slate); border-radius: 5px; }
.gate > input:focus { border-color: var(--teal); outline: 3px solid rgba(0,168,150,.16); }
.gate .payment-choice { margin: 0; text-transform: none; }
.channel-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.channel-choices label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); text-transform: none; cursor: pointer; }
.channel-choices input { width: 16px; height: 16px; accent-color: var(--teal); }
.gate .button { width: 100%; margin-top: 13px; }
.gate-status { min-height: 19px; margin: 9px 0 0 !important; font-size: 10px !important; }
.gate-status.accepted { color: var(--teal-dark); font-weight: 850; }

.site-footer { padding: 45px 0; background: #070c0f; color: #aeb9bf; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 35px; align-items: start; }
.footer-brand { color: var(--white); font-weight: 900; }
.footer-grid p { max-width: 760px; margin: 9px 0 0; font-size: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; }

/* Live-search homepage */
.search-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: var(--slate);
  color: var(--white);
  border-bottom: 6px solid var(--teal);
}
.search-hero-media { position: absolute; inset: 0 0 0 auto; width: 46%; overflow: hidden; }
.search-hero-media > img { width: 100%; height: 100%; object-fit: cover; }
.search-hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--slate) 0%, var(--slate) 48%, rgba(28,37,44,.78) 66%, rgba(28,37,44,.12) 100%); }
.search-shell { position: relative; z-index: 2; min-height: 650px; padding-top: 70px; padding-bottom: 74px; }
.search-intro { width: min(760px, 67%); }
.search-intro h1 { margin-bottom: 16px; font-size: clamp(48px, 6vw, 76px); }
.search-intro > p:not(.eyebrow) { max-width: 670px; margin: 0; color: #cad5da; font-size: 17px; }
.catalog-search-form { position: relative; width: 100%; margin-top: 28px; }
.catalog-search-form input {
  width: 100%;
  height: 68px;
  padding: 0 62px 0 20px;
  border: 2px solid var(--white);
  border-radius: 7px;
  background: var(--white);
  color: var(--slate);
  font-size: 17px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
}
.catalog-search-form input:focus { border-color: var(--teal); outline: 4px solid rgba(0,168,150,.24); }
.search-clear { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 4px; background: var(--canvas); color: var(--slate); font-weight: 900; text-decoration: none; cursor: pointer; }
.search-clear:hover { background: var(--mint); color: var(--teal-dark); }
.search-clear[hidden] { display: none; }
.search-status { min-height: 22px; margin-top: 10px; color: #aebdc4; font-size: 11px; }
.live-search-results { width: min(820px, 74%); display: grid; gap: 7px; margin-top: 18px; }
.live-search-results[hidden], .search-empty[hidden] { display: none; }
.search-result {
  min-width: 0;
  min-height: 100px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto 24px;
  gap: 15px;
  align-items: center;
  overflow: hidden;
  padding-right: 17px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.97);
  color: var(--slate);
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.search-result:hover, .search-result:focus { border-color: var(--teal); outline: 3px solid rgba(0,168,150,.2); transform: translateY(-1px); }
.search-result-media { position: relative; width: 92px; height: 100%; min-height: 100px; overflow: hidden; background: var(--canvas-2); }
.search-result-media > img { width: 100%; height: 100%; object-fit: cover; }
.search-result-copy { min-width: 0; display: block; }
.search-result-copy > strong { display: block; margin: 3px 0; font-family: Georgia, serif; font-size: 20px; line-height: 1.14; }
.search-result-copy small { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-meta { display: block; color: var(--teal-dark); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.search-result-price { color: var(--slate); font-size: 12px; font-weight: 900; white-space: nowrap; }
.search-result-arrow { color: var(--teal-dark); font-size: 20px; font-weight: 900; }
.search-empty { width: min(760px, 67%); margin-top: 20px; padding: 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: rgba(255,255,255,.08); }
.search-empty strong, .search-empty span { display: block; }
.search-empty span { margin-top: 4px; color: #becbd1; font-size: 12px; }

/* Account */
.account-main { min-height: calc(100vh - 155px); padding: 72px 0 92px; background: var(--canvas); }
.account-heading { max-width: 720px; margin-bottom: 34px; }
.account-heading h1 { margin-bottom: 14px; color: var(--slate); font-size: 54px; }
.account-heading > p:last-child { margin: 0; color: var(--muted); }
.account-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.account-grid-login { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-panel { padding: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: var(--shadow-sm); }
.account-panel h2 { margin: 7px 0 9px; font-size: 30px; }
.account-panel p { color: var(--muted); font-size: 12px; }
.account-label { color: var(--teal-dark); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.account-panel .button { margin-top: 10px; }
.text-link { display: block; width: fit-content; margin-top: 18px; color: var(--teal-dark); font-size: 11px; font-weight: 850; }
.account-form { margin-top: 20px; }
.account-form label, .account-login-panel label { display: flex; justify-content: space-between; gap: 15px; margin: 14px 0 6px; color: var(--slate-2); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.account-form label small { color: var(--muted); }
.account-form input, .account-login-panel input[type="text"], .account-login-panel input[type="password"] { width: 100%; height: 49px; padding: 0 12px; border: 2px solid var(--slate); border-radius: 5px; }
.account-login-panel .login-remember label { display: inline-flex; justify-content: flex-start; align-items: center; }
.account-login-panel .login-remember input { width: auto; height: auto; }
.account-login-panel .login-submit input { min-height: 46px; padding: 10px 17px; border: 1px solid var(--teal); border-radius: 5px; background: var(--teal); color: var(--white); font-weight: 850; cursor: pointer; }
.account-notice { margin: 15px 0; padding: 10px 12px; border-left: 3px solid var(--teal); background: var(--mint); color: var(--teal-dark); font-size: 11px; font-weight: 800; }
.account-muted { margin-top: 22px !important; font-size: 10px !important; }

.search-directory { padding: 78px 0 90px; background: var(--canvas); }
.directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.directory-heading h2 { margin-bottom: 0; }
.directory-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.directory-grid a { min-width: 0; min-height: 164px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--slate); text-decoration: none; box-shadow: var(--shadow-sm); }
.directory-grid a:hover { border-color: var(--teal); transform: translateY(-2px); }
.directory-grid span { color: var(--teal-dark); font-size: 10px; font-weight: 900; }
.directory-grid strong { margin-top: 19px; font-family: Georgia, serif; font-size: 19px; line-height: 1.17; }
.directory-grid small { margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 9px; }

@media (max-width: 980px) {
  .search-hero-media { width: 42%; }
  .search-intro, .live-search-results, .search-empty { width: 72%; }
  .directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .comparison-product { grid-template-columns: 1fr; }
  .comparison-product .product-media { min-height: 360px; border-radius: 7px 7px 0 0; }
  .coming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uniform-product-grid,
  .uniform-product-grid.coming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-links { gap: 15px; }
  .flagship-product, .editorial-product, .supply-product { grid-template-columns: 1fr; }
  .flagship-product .product-media, .editorial-product .product-media, .supply-product .product-media { min-height: 430px; border-radius: 7px 7px 0 0; }
  .supply-product .product-media { order: 1; }
  .supply-product .product-copy { order: 2; }
  .order-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.admin-bar .site-header { top: 46px; }
  .wrap { width: min(100% - 28px, 1240px); }
  .utility-inner span { display: none; }
  .utility-inner { justify-content: center; }
  .main-nav { min-height: 67px; }
  .brand-copy small, .nav-links > a:not(.order-link):not(.account-link) { display: none; }
  .catalog-lead, .lead-inner { min-height: 0; }
  .catalog-lead { padding-bottom: 232px; }
  .lead-inner { display: block; }
  .lead-copy { width: 100%; padding: 38px 0 28px; }
  h1 { font-size: 38px; }
  .lead-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.55; }
  .lead-actions { margin-top: 20px; }
  .lead-actions .button { width: 100%; }
  .lead-actions .button.secondary, .lead-signals { display: none; }
  .product-constellation { top: auto; right: 14px; bottom: 16px; left: 14px; width: auto; height: 205px; }
  .lead-product.primary { width: 100%; height: 100%; }
  .lead-product.secondary, .lead-product.tertiary { display: none; }
  .lead-fade { background: linear-gradient(180deg, var(--slate) 0%, rgba(28,37,44,.96) 63%, rgba(28,37,44,.04) 84%); }
  .department-rail { top: 67px; overflow-x: auto; }
  .rail-inner { width: 760px; }
  .department { padding: 67px 0 75px; }
  .section-heading { display: block; margin-bottom: 27px; }
  .section-number { margin-bottom: 14px; font-size: 42px; }
  .section-stat { margin-top: 18px; }
  .flagship-product .product-copy, .editorial-product .product-copy, .supply-product .product-copy { padding: 28px; }
  .flagship-product h3, .editorial-product h3 { font-size: 34px; }
  .metabolic-secondary, .neuro-grid, .protein-active-grid { grid-template-columns: 1fr; }
  .neuro-product.offset, .protein-product.secondary-protein { margin-top: 0; }
  .neuro-product .product-media, .protein-product .product-media { height: 390px; }
  .uniform-product-grid,
  .uniform-product-grid.coming-grid { grid-template-columns: 1fr; gap: 20px; }
  .uniform-product-grid .catalog-product { height: 960px; }
  .uniform-product-grid .product-media,
  .uniform-product-grid .coming-product .product-media { height: 320px; flex-basis: 320px; }
  .uniform-product-grid .product-copy,
  .uniform-product-grid .coming-product .product-copy { padding: 24px; }
  .order-heading, .footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .account-grid, .account-grid-login { grid-template-columns: 1fr; }
  .search-hero { min-height: 0; }
  .search-hero-media { display: none; }
  .search-hero-shade { background: var(--slate); }
  .search-shell { min-height: 560px; padding-top: 54px; padding-bottom: 62px; }
  .search-intro, .live-search-results, .search-empty { width: 100%; }
  .search-intro h1 { font-size: 44px; }
  .catalog-search-form input { height: 62px; font-size: 15px; }
  .live-search-results { margin-top: 15px; }
  .directory-heading { align-items: start; flex-direction: column; }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
  .brand { gap: 0; }
  .brand-copy { display: none; }
  .order-link { padding: 8px 10px; }
  h1 { font-size: 34px; }
  h2 { font-size: 33px; }
  .coming-grid { grid-template-columns: 1fr; }
  .coming-product .product-media { height: 310px; }
  .uniform-product-grid .catalog-product { height: 980px; }
  .uniform-product-grid .product-media,
  .uniform-product-grid .coming-product .product-media { height: 290px; flex-basis: 290px; }
  .uniform-product-grid .product-copy h3,
  .uniform-product-grid .coming-product h3 { min-height: 96px; font-size: 27px; }
  .uniform-product-grid .product-blurb { min-height: 112px; }
  .bundle-option { font-size: 9px; }
  .purchase-row { grid-template-columns: 1fr; }
  .purchase-row .button { width: 100%; }
  .payment-choices { grid-template-columns: 1fr; }
  .order-item { grid-template-columns: minmax(0, 1fr) auto 32px; gap: 10px; padding: 15px; }
  .order-item > div:first-child { grid-column: 1 / -1; }
  .chart-quantity { grid-column: 1; grid-row: 2; }
  .order-item-price { grid-column: 2; grid-row: 2; }
  .remove-item { grid-column: 3; grid-row: 2; }
  .search-shell { min-height: 520px; padding-top: 40px; padding-bottom: 48px; }
  .search-intro h1 { font-size: 38px; }
  .search-intro > p:not(.eyebrow) { font-size: 14px; }
  .catalog-search-form { margin-top: 22px; }
  .catalog-search-form input { height: 58px; padding-left: 14px; padding-right: 54px; font-size: 14px; }
  .search-clear { top: 9px; right: 9px; width: 40px; height: 40px; }
  .search-result { min-height: 88px; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; padding-right: 12px; }
  .search-result-media { width: 76px; min-height: 88px; }
  .search-result-copy > strong { font-size: 17px; }
  .search-result-copy small { display: none; }
  .search-result-price { font-size: 10px; }
  .search-result-arrow { display: none; }
  .search-directory { padding: 58px 0 68px; }
  .directory-grid { grid-template-columns: 1fr; }
  .directory-grid a { min-height: 132px; }
  .account-main { padding: 48px 0 68px; }
  .account-heading h1 { font-size: 40px; }
  .account-panel { padding: 23px; }
}