/* ==========================================================================
   Components: buttons, badges, cards, forms, swiper overrides, lightbox.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120px circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.4), transparent 70%);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.btn:active::after { opacity: 1; transition-duration: 0ms; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; }
.btn .icon { width: 18px; height: 18px; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--color-accent-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-glow); filter: brightness(1.05); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-bg-elev); color: var(--color-accent-deep); border-color: var(--color-accent); }

.btn--inverse-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--inverse-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.btn--link {
  padding: 0; background: transparent; color: var(--color-accent-deep);
  border-radius: 0;
}
.btn--link::after { display: none; }
.btn--link:hover { color: var(--color-accent); }

.btn--lg { padding: 16px 28px; font-size: var(--fs-md); }
.btn--sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--color-bg-elev);
  color: var(--color-text-soft);
}
.badge--accent { background: rgba(3, 105, 161, 0.14); color: var(--color-accent-deep); }
.badge--dark { background: var(--color-bg-inverse); color: var(--color-text-on-dark); }
.badge--soft { background: rgba(37, 99, 235, 0.1); color: var(--color-info); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Generic card ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.card--glass {
  background: var(--gradient-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
}
.card--padded { padding: var(--space-6); }
.card--feature { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.card--feature h3 { font-size: var(--fs-md); }
.card--feature p { font-size: var(--fs-sm); color: var(--color-text-soft); }
.card--feature .icon-wrap {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  margin-bottom: var(--space-2);
  transition: transform var(--duration-base) var(--ease-out);
}
.card--feature:hover .icon-wrap { transform: rotate(-6deg) scale(1.05); }

/* ---------- Form fields (floating label) ---------- */
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 16px 14px 8px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--color-accent);
  background: var(--color-surface);
}
.field label {
  position: absolute; left: 14px; top: 14px;
  font-size: var(--fs-sm); color: var(--color-text-muted);
  pointer-events: none;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), font-size var(--duration-fast) var(--ease-out);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-8px);
  font-size: var(--fs-xs);
  color: var(--color-accent-deep);
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tabs__item {
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elev);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.tabs__item:hover { color: var(--color-accent-deep); }
.tabs__item.is-active { background: var(--color-bg-inverse); color: var(--color-text-on-dark); border-color: var(--color-bg-inverse); }

/* ---------- WhatsApp floating ---------- */
.wa-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  z-index: var(--z-toast);
  transition: transform var(--duration-base) var(--ease-out);
}
.wa-float:hover { color: #fff; transform: translateY(-3px) scale(1.05); }

/* ---------- Swiper overrides ---------- */
.swiper { width: 100%; height: 100%; }
.swiper-slide { display: flex; }
.swiper-pagination-bullet {
  width: 8px; height: 8px; opacity: 0.4;
  background: currentColor;
  transition: width var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.swiper-pagination-bullet-active { opacity: 1; width: 24px; border-radius: var(--radius-pill); }
.swiper-button-next, .swiper-button-prev {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 16px; font-weight: 700; }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--color-accent); color: var(--color-accent-contrast); transform: scale(1.05); }

/* ---------- Lightbox (PhotoSwipe overrides) ---------- */
.pswp__bg { background: rgba(11, 13, 18, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pswp__button { background-color: rgba(255, 255, 255, 0.1) !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; }
.pswp__button:hover { background-color: var(--color-accent) !important; }
.pswp__counter { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }

/* ---------- Quick view drawer ---------- */
.qv-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  display: flex; flex-direction: column;
  border-radius: 0;
}
.qv-drawer.is-open { transform: none; }
.qv-drawer__close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; }
.qv-drawer__close:hover { background: var(--color-bg-elev); }
.qv-drawer__media { aspect-ratio: 1; background: var(--color-bg-elev); overflow: hidden; }
.qv-drawer__media img { width: 100%; height: 100%; object-fit: cover; }
.qv-drawer__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; }
.qv-drawer__title { font-size: var(--fs-lg); }
.qv-drawer__sku { font-size: var(--fs-xs); color: var(--color-text-muted); }
.qv-drawer__backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
  z-index: calc(var(--z-drawer) - 1);
}
.qv-drawer.is-open + .qv-drawer__backdrop,
body.qv-open .qv-drawer__backdrop { opacity: 1; visibility: visible; }
body.qv-open { overflow: hidden; }

/* ---------- PhotoSwipe gallery grid ---------- */
.pswp-gallery { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); }
.pswp-gallery__item { display: block; overflow: hidden; border-radius: var(--radius-sm); position: relative; aspect-ratio: 4 / 3; }
.pswp-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.pswp-gallery__item:hover img { transform: scale(1.06); }
.pswp-gallery__item--tall { grid-row: span 2; aspect-ratio: 4 / 7; }
.pswp-gallery__item--wide { grid-column: span 2; aspect-ratio: 8 / 3; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-bg-inverse); color: var(--color-text-on-dark);
  padding: 12px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  z-index: var(--z-toast);
  font-size: var(--fs-sm);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%); }

/* ---------- Product card (shared: home + shop archives) ---------- */
.product-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  background: var(--color-bg-elev);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card__media {
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden;
}
.product-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
/* The alt image is the white-background product shot. These source images
   have very mixed aspect ratios (many are tall full-length mirrors), so
   `cover` would crop them heavily and hide most of the product. Show them
   whole with `contain` on a neutral background instead. */
.product-card__media img.alt {
  opacity: 0;
  object-fit: contain;
  background: var(--color-surface, #fff);
  padding: 6%;
  box-sizing: border-box;
}
/* Only the primary image is visible by default; the alt (white-bg) image
   is revealed on hover. This rule must load wherever product cards appear,
   so it lives in the shared components stylesheet.
   The primary is only hidden when an alt image actually exists; otherwise
   we apply a subtle zoom so the card still feels interactive. */
.product-card:hover .product-card__media:has(img.alt) img.primary,
.product-card:focus-within .product-card__media:has(img.alt) img.primary { opacity: 0; transform: scale(1.05); }
.product-card:hover .product-card__media img.alt,
.product-card:focus-within .product-card__media img.alt { opacity: 1; }
/* Fallback: gentle zoom on primary when no alt image is present */
.product-card:hover .product-card__media:not(:has(img.alt)) img.primary,
.product-card:focus-within .product-card__media:not(:has(img.alt)) img.primary { transform: scale(1.05); }
.product-card__actions {
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.product-card:hover .product-card__actions,
.product-card:focus-within .product-card__actions { opacity: 1; transform: none; }
.icon-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-accent); color: var(--color-accent-contrast); }
.product-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.55) 55%, rgba(2, 6, 23, 0.88) 100%);
  pointer-events: none;
}
.product-card__overlay .product-card__title { pointer-events: auto; }
.product-card__title { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }

/* Overlay variant (front-page carousels): title sits on a dark image
   gradient, so white text + bright accent SKU read well there. */
.product-card__overlay .product-card__sku {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-soft);
  margin-bottom: 4px;
}
.product-card__overlay .product-card__title a { color: #fff; }
.product-card__overlay .product-card__title a:hover { color: var(--color-accent-soft); }

/* Body variant (shop/archive cards): the title, SKU and CTA sit BELOW the
   image on the card's light surface, so they must use dark text for contrast.
   The front-page overlay colours must not leak in here. */
.product-card__body {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-4) var(--space-4) var(--space-5);
}
.product-card__body .product-card__title a { color: var(--color-text); }
.product-card__body .product-card__title a:hover { color: var(--color-accent); }
.product-card__body .product-card__sku {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
}