/*
Theme Name: EB MED CO
Theme URI: https://ebmedco.ca
Author: EB MED CO
Description: Catalogue and quote-request theme for EB MED CO — Canadian distributor of precision surgical instruments. For Canadians, by Canadians.
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ebmedco
Tags: medical, catalogue, business
*/

/* ============================================================
   EB MED CO — brand tokens (sampled from the company logo)
   ============================================================ */
:root {
  --navy:        #0E284B;
  --navy-deep:   #08192F;
  --navy-mid:    #042E5B;
  --navy-soft:   #1B3E6B;
  --red:         #B22023;
  --red-dark:    #8E1B1E;
  --ink:         #16202E;
  --body:        #3C4657;
  --muted:       #6B7688;
  --line:        #DFE4EC;
  --line-soft:   #EDF0F5;
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;
  --bg-tint:     #EFF3F8;
  --radius:      6px;
  --radius-lg:   10px;
  --shadow-sm:   0 1px 2px rgba(14,40,75,.06), 0 1px 3px rgba(14,40,75,.05);
  --shadow-md:   0 4px 12px rgba(14,40,75,.09);
  --shadow-lg:   0 12px 32px rgba(14,40,75,.14);
  --wrap:        1320px;
  --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-mid); text-decoration: none; }
a:hover { color: var(--red); }
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.011em;
}
h1 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .38em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block; font-weight: 600; font-size: .95rem;
  padding: 13px 26px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: all .16s ease; text-align: center; line-height: 1.3;
}
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn-sm { padding: 9px 17px; font-size: .86rem; }

/* ============================================================
   Header
   ============================================================ */
.topbar {
  background: var(--navy-deep); color: #C6D2E2;
  font-size: .82rem; letter-spacing: .01em;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.topbar a { color: #C6D2E2; }
.topbar a:hover { color: #fff; }
.topbar-left { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.topbar-flag { color: var(--red); font-size: 1rem; line-height: 1; }
.topbar-right { display: flex; align-items: center; gap: 20px; }

/* ---------- language switcher (EN | FR) ---------- */
.lang-switch { display: flex; align-items: center; gap: 7px; }
.lang-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: .78rem; letter-spacing: .06em;
  padding: 3px 6px; border-radius: 4px; line-height: 1.4;
}
.lang-flag {
  width: 18px; height: 12px; display: block; flex-shrink: 0;
  border-radius: 2px; object-fit: cover;
  /* a hairline keeps the white band of the tricolore from vanishing
     against the navy bar */
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.lang-abbr { display: inline-block; }
a.lang-link { color: #8FA4BE; }
a.lang-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.lang-link.is-active { color: #fff; background: rgba(255,255,255,.14); }
.lang-sep { color: #4E6382; font-size: .7rem; }


/* ---------- top bar + language switcher on small screens ----------
   On phones the tagline wrapped onto three lines and pushed the top bar to
   ~87px before the header even began.  The tagline already appears in the
   footer, so below 600px the bar carries only the language switcher and the
   email address and stays a single 38px line.
   Tap targets are also enlarged on touch pointers — 3px of padding is fine
   for a mouse and far too small for a thumb. */
@media (max-width: 600px) {
  .topbar-left { display: none; }
  .topbar .wrap { justify-content: space-between; gap: 10px; min-height: 38px; }
  .topbar-right { gap: 14px; font-size: .78rem; }
  /* Enlarge the tap target on narrow screens as well as on touch pointers —
     a phone matches both, but a narrow window on a laptop matches only this,
     and a touch laptop matches only the pointer query. */
  .lang-link { padding: 8px 9px; gap: 5px; }
}
@media (pointer: coarse) {
  .lang-link { padding: 8px 9px; font-size: .82rem; gap: 5px; }
  .lang-switch { gap: 4px; }
}

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 200; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 86px; }
.site-brand { display: flex; align-items: center; gap: 13px; flex-shrink: 1; min-width: 0; }
.site-brand img { height: 58px; width: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.32rem; color: var(--navy); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tag { font-size: .69rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ---------- primary nav ---------- */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 12px; cursor: pointer; color: var(--navy);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px 0; transition: .2s; }
.main-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; padding-left: 22px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; align-items: center; gap: 1px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 11px 11px; font-size: .9rem; font-weight: 600; color: var(--ink);
  border-radius: var(--radius);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-page-ancestor > a { color: var(--red); background: var(--bg-alt); }
.main-nav li.has-children > a::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  display: inline-block; opacity: .55;
}
.main-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 268px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: all .17s ease; z-index: 300;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu li { position: relative; }
.main-nav .sub-menu a {
  display: block; padding: 10px 14px; font-size: .89rem; color: var(--body);
  border-radius: var(--radius); font-weight: 500;
}
.main-nav .sub-menu a:hover { background: var(--bg-tint); color: var(--navy); }
.main-nav .sub-menu .sub-menu { top: -8px; left: 100%; }
.main-nav .sub-menu li.has-children > a::after { transform: rotate(-45deg); margin-left: auto; float: right; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background:
    linear-gradient(135deg, rgba(8,25,47,.94) 0%, rgba(14,40,75,.90) 55%, rgba(4,46,91,.88) 100%),
    var(--navy);
  color: #fff; padding: 84px 0 78px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -80px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(178,32,35,.20) 0%, transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(178,32,35,.16); border: 1px solid rgba(178,32,35,.42);
  color: #FFD9DA; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 7px 15px; border-radius: 100px; margin-bottom: 22px;
}
.hero h1 { color: #fff; font-size: clamp(2.05rem, 4.4vw, 3.15rem); margin-bottom: .45em; letter-spacing: -.02em; }
.hero h1 .accent { color: #FF6B6E; }
.hero-lead { font-size: clamp(1.02rem, 1.7vw, 1.19rem); color: #D3DDEB; max-width: 640px; margin-bottom: 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-strip {
  display: flex; flex-wrap: wrap; gap: 30px 46px; margin-top: 46px;
  padding-top: 30px; border-top: 1px solid rgba(255,255,255,.15);
}
.hero-stat .n { font-size: 1.62rem; font-weight: 800; color: #fff; font-family: var(--font-head); }
.hero-stat .l { font-size: .82rem; color: #A9BAD0; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

/* ============================================================
   Sections / page shell
   ============================================================ */
.section { padding: 68px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--red); margin-bottom: 11px; display: block;
}
.section-head p { font-size: 1.04rem; color: var(--muted); margin-bottom: 0; }

.page-hero {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff; padding: 52px 0 46px;
}
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero p { color: #C7D4E4; max-width: 720px; font-size: 1.04rem; margin-bottom: 0; }

.breadcrumbs { font-size: .84rem; color: #A9BAD0; margin-bottom: 16px; }
.breadcrumbs a { color: #D3DDEB; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs .sep { margin: 0 7px; opacity: .5; }

/* ============================================================
   Category grid (top-level categories)
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.cat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 26px; transition: all .18s ease; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.cat-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .22s ease;
}
.cat-card:hover { border-color: #C9D3E2; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-card:hover::before { transform: scaleY(1); }
.cat-card h3 { margin-bottom: .45em; font-size: 1.16rem; }
.cat-card h3 a { color: var(--ink); }
.cat-card:hover h3 a { color: var(--navy-mid); }
.cat-card p { font-size: .93rem; color: var(--muted); margin-bottom: 16px; flex-grow: 1; }
.cat-card .cat-count {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); display: inline-flex; align-items: center; gap: 6px;
}
.cat-card .cat-count::after { content: "→"; transition: transform .18s ease; }
.cat-card:hover .cat-count::after { transform: translateX(4px); }

/* subcategory chips on a category page */
.subcat-bar {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.subcat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 18px; font-size: .89rem; font-weight: 600; color: var(--navy);
  transition: all .16s ease;
}
.subcat-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.subcat-chip .n { font-size: .76rem; opacity: .65; font-weight: 600; }

/* ============================================================
   Product grid
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 24px; }
.product-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: all .18s ease;
}
.product-card:hover { border-color: #C3CEDE; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card .thumb {
  aspect-ratio: 4 / 3; background: var(--bg-alt); display: flex; align-items: center;
  justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line-soft);
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .3s ease; }
.product-card:hover .thumb img { transform: scale(1.045); }
.product-card .thumb .noimg { color: #B7C1D0; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.product-card .body { padding: 19px 20px 21px; display: flex; flex-direction: column; flex-grow: 1; }
.product-card h3 { font-size: 1.02rem; margin-bottom: .4em; line-height: 1.35; }
.product-card h3 a { color: var(--ink); }
.product-card:hover h3 a { color: var(--navy-mid); }
.product-card .excerpt { font-size: .875rem; color: var(--muted); line-height: 1.55; margin-bottom: 15px; flex-grow: 1; }
.product-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-card .view {
  font-size: .84rem; font-weight: 700; color: var(--navy-mid);
  display: inline-flex; align-items: center; gap: 5px;
}
.product-card .view::after { content: "→"; transition: transform .18s ease; }
.product-card:hover .view::after { transform: translateX(3px); }
.brand-tagline {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); background: var(--bg-tint); padding: 4px 9px; border-radius: 3px;
}

/* ============================================================
   Single product
   ============================================================ */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.gallery-main {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 14px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 26px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 9px; }
.gallery-thumbs button {
  background: var(--bg-alt); border: 2px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 1; padding: 0; cursor: pointer; overflow: hidden; transition: border-color .15s ease;
}
.gallery-thumbs button:hover { border-color: #B9C5D6; }
.gallery-thumbs button.active { border-color: var(--red); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

.product-summary .eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px; display: block;
}
.product-summary h1 { font-size: clamp(1.65rem, 2.9vw, 2.2rem); margin-bottom: .4em; }
.product-summary .lead { font-size: 1.05rem; color: var(--body); margin-bottom: 24px; }
.quote-box {
  background: var(--bg-alt); border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 26px;
}
.quote-box h3 { font-size: 1.06rem; margin-bottom: .45em; }
.quote-box p { font-size: .92rem; color: var(--muted); margin-bottom: 17px; }
.quote-box .btn { margin-right: 9px; }
.spec-meta { list-style: none; padding: 0; margin: 0 0 8px; }
.spec-meta li {
  display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem;
}
.spec-meta li:last-child { border-bottom: 0; }
.spec-meta .k { font-weight: 700; color: var(--ink); min-width: 132px; flex-shrink: 0; }
.spec-meta .v { color: var(--body); }

.product-body { margin-top: 56px; padding-top: 46px; border-top: 1px solid var(--line); }
.prose { max-width: 860px; }
.prose h2 { margin-top: 1.9em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.14rem; color: var(--navy); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: 1.3em; }
.prose li { line-height: 1.6; }
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .93rem;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.prose th {
  background: var(--navy); color: #fff; text-align: left; padding: 12px 15px;
  font-weight: 600; font-size: .88rem; letter-spacing: .01em;
}
.prose td { padding: 11px 15px; border-top: 1px solid var(--line); }
.prose tr:nth-child(even) td { background: var(--bg-alt); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose img { border-radius: var(--radius); margin: 1.5em 0; border: 1px solid var(--line); }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--red);
  color: var(--ink); font-style: italic;
}

/* related */
.related { margin-top: 62px; padding-top: 46px; border-top: 1px solid var(--line); }

/* ============================================================
   Forms
   ============================================================ */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 34px 32px; box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid #CBD4E0; border-radius: var(--radius); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-mid); box-shadow: 0 0 0 3px rgba(4,46,91,.11);
}
.field textarea { min-height: 132px; resize: vertical; }
.field .hint { font-size: .81rem; color: var(--muted); margin-top: 6px; }
.form-notice { padding: 14px 18px; border-radius: var(--radius); font-size: .93rem; margin-bottom: 22px; }
.form-notice.ok { background: #E9F6EE; border: 1px solid #A8D8BC; color: #14532D; }
.form-notice.err { background: #FDECEC; border: 1px solid #F0B4B5; color: #7F1D1D; }
.hp-field { position: absolute; left: -9999px; }

/* ============================================================
   Trust / feature blocks
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 26px; }
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px;
}
.feature .ficon {
  width: 44px; height: 44px; border-radius: var(--radius); background: var(--bg-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  color: var(--navy); font-size: 1.3rem;
}
.feature h3 { font-size: 1.06rem; margin-bottom: .4em; }
.feature p { font-size: .92rem; color: var(--muted); margin-bottom: 0; }

.cta-band {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  color: #fff; padding: 58px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(178,32,35,.24) 0%, transparent 58%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; margin-bottom: .45em; }
.cta-band p { color: #C7D4E4; max-width: 620px; margin: 0 auto 28px; font-size: 1.04rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-deep); color: #A9BAD0; padding: 56px 0 0; margin-top: 0; font-size: .92rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 42px; padding-bottom: 44px;
}
.site-footer h4 {
  color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 17px; font-weight: 700;
}
.site-footer a { color: #A9BAD0; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-brand img { height: 62px; width: auto; margin-bottom: 15px; }
.footer-brand p { color: #93A5BE; max-width: 320px; font-size: .9rem; }
.footer-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: rgba(178,32,35,.15); border: 1px solid rgba(178,32,35,.4);
  color: #FFD9DA; padding: 7px 14px; border-radius: 100px; font-size: .79rem; font-weight: 700;
  letter-spacing: .04em;
}
.footer-licence {
  border-top: 1px solid rgba(255,255,255,.11);
  padding: 18px 0 0; font-size: .84rem; color: #93A5BE;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.11); padding: 20px 0 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: .84rem; color: #7E90AA;
}
.footer-bottom a { color: #7E90AA; }

/* ============================================================
   Utility
   ============================================================ */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.pagination { display: flex; gap: 7px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); font-weight: 600; font-size: .9rem; background: #fff;
}
.pagination .page-numbers:hover { background: var(--bg-alt); }
.pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ============================================================
   Responsive
   ============================================================ */
/* Compact header — 1181px to 1460px.
   The primary nav carries eight items, several with dropdowns, so between the
   mobile breakpoint and ~1460px it needs about 180px more room than the brand
   and quote button leave it.  Rather than let the menu overlap the logo, this
   range tightens spacing and drops the brand tagline (which is already shown
   in the top bar directly above). */
@media (min-width: 1181px) and (max-width: 1460px) {
  .wrap { padding: 0 16px; }
  .header-inner { gap: 10px; }
  .site-brand { gap: 9px; }
  .site-brand img { height: 46px; }
  .brand-name { font-size: 1.16rem; }
  .main-nav { padding-left: 8px; }
  .main-nav > ul { gap: 0; }
  .main-nav > ul > li > a { padding: 9px 7px; font-size: .82rem; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 9px 13px; font-size: .82rem; }
}

@media (max-width: 1024px) {
  .product-layout { grid-template-columns: 1fr; gap: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff;
    transform: translateX(100%); transition: transform .24s ease; z-index: 400;
    overflow-y: auto; padding: 78px 20px 40px; box-shadow: -8px 0 30px rgba(8,25,47,.2);
  }
  body.nav-open .main-nav { transform: translateX(0); }
  .main-nav { display: block; }
  body.nav-open { overflow: hidden; }
  .nav-close {
    display: block; position: absolute; top: 18px; right: 18px; background: none;
    border: 0; font-size: 1.7rem; line-height: 1; color: var(--navy); cursor: pointer;
  }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .main-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 6px 12px;
    padding: 4px 0 4px 8px; display: none;
  }
  .main-nav li.open > .sub-menu { display: block; }
  .main-nav li.has-children > a::after { margin-left: auto; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(8,25,47,.45); z-index: 350;
    opacity: 0; visibility: hidden; transition: .2s;
  }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  .header-actions .btn { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 1181px) { .nav-close, .nav-backdrop { display: none; } }
/* ---------- French navigation breakpoint ----------
   The French menu labels are far longer than their English equivalents
   ("Chirurgie de la colonne vertebrale" versus "Spine Surgery"), so the
   primary nav needs roughly 1245px against about 800px in English.  Below
   ~1600px the French menu therefore overlapped the logo.  French switches to
   the drawer at the wider breakpoint; English keeps the 1180px one. */
@media (max-width: 1600px) {
  html[lang^="fr"] .nav-toggle { display: block; }
  html[lang^="fr"] .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff;
    transform: translateX(100%); transition: transform .24s ease; z-index: 400;
    overflow-y: auto; padding: 78px 20px 40px; box-shadow: -8px 0 30px rgba(8,25,47,.2);
  }
  html[lang^="fr"] body.nav-open .main-nav { transform: translateX(0); }
  html[lang^="fr"] .main-nav { display: block; }
  html[lang^="fr"] body.nav-open { overflow: hidden; }
  html[lang^="fr"] .nav-close {
    display: block; position: absolute; top: 18px; right: 18px; background: none;
    border: 0; font-size: 1.7rem; line-height: 1; color: var(--navy); cursor: pointer;
  }
  html[lang^="fr"] .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  html[lang^="fr"] .main-nav > ul > li > a { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  html[lang^="fr"] .main-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 6px 12px;
    padding: 4px 0 4px 8px; display: none;
  }
  html[lang^="fr"] .main-nav li.open > .sub-menu { display: block; }
  html[lang^="fr"] .main-nav li.has-children > a::after { margin-left: auto; }
  html[lang^="fr"] .nav-backdrop {
    position: fixed; inset: 0; background: rgba(8,25,47,.45); z-index: 350;
    opacity: 0; visibility: hidden; transition: .2s;
  }
  html[lang^="fr"] body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  html[lang^="fr"] .header-actions .btn { display: none; }
  html[lang^="fr"] .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 640px) {
  .topbar-right { gap: 12px; }
  .topbar-right .hide-xs { display: none; }
  .hero { padding: 58px 0 54px; }
  .hero-strip { gap: 22px 30px; }
  .section { padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-brand img { height: 46px; }
  .brand-name { font-size: 1.1rem; }
  .form-card { padding: 24px 20px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
}

@media print {
  .topbar, .site-header, .site-footer, .cta-band, .quote-box, .related { display: none; }
  body { color: #000; }
}