/* AShopper customer lists: save-for-later, wishlist, groups */
.cl-panel { margin-top: 1.75rem; padding: 1.25rem 1.4rem; border-radius: 18px; border: 1px solid rgba(131,199,255,0.16); background: rgba(10,28,51,0.78); }
.cl-panel__head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1rem; }
.cl-panel__head h2, .cl-panel__head h3 { margin:0; }
.cl-panel__head p { margin:0.25rem 0 0; color: rgba(236,247,255,0.72); font-size:0.92rem; }
.cl-row { display:grid; grid-template-columns: 72px 1fr auto; gap:0.9rem; align-items:center; padding:0.85rem 0; border-top:1px solid rgba(131,199,255,0.10); }
.cl-row:first-of-type { border-top:0; }
.cl-row__meta { display:flex; flex-direction:column; gap:0.2rem; }
.cl-row__meta strong { color:#fff; }
.cl-row__meta span, .cl-row__meta small { color:rgba(236,247,255,0.72); font-size:0.86rem; }
.cl-row__actions { display:flex; flex-wrap:wrap; gap:0.45rem; justify-content:flex-end; }
.cl-empty { padding:1rem 0; color:rgba(236,247,255,0.78); }
.cl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.cl-card { border-radius:16px; border:1px solid rgba(131,199,255,0.14); background:rgba(8,24,44,0.9); padding:1rem; display:flex; flex-direction:column; gap:0.65rem; }
.cl-card__actions { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:auto; }
.cl-groups { display:grid; gap:1rem; }
.cl-group { border-radius:16px; border:1px solid rgba(131,199,255,0.14); background:rgba(8,24,44,0.88); padding:1rem 1.1rem; }
.cl-group__head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.cl-inline-form { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.cl-inline-form input[type="text"] { min-width:180px; border-radius:10px; border:1px solid rgba(131,199,255,0.22); background:rgba(255,255,255,0.04); color:#fff; padding:0.55rem 0.75rem; }
.cl-share { margin-top:0.75rem; padding:0.75rem 0.9rem; border-radius:12px; background:rgba(47,140,255,0.12); border:1px solid rgba(111,208,239,0.28); word-break:break-all; }
.cl-share code { color:#9fe7ff; }
.wishlist-btn, .wishlist-btn--card { appearance:none; border:1px solid rgba(131,199,255,0.28); background:rgba(255,255,255,0.04); color:#fff; border-radius:999px; padding:0.45rem 0.85rem; font-weight:700; cursor:pointer; }
.wishlist-btn.is-on, .wishlist-btn--card.is-on { background:#6fd0ef; color:#0b2a6b; border-color:#fff; }
.wishlist-btn--card { position:absolute; top:0.55rem; left:0.55rem; z-index:3; min-width:2rem; height:2rem; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.catalog-card { position:relative; }
.product-market__wishlist { margin-top:0.75rem; }
.cart-row__remove { display:flex; flex-direction:row; flex-wrap:wrap; gap:0.5rem; align-items:stretch; }
@media (max-width: 720px) {
  .cl-row { grid-template-columns: 64px 1fr; }
  .cl-row__actions { grid-column: 1 / -1; justify-content:flex-start; }
}

.wishlist-btn-wrap { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 3; }
.product-card, .catalog-card { position: relative; }
.product-market__wishlist { margin-top: 0.75rem; }

/* --- Gift wishlists + Want lists (2026-10-16) --- */
.cl-form { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:0.85rem; align-items:end; }
.cl-form label { display:flex; flex-direction:column; gap:0.35rem; font-size:0.88rem; color:rgba(236,247,255,0.82); }
.cl-form__wide { grid-column: 1 / -1; }
.cl-form__actions { grid-column: 1 / -1; display:flex; gap:0.5rem; }
.cl-form input[type="text"], .cl-form input[type="date"], .cl-form select, .cl-form textarea,
.cl-inline-form select, .cl-inline-form input[type="number"], .cl-share input[type="text"] {
  border-radius:10px; border:1px solid rgba(131,199,255,0.22); background:rgba(255,255,255,0.04); color:#fff; padding:0.55rem 0.75rem; font:inherit;
}
.cl-form select option, .cl-inline-form select option { color:#0b2a6b; }
.cl-form textarea { resize:vertical; min-height:3rem; }
.cl-share label { display:block; font-size:0.82rem; color:rgba(236,247,255,0.72); margin-bottom:0.35rem; }
.cl-share input[type="text"] { width:100%; color:#9fe7ff; }
.cl-qty { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.82rem; color:rgba(236,247,255,0.72); }
.cl-qty input[type="number"] { width:4.5rem; padding:0.4rem 0.5rem; }
.cl-meta { display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; margin:0.35rem 0 0; color:rgba(236,247,255,0.72); font-size:0.86rem; }
.cl-muted { color:rgba(236,247,255,0.65); font-size:0.86rem; }
.cl-muted a, .cl-panel__head p a, .cl-notices a { color:#9fe7ff; }
.cl-group h3 a, .cl-row__meta strong a, .cl-panel__head h2 a { color:#fff; text-decoration:none; }
.cl-group h3 a:hover, .cl-row__meta strong a:hover, .cl-panel__head h2 a:hover { text-decoration:underline; }
.cl-pill { display:inline-flex; align-items:center; padding:0.12rem 0.55rem; border-radius:999px; font-size:0.76rem; font-weight:700; background:rgba(131,199,255,0.14); color:#d8f1ff; border:1px solid rgba(131,199,255,0.2); vertical-align:middle; }
.cl-pill--on { background:rgba(99,244,109,0.16); color:#b9ffbf; border-color:rgba(99,244,109,0.35); }
.cl-pill--gifted { background:rgba(255,196,87,0.18); color:#ffd98a; border-color:rgba(255,196,87,0.4); }
.cl-stock { font-weight:700; font-size:0.8rem; }
.cl-stock--in { color:#8ef59a; }
.cl-stock--out { color:#ff9c9c; }
.cl-card--gifted { opacity:0.72; }
.cl-note p { margin:0; color:rgba(236,247,255,0.86); }
.cl-notices { margin-top:1.25rem; padding:0.9rem 1.1rem; border-radius:14px; background:rgba(255,196,87,0.12); border:1px solid rgba(255,196,87,0.38); color:#ffe9bd; }
.cl-notices__head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.cl-notices__list { list-style:none; margin:0.6rem 0 0; padding:0; display:grid; gap:0.45rem; }
.cl-notices__list li { display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:0.9rem; }
.cl-notices__dismiss { appearance:none; background:none; border:0; color:#ffd98a; text-decoration:underline; cursor:pointer; font:inherit; font-size:0.82rem; }
.product-market__lists { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.75rem; }
.product-market__lists .product-market__wishlist { margin-top:0; }
.product-market__lists select { max-width:12rem; }
.product-market__lists .cl-muted a { text-decoration:underline; }
.ash-list-dot { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem; padding:0 0.3rem; margin-left:0.25rem; border-radius:999px; background:#ff6b6b; color:#fff; font-style:normal; font-size:0.7rem; font-weight:800; line-height:1; vertical-align:middle; }
/* contrast fixes: list panels sit on the light page background */
.cl-panel { color:rgba(236,247,255,0.9); }
.cl-panel h2, .cl-panel h3, .cl-group h3, .cl-card strong { color:#fff; }
.cl-card span, .cl-card small { color:rgba(236,247,255,0.78); }
.cl-card .cl-pill--gifted { color:#ffd98a; }
.cl-card .cl-stock--in { color:#8ef59a; }
.cl-card .cl-stock--out { color:#ff9c9c; }
.product-market__lists select { border-radius:10px; border:1px solid rgba(11,42,107,0.28); background:#fff; color:#0b2a6b; padding:0.4rem 0.6rem; font:inherit; font-size:0.86rem; }
.product-market__lists .cl-muted { color:#4a5b75; }
.product-market__lists .cl-muted a { color:#1d76ff; }

/* === Customer-list buttons (2026-10-16, rev 2) ===
   Two colors only: every list button is one light green; wishlist/favorite (heart) buttons stay rose.
   Destructive actions keep the green fill with dark red text. All text pairs meet WCAG AA (>= 4.5:1).
   Focus ring = site --secondary #1d76ff. Scoped to .cl-btn only (doubled class so it beats the
   generic .button / .wishlist-btn paint). */
.cl-btn.cl-btn {
  --cl-bg: #d3f9d8; --cl-fg: #14532d; --cl-bd: #69db7c;
  --cl-bg-h: #b2f2bb; --cl-bg-a: #9be8a6;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  box-sizing: border-box; min-height: 40px; padding: 0.55rem 1rem;
  border-radius: 999px; border: 1px solid var(--cl-bd);
  background: var(--cl-bg); color: var(--cl-fg);
  font: inherit; font-size: 0.88rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.01em;
  white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.cl-btn.cl-btn:hover { background: var(--cl-bg-h); color: var(--cl-fg); border-color: var(--cl-bd); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(1, 8, 18, 0.22); text-decoration: none; }
.cl-btn.cl-btn:active { background: var(--cl-bg-a); transform: translateY(0); box-shadow: none; }
.cl-btn.cl-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1d76ff; }
.cl-btn.cl-btn:disabled, .cl-btn.cl-btn.is-disabled, .cl-btn.cl-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(0.6);
}

/* Light green (default) for want / buy / soft: #14532d on #d3f9d8 = 7.9:1, on hover #b2f2bb = 7.1:1.
   The modifier classes stay in the markup so either group can be re-colored later. */
.cl-btn.cl-btn--want, .cl-btn.cl-btn--buy, .cl-btn.cl-btn--soft { --cl-bg: #d3f9d8; --cl-fg: #14532d; --cl-bd: #69db7c; --cl-bg-h: #b2f2bb; --cl-bg-a: #9be8a6; }

/* Destructive (Remove, Turn off sharing, Delete): same green fill, dark red text (#991b1b = 7.3:1) */
.cl-btn.cl-btn--danger { --cl-bg: #d3f9d8; --cl-fg: #991b1b; --cl-bd: #69db7c; --cl-bg-h: #b2f2bb; --cl-bg-a: #9be8a6; }

/* Wishlist / favorite (heart): rose (white on #d6336c = 4.6:1) */
.cl-btn.cl-btn--wish { --cl-bg: #d6336c; --cl-fg: #ffffff; --cl-bd: #d6336c; --cl-bg-h: #c2255c; --cl-bg-a: #a61e4d; }
/* "already on your wishlist": light rose (6.6:1) */
.cl-btn.cl-btn--wish.is-on { --cl-bg: #ffe4ee; --cl-fg: #9d174d; --cl-bd: #d6336c; --cl-bg-h: #ffd0e0; --cl-bg-a: #ffbcd3; }

/* Compact (per-notice Dismiss) */
.cl-btn.cl-btn--xs { min-height: 30px; padding: 0.3rem 0.75rem; font-size: 0.8rem; text-decoration: none; }

/* Rows of list buttons: same height, wrap cleanly on phones */
.cl-row__actions .cl-btn, .cl-card__actions .cl-btn, .cl-inline-form .cl-btn, .cl-form__actions .cl-btn,
.cl-panel__head .cl-btn, .cl-notices__head .cl-btn { min-height: 40px; }
.cl-card__actions form { display: flex; margin: 0; }
.product-market__lists .cl-inline-form .cl-btn { min-height: 40px; }
.product-market__lists .cl-inline-form select { min-height: 40px; }
.cart-market .cart-row__remove .cl-btn, .cart-market .cl-row__actions form .cl-btn { min-height: 40px; }
@media (max-width: 720px) {
  .cl-btn.cl-btn { padding: 0.55rem 0.85rem; }
  .cl-card__actions .cl-btn, .cl-card__actions form { flex: 1 1 auto; }
  .product-market__lists .cl-inline-form .cl-btn { flex: 1 1 auto; }
}

/* === Natural product photos (2026-10-16) ===
   The decorative .product-visual__orb (absolute radial gradient of --visual-ambient, usually green #63f46d,
   opacity 0.7-0.8) is a positioned element, so it painted ON TOP of the static product photo and washed it
   green. The site already hides it for shelf cards, gift-card tiles and cart thumbnails; hide it everywhere a
   real photo is shown. Illustrated (SVG art) visuals keep their orb. Frame, corners and category tag unchanged. */
.product-visual:has(.product-visual__photo img) .product-visual__orb { display: none; }