/* Explore page — conditions strip, filter rail, product grid. Loaded globally from base.html (not the Explore template's head) so the styles survive hx-boosted navigation, which swaps but not . */ /* --- Conditions strip — radio tiles, auto-submit on change --------- */ .vh-diseasestrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(116px, 1fr); gap: var(--vh-space-2); overflow-x: auto; padding: var(--vh-space-1) 0 var(--vh-space-2); scroll-snap-type: x mandatory; scrollbar-width: thin; } .vh-dtile { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--vh-space-3) var(--vh-space-2); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-xl); background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--_d-color, var(--vh-primary)) 12%, transparent) 0%, transparent 70%), var(--vh-bg-elevated); color: var(--vh-text); cursor: pointer; transition: transform var(--vh-dur-2) var(--vh-ease-1), border-color var(--vh-dur-2) var(--vh-ease-1); } .vh-dtile input { position: absolute; opacity: 0; pointer-events: none; } .vh-dtile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--_d-color, var(--vh-primary)) 60%, var(--vh-border)); } .vh-dtile:has(input:checked) { border-color: var(--_d-color, var(--vh-primary)); background: radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--_d-color, var(--vh-primary)) 22%, transparent) 0%, transparent 70%), var(--vh-bg-elevated); } .vh-dtile:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--vh-focus); } .vh-dtile__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: color-mix(in srgb, var(--_d-color, var(--vh-primary)) 18%, var(--vh-bg-elevated)); color: var(--_d-color, var(--vh-primary)); } .vh-dtile__icon svg { width: 24px; height: 24px; } .vh-dtile__name { font-size: var(--vh-text-xs); font-weight: var(--vh-weight-semibold); text-align: center; line-height: 1.2; } /* --- Toolbar — count + Filter button (mobile) + Sort select ------- */ .vh-exptoolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--vh-space-2); flex-wrap: wrap; margin: var(--vh-space-3) 0; } .vh-exptoolbar__count { font-size: var(--vh-text-sm); font-weight: var(--vh-weight-semibold); color: var(--vh-text-muted); } .vh-exptoolbar__controls { display: flex; align-items: center; gap: var(--vh-space-2); } .vh-exptoolbar__filterbtn { display: none; /* mobile only — desktop has the always-on rail */ align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--vh-border); border-radius: var(--vh-radius-pill); background: var(--vh-bg-elevated); color: var(--vh-text); font: inherit; font-size: var(--vh-text-sm); font-weight: var(--vh-weight-semibold); cursor: pointer; } .vh-exptoolbar__sort { padding: 8px 12px; border: 1px solid var(--vh-border); border-radius: var(--vh-radius-pill); background: var(--vh-bg-elevated); color: var(--vh-text); font: inherit; font-size: var(--vh-text-sm); cursor: pointer; } /* --- Body grid — filter rail + product grid ----------------------- */ .vh-explore { display: grid; grid-template-columns: 260px 1fr; gap: var(--vh-space-4); align-items: start; } .vh-explore__grid { min-width: 0; } .vh-explore__scrim { display: none; } .vh-filterpanel { position: sticky; top: var(--vh-space-3); align-self: start; } .vh-filterpanel__head { display: none; } .vh-filterpanel__close { background: var(--vh-bg-muted); border: 1px solid var(--vh-border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--vh-text-muted); } .vh-filtergroup + .vh-filtergroup { margin-top: var(--vh-space-3); } .vh-filtergroup__title { font-size: var(--vh-text-2xs); font-weight: var(--vh-weight-bold); color: var(--vh-text-muted); text-transform: uppercase; letter-spacing: var(--vh-tracking-wide); margin-bottom: 8px; } .vh-filterchips { display: flex; flex-wrap: wrap; gap: 6px; } .vh-filterchip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--vh-bg-muted); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-pill); font-size: var(--vh-text-xs); color: var(--vh-text); cursor: pointer; transition: border-color var(--vh-dur-2) var(--vh-ease-1); } .vh-filterchip input { position: absolute; opacity: 0; pointer-events: none; } .vh-filterchip:hover { border-color: color-mix(in srgb, var(--_c-color, var(--vh-primary)) 50%, var(--vh-border)); } .vh-filterchip:has(input:checked) { background: color-mix(in srgb, var(--_c-color, var(--vh-primary)) 12%, var(--vh-bg-elevated)); border-color: var(--_c-color, var(--vh-primary)); color: var(--_c-color, var(--vh-primary)); font-weight: var(--vh-weight-semibold); } .vh-filterchip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--vh-focus); } .vh-filterchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--_c-color, var(--vh-primary)); } .vh-filterpanel__actions { display: flex; gap: var(--vh-space-2); margin-top: var(--vh-space-4); } .vh-filterpanel__actions > * { flex: 1; } /* --- Mobile: filter panel becomes an off-canvas drawer ------------ */ @media (max-width: 900px) { .vh-explore { grid-template-columns: 1fr; } .vh-exptoolbar__filterbtn { display: inline-flex; } .vh-filterpanel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; /* Override the desktop rail's `align-self: start` — for a fixed box that value suppresses the top/bottom stretch, leaving it content-height. `stretch` restores full-viewport height. */ align-self: stretch; height: 100dvh; width: min(86vw, 340px); padding: var(--vh-space-4); background: var(--vh-bg-elevated); border-right: 1px solid var(--vh-border); box-shadow: var(--vh-shadow-3); overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s var(--vh-ease-1); } .vh-filterpanel.is-open { transform: translateX(0); } .vh-filterpanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--vh-space-3); } .vh-explore__scrim { display: block; position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, #000 45%, transparent); } } @media (prefers-reduced-motion: reduce) { .vh-filterpanel { transition: none; } }