/* XJO storefront. The catalog's data, filters and purchase behavior stay shared. */
:root {
  --ink: #112b3c;
  --ink-soft: #405766;
  --muted: #607483;
  --brand-strong: #117aaa;
  --brand-dark: #095c82;
  --canvas: #f5f8fa;
  --line: #e0e8ed;
  --radius: 1rem;
  --radius-lg: 1.2rem;
  --shadow-sm: 0 5px 18px rgb(17 43 60 / 4%);
  --shadow-md: 0 12px 30px rgb(17 43 60 / 6%);
  --shell: 1320px;
}
body::before { background: none; }
.test-banner { background: #f2eadc; color: #684719; font-size: .76rem; padding-block: .4rem; }
.test-banner strong { background: #e5d6b9; color: #593c13; }
.site-header { box-shadow: 0 3px 12px rgb(17 43 60 / 3%); }
.header-primary { grid-template-columns: 195px minmax(220px, 1fr) auto 155px; gap: 1.5rem; min-height: 5.5rem; }
.brand { flex-direction: column; align-items: flex-start; gap: 0; }
.brand img { width: 126px; }
.brand .brand__tagline { display: block; padding: 0; border: 0; letter-spacing: .015em; text-transform: none; font-size: .67rem; font-weight: 550; color: var(--muted); }
.header-search { border-radius: .75rem; box-shadow: none; border-color: #cbd9e2; }
.header-search input { background: #f8fafb; }
.header-search button { padding-inline: 1.35rem; }
.header-cart { border-radius: .7rem; min-height: 46px; }
.category-nav__inner { gap: 2rem; }
.category-nav a { font-weight: 650; }
.category-nav a[aria-current="page"] { color: var(--brand-dark); }
.page-shell:has(> .product-detail) { padding-top: 1.5rem; }
.breadcrumb { margin-bottom: 1.25rem; font-size: .8rem; }
.product-detail { gap: 1.75rem 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
.product-detail h1 { max-width: none; font-size: clamp(1.8rem, 2.7vw, 2.6rem); line-height: 1.13; letter-spacing: -.025em; overflow-wrap: normal; }
.product-detail > .product-illustration { display: grid; justify-items: stretch; box-shadow: none; background: white; border-radius: 1rem; padding-top: 1rem; }
.product-detail > .product-illustration > img[data-product-photo] {
  width: min(100%, var(--photo-native-width, 1200px));
  max-width: 100%; height: auto; max-height: 380px;
  aspect-ratio: auto; object-fit: contain; padding: .75rem; margin-inline: auto;
  min-height: 210px;
}
.product-detail > .product-illustration[data-media-quality="preview"] > img[data-product-photo] { min-height: 0; }
.product-detail .product-illustration figcaption {
  position: static; inset: auto; max-width: none; margin: .7rem 0 0;
  padding: .8rem 1rem; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: #f7f9fa; color: #536775; font-size: .72rem; backdrop-filter: none;
}
.product-illustration .product-photo-zoom[hidden] { display: none; }
.product-photo-dialog img[data-photo-enlarged] { margin-inline: auto; }
.product-card .product-illustration > img[data-product-photo] {
  width: min(100%, var(--photo-native-width, 1200px));
  height: 100%; justify-self: center; object-fit: contain;
}
.product-card:hover .product-illustration img { transform: none; }
.product-card .product-illustration figcaption { border-top-color: #edf1f4; background: #fbfcfd; }
.detail-summary { font-size: .94rem; line-height: 1.65; margin-bottom: .85rem; }
.detail-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.detail-highlights div { min-width: 0; border: 1px solid var(--line); border-radius: .65rem; padding: .65rem .8rem; background: #fbfcfd; }
.detail-highlights dt { font-size: .72rem; color: var(--muted); }
.detail-highlights dd { margin: .15rem 0 0; font-size: .83rem; font-weight: 650; overflow-wrap: anywhere; line-height: 1.45; }
.product-detail__copy .facts { margin-block: 1rem; }
.product-detail__copy .detail-price { margin-block: 1.15rem; }
.product-detail__copy .detail-price .price { font-size: 2rem; }
.detail-add-cart .button { min-width: 215px; border-radius: .7rem; }
.detail-assurance { border-left-width: 2px; font-size: .8rem; }
.product-detail .specifications { box-shadow: none; }
.product-detail .specifications h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.product-detail .specifications table th { width: 32%; }
.product-detail .specifications table td { overflow-wrap: anywhere; }
.product-detail .specifications:target { scroll-margin-top: 10rem; }
.detail-section-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.3rem; margin-block: .75rem 1rem; font-size: .82rem; }
.footer-brand img { width: 130px; height: auto; }
.site-footer { background: #112b3c; }
.footer-brand p { font-size: .9rem; }
.blog-hero { padding-block: 2.5rem; }
.blog-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.blog-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .9rem; background: #edf6fb; }
.blog-cover-frame { margin: 0; }
.blog-cover-frame--hero { margin-block: 1.5rem 2rem; }
.blog-cover-frame--card { margin-bottom: 1rem; }
.blog-cover-caption { margin-top: .45rem; color: #536778; font-size: .78rem; line-height: 1.4; }
.article-shell, .prose { min-width: 0; }
.prose { overflow-wrap: anywhere; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 1.25rem; }
.prose th, .prose td { min-width: 9rem; padding: .65rem .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: #edf6fb; color: var(--ink); }
.prose pre { max-width: 100%; overflow-x: auto; }
.cart-page.section { padding-top: 2rem; }
.cart-page__heading { margin-top: 1rem; }
.cart-page__heading h1, .checkout-intro h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.15; }
@media (max-width: 1050px) {
  .header-primary { grid-template-columns: 155px minmax(160px, 1fr) auto; gap: 1rem; }
  .header-contact { display: none; }
  .category-nav__inner { gap: 1.3rem; }
}
@media (max-width: 760px) {
  .header-primary { grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; min-height: 0; padding-block: .7rem; }
  .brand img { width: 104px; }
  .brand .brand__tagline { font-size: .59rem; }
  .header-cart { grid-column: 2; grid-row: 1; }
  .header-search { grid-column: 1/-1; grid-row: 2; }
  .header-search input { font-size: .88rem; }
  .header-search button { padding-inline: 1rem; }
  .category-nav__inner { grid-template-columns: 1fr 1fr 1.15fr 1.4fr; gap: .25rem; }
  .category-nav a { display: flex; align-items: center; justify-content: center; font-size: .71rem; line-height: 1.25; min-height: 44px; }
  .category-nav .nav-secondary { display: none; }
  .test-banner { flex-direction: row; flex-wrap: wrap; gap: .2rem .6rem; padding-inline: .65rem; }
  .test-banner span { font-size: .67rem; }
  .product-detail { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .product-detail > .product-illustration { padding-top: .25rem; }
  .product-detail > .product-illustration > img[data-product-photo] { max-height: 295px; }
  .product-detail h1 { font-size: clamp(1.7rem, 6.5vw, 2.1rem); }
  .product-detail__copy { padding-top: 0; }
  .product-detail__copy .eyebrow { margin-bottom: .5rem; }
  .detail-add-cart .button { width: 100%; min-height: 52px; }
  .detail-highlights { gap: .45rem; }
  .detail-highlights div { padding: .6rem; }
  .spec-explainers { display: none; }
  .product-detail .specifications table th { width: 38%; }
  .footer-bottom { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
:root .product-reference-note { padding: 14px 16px; border: 1px solid #d7e3ea; border-left: 3px solid #409fd7; border-radius: 8px; background: #f4f8fb; color: #345267; font-size: .9rem; line-height: 1.6; }