/* The Hawk Cover storefront */

:root {
  --navy: #142531;
  --navy-raised: #254252;
  --brand: #142531;
  --action: #173b52;
  --action-hover: #254c65;
  --bronze: #835a2c;
  --white: #fff;
  --paper: #f5f5f1;
  --surface: #edf1f2;
  --hairline: #cdd5d6;
  --line-on-navy: rgba(255, 255, 255, .2);
  --ink: #142531;
  --body: #43535e;
  --muted: #4e606a;
  --soft: #dbe4e8;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --wrap: 1240px;
  --gutter: 24px;
  --band-y: clamp(var(--s-8), 11vh, var(--s-10));
  --head-h: 72px;
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 1024px) { :root { --band-y: clamp(var(--s-7), 9vh, var(--s-9)); } }
@media (max-width: 767px) { :root { --band-y: clamp(var(--s-7), 8vh, var(--s-8)); --gutter: 20px; --head-h: 62px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; }

h1, h2 { font-weight: 760; color: var(--brand); letter-spacing: -.048em; text-wrap: balance; }
h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
h2 { font-size: clamp(33px, min(3.8vw, 6.2vh), 52px); line-height: 1.1; }
h3 { font-family: var(--sans); font-size: 19px; font-weight: 650; line-height: 1.3; color: var(--brand); }
/* Apple devices draw the system font as San Francisco, which is spaced tighter than Segoe UI or
   Roboto. With the tracking used elsewhere its letters touch and its words run together, so
   headings are eased on those devices only. The class is set by the script in the page head. */
.apple h1, .apple h2 { letter-spacing: -.022em; }
.apple .site-head__logo { letter-spacing: -.02em; }
.apple .hero__price strong, .apple .pdp__price strong, .apple .calc__total { letter-spacing: -.02em; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
.small { font-size: 15px; line-height: 1.5; }
.muted { color: var(--muted); }
.nb { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.site-foot :focus-visible { outline-color: var(--white); }

.skip { position: absolute; left: var(--s-4); top: -64px; z-index: 100; background: var(--white); color: var(--brand); padding: var(--s-3) var(--s-4); }
.skip:focus { top: var(--s-2); }

/* ---------- Layout ---------- */
.wrap { width: min(100%, calc(var(--wrap) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band-y); }
/* Jump links land with the section heading just under the header, skipping the band's top padding */
.band[id] { scroll-margin-top: calc(var(--s-7) - 24px - var(--band-top, var(--band-y))); }
.band--surface { background: var(--surface); }
.band--navy { background: var(--navy); color: var(--soft); }
.band--navy h2 { color: #fff; }
.band--navy .link { color: var(--soft); }
.section-head { max-width: 760px; margin-bottom: clamp(var(--s-6), 5vh, var(--s-7)); }
.section-head .lead { margin-top: var(--s-4); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 56px; padding: 0 var(--s-6);
  background: var(--action); color: var(--white);
  border: 0; border-radius: var(--radius);
  font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--action-hover); }
.btn:active { transform: translateY(1px); }
.btn--block { display: flex; width: 100%; }
.btn--small { min-height: 44px; padding: 0 var(--s-5); font-size: 16px; }
.btn__price { padding-left: var(--s-3); border-left: 1px solid var(--line-on-navy); }

.link { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness .15s; }
.link:hover { text-decoration-thickness: 2px; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand); }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rating { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: 14px; line-height: 1.4; color: var(--ink); }
.rating a { font-weight: 670; text-underline-offset: 3px; }
.stars { display: inline-flex; gap: 2px; flex: none; color: var(--bronze); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--hairline); }
.site-head__row { display: flex; align-items: center; gap: var(--s-5); height: var(--head-h); }
.site-head__logo { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; text-decoration: none; font-size: 21px; font-weight: 760; letter-spacing: -.045em; }
.site-head__logo img { height: 43px; width: auto; filter: brightness(0); }
.site-nav { display: flex; gap: clamp(13px, 2vw, 28px); align-items: center; margin-left: auto; }
.site-nav a { font-size: 14px; font-weight: 650; text-decoration: none; padding: var(--s-2) 0; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.site-head__actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; border-radius: var(--radius); transition: background-color .15s; }
.icon-btn:hover { background: rgba(128, 147, 157, .18); }
.menu-toggle { display: none; }
@media (max-width: 1024px) {
  .site-head__actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-3) var(--gutter) var(--s-5); background: var(--paper); border-bottom: 1px solid var(--hairline); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: var(--s-3) 0; font-size: 17px; }
}
@media (max-width: 767px) {
  .site-head__row { gap: var(--s-2); }
  .site-head__logo { gap: var(--s-2); font-size: 18px; }
  .site-head__logo img { height: 34px; }
  .site-head__buy { display: none; }
  .site-head__actions { gap: 0; }
}

/* ---------- Installed cover and purchase ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  min-height: min(650px, calc(100svh - var(--head-h) - 45px));
  border-bottom: 1px solid var(--hairline);
}
.hero__copy {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(38px, 6vh, 64px) clamp(24px, 3vw, 44px) clamp(38px, 6vh, 64px) max(var(--gutter), (100vw - var(--wrap)) / 2);
}
.hero__name { font-size: 16px; font-weight: 660; margin-bottom: var(--s-4); }
.hero h1 { font-size: clamp(40px, min(5.5vw, 16.7cqw), 85px); line-height: .99; letter-spacing: -.066em; text-wrap: wrap; }
.apple .hero h1 { font-size: clamp(40px, min(5.5vw, 15cqw), 85px); letter-spacing: -.03em; }
.hero__sub { max-width: 32ch; margin-top: var(--s-5); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }
.hero__rating { margin-top: var(--s-5); }
.hero__offer { width: min(100%, 400px); border-top: 1px solid var(--hairline); margin-top: var(--s-5); padding-top: var(--s-4); }
.hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); font-size: 14px; line-height: 1.35; }
.hero__price strong { font-size: 31px; font-weight: 760; letter-spacing: -.055em; line-height: 1; color: var(--ink); }
.hero__buy { display: flex; align-items: center; gap: var(--s-5); }
.hero__buy .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; font-size: 15px; }
.hero__photo { position: relative; background: #31546b; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.hero__photo figcaption { position: absolute; right: var(--s-3); bottom: var(--s-3); background: var(--paper); color: var(--ink); padding: 5px 9px; font-size: 12px; }

.opening { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); min-height: clamp(330px, 35vw, 515px); background: #e5ebed; }
.opening__photo { position: relative; overflow: hidden; }
.opening__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
.opening__copy { align-self: center; padding: var(--s-7) max(var(--gutter), (100vw - var(--wrap)) / 2) var(--s-7) clamp(24px, 4vw, 64px); }
.opening__copy h2 { font-size: clamp(34px, 4.35vw, 63px); text-wrap: balance; }
.opening__copy p, .in-box__copy p { max-width: 42ch; margin-top: var(--s-4); }
.opening__copy .link, .in-box__copy .link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); font-weight: 650; }

.in-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--s-7); }
.in-box img { width: min(100%, 450px); }
.maker-note { margin-top: var(--s-6); }

@media (max-width: 820px) {
  /* The photo takes whatever height the first screen has left, so the price and buy button end
     the screen instead of being sliced by its bottom edge. svh is the window with the browser's
     bars showing. A max-height media query can't do this: iPhones measure those against the
     window with the bars hidden. */
  .hero { display: flex; flex-direction: column; min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h)); }
  .hero__copy { display: contents; }
  .hero__name, .hero h1, .hero__sub, .hero__rating, .hero__offer { margin-inline: var(--gutter); }
  .hero__name { order: 1; font-size: 13px; margin-block: 18px var(--s-2); }
  .hero h1 { order: 2; font-size: clamp(39px, 12vw, 62px); line-height: 1; letter-spacing: -.06em; }
  .apple .hero h1 { font-size: clamp(39px, 12vw, 62px); line-height: 1.02; }
  .hero__photo { order: 3; flex: 1 1 0; min-height: clamp(150px, 42vw, 230px); max-height: min(100vw, 62vh); max-height: min(100vw, 62svh); margin-top: var(--s-4); }
  .hero__photo figcaption { font-size: 11px; padding: 4px 7px; right: var(--s-2); bottom: var(--s-2); }
  .hero__sub { order: 4; margin-top: var(--s-4); max-width: 50ch; font-size: 16px; }
  .hero__rating { order: 5; margin-top: var(--s-3); }
  .hero__offer { order: 6; width: auto; margin-top: var(--s-3); margin-bottom: var(--s-5); padding-top: var(--s-3); }
  .hero__price strong { font-size: 27px; }
  .hero__buy { gap: var(--s-4); }
  .hero__buy .btn { flex: 1; min-height: 49px; }
  .opening { display: flex; flex-direction: column-reverse; min-height: 0; }
  .opening__photo { min-height: clamp(215px, 57vw, 400px); }
  .opening__copy { align-self: stretch; padding: var(--s-6) var(--gutter) var(--s-5); }
  .in-box { grid-template-columns: 1fr; gap: var(--s-5); }
  .in-box img { width: min(100%, 360px); }
}
@media (max-width: 370px) {
  .hero__price { font-size: 13px; }
  .hero__buy .btn { padding-inline: var(--s-4); }
  .rating { font-size: 13px; }
}

/* ---------- Reviews (only shown once real review text exists) ---------- */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); }
.review { padding-left: var(--s-5); border-left: 2px solid var(--hairline); }
.review p { font-family: var(--sans); font-weight: 500; color: var(--brand); font-size: clamp(22px, 2vw, 26px); line-height: 1.32; }
.review cite { display: block; margin-top: var(--s-3); font-style: normal; font-size: 15px; color: var(--muted); }
@media (max-width: 767px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- Trimmer test: two stills, one play button over the join ---------- */
.test { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 var(--gutter); }
.test figure { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; min-width: 0; }
.test figure:nth-of-type(1) { grid-column: 1; }
.test figure:nth-of-type(2) { grid-column: 2; }
.test img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.test figure:nth-of-type(1) img { object-position: 50% 100%; }
.test figcaption { padding-top: var(--s-3); font-size: 16px; line-height: 1.5; }
.test figcaption strong { display: block; color: var(--brand); font-size: 19px; font-weight: 650; line-height: 1.3; }
.test__play { grid-row: 1; grid-column: 1 / -1; place-self: center; z-index: 1; }
@media (max-width: 600px) {
  .test { gap: 0 var(--s-2); }
  .test img { aspect-ratio: 1; }
  .test figure:nth-of-type(1) img { object-position: 38% 50%; }
  .test figure:nth-of-type(2) img { object-position: 72% 50%; }
  .test figcaption { font-size: 15px; line-height: 1.45; }
  .test figcaption strong { font-size: 17px; }
  .test__play { grid-row: 3; place-self: center; margin-top: var(--s-5); }
}

/* Big play control, shared by every video on the site */
.play { display: inline-flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-5) 10px 10px; background: var(--navy); color: #fff; border: 0; border-radius: 999px; font-family: var(--sans); font-size: 18px; font-weight: 650; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 30px rgba(11, 26, 58, .4); transition: scale .18s var(--ease), background-color .18s var(--ease); }
.play:hover, .film:hover .play { scale: 1.04; background: var(--navy-raised); }
.play small { margin-left: var(--s-1); font-size: 15px; font-weight: 500; color: var(--soft); }
.play__dot { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--white); transition: background-color .18s var(--ease); }
.play:hover .play__dot, .film:hover .play__dot { background: var(--soft); }
.play__dot svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--ink); }
/* ---------- Install ---------- */
.install { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); align-items: start; }
.install__steps { grid-column: span 6; counter-reset: step; border-bottom: 1px solid var(--hairline); }
.install__side { grid-column: 7 / -1; }
.step { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 0 var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
.step::before { content: counter(step); grid-row: span 2; font-family: var(--sans); font-size: 46px; font-weight: 700; line-height: 1; color: var(--bronze); }
.step h3 { margin-bottom: var(--s-1); }
.step p { font-size: 16px; line-height: 1.55; }
.film { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--navy); cursor: pointer; overflow: hidden; color: #fff; text-align: left; }
.film img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 60% 50%; transition: transform .6s var(--ease); }
.film:hover img { transform: scale(1.015); }
.film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.install__notes { margin-top: var(--s-4); display: grid; gap: var(--s-2); font-size: 16px; line-height: 1.55; }
.install__notes strong { color: var(--brand); font-weight: 650; }
/* Stacked, the video comes first so it's on screen when the Install link lands */
@media (max-width: 900px) {
  .install { row-gap: var(--s-5); }
  .install__steps { grid-column: 1 / -1; }
  .install__side { display: contents; }
  .film { grid-column: 1 / -1; order: -1; }
  .install__notes { grid-column: 1 / -1; order: 1; margin-top: 0; }
}

.video-dialog { width: min(1040px, calc(100vw - 32px)); padding: 0; border: 0; background: #000; }
.video-dialog::backdrop { background: rgba(11, 26, 58, .9); }
.video-dialog video { width: 100%; }
.video-dialog__close { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 1; }
.video-dialog__about { padding: var(--s-3) var(--s-4) var(--s-4); color: #fff; font-size: 15px; line-height: 1.5; }

/* ---------- Veteran story ---------- */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); align-items: center; }
.story__text { grid-column: span 7; }
.story__text h2 { margin-bottom: var(--s-4); }
.story__text .link { display: inline-block; margin-top: var(--s-4); }
.story__badges { grid-column: 8 / -1; display: flex; justify-content: flex-end; align-items: stretch; gap: var(--s-3); }
.story__badges img { height: 140px; width: auto; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--hairline); padding: var(--s-3); }
.story__badges .story__usa { padding: 0; object-fit: contain; min-width: 0; flex: 0 1 auto; }
@media (max-width: 480px) {
  .story__badges img { height: 112px; }
  .story__badges .story__usa { flex: 1 1 0; }
}
@media (max-width: 1024px) {
  .story__text, .story__badges { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- FAQ ---------- */
.faq--narrow { max-width: calc((100% + var(--gutter)) * 8 / 12 - var(--gutter)); }
@media (max-width: 900px) { .faq--narrow { max-width: none; } }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: clamp(52px, 8vh, 64px); padding: var(--s-3) 0; cursor: pointer; list-style: none; color: var(--brand); font-size: 18px; font-weight: 600; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--s-5); max-width: 62ch; }
.faq details[open] > div { animation: faq-in .24s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq details > div p + p { margin-top: var(--s-3); }

/* ---------- Footer ---------- */
.site-foot { background: var(--navy); color: var(--soft); padding-block: var(--s-8) var(--s-6); font-size: 16px; }
.site-foot__top { display: grid; grid-template-columns: minmax(220px, 3fr) repeat(4, auto); justify-content: space-between; gap: var(--s-6) var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-on-navy); }
.site-foot__brand img { height: 112px; width: auto; margin-bottom: var(--s-4); }
.site-foot h2 { color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 650; letter-spacing: 0; margin-bottom: var(--s-3); }
.site-foot li { margin-bottom: var(--s-2); }
.site-foot a { color: var(--soft); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-foot__social { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.site-foot__legal { padding-top: var(--s-5); font-size: 14px; line-height: 1.55; max-width: 92ch; }
.site-foot__legal p + p { margin-top: var(--s-3); }
@media (max-width: 1024px) {
  .site-foot__top { grid-template-columns: repeat(4, auto); }
  .site-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .site-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); }
  .site-foot__col { order: 2; }
  .site-foot__col--wide { grid-column: 1 / -1; order: 3; }
  .site-foot__col:last-child { grid-column: 1 / -1; order: 4; }
}

/* ---------- Text pages ---------- */
.page-head { background: var(--surface); color: var(--body); padding-block: clamp(var(--s-7), 7vh, var(--s-8)); }
.page-head + .band { padding-top: clamp(var(--s-7), 7vh, var(--s-8)); }
.page-head h1 { font-size: clamp(36px, 4.2vw, 56px); max-width: 22em; }
.page-head .lead { margin-top: var(--s-4); max-width: 72ch; }
.story__text p + p { margin-top: var(--s-3); }
.prose { max-width: 760px; }
.facts--contact { margin-top: 0; }
.facts--contact h2 { margin-bottom: var(--s-1); color: var(--brand); font-family: var(--sans); font-size: 19px; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.prose p + p, .prose ul, .prose ol { margin-top: var(--s-4); }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 26px; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--bronze); }
.prose strong { color: var(--brand); font-weight: 650; }
.prose__action { margin-top: var(--s-6); }
.prose__after { margin-top: var(--s-4); }

/* ---------- Cart ---------- */
.cart-btn { position: relative; }
.cart-btn__count { position: absolute; top: 1px; right: -1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--action); color: var(--white); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; }
html.cart-open { overflow: hidden; }
.cart { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--body); }
.cart[open] { display: flex; flex-direction: column; animation: cart-in .26s var(--ease); }
.cart::backdrop { background: rgba(11, 26, 58, .55); animation: cart-fade .26s var(--ease); }
@keyframes cart-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes cart-fade { from { opacity: 0; } to { opacity: 1; } }
.cart__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); background: var(--paper); border-bottom: 1px solid var(--hairline); }
.cart__head h2 { font-size: 26px; line-height: 1.2; }
.cart__body { flex: 1; overflow-y: auto; padding: 0 var(--s-5) var(--s-5); }
.cart__empty { padding-block: var(--s-7); text-align: center; }
.cart__empty p { margin-bottom: var(--s-4); font-size: 18px; }
.cart__empty[hidden], .cart__foot[hidden], .cart__hint[hidden], .cart__error[hidden], .cart__total[hidden] { display: none; }
.cart__hint { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); font-size: 16px; line-height: 1.45; }
.cart-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--hairline); }
.cart-line img { background: #fff; border: 1px solid var(--hairline); }
.cart-line__name { color: var(--brand); font-weight: 650; line-height: 1.3; }
.cart-line__meta { font-size: 15px; line-height: 1.4; margin-top: var(--s-1); }
.cart-line__total { color: var(--brand); font-weight: 650; line-height: 1.3; }
.cart-line__controls { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.cart-line__controls .link { font-size: 15px; }
.qty--cart span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; color: var(--brand); font-weight: 650; }
.cart__foot { flex: none; padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--hairline); }
.cart__sums { margin-bottom: var(--s-4); }
.cart__sums div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 2px; }
.cart__sums dt { font-weight: 500; }
.cart__sums dd { color: var(--brand); font-weight: 650; text-align: right; }
.cart__total { margin-top: var(--s-2); padding-top: var(--s-3) !important; border-top: 1px solid var(--hairline); font-size: 20px; }
.cart__error { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); background: #fff; border-left: 3px solid #a3341f; color: var(--ink); font-size: 16px; line-height: 1.45; }
.cart__note { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; text-align: center; color: var(--muted); }
.btn:disabled { opacity: .7; cursor: progress; }
@media (max-width: 400px) {
  .cart__body { padding-inline: var(--s-4); }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); }
  .cart-line img { width: 64px; height: 64px; }
}

/* ---------- Mobile buy bar ---------- */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--hairline); transform: translateY(110%); visibility: hidden; transition: transform .24s var(--ease), visibility 0s .24s; }
.buybar.is-visible { transform: none; visibility: visible; transition: transform .24s var(--ease), visibility 0s; }
.buybar__price { color: var(--brand); line-height: 1.2; font-size: 15px; }
.buybar__price strong { display: block; font-size: 20px; font-weight: 700; }
@media (max-width: 767px) { .buybar { display: flex; } }

/* ---------- Product page ---------- */
.crumbs { font-size: 14px; color: var(--muted); padding-block: var(--s-4) 0; }
.crumbs a { color: inherit; }
.pdp {
  display: grid;
  grid-template-areas: "photo intro" "photo buy" "thumbs buy";
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4) clamp(32px, 5vw, 72px);
  align-items: start;
  padding-block: var(--s-5) var(--band-y);
}
.pdp__intro { grid-area: intro; }
.pdp__intro h1 { font-size: clamp(35px, 4.15vw, 58px); line-height: 1.02; margin-bottom: var(--s-4); text-wrap: wrap; }
.pdp__photo { grid-area: photo; min-width: 0; }
.pdp__main { aspect-ratio: 1; max-height: 680px; background: var(--surface); overflow: hidden; }
.pdp__main img { width: 100%; height: 100%; object-fit: contain; }
.pdp__cap { font-size: 14px; color: var(--muted); padding-top: var(--s-2); min-height: 32px; }
.pdp__thumbs { grid-area: thumbs; display: flex; gap: var(--s-2); overflow-x: auto; padding: 3px; scroll-snap-type: x proximity; }
.pdp__thumbs button { flex: 0 0 68px; padding: 0; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--hairline); cursor: pointer; scroll-snap-align: start; }
.pdp__thumbs button:hover { border-color: var(--muted); }
.pdp__thumbs button[aria-current="true"] { outline: 1px solid var(--brand); outline-offset: 1px; }
.pdp__thumbs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__buy { grid-area: buy; min-width: 0; }
.pdp__rating { margin-bottom: var(--s-4); }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.pdp__price strong { margin-right: var(--s-1); color: var(--brand); font-size: 29px; font-weight: 760; line-height: 1; letter-spacing: -.05em; }
.pdp__price .link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 650; }
.calc { border-block: 1px solid var(--hairline); padding-block: var(--s-3); margin-bottom: var(--s-4); }
.calc__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.calc label { color: var(--brand); font-weight: 600; line-height: 1.3; }
.calc__out { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-top: var(--s-3); }
.calc__packs { font-size: 15px; }
.calc__total { color: var(--brand); font-weight: 760; font-size: 28px; line-height: 1; letter-spacing: -.045em; }
.qty { display: inline-flex; flex: none; border: 1px solid #9aabb3; border-radius: var(--radius); }
.qty button { width: 44px; height: 44px; background: none; border: 0; color: var(--brand); font-size: 20px; cursor: pointer; transition: background-color .15s; }
.qty button:hover { background: var(--surface); }
.qty input { width: 44px; border: 0; text-align: center; font-weight: 650; color: var(--brand); background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pdp__assure { display: grid; gap: var(--s-1); margin-top: var(--s-4); font-size: 15px; line-height: 1.45; }
.pdp__desc { margin-top: var(--s-4); max-width: 48ch; }
@media (max-width: 900px) {
  .pdp { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); padding-top: var(--s-4); }
  .pdp__intro h1 { font-size: clamp(30px, 7.8vw, 43px); margin-bottom: var(--s-3); }
  .pdp__rating { margin-bottom: var(--s-2); }
  .pdp__price strong { font-size: 25px; }
  .pdp__main { aspect-ratio: auto; height: min(57vw, 285px); }
  .pdp__thumbs { gap: var(--s-2); }
  .pdp__thumbs button { flex-basis: 48px; }
}
/* Short phone screens get a shorter photo. svh, because iPhones measure max-height media queries
   against the window with the browser bars hidden. */
@media (max-width: 600px) {
  .pdp__main { height: min(57vw, 285px, 30svh); }
}

/* Fit check */
.fit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); align-items: start; }
.fit__tool { grid-column: span 5; }
.fit__tool h2 { margin-bottom: var(--s-3); }
.fit__check { min-width: 0; margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-5) var(--s-2); border: 1px solid var(--hairline); background: var(--white); }
.fit__check legend { padding: 0 var(--s-2); margin-left: calc(-1 * var(--s-2)); color: var(--brand); font-size: 17px; font-weight: 650; }
.fit__check > p { font-size: 16px; line-height: 1.55; }
.fit__limit { margin-top: var(--s-4); font-size: 16px; line-height: 1.55; }
.fit__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.fit__form label { display: block; color: var(--brand); font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: var(--s-2); }
.fit__form input { width: 100%; height: 52px; padding: 0 var(--s-3); border: 1px solid #a9afbb; border-radius: var(--radius); background: #fff; color: var(--brand); font-weight: 600; }
.fit__result { margin-top: var(--s-4); min-height: 56px; font-weight: 500; color: var(--ink); }
.fit__draw { grid-column: 7 / -1; }
.fit__draw svg { width: 100%; height: auto; color: var(--brand); }
.fit__draw .dim { fill: var(--brand); font-family: var(--sans); font-size: 15px; font-weight: 600; }
.fit__draw .dim-sm { font-size: 13px; font-weight: 400; }
@media (max-width: 600px) {
  .fit__draw .dim { font-size: 18px; }
  .fit__draw .dim-sm { font-size: 15px; }
}
@media (max-width: 900px) { .fit__tool, .fit__draw { grid-column: 1 / -1; } }

/* Data plate, in the style of an equipment nameplate */
.plate-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); align-items: start; }
.plate-layout > .faq { grid-column: 7 / -1; }
.plate { grid-column: span 5; position: relative; padding: var(--s-6); background: var(--navy); color: #fff; border-radius: 4px; }
.plate__name { font-family: var(--sans); font-size: 28px; font-weight: 700; line-height: 1.15; }
.plate__model { color: var(--soft); font-size: 15px; margin-top: var(--s-1); margin-bottom: var(--s-5); }
.plate dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-3) var(--s-4); }
.plate dt { color: var(--soft); font-size: 14px; font-weight: 620; line-height: 1.5; }
.plate dd { font-size: 16px; line-height: 1.4; }
@media (max-width: 900px) { .plate, .plate-layout > .faq { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .plate { padding: var(--s-5); }
  .plate__name { font-size: 24px; text-wrap: balance; }
  .plate dd { font-size: 15px; text-wrap: pretty; }
  .plate__model { margin-bottom: var(--s-4); }
  .plate dl { grid-template-columns: minmax(84px, 1fr) minmax(0, 2.4fr); gap: 10px var(--s-3); }
}

/* ---------- Wholesale page ---------- */
.ws-hero { position: relative; overflow: hidden; background: var(--paper); color: var(--body); border-bottom: 1px solid var(--hairline); }
.ws-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: min(620px, calc(100svh - var(--head-h) - 200px)); padding-block: var(--s-7); }
/* The copy keeps to its own half: it stops a gutter short of where the photo begins, at any width */
.ws-hero__copy { width: min(620px, calc(50vw - var(--s-6) - max(var(--gutter), (100vw - var(--wrap)) / 2))); }
.ws-hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; margin-bottom: var(--s-4); }
.ws-hero__sub { max-width: 32em; margin-bottom: var(--s-4); }
.ws-hero__terms { max-width: 34em; margin-bottom: var(--s-6); color: var(--ink); font-size: 17px; line-height: 1.5; }
.ws-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; }
.ws-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.ws-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 900px) {
  .ws-hero { display: flex; flex-direction: column; }
  .ws-hero__inner { display: block; min-height: 0; padding-block: var(--s-6); }
  .ws-hero__copy { width: 100%; }
  .ws-hero__media { position: relative; order: 2; width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
  .ws-hero__media img { position: absolute; inset: 0; }
}
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--gutter); margin-top: var(--s-7); }
.who h3 { margin-bottom: var(--s-1); }
.who p { font-size: 16px; line-height: 1.55; }
@media (max-width: 767px) { .who { grid-template-columns: 1fr; } }

/* Pricing on the left, the order panel on the right. The last row takes any extra height from the panel. */
.hawk-ws { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: var(--s-7) var(--gutter); align-items: start; color: var(--body); }
.hawk-ws h2 { margin-bottom: var(--s-4); font-family: var(--sans); font-size: 22px; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.hawk-ws__tiers { grid-column: 1 / span 7; grid-row: 1; }
.hawk-ws__rules { grid-column: 1 / span 7; grid-row: 2; }
.hawk-ws__order { grid-column: 8 / -1; grid-row: 1 / span 2; background: var(--white); border: 1px solid var(--hairline); padding: var(--s-5); }
.hawk-ws__order h2 { margin-bottom: 0; }
@media (min-height: 780px) and (min-width: 1265px) { .hawk-ws__order { position: sticky; top: calc(var(--head-h) + var(--s-5)); } }
.hawk-ws__table-wrap { background: var(--white); border: 1px solid var(--hairline); overflow-x: auto; }
.hawk-ws__table { width: 100%; border-collapse: collapse; font-size: 16px; }
.hawk-ws__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hawk-ws__table th, .hawk-ws__table td { padding: var(--s-4) var(--s-3); text-align: right; vertical-align: top; }
.hawk-ws__table th:first-child { padding-left: var(--s-4); text-align: left; }
.hawk-ws__table th:last-child, .hawk-ws__table td:last-child { padding-right: var(--s-4); }
.hawk-ws__table thead th { padding-block: var(--s-3); vertical-align: bottom; color: var(--muted); font-size: 14px; font-weight: 600; }
.hawk-ws__table tbody th, .hawk-ws__table tbody td { border-top: 1px solid var(--hairline); }
.hawk-ws__table tbody th { color: var(--brand); font-weight: 650; white-space: nowrap; }
.hawk-ws__table td strong { color: var(--brand); font-weight: 650; }
.hawk-ws__table tbody tr { transition: background-color .15s; }
.hawk-ws__table tbody tr.is-active { background: var(--surface); box-shadow: inset 3px 0 0 var(--action); }
.hawk-ws__tname { display: block; color: var(--muted); font-size: 14px; font-weight: 400; white-space: normal; }
.hawk-ws__small { font-size: 14px; color: var(--muted); margin-top: var(--s-2); }
.hawk-ws__rules li { padding-left: var(--s-4); margin-bottom: var(--s-2); position: relative; }
.hawk-ws__rules li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1.5px; background: var(--bronze); }
.hawk-ws__rules strong { color: var(--brand); font-weight: 600; }
.hawk-ws__form { margin-top: var(--s-4); }
.hawk-ws__qty-row { margin-bottom: var(--s-4); }
.hawk-ws__qty-row label { display: block; color: var(--brand); font-weight: 600; margin-bottom: var(--s-2); }
.hawk-ws__stepper { display: grid; grid-template-columns: 52px 1fr 52px; border: 1px solid #a9afbb; border-radius: var(--radius); }
.hawk-ws__step { background: none; border: 0; color: var(--brand); font-size: 22px; height: 52px; cursor: pointer; }
.hawk-ws__step:hover { background: var(--surface); }
.hawk-ws__stepper input { width: 100%; border: 0; border-inline: 1px solid var(--hairline); text-align: center; font-size: 18px; font-weight: 650; color: var(--brand); background: none; -moz-appearance: textfield; }
.hawk-ws__stepper input::-webkit-outer-spin-button, .hawk-ws__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.hawk-ws__summary { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--hairline); margin-bottom: var(--s-4); font-size: 15px; }
.hawk-ws__summary > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.hawk-ws__summary strong { color: var(--brand); font-weight: 600; text-align: right; }
.hawk-ws__total { align-items: baseline; padding-top: var(--s-3); margin-top: var(--s-1); border-top: 1px solid var(--hairline); }
.hawk-ws__total strong { font-family: var(--sans); font-size: 30px; font-weight: 700; line-height: 1.1; }
.hawk-ws__next { font-size: 14px; color: var(--muted); }
.hawk-ws__submit { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 56px; background: var(--action); color: var(--white); border: 0; border-radius: var(--radius); font-family: var(--sans); font-weight: 650; font-size: 17px; cursor: pointer; transition: background-color .18s var(--ease); }
.hawk-ws__submit:hover { background: var(--action-hover); }
/* Below this the table can't share a row with the panel, so the order panel comes first and the pricing follows it */
@media (max-width: 1264px) {
  .hawk-ws { grid-template-rows: none; gap: var(--s-6) var(--gutter); }
  .hawk-ws__tiers, .hawk-ws__rules, .hawk-ws__order { grid-column: 1 / -1; grid-row: auto; }
  .hawk-ws__order { order: -1; }
}
@media (min-width: 768px) and (max-width: 1264px) {
  .hawk-ws__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); align-items: start; }
  .hawk-ws__qty-row { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .hawk-ws__summary, .hawk-ws__submit, .hawk-ws__form > .hawk-ws__small { grid-column: 2; }
  .hawk-ws__summary { padding-top: 0; border-top: 0; }
}
@media (max-width: 480px) {
  .hawk-ws__order { padding: var(--s-4); }
  .hawk-ws__table { font-size: 15px; }
  .hawk-ws__table th, .hawk-ws__table td { padding-inline: var(--s-2); }
  .hawk-ws__table th:first-child { padding-left: var(--s-3); }
  .hawk-ws__table th:last-child, .hawk-ws__table td:last-child { padding-right: var(--s-3); }
}

/* Short screens: the hero fills the view, rather than the next heading being sliced at the bottom edge */
@media (max-height: 769px) and (min-width: 901px) { .ws-hero__inner { min-height: calc(100svh - var(--head-h) - var(--s-5)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
}