.tfwl-wishlist-grid, .tfwl-wishlist-grid *{ box-sizing:border-box; }
.tfwl-wishlist-grid{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.tfwl-wishlist-grid a{ color:inherit; text-decoration:none; }
.tfwl-wishlist-grid button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.tfwl-wishlist-grid .container{ max-width:1360px; margin:0 auto; padding:60px 40px 90px; }
.tfwl-wishlist-grid .section{ padding:0; }

/* Grid */
.tfwl-wishlist-grid .wishlist-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC;
}

/* Product card — same visual language as the homepage's New Arrivals card.
   Cards sit edge-to-edge (no grid gap, matching Figma) with only a
   right/bottom border each, so shared edges get a single hairline instead
   of doubling up with the neighboring card's own border. */
.tfwl-wishlist-grid .product-card{
  background:#fff; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;
  overflow:hidden; transition: opacity .25s ease, transform .25s ease;
}
.tfwl-wishlist-grid .product-card.is-removing{ opacity:0; transform: scale(.96); }
.tfwl-wishlist-grid .product-media{ position:relative; aspect-ratio:1/1; background:#FBF4E8; overflow:hidden; }
.tfwl-wishlist-grid .product-media > a{ position:absolute; inset:0; display:block; }
.tfwl-wishlist-grid .product-media img{ width:100%; height:100%; object-fit:cover; }
/* Main + hover-swap photo are stacked in the same box so the crossfade
   below never shifts layout. */
.tfwl-wishlist-grid .product-media-img-main,
.tfwl-wishlist-grid .product-media-img-hover{ position:absolute; inset:0; transition: opacity .35s ease; }
.tfwl-wishlist-grid .product-media-img-hover{ opacity:0; }
/* Only swap on a real mouse hover — on a touchscreen there's no true hover
   state (tap simulates :hover with no mouse-leave to clear it), so gating
   on the device's actual pointer/hover capability avoids the image getting
   "stuck" showing the hover photo after a tap. */
@media (hover:hover) and (pointer:fine){
  .tfwl-wishlist-grid .product-card:hover .product-media-img-hover{ opacity:1; }
  .tfwl-wishlist-grid .product-card:hover .product-media-img-main{ opacity:0; }
}
.tfwl-wishlist-grid .media-header{ position:absolute; top:15px; left:20px; right:20px; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.tfwl-wishlist-grid .media-header-left{ display:flex; align-items:center; gap:5px; }
.tfwl-wishlist-grid .badge{ font-size:9px; font-weight:300; letter-spacing:.12em; text-transform:uppercase; padding:8px 12px; color:#0F0F0F; line-height:1; white-space:nowrap; }
.tfwl-wishlist-grid .badge-sage{ background:#E7E6D0; }
.tfwl-wishlist-grid .badge-mauve{ background:#E3CFCF; }
.tfwl-wishlist-grid .badge-peach{ background:#FFE2A4; }

.tfwl-wishlist-grid .heart-btn{
  width:36px; height:36px; padding:0; border-radius:50%; background:#FFFEFB; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#0F0F0F; transition: all .2s ease;
  box-shadow:0 2px 6px rgba(15,15,15,.15); overflow:hidden; position:relative;
}
.tfwl-wishlist-grid .heart-btn > *{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.tfwl-wishlist-grid .heart-btn svg{ width:15px; height:15px; display:block; }
.tfwl-wishlist-grid .heart-btn:hover{ color:#C9504A; }
.tfwl-wishlist-grid .heart-btn:disabled{ opacity:.5; cursor:default; }
/* Every card here is, by definition, already in the wishlist — the button
   is always in its "remove" state, so it's always tinted gold (same tone
   the sibling New Arrivals card uses for its own "already saved" state),
   never the plain ink-outline "not yet added" look. */
.tfwl-wishlist-grid .heart-btn.is-added{ color:#C99E43; }

.tfwl-wishlist-grid .rating{ font-size:11px; font-weight:400; color:#0F0F0F; flex-shrink:0; display:flex; align-items:center; gap:4px; letter-spacing:.05em; }
.tfwl-wishlist-grid .rating svg{ color:#C99E43; }
.tfwl-wishlist-grid .product-info{ padding:20px; }
.tfwl-wishlist-grid .product-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tfwl-wishlist-grid .product-titleblock h3{ font-size:14px; font-weight:500; font-family:inherit; margin:0; }
.tfwl-wishlist-grid .price{ font-weight:500; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#757575; white-space:nowrap; }
.tfwl-wishlist-grid .product-sub{ font-size:11px; letter-spacing:.06em; color:#757575; margin-top:4px; text-transform:uppercase; }
.tfwl-wishlist-grid .swatches{ display:flex; flex-wrap:wrap; gap:4px; margin-top:14px; }
.tfwl-wishlist-grid .swatch{
  display:block; width:19px; height:19px; border-radius:50%; background-color:var(--c, #f8f5f2);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1.6px solid var(--b,#fff); cursor:pointer; position:relative;
}
.tfwl-wishlist-grid .swatch.active{ border-width:0.8px; border-color:#000; }

/* Empty state */
.tfwl-wishlist-grid .wishlist-empty{ text-align:center; padding:100px 20px; max-width:480px; margin:0 auto; }
.tfwl-wishlist-grid .wishlist-empty-heading{
  font-family:'Playfair Display',Georgia,serif; font-size:26px; font-weight:500; color:#0F0F0F; margin:0 0 10px;
}
.tfwl-wishlist-grid .wishlist-empty-text{ font-size:14px; color:#757575; margin:0 0 28px; line-height:1.6; }
.tfwl-wishlist-grid .wishlist-empty-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; font-size:14px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; border-radius:2px; background:#C99E43; color:#FFFEFB;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.tfwl-wishlist-grid .wishlist-empty-btn:hover{ background:#B08A38; transform:translateY(-1px); box-shadow:0 8px 22px rgba(201,158,66,.35); }
.tfwl-wishlist-grid .wishlist-empty-btn .arrow{ display:inline-block; transition: transform .25s ease; }
.tfwl-wishlist-grid .wishlist-empty-btn:hover .arrow{ transform:translateX(3px); }

@media (max-width:1100px){
  .tfwl-wishlist-grid .wishlist-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width:980px){
  .tfwl-wishlist-grid .container{ padding:40px 24px 60px; }
}
@media (max-width:640px){
  .tfwl-wishlist-grid .wishlist-grid{ grid-template-columns: repeat(1, 1fr) !important; }
  .tfwl-wishlist-grid .product-info{ padding:14px; }
  .tfwl-wishlist-grid .product-titleblock h3{ font-size:13px; }
  .tfwl-wishlist-grid .wishlist-empty{ padding:60px 20px; }
}