.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);
}
.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;
}
.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);
}
.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; }
.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; }
.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; }
.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; }
}
.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;
}
.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;
}