/* rr-wishlist — rebuilt to the DEMO's dialog, not an invented one.

   Measured on rockrush.com (Wishlist Hero, a MUI dialog):
     dialog    960px wide, #fff, border-radius 4px, padding 0
     backdrop  rgba(0,0,0,.5)
     header    72px tall, padding 16px 24px, heart 30px + h5 title 30px/400 rgba(0,0,0,.87)
     content   padding 16px 24px
     empty     10px/400 rgba(0,0,0,.54), centred
     actions   43px, padding 8px, SHARE WISHLIST on the right
   Item cards, the login line and the ADD ALL / REMOVE ALL row are taken from the
   demo's populated state. */

.rr-wl[hidden] { display: none !important; }

.rr-wl {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: Figtree, Helvetica, Arial, sans-serif;
}

.rr-wl__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}

.rr-wl__dialog {
  position: relative;
  width: 960px;
  max-width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14);
  color: rgba(0, 0, 0, .87);
}

/* header */
.rr-wl__head {
  flex: 0 0 auto;
  min-height: 72px;
  box-sizing: border-box;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rr-wl__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
  color: rgba(0, 0, 0, .87);
}

.rr-wl__close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: rgba(0, 0, 0, .87);
  cursor: pointer;
  padding: 8px;
}

/* content */
.rr-wl__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px;
}

.rr-wl__login {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 15px;
  color: rgba(0, 0, 0, .7);
}
.rr-wl__login a {
  color: #1a73e8;
  text-decoration: none;
  letter-spacing: .5px;
}
.rr-wl__login a:hover { text-decoration: underline; }

.rr-wl__empty {
  margin: 0;
  padding: 70px 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .09px;
  color: rgba(0, 0, 0, .54);
}

/* item cards — the demo lays them out as small bordered tiles */
.rr-wl__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(133px, 1fr));
  gap: 16px;
}

.rr-wl__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.rr-wl__name {
  font-size: 13px;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .87);
  text-decoration: none;
}
.rr-wl__name:hover { text-decoration: underline; }

.rr-wl__date {
  font-size: 10px;
  color: rgba(0, 0, 0, .54);
}

.rr-wl__thumb {
  display: block;
  margin: 6px 0;
  aspect-ratio: 1 / 1;
  background: #f3f1ed;
}
.rr-wl__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.rr-wl__noimg { display: block; width: 100%; height: 100%; }

.rr-wl__price {
  font-size: 15px;
  color: #1a73e8;
}

.rr-wl__cardfoot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rr-wl__atc {
  flex: 1 1 auto;
  padding: 10px 6px;
  background: #16171b;
  border: 0;
  color: #fff;
  font-size: 11px;
  letter-spacing: .4px;
  cursor: pointer;
}
.rr-wl__atc[disabled] { opacity: .6; cursor: default; }

.rr-wl__remove {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: rgba(0, 0, 0, .6);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}
.rr-wl__remove:hover { color: #16171b; }

/* bulk row */
.rr-wl__bulk {
  display: flex;
  gap: 24px;
  margin-top: 22px;
}
.rr-wl__bulk[hidden] { display: none; }
.rr-wl__bulk button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(0, 0, 0, .8);
  cursor: pointer;
}
.rr-wl__bulk button:hover { text-decoration: underline; }

/* actions footer */
.rr-wl__actions {
  flex: 0 0 auto;
  min-height: 43px;
  box-sizing: border-box;
  padding: 8px 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #eee;
}

.rr-wl__share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  font-size: 13px;
  letter-spacing: .6px;
  color: rgba(0, 0, 0, .87);
  cursor: pointer;
  padding: 0;
}
.rr-wl__share:hover { text-decoration: underline; }

/* count on the header heart */
.wishlist-hero-header-icon { position: relative; }
.rr-wl__badge:not(:empty) {
  position: absolute;
  top: -2px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #16171b;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

html.rr-wl-open { overflow: hidden; }

@media screen and (max-width: 749px) {
  .rr-wl { padding: 12px; }
  .rr-wl__dialog { max-height: 90vh; }
  .rr-wl__head { min-height: 60px; padding: 12px 16px; }
  .rr-wl__title { font-size: 22px; }
  .rr-wl__body { padding: 12px 16px; }
  .rr-wl__list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .rr-wl__bulk { flex-direction: column; gap: 10px; }
}

/* ---- "Product added to wishlist successfully" snackbar -------------------
   Rebuilt from the demo's MUI Snackbar (Wishlist Hero), not invented. Measured on
   rockrush.com and read off the app's own injected rules:

     wrapper   .MuiSnackbar-anchorOriginBottomRight — fixed, bottom 24, right 24, z 1400
     card      .jss1  max-width 300, max-height 140; radius 4; #fff
     header    .jss3  color #fff, padding 0 8px, font-size 12px; bg #000 (inline)
     title     .jss6  12px, weight normal, line-height 1.4em
     close     .jss2  padding 10px 4px 4px
     content   display flex, align-items center, padding-bottom 0
     thumb     .jss7  55x55, max 55x50, background contain / center
     name      .jss9  padding-left 5px
     view      .jss4  12px, margin-left auto, underlined

   Shown on ADD only — a removal is silent on the demo — and auto-hides after 4s
   (measured lifetime ~4.2s including the enter/exit transitions). */

/* 2026-09-17 — MOVED OFF THE BOTTOM-RIGHT CORNER (user's call).
   The demo anchors this bottom-right, and so did we, but that corner is already the busiest part of
   this storefront: the chat launcher sits there, and more is going in. Two fixed things in one
   corner do not queue — they stack on top of each other.

   Top-right instead, tucked under the sticky header. It is the emptiest corner on every template,
   it is where the wishlist icon itself lives in the header, so the confirmation appears beside the
   control you just pressed, and it leaves BOTH bottom corners free (chat on the right, the Call Us
   pill on the left). Anchored to --header-height, which the theme already publishes on :root, so it
   follows the header instead of guessing at 118px. The scale-in origin moves with it. */
.rr-wlsnack {
  position: fixed;
  right: 24px;
  top: calc(var(--header-height, 118px) + 16px);
  z-index: 1400;
  width: 300px;
  max-width: calc(100vw - 48px);
  opacity: 0;
  transform: scale(.75);
  transform-origin: top right;
  transition: opacity 225ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.rr-wlsnack.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rr-wlsnack__card {
  max-height: 140px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
  color: rgba(0, 0, 0, .87);
  font-family: Figtree, Helvetica, Arial, sans-serif;
}

.rr-wlsnack__head {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #000;
  color: #fff;
}

.rr-wlsnack__title {
  flex: 1 1 auto;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4em;
}

.rr-wlsnack__close {
  flex: 0 0 auto;
  padding: 0 4px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.rr-wlsnack__body {
  display: flex;
  align-items: center;
  padding: 16px 16px 0;
}

.rr-wlsnack__thumb {
  flex: 0 0 55px;
  display: block;
  width: 55px;
  height: 55px;
  max-width: 55px;
  max-height: 50px;
  background-color: #f3f1ed;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* rgb(0,0,238) is the demo's own colour here — the app leaves this link unstyled, so
   it renders in the browser's default blue. Copied deliberately, not a slip. */
.rr-wlsnack__name {
  padding-left: 5px;
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgb(0, 0, 238);
  text-decoration: none;
}
.rr-wlsnack__name:hover { text-decoration: underline; }

.rr-wlsnack__view {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, .87);
  text-decoration: underline;
  white-space: nowrap;
}