/* Higgles Ice – Flavorites Plugin Styles
   Palette drawn from the Higgles Ice theme:
     Brown (text/borders): #3d1f0f
     Amber (accent/hover):  #fba51a
     Cream (backgrounds):   #faf7f2
   ─────────────────────────────────────── */

:root {
  --hw-brown:         #3d1f0f;
  --hw-amber:         #fba51a;
  --hw-amber-dark:    #e0920e;
  --hw-cream:         #faf7f2;
  --hw-border:        #e0d6c8;
  --hw-instock:       #4a7c3f;
  --hw-outofstock:    #9e3a2f;
  --hw-backorder:     #b06a10;
  --hw-radius:        50px;       /* pill — matches the site's soft card style */
  --hw-radius-sm:     8px;        /* for badges, table cells */
  --hw-font-size:     0.9rem;
}

/* ── Add to Flavorites button (product page / loop) ────────────────── */
/* Use !important on structural properties to beat the theme's broad button rule */

.hw-toggle-btn,
button.hw-toggle-btn,
.hw-toggle-anon,
button.hw-toggle-anon,
.woocommerce button.hw-toggle-btn,
.woocommerce button.hw-toggle-anon,
.woocommerce-page button.hw-toggle-btn,
.woocommerce-page button.hw-toggle-anon {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
  background:      transparent !important;
  border:          1.5px solid #3d1f0f !important;
  border-top:      1.5px solid #3d1f0f !important;
  border-right:    1.5px solid #3d1f0f !important;
  border-bottom:   1.5px solid #3d1f0f !important;
  border-left:     1.5px solid #3d1f0f !important;
  color:           #3d1f0f !important;
  border-radius:   50px !important;
  padding:         8px 22px !important;
  font-size:       0.9rem !important;
  font-weight:     500 !important;
  letter-spacing:  0.02em !important;
  cursor:          pointer !important;
  transition:      color 0.2s, border-color 0.2s, background 0.2s !important;
  margin-top:      8px !important;
  text-decoration: none !important;
  outline:         none !important;
  box-shadow:      none !important;
  line-height:     normal !important;
}

/* Lean into the theme hover — amber text + border, transparent bg */
.hw-toggle-btn:hover,
button.hw-toggle-btn:hover,
.hw-toggle-anon:hover,
button.hw-toggle-anon:hover,
.hw-toggle-btn.hw-in-wishlist,
button.hw-toggle-btn.hw-in-wishlist,
.woocommerce button.hw-toggle-btn:hover,
.woocommerce button.hw-toggle-anon:hover,
.woocommerce-page button.hw-toggle-btn:hover,
.woocommerce-page button.hw-toggle-anon:hover {
  color:           #fff !important;
  border-color:    #3d1f0f !important;
  background:      #3d1f0f !important;
  border:          1.5px solid #3d1f0f !important;
  border-bottom:   1.5px solid #3d1f0f !important;
  padding:         8px 22px !important;
  text-decoration: none !important;
}

/* Amber heart icon inside the filled button */
.hw-toggle-btn:hover .hw-heart,
.hw-toggle-btn.hw-in-wishlist .hw-heart {
  color: var(--hw-amber);
}

.hw-toggle-btn.hw-loading {
  opacity:        0.5;
  pointer-events: none;
}

/* ── Wishlist table wrapper ─────────────────────────────────────────── */

.hw-wishlist-wrap {
  font-size: var(--hw-font-size);
  color:     var(--hw-brown);
}

/* ── Table ──────────────────────────────────────────────────────────── */

.hw-table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   16px;
}

.hw-table th,
.hw-table td {
  padding:        10px 12px;
  border-bottom:  1px solid var(--hw-border);
  vertical-align: middle;
  color:          var(--hw-brown);
}

.hw-table thead th {
  background:  var(--hw-cream);
  text-align:  left;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--hw-border);
}

/* ── Sort buttons ───────────────────────────────────────────────────── */

.hw-sort {
  background:  none;
  border:      none;
  padding:     0;
  font-weight: 700;
  cursor:      pointer;
  color:       inherit;
  font-size:   inherit;
  display:     inline-flex;
  align-items: center;
  gap:         4px;
}

.hw-sort:hover {
  color:          var(--hw-amber) !important;
  background:     none !important;
  border-bottom:  none !important;
  padding:        0 !important;
}

.hw-sort-icon {
  font-size: 0.75em;
  opacity:   0.5;
}

/* ── Column widths ──────────────────────────────────────────────────── */

.hw-col-img    { width: 72px; }
.hw-col-title  { }
.hw-col-stock  { width: 130px; white-space: nowrap; }
.hw-col-action { width: 90px;  text-align: center; }

.hw-col-img img {
  display:       block;
  width:         56px;
  height:        56px;
  object-fit:    cover;
  border-radius: var(--hw-radius-sm);
  border:        1px solid var(--hw-border);
}

/* ── Stock badge ────────────────────────────────────────────────────── */

.hw-stock-badge {
  display:       inline-block;
  padding:       3px 10px;
  border-radius: var(--hw-radius);
  font-size:     0.78em;
  font-weight:   600;
  letter-spacing: 0.03em;
}

.hw-stock--instock    { background: #eef6eb; color: var(--hw-instock);  border: 1px solid #c3debb; }
.hw-stock--outofstock { background: #fdf0ee; color: var(--hw-outofstock); border: 1px solid #f0c4be; }
.hw-stock--onbackorder{ background: #fef5e7; color: var(--hw-backorder); border: 1px solid #f5d9a0; }

/* ── Remove button ──────────────────────────────────────────────────── */

.hw-remove-btn {
  background:    transparent;
  border:        1px solid var(--hw-border);
  color:         #999;
  border-radius: var(--hw-radius);
  padding:       4px 12px;
  font-size:     0.8em;
  cursor:        pointer;
  transition:    color 0.15s, border-color 0.15s;
  margin-top:    0;
}

.hw-remove-btn:hover {
  color:          #fff !important;
  border-color:   var(--hw-brown) !important;
  background:     var(--hw-brown) !important;
  border-bottom:  1px solid var(--hw-brown) !important;
  padding:        4px 12px !important;
}

/* ── Pagination ─────────────────────────────────────────────────────── */

.hw-pagination {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  12px;
}

.hw-pagination button {
  background:    transparent;
  color:         var(--hw-brown);
  border:        1.5px solid var(--hw-brown);
  border-radius: var(--hw-radius);
  padding:       6px 18px;
  font-size:     var(--hw-font-size);
  cursor:        pointer;
  transition:    color 0.2s, border-color 0.2s;
  margin-top:    0;
}

.hw-pagination button:hover:not(:disabled) {
  color:          #fff !important;
  border-color:   var(--hw-brown) !important;
  background:     var(--hw-brown) !important;
  border-bottom:  1.5px solid var(--hw-brown) !important;
  padding:        6px 18px !important;
}

.hw-pagination button:disabled {
  opacity: 0.35;
  cursor:  default;
}

.hw-page-info {
  font-size: 0.82em;
  color:     #888;
}

/* ── Loading state ──────────────────────────────────────────────────── */

.hw-table-loading {
  opacity:        0.5;
  pointer-events: none;
}

/* ── Notification block ─────────────────────────────────────────────── */

.hw-notify-block {
  border:        1px solid var(--hw-border);
  border-radius: var(--hw-radius-sm);
  padding:       20px 24px;
  background:    var(--hw-cream);
  margin:        0 0 24px;
}

.hw-notify-description {
  margin: 0 0 12px;
  color:  var(--hw-brown);
}

.hw-notify-toggle {
  margin-top:    0;
  background:    transparent;
  color:         var(--hw-brown);
  border:        1.5px solid var(--hw-brown);
  border-radius: var(--hw-radius);
  padding:       8px 22px;
  font-size:     var(--hw-font-size);
  font-weight:   500;
  cursor:        pointer;
  transition:    color 0.2s, border-color 0.2s;
}

.hw-notify-toggle:hover {
  color:          #fff !important;
  border-color:   var(--hw-brown) !important;
  background:     var(--hw-brown) !important;
  border-bottom:  1.5px solid var(--hw-brown) !important;
  padding:        8px 22px !important;
}

.hw-notify-toggle.hw-notify-active {
  color:        var(--hw-amber);
  border-color: var(--hw-amber);
}

.hw-notify-form {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}

.hw-notify-label {
  display:     flex;
  align-items: center;
  gap:         6px;
  cursor:      pointer;
  font-size:   var(--hw-font-size);
  color:       var(--hw-brown);
}

.hw-notify-checkbox { cursor: pointer; }

.hw-notify-status {
  margin:     10px 0 0;
  font-size:  0.85em;
  min-height: 1.2em;
  color:      var(--hw-instock);
}

.hw-notify-status.hw-error { color: var(--hw-outofstock); }

/* ── Login notice ───────────────────────────────────────────────────── */

.hw-login-notice {
  font-style: italic;
  color:      #888;
}

/* ── Count bar ──────────────────────────────────────────────────────── */

.hw-count-bar {
  font-size: 0.82em;
  color:     #999;
}

/* ── Category filter bar ────────────────────────────────────────────── */

.hw-filter-bar {
  display:     flex;
  align-items: baseline;
  gap:         10px;
  flex-wrap:   wrap;
}

.hw-filter-bar label {
  font-weight: 600;
  font-size:   0.85em;
  color:       var(--hw-brown);
}

.hw-filter-bar select {
  font-size:     0.9em;
  padding:       5px 10px;
  border:        1px solid var(--hw-border);
  border-radius: var(--hw-radius-sm);
  background:    #fff;
  color:         var(--hw-brown);
}

/* ── Empty row ──────────────────────────────────────────────────────── */

.hw-empty-row {
  padding:    28px 12px !important;
  text-align: center;
  color:      #aaa;
  font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .hw-col-img   { display: none; }
  .hw-col-stock { width: auto; }
  .hw-table th,
  .hw-table td  { padding: 8px 6px; }
}

/* ── Notify anon button ──────────────────────────────────────────── */

.hw-notify-anon-btn {
  background:    transparent;
  color:         var(--hw-brown);
  border:        1.5px solid var(--hw-brown);
  border-radius: var(--hw-radius);
  padding:       8px 22px;
  font-size:     var(--hw-font-size);
  font-weight:   500;
  cursor:        pointer;
  transition:    color 0.2s, border-color 0.2s, background 0.2s;
  margin-top:    0;
}

.hw-notify-anon-btn:hover {
  color:          #fff !important;
  border-color:   var(--hw-brown) !important;
  background:     var(--hw-brown) !important;
  border-bottom:  1.5px solid var(--hw-brown) !important;
  padding:        8px 22px !important;
}

/* ── Notify account message (logged-in sub-note) ─────────────────── */

.hw-notify-account-msg {
  margin:    10px 0 0;
  font-size: 0.82em;
  color:     #888;
}

.hw-notify-account-msg a {
  color: var(--hw-amber);
}

/* ── Anon button login prompt ────────────────────────────────────── */

.hw-anon-wrap {
  display: inline-block;
}

.hw-anon-msg {
  margin:     8px 0 0;
  font-size:  0.85em;
  color:      var(--hw-brown);
}

.hw-anon-msg a {
  color: var(--hw-amber);
}

/* ── Logged-in account sub-message ──────────────────────────────── */

.hw-loggedin-wrap {
  display: inline-block;
}

.hw-account-msg {
  margin:    6px 0 0;
  font-size: 0.82em;
  color:     #888;
}

.hw-account-msg a {
  color: var(--hw-amber);
}