/* Sitewide Louver navigation — polished desk rail */

:root {
  --lou-ink: #0a1628;
  --lou-mute: #5c6b78;
  --lou-butter: #f4c430;
  --lou-butter-deep: #d9a910;
  --lou-spruce: #1b6b4f;
  --lou-frost: #4a9bbe;
  --lou-ember: #e4572e;
  --lou-line: rgba(10, 22, 40, 0.11);
  --lou-panel: #f7fbfc;
  --lou-display: "Exo 2", system-ui, sans-serif;
  --lou-font: "Mulish", system-ui, sans-serif;
}

.lou-louvers {
  position: fixed;
  top: 50%;
  right: max(0.55rem, env(safe-area-inset-right));
  transform: translateY(-50%);
  z-index: 240;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  font-family: var(--lou-display);
  pointer-events: none;
}

.lou-louvers > * {
  pointer-events: auto;
}

.lou-blind-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.05rem;
  background: var(--lou-ink);
  color: #fff;
  font-family: var(--lou-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(10, 22, 40, 0.28);
  transition: transform 0.2s, background 0.2s;
}

.lou-blind-toggle:hover,
.lou-blind-toggle:focus-visible {
  background: var(--lou-spruce);
  transform: translateY(-2px);
  outline: none;
}

.lou-blind-toggle::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lou-butter);
  box-shadow: 0 0 0 0 rgba(244, 196, 48, 0.45);
  animation: lou-nav-pip 1.8s ease-out infinite;
}

@keyframes lou-nav-pip {
  0% { box-shadow: 0 0 0 0 rgba(244, 196, 48, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(244, 196, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 196, 48, 0); }
}

.lou-louvers.is-open .lou-blind-toggle {
  background: var(--lou-spruce);
}

.lou-blind-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.32rem;
}

.lou-slat {
  --lou-slat-w: 2.65rem;
  position: relative;
  display: block;
  width: var(--lou-slat-w);
  height: 2.85rem;
  text-decoration: none !important;
  color: var(--lou-ink);
  transition: width 0.32s cubic-bezier(0.2, 0.85, 0.2, 1);
  animation: lou-slat-in 0.45s ease backwards;
  animation-delay: calc(var(--lou-i) * 0.035s);
}

@keyframes lou-slat-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

.lou-slat-edge {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--lou-slat-w);
  height: 100%;
  border-radius: 1.05rem 0.35rem;
  background: linear-gradient(180deg, #fff 0%, #e8f0f2 100%);
  border: 1px solid var(--lou-line);
  box-shadow: 0 10px 22px rgba(10, 22, 40, 0.1);
  display: grid;
  place-items: center;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.22s;
  z-index: 2;
}

.lou-slat-glyph {
  font-family: var(--lou-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.lou-slat-badge {
  position: absolute;
  top: -0.28rem;
  right: -0.28rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--lou-ember);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(228, 87, 46, 0.35);
  z-index: 3;
}

.lou-slat-panel {
  position: absolute;
  top: 0;
  right: calc(var(--lou-slat-w) + 0.35rem);
  height: 100%;
  min-width: 8.75rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.85rem 0.35rem;
  background: rgba(10, 22, 40, 0.96);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.2, 0.85, 0.2, 1), visibility 0.22s;
  box-shadow: 0 14px 30px rgba(10, 22, 40, 0.24);
  white-space: nowrap;
}

.lou-slat-panel strong {
  font-family: var(--lou-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
}

.lou-slat-panel small {
  font-family: var(--lou-font);
  font-size: 0.68rem;
  opacity: 0.68;
  margin-top: 0.08rem;
}

.lou-slat:hover,
.lou-slat:focus-visible {
  width: calc(var(--lou-slat-w) + 9.4rem);
  outline: none;
  z-index: 4;
}

.lou-slat:hover .lou-slat-edge,
.lou-slat:focus-visible .lou-slat-edge {
  background: var(--lou-butter);
  border-color: var(--lou-butter-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(244, 196, 48, 0.35);
}

.lou-slat:hover .lou-slat-panel,
.lou-slat:focus-visible .lou-slat-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.lou-slat.is-hot .lou-slat-edge {
  border-color: rgba(228, 87, 46, 0.55);
  box-shadow: 0 0 0 2px rgba(228, 87, 46, 0.18), 0 10px 22px rgba(10, 22, 40, 0.1);
}

.lou-slat.is-hot .lou-slat-glyph {
  color: var(--lou-ember);
}

.lou-slat.is-active .lou-slat-edge {
  background: var(--lou-ink);
  border-color: var(--lou-ink);
  color: #fff;
}

.lou-slat.is-active .lou-slat-glyph {
  color: var(--lou-butter);
}

.lou-slat.is-active:hover .lou-slat-edge,
.lou-slat.is-active:focus-visible .lou-slat-edge {
  background: var(--lou-ink);
  border-color: var(--lou-ink);
}

/* Room for fixed slats on interior pages */
body.a76-store:not(.louver-desk) .page-main {
  padding-right: 3.9rem;
}

body.a76-store:not(.louver-desk) .a76-header .container {
  padding-right: calc(clamp(1rem, 3vw, 1.75rem) + 2.2rem);
}

@media (max-width: 820px) {
  .lou-louvers {
    top: auto;
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    right: max(0.85rem, env(safe-area-inset-right));
    transform: none;
    align-items: flex-end;
  }

  .lou-blind-toggle {
    display: inline-flex;
  }

  .lou-blind-stack {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.55rem);
    width: min(18rem, calc(100vw - 1.7rem));
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    overflow-y: auto;
    pointer-events: none;
    gap: 0.4rem;
    padding: 0;
    border-radius: 1.25rem 0.45rem;
    background: transparent;
    transition: max-height 0.35s ease, opacity 0.25s, padding 0.25s;
    -webkit-overflow-scrolling: touch;
  }

  .lou-louvers.is-open .lou-blind-stack {
    max-height: min(68vh, 28rem);
    opacity: 1;
    pointer-events: auto;
    padding: 0.55rem;
    background: rgba(247, 251, 252, 0.96);
    border: 1px solid var(--lou-line);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.18);
    backdrop-filter: blur(14px);
  }

  .lou-slat {
    width: 100% !important;
    height: auto;
    min-height: 3rem;
    animation: none;
  }

  .lou-slat-edge {
    position: absolute;
    left: 0.35rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem 0.3rem;
  }

  .lou-slat:hover .lou-slat-edge,
  .lou-slat:focus-visible .lou-slat-edge,
  .lou-slat.is-active:hover .lou-slat-edge {
    transform: translateY(-50%);
  }

  .lou-slat-panel {
    position: relative;
    right: auto;
    left: 0;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 3rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    padding: 0.7rem 0.85rem 0.7rem 3.2rem;
    border-radius: 1rem 0.35rem;
    background: #fff;
    color: var(--lou-ink);
    border: 1px solid var(--lou-line);
    box-shadow: none;
    white-space: normal;
  }

  .lou-slat:hover .lou-slat-panel,
  .lou-slat:focus-visible .lou-slat-panel {
    transform: none;
  }

  .lou-slat.is-active .lou-slat-panel {
    background: var(--lou-ink);
    color: #fff;
    border-color: var(--lou-ink);
  }

  .lou-slat.is-active .lou-slat-panel small {
    color: rgba(255, 255, 255, 0.68);
  }

  .lou-slat.is-hot .lou-slat-panel {
    border-color: rgba(228, 87, 46, 0.35);
  }

  .lou-slat-badge {
    top: 0.35rem;
    right: 0.45rem;
    left: auto;
  }

  body.a76-store:not(.louver-desk) .page-main {
    padding-right: 0;
    padding-bottom: 5.25rem;
  }

  body.a76-store:not(.louver-desk) .a76-header .container {
    padding-right: clamp(1rem, 3vw, 1.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lou-slat,
  .lou-blind-toggle::before {
    animation: none !important;
  }

  .lou-slat,
  .lou-slat-edge,
  .lou-slat-panel,
  .lou-blind-stack,
  .lou-blind-toggle {
    transition: none !important;
  }
}