/*
 * Fishing Hub — the few pieces the approved design does not draw (docs/SPEC.md §5–6).
 * Served as a static file after site.css. Every rule is copied from the design's own CSS
 * (admin product-preview card, admin banner, site chips/inputs) and uses only its tokens.
 */

/* S1 — discount badge on a product card = .ad-badge, placed like .ad-pv-media .ad-badge
   (top-left; the top-right corner belongs to the like button, so it sits under the tag). */
.fh-off{position:absolute;left:32px;top:34px;z-index:1;display:inline-block;font:600 11px/1 'JetBrains Mono',ui-monospace,monospace;color:#0A0908;background:var(--acc);border-radius:5px;padding:4px 6px;white-space:nowrap}
@media (max-width: 860px) {
.fh-off{left:14px;top:14px}
}
/* S1 — old (struck) price after the price = .ad-pv-price s, 8px gap like .ad-pv-price */
.fh-price-old{margin-left:8px;font:400 12.5px 'JetBrains Mono',ui-monospace,monospace;color:var(--mute)}

/* S2 — product photo = .ad-pv-media img. Tag and like button stay above it. */
.fh-card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.fh-card-media:has(> .fh-card-img) > .fh-card-tag,.fh-card-media:has(> .fh-card-img) > .fh-like{z-index:1}
.fh-dr-thumb:has(> .fh-card-img){position:relative;overflow:hidden;padding:0}

/* §6.1 — checkout step inside .fh-drawer (replaces .fh-dr-list + .fh-dr-foot) */
.fh-co{flex:1;min-height:0;display:flex;flex-direction:column}
.fh-co-body{display:flex;flex-direction:column;gap:18px;padding:20px 24px}
.fh-co-back{align-self:flex-start;min-height:44px;padding:0 18px;font-size:14px}
.fh-co-f{display:flex;flex-direction:column;gap:8px}
/* field = .fh-news-form pill + .fh-news-form input */
.fh-co-in{display:flex;gap:6px;background:#0A0908;border-radius:999px;padding:6px}
.fh-co-in input,.fh-co-in textarea{all:unset;flex:1;min-width:0;padding:0 20px;min-height:52px;color:var(--ink);font:400 16px 'Archivo',system-ui,sans-serif}
.fh-co-in input::placeholder,.fh-co-in textarea::placeholder{color:#968C83}
.fh-co-in:has([aria-invalid]){box-shadow:inset 0 0 0 1px var(--acc)}
.fh-co-ta{border-radius:26px}
.fh-co-in textarea{padding:14px 20px;min-height:84px;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
.fh-co-chips{display:flex;gap:8px;flex-wrap:wrap}
/* messages = .fh-dr-note type; errors in the accent colour */
.fh-co-err,.fh-co-msg{padding:0 20px;font:500 11px/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--acc)}
.fh-co-msg{color:var(--mute)}
.fh-dr-foot .fh-co-err{margin:0;padding:0;text-align:center}
.fh-btn[disabled],.fh-chip[disabled]{opacity:.6;cursor:progress}
/* confirmation title = .fh-dr-head h2 */
.fh-co-done-h{margin:0;max-width:none;color:var(--ink);font-stretch:118%;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em}

/* §6.3 — 404: the site background, wordmark, .fh-h2 and .fh-btn-pri, vertically centred */
.fh-404{min-height:100vh;display:flex;align-items:center}
.fh-404-in{display:flex;flex-direction:column;align-items:flex-start;gap:32px;padding-top:48px;padding-bottom:48px}
.fh-404 .fh-h2{margin:0}

/* §6.2 — admin login: one .ad-card centred on the admin background */
.ad-login{align-items:center;justify-content:center;padding:24px}
.ad-login-card{width:min(380px,100%);padding:28px 24px 24px}
.ad-login-card .ad-brand{padding:0 0 6px}
.ad-btn[disabled]{opacity:.6;cursor:progress}

/* S10 — top banner = .ad-banner, full width, square corners */
.fh-banner{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:9px 16px;border-radius:0;background:var(--acc);color:#0A0908;font:600 13px 'Archivo',system-ui,sans-serif;text-align:center}