/* ============================================================
   STOR — component styles (shipped to consumers via styles.css)
   Class-based so components get real hover/active states.
   ============================================================ */

/* ---------------- Button ---------------- */
.stor-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-md);
  background: var(--action-primary); color: #fff; border: var(--border-thick) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.stor-btn:hover { background: var(--action-primary-hover); box-shadow: var(--shadow-red); }
.stor-btn:active { background: var(--action-primary-active); transform: scale(0.98); box-shadow: none; }
.stor-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.stor-btn--secondary { background: transparent; color: var(--stor-red); border-color: var(--stor-red); }
.stor-btn--secondary:hover { background: var(--red-50); box-shadow: none; }
.stor-btn--secondary:active { background: var(--red-100); }

.stor-btn--ghost { background: transparent; color: var(--text-strong); border-color: transparent; }
.stor-btn--ghost:hover { background: var(--neutral-100); box-shadow: none; }
.stor-btn--ghost:active { background: var(--neutral-200); }

.stor-btn--accent { background: var(--stor-yellow); color: var(--neutral-900); }
.stor-btn--accent:hover { background: var(--action-accent-hover); box-shadow: none; }
.stor-btn--accent:active { background: var(--yellow-600); }

.stor-btn--dark { background: var(--neutral-800); color: #fff; }
.stor-btn--dark:hover { background: var(--neutral-900); box-shadow: none; }

.stor-btn--sm { font-size: 13px; padding: 9px 16px; border-radius: var(--radius-sm); }
.stor-btn--lg { font-size: 17px; padding: 16px 30px; }
.stor-btn--block { display: flex; width: 100%; }
.stor-btn[disabled], .stor-btn.is-disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.stor-btn svg { width: 18px; height: 18px; }

/* ---------------- Tag (brand tag-shape flag) ---------------- */
.stor-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-headline); text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.02em; line-height: 1;
  color: #fff; background: var(--stor-red);
  padding: 9px 18px; white-space: nowrap;
  clip-path: polygon(var(--tag-notch) 0, calc(100% - var(--tag-notch)) 0, 100% 50%, calc(100% - var(--tag-notch)) 100%, var(--tag-notch) 100%, 0 50%);
}
.stor-tag--yellow { background: var(--stor-yellow); color: var(--neutral-900); }
.stor-tag--dark { background: var(--neutral-800); color: #fff; }
.stor-tag--tan { background: var(--stor-tan); color: var(--neutral-900); }

/* ---------------- Badge / pill ---------------- */
.stor-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1;
  padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--neutral-100); color: var(--text-body);
}
.stor-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stor-badge--fresh   { background: var(--status-fresh-bg);   color: var(--status-fresh); }
.stor-badge--soon    { background: var(--status-soon-bg);    color: #8a6d00; }
.stor-badge--expired { background: var(--status-expired-bg); color: var(--status-expired); }
.stor-badge--brand   { background: var(--stor-red);          color: #fff; }
.stor-badge--solid-fresh { background: var(--status-fresh); color:#fff; }

/* ---------------- Card ---------------- */
.stor-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.stor-card--flat { box-shadow: none; }
.stor-card--interactive {
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.stor-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stor-card--interactive:active { transform: translateY(-1px); }

/* ---------------- Form field ---------------- */
.stor-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.stor-field__label { font-size: 14px; font-weight: 500; color: var(--text-body); }
.stor-field__label .req { color: var(--stor-red); margin-left: 2px; }
.stor-input {
  font-family: var(--font-body); font-size: 15px; color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%; box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.stor-input::placeholder { color: var(--text-subtle); }
.stor-input:focus {
  outline: none; border-color: var(--stor-red);
  box-shadow: 0 0 0 3px var(--red-100);
}
.stor-input:disabled { background: var(--neutral-100); color: var(--text-subtle); cursor: not-allowed; }
.stor-field--error .stor-input { border-color: var(--stor-red); }
.stor-field__help { font-size: 13px; color: var(--text-muted); }
.stor-field--error .stor-field__help { color: var(--stor-red); }

/* ---------------- Freshness meter (brand-specific) ---------------- */
.stor-fresh { font-family: var(--font-body); }
.stor-fresh__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.stor-fresh__name { font-weight: 700; color: var(--text-strong); font-size: 15px; }
.stor-fresh__days { font-size: 13px; font-weight: 600; }
.stor-fresh__track { height: 10px; border-radius: var(--radius-pill); background: var(--neutral-200); overflow: hidden; }
.stor-fresh__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-out); }
.stor-fresh__meta { display:flex; align-items:center; gap:8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }