/* ── Brand focus ring override ────────────────────────────────────────────── */
/* Replaces scattered focus:ring-blue-300 with the brand cyan across all forms */
input:focus, select:focus, textarea:focus {
  --tw-ring-color: #00b4d8 !important;
}

/* Checkout delivery option hover */
label:has(input[type="radio"]):hover {
  background-color: #e0f7fb !important;
  border-color: #00b4d8 !important;
}

/* ── line-clamp utility for older browsers ────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* smooth image loading */
img {
  transition: opacity 0.2s ease;
}
img[src=""] {
  opacity: 0;
}

/* ── Category nav scroll ──────────────────────────────────────────────────── */
nav::-webkit-scrollbar { height: 3px; }
nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }

/* ── Mobile: tighter category nav text ───────────────────────────────────── */
@media (max-width: 640px) {
  header nav a { font-size: 0.75rem; padding: 4px 8px; }
}

/* ── Accent color on native checkboxes & range inputs ────────────────────── */
input[type="checkbox"], input[type="radio"] { accent-color: #00b4d8; }
input[type="range"] { accent-color: #00b4d8; }

/* ── Sale price display ───────────────────────────────────────────────────── */
.line-through { text-decoration: line-through; }
.text-red-400 { color: #f87171; }