/* Styles shared by the About, Fulfillment and Terms pages (moved out of their identical inline <style> blocks, same order). */
/* ---- #page-lock-style ---- */
/* /* ===== Whole-page lock =====
   Nothing on the page can be selected, highlighted, long-pressed, dragged or
   right-clicked. The one exception is real form fields (the checkout's
   shipping inputs), which must stay typeable / pasteable. */
html,
body,
body * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
img,
svg,
a {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
body *::selection {
  background: transparent !important;
}
body input,
body textarea,
body select,
body [contenteditable="true"],
body [contenteditable="true"] * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
body input::selection,
body textarea::selection,
body [contenteditable="true"]::selection {
  background: highlight !important;
}

/* ---- #footer-paper-2 ---- */
/* Footer uses the same background as the checkout footer. */
footer.footer { background: var(--paper-2) !important; }

/* ---- #status-button-header-lock ---- */
/* Stable header position across every viewport. */
header.nav {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  transform: translateX(-50%) !important;
}

/* One identical, narrower ORDER STATUS pill on desktop and mobile. */
header.nav .nav-cta {
  position: absolute !important;
  top: 50% !important;
  right: 20px !important;
  bottom: auto !important;
  width: 115px !important;
  height: 28px !important;
  min-width: 115px !important;
  max-width: 115px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  flex: 0 0 115px !important;
  overflow: hidden !important;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms cubic-bezier(.2,.7,.2,1) !important;
  box-shadow: none !important;
}

/* Same lift + offset shadow behavior as CHECKOUT NOW. */
header.nav .nav-cta:hover,
header.nav .nav-cta:focus-visible {
  transform: translateY(calc(-50% - 2px)) scale(1.01) !important;
  box-shadow: 4px 4px 0 rgba(51,39,31,.12) !important; /* was .16 — a touch softer */
}

header.nav .nav-cta {
  font-size: 7px !important;
  white-space: nowrap !important;
}

header.nav .nav-cta span {
  margin-left: 8px !important;
}

@media (prefers-reduced-motion: reduce) {
  header.nav .nav-cta {
    transition: none !important;
  }
}

/* Slightly inset header logo for balanced visual spacing. */
header.nav .stef-header-mark {
  position: absolute !important;
  left: 20px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Compact header on narrow mobile viewports: keep only the logo and ORDER STATUS. */
@media (max-width: 700px) {
  header.nav .nav-links {
    display: none !important;
  }
}

/* Header interaction lock:
   only the actual navigation links remain clickable;
   the logo/header surface cannot be selected, dragged, or context-clicked. */
header.nav,
header.nav *,
header.nav .stef-header-mark,
header.nav .stef-header-mark img,
header.nav .nav-cta {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

header.nav .stef-header-mark,
header.nav .stef-header-mark img {
  pointer-events: none !important;
}

/* Links, buttons & images (ORDER STATUS, CHECKOUT NOW, MORE INFO, BACK TO TOP,
   the keycap renders, both STEF logos, ...):
   no blue tap-highlight box, no text selection, no long-press/right-click menu
   (the JS "link-button-lock" below handles the menu), no dragging.
   Everything else on the page stays selectable as normal.
   Keyboard focus outlines are unaffected. */
html {
  -webkit-tap-highlight-color: transparent !important;
}
a,a *,button,button *,[role="button"],[role="button"] *,img,svg{-webkit-tap-highlight-color:transparent!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none!important;user-drag:none!important}

/* Same colour change as the header links (.nav-links a:hover -> var(--red)),
   now also on MORE INFO and the footer links (LEGAL / ORDER INFORMATION,
   FULFILLMENT & SHIPPING, BACK TO TOP). :active gives feedback the moment a
   finger touches it on mobile; :hover covers desktop; :focus-visible keyboards. */
a.text-link,footer.footer .legal a{transition:color .25s ease, border-color .25s ease, text-decoration-color .25s ease!important}
a.text-link:hover,a.text-link:active,a.text-link:focus-visible,footer.footer .legal a:hover,footer.footer .legal a:active,footer.footer .legal a:focus-visible{color:var(--red)!important;border-color:var(--red)!important;/* MORE INFO's underline follows */;text-decoration-color:var(--red)!important;/* footer links' underline follows */}

/* Shipment Details grid: give the left column the same 25px inner spacing
   the right column already has (it had 25px on the right side only, so its
   text sat flush against the left edge). Applies on desktop and mobile. */
#details .details-grid > .detail:nth-child(odd) {
  padding-left: 25px !important;
}

/* Disable pull-to-refresh (Chrome/Android, Samsung Internet, Firefox, and
   Safari on iOS 16+). Normal scrolling is unaffected; only the "pull past the
   top to reload" gesture (and the rubber-band bounce) is turned off. */
html,
body {
  overscroll-behavior-y: none !important;
}

/* Remove the full-width grey rule between the hero ("01 — ARRIVAL") and the
   next section (it was the top border of the #kit section). */
#kit.manifest {
  border-top: 0 !important;
}

/* Hero footer row: "OPEN / SEAL / TRACK / DELIVER" truly centred on the page.
   It was spaced "between" its neighbours, so it drifted toward whichever side
   had the shorter label. Now: left label | centred label | right label, with
   equal-width outer columns so the middle sits exactly in the centre.
   (On mobile the right label is hidden; the middle still stays centred.) */
.hero .hero-foot {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 12px !important;
}
.hero .hero-foot > span:nth-child(1) { justify-self: start !important; }
.hero .hero-foot > span:nth-child(2) { justify-self: center !important; text-align: center !important; }
.hero .hero-foot > span:nth-child(3) { justify-self: end !important; }

/* Footer: vertically centre the right-hand text (© 2026 STEFAN SAMOS … and
   the link next to it) against the logo + GMK PACKAGE block. It used to sit
   ~12px high because it was pinned to the top of the row. */
footer.footer {
  align-items: center !important;
}

/* Same optical correction as the status pill: DM Mono capitals sit slightly
   high in their line box, so nudge the footer text down by the same amount. */
footer.footer .footer-brand > div{transform:translateY(0.055em)}

/* Official GMK logo in the Shipment Details "MANUFACTURER" row.
   Drawn in the row's own text colour (cream on the dark section) and sized to
   the height of the neighbouring values (DOUBLESHOT ABS + UV, CHERRY (CYL)...). */
#details .gmk-logo-wrap {
  line-height: inherit;
}
#details .gmk-logo {
  display: inline-block;
  vertical-align: -0.05em;   /* sits on the text baseline like a capital letter */
  height: 0.8em;             /* ≈ cap height of the other values */
  width: auto;
  aspect-ratio: 234 / 74;
  color: inherit;
}

/* Group Buy info panel: top rule uses the same light line colour as the rows below it. */
#group-buy .buy-panel {
  border-top-color: var(--line) !important;
}

/* Remove the faint vertical guide line down the middle of the page
   (a 1px gradient on body::before in style.css). */
html body::before {
  background: none !important;
}

/* Footer legal notes (the 4 small paragraphs):
   - wide screens: 4 columns in their original order; each column's width is
     set in proportion to how much text it holds (JS "legal-balance" below),
     so all four end up with the same number of lines at any width;
   - narrow screens / phones (900px and below): stacked as rows, same order;
   - always fully justified so every paragraph reads as a clean block. */
footer.footer .legal {
  display: grid !important;              /* a generic ".footer div" flex rule was overriding it */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 30px !important;
  row-gap: 30px !important;
  align-items: start;
}
footer.footer .legal p {
  text-align: justify !important;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (max-width: 900px) {
  footer.footer .legal {
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }
}

header.nav {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Mobile-only back-to-top control. */
.mobile-top-button {
  display: none;
}

@media (max-width: 700px) {
  .mobile-top-button {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 2147483646 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 82px !important;
    height: 30px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(51,39,31,.28) !important;
    border-radius: 999px !important;
    background: rgba(238,233,220,.58) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    isolation: isolate !important;
    color: #33271f !important;
    font: 7px/1 "DM Mono", monospace !important;
    letter-spacing: .08em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .mobile-top-button.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s !important;
  }

  .mobile-top-button:focus,
  .mobile-top-button:focus-visible,
  .mobile-top-button:hover {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Bottom blur — built the same way as the header's (one blur layer faded by a
     long, eased mask), so it has the same gradual feel and the same stability.
     Softer than the header: 4px max, reached only right at the bottom edge;
     the fade starts almost invisibly at the top of the band.
     Fixed-height band (no 100vh) so it never resizes while scrolling. */
  .mobile-bottom-blur {
    --bottom-blur-height: 140px;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: var(--bottom-blur-height) !important;
    z-index: 2147483645 !important;
    pointer-events: none !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;          /* never fade the parent: it would switch the blur off mid-fade */
    visibility: hidden !important;
    transition: visibility 0s linear 220ms !important;
  }

  .mobile-bottom-blur > i {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
  }

  /* The single blur layer. */
  .mobile-bottom-blur > i:nth-child(1) {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-mask-image: linear-gradient(
      to top,
      rgba(0,0,0,1.000) 0.00%,
      rgba(0,0,0,1.000) 3.12%,
      rgba(0,0,0,0.997) 6.25%,
      rgba(0,0,0,0.991) 9.38%,
      rgba(0,0,0,0.980) 12.50%,
      rgba(0,0,0,0.963) 15.62%,
      rgba(0,0,0,0.939) 18.75%,
      rgba(0,0,0,0.909) 21.88%,
      rgba(0,0,0,0.872) 25.00%,
      rgba(0,0,0,0.829) 28.12%,
      rgba(0,0,0,0.781) 31.25%,
      rgba(0,0,0,0.727) 34.38%,
      rgba(0,0,0,0.669) 37.50%,
      rgba(0,0,0,0.609) 40.62%,
      rgba(0,0,0,0.546) 43.75%,
      rgba(0,0,0,0.482) 46.88%,
      rgba(0,0,0,0.419) 50.00%,
      rgba(0,0,0,0.357) 53.12%,
      rgba(0,0,0,0.298) 56.25%,
      rgba(0,0,0,0.242) 59.38%,
      rgba(0,0,0,0.191) 62.50%,
      rgba(0,0,0,0.146) 65.62%,
      rgba(0,0,0,0.106) 68.75%,
      rgba(0,0,0,0.073) 71.88%,
      rgba(0,0,0,0.047) 75.00%,
      rgba(0,0,0,0.027) 78.12%,
      rgba(0,0,0,0.013) 81.25%,
      rgba(0,0,0,0.005) 84.38%,
      rgba(0,0,0,0.001) 87.50%,
      rgba(0,0,0,0.000) 90.62%,
      rgba(0,0,0,0.000) 93.75%,
      rgba(0,0,0,0.000) 96.88%,
      rgba(0,0,0,0.000) 100.00%
    ) !important;
    mask-image: linear-gradient(
      to top,
      rgba(0,0,0,1.000) 0.00%,
      rgba(0,0,0,1.000) 3.12%,
      rgba(0,0,0,0.997) 6.25%,
      rgba(0,0,0,0.991) 9.38%,
      rgba(0,0,0,0.980) 12.50%,
      rgba(0,0,0,0.963) 15.62%,
      rgba(0,0,0,0.939) 18.75%,
      rgba(0,0,0,0.909) 21.88%,
      rgba(0,0,0,0.872) 25.00%,
      rgba(0,0,0,0.829) 28.12%,
      rgba(0,0,0,0.781) 31.25%,
      rgba(0,0,0,0.727) 34.38%,
      rgba(0,0,0,0.669) 37.50%,
      rgba(0,0,0,0.609) 40.62%,
      rgba(0,0,0,0.546) 43.75%,
      rgba(0,0,0,0.482) 46.88%,
      rgba(0,0,0,0.419) 50.00%,
      rgba(0,0,0,0.357) 53.12%,
      rgba(0,0,0,0.298) 56.25%,
      rgba(0,0,0,0.242) 59.38%,
      rgba(0,0,0,0.191) 62.50%,
      rgba(0,0,0,0.146) 65.62%,
      rgba(0,0,0,0.106) 68.75%,
      rgba(0,0,0,0.073) 71.88%,
      rgba(0,0,0,0.047) 75.00%,
      rgba(0,0,0,0.027) 78.12%,
      rgba(0,0,0,0.013) 81.25%,
      rgba(0,0,0,0.005) 84.38%,
      rgba(0,0,0,0.001) 87.50%,
      rgba(0,0,0,0.000) 90.62%,
      rgba(0,0,0,0.000) 93.75%,
      rgba(0,0,0,0.000) 96.88%,
      rgba(0,0,0,0.000) 100.00%
    ) !important;
  }

  /* Same neutral grey as the header, slightly lighter here. */
  .mobile-bottom-blur > i:nth-child(2) {
    background: linear-gradient(
      to top,
      rgba(128,128,128,0.100) 0.0%,
      rgba(128,128,128,0.100) 6.2%,
      rgba(128,128,128,0.098) 12.5%,
      rgba(128,128,128,0.095) 18.8%,
      rgba(128,128,128,0.090) 25.0%,
      rgba(128,128,128,0.082) 31.2%,
      rgba(128,128,128,0.072) 37.5%,
      rgba(128,128,128,0.062) 43.8%,
      rgba(128,128,128,0.050) 50.0%,
      rgba(128,128,128,0.038) 56.2%,
      rgba(128,128,128,0.028) 62.5%,
      rgba(128,128,128,0.018) 68.8%,
      rgba(128,128,128,0.010) 75.0%,
      rgba(128,128,128,0.005) 81.2%,
      rgba(128,128,128,0.002) 87.5%,
      rgba(128,128,128,0.000) 93.8%,
      rgba(128,128,128,0.000) 100.0%
    ) !important;
  }

  .mobile-bottom-blur.is-visible {
    visibility: visible !important;
    transition: visibility 0s !important;
  }
  .mobile-bottom-blur.is-visible > i {
    opacity: 1 !important;
  }
}

/* ---- #blur-tint-neutral ---- */
/* Header blur tint: neutral grey instead of beige, same tone + curve as the
   bottom blur, so both read the same over light and dark sections.
   Only the tint changes; the header's blur and fade are untouched. */
html body::after {
  background: linear-gradient(
      to bottom,
      rgba(128,128,128,0.140) 0.0%,
      rgba(128,128,128,0.140) 6.2%,
      rgba(128,128,128,0.138) 12.5%,
      rgba(128,128,128,0.133) 18.8%,
      rgba(128,128,128,0.126) 25.0%,
      rgba(128,128,128,0.115) 31.2%,
      rgba(128,128,128,0.101) 37.5%,
      rgba(128,128,128,0.086) 43.8%,
      rgba(128,128,128,0.070) 50.0%,
      rgba(128,128,128,0.054) 56.2%,
      rgba(128,128,128,0.039) 62.5%,
      rgba(128,128,128,0.025) 68.8%,
      rgba(128,128,128,0.014) 75.0%,
      rgba(128,128,128,0.007) 81.2%,
      rgba(128,128,128,0.002) 87.5%,
      rgba(128,128,128,0.000) 93.8%,
      rgba(128,128,128,0.000) 100.0%
    ) !important;
}

/* ---- #footer-right-rows ---- */
/* Copyright and the back link share one line and are centred against each
   other; the contact details sit on a single row underneath, right-aligned
   under the back link. */

@media (max-width: 700px) {
  /* Phones: copyright on the left and the back link on the right edge,
     lined up under DESIGNED BY STEFAN SAMOS; contact line underneath. The
     block sits evenly between the logo above and the divider below. */

  footer.footer .legal { margin-top: 0 !important; }
}