/* =============================================================================
   WOW Wishlist — Stylesheet v1.2.0
   Covers: buttons, header counter, list page, notice toast, error states.

   THEMING — paste this into Bricks Global CSS and change the values:

   :root {
     --wow-color-primary:         #e63946;
     --wow-color-primary-hover:   #c1121f;
     --wow-color-success:         #2d6a4f;
     --wow-color-inactive:        #aaa;
     --wow-color-border:          #f0f0f0;
     --wow-btn-radius:            4px;
     --wow-thumb-size:            80px;

     --wow-font-family:           inherit;
     --wow-font-size:             0.95rem;
     --wow-font-size-sm:          0.8rem;
     --wow-font-size-badge:       0.7em;
     --wow-font-weight-title:     600;
     --wow-font-weight-btn:       600;
     --wow-font-weight-badge:     700;
     --wow-font-weight-tag:       700;
     --wow-text-transform-btn:    none;
     --wow-text-transform-title:  none;
     --wow-letter-spacing-btn:    0em;
     --wow-letter-spacing-title:  0em;
   }
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Design tokens — override any of these on :root in your theme/Bricks CSS
   --------------------------------------------------------------------------- */
:root {
  /* Brand colour */
  --wow-color-primary:       #e63946;
  --wow-color-primary-hover: #c1121f;
  --wow-color-primary-light: #fef2f2;

  /* Success state (add to cart confirmed) */
  --wow-color-success:       #2d6a4f;

  /* Muted / neutral */
  --wow-color-inactive:      #aaa;
  --wow-color-border:        #f0f0f0;
  --wow-color-muted:         #999;
  --wow-color-placeholder:   #f5f5f5;

  /* Text */
  --wow-color-text:          inherit;
  --wow-color-text-notice:   #333;

  /* Border radii */
  --wow-btn-radius:          4px;
  --wow-badge-radius:        999px;
  --wow-thumb-radius:        6px;
  --wow-notice-radius:       8px;

  /* Spacing */
  --wow-btn-padding:         0.45em 0.9em;
  --wow-toggle-padding:      0.4em;
  --wow-row-padding:         0.9rem 0;

  /* Sizes */
  --wow-thumb-size:          80px;

  /* Typography */
  --wow-font-family:           inherit;
  --wow-font-size:             0.95rem;
  --wow-font-size-sm:          0.8rem;
  --wow-font-size-badge:       0.7em;
  --wow-font-weight-title:     600;
  --wow-font-weight-btn:       600;
  --wow-font-weight-badge:     700;
  --wow-font-weight-tag:       700;
  --wow-text-transform-btn:    none;
  --wow-text-transform-title:  none;
  --wow-letter-spacing-btn:    0em;
  --wow-letter-spacing-title:  0em;

  /* Transitions */
  --wow-transition:          0.2s ease;

  /* Notice */
  --wow-notice-bg:           #fff;
  --wow-notice-accent:       var(--wow-color-primary);
}

/* ---------------------------------------------------------------------------
   Toggle button (product cards + single product page)
   --------------------------------------------------------------------------- */
.wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--wow-toggle-padding);
  color: var(--wow-color-inactive);
  font-family: var(--wow-font-family);
  font-size: var(--wow-font-size);
  transition: color var(--wow-transition), transform 0.15s ease;
  line-height: 1;
}



.wishlist-btn.is-active {
  color: var(--wow-color-primary);
}

.wishlist-btn.is-active svg,
.wishlist-btn.is-active .wishlist-icon {
  fill: var(--wow-color-primary);
}

/* ---------------------------------------------------------------------------
   Header counter badge
   --------------------------------------------------------------------------- */
.wishlist-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.3em;
  background: var(--wow-color-primary);
  color: #fff;
  font-family: var(--wow-font-family);
  font-size: var(--wow-font-size-badge);
  font-weight: var(--wow-font-weight-badge);
  border-radius: var(--wow-badge-radius);
  line-height: 1;
  transition: opacity var(--wow-transition);
}

.wishlist-header-count.is-empty {
  opacity: 0;
  pointer-events: none;
}

#wishlist-count {
  font-variant-numeric: tabular-nums;
}

/* Bricks Counter element wrapper */
.wow-wc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.wow-wc__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.3em;
  background: var(--wow-color-primary);
  color: #fff;
  font-size: var(--wow-font-size-badge);
  font-weight: var(--wow-font-weight-badge);
  border-radius: var(--wow-badge-radius);
  line-height: 1;
  transition: opacity var(--wow-transition);
}

.wow-wc__badge.is-empty {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Wishlist page list view
   --------------------------------------------------------------------------- */
#wishlist-products {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wishlist-row {
  display: grid;
  grid-template-columns: calc(var(--ww-thumb-size, var(--wow-thumb-size)) + 8px) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: var(--ww-row-gap, var(--wow-row-padding));
  border-bottom: 1px solid var(--ww-row-border, var(--wow-color-border));
  animation: wow-fadein 0.2s ease both;
}

/* The --ww-* vars are output on [data-wow-uid] by the Bricks element PHP render().
   Since CSS vars inherit, all child rows, buttons and titles pick them up automatically. */

.wishlist-row:first-child {
  border-top: 1px solid var(--ww-row-border, var(--wow-color-border));
}

@keyframes wow-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wishlist-image {
  display: block;
  flex-shrink: 0;
  border-radius: var(--wow-thumb-radius);
  overflow: hidden;
  line-height: 0;
}

.wishlist-thumb {
  width: var(--ww-thumb-size, var(--wow-thumb-size));
  height: var(--ww-thumb-size, var(--wow-thumb-size));
  object-fit: cover;
  border-radius: var(--ww-thumb-radius, var(--wow-thumb-radius));
  display: block;
}

.wishlist-thumb--placeholder {
  width: var(--ww-thumb-size, var(--wow-thumb-size));
  height: var(--ww-thumb-size, var(--wow-thumb-size));
  background: var(--wow-color-placeholder);
  border-radius: var(--ww-thumb-radius, var(--wow-thumb-radius));
}

.wishlist-content {
  min-width: 0;
}

.wishlist-title {
  display: block;
  font-family: var(--wow-font-family);
  font-size: var(--ww-title-size, var(--wow-font-size));
  font-weight: var(--ww-title-weight, var(--wow-font-weight-title));
  letter-spacing: var(--wow-letter-spacing-title);
  text-transform: var(--ww-title-transform, var(--wow-text-transform-title));
  color: var(--ww-title-color, var(--wow-color-text));
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--wow-transition);
}



.wishlist-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
  flex-shrink: 0;
}

.wishlist-addcart,
.wishlist-remove {
  display: inline-block;
  font-family: var(--wow-font-family);
  cursor: pointer;
  border: none;
  transition:
    background var(--wow-transition),
    color var(--wow-transition),
    border-color var(--wow-transition),
    opacity var(--wow-transition);
  white-space: nowrap;
}

.wishlist-addcart {
  background: var(--ww-atc-bg, var(--wow-color-primary));
  color: var(--ww-atc-color, #fff);
  font-size: var(--ww-atc-size, var(--wow-font-size-sm));
  font-weight: var(--ww-atc-weight, var(--wow-font-weight-btn));
  text-transform: var(--ww-atc-transform, var(--wow-text-transform-btn));
  border-radius: var(--ww-atc-radius, var(--wow-btn-radius));
  padding: var(--ww-atc-padding, var(--wow-btn-padding));
}



/* In-cart tag — shown below product title */
.wishlist-in-cart-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.35rem;
  padding: 0.2em 0.55em;
  background: #d1fae5;
  color: #065f46;
  font-family: var(--wow-font-family);
  font-size: var(--wow-font-size-sm);
  font-weight: var(--wow-font-weight-tag);
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* Add-to-cart button — already in cart state (green, beats theme overrides) */
.wishlist-addcart.is-in-cart,
.wishlist-addcart.is-in-cart:hover,
.wishlist-addcart.is-in-cart:focus {
  background: var(--ww-incart-bg, #2d6a4f) !important;
  color: var(--ww-incart-color, #fff) !important;
  border-color: var(--ww-incart-bg, #2d6a4f) !important;
  cursor: default;
  filter: none;
}

.wishlist-addcart.is-added {
  background: #2d6a4f !important;
  color: #fff !important;
}

.wishlist-addcart:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.wishlist-remove {
  background: transparent;
  color: var(--ww-rm-color, var(--wow-color-muted));
  border: 1px solid var(--ww-rm-border, var(--wow-color-border));
  font-size: var(--ww-rm-size, var(--wow-font-size-sm));
  font-weight: var(--ww-rm-weight, var(--wow-font-weight-btn));
  text-transform: var(--ww-rm-transform, var(--wow-text-transform-btn));
  border-radius: var(--ww-rm-radius, var(--wow-btn-radius));
  padding: var(--ww-rm-padding, var(--wow-btn-padding));
}



.wishlist-empty,
.wishlist-error,
.wishlist-loading {
  padding: 2rem 0;
  color: var(--wow-color-muted);
  font-size: var(--wow-font-size);
}

.wishlist-error {
  color: var(--wow-color-primary-hover);
}

#wishlist-clear {
  display: inline-block;
  margin-top: 1.25rem;
  background: none;
  border: 1px solid var(--wow-color-border);
  border-radius: var(--wow-btn-radius);
  padding: var(--wow-btn-padding);
  font-size: var(--wow-font-size-sm);
  color: var(--wow-color-muted);
  cursor: pointer;
  transition: border-color var(--wow-transition), color var(--wow-transition);
}



@media (max-width: 480px) {
  .wishlist-row {
    grid-template-columns: calc(var(--wow-thumb-size) - 16px) 1fr;
    grid-template-rows: auto auto;
  }

  .wishlist-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}

/* ---------------------------------------------------------------------------
   Notices (wishlist added / cart added / error)
   --------------------------------------------------------------------------- */
.wow-notice {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99999;
  max-width: 340px;
  background: var(--wow-notice-bg);
  border-left: 4px solid var(--wow-notice-accent);
  border-radius: var(--wow-notice-radius);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.13);
  padding: 0.9rem 1rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Stack multiple notices */
.wow-notice + .wow-notice {
  bottom: calc(1.5rem + 80px);
}

.wow-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Type accents */
.wow-notice--wishlist { --wow-notice-accent: var(--wow-color-primary); }
.wow-notice--cart     { --wow-notice-accent: #2d6a4f; }
.wow-notice--remove   { --wow-notice-accent: #888; }
.wow-notice--error    { --wow-notice-accent: #c1121f; background: #fff5f5; }

.wow-notice__inner {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.wow-notice__icon {
  font-size: 1.3rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.wow-notice--wishlist .wow-notice__icon { color: var(--wow-color-primary); }
.wow-notice--cart     .wow-notice__icon { color: #2d6a4f; }
.wow-notice--remove   .wow-notice__icon { color: #888; }
.wow-notice--error    .wow-notice__icon { color: #c1121f; }

.wow-notice__body {
  flex: 1;
  min-width: 0;
}

.wow-notice__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wow-color-text-notice);
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.wow-notice__title em {
  font-style: normal;
  color: var(--wow-notice-accent);
}

.wow-notice__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #666;
}

.wow-notice__text:empty {
  display: none;
}

.wow-notice__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: #bbb;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: color var(--wow-transition);
}

.wow-notice__close:hover {
  color: #555;
}



/* ── Variation attributes ───────────────────────────────────────────────── */
.wishlist-variation {
  display: block;
  font-size: 0.8em;
  color: #888;
  margin-top: 2px;
  line-height: 1.4;
}

.wishlist-variation--none {
  font-style: italic;
}

.wishlist-addcart--variable {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* ── Price ──────────────────────────────────────────────────────────────── */
.wishlist-price {
  display: block;
  margin-top: 3px;
  font-size: 0.95em;
  font-weight: 600;
  color: inherit;
}

.wishlist-price ins {
  text-decoration: none;
}

.wishlist-price del {
  opacity: 0.5;
  font-weight: 400;
  margin-right: 4px;
}

/* Hide clear button until JS confirms there are items */
#wishlist-clear {
  display: none;
}