/* Buttons and icon buttons. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; pointer-events: none; }

.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--secondary { background: #fff; border-color: var(--color-line-strong); color: var(--color-ink); }
.btn--secondary:hover { border-color: var(--color-ink); }
.btn--light { background: rgba(255, 255, 255, .95); color: var(--color-ink); }
.btn--light:hover { background: #fff; }
.btn.is-done { background: var(--color-success); border-color: var(--color-success); color: #fff; }

/* Sales-campaign buttons (used on dark backgrounds) */
.btn--deal { background: #ffd60a; color: #0a0a0b; box-shadow: 0 8px 24px rgba(255, 214, 10, .22); }
.btn--deal:hover { background: #ffe14d; }
.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* WhatsApp ordering */
.btn--wa { background: var(--color-wa); color: #fff; }
.btn--wa:hover { background: var(--color-wa-hover); }
.btn--wa-outline { background: #fff; border-color: var(--color-wa); color: var(--color-wa); }
.btn--wa-outline:hover { background: var(--color-wa-soft); }
.btn--wa .icon, .btn--wa-outline .icon { width: 20px; height: 20px; stroke-width: 1.8; }

/* floating WhatsApp button */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--color-wa); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 10px 28px rgba(20, 131, 63, .35), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
  animation: rise-in .5s var(--ease) .8s both;
}
.wa-float:hover { background: var(--color-wa-hover); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20, 131, 63, .42); }
.wa-float[hidden] { display: none; }
.wa-float .icon { width: 24px; height: 24px; stroke-width: 1.7; }
/* phones: a round icon button, so it doesn't sit over prices and product names
   (the link keeps its full aria-label for screen readers) */
@media (max-width: 600px) {
  .wa-float { right: 14px; bottom: calc(var(--tabbar-h) + 14px); width: 54px; height: 54px; padding: 0; justify-content: center; }
  .wa-float [data-role="label"] { display: none; }
  .wa-float .icon { width: 27px; height: 27px; }
}

.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: border-color .2s, background-color .2s;
}
.icon-btn:hover { border-color: var(--color-ink); }
.icon-btn[disabled] { opacity: .35; pointer-events: none; }
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn--lg { width: 54px; height: 54px; }

/* text-style button; the padding/negative-margin pair gives a ~40px tap area without moving the layout */
.link-btn { padding-block: 9px; margin-block: -9px; font-size: 14px; font-weight: 600; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--color-ink); }
.link-btn--center { justify-self: center; }

/* wishlist heart (on photos and on the product page) */
.wish-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm);
  color: var(--color-ink); transition: transform .2s, color .2s;
}
.wish-btn:hover { transform: scale(1.06); }
.wish-btn .icon, .wish-inline .icon { width: 19px; height: 19px; }
.wish-btn[aria-pressed="true"], .wish-inline[aria-pressed="true"] { color: var(--color-brand); }
.wish-btn[aria-pressed="true"] .icon, .wish-inline[aria-pressed="true"] .icon { fill: currentColor; }