/*
 * /wishlist/
 *
 * ⚑ IN pages/ RATHER THAN woo.css, and that is load-bearing. woo.css is enqueued only on the shop
 * screens — is_woocommerce() plus cart, checkout and account — and the wishlist is an ordinary
 * page, so none of woo.css reaches it. bebold_page_css_slug() matches this file to the page's
 * `wishlist` slug and loads it automatically; there is no template to assign and nothing to
 * register.
 *
 * Same trap the out-of-stock card badge fell into on 9 Sep 2026, when it was written in woo.css and
 * therefore did nothing on the homepage.
 *
 * The cards deliberately do NOT reuse .card from shell.css. That component is a 4:3 landscape
 * lifestyle frame built for the collection grid; a wishlist row wants the product's own portrait
 * shot at a small size beside its name, which is a different shape with a different crop.
 */

/* .rule has `margin:22px 0 0` and no bottom margin, so the gap under it belongs to whatever
 * follows — without a top margin here the note sat directly against the gold rule. */
.wish-note{
  font-size:.72rem;line-height:1.7;color:var(--muted);
  margin:clamp(24px,3vw,32px) 0 clamp(24px,3vw,34px);
  max-width:52ch;
}

.wish-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--hair);max-width:760px;
}
/*
 * ⚑ Needed because `display:grid` above is an AUTHOR rule and `[hidden]{display:none}` is only in
 * the UA stylesheet, so the author rule wins and an empty grid would draw its top border above the
 * "Nothing saved yet" message. Same trap as .cart-drawer[hidden] and .prod-wish-row[hidden].
 */
.wish-grid[hidden]{display:none}

/*
 * A row, not a tile: image left, facts right. `align-items:start` so a bag with no subtitle does
 * not centre its name against a 120px-tall photograph.
 */
.wish-card{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,2vw,24px);
  align-items:start;padding:clamp(18px,2.2vw,24px) 0;border-bottom:1px solid var(--hair);
}

.wish-card-media{
  display:block;background:var(--sand-hi);border:1px solid var(--hair);padding:4px;
}
/* `contain`, for the same reason as the colour chips: these are whole-bag portraits and covering a
 * short box crops the handle away. */
.wish-card-media img{display:block;width:100%;height:120px;object-fit:contain}

.wish-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

.wish-card-title{
  font-family:'Poppins',system-ui,sans-serif;font-weight:500;font-size:1.05rem;line-height:1.25;
  color:var(--green);margin:0;letter-spacing:-.005em;
}
.wish-card-title a{color:inherit;text-decoration:none}
.wish-card-title a:hover{text-decoration:underline;text-underline-offset:3px}

.wish-card-sub{font-size:.8rem;line-height:1.6;color:var(--muted);margin:0}
.wish-card-price{font-size:.95rem;color:var(--ink);letter-spacing:.02em;margin:4px 0 0}

/*
 * "Sold out", and it can only ever come from the SECOND paint — a saved record has no idea whether
 * the bag is still in stock, so site.js §13 sets in_stock from the live lookup. The same treatment
 * as the shop card's .card-flag: the site's one non-brand red, used only where something is
 * genuinely unavailable.
 */
.wish-card-flag{
  margin:6px 0 0;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--error);
}

/*
 * "Remove" is a real <button>, styled as a quiet link. It sits last so a mis-tap while reading
 * lands on the product name rather than on the destructive control.
 */
.wish-card-remove{
  margin:8px 0 0;padding:0;background:none;border:0;
  font-family:inherit;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;border-bottom:1px solid var(--hair);
  transition:color .25s ease,border-color .25s ease;
}
.wish-card-remove:hover{color:var(--error);border-color:var(--error)}

.wish-empty{max-width:52ch}

@media (max-width:520px){
  /* Below this the 96px column plus a 24px gap leaves too little for a price on one line. */
  .wish-card{grid-template-columns:72px minmax(0,1fr)}
  .wish-card-media img{height:96px}
}