/* JIARON default theme — page chrome: announcement bar, header, nav,
   mega menu, mobile nav, drawers, overlay, footer. */

/* ============================================================
   Top Bar (Unified Utility & Announcement)
   ============================================================ */
.jr-topbar {
  background: var(--jr-surface-muted);
  border-bottom: 1px solid var(--jr-line);
  font-size: var(--jr-text-xs);
  color: var(--jr-muted);
}

.jr-topbar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.5rem 0;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .jr-topbar__inner {
    flex-direction: row;
  }
}

.jr-topbar__announce {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  text-align: center;
}

@media (min-width: 768px) {
  .jr-topbar__announce {
    text-align: left;
  }
}

/* Animated presence dot beside announcement text */
.jr-topbar__announce-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--jr-primary);
  animation: jr-pulse-dot 2.2s ease-in-out infinite;
}

@keyframes jr-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

.jr-topbar__announce-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: var(--jr-primary);
  font-weight: 700;
  margin-left: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity var(--jr-dur-fast) var(--jr-ease);
}

.jr-topbar__announce-cta:hover {
  opacity: 0.8;
}

/* Pill chips for utility links */
.jr-topbar__utility {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  justify-content: center;
}

.jr-topbar__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.7rem;
  border-radius: var(--jr-r-pill);
  border: 1px solid var(--jr-line);
  background: transparent;
  color: var(--jr-muted);
  text-decoration: none;
  font-size: var(--jr-text-xs);
  font-weight: 500;
  transition:
    border-color var(--jr-dur-fast) var(--jr-ease),
    color        var(--jr-dur-fast) var(--jr-ease),
    background   var(--jr-dur-fast) var(--jr-ease);
}

.jr-topbar__chip:hover,
.jr-topbar__chip:focus-visible {
  border-color: var(--jr-primary);
  color: var(--jr-primary);
  background: var(--jr-primary-veil);
  outline: none;
}

/* ============================================================
   Header
   ============================================================ */
.jr-header {
  position: relative;
  z-index: var(--jr-z-header);
  background: var(--jr-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.jr-header__main-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1.25rem 0;
}

@media (min-width: 1024px) {
  .jr-header__main-inner {
    grid-template-columns: auto 1fr auto;
  }
}

.jr-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--jr-ink);
  min-width: 0;
}

.jr-brand:hover {
  color: var(--jr-ink);
}

.jr-brand__logo {
  height: 2.25rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  flex-shrink: 0;
}

.jr-brand__name {
  font-family: var(--jr-font-display);
  font-weight: 700;
  font-size: clamp(1rem, 3.5vw, 1.35rem);
  letter-spacing: var(--jr-tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Search ---------- */
.jr-search {
  display: none;
  flex: 0 1 760px;
  width: 100%;
  max-width: 760px;
  align-items: stretch;
  min-width: 0;
  position: relative;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .jr-search {
    display: flex;
  }
}

.jr-search--mobile,
.jr-search--shop {
  display: flex;
  width: 100%;
}

.jr-search--shop {
  margin-bottom: 1.25rem;
}

.jr-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.jr-search__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1.5px solid var(--jr-line);
  border-right: 0;
  border-radius: var(--jr-r-pill) 0 0 var(--jr-r-pill);
  padding: 0.72rem 1.25rem;
  font-size: var(--jr-text-sm);
  background: var(--jr-white);
  color: var(--jr-ink);
  transition: border-color var(--jr-dur-fast) var(--jr-ease);
}

.jr-search__input:focus {
  outline: none;
  position: relative;
  z-index: 1;
}

.jr-search:focus-within .jr-search__input,
.jr-search:focus-within .jr-search__btn {
  border-color: var(--jr-primary);
}

/* Focus glow ring: desktop search only — the pill border-radius on the form
   causes a large circular visual artifact on mobile, so we exclude it. */
@media (min-width: 900px) {
  .jr-search:focus-within:not(.jr-search--mobile) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jr-primary) 18%, transparent);
    border-radius: var(--jr-r-pill);
  }
}

.jr-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1.5px solid var(--jr-primary);
  border-left: 0;
  background: var(--jr-primary);
  color: var(--jr-on-primary);
  border-radius: 0 var(--jr-r-pill) var(--jr-r-pill) 0;
  padding: 0.72rem 1.4rem;
  font-size: var(--jr-text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--jr-dur-fast) var(--jr-ease),
    border-color var(--jr-dur-fast) var(--jr-ease),
    box-shadow var(--jr-dur-fast) var(--jr-ease);
}

.jr-search__btn:hover {
  background: var(--jr-primary-dark);
  border-color: var(--jr-primary-dark);
  color: var(--jr-on-primary);
  box-shadow: var(--jr-shadow-primary);
}

.jr-search__btn-label {
  display: none;
}

.jr-search__suggest {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: var(--jr-z-suggest);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--jr-white);
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-r-media);
  box-shadow: var(--jr-z12);
  max-height: 24rem;
  overflow: auto;
}

.jr-search__suggest[hidden] {
  display: none !important;
}

.jr-search__hit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  text-decoration: none;
  color: var(--jr-ink);
}

.jr-search__hit:hover,
.jr-search__hit:focus {
  background: var(--jr-primary-veil);
  color: var(--jr-ink);
  outline: none;
}

.jr-search__suggest [role="option"][aria-selected="true"] .jr-search__hit {
  background: var(--jr-primary-veil);
  color: var(--jr-ink);
}

.jr-search__empty {
  padding: 0.75rem 0.9rem;
  color: var(--jr-muted);
  font-size: var(--jr-text-sm);
}

.jr-search__thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--jr-r-sm);
  object-fit: contain;
  background: var(--jr-plate);
  flex-shrink: 0;
}

.jr-search__thumb--empty {
  display: block;
  border: 1px solid var(--jr-line);
}

.jr-search__hit-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.jr-search__hit-name {
  font-weight: 600;
  font-size: var(--jr-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-search__hit-price {
  font-size: var(--jr-text-xs);
  color: var(--jr-muted);
}

/* ---------- Header actions ---------- */
.jr-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  justify-self: end;
}

.jr-header__action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  color: var(--jr-ink);
  background: none;
  border: 0;
  border-radius: var(--jr-r-md);
  cursor: pointer;
  transition:
    color      var(--jr-dur-fast) var(--jr-ease),
    background var(--jr-dur-fast) var(--jr-ease),
    transform  var(--jr-dur-fast) var(--jr-ease);
}

.jr-header__action:hover {
  color: var(--jr-primary);
  background: var(--jr-primary-veil);
  transform: translateY(-2px);
}

/* Cart action — filled pill CTA */
.jr-header__action--cart {
  background: var(--jr-primary);
  color: var(--jr-on-primary);
  border-radius: var(--jr-r-pill);
  padding: 0.55rem 1rem;
  gap: 0.3rem;
  flex-direction: row;
}

.jr-header__action--cart:hover {
  background: var(--jr-primary-dark);
  color: var(--jr-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--jr-shadow-primary);
}

.jr-header__action--cart .jr-cart-badge {
  position: static;
  top: unset;
  left: unset;
  margin: 0;
  background: rgba(255,255,255,0.25);
  color: var(--jr-on-primary);
  box-shadow: none;
}

.jr-header__action-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: center;
  min-width: 2.5rem;
}

.jr-header__action-text small {
  display: none;
}

.jr-header__action-text strong {
  font-size: var(--jr-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 1400px) {
  .jr-header__action-text {
    display: flex;
  }
}

.jr-cart-badge {
  display: none;
  position: absolute;
  top: 0.15rem;
  left: 55%;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: var(--jr-r-pill);
  background: var(--jr-error);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--jr-white);
  pointer-events: none;
}

.jr-cart-badge.is-visible {
  display: block;
}

.jr-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--jr-line);
  background: var(--jr-white);
  border-radius: var(--jr-r-pill);
  padding: 0;
  color: var(--jr-ink);
  cursor: pointer;
  transition:
    border-color var(--jr-dur-fast) var(--jr-ease),
    color        var(--jr-dur-fast) var(--jr-ease);
}

.jr-menu-btn:hover {
  border-color: var(--jr-primary);
  color: var(--jr-primary);
}

/* Mobile hamburger — larger tap target, no border */
.jr-menu-btn--mobile-left {
  border: none;
  background: transparent;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.4rem;
  border-radius: var(--jr-r-md);
  transition: background var(--jr-dur-fast) var(--jr-ease);
}

.jr-menu-btn--mobile-left:hover {
  background: var(--jr-primary-veil);
  border-color: transparent;
  color: var(--jr-primary);
}

/* ============================================================
   Nav row (sticky)
   ============================================================ */
.jr-header__nav {
  /* Containing block for the absolutely positioned mega panel. */
  position: relative;
  border-top: 1px solid var(--jr-line);
  border-bottom: 1px solid var(--jr-line);
  background: var(--jr-white);
}

.jr-header__nav.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--jr-z-header);
  border-top-color: transparent;
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--jr-white) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    0 1px 0 var(--jr-line),
    0 12px 28px -10px rgba(15, 23, 42, 0.14),
    0 2px 6px -2px rgba(15, 23, 42, 0.06);
  animation: jr-fade-down 300ms var(--jr-ease);
}

.jr-header__nav-inner {
  display: none;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  position: relative;
}

@media (min-width: 1024px) {
  .jr-header__nav-inner {
    display: flex;
  }
}

.jr-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  font-size: var(--jr-text-sm);
  font-weight: 500;
}

/* Classic layout nav row is centered and takes remaining space */
.jr-header__nav-inner > .jr-nav:not(.jr-nav--cats):not(.jr-nav--utility) {
  flex: 1;
  justify-content: center;
}

/* Base reset — keeps link colour / text-decoration correct for ALL nav anchors
   (including category dropdown links which have their own layout rules). */
.jr-nav a {
  text-decoration: none;
  color: var(--jr-ink-2);
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

/* ── Animated-underline nav links ────────────────────────────────────────────
   Scoped to [data-jr-nav-link] so the category tab links (.jr-nav__cat-link)
   in the modern layout are NOT affected. This gives a clean sliding indicator
   instead of the old pill-background hover which looked dated. */
.jr-nav [data-jr-nav-link] {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0.1rem;
  position: relative;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--jr-ink-2);
  text-decoration: none;
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

/* The sliding underline indicator */
.jr-nav [data-jr-nav-link]::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--jr-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms var(--jr-ease);
}

.jr-nav [data-jr-nav-link]:hover {
  color: var(--jr-primary);
}

.jr-nav [data-jr-nav-link]:focus-visible {
  outline: 2px solid var(--jr-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.jr-nav [data-jr-nav-link]:hover::after,
.jr-nav [data-jr-nav-link][aria-current="page"]::after {
  transform: scaleX(1);
}

.jr-nav [data-jr-nav-link][aria-current="page"] {
  color: var(--jr-primary);
  font-weight: 600;
}

.jr-nav--utility {
  font-size: var(--jr-text-xs);
  color: var(--jr-muted);
  flex-shrink: 0;
}

.jr-nav__spacer {
  margin-left: auto;
}

/* ---------- Sticky nav brand / actions (only visible once stuck) ---------- */
.jr-header__nav-brand {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--jr-ink);
}

.jr-header__nav-brand img {
  height: 1.75rem;
  width: auto;
  max-width: 6rem;
  object-fit: contain;
}

.jr-header__nav-brand span {
  font-family: var(--jr-font-display);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.jr-header__nav.is-stuck .jr-header__nav-brand {
  display: flex;
}

.jr-header__nav-actions {
  display: none;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
  flex-shrink: 0;
}

.jr-header__nav.is-stuck .jr-header__nav-actions {
  display: flex;
}

.jr-header__nav-search-toggle {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0.35rem;
  color: var(--jr-ink);
  cursor: pointer;
}

.jr-header__nav-search-toggle:hover {
  color: var(--jr-primary);
}

.jr-header__nav-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--jr-ink);
  padding: 0.35rem;
  text-decoration: none;
}

.jr-header__nav-action:hover {
  color: var(--jr-primary);
}

.jr-header__nav-inner .jr-search--sticky {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--jr-z-mega);
  padding: 0.85rem 1.25rem;
  background: var(--jr-white);
  border: 1px solid var(--jr-line);
  border-top: 0;
  box-shadow: var(--jr-z12);
}

.jr-header__nav.is-search-open .jr-header__nav-inner .jr-search--sticky {
  display: flex;
}

/* ---------- Category links (nav row) ---------- */
.jr-nav--cats {
  gap: clamp(2rem, 3vw, 3rem);
  flex: 1 1 auto;
  min-width: 0;
  /* overflow-x: auto; */
  /* overflow-y: visible; */
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.jr-nav--cats::-webkit-scrollbar {
  display: none;
}

.jr-nav__cat {
  flex-shrink: 0;
}

.jr-nav__cat {
  position: relative;
}

.jr-nav__cat-link {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 0;
  text-decoration: none;
  color: var(--jr-ink);
  font-size: var(--jr-text-sm);
  font-weight: 600;
}

.jr-nav__cat-link:hover,
.jr-nav__cat:focus-within .jr-nav__cat-link {
  color: var(--jr-primary);
}

.jr-nav__cat-link.is-sale {
  color: var(--jr-error);
}

.jr-nav__cat-panel {
  position: absolute;
  top: 100%;
  /* left: 50%; */
  left: 0;
  z-index: var(--jr-z-mega);
  min-width: 22rem;
  max-width: calc(100vw - 2rem);
  padding: 1.25rem;
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-r-media);
  background: var(--jr-white);
  box-shadow: var(--jr-z24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* transform: translateX(-50%) translateY(0.5rem); */
  transition:
    opacity var(--jr-dur) var(--jr-ease),
    transform var(--jr-dur) var(--jr-ease),
    visibility var(--jr-dur) var(--jr-ease);
}

.jr-nav__cat:hover .jr-nav__cat-panel,
.jr-nav__cat:focus-within .jr-nav__cat-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Modern Category Cascading Flyout (Mistral style) */
.jr-nav__cat-panel--cascading {
  padding: 0.5rem;
  min-width: 16rem;
  max-width: none;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jr-nav__cascade-item {
  position: relative; /* Anchor for subpanels */
  list-style: none;
}

.jr-nav__cascade-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  font-size: var(--jr-text-sm);
  font-weight: 500;
  color: var(--jr-ink);
  text-decoration: none;
  border-radius: var(--jr-r-sm);
  transition: background var(--jr-dur-fast) var(--jr-ease), color var(--jr-dur-fast) var(--jr-ease);
}

.jr-nav__cascade-link svg {
  opacity: 0.4;
  transition: opacity var(--jr-dur-fast) var(--jr-ease);
}

.jr-nav__cascade-item:hover > .jr-nav__cascade-link,
.jr-nav__cascade-item:focus-within > .jr-nav__cascade-link {
  background: color-mix(in srgb, var(--jr-primary) 8%, white);
  color: var(--jr-primary);
  font-weight: 600;
}

.jr-nav__cascade-item:hover > .jr-nav__cascade-link svg,
.jr-nav__cascade-item:focus-within > .jr-nav__cascade-link svg {
  opacity: 0.8;
}

/* Sub-panels (Depth 3+) */
.jr-nav__cascade-subpanel {
  position: absolute;
  top: -0.5rem; /* Align with parent panel padding */
  left: 100%;
  margin-left: 0.5rem;
  min-width: 16rem;
  padding: 0.5rem;
  list-style: none;
  background: var(--jr-white);
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-r-media);
  box-shadow: var(--jr-z24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-0.5rem);
  transition: opacity var(--jr-dur) var(--jr-ease), transform var(--jr-dur) var(--jr-ease), visibility var(--jr-dur) var(--jr-ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jr-nav__cascade-item:hover > .jr-nav__cascade-subpanel,
.jr-nav__cascade-item:focus-within > .jr-nav__cascade-subpanel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* Fallback for the old grid if still used */
.jr-nav__cat-panel-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 1.75rem;
  max-height: min(60vh, 28rem);
  overflow: auto;
  scrollbar-width: thin;
}

.jr-nav__cat-panel-foot {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--jr-line);
}

.jr-nav__cat-panel-foot a {
  font-size: var(--jr-text-sm);
  font-weight: 700;
  color: var(--jr-primary);
  text-decoration: none;
}

.jr-nav__cat-panel-foot a:hover {
  text-decoration: underline;
}

.jr-nav__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--jr-text-sm);
  font-weight: 600;
  color: var(--jr-ink);
  text-decoration: none;
}

/* ---------- Categories mega menu (full / flyout / dropdown) ---------- */
.jr-nav__mega {
  /* position: relative; */
  flex: 0 0 auto;
}

.jr-nav__mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  background: linear-gradient(135deg, var(--jr-primary) 0%, var(--jr-primary-dark) 100%);
  color: var(--jr-on-primary);
  padding: 0.78rem 1.5rem;
  border-radius: var(--jr-r-pill);
  font-size: var(--jr-text-sm);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    transform  var(--jr-dur-fast) var(--jr-ease),
    box-shadow var(--jr-dur-fast) var(--jr-ease),
    background var(--jr-dur-fast) var(--jr-ease);
}

.jr-nav__mega-trigger:hover,
.jr-nav__mega-trigger:focus-visible {
  background: linear-gradient(135deg, var(--jr-primary-dark) 0%, var(--jr-secondary) 100%);
  transform: translateY(-2px);
  box-shadow: var(--jr-shadow-primary);
}

.jr-nav__mega-trigger::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--jr-dur) var(--jr-ease);
}

.jr-nav__mega.is-open .jr-nav__mega-trigger::after {
  transform: rotate(225deg) translateY(1px);
}

.jr-mega-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: var(--jr-z-mega);
  padding: 0;
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-r-media);
  background: var(--jr-white);
  box-shadow: var(--jr-z24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.6rem);
  transition:
    opacity   var(--jr-dur) var(--jr-ease),
    transform var(--jr-dur) var(--jr-ease),
    visibility var(--jr-dur) var(--jr-ease);
}

@keyframes jr-mega-enter {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.jr-nav__mega.is-open .jr-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  animation: jr-mega-enter 220ms var(--jr-ease) both;
}

/* =============================================================
   Full Width Mega Menu
   Multi-column grid, merchant/light palette re-theme
   ============================================================= */
.jr-mega-menu--full {
  left: 0;
  width: 100vw;
  max-width: 100vw;
  border-radius: 0 0 var(--jr-r-media) var(--jr-r-media);
  border: none;
  border-top: 1px solid var(--jr-line);
  background: var(--jr-white);
  color: var(--jr-ink);
  box-shadow: var(--jr-z24);
  margin-left: calc(-50vw + 50%); /* Force full viewport width from relative parent */
}

.jr-mega-menu__inner {
  display: flex;
  flex-direction: column;
  max-width: var(--jr-max, 1440px);
  margin: 0 auto;
  width: 100%;
}

.jr-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem 1.5rem;
  padding: 2.5rem 2rem 3rem;
  overflow: auto;
  scrollbar-width: thin;
}

.jr-mega-menu__foot {
  display: flex;
  justify-content: flex-start;
  padding: 1.1rem 2rem;
  border-top: 1px solid var(--jr-line);
  background: var(--jr-surface-muted);
  border-radius: 0 0 var(--jr-r-media) var(--jr-r-media);
}

.jr-mega-menu__foot a {
  font-size: var(--jr-text-sm);
  font-weight: 600;
  color: var(--jr-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-menu__foot a::after {
  content: '→';
  font-size: 1.1em;
  transition: transform var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-menu__foot a:hover {
  color: var(--jr-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.jr-mega-menu__foot a:hover::after {
  transform: translateX(2px);
}

/* Columns */
.jr-mega-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

/* L1 Header */
.jr-mega-col__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--jr-font-display);
  font-weight: 700;
  font-size: var(--jr-text-sm);
  color: var(--jr-text);
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.jr-mega-col__title::after {
  content: "";
  width: 100%;
  max-width: 1.6rem;
  height: 2px;
  margin-top: 0.25rem;
  border-radius: 999px;
  background: var(--jr-primary);
  opacity: 0.55;
  transition: opacity var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-col__title:hover {
  color: var(--jr-primary);
}

.jr-mega-col__title:hover::after {
  opacity: 1;
}

.jr-mega-col__title small {
  display: none;
}

.jr-mega-col__thumb,
.jr-mega-col__avatar {
  display: none; /* Hide images in this layout to keep it clean */
}

/* L2 items list */
.jr-mega-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-left: 1px solid var(--jr-line);
}

/* L2 items */
.jr-mega-sub__title {
  font-size: var(--jr-text-sm);
  font-weight: 600;
  color: var(--jr-ink);
  text-decoration: none;
  display: block;
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-sub__title:hover {
  color: var(--jr-primary);
}

/* L3+ leaves: a nested list that steps inward at every depth, with a vertical
   guide line, so deep multi-level categories read as real navigation instead of
   a flat ellipsized pile. */
.jr-mega-leaf {
  margin: 0;
  padding: 0.2rem 0 0 0.75rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-left: 1px solid var(--jr-line);
}

.jr-mega-leaf .jr-mega-leaf {
  margin-top: 0.1rem;
  padding-top: 0.1rem;
}

.jr-mega-leaf__item {
  list-style: none;
}

.jr-mega-leaf__link {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.2rem 0.1rem;
  color: var(--jr-muted);
  text-decoration: none;
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-leaf__link:hover {
  color: var(--jr-primary);
}

/* Fallback for any bare leaf anchor that did not get the __link class */
.jr-mega-leaf a {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--jr-muted);
  text-decoration: none;
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-leaf a:hover {
  color: var(--jr-primary);
}

/* "Shop all <name>" directive shown at every expandable parent level */
.jr-mega-leaf__view-all-item {
  list-style: none;
  margin-bottom: 0.15rem;
}

.jr-mega-leaf__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--jr-primary);
  text-decoration: none;
  padding: 0.15rem 0.1rem;
  transition: color var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-leaf__view-all::before {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity var(--jr-dur-fast) var(--jr-ease);
}

.jr-mega-leaf__view-all:hover {
  color: var(--jr-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.jr-mega-leaf__view-all:hover::before {
  opacity: 1;
}

/* Sideways flyout */
.jr-mega-menu--flyout {
  width: auto;
  min-width: 16rem;
  overflow: visible;
}

.jr-mega-flyout {
  position: relative;
  display: flex;
  min-height: 18rem;
}

.jr-mega-flyout__rail {
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  width: 16.5rem;
  max-height: min(70vh, 32rem);
  overflow: auto;
  scrollbar-width: thin;
}

.jr-mega-flyout__item {
  position: static;
}

.jr-mega-flyout__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border-radius: var(--jr-r-sm);
  color: var(--jr-ink);
  text-decoration: none;
  font-size: var(--jr-text-sm);
  font-weight: 600;
}

.jr-mega-flyout__link span {
  flex: 1;
  min-width: 0;
}

.jr-mega-flyout__link svg {
  flex-shrink: 0;
  opacity: 0.55;
}

.jr-mega-flyout__item.is-active > .jr-mega-flyout__link,
.jr-mega-flyout__link:hover,
.jr-mega-flyout__link:focus-visible {
  background: color-mix(in srgb, var(--jr-primary) 10%, white);
  color: var(--jr-primary);
}

.jr-mega-flyout__thumb {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  object-fit: contain;
  background: var(--jr-plate);
  flex-shrink: 0;
}

.jr-mega-flyout__panel {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  display: none;
  width: min(36rem, calc(100vw - 20rem));
  min-height: 100%;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--jr-line);
  border-radius: 0 var(--jr-r-media) var(--jr-r-media) 0;
  background: var(--jr-white);
  box-shadow: var(--jr-z12);
}

.jr-mega-flyout__panel.is-active {
  display: block;
}

.jr-mega-flyout__panel-head {
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--jr-line);
}

.jr-mega-flyout__panel-head a {
  font-size: var(--jr-text-sm);
  font-weight: 700;
  color: var(--jr-primary);
  text-decoration: none;
}

/* ---------- Cascading Level 2 & Level 3 ---------- */
.jr-mega-flyout__level2-container {
  width: 100%;
}

.jr-mega-flyout__rail--level2 {
  width: 100%;
  padding: 0;
  max-height: none;
  overflow: visible;
}

.jr-mega-flyout__panel--level3 {
  position: absolute;
  top: -1px;
  left: calc(100% - 1px);
  display: none;
  width: min(32rem, calc(100vw - 36rem));
  min-height: calc(100% + 2px);
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--jr-line);
  border-radius: 0 var(--jr-r-media) var(--jr-r-media) 0;
  background: var(--jr-white);
  box-shadow: var(--jr-z12);
  z-index: 2;
}

.jr-mega-flyout__panel--level3.is-active {
  display: block;
}

.jr-mega-flyout__level3-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.jr-mega-flyout__level3-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  text-decoration: none;
  color: var(--jr-ink);
  border-radius: var(--jr-r-sm);
}

.jr-mega-flyout__level3-item:hover {
  background: color-mix(in srgb, var(--jr-primary) 10%, white);
  color: var(--jr-primary);
}

.jr-mega-flyout__level3-thumb,
.jr-mega-flyout__level3-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--jr-r-sm);
  background: var(--jr-plate);
  object-fit: contain;
  flex-shrink: 0;
}

.jr-mega-flyout__level3-avatar {
  display: grid;
  place-items: center;
  color: var(--jr-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.jr-mega-flyout__level3-name {
  font-size: var(--jr-text-sm);
  font-weight: 500;
}

/* A leaf list nested inside another leaf list (depth 4+) picks up the same indent step
   again, so a deep tree reads as increasingly nested rather than flattening out. */
.jr-mega-flyout__leaves .jr-mega-flyout__leaves,
.jr-mega-drop__leaf .jr-mega-drop__leaf,
.jr-mega-leaf .jr-mega-leaf {
  border-left: 1px solid var(--jr-line);
}

.jr-mega-flyout__leaves a {
  font-size: var(--jr-text-xs);
  color: var(--jr-muted);
  text-decoration: none;
}

.jr-mega-flyout__col-title:hover,
.jr-mega-flyout__leaves a:hover {
  color: var(--jr-primary);
}




/* Compact nested dropdown */
.jr-mega-menu--dropdown {
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(70vh, 28rem);
  overflow: auto;
  scrollbar-width: thin;
}

.jr-mega-drop {
  margin: 0;
  padding: 0.4rem;
  list-style: none;
}

.jr-mega-drop__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.jr-mega-drop__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border-radius: var(--jr-r-sm);
  color: var(--jr-ink);
  font-size: var(--jr-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.jr-mega-drop__link:hover,
.jr-mega-drop__link:focus-visible {
  background: color-mix(in srgb, var(--jr-primary) 10%, white);
  color: var(--jr-primary);
}

.jr-mega-drop__thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  object-fit: contain;
  background: var(--jr-plate);
  flex-shrink: 0;
}

.jr-mega-drop__toggle {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jr-muted);
  cursor: pointer;
}

.jr-mega-drop__toggle:hover,
.jr-mega-drop__item.is-open > .jr-mega-drop__row .jr-mega-drop__toggle {
  background: var(--jr-plate);
  color: var(--jr-ink);
}

.jr-mega-drop__item.is-open > .jr-mega-drop__row .jr-mega-drop__toggle svg {
  transform: rotate(180deg);
}

.jr-mega-drop__sub {
  margin: 0 0 0.35rem;
  padding: 0 0.35rem 0.35rem 2.35rem;
  list-style: none;
}

.jr-mega-drop__sub > li > a {
  display: block;
  padding: 0.35rem 0.4rem;
  border-radius: var(--jr-r-sm);
  color: var(--jr-ink-2);
  font-size: var(--jr-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.jr-mega-drop__leaf {
  margin: 0.15rem 0 0.35rem;
  padding: 0 0 0 0.75rem;
  list-style: none;
  border-left: 1px solid var(--jr-line);
}

.jr-mega-drop__leaf a {
  display: block;
  padding: 0.25rem 0.4rem;
  color: var(--jr-muted);
  font-size: var(--jr-text-xs);
  text-decoration: none;
}

.jr-mega-drop__sub a:hover,
.jr-mega-drop__leaf a:hover {
  color: var(--jr-primary);
}

@media (max-width: 1023px) {
  .jr-nav__mega {
    display: none;
  }
}

/* ============================================================
   Mobile nav (Tabs & Accordion)
   ============================================================ */
.jr-nav-mobile {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: calc(100dvh - 60px);
  /* Fully opaque: a translucent background lets the logo image above
     bleed through as a large circle artifact, so we use solid white. */
  background: var(--jr-white);
  overflow-y: auto;
  padding: 1.25rem;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.12), 0 1px 0 var(--jr-line);
  border-top: 1px solid var(--jr-line);
  z-index: var(--jr-z-header);
}

@keyframes jr-mobile-enter {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.jr-nav-mobile.is-open {
  display: flex;
  animation: jr-mobile-enter 260ms var(--jr-ease) both;
}

@media (min-width: 1024px) {
  .jr-nav-mobile {
    display: none !important;
  }
}

/* Tabs Toggle */
.jr-mobile-tab-radio {
  display: none;
}

.jr-mobile-tab-labels {
  display: flex;
  background: var(--jr-gray-100);
  border-radius: var(--jr-r-pill);
  padding: 0.25rem;
  margin-bottom: 1.25rem;
}

.jr-mobile-tab-label {
  flex: 1;
  text-align: center;
  padding: 0.55rem 1rem;
  font-size: var(--jr-text-sm);
  font-weight: 600;
  color: var(--jr-muted);
  border-radius: var(--jr-r-pill);
  cursor: pointer;
  transition:
    background var(--jr-dur-fast) var(--jr-ease),
    color      var(--jr-dur-fast) var(--jr-ease),
    box-shadow var(--jr-dur-fast) var(--jr-ease);
}

#tab_cats:checked ~ .jr-mobile-tab-labels [for="tab_cats"],
#tab_menu:checked ~ .jr-mobile-tab-labels [for="tab_menu"] {
  background: var(--jr-primary);
  color: var(--jr-on-primary);
  box-shadow: var(--jr-shadow-primary);
}

.jr-mobile-tab-content {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
}

#tab_cats:checked ~ #content_cats,
#tab_menu:checked ~ #content_menu {
  display: flex;
}

/* Categories Tab */
.jr-mobile-cats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jr-mobile-cat {
  border-bottom: 1px solid var(--jr-line);
}

.jr-mobile-cat:last-child {
  border-bottom: none;
}

.jr-mobile-cat__link,
.jr-mobile-cat__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  font-size: var(--jr-text-base);
  font-weight: 600;
  color: var(--jr-ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.jr-mobile-cat__summary::-webkit-details-marker {
  display: none;
}

.jr-mobile-cat__details[open] .jr-mobile-cat__summary {
  color: var(--jr-primary);
}

.jr-mobile-cat__details[open] .jr-mobile-cat__summary svg {
  transform: rotate(180deg);
}

.jr-mobile-cat__sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 1rem 1rem;
  gap: 0.6rem;
}

.jr-mobile-cat__view-all {
  font-weight: 700;
  color: var(--jr-primary);
  text-decoration: none;
}

.jr-mobile-cat__sub a:not(.jr-mobile-cat__view-all) {
  color: var(--jr-ink-2);
  text-decoration: none;
}

/* Menu Tab */
#content_menu a {
  text-decoration: none;
  padding: 0.65rem 0;
  color: var(--jr-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--jr-line);
}

#content_menu a:last-child {
  border-bottom: none;
}

/* Bottom Actions — horizontal chip row */
.jr-mobile-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--jr-line);
}

.jr-mobile-utility-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: var(--jr-r-pill);
  border: 1px solid var(--jr-line);
  font-size: var(--jr-text-sm);
  font-weight: 500;
  color: var(--jr-ink-2);
  text-decoration: none;
  min-height: 2.5rem;
  transition:
    border-color var(--jr-dur-fast) var(--jr-ease),
    color        var(--jr-dur-fast) var(--jr-ease),
    background   var(--jr-dur-fast) var(--jr-ease);
}

.jr-mobile-utility-link:hover {
  border-color: var(--jr-primary);
  color: var(--jr-primary);
  background: var(--jr-primary-veil);
}

/* Mobile Header Adjustments */
@media (max-width: 899px) {
  .jr-header__main-inner {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding: 0.75rem 0;
  }

  .jr-brand {
    justify-content: center;
  }

  .jr-header__main-inner .jr-search {
    display: none !important;
  }

  .jr-header__actions {
    gap: 0.5rem;
  }

  .jr-header__action-text {
    display: none;
  }
  
  .jr-header__actions .jr-header__action[aria-label="Wishlist"],
  .jr-header__actions .jr-header__action[href^="/signin"] {
    display: none !important;
  }
}

@media (min-width: 900px) {
  .jr-search {
    display: flex;
  }

  .jr-menu-btn--mobile-left,
  .jr-header__action--mobile-search {
    display: none !important;
  }
}

/* ============================================================
   Full-page Search Modal
   Appears when the mobile search icon (or any [data-jr-search-open])
   is tapped. The modal sits outside the header in the DOM so it is
   never clipped by any header stacking context.
   ============================================================ */

.jr-search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;        /* above drawers (100), toast (120) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* [hidden] attribute takes priority via specificity */
.jr-search-modal[hidden] {
  display: none !important;
}

/* Entrance — panel drops in from top */
@keyframes jr-sm-enter {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Semi-opaque backdrop behind the panel */
.jr-search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* White panel at the top */
.jr-search-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--jr-white);
  padding: 1rem 0;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.22);
  animation: jr-sm-enter 220ms var(--jr-ease) both;
}

/* Inner row: search form + close button */
.jr-search-modal__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The search form inside the modal stretches to fill space */
.jr-search-modal__form {
  display: flex;
  flex: 1;
  align-items: stretch;
  min-width: 0;
}

/* The field wrapper — needs relative positioning for the suggest list */
.jr-search-modal__field {
  flex: 1;
  min-width: 0;
}

/* Larger input for the modal */
.jr-search-modal__input {
  padding: 0.9rem 1.4rem;
  font-size: var(--jr-text-base);
  font-weight: 400;
  border-radius: var(--jr-r-pill) 0 0 var(--jr-r-pill);
}

/* Suggest list positions below the field row */
.jr-search-modal__suggest {
  top: calc(100% + 0.5rem);
  max-height: 65vh;
  overflow-y: auto;
}

/* Bigger submit button */
.jr-search-modal__btn {
  padding: 0.9rem 1.6rem;
  font-size: var(--jr-text-base);
}

/* Close button */
.jr-search-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  border: 1.5px solid var(--jr-line);
  border-radius: var(--jr-r-md);
  background: transparent;
  color: var(--jr-ink);
  cursor: pointer;
  transition:
    background    var(--jr-dur-fast) var(--jr-ease),
    border-color  var(--jr-dur-fast) var(--jr-ease),
    color         var(--jr-dur-fast) var(--jr-ease);
}

.jr-search-modal__close:hover {
  background: var(--jr-primary-veil);
  border-color: var(--jr-primary);
  color: var(--jr-primary);
}

/* On mobile the modal takes the full header width */
@media (max-width: 899px) {
  .jr-search-modal__input {
    font-size: var(--jr-text-sm);
    padding: 0.8rem 1rem;
  }

  .jr-search-modal__btn {
    padding: 0.8rem 1.1rem;
  }

  .jr-search-modal__btn .jr-search__btn-label {
    display: none;
  }
}

/* ============================================================
   Overlay + drawers
   ============================================================ */
.jr-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--jr-z-overlay);
  background: rgba(22, 28, 36, 0.48);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--jr-dur-drawer) var(--jr-ease-drawer),
    visibility var(--jr-dur-drawer) var(--jr-ease-drawer);
}

.jr-overlay[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

.jr-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--jr-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(100%, 28rem);
  height: 100vh;
  height: 100dvh;
  background: var(--jr-white);
  box-shadow: var(--jr-z-dark);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--jr-dur-drawer) var(--jr-ease-drawer),
    visibility var(--jr-dur-drawer) var(--jr-ease-drawer);
}

.jr-drawer[data-state="open"] {
  transform: none;
  visibility: visible;
}

.jr-drawer--wide {
  width: min(100%, 60rem);
}

/* Floating card treatment on large screens, like the Sellzy reference. */
@media (min-width: 1024px) {
  .jr-drawer--float {
    top: 1.5rem;
    right: 1.35rem;
    height: calc(100vh - 3rem);
    border-radius: var(--jr-r-card);
    overflow: hidden;
  }
}

.jr-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--jr-line);
  flex-shrink: 0;
}

.jr-drawer__title {
  margin: 0;
  font-size: var(--jr-text-lg);
  line-height: var(--jr-text-lg-lh);
}

.jr-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.jr-drawer__foot {
  border-top: 1px solid var(--jr-line);
  padding: 1.25rem 1.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.jr-wishlist-drawer__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
}

.jr-wishlist-drawer__item + .jr-wishlist-drawer__item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--jr-line);
}

.jr-wishlist-drawer__media,
.jr-wishlist-drawer__placeholder {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  overflow: hidden;
  border-radius: var(--jr-r-sm);
  background: var(--jr-gray-100);
}

.jr-wishlist-drawer__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jr-wishlist-drawer__name {
  color: var(--jr-ink);
  font-weight: 600;
  text-decoration: none;
}

.jr-wishlist-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.jr-wishlist-drawer__body {
  min-width: 0;
}

.jr-drawer-cross {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--jr-line);
}

.jr-drawer-cross__title {
  margin: 0 0 0.65rem;
  font-size: var(--jr-text-sm);
  font-weight: 700;
  color: var(--jr-ink);
}

.jr-drawer-cross__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.jr-drawer-cross__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.jr-drawer-cross__item:hover strong {
  color: var(--jr-primary);
}

.jr-drawer-cross__media,
.jr-drawer-cross__ph {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  overflow: hidden;
  border-radius: var(--jr-r-sm);
  background: var(--jr-gray-100);
}

.jr-drawer-cross__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jr-drawer-cross__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.jr-drawer-cross__meta strong {
  font-size: var(--jr-text-sm);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-drawer-cross__meta span {
  font-size: var(--jr-text-xs);
  color: var(--jr-muted);
}

.jr-wishlist-drawer__name:hover {
  color: var(--jr-primary);
}

.jr-wishlist-drawer__price {
  margin: 0.35rem 0 0;
  color: var(--jr-primary);
  font-weight: 700;
}

/* ============================================================
   Footer (Sellzy dark chrome)
   ============================================================ */
.jr-footer {
  --jr-footer-bg: var(--jr-secondary);
  --jr-footer-fg: var(--jr-on-secondary);
  --jr-footer-bar-bg: var(--jr-secondary-dark);
  margin-top: var(--jr-section-y);
  background: var(--jr-footer-bg);
  color: color-mix(in srgb, var(--jr-footer-fg) 78%, transparent);
  border-top: 0;
}

.jr-footer--brand {
  --jr-footer-bg: var(--jr-primary);
  --jr-footer-fg: var(--jr-on-primary);
  --jr-footer-bar-bg: var(--jr-primary-dark);
}

.jr-footer--light {
  --jr-footer-bg: var(--jr-surface-muted);
  --jr-footer-fg: var(--jr-ink);
  --jr-footer-bar-bg: color-mix(in srgb, var(--jr-surface-muted) 90%, #000);
  border-top: 1px solid var(--jr-line);
}

.jr-footer--dark,
.jr-footer--inherit {
  --jr-footer-bg: var(--jr-secondary);
  --jr-footer-fg: var(--jr-on-secondary);
  --jr-footer-bar-bg: var(--jr-secondary-dark);
}

.jr-footer__grid {
  display: grid;
  gap: 2rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
}

@media (min-width: 640px) {
  .jr-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .jr-footer__grid {
    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

.jr-footer h3,
.jr-footer h4 {
  font-size: var(--jr-text-base);
  margin-bottom: 1rem;
  color: var(--jr-footer-fg);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.jr-footer h3 {
  font-family: var(--jr-font-display);
  font-size: var(--jr-h5-size);
  font-weight: 700;
}

.jr-footer p,
.jr-footer a,
.jr-footer span {
  color: color-mix(in srgb, var(--jr-footer-fg) 72%, transparent);
  font-size: var(--jr-text-sm);
  line-height: var(--jr-text-sm-lh);
}

.jr-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.jr-footer a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.jr-footer a:hover {
  color: var(--jr-footer-fg);
}

.jr-footer__social {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.jr-footer__social .jr-icon-btn {
  background: color-mix(in srgb, var(--jr-footer-fg) 8%, transparent);
  color: var(--jr-footer-fg);
  border: 0;
}

.jr-footer__social .jr-icon-btn:hover {
  background: var(--jr-primary);
  color: var(--jr-on-primary);
}

.jr-footer__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.jr-footer__app {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--jr-r-control);
  background: color-mix(in srgb, var(--jr-footer-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--jr-footer-fg) 14%, transparent);
}

.jr-footer__app img {
  height: 1.75rem;
  width: auto;
  display: block;
}

.jr-footer__bar {
  border-top: 1px solid color-mix(in srgb, var(--jr-footer-fg) 12%, transparent);
  padding: 1.1rem 0;
  background: var(--jr-footer-bar-bg);
  font-size: var(--jr-text-xs);
  line-height: var(--jr-text-xs-lh);
}

.jr-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.jr-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.jr-footer__payments img {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
}

.jr-footer__pay-label {
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--jr-footer-fg) 10%, transparent);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}