/* ==========================================================================
   04 · BUTTONS
   The only rounded thing in the theme. Everything else keeps square corners.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.btn--primary {
  background: var(--mulberry);
  color: #fff;
}

.btn--primary:hover { background: var(--mulberry-dk); }

.btn--outline,
.btn--ghost {
  border-color: var(--mulberry);
  color: var(--mulberry);
}

.btn--outline:hover,
.btn--ghost:hover {
  background: var(--mulberry);
  color: #fff;
}

.btn--sm    { padding: 9px 20px; font-size: var(--fs-100); }
.btn--block { width: 100%; }

/* On a dark ground the mulberry outline disappears, so switch to white.
   Every dark container has to be listed here — .cta paints var(--ink) itself
   rather than carrying .section--bg-ink, so it needs naming separately.

   NOT .drawer: that class is the dark backdrop, but the buttons inside it sit
   on .drawer__panel, which is var(--paper). Adding it would turn the drawer's
   "Traži" button white on cream. */
.section--bg-ink .btn--ghost,
.hero--has-image .btn--ghost,
.cta .btn--ghost,
.collection-hero--has-image .btn--ghost,
.site-footer .btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.section--bg-ink .btn--ghost:hover,
.hero--has-image .btn--ghost:hover,
.cta .btn--ghost:hover,
.collection-hero--has-image .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  background: #fff;
  color: var(--ink);
}