/* SC Customer Lists — wishlist UI. Tokens mirror .sc-po-btn / .scfc. */

/* ---------- heart button ---------- */
.sc-wl-btn{
  --c-leaf:#AFEA80; --c-forest:#1C3A2A; --c-gold:#FFD600; --c-ink:#111827; --c-coral:#E24B4A;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:6px 10px;
  border:1px solid rgba(28,58,42,.18);
  background:rgba(175,234,128,.12);
  color:var(--c-forest);
  font-weight:900; font-size:12px; line-height:1;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.sc-wl-btn svg{ width:16px; height:16px; display:block; }
.sc-wl-btn .sc-wl-ico__fill{ fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; transition:fill .15s ease, stroke .15s ease; }
.sc-wl-btn:hover{ transform:translateY(-1px); background:rgba(255,214,0,.16); border-color:rgba(255,214,0,.55); box-shadow:0 10px 20px rgba(0,0,0,.10); }
.sc-wl-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,214,0,.28), 0 10px 20px rgba(0,0,0,.10); }
.sc-wl-btn.is-on{ color:var(--c-coral); border-color:rgba(226,75,74,.45); background:rgba(226,75,74,.08); }
.sc-wl-btn.is-on .sc-wl-ico__fill{ fill:currentColor; }
.sc-wl-btn.is-busy{ opacity:.6; pointer-events:none; }
@keyframes sc-wl-pop{ 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
.sc-wl-btn.is-on svg{ animation:sc-wl-pop .28s ease; }
@media (prefers-reduced-motion:reduce){ .sc-wl-btn.is-on svg{ animation:none; } .sc-wl-btn:hover{ transform:none; } }

/* Icon-only inside cards: don't steal width from Stats/Buy */
.scfc__overlay-buttons .sc-wl-wrap{ flex:0 0 auto; display:flex; align-items:center; margin:0 !important; }
.scfc__overlay-buttons .sc-wl-btn--icon{ width:34px; height:30px; padding:0; }
.sc-wl-btn--icon .sc-wl-btn__txt{ display:none; }

/* PDP */
.sc-wl-wrap--pdp{ display:inline-flex; margin:10px 0 0; position:relative; }
.sc-wl-wrap--pdp .sc-wl-btn{ padding:10px 16px; font-size:13px; }
.sc-wl-wrap--pdp .sc-wl-btn svg{ width:18px; height:18px; }

/* ---------- guest prompt (appended to <body>, fixed: cards are overflow:hidden) ---------- */
.sc-wl-prompt{
  position:fixed; z-index:3; padding:14px 14px 12px;
  background:rgba(255,255,255,.98); color:#111827; border-radius:18px; border:1px solid rgba(175,234,128,.9);
  box-shadow:0 18px 44px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06); text-align:left; font-size:13px; line-height:1.35;
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
}
.sc-wl-prompt__title::before{
  content:""; display:inline-block; width:14px; height:14px; margin:0 6px -2px 0; border-radius:999px;
  background:#E24B4A; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sc-wl-prompt::after{ content:""; position:absolute; left:var(--sc-wl-arrow-x, 50%); top:100%; margin-left:-7px; border:7px solid transparent; border-top-color:#fff; }
.sc-wl-prompt.is-below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#fff; }
.sc-wl-prompt__title{ font-weight:900; font-size:14px; padding-right:22px; margin-bottom:4px; }
.sc-wl-prompt__text{ color:#4b5563; margin-bottom:10px; }
.sc-wl-prompt__cta, .sc-wl-prompt__cta:visited{
  display:block; text-align:center; padding:10px 12px; border-radius:999px; text-decoration:none !important;
  background:#1C3A2A; color:#AFEA80 !important; border:1px solid #1C3A2A;
  font:900 13px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sc-wl-prompt__cta:hover{ background:#0f261a; }
.sc-wl-prompt__close{ position:absolute; top:6px; right:8px; background:none; border:0; font-size:20px; line-height:1; color:#6b7280; cursor:pointer; padding:4px; }

/* ---------- overlay host (child of <html>, outside body's overflow clip) ---------- */
.sc-wl-host{
  position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* site font */
  font-size:13px; line-height:1.35; color:#111827; -webkit-font-smoothing:antialiased;
}
.sc-wl-host > *{ pointer-events:auto; }

/* ---------- toast ----------
   White pill under the header (where the eye is after a card click, clear of the floating
   flag/currency/back-to-top controls). Same surface + shadow as the Quick Buy sheet. */
.sc-wl-toast{
  position:fixed; z-index:2; left:50%; top:calc(env(safe-area-inset-top, 0px) + 124px); /* JS refines to header bottom + 14px */
  transform:translate(-50%, -14px) scale(.98);
  display:inline-flex; align-items:center; gap:10px; padding:9px 10px 9px 12px;
  background:rgba(255,255,255,.97); color:#1C3A2A; border:1px solid rgba(175,234,128,.9);
  border-radius:999px; font-weight:800; font-size:13.5px; line-height:1.2; white-space:nowrap;
  box-shadow:0 18px 44px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  width:max-content; opacity:0; pointer-events:none !important; max-width:calc(100vw - 24px);
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1);
}
.sc-wl-toast.is-show{ opacity:1; transform:translate(-50%, 0) scale(1); pointer-events:auto !important; }
@media (prefers-reduced-motion:reduce){ .sc-wl-toast{ transition:opacity .15s ease; transform:translate(-50%,0); } }

.sc-wl-toast__ico{
  flex:0 0 auto; width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:rgba(175,234,128,.28); color:#1C3A2A;
}
.sc-wl-toast__ico svg{ width:16px; height:16px; display:block; }
.sc-wl-toast--added .sc-wl-toast__ico{ background:rgba(226,75,74,.10); color:#E24B4A; }
.sc-wl-toast--added .sc-wl-toast__ico svg{ fill:currentColor; animation:sc-wl-pop .36s cubic-bezier(.2,.8,.2,1) .08s both; }
.sc-wl-toast--removed .sc-wl-toast__ico{ background:rgba(28,58,42,.06); color:#6b7280; }
.sc-wl-toast--removed .sc-wl-toast__ico svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.sc-wl-toast--notify .sc-wl-toast__ico{ background:rgba(255,214,0,.22); color:#8a6d00; }
.sc-wl-toast--notify .sc-wl-toast__ico svg{ fill:currentColor; }
.sc-wl-toast--error .sc-wl-toast__ico{ background:rgba(226,75,74,.10); color:#b32d2e; }
.sc-wl-toast--error .sc-wl-toast__ico svg{ fill:currentColor; }
.sc-wl-toast--error{ border-color:rgba(226,75,74,.35); }
.sc-wl-toast--info .sc-wl-toast__ico svg{ fill:currentColor; }

.sc-wl-toast__msg{ padding-right:2px; }

.sc-wl-toast__cta, .sc-wl-toast__cta:visited{
  flex:0 0 auto; display:inline-flex !important; align-items:center; gap:2px; white-space:nowrap; /* theme sets a{display:block} */
  padding:7px 8px 7px 12px; margin:0; border:0; border-radius:999px;
  background:#1C3A2A; color:#fff !important; text-decoration:none !important;
  font:900 12.5px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition:background .15s ease, transform .08s ease;
}
.sc-wl-toast__cta span{ display:inline; white-space:nowrap; }
.sc-wl-toast__cta svg{ width:16px; height:16px; fill:currentColor; display:block; }
.sc-wl-toast__cta:hover{ background:#0f261a; transform:translateY(-1px); }
.sc-wl-toast__cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,214,0,.45); }

@media (max-width:480px){
  .sc-wl-toast{ font-size:13px; gap:8px; padding:8px 8px 8px 10px; white-space:nowrap; }
  .sc-wl-toast__msg{ flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sc-wl-toast__cta span{ display:none; } /* icon-only button keeps it one line on small phones */
  .sc-wl-toast__cta{ padding:8px; }
  .sc-wl-toast__cta svg{ width:18px; height:18px; }
}

/* ---------- wishlist page ---------- */
/* Toolbar: same panel surface as the account tiles; chips are SCFC chips (leaf/gold), selects are pills. */
.sc-wl-toolbar{ display:flex; flex-direction:column; gap:12px; margin:0 0 20px; }
.sc-wl-toolbar__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
/* Narrow phones: the floating back-to-top button sits over the right edge — let the count drop
   under the heading on its own line instead of hiding behind it. */
@media (max-width:420px){
  .sc-wl-toolbar__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .sc-wl-count{ align-self:flex-start; }
}
.sc-wl-toolbar__title{ display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:#1C3A2A; }
.sc-wl-toolbar__ico{ width:16px; height:16px; fill:#1C3A2A; opacity:.8; }
.sc-wl-count{ font-size:13px; font-weight:800; color:#1C3A2A; background:rgba(175,234,128,.22); border:1px solid rgba(175,234,128,.7); border-radius:999px; padding:5px 11px; }
.sc-wl-count__of{ font-weight:600; opacity:.7; }

.sc-wl-chips{ display:flex; flex-wrap:wrap; gap:8px; }
/* Three states that cannot be confused:
   idle   = leaf tint (SCFC default)
   hover  = gold tint, only on devices that hover (touch taps don't leave a sticky hover)
   active = solid forest green + white text — nothing like hover */
.sc-wl-chip{ cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-weight:800; transform:none !important; }
.sc-wl-chip:hover,.sc-wl-chip:focus,.sc-wl-chip:focus-visible{
  background:color-mix(in srgb, #AFEA80 14%, #fff) !important; border-color:color-mix(in srgb, #AFEA80 40%, #E5E7EB) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.02) !important; outline:none !important;
}
@media (hover:hover){
  .sc-wl-chip:hover{ background:color-mix(in srgb, #FFD600 18%, #fff) !important; border-color:color-mix(in srgb, #FFD600 45%, #E5E7EB) !important; }
}
.sc-wl-chip:focus-visible{ box-shadow:0 0 0 3px rgba(255,214,0,.45) !important; }
.sc-wl-chip[aria-pressed="true"],
.sc-wl-chip[aria-pressed="true"]:hover,
.sc-wl-chip[aria-pressed="true"]:focus{
  background:#1C3A2A !important; border-color:#1C3A2A !important; color:#fff !important;
  box-shadow:0 6px 14px rgba(28,58,42,.22) !important;
}
.sc-wl-chip__dot{ width:8px; height:8px; border-radius:999px; background:#9ca3af; box-shadow:0 0 0 2px rgba(0,0,0,.05); }
.sc-wl-chip[aria-pressed="true"] .sc-wl-chip__dot{ background:#AFEA80; box-shadow:0 0 0 3px rgba(175,234,128,.25); }
.sc-wl-chip__n{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#1C3A2A; color:#AFEA80; font-size:11px; font-weight:900; line-height:1; }
.sc-wl-chip[aria-pressed="true"] .sc-wl-chip__n{ background:#AFEA80; color:#1C3A2A; }
.sc-wl-chip__n[hidden]{ display:none; }

.sc-wl-selects{ display:flex; flex-wrap:wrap; gap:8px 12px; padding-top:10px; border-top:1px dashed rgba(28,58,42,.16); }
/* Label + select in one pill. The theme/Woo force select{display:block;width:100%;height:…},
   so the select's box is pinned with !important and the pill is a grid, not inline-flex. */
.sc-wl-select{ display:inline-grid; grid-template-columns:auto 1fr; align-items:stretch; font-size:13px; font-weight:800; color:#1C3A2A; border:1px solid rgba(28,58,42,.18); border-radius:999px; background:#fff; overflow:hidden; min-width:0; }
.sc-wl-select__lbl{ display:flex; align-items:center; padding:0 10px 0 12px; background:rgba(175,234,128,.18); border-right:1px solid rgba(28,58,42,.12); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.sc-wl-select select{
  appearance:none !important; -webkit-appearance:none !important; display:block !important; width:auto !important; min-width:0 !important;
  height:auto !important; min-height:0 !important; line-height:1.2 !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C3A2A'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center/16px !important;
  padding:8px 30px 8px 10px !important; font-family:inherit !important; font-size:13px !important; font-weight:800 !important; color:#1C3A2A !important; max-width:240px; cursor:pointer;
}
.sc-wl-select select:focus-visible{ outline:none !important; box-shadow:inset 0 0 0 2px rgba(255,214,0,.6) !important; }
@media (max-width:640px){
  .sc-wl-selects{ flex-direction:column; align-items:stretch; }
  .sc-wl-select{ display:grid; }
  .sc-wl-select select{ width:100% !important; max-width:none; }
}

/* The account content column is narrow (side nav), and Breakdance forces ul.products to its
   products-per-row (4) with higher specificity — so: beat it, and size by available width. */
.breakdance-woocommerce .sc-wl-grid-wrap ul.products.sc-wl-grid,
.sc-wl-grid-wrap ul.products.sc-wl-grid,
.sc-wl-grid{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap:20px !important; list-style:none !important; margin:0 !important; padding:0 !important; width:100% !important;
}
@media (max-width:480px){
  .breakdance-woocommerce .sc-wl-grid-wrap ul.products.sc-wl-grid, .sc-wl-grid{ grid-template-columns:1fr !important; }
}
.sc-wl-grid > li{ margin:0 !important; width:auto !important; float:none !important; display:flex; flex-direction:column; }
.sc-wl-grid > li[hidden]{ display:none !important; }
.sc-wl-grid > li.is-removing{ opacity:0; transform:scale(.96); transition:opacity .18s ease, transform .18s ease; }
.sc-wl-grid .scfc__wishlist{ display:none !important; } /* the heart is redundant here; Remove does it */
.sc-wl-grid .sc-wl-oos .scfc__image img{ filter:grayscale(.6); opacity:.75; }

.sc-wl-card-foot{ margin-top:auto; padding:10px 12px 12px; border-top:1px dashed rgba(28,58,42,.16); display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.sc-wl-card-foot__row{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.sc-wl-drop{ color:#0b7a3b; font-weight:800; }
.sc-wl-oosflag{ color:#b32d2e; font-weight:900; }
.sc-wl-card-foot__actions{ justify-content:space-between; }
.sc-wl-remove{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; cursor:pointer;
  border:1px solid rgba(28,58,42,.18); background:#fff; color:#1C3A2A; font-weight:800; font-size:12px; line-height:1;
}
.sc-wl-remove svg{ width:14px; height:14px; fill:currentColor; }
.sc-wl-remove:hover{ border-color:rgba(226,75,74,.5); color:#b32d2e; }
.sc-wl-remove:disabled{ opacity:.55; pointer-events:none; }
/* SC Back in Stock widget embedded in an out-of-stock card: let it take the row, Remove sits after it. */
/* SC Back in Stock widget embedded in an out-of-stock card: its PDP styling is a full-width
   slab for the purchase column; here it becomes a compact pill matching Stats / Buy. */
.sc-wl-card-foot__actions{ gap:8px; }
.sc-wl-bis{ flex:1 1 auto; min-width:0; }
.sc-wl-bis .scbis{ margin:0 !important; }
.sc-wl-bis .scbis__btn{
  width:100% !important; min-height:0 !important; padding:7px 12px !important; gap:6px !important;
  border-radius:999px !important; font-size:12px !important; font-weight:900 !important; line-height:1.15 !important;
  background:rgba(255,214,0,.16) !important; border:1px solid rgba(255,214,0,.55) !important; color:#1C3A2A !important;
  text-align:left !important; white-space:normal !important;
}
.sc-wl-bis .scbis__btn:hover,.sc-wl-bis .scbis__btn:focus-visible{ background:rgba(255,214,0,.3) !important; border-color:#1C3A2A !important; }
.sc-wl-bis .scbis__bell{ flex:0 0 auto; }
.sc-wl-bis .scbis__done{ min-height:0 !important; padding:7px 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important; }
.sc-wl-bis .scbis__more{ font-size:12px !important; }
.sc-wl-oosflag{ display:inline-flex; align-items:center; gap:6px; }
.sc-wl-oosflag::before{ content:""; width:8px; height:8px; border-radius:999px; background:#b32d2e; }
.sc-wl-none{ padding:24px; text-align:center; color:#4b5563; font-weight:700; }

.sc-wl-handoff{ margin-bottom:18px; }
.sc-wl-handoff__form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Dashboard tile sits under account-polish's grid */
.sc-acct-dashboard-grid--wishlist{ margin-top:16px; }