/* ==========================================================================
   HOCO REDESIGN — 80 WISHLIST & COMPARE
   Styles Woodmart's Wishlist page + Compare page/table, their empty states,
   and the wishlist/compare ICON states on product-loop cards.
   Design language matches /test (00-core.css tokens). RTL + responsive.
   Scope: ONLY wishlist/compare chrome. Does NOT restyle the product card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Shared EMPTY-STATE (wishlist + compare) -> clean centered card
   -------------------------------------------------------------------------- */
.wd-wishlist-content:has(.wd-empty-wishlist),
.entry-content:has(> .wd-empty-compare),
.wd-compare-content:has(.wd-empty-compare){
  display:block;
}
.wd-empty-wishlist.wd-empty-page,
.wd-empty-compare.wd-empty-page{
  max-width:620px;
  margin:24px auto 0;
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);
  padding:38px 26px 14px;
  text-align:center;
  font-size:20px;
  font-weight:800;
  color:var(--hoco-ink);
}
.wd-empty-wishlist.wd-empty-page::before,
.wd-empty-compare.wd-empty-page::before{
  content:"";
  display:block;
  width:64px;height:64px;
  margin:0 auto 16px;
  border-radius:50%;
  background:#f4eef6;
  background-size:30px 30px;
  background-position:center;
  background-repeat:no-repeat;
}
.wd-empty-wishlist.wd-empty-page::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23540457' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}
.wd-empty-compare.wd-empty-page::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23540457' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3C/svg%3E");
}
.wd-empty-page-text{
  max-width:620px;
  margin:6px auto 0;
  text-align:center;
  color:var(--hoco-muted);
  font-size:15px;
  line-height:1.7;
}
.wd-wishlist-content .return-to-shop,
.entry-content > .return-to-shop{
  text-align:center;
  margin:22px 0 8px;
}
.wd-wishlist-content .return-to-shop .button,
.entry-content > .return-to-shop .button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--hoco-brand) !important;color:#fff !important;
  border:0 !important;border-radius:var(--hoco-radius-sm) !important;
  padding:12px 26px !important;font-weight:700 !important;
  transition:background .2s;
}
.wd-wishlist-content .return-to-shop .button:hover,
.entry-content > .return-to-shop .button:hover{
  background:var(--hoco-brand-dark) !important;color:#fff !important;
}

/* --------------------------------------------------------------------------
   2) WISHLIST page chrome (grid layout — card itself owned by product agent)
   -------------------------------------------------------------------------- */
.wd-wishlist-content:not(:has(.wd-empty-wishlist)){
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);
  padding:18px 18px 22px;
}

/* group / title bar */
.wd-wishlist-content .wd-wishlist-group-title,
.wd-wishlist-content > .title,
.wd-wishlist-content .wd-wishlist-title{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--hoco-line);
}
.wd-wishlist-content h4.title,
.wd-wishlist-group-title h4.title{
  margin:0;font-size:20px;font-weight:800;color:var(--hoco-ink);
}

/* group dropdown action trigger */
.wd-wishlist-group-action .wd-dropdown-wishlist-group{
  border-radius:var(--hoco-radius-sm);
  border:1px solid var(--hoco-line);
  box-shadow:var(--hoco-shadow);
  overflow:hidden;padding:4px;
}
.wd-dropdown-wishlist-group a{border-radius:8px;padding:8px 12px;font-weight:600;}
.wd-dropdown-wishlist-group a:hover{background:#f4eef6;color:var(--hoco-brand);}

/* inline rename editor */
.wd-wishlist-input-rename{
  border:1.5px solid var(--hoco-line) !important;
  border-radius:var(--hoco-radius-sm) !important;
  padding:8px 12px !important;
}
.wd-wishlist-input-rename:focus{border-color:var(--hoco-brand) !important;}
.btn.wd-wishlist-rename-save{
  background:var(--hoco-brand) !important;color:#fff !important;
  border:0 !important;border-radius:var(--hoco-radius-sm) !important;
  padding:8px 18px !important;font-weight:700 !important;
}
.btn.wd-wishlist-rename-save:hover{background:var(--hoco-brand-dark) !important;}

/* bulk actions toolbar */
.wd-wishlist-bulk-action{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:2px 0 18px;padding:10px 12px;
  background:var(--hoco-bg);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius-sm);
}
.wd-wishlist-bulk-action .wd-action-btn > a,
.wd-wishlist-bulk-action .wd-action-btn{
  font-weight:600;color:var(--hoco-ink);
}
.wd-wishlist-bulk-action .wd-action-btn:hover > a,
.wd-wishlist-bulk-action .wd-action-btn:hover{color:var(--hoco-brand);}
.wd-wishlist-remove-action:hover > a,
.wd-wishlist-remove-action:hover{color:var(--hoco-danger) !important;}

/* per-product remove pill + checkbox (overlaid on card) */
.wd-wishlist-product-actions{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:8px;
}
.wd-wishlist-product-remove > a,
.wd-wishlist-product-remove.wd-action-btn > a{
  color:var(--hoco-muted);font-weight:600;transition:color .2s;
}
.wd-wishlist-product-remove:hover > a{color:var(--hoco-danger);}
.wd-wishlist-checkbox{
  width:18px;height:18px;border-radius:5px;
  accent-color:var(--hoco-brand);cursor:pointer;
}

/* fallback: classic YITH-style wishlist table, if ever rendered */
table.wishlist_table{
  border-collapse:separate;border-spacing:0;width:100%;
  border:1px solid var(--hoco-line);border-radius:var(--hoco-radius);
  overflow:hidden;background:var(--hoco-surface);
}
table.wishlist_table thead th,
table.wishlist_table .product-name th{
  background:var(--hoco-brand);color:#fff;font-weight:700;
  padding:14px 16px;text-align:start;
}
table.wishlist_table td{
  padding:14px 16px;border-top:1px solid var(--hoco-line);vertical-align:middle;
}
table.wishlist_table .product-remove a{color:var(--hoco-danger);font-weight:700;}

/* --------------------------------------------------------------------------
   3) COMPARE page + table
   -------------------------------------------------------------------------- */
.wd-compare-page{margin-top:6px;}

/* category selector / actions bar */
.wd-compare-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;padding:14px 16px;
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);
}
.wd-compare-select-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wd-compare-select-wrap .title{margin:0;font-weight:700;color:var(--hoco-ink);}
.wd-compare-select{
  border:1.5px solid var(--hoco-line) !important;
  border-radius:var(--hoco-radius-sm) !important;
  padding:9px 14px !important;font-weight:600;min-width:180px;
}
.wd-compare-select:focus{border-color:var(--hoco-brand) !important;}
.wd-compare-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn.wd-compare-cat-link{
  background:var(--hoco-brand) !important;color:#fff !important;
  border:0 !important;border-radius:var(--hoco-radius-sm) !important;
  padding:10px 18px !important;font-weight:700 !important;
}
.btn.wd-compare-cat-link:hover{background:var(--hoco-brand-dark) !important;}
.btn.wd-compare-remove-cat{
  background:#fff !important;color:var(--hoco-danger) !important;
  border:1.5px solid var(--hoco-danger) !important;
  border-radius:var(--hoco-radius-sm) !important;
  padding:10px 18px !important;font-weight:700 !important;
}
.btn.wd-compare-remove-cat:hover{background:var(--hoco-danger) !important;color:#fff !important;}

/* the table scrolls horizontally inside its own container */
.wd-compare-content{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);
  background:var(--hoco-surface);
}
/* when no category tabs, table is a direct child of entry-content */
.entry-content > table.wd-compare-table,
.entry-content > table.compare-list{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hoco-line);border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);background:var(--hoco-surface);
}

table.wd-compare-table,
table.compare-list{
  border-collapse:collapse;width:100%;margin:0;
  background:var(--hoco-surface);color:var(--hoco-ink);
}
table.wd-compare-table td,
table.wd-compare-table th,
table.compare-list td,
table.compare-list th{
  border:0;border-bottom:1px solid var(--hoco-line);
  padding:14px 18px;text-align:start;vertical-align:middle;
}

/* field label column (first cell of each row) — brand tint */
table.wd-compare-table th.compare-field,
table.compare-list th.compare-field,
table.compare-list td.tinvwl-txt,
table.compare-list th{
  background:#f7f2f8;
  color:var(--hoco-brand);
  font-weight:800;
  white-space:nowrap;
  position:sticky;inset-inline-start:0;z-index:1;
}

/* header product row (basic) */
table.wd-compare-table tr.compare-basic td,
table.compare-list tr.compare-basic td,
table.wd-compare-table tr:first-child td{
  background:var(--hoco-surface);
  border-bottom:2px solid var(--hoco-line);
  padding-top:18px;padding-bottom:18px;
}
.wd-compare-table .product-image{
  display:block;max-width:150px;margin:0 auto 10px;
  border-radius:var(--hoco-radius-sm);overflow:hidden;background:#f7f5f8;
}
.wd-compare-table .product-image img{
  width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply;padding:6px;
}
.wd-compare-table .wd-entities-title{
  display:block;font-size:14px;font-weight:600;line-height:1.5;
  color:var(--hoco-ink);margin:4px 0 8px;
}
.wd-compare-table .wd-entities-title:hover{color:var(--hoco-brand);}
.wd-compare-table .price,
table.wd-compare-table .price .amount{
  color:var(--hoco-price);font-weight:800;font-size:16px;
}
.wd-compare-brand{color:var(--hoco-muted);font-size:13px;margin-top:4px;}

/* zebra for value rows for readability */
table.wd-compare-table tr:nth-child(even) td.compare-value,
table.compare-list tr:nth-child(even) td.compare-value{
  background:#faf9fb;
}

/* remove buttons in compare header */
.wd-compare-remove-action{margin-bottom:8px;}
.wd-compare-remove-action > a,
.wd-compare-remove{
  color:var(--hoco-muted);font-weight:600;transition:color .2s;
}
.wd-compare-remove-action:hover > a,
.wd-compare-remove:hover,
a.compare-remove-button:hover{color:var(--hoco-danger);}

/* add-to-cart / action buttons inside compare cells -> brand */
table.wd-compare-table .button,
table.compare-list .button{
  background:var(--hoco-brand) !important;color:#fff !important;border:0 !important;
  border-radius:var(--hoco-radius-sm) !important;font-weight:700 !important;
}
table.wd-compare-table .button:hover,
table.compare-list .button:hover{background:var(--hoco-brand-dark) !important;}

/* --------------------------------------------------------------------------
   4) Product-card ICON states (wishlist heart + compare toggle) — ONLY states
   Do not restyle the card; just recolor hover + active to brand.
   -------------------------------------------------------------------------- */
.product-grid-item .wd-wishlist-btn > a:hover,
.product-grid-item .wd-compare-btn > a:hover,
.wd-products .wd-wishlist-btn > a:hover,
.wd-products .wd-compare-btn > a:hover{
  color:var(--hoco-brand);
}
/* active / added state -> brand fill */
.wd-wishlist-btn > a.added,
.wd-wishlist-btn.wd-added > a,
.wd-compare-btn > a.added,
.wd-compare-btn.wd-active > a,
.product-compare-button > a.added{
  color:var(--hoco-brand) !important;
}
.wd-wishlist-btn > a.added:before,
.wd-wishlist-btn.wd-added > a:before,
.wd-compare-btn > a.added:before,
.wd-compare-btn.wd-active > a:before,
.product-compare-button > a.added:before{
  color:var(--hoco-brand) !important;
}

/* --------------------------------------------------------------------------
   5) RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .wd-empty-wishlist.wd-empty-page,
  .wd-empty-compare.wd-empty-page{padding:30px 18px 12px;font-size:18px;}
  .wd-compare-header{flex-direction:column;align-items:stretch;}
  .wd-compare-actions{justify-content:flex-start;}
  table.wd-compare-table td,
  table.wd-compare-table th,
  table.compare-list td,
  table.compare-list th{padding:12px 14px;}
  .wd-compare-table .product-image{max-width:120px;}
  /* keep table wide so it scrolls horizontally inside its container */
  table.wd-compare-table,
  table.compare-list{min-width:560px;}
  .wd-wishlist-content:not(:has(.wd-empty-wishlist)){padding:14px 12px 18px;}
}