/* ============================================================================
   KULTOWE ALKOHOLE — biblioteka komponentów (prymitywy)
   Każdy komponent ma pełną macierz stanów. Kolory tylko przez tokeny.
   Mapowanie na core/produkcję: patrz DESIGN-SYSTEM.md.
   ============================================================================ */

/* ============================ BUTTON ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-overline); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline); text-transform: uppercase;
  padding: 0.875rem 1.75rem; border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  text-align: center; line-height: 1.15; max-width: 100%;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-overline-s); }
.btn--lg { padding: 1.125rem 2.25rem; }
.btn--full { width: 100%; }
.btn--icon { padding: 0.75rem; aspect-ratio: 1; }

.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-border); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); }
.btn--ghost:hover { background: var(--btn-ghost-bg-hover); }
.btn--ondark { background: var(--btn-ondark-bg); color: var(--btn-ondark-fg); }
.btn--ondark:hover { background: var(--btn-ondark-bg-hover); }

.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 1.1em; height: 1.1em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--btn-primary-fg); animation: spin 0.7s linear infinite;
}
.btn--secondary.is-loading::after { color: var(--btn-secondary-fg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* link ze strzałką (CTA tekstowy / na kartach) */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-medium); color: var(--text-prime); width: max-content;
}
.link-arrow svg, .link-arrow .arr { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg, .link-arrow:hover .arr { transform: translateX(8px); }
.link-underline { text-decoration: underline; text-underline-offset: 3px; }
.link-underline:hover { color: var(--text-accent); }

/* ============================ FIELD ============================ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-body-s); color: var(--field-label); }
.field__control {
  width: 100%; background: var(--field-bg); color: var(--field-fg);
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  padding: 0.875rem 1rem; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.field__control::placeholder { color: var(--field-placeholder); }
.field__control:hover { border-color: var(--field-border-hover); }
.field__control:focus { outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 3px rgba(22,24,33,0.08); }
.field__control[disabled] { background: var(--neutral-100); color: var(--neutral-500); cursor: not-allowed; }
textarea.field__control { resize: vertical; min-height: 7rem; }
.field__hint { font-size: var(--fs-caption); color: var(--text-second); }
.field__error { font-size: var(--fs-caption); color: var(--error-text); display: none; }
.field.is-error .field__control { border-color: var(--field-border-error); }
.field.is-error .field__error { display: block; }

.checkbox, .radio { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-body-s); }
.checkbox input, .radio input { width: 1.15rem; height: 1.15rem; accent-color: var(--navy-900); margin-top: 2px; flex: none; }

.input-group { display: flex; gap: var(--sp-2); }
.input-group .field__control { flex: 1; }

/* ============================ CHIP / BADGE ============================ */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--chip-border);
  font-size: var(--fs-body-s); cursor: pointer; transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.chip:hover { border-color: var(--neutral-500); }
.chip.is-active { background: var(--chip-bg-active); color: var(--chip-fg-active); border-color: var(--chip-bg-active); }
.badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--r-xs);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-overline);
  text-transform: uppercase; background: var(--gold-500); color: var(--navy-900);
}
.badge--navy { background: var(--navy-900); color: var(--neutral-50); }
.badge--soft { background: var(--neutral-100); color: var(--text-second); }

/* overline z nadtytułem sekcji */
.overline { color: var(--overline-fg); font-size: var(--fs-overline-s); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline-s); text-transform: uppercase; }

/* ============================ SECTION HEADER ============================ */
.section-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.section-head__title { font-size: clamp(1.6rem, 3.5vw, var(--fs-h2)); }
.section-head--left { align-items: flex-start; text-align: left; }
/* JEDNOLITY rytm: stały odstęp nagłówek sekcji → treść (nadpisuje ad-hoc mb-*/mt- następnika) */
.section-head { margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-12)); }
.section-head + * { margin-top: 0; }

/* ============================ CARD (bazowa) ============================ */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md);
  overflow: hidden; transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-4px); }
.card__media { position: relative; overflow: hidden; }
.card__media img { transition: transform var(--t-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---- brand-card: zdjęcie + butelka wysuwająca się ponad kartę ---- */
.brand-card { position: relative; }
.brand-card__media { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r-sm); }
.brand-card__media img.brand-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out), filter var(--t-base) var(--ease-out); }
.brand-card__bottle {
  position: absolute; right: 6%; bottom: 0; width: 46%; max-width: 150px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  transition: transform var(--t-slow) var(--ease-out);
  z-index: 2; pointer-events: none;
}
.brand-card:hover .brand-card__photo { transform: scale(1.06); filter: brightness(0.85); }
.brand-card:hover .brand-card__bottle { transform: translateY(-14px); }   /* unosi się, pozostaje widoczna */
.brand-card__cat { color: var(--text-second); }
.brand-card__title { font-size: var(--fs-h5); font-weight: var(--fw-medium); }
.brand-card__foot { margin-top: var(--sp-3); }

/* ---- product-card: butelka na czystym tle, powiększa się tylko butelka ---- */
.product-card { text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); }
.product-card__media { aspect-ratio: 3/4; overflow: hidden; position: relative; border-radius: var(--r-sm); background: var(--neutral-100); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base) var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__cat { color: var(--text-second); }
.product-card__title { font-size: var(--fs-h5); font-weight: var(--fw-medium); }
.product-card__price { font-weight: var(--fw-medium); }

/* ---- cocktail-card ---- */
.cocktail-card { position: relative; border-radius: var(--r-md); overflow: hidden; }
.cocktail-card__media { aspect-ratio: 3/4; }
.cocktail-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.cocktail-card:hover .cocktail-card__media img { transform: scale(1.06); }
.cocktail-card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-5); color: var(--neutral-50);
  background: linear-gradient(to top, rgba(10,10,10,.78) 0%, rgba(10,10,10,.15) 55%, transparent 100%);
}
.cocktail-card__title { font-size: var(--fs-h5); font-weight: var(--fw-medium); }
.cocktail-card__meta { display: flex; gap: var(--sp-4); font-size: var(--fs-body-s); margin-top: var(--sp-2); opacity: .9; }
.cocktail-card__meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ---- article-card ---- */
.article-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.article-card__media { aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__meta { font-size: var(--fs-caption); color: var(--text-second); letter-spacing: var(--ls-overline-s); text-transform: uppercase; }
.article-card__title { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

/* ============================ TABLE ============================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.table { width: 100%; font-size: var(--fs-body-s); }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.table th { font-weight: var(--fw-medium); color: var(--text-second); text-transform: uppercase; letter-spacing: var(--ls-overline-s); font-size: var(--fs-caption); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--neutral-100); }

/* ============================ TABS ============================ */
.tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--border-subtle); }
.tab { padding: var(--sp-3) 0; color: var(--text-second); position: relative; background: none; border: none; cursor: pointer; transition: color var(--t-fast); }
.tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--gold-500); transform: scaleX(0); transition: transform var(--t-base) var(--ease-out); }
.tab:hover { color: var(--text-prime); }
.tab.is-active { color: var(--text-prime); }
.tab.is-active::after { transform: scaleX(1); }
.tab-panel { display: none; } .tab-panel.is-active { display: block; }

/* ============================ ACCORDION ============================ */
.accordion__item { border-bottom: 1px solid var(--border-subtle); }
.accordion__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; text-align: left; font-size: var(--fs-h5); font-weight: var(--fw-medium); cursor: pointer; }
.accordion__icon { transition: transform var(--t-base) var(--ease-out); flex: none; }
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height var(--t-base) var(--ease-out); }
.accordion__body-inner { padding-bottom: var(--sp-5); color: var(--text-second); }

/* ============================ PAGINATION ============================ */
.pagination { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; flex-wrap: wrap; }
.pagination__item { min-width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); transition: all var(--t-fast); }
.pagination__item:hover { border-color: var(--navy-900); }
.pagination__item.is-active { background: var(--navy-900); color: var(--neutral-50); border-color: var(--navy-900); }
.pagination__item[disabled] { opacity: .4; pointer-events: none; }

/* ============================ MODAL / OVERLAY ============================ */
.overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base);
}
.overlay.is-open { opacity: 1; visibility: visible; }
.modal {
  background: var(--neutral-50); border-radius: var(--r-lg); max-width: 560px; width: 100%;
  max-height: 90vh; overflow: auto; padding: var(--sp-8); position: relative;
  transform: translateY(16px) scale(.98); transition: transform var(--t-base) var(--ease-out);
}
.overlay.is-open .modal { transform: none; }
.modal--wide { max-width: 1000px; }
.modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); display: grid; place-items: center; }
.modal__close:hover { background: var(--neutral-100); }

/* ============================ TOAST ============================ */
.toast-stack { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); z-index: var(--z-toast); }
.toast {
  background: var(--toast-bg); color: var(--toast-fg); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: flex; gap: var(--sp-3); align-items: center;
  min-width: 280px; max-width: 380px; transform: translateX(120%); transition: transform var(--t-base) var(--ease-out);
  border-left: 3px solid var(--gold-500);
}
.toast.is-show { transform: none; }
.toast--success { border-left-color: var(--success-text); }
.toast--error { border-left-color: var(--error-text); }

/* ============================ STANY: skeleton / empty / error ============================ */
.skeleton { background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 37%, var(--neutral-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton--text { height: .8em; margin-block: .35em; }
.skeleton--media { aspect-ratio: 3/4; width: 100%; }

.empty-state, .error-state { text-align: center; padding: var(--sp-16) var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.empty-state__icon, .error-state__icon { width: 3rem; height: 3rem; color: var(--neutral-500); }
.empty-state__title { font-size: var(--fs-h4); font-weight: var(--fw-medium); }
.empty-state__text, .error-state__text { color: var(--text-second); max-width: 40ch; }
.error-state__icon { color: var(--error-text); }

/* ============================ ALERT / NOTE ============================ */
.alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-body-s); }
.alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert--error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.alert--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

/* ============================ SLIDER (poziomy, scroll-snap) ============================ */
.slider { display: flex; gap: var(--sp-6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-4); scrollbar-width: thin; }
.slider > * { scroll-snap-align: start; flex: 0 0 auto; }
.slider::-webkit-scrollbar { height: 4px; }
.slider::-webkit-scrollbar-thumb { background: var(--neutral-400); border-radius: var(--r-pill); }
.slider-nav { display: flex; gap: var(--sp-2); }
.slider-nav button { width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); border: 1px solid var(--border-strong); display: grid; place-items: center; transition: all var(--t-fast); }
.slider-nav button:hover { background: var(--navy-900); color: var(--neutral-50); border-color: var(--navy-900); }

/* ============================ SCROLL-REVEAL (animacja wejścia) ============================ */
.reveal { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > *:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal-group.is-in > *:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal-group.is-in > *:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal-group.is-in > *:nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); }
.reveal-group.is-in > *:nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); }

/* ============================ SCROLL INDICATOR ============================ */
.scroll-cue { width: 1px; height: 56px; background: currentColor; position: relative; opacity: .7; }
.scroll-arrow { animation: bob 1.8s var(--ease-in-out) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }