/* AccuroFit site — structural CSS added during the static conversion.
   All visual values (colors, spacing, type) live in the original inline
   styles carried over from the Claude Design export; this file only
   supplies behavior that used to be computed in JS (responsive nav
   switch, image-slot crop math) so the design renders identically
   without the dc-runtime. */

/* Responsive nav: originally toggled by a window-resize JS listener at
   the 880px breakpoint. display:contents keeps the wrapped elements as
   direct flex children of <nav>, so its space-between layout is unchanged.
   Breakpoint raised to 1100px (from 880px) — the full desktop nav (logo +
   6 links + Get Started + cart) has no wrap/shrink protection since its
   items are display:contents children of the nav's flex row, so it was
   visibly squishing well before 880px. Switching to the hamburger earlier
   avoids that squeeze. */
.nav-desktop, .nav-mobile-toggle {
  display: contents;
}
@media (max-width: 1099px) {
  .nav-desktop { display: none; }
}
@media (min-width: 1100px) {
  .nav-mobile-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* image-slot crop reproduction — see assets/images/crop-data.json.
   Matches the runtime's _applyView math: object-fit gives the "contain"
   baseline, object-position encodes the x/y pan, and transform: scale
   reproduces any extra zoom (s), both anchored at the same point so
   zoom and pan stay in sync. */
.slot-frame {
  position: relative;
  overflow: hidden;
}
.slot-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Lightbox (product image click-to-expand).
   .lightbox-overlay sets display:flex to center its contents when shown,
   but an unconditional author "display" declaration overrides the browser's
   built-in [hidden]{display:none} regardless of source order or the hidden
   attribute being present — so the higher-specificity [hidden] override
   below is required, not just for tidiness. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: oklch(10% 0.01 260 / 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lightbox-overlay[hidden] {
  display: none;
}

/* Cart toast */
.cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: oklch(20% 0.02 260);
  border: 1px solid oklch(100% 0 0 / 0.14);
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 20px 50px -12px oklch(0% 0 0 / 0.5);
  z-index: 400;
}

/* Cart toast — inline variant, shown directly under the Add to Cart
   button on product detail pages instead of floating over the page
   (Gail 2026-09-22: the floating version wasn't clearly tied to the
   button that was just clicked). */
.cart-toast-inline {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  background: oklch(76% 0.18 148 / 0.14);
  border: 1px solid oklch(76% 0.18 148 / 0.4);
  color: oklch(85% 0.14 148);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  margin: 14px auto 0;
}
.cart-toast-inline[hidden] {
  display: none;
}