/* Fresh-fish availability notice (shown on the Fresh Fish tab) */
.fish-notice {
  max-width: 760px;
  margin: 0 auto var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.25);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-align: center;
}

/* ══════════════════════════════════════
   FISH CARD
══════════════════════════════════════ */
.fish-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--t-base), box-shadow var(--t-base);
  border: 1px solid var(--color-border);
}

.fish-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Image wrapper */
.fish-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d4f6e 0%, #115f78 100%);
  aspect-ratio: 4 / 3;
}

.fish-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.fish-card:hover .fish-card__image { transform: scale(1.06); }

/* Status badge overlaid on image */
.fish-card__status {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 3px var(--sp-3);
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}

.fish-card__status--new {
  background: rgba(219,234,254,0.92);
  color: var(--status-new);
}
.fish-card__status--available {
  background: rgba(220,252,231,0.92);
  color: var(--status-available);
}
.fish-card__status--limited {
  background: rgba(254,243,199,0.92);
  color: var(--status-limited);
}
.fish-card__status--unavailable {
  background: rgba(243,244,246,0.92);
  color: var(--status-unavail);
}
.fish-card__status--trending {
  background: rgba(255,228,230,0.92);
  color: #e11d48;
}

/* Status dot */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.fish-card__status--new         .status-dot { background: var(--status-new); }
.fish-card__status--available   .status-dot { background: var(--status-available); }
.fish-card__status--limited     .status-dot { background: var(--status-limited); }
.fish-card__status--unavailable .status-dot { background: var(--status-unavail); }
.fish-card__status--trending    .status-dot { background: #e11d48; }

/* Card body */
.fish-card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.fish-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--color-navy);
  line-height: 1.2;
}

.fish-card__price {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-teal);
  line-height: 1;
}

.fish-card__price .per-kg {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-muted);
}

/* On-card whole/fillet cut toggle (segmented control) */
.fish-card__variants {
  display: inline-flex;
  gap: 2px;
  align-self: flex-start;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--status-unavail-bg);
  border: 1px solid var(--color-border);
}

.fish-card__variant {
  border: none;
  background: transparent;
  padding: 5px var(--sp-4);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.fish-card__variant:hover:not(.is-active) { color: var(--color-teal); }

/* Active cut: filled teal pill with white text — clearly the selected option. */
.fish-card__variant.is-active {
  background: var(--color-teal);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.fish-card__notes {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  font-style: italic;
}

/* Add to cart button */
.fish-card__add {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-coral);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-body);
  text-align: center;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.fish-card__add:hover:not(.disabled):not(:disabled) {
  background: #e85d28;
  transform: scale(1.02);
}

.fish-card__add:active:not(:disabled) { transform: scale(0.98); }

.fish-card__add.disabled,
.fish-card__add:disabled {
  background: var(--status-unavail-bg);
  color: var(--status-unavail);
  cursor: not-allowed;
  transform: none;
}

/* Unavailable card dimming */
.fish-card[data-status="unavailable"] .fish-card__image {
  filter: grayscale(60%) opacity(0.7);
}

/* Loading skeleton */
.fish-card--skeleton .fish-card__img-wrap {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}