/** Shopify CDN: Minification failed

Line 346:14 Unexpected "}"

**/
/* ======================================================================================================================
   SWB v2 - SHORTLIST: hearts on cards and product pages, the header counter, and the shortlist page
   ====================================================================================================================== */
.v2-heart {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94);
  color: rgb(20 20 20 / 0.75);
  box-shadow: 0 4px 12px -6px rgb(20 20 20 / 0.35), 0 0 0 1px rgb(20 20 20 / 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.v2-heart svg { fill: transparent; transition: fill 0.2s ease; }
.v2-heart:hover { transform: scale(1.06); }
.v2-heart.is-on { color: rgb(var(--v2-accent, 255 79 1)); }
.v2-heart.is-on svg { fill: currentColor; }
.v2-heart.is-pop { animation: v2-heartpop 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes v2-heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.v2-heart:focus-visible { outline: 3px solid rgb(var(--v2-accent, 255 79 1)); outline-offset: 2px; }

/* on a card: see ONE PICTURE, FOUR CORNERS at the end of this file for where it sits */
 .v2-heart--card{ position: absolute; top: 10px; left: 10px; z-index: 4; }
@media (max-width: 699px) {
   .v2-heart--card{ width: 34px; height: 34px; }
}

/* on the product page: a quiet pill under the title */
.v2-heart--pdp {
  display: inline-flex;
  gap: 8px;
  width: auto;
  height: 38px;
  margin: 8px 0 4px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(20 20 20 / 0.12);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- the page */
.v2-sl { padding-block: clamp(28px, 5vw, 64px); }
.v2-sl__head { max-width: 640px; margin-bottom: 24px; }
.v2-sl__grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 990px) {
  .v2-sl__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}
.v2-sl.is-empty .v2-sl__grid { display: none; }
.v2-sl__items { display: grid; gap: 12px; }
.v2-sl__item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border: 1px solid rgb(20 20 20 / 0.08);
  border-radius: var(--v2-r, 20px);
  background: #fff;
}
.v2-sl__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: rgb(20 20 20 / 0.03); }
.v2-sl__img img { width: 100%; height: 100%; object-fit: contain; }
.v2-sl__info { display: grid; gap: 8px; align-content: start; min-width: 0; }
.v2-sl__t { color: inherit; font-weight: 700; line-height: 1.3; text-decoration: none; }
.v2-sl__p { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.v2-sl__p b { font-weight: 800; }
.v2-sl__p s { font-size: 0.85em; color: rgb(20 20 20 / 0.45); }
.v2-sl__sel {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(20 20 20 / 0.14);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.9375rem;
}
.v2-sl__sel.is-needed { border-color: rgb(var(--v2-accent, 255 79 1)); box-shadow: 0 0 0 3px rgb(var(--v2-accent, 255 79 1) / 0.2); }
.v2-sl__acts { display: flex; align-items: center; gap: 8px; }
.v2-sl__add { flex: 1 1 auto; justify-content: center; min-height: 44px; }
.v2-sl__add:disabled { opacity: 0.45; }
.v2-sl__rm {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(20 20 20 / 0.05);
  color: inherit;
  cursor: pointer;
}
.v2-sl__item--sk .v2-sl__img,
.v2-sl__item--sk .v2-sl__info span { background: rgb(20 20 20 / 0.06); border-radius: 10px; animation: v2-slsk 1.2s ease-in-out infinite; }
.v2-sl__item--sk .v2-sl__info span { display: block; height: 16px; }
.v2-sl__item--sk .v2-sl__info span + span { width: 50%; }
@keyframes v2-slsk { 50% { opacity: 0.5; } }
.v2-sl__bar {
  position: sticky;
  top: calc(var(--v2-hdr-h, 76px) + var(--v2-ann-h, 0px) + 16px);
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: var(--v2-r, 20px);
  background: rgb(21 28 41);
  color: #fff;
}
.v2-sl__bar[hidden] { display: none; }
.v2-sl__n { margin: 0; font-weight: 800; font-size: 1.1rem; }
.v2-sl__deal { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(var(--v2-accent, 255 79 1) / 0.18); color: #ffd9c7; font-size: 0.875rem; font-weight: 700; }
.v2-sl__deal:empty { display: none; }
.v2-sl__tot { display: flex; justify-content: space-between; margin: 0; font-size: 1rem; }
.v2-sl__all { width: 100%; justify-content: center; }
@media (max-width: 989px) {
  /* on a phone the count and "add all" ride along at the bottom */
  .v2-sl__bar {
    top: auto;
    bottom: 10px;
    z-index: 5;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px 12px 12px 16px;
    border-radius: 18px;
    box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
  }
  .v2-sl__n { font-size: 0.9375rem; }
  .v2-sl__deal { grid-column: 1 / -1; order: -1; }
  .v2-sl__tot { display: none; }
  .v2-sl__all { width: auto; }
  .v2-sl__item { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; }
}
.v2-sl__empty { display: grid; justify-items: center; gap: 10px; padding: 48px 16px; text-align: center; border-radius: var(--v2-r, 20px); background: #fff; }
.v2-sl__empty[hidden] { display: none; }
.v2-sl__emptyic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgb(var(--v2-accent, 255 79 1) / 0.1); color: rgb(var(--v2-accent, 255 79 1)); }
.v2-sl__emptyh { margin: 6px 0 0; font-size: 1.35rem; }
.v2-sl__ups { margin-top: 40px; }
.v2-sl__ups[hidden] { display: none; }
.v2-sl__uph { margin: 0 0 14px; font-size: 1.25rem; }
.v2-sl__uprow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.v2-sl__uprow::-webkit-scrollbar { display: none; }
.v2-sl__up { flex: 0 0 180px; display: grid; gap: 6px; scroll-snap-align: start; }
.v2-sl__upimg { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid rgb(20 20 20 / 0.06); }
.v2-sl__upimg img { width: 100%; height: 100%; object-fit: contain; }
.v2-sl__upt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.v2-sl__upadd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid rgb(20 20 20 / 0.14);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.v2-sl__upadd svg { fill: transparent; }

/* ---------------------------------------------------------------- header counter */
.v2-hdr__act--list { position: relative; }
.v2-hdr__lc {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgb(var(--v2-accent, 255 79 1));
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.v2-hdr__lc[hidden] { display: none; }

/* the v2 card wildcard clears backgrounds inside cards; the heart keeps its own */
 .product-card .v2-heart{ background-color: rgb(255 255 255 / 0.94) !important; }
/* one loud button per page ("add all"); each item gets a compact dark one */
.v2-sl__add {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  background: rgb(21 28 41) !important;
  border-color: rgb(21 28 41) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 0.875rem;
}
.v2-sl__rm { width: 40px; height: 40px; }
.v2-sl__acts { justify-content: flex-start; margin-top: 2px; }
@media (min-width: 990px) { .v2-sl__sel { max-width: 320px; } }

/* ---------------------------------------------------------------- the header dropdown (desktop) */
.v2-slpop {
  position: absolute;
  z-index: 6;
  width: 380px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  color: rgb(var(--v2-ink, 20 20 20));
  box-shadow: 0 24px 60px -24px rgb(20 20 20 / 0.45), 0 0 0 1px rgb(20 20 20 / 0.06);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.v2-slpop[hidden] { display: none; }
.v2-slpop.is-open { opacity: 1; transform: none; }
.v2-slpop__head { padding: 2px 4px 10px; }
.v2-slpop__t { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(20 20 20 / 0.55); }
.v2-slpop__t span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgb(var(--v2-accent, 255 79 1)); color: #fff; font-size: 0.625rem; letter-spacing: 0; }
.v2-slpop__list { display: grid; gap: 4px; }
.v2-slpop__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px; border-radius: 14px; }
.v2-slpop__row:hover { background: rgb(20 20 20 / 0.03); }
.v2-slpop__row--sk { grid-template-columns: 56px 1fr; }
.v2-slpop__row--sk span { height: 56px; border-radius: 12px; background: rgb(20 20 20 / 0.06); }
.v2-slpop__row--sk span + span { height: 14px; }
.v2-slpop__img { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: rgb(20 20 20 / 0.03); }
.v2-slpop__img img { width: 100%; height: 100%; object-fit: contain; }
.v2-slpop__info { min-width: 0; }
.v2-slpop__n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
.v2-slpop__p { display: flex; gap: 6px; align-items: baseline; margin: 3px 0 0; font-size: 0.8125rem; }
.v2-slpop__p b { font-weight: 800; }
.v2-slpop__p s { font-size: 0.75rem; color: rgb(20 20 20 / 0.45); }
.v2-slpop__acts { display: flex; gap: 4px; }
.v2-slpop__add,
.v2-slpop__rm { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: inherit; text-decoration: none; }
.v2-slpop__add { background: rgb(21 28 41); color: #fff; }
.v2-slpop__add:hover { background: rgb(var(--v2-accent, 255 79 1)); }
.v2-slpop__rm { background: rgb(20 20 20 / 0.05); }
.v2-slpop__all { display: flex; width: 100%; justify-content: center; margin-top: 12px; }
.v2-slpop__empty { padding: 10px 6px 6px; font-size: 0.875rem; color: rgb(20 20 20 / 0.65); }
.v2-slpop__empty p { margin: 0 0 4px; }
.v2-slpop__empty b { color: rgb(20 20 20); }
.v2-hdr__act--list[aria-expanded="true"] { color: rgb(var(--v2-accent, 255 79 1)); }
/* the heart glyph fills more of its 24px frame than the bag does; drawn smaller, the two read as one size */
.v2-hdr__act--list svg { width: 17px; height: 17px; }
/* the heart and the cart sit as a pair */
.v2-hdr__act--list { margin-inline-end: -10px; }
@media (max-width: 989px) { .v2-hdr__act--list { margin-inline-end: -6px; } }
.v2-hdr__act--list .v2-hdr__lc { top: 5px; right: 4px; }

/* on a phone the shortlist lives in the menu and the footer, not in the island (it pushed the cart out) */
@media (max-width: 989px) {
  .v2-hdr__act--list { display: none !important; }
}
.v2-foot__list-sl { display: inline-flex; align-items: center; gap: 7px; }
.v2-foot__slc {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(var(--v2-accent, 255 79 1));
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}
.v2-foot__slc[hidden] { display: none; }

/* ======================================================================================================================
   ONE PICTURE, FOUR CORNERS
   Every control on a card image has a place of its own, the same on every page: badges top left, the heart top right,
   the cart (the theme's on collections, our "+" on the homepage) bottom right, the photo dots bottom centre. The
   theme's image arrows are gone on a touch screen (the dots and a swipe replace them) and appear on hover with a
   mouse. The full-photo lead card keeps its own order: its title runs along the bottom, so there the heart is top
   left with the badges under it and the "+" stays top right.
   ====================================================================================================================== */
 .product-card .v2-heart--card{ left: auto; right: 10px; }
 html.v2-cardlook.v2-home .product-card .product-card__figure > .product-card__badge-list{
  top: 10px !important;
  bottom: auto !important;
  left: 10px !important;
  right: auto !important;
  z-index: 3;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 4px;
  max-width: calc(100% - 64px);
  pointer-events: none;
}
 html.v2-cardlook.v2-home .product-card .product-card__figure > .product-card__badge-list .badge{
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 6px -2px rgb(20 20 20 / 0.25);
}
 html.v2-cardlook .product-card .v2-qa{ top: auto; bottom: 10px; right: 10px; }
 .nr-i.is-life .product-card .v2-heart--card{ left: 10px; right: auto; }
 html.v2-cardlook .nr-i.is-life .product-card .v2-qa{ top: 10px; bottom: auto; }
 html.v2-cardlook.v2-home .nr-i.is-life .product-card .product-card__figure > .product-card__badge-list{ top: 56px !important; }

/* the theme's cart button on collection cards: the same white disc as the heart */
 html.v2-cardlook.v2-home .product-card .product-card__mobile-quick-buy-button{
  width: 36px;
  height: 36px;
  border: 0 !important;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94) !important;
  color: rgb(20 20 20 / 0.8);
  box-shadow: 0 4px 12px -6px rgb(20 20 20 / 0.35), 0 0 0 1px rgb(20 20 20 / 0.06);
}

/* image arrows: gone for a thumb, on hover for a mouse */
@media (hover: none) {
  html.v2-cardlook .product-card .product-card__carousel-arrow,
  html.v2-cardlook .v2-root .product-card .v2-swap { display: none !important; }
}
@media (hover: hover) {
  html.v2-cardlook .product-card .product-card__carousel-arrow { opacity: 0; transition: opacity 0.2s ease; }
   html.v2-cardlook.v2-home .product-card:hover .product-card__carousel-arrow, html.v2-cardlook.v2-home .product-card .product-card__carousel-arrow:focus-visible{ opacity: 1; }
   html.v2-home .v2-dots{ display: none !important; }
 html.v2-home }
html.v2-cardlook .product-card .v2-swipe{ touch-action: pan-y; }

/* the photo dots */
 html.v2-home .v2-dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.82) !important;
  box-shadow: 0 2px 8px -4px rgb(20 20 20 / 0.35);
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
 html.v2-home .v2-dots::before{ content: ''; position: absolute; inset: -10px -6px; }
 html.v2-home .v2-dots i{ width: 5px; height: 5px; border-radius: 3px; background: rgb(20 20 20 / 0.25); transition: width 0.25s ease, background-color 0.25s ease; }
 html.v2-home .v2-dots i.is-on{ width: 12px; background: rgb(20 20 20 / 0.8); }
/* the homepage cards clear every background inside them; the dots keep theirs */
 html.v2-home .v2-dots i{ background-color: rgb(20 20 20 / 0.25) !important; }
 html.v2-home .v2-dots i.is-on{ background-color: rgb(20 20 20 / 0.8) !important; }
 html.v2-home .nr-i.is-life .v2-dots{ display: none; }

@media (max-width: 699px) {
   .product-card .v2-heart--card{ right: 8px; top: 8px; }
   .nr-i.is-life .product-card .v2-heart--card{ left: 8px; }
   html.v2-cardlook.v2-home .product-card .product-card__figure > .product-card__badge-list{ top: 8px !important; left: 8px !important; max-width: calc(100% - 56px); }
   html.v2-cardlook.v2-home .product-card .product-card__figure > .product-card__badge-list .badge{ padding: 3px 7px; font-size: 0.625rem; }
   html.v2-cardlook.v2-home .nr-i.is-life .product-card .product-card__figure > .product-card__badge-list{ top: 50px !important; }
   html.v2-cardlook.v2-home .product-card .product-card__mobile-quick-buy-button{ width: 34px; height: 34px; }
   html.v2-cardlook .product-card .v2-qa{ bottom: 8px; right: 8px; }
   html.v2-cardlook .nr-i.is-life .product-card .v2-qa{ top: 8px; }
   html.v2-home .v2-dots{ bottom: 10px; }
}

/* new arrivals: that section draws its own "New" pill top right (.nr-i[data-nr-new]::after), where the heart
   sits; on those cards the heart steps down under the pill, the two stacked in the same corner */
 .nr-i[data-nr-new] .product-card .v2-heart--card{ top: 42px !important; } /* !important: later card rules put it back under the pill (2026-10-19) */
@media (max-width: 699px) {  .nr-i[data-nr-new] .product-card .v2-heart--card{ top: 38px !important; } }

/* in the compact mobile title row the pill squeezed the product name: there it is a round heart only */
@media (max-width: 999px) {
  .product__title__wrap .v2-heart--pdp { width: 40px; height: 40px; padding: 0; justify-content: center; flex: 0 0 auto; }
  .product__title__wrap .v2-heart--pdp .v2-heart__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* THE PHOTO SWITCH, THUMB SIZED (2026-09-29, "too small, a miss opens the product"). Arrows at both ends around the
   dots, 32px tall with a hit area of about 104x48, anchored bottom-left so it never meets the quick-add button in the
   bottom-right corner. Left part of the pill = previous photo, html.v2-home the rest = next (swb-v2-shortlist.js gallery()). */
.v2-dots{ left: 8px; bottom: 8px; height: 32px; gap: 0; padding: 0 2px; transform: none; }
 html.v2-home .v2-dots::before{ inset: -8px -6px; }
 html.v2-home .v2-dots__a{ display: grid; place-items: center; width: 26px; height: 32px; color: rgb(20 20 20 / 0.72); }
 html.v2-home .v2-dots__d{ display: flex; align-items: center; gap: 4px; padding: 0 2px; }
@media (max-width: 699px) {  html.v2-home .v2-dots{ bottom: 8px; } }

/* ======================================================================================================================
   THE LIST IN THE CHAT'S CARD (2026-10-03): the same shape as the assistant's shelf cards. A picture on top (1:1, on
   white), the price, a three line name, the size when there is a choice, and the heart and the basket as one equal
   44px pair (outline and filled). Two per row on a phone, three or four on a desktop; every card of a row one height.
   ====================================================================================================================== */
.v2-sl .v2-sl__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
@media (min-width: 750px) { .v2-sl .v2-sl__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v2-sl .v2-sl__items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-sl__card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 12px;
  border: 1px solid rgb(20 20 20 / 0.1); border-radius: 16px; background: #fff;
}
.v2-sl__media { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #fff; }
.v2-sl__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v2-sl__price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; font-size: 16px; }
.v2-sl__price b { font-weight: 800; color: rgb(20 20 20); }
.v2-sl__price s { font-size: 14px; color: rgb(20 20 20 / 0.5); }
.v2-sl__title {
  display: block; min-height: calc(1.3em * 3); font-size: 15px; font-weight: 700; line-height: 1.3;
  color: rgb(20 20 20); text-decoration: none; overflow-wrap: break-word;
}
.v2-sl__opt { min-height: 0; }
.v2-sl__card .v2-sl__sel { width: 100%; min-height: 44px; font-size: 16px; }
.v2-sl__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.v2-sl__btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 44px; padding: 0; border-radius: 12px; cursor: pointer; font: inherit;
}
.v2-sl__heart { border: 1px solid rgb(20 20 20 / 0.14); background: #fff; color: rgb(20 20 20); }
.v2-sl__heart svg path { fill: none; }
.v2-sl__heart[aria-pressed="true"] { border-color: rgb(255 79 1 / 0.5); background: rgb(255 79 1 / 0.08); color: rgb(194 65 12); }
.v2-sl__heart[aria-pressed="true"] svg path { fill: currentColor; }
.v2-sl__cart { border: 0; background: rgb(255 79 1); color: #fff; }
.v2-sl__cart[disabled] { background: rgb(20 20 20 / 0.08); color: rgb(20 20 20 / 0.4); cursor: default; }
.v2-sl__cart.is-done { background: rgb(22 128 60); }
@media (hover: hover) {
  .v2-sl__heart:hover { border-color: rgb(20 20 20 / 0.3); }
  .v2-sl__cart:not([disabled]):hover { background: rgb(194 65 12); }
}
.v2-sl__btn:focus-visible, .v2-sl__brand:focus-visible, .v2-sl__link:focus-visible, .v2-sl__saveall:focus-visible { outline: 2px solid rgb(255 79 1); outline-offset: 2px; }
.v2-sl__card--sk .v2-sl__media, .v2-sl__card--sk > span { background: rgb(20 20 20 / 0.05); border-radius: 10px; min-height: 18px; }
.v2-sl__saveall {
  width: 100%; min-height: 48px; margin-top: 8px; border: 1px solid rgb(20 20 20 / 0.14); border-radius: 999px;
  background: #fff; color: rgb(20 20 20); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.v2-sl__saveall[disabled] { color: rgb(22 110 52); border-color: rgb(22 128 60 / 0.3); cursor: default; }
.v2-sl__saveall[hidden] { display: none; }

/* Under the list: choose a watch, the materials and occasions, and the assistant. */
.v2-sl__explore { margin-top: 32px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgb(20 20 20 / 0.07); }
.v2-sl__exh { margin: 0; font-size: 20px; font-weight: 800; color: rgb(20 20 20); }
.v2-sl__exs { margin: 4px 0 14px; font-size: 15px; color: rgb(20 20 20 / 0.65); }
.v2-sl__brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 750px) { .v2-sl__brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.v2-sl__brand {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px;
  border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(20 20 20 / 0.12);
  font-size: 15px; font-weight: 800; color: rgb(20 20 20); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .v2-sl__brand:hover { box-shadow: 0 0 0 1px rgb(20 20 20 / 0.3); } }
.v2-sl__find { width: 100%; margin-top: 12px; min-height: 48px; font-size: 16px; }
.v2-sl__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.v2-sl__link {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgb(20 20 20 / 0.12);
  font-size: 15px; font-weight: 700; color: rgb(20 20 20); text-decoration: none;
}
.v2-sl__ask { color: rgb(194 65 12); }
/* A shared list: no "Your list" eyebrow and no "n saved" (it is not saved yet); "Save to my list" spans the bar. */
.v2-sl.is-shared .v2-sl__head .v2-eyebrow,
.v2-sl.is-shared [data-v2-slist-n] { display: none; }
.v2-sl .v2-sl__bar .v2-sl__saveall { grid-column: 1 / -1; width: 100%; margin-top: 0; }
@media (max-width: 989px) { .v2-sl.is-shared .v2-sl__bar .v2-sl__all { grid-column: 1 / -1; width: 100%; } }
.v2-sl__card .v2-sl__sel { padding-left: 12px; text-overflow: ellipsis; }
.v2-sl .v2-sl__bar .v2-sl__saveall { display: flex; align-items: center; justify-content: center; text-align: center; }

/* ======================================================================================================================
   PHONE CARDS: CONTROLS NEXT TO THE PHOTO, NOT ON IT (2026-10-03, asked: a strap shot edge to edge sat under the
   photo dots and the cart button). On a phone those two are always visible, so the figure gets a white strip of its
   own underneath the photo and they sit in it; the photo is inset a little so strap ends stay clear of the heart.
   Desktop keeps its hover controls. Lifestyle tiles (cover photo with the text on it) are left alone.
   ====================================================================================================================== */
@media (max-width: 749px) {
  /* homepage only (2026-10-14): live's collection cards keep their button ON the photo; this strip under it is part of
     the new card look, and unprefixed it padded every card that carries the theme's quick-buy (FR/ES/UK) */
  html.v2-cardlook.v2-home .product-card__figure:has(> .v2-dots, > .product-card__quick-buy):not(.is-life *):not(:has(.product-card__info)) {
    padding-bottom: 44px !important; background: #fff; border-radius: inherit;
  }
   html.v2-cardlook.v2-home .product-card__figure:has(> .v2-dots, > .product-card__quick-buy):not(.is-life *):not(:has(.product-card__info)) img{
    padding: 6% 6% 2% !important; box-sizing: border-box; object-fit: contain !important;
  }
   html.v2-cardlook.v2-home .product-card__figure:has(> .v2-dots, > .product-card__quick-buy):not(.is-life *):not(:has(.product-card__info)) > .v2-dots{ bottom: 6px !important; }
   html.v2-cardlook.v2-home .product-card__figure:has(> .v2-dots, > .product-card__quick-buy):not(.is-life *):not(:has(.product-card__info)) > .product-card__quick-buy{ bottom: 5px !important; }
}

/* ONE PHOTO CONTROL ON EVERY CARD (2026-10-05, "still overlapping image selection button on product cards, they all
   need to be the same across all pages"). The pill with two arrows sat over the photo next to the cart button, the
   materials and occasions grid added its own side arrows and a third row of dots. Now every card has the same quiet
   row of dots at the bottom centre of the photo: a swipe or a tap on the dots changes the photo (left part = back),
   the heart keeps the top right corner, html.v2-home the cart the bottom right. */
.v2-dots{
  left: 50% !important; bottom: 10px !important; height: 18px; padding: 0 6px !important; gap: 0;
  transform: translateX(-50%) !important; background: rgb(255 255 255 / 0.72) !important; box-shadow: none !important;
}
 html.v2-home .v2-dots::before{ inset: -12px -18px !important; }
 html.v2-home .v2-dots .v2-dots__a{ display: none !important; }
 html.v2-home .v2-dots__d{ padding: 0 !important; }
 html.v2-cardlook.v2-home .product-card .mb-imgnav__dots{ display: none !important; }
@media (hover: none) {
   html.v2-cardlook.v2-home .product-card .mb-imgnav__ctrl{ display: none !important; }
}
/* the compare-at price stays on the price's line */
 html.v2-cardlook.v2-home .product-card price-list.price-list{ flex-direction: row !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }

/* homepage cards: the photo switcher a size up (2026-10-07, asked) */
html.v2-cardlook.v2-home .v2-root .product-card .v2-dots { height: 24px; padding: 0 9px !important; }
html.v2-cardlook.v2-home .v2-root .product-card .v2-dots__d { gap: 6px; }
html.v2-cardlook.v2-home .v2-root .product-card .v2-dots i { width: 7px; height: 7px; border-radius: 4px; }
html.v2-cardlook.v2-home .v2-root .product-card .v2-dots i.is-on { width: 18px; }

/* the "we pay the shipping" line on our card grids: 12px minimum on phones (the free-shipping line reads at 12px) */
@media (max-width: 749px) { html.v2-cardlook .v2-root .product-card .product-card__free-shipping { font-size: 0.75rem !important; } }

/* 12px minimum on the card badges ("Onze keuze", "Bespaar 26%") on our card grids, phones */
@media (max-width: 749px) { html.v2-cardlook .v2-root .product-card .product-card__badge-list .badge { font-size: 0.75rem !important; padding: 3px 8px !important; } }

/* 2026-10-14: `html.v2-home` is set on the homepage (swb-header-v2.liquid). The new card look (photo dots, badges in the
   picture, hidden theme arrows) lives there only; hearts and the quick-add button are on every product card. */

/* the product page heart ON THE PHOTO (swb-v2-shortlist.js, 2026-10-14): top right; on phones under the zoom button */
.product-gallery__media-list-wrapper > .v2-heart--pdpimg { position: absolute; top: 84px; right: 24px; z-index: 3; width: 44px; height: 44px; }
.product-gallery__media-list-wrapper > .v2-heart--pdpimg svg { width: 22px; height: 22px; }
@media (max-width: 999px) {
  .product-gallery__media-list-wrapper > .v2-heart--pdpimg { top: 62px; right: 12px; width: 40px; height: 40px; }
}

/* HOMEPAGE CARDS, PRODUCT-PAGE CONTROLS (2026-10-14, asked): photo arrows on both edges like the product page gallery
   (the dots stay as a quiet count, no longer a control), and the quick add is the theme's own cart button: the same
   36px light grey disc with the cart icon the collection cards show where the market has quick buy. */
html.v2-cardlook .product-card .v2-garr {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0;
  border: 1px solid rgb(20 20 20 / 0.12); border-radius: 8px; background: rgb(255 255 255 / 0.94); color: rgb(20 20 20); cursor: pointer;
}
html.v2-cardlook .product-card .v2-garr--p { left: 8px; }
html.v2-cardlook .product-card .v2-garr--n { right: 8px; }
@media (hover: hover) {
  html.v2-cardlook .product-card .v2-garr { opacity: 0; transition: opacity 0.2s ease; }
  html.v2-cardlook .product-card:hover .v2-garr { opacity: 1; }
}
html.v2-cardlook.v2-home .product-card .v2-dots { pointer-events: none; }
html.v2-cardlook.v2-home .product-card .v2-dots .v2-dots__a { display: none !important; }
html.v2-cardlook .product-card .v2-qa { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgb(238 238 238) !important; color: rgb(26 26 26 / 0.7) !important; box-shadow: none !important; border: 0 !important; }
html.v2-cardlook .product-card .v2-qa:hover { color: rgb(26 26 26) !important; }

/* side photo arrows on cards off the homepage: the theme's own hover arrows step aside */
html.v2-cardlook:not(.v2-home) .product-card:has(.v2-garr) .product-card__carousel-prev, html.v2-cardlook:not(.v2-home) .product-card:has(.v2-garr) .product-card__carousel-next, html.v2-cardlook:not(.v2-home) .product-card:has(.v2-garr) [data-carousel-prev], html.v2-cardlook:not(.v2-home) .product-card:has(.v2-garr) [data-carousel-next] { display: none !important; }
@media (max-width: 699px) { html.v2-cardlook .product-card .v2-garr { width: 28px; height: 28px; margin-top: -14px; } html.v2-cardlook .product-card .v2-garr--p { left: 6px; } html.v2-cardlook .product-card .v2-garr--n { right: 6px; } }
/* the heart sits top RIGHT on every card, clear of the live badges top left (2026-10-15, asked: overlap on the homepage) */
html:not(.v2-home) .product-card .v2-heart--card { left: auto !important; right: 10px !important; top: 10px !important; }

/* CLEANER CARD HEART (2026-10-15, asked): a small soft disc, no outline ring, a hairline of shadow so it reads on
   white photos; the tap area stays 52px through the ::after */
html .product-card .v2-heart--card {
  width: 32px !important; height: 32px !important;
  background: rgb(255 255 255 / 0.86) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgb(20 20 20 / 0.10), 0 0 0 0.5px rgb(20 20 20 / 0.04) !important;
  color: rgb(20 20 20 / 0.72) !important;
}
html .product-card .v2-heart--card svg { width: 17px !important; height: 17px !important; }
html .product-card .v2-heart--card svg path { stroke-width: 1.8; }
html .product-card .v2-heart--card::after { inset: -10px !important; }
html:not(.v2-home) .product-card .v2-heart--card { top: 8px !important; right: 8px !important; }
/* the heart on a product photo (product page, universal product page): a solid white disc, so it stays readable on a
   dark photo instead of seeming to sit behind it (2026-10-15, asked) */
html .v2-heart--pdpimg, html .v2-heart--upp {
  background: rgb(255 255 255 / 0.94) !important; color: rgb(20 20 20 / 0.8) !important;
  box-shadow: 0 2px 8px rgb(20 20 20 / 0.18), 0 0 0 0.5px rgb(20 20 20 / 0.06) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 6 !important;
}
