/* Project-wide brand styles — shared by base.html and oscar/layout.html.
   Mirrors jamesclinic.com: ink-navy chrome with serif nav, deep green accent,
   warm cream section bands, centered editorial serif headlines, square
   thin-bordered cards. Palette from the site's Elementor kit CSS. */

:root {
  --jc-green: #1c6357;
  --jc-green-dark: #14493f;
  --jc-green-soft: #2a8c7a;
  --jc-green-bright: #34a48e;
  --jc-ink: #0e1b30;
  --jc-navy: #002246;
  --jc-cream: #f2f0ea;
  --jc-cream-2: #ede7da;
  --jc-paper: #fff;
  --jc-text: #1a1a1a;
  --jc-muted: #5b6570;
  --jc-border: #e0dcd2;
  /* The "... Fallback" faces are metric-matched local fonts declared in
     vendor/fonts.css; they must sit right after the real family so the
     block period lays text out with matching widths and heights. */
  --jc-serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif;
  --jc-sans: "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;

  /* Legacy aliases (older templates reference these) */
  --jc-primary: var(--jc-green);
  --jc-primary-hover: var(--jc-green-dark);
}

/* Reserve the vertical scrollbar's gutter on every page, scrollable or not.
   Without it a page short enough not to scroll (a product page on a tall
   monitor) is ~15px wider than the category page the visitor came from,
   and every centred .container — the navbar text first — jumps ~7px on
   navigation wherever scrollbars are classic (Windows, and Macs set to
   always show them). Measured 2026-09-03: brand x 305 vs 312. Overlay
   scrollbars make this a no-op. */
html {
  scrollbar-gutter: stable;
}

/* ---- Base typography ---- */
body {
  font-family: var(--jc-sans);
  color: var(--jc-text);
  /* Warm cream page ground (matches the inline first-paint fallback in
     oscar/layout.html); cards/paper surfaces stay white via --jc-paper. */
  background-color: var(--jc-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--jc-serif);
  font-weight: 400;
  color: var(--jc-ink);
  letter-spacing: 0.01em;
}

h1, .h1 {
  font-weight: 300;
}

a {
  color: var(--jc-green);
}

a:hover {
  color: var(--jc-green-dark);
}

.text-muted {
  color: var(--jc-muted) !important;
}

/* ---- Navbar (ink bar, serif sentence-case links, green CTA) ---- */
.navbar-jc {
  background-color: var(--jc-ink);
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.navbar-jc .navbar-brand,
.navbar-jc .nav-link {
  color: #fff !important;
}

.navbar-jc .navbar-brand img {
  height: 26px;
  width: auto;
}

.navbar-jc .nav-link {
  font-family: var(--jc-serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: rgb(255 255 255 / 92%) !important;
  padding-left: 0.95rem !important;
  padding-right: 0.95rem !important;
}

.navbar-jc .nav-link:hover,
.navbar-jc .nav-link:focus,
.navbar-jc .nav-link.active {
  color: var(--jc-green-bright) !important;
}

.navbar-jc .dropdown-menu {
  border: 1px solid var(--jc-border);
  border-radius: 0;
  box-shadow: 0 10px 24px rgb(1 31 55 / 12%);
}

.navbar-jc .dropdown-item {
  font-family: var(--jc-serif);
}

.navbar-jc .dropdown-item:active {
  background-color: var(--jc-green);
}

.navbar-jc .navbar-toggler {
  border-color: rgb(255 255 255 / 35%);
}

.navbar-jc .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Header CTA — matches the site's "Request a Call" button */
.btn-jc-cta {
  background-color: var(--jc-green);
  border: 1px solid var(--jc-green);
  border-radius: 0.25rem;
  color: #fff;
  font-family: var(--jc-sans);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.55rem 1.3rem;
  white-space: nowrap;
}

.btn-jc-cta:hover,
.btn-jc-cta:focus {
  background-color: var(--jc-green-dark);
  border-color: var(--jc-green-dark);
  color: #fff;
}

/* Navbar search */
.jc-search .form-control {
  background-color: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 0.25rem 0 0 0.25rem;
  color: #fff;
  min-width: 170px;
}

.jc-search .form-control::placeholder {
  color: rgb(255 255 255 / 50%);
}

.jc-search .form-control:focus {
  background-color: rgb(255 255 255 / 14%);
  border-color: var(--jc-green-soft);
  box-shadow: none;
  color: #fff;
}

.jc-search .btn {
  border: 1px solid rgb(255 255 255 / 22%);
  border-left: 0;
  border-radius: 0 0.25rem 0.25rem 0;
  color: rgb(255 255 255 / 80%);
}

.jc-search .btn:hover {
  background-color: var(--jc-green);
  border-color: var(--jc-green);
  color: #fff;
}

/* Cart count */
.jc-cart-badge {
  background-color: var(--jc-green-bright);
  color: #fff;
  font-size: 0.7rem;
}

/* ---- Hero (centered, uniform dark scrim, two-tone serif headline) ---- */
.jc-hero {
  position: relative;
  background: linear-gradient(rgb(4 16 28 / 62%), rgb(4 16 28 / 62%)),
    url("../images/hero.39cb33d2698c.jpg") center / cover no-repeat;
  color: #fff;
  text-align: center;
}

.jc-hero-inner {
  padding: 6.5rem 1rem 5.5rem;
  max-width: 820px;
  margin: 0 auto;
}

.jc-hero h1 {
  font-family: var(--jc-serif);
  /* 500 matches jamesclinic.com's hero (Tiempos Headline at computed 500);
     interior headings stay light like the marketing site's h2s. */
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}

.jc-hero h1 .jc-accent {
  color: var(--jc-green-bright);
}

.jc-hero p {
  color: rgb(255 255 255 / 88%);
  font-size: 1.1rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.jc-hero .jc-hero-locations {
  font-size: 0.95rem;
  color: rgb(255 255 255 / 78%);
  margin-top: 1.75rem;
  margin-bottom: 0;
}

.jc-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jc-green-bright);
  margin-bottom: 1rem;
}

/* Pill CTA — matches "Book A Free Discovery Call" */
.btn-hero {
  background-color: var(--jc-green);
  border: 1px solid var(--jc-green);
  border-radius: 999px;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.75rem 2.2rem;
}

.btn-hero:hover,
.btn-hero:focus {
  background-color: var(--jc-green-dark);
  border-color: var(--jc-green-dark);
  color: #fff;
}

/* ---- Category pills (cream band) ---- */
.jc-band {
  background-color: var(--jc-cream);
  border-top: 1px solid var(--jc-border);
  border-bottom: 1px solid var(--jc-border);
}

.jc-cat-pills .nav-link {
  border: 1px solid rgb(28 99 87 / 45%);
  border-radius: 0.15rem;
  background-color: transparent;
  color: var(--jc-ink);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 1.1rem;
  margin: 0 0.4rem 0.5rem 0;
}

.jc-cat-pills .nav-link:hover,
.jc-cat-pills .nav-link.active {
  background-color: var(--jc-green);
  border-color: var(--jc-green);
  color: #fff;
}

/* ---- Section headers ---- */
.page-header {
  margin: 1rem 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--jc-border);
}

.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 0;
}

/* ---- Breadcrumbs ---- */
.breadcrumb {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.breadcrumb-item a {
  color: var(--jc-muted);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--jc-green);
}

.breadcrumb-item.active {
  color: var(--jc-ink);
}

/* ---- Product cards (square, thin green-tinted border, no shadow) ---- */
.product-card {
  border: 1px solid var(--jc-border);
  border-radius: 0;
  background-color: #fff;
  transition: border-color 0.15s ease;
  overflow: hidden;
}

.product-card:hover {
  border-color: rgb(28 99 87 / 55%);
}

.product-card .product-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border-bottom: 1px solid var(--jc-cream);
  padding: 1.25rem;
}

.product-card .product-card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-card .card-title {
  font-family: var(--jc-serif);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--jc-ink);
  margin-bottom: 0.35rem;
}

.product-card .card-title a {
  color: inherit;
  text-decoration: none;
}

.product-card .card-title a:hover {
  color: var(--jc-green);
}

.product-card .product-card-category {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jc-green-soft);
  margin-bottom: 0.3rem;
}

.product-card .product-card-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--jc-ink);
}

.product-card .product-card-unavailable {
  font-size: 0.85rem;
  color: var(--jc-muted);
}

.product-card .product-card-view {
  color: var(--jc-green);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.product-card .product-card-view:hover {
  color: var(--jc-green-dark);
}

/* ---- Product detail ---- */
.product_page h1 {
  font-size: 2.3rem;
}

.product_page .price_color {
  font-family: var(--jc-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--jc-green);
}

.product_page .avail {
  font-weight: 500;
}

.product_page .btn-primary,
.product_page .btn-jc,
.product_page .btn-outline-jc {
  border-radius: 999px;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}

.product-gallery-frame {
  border: 1px solid var(--jc-border);
  background-color: #fff;
  padding: 1.5rem;
  text-align: center;
}

.product-gallery-frame img {
  max-width: 100%;
  height: auto;
}

/* The hero box is reserved before the image bytes arrive, so the page
   cannot jump when they land (without this the frame painted at its
   padding height and grew ~400px on image arrival). The box takes the
   thumbnail's own ratio (--hero-ratio, set inline by partials/gallery.html
   from sorl's KV size; 11:10 = the 440x400 geometry is the fallback),
   capped at the geometry's height so a wide column doesn't reserve more
   than the thumbnail can fill. The image sits centred inside at its
   natural size (no upscaling — the hero is a 400px thumbnail, not a retina
   asset): its width comes from the width attribute, so the img already
   has its final box while the bytes are in flight. Matching the box ratio
   to the image is what keeps max-height from ever clamping a portrait
   photo on a narrow viewport. No fade, no placeholder fill, no JS: a
   transition on an edge-cached 30KB thumbnail looked like flicker, and
   the tinted fill was dropped on UAT feedback too — the white frame is
   the placeholder. Don't add a `width:` rule to the img — that discards
   the attribute and the pending img collapses to 0x0. */
.product-gallery-frame .carousel-item {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-ratio, 11 / 10);
  max-height: 400px;
}

.product-gallery-frame .carousel-item img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

/* Gallery indicators are 65x55 crops: give them a fixed box in the flow
   below the hero instead of Bootstrap's 30x3 overlaid bars. */
.product-gallery-frame .carousel-indicators {
  position: static;
  margin: 0.75rem 0 0;
  gap: 0.25rem;
}

.product-gallery-frame .carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  width: 65px;
  height: 55px;
  padding: 0;
  margin: 0;
  border: 0;
  text-indent: 0;
  background: none;
  opacity: 0.6;
}

.product-gallery-frame .carousel-indicators .active {
  opacity: 1;
}

.product-gallery-frame .carousel-indicators img {
  display: block;
  width: 65px;
  height: 55px;
  object-fit: cover;
}

/* ---- Buttons ---- */
.btn-jc,
.btn-primary,
.btn-success {
  background-color: var(--jc-green);
  border-color: var(--jc-green);
  color: #fff;
}

.btn-jc:hover,
.btn-jc:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background-color: var(--jc-green-dark);
  border-color: var(--jc-green-dark);
  color: #fff;
}

.btn-outline-jc {
  border: 1px solid var(--jc-green);
  color: var(--jc-green);
  background-color: transparent;
}

.btn-outline-jc:hover {
  background-color: var(--jc-green);
  color: #fff;
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--jc-green-soft);
  box-shadow: 0 0 0 0.2rem rgb(28 99 87 / 15%);
}

/* ---- Pagination ---- */
.page-link {
  color: var(--jc-green);
}

.page-item.active .page-link {
  background-color: var(--jc-green);
  border-color: var(--jc-green);
}

/* ---- Badges ---- */
.badge-credits {
  background-color: var(--jc-green);
  color: #fff;
}

/* ---- Footer (navy, serif letterspaced column headers) ---- */
.jc-footer {
  background-color: var(--jc-navy);
  color: rgb(255 255 255 / 75%);
  font-size: 0.9rem;
}

.jc-footer .jc-footer-logo img {
  height: 24px;
  width: auto;
  opacity: 0.95;
}

.jc-footer h6 {
  font-family: var(--jc-serif);
  color: var(--jc-cream-2);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.jc-footer a {
  color: rgb(255 255 255 / 75%);
  text-decoration: none;
}

.jc-footer a:hover {
  color: var(--jc-green-bright);
}

.jc-footer .jc-footer-tagline {
  font-family: var(--jc-serif);
  font-style: italic;
  color: var(--jc-cream-2);
  font-size: 1.05rem;
}

.jc-footer address {
  font-style: normal;
  margin-bottom: 1rem;
}

.jc-footer address strong {
  display: block;
  color: rgb(255 255 255 / 92%);
  font-weight: 500;
}

.jc-footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.8rem;
  color: rgb(255 255 255 / 55%);
}

/* ---- Checkout chrome ---- */
.jc-checkout-bar {
  background-color: var(--jc-ink);
  padding: 1.1rem 0;
}

.jc-checkout-bar img {
  height: 24px;
  width: auto;
}

.jc-checkout-secure {
  color: var(--jc-cream-2);
  font-family: var(--jc-serif);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.jc-checkout-return {
  color: rgb(255 255 255 / 82%);
  font-size: 0.9rem;
  text-decoration: none;
}

.jc-checkout-return:hover {
  color: #fff;
}

.jc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}

.jc-steps a,
.jc-steps span {
  color: var(--jc-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.jc-steps .jc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--jc-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.jc-steps li.active > * {
  color: var(--jc-ink);
  font-weight: 600;
}

.jc-steps li.active .jc-step-num {
  background-color: var(--jc-green);
  border-color: var(--jc-green);
  color: #fff;
  font-weight: 600;
}

.jc-steps li.visited > * {
  color: var(--jc-green);
}

.jc-steps li.visited .jc-step-num {
  border-color: var(--jc-green);
  color: var(--jc-green);
}

.jc-steps li.visited a:hover {
  color: var(--jc-green-dark);
}

/* ---- Alerts (brand-tinted, BS5 dismissible) ---- */
.alert {
  border-radius: 0.15rem;
  font-size: 0.95rem;
}

.alert a:not(.btn) {
  font-weight: 600;
}

.alert-success {
  background-color: #eef4f1;
  border-color: rgb(28 99 87 / 35%);
  color: var(--jc-green-dark);
}

.alert-success a:not(.btn) {
  color: var(--jc-green-dark);
}

.alert-info {
  background-color: var(--jc-cream);
  border-color: var(--jc-border);
  color: var(--jc-ink);
}

.alert-info a:not(.btn) {
  color: var(--jc-green-dark);
}

.alert .btn {
  margin-top: 0.5rem;
  margin-right: 0.35rem;
}

/* ---- Alert overrides ---- */
.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* =========================================================================
   BS4 compatibility shim
   -------------------------------------------------------------------------
   Cosmetic-only fallbacks for stock (unoverridden) Oscar templates that
   still emit Bootstrap 4 markup. The storefront loads ONLY Bootstrap 5.2.3
   (see oscar/layout.html) — these classes no longer exist in BS5's CSS, so
   we shim their visual behaviour here rather than touch every stock
   template. Once a template is overridden with real BS5 markup, its rules
   can be dropped from this section.
   ========================================================================= */

/* .form-group -> mb-3 */
.form-group {
  margin-bottom: 1rem;
}

/* float-right / float-left -> float-end / float-start */
.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

/* text-right / text-left -> text-end / text-start */
.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

/* .no-gutters -> g-0 (zero margin on the row, zero padding on its columns) */
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* .custom-select -> form-select (BS5 chevron + padding) */
.custom-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--jc-text);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-select:focus {
  border-color: var(--jc-green-soft);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(28 99 87 / 15%);
}

/* .sr-only -> visually-hidden */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Badge color variants (BS4 badge-* -> BS5 bg-*), brand-appropriate colors */
.badge-success {
  background-color: var(--jc-green);
  color: #fff;
}

.badge-info {
  background-color: var(--jc-cream-2);
  color: var(--jc-ink);
}

.badge-secondary {
  background-color: #6c757d;
  color: #fff;
}

/* ---- Account area ---- */
/* Left-hand nav-pills on /accounts/* (body class set once, in
   baseaccountpage.html's body_class block, so it covers every account
   page) render with Bootstrap's default blue; theme them to brand green
   with square-ish corners to match the editorial style. */
.account-profile .nav-pills .nav-link {
  border-radius: 0.15rem;
  color: var(--jc-ink);
}

.account-profile .nav-pills .nav-link:hover,
.account-profile .nav-pills .nav-link:focus {
  background-color: rgb(28 99 87 / 10%);
  color: var(--jc-green);
}

.account-profile .nav-pills .nav-link.active {
  background-color: var(--jc-green);
  color: #fff;
}