/* American Comfort Masters — ux.css
 * Shared UX layer: skip link, sticky mobile action bar, CTA band, toasts,
 * mini-cart slide-over, floating contact FAB, lightbox, skeletons, focus.
 * Loaded after theme.css + store.css on every page; uses ONLY theme.css
 * palette/spacing tokens. Markup contract lives in ux.js / lightbox.js.
 *
 * Z-INDEX SCALE (site-wide; store.css .site-header sits at 50):
 *   50  site header           (store.css — for reference, not set here)
 *   80  .ux-actionbar         sticky mobile CTA bar
 *   84  .ux-fab               floating contact button
 *   85  .ux-fab-panel         contact mini-form card
 *   90  .ux-minicart__backdrop
 *   91  .ux-minicart          slide-over panel
 *   95  .ux-lightbox          full-screen media overlay
 *  100  .ux-toasts            always on top (incl. above the lightbox)
 *
 * Local layout tokens (palette/spacing stay in theme.css):
 */

:root {
  --ux-actionbar-h: 4.25rem; /* fixed bar height incl. its own padding */
  --ux-fab-size: 3.25rem;
}

/* ------------------------------------------------------------ skip link */

/* Visually hidden until keyboard focus, then a high-contrast pill pinned
 * top-left (above everything — same layer as toasts). */
.ux-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ux-skip:focus,
.ux-skip:focus-visible {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  overflow: visible;
  clip: auto;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

/* ------------------------------------------------- sticky mobile actionbar */

/* Fixed bottom 2-button bar, mobile only. ux.js adds body.has-actionbar when
 * the bar exists so the page bottom padding only applies where the bar does. */
.ux-actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* grid rule: minmax(0,1fr) */
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4)
    calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(38, 50, 58, 0.08),
    0 -10px 28px rgba(38, 50, 58, 0.10); /* --shadow-md, flipped upward */
}

.ux-actionbar .btn {
  width: 100%;
  white-space: nowrap;
}

/* Room for the fixed bar — mobile only (bar is hidden >= md). */
/* Below --bp-md (48rem / 768px) — keep in sync with the theme.css token table */
@media (width < 48rem) {
  body.has-actionbar {
    padding-bottom: calc(var(--ux-actionbar-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* At/above --bp-md (48rem / 768px) — keep in sync with the theme.css token table */
@media (width >= 48rem) {
  .ux-actionbar {
    display: none;
  }
}

/* --------------------------------------------------------------- CTA band */

/* Full-bleed primary-color band before the footer. */
.ux-cta-band {
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
  padding-block: var(--sp-7);
}

.ux-cta-band h2 {
  color: var(--color-on-primary);
  font-size: var(--fs-700);
  margin-bottom: var(--sp-3);
}

.ux-cta-band p {
  color: var(--color-highlight);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}

.ux-cta-band__actions {
  display: flex;
  flex-wrap: wrap; /* wraps on mobile */
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
}

/* Recolor the outline/ghost button variants for the dark band. */
.ux-cta-band .btn--secondary {
  color: var(--color-on-primary);
  border-color: var(--color-accent);
}

.ux-cta-band .btn--secondary:hover {
  background: rgba(254, 254, 254, 0.12);
  color: var(--color-on-primary);
  border-color: var(--color-highlight);
}

.ux-cta-band .btn--ghost {
  color: var(--color-highlight);
}

.ux-cta-band .btn--ghost:hover {
  color: var(--color-on-primary);
  background: rgba(254, 254, 254, 0.12);
}

/* ------------------------------------------------------------------ toasts */

/* Container: bottom-center on mobile (stacked above the actionbar),
 * top-right from md up. aria-live region appended by ux.js. */
.ux-toasts {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none; /* toasts re-enable their own */
}

/* Below --bp-md (48rem / 768px) — keep in sync with the theme.css token table */
@media (width < 48rem) {
  .ux-toasts {
    inset-inline: var(--sp-4);
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }

  /* Clear the fixed actionbar when present. */
  body.has-actionbar .ux-toasts {
    bottom: calc(var(--ux-actionbar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* At/above --bp-md (48rem / 768px) — keep in sync with the theme.css token table */
@media (width >= 48rem) {
  .ux-toasts {
    top: calc(var(--header-h) + var(--sp-3));
    right: var(--sp-4);
    align-items: flex-end;
  }
}

.ux-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(26rem, 100%);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-300);
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-cta); /* default = info */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  animation: ux-toast-in 0.25s var(--ease) both;
}

.ux-toast--ok   { border-left-color: var(--color-success); }
.ux-toast--err  { border-left-color: var(--color-danger); }
.ux-toast--info { border-left-color: var(--color-cta); }

/* JS adds --out, waits for animationend, then removes the node. */
.ux-toast--out {
  animation: ux-toast-out 0.2s var(--ease) both;
}

.ux-toast__action {
  margin-left: auto;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--color-cta);
  font-weight: 700;
  font-size: var(--fs-300);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}

.ux-toast__action:hover {
  color: var(--color-cta-hover);
  background: var(--color-surface);
}

.ux-toast__close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-400);
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}

.ux-toast__close:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

@keyframes ux-toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ux-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(0.5rem); }
}

/* --------------------------------------------------------------- mini-cart */

/* Right slide-over. Markup starts <aside class="ux-minicart" hidden>; ux.js
 * removes [hidden] then adds --open next frame so the transform transitions. */
.ux-minicart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
}

.ux-minicart--open {
  transform: translateX(0);
}

.ux-minicart__backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(38, 50, 58, 0.45); /* --color-text @ 45% */
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.ux-minicart--open ~ .ux-minicart__backdrop,
.ux-minicart__backdrop.ux-minicart__backdrop--open {
  opacity: 1;
}

.ux-minicart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}

.ux-minicart__head h2 {
  font-size: var(--fs-500);
  margin: 0;
}

.ux-minicart__close {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-500);
  line-height: 1;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
}

.ux-minicart__close:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.ux-minicart__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
}

.ux-minicart__line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-400);
}

/* Deposit math line — emphasized. */
.ux-minicart__deposit {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--color-primary);
}

/* Sticky CTA row pinned to the panel bottom. */
.ux-minicart__cta {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* grid rule: minmax(0,1fr) */
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5)
    calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* ------------------------------------------------- floating contact (FAB) */

.ux-fab {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 84;
  width: var(--ux-fab-size);
  height: var(--ux-fab-size);
  border: 0;
  border-radius: 50%;
  background: var(--color-cta);
  color: var(--color-on-cta);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease),
    box-shadow 0.2s var(--ease);
}

.ux-fab:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Below --bp-md (48rem / 768px) — keep in sync with the theme.css token table.
 * Lift the FAB above the fixed actionbar when present. */
@media (width < 48rem) {
  body.has-actionbar .ux-fab {
    bottom: calc(var(--ux-actionbar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* Card anchored above the FAB. */
.ux-fab-panel {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + var(--ux-fab-size) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  width: min(320px, calc(100vw - 2 * var(--sp-4)));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  animation: ux-toast-in 0.2s var(--ease) both; /* same slide/fade-in */
}

/* Below --bp-md (48rem / 768px) — keep in sync with the theme.css token table */
@media (width < 48rem) {
  body.has-actionbar .ux-fab-panel {
    bottom: calc(var(--ux-actionbar-h) + var(--sp-3) + var(--ux-fab-size) + var(--sp-3)
      + env(safe-area-inset-bottom, 0px));
  }
}

.ux-fab-panel h3 {
  font-size: var(--fs-500);
  margin-bottom: var(--sp-3);
}

/* Form fields inside the panel reuse the global theme.css input styling
 * (.field markup); just tighten the rhythm for the small card. */
.ux-fab-panel .field {
  margin-bottom: var(--sp-3);
}

.ux-fab-panel textarea {
  resize: vertical;
  min-height: 4.5rem;
}

/* Honeypot field — off-screen, still submittable by bots. */
.ux-fab-panel .ux-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------------------------------------------------------------- lightbox */

.ux-lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  background: rgba(10, 14, 17, 0.9); /* ~90% black, slate-tinted */
  backdrop-filter: blur(6px);
  animation: ux-fade-in 0.2s var(--ease) both;
}

.ux-lightbox img,
.ux-lightbox video {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

/* Shared chrome-button look (close / prev / next). */
.ux-lightbox__close,
.ux-lightbox__prev,
.ux-lightbox__next {
  position: fixed;
  z-index: 1; /* above the media within the overlay */
  border: 0;
  background: rgba(254, 254, 254, 0.12);
  color: var(--color-bg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-600);
  line-height: 1;
  transition: background-color 0.2s var(--ease);
}

.ux-lightbox__close:hover,
.ux-lightbox__prev:hover,
.ux-lightbox__next:hover {
  background: rgba(254, 254, 254, 0.24);
}

.ux-lightbox__close {
  top: var(--sp-4);
  right: var(--sp-4);
  width: 2.75rem;
  height: 2.75rem;
}

/* Large hit areas; lightbox.js hides them ([hidden]) for single items —
 * the --single modifier covers that too. */
.ux-lightbox__prev,
.ux-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 3.25rem;
  height: 3.25rem;
}

.ux-lightbox__prev { left: var(--sp-4); }
.ux-lightbox__next { right: var(--sp-4); }

.ux-lightbox--single .ux-lightbox__prev,
.ux-lightbox--single .ux-lightbox__next {
  display: none;
}

/* Caption bar from the image alt text. */
.ux-lightbox__caption {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-4) var(--sp-6)
    calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: var(--color-highlight);
  font-size: var(--fs-300);
  background: linear-gradient(to top, rgba(10, 14, 17, 0.85), transparent);
}

.ux-lightbox__caption:empty {
  display: none;
}

@keyframes ux-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------- skeletons + image fade */

/* Neutral shimmer placeholder (same family as theme.css .skeleton, but
 * self-contained so this layer has no rule-ordering dependency on it). */
.ux-skel {
  background: linear-gradient(
    100deg,
    var(--color-surface) 30%,
    var(--color-surface-warm) 50%,
    var(--color-surface) 70%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: ux-shimmer 1.3s var(--ease) infinite;
}

@keyframes ux-shimmer {
  to { background-position: -200% 0; }
}

/* Image fade-in. CONVENTION: JS (ux.js / media pages) adds .is-loaded on the
 * element's load event; until then it sits at opacity 0 over a .ux-skel. */
.ux-fadein {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.ux-fadein.ux-fadein--loaded {
  opacity: 1;
}

/* ------------------------------------------------------------------- focus */

/* Tighter, brand-CTA focus ring (overrides the theme.css 3px highlight ring —
 * ux.css loads last, same specificity wins). Default outline is removed only
 * here, where this replacement applies. */
:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

/* On dark surfaces the denim ring vanishes — use the light highlight there. */
.ux-cta-band :focus-visible,
.ux-lightbox :focus-visible,
.ux-actionbar .btn--primary:focus-visible {
  outline-color: var(--color-highlight);
}

/* --------------------------------------------------------- reduced motion */

/* theme.css already zeroes all animation/transition durations globally under
 * reduced motion; these make the intent explicit and kill transforms/shimmer.
 * NOTE: .ux-toast / .ux-toast--out are deliberately NOT set to animation:none —
 * JS removes a toast on animationend, and theme.css's 0.001ms duration keeps
 * that event firing under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ux-fab-panel,
  .ux-lightbox {
    animation: none;
  }

  .ux-skel {
    animation: none;
    background: var(--color-surface); /* static block, no shimmer */
  }

  .ux-minicart,
  .ux-minicart__backdrop,
  .ux-fadein,
  .ux-fab,
  .btn {
    transition: none;
  }

  .ux-fadein {
    opacity: 1; /* never hold images invisible */
  }

  .ux-fab:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------ fixes */
/* The CTA band sits flush against the footer — kill the footer's default
   top margin when the band precedes it (two dark blocks, no white strip). */
.ux-cta-band + .site-footer { margin-top: 0; }

/* <picture> breaks the height:100% chain inside the product-card media box,
   letterboxing the image; make it a full-size block so object-fit:cover works. */
.product-card__media picture { display: block; width: 100%; height: 100%; }
.product-card__media picture img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------- nav dropdown */
/* "Resources" disclosure menu in the site header (details-based, no JS). */
.site-nav details.nav-more { position: relative; }
.site-nav details.nav-more > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .25rem;
}
.site-nav details.nav-more > summary::-webkit-details-marker { display: none; }
.site-nav details.nav-more > summary::after { content: "\25BE"; font-size: .7em; }
.site-nav details.nav-more[open] > summary::after { content: "\25B4"; }
.site-nav .nav-more__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 220px; padding: .5rem; margin: 0; list-style: none;
  background: var(--color-bg); border: 1px solid var(--color-border, #C5CEC8);
  border-radius: 10px; box-shadow: var(--shadow);
}
.site-nav .nav-more__panel li a {
  display: block; padding: .5rem .75rem; border-radius: 6px;
  color: var(--color-text, #26323A); text-decoration: none; font-size: .95rem;
}
.site-nav .nav-more__panel li a:hover { background: var(--color-surface); }
/* Below --bp-md (48rem / 768px — theme.css token table): the dropdown hides
   with the other text links; the footer carries the full sitemap on mobile. */
@media (width < 48rem) {
  .site-nav details.nav-more { display: none; }
}