/* BuyTides — category archive.
   Extracted from the Nasal Sprays template so every category archive shares one
   source instead of each template carrying its own inline copy. */

/* ============================================================
   BuyTides — Category Archive (matches /shop/ design system)
   Palette: navy #2B3754 · cyan #1FC8E3 · sky #EAF7FB · page #EEF2F4
   ============================================================ */
.bt-arc{--navy:#2B3754;--cyan:#1FC8E3;--cyan-2:#61DDEB;--cyan-3:#3FCEDD;--link:#1B7FA8;--ink:#2C4658;--mute:#7C93A3;--line:#DDE7EE;--line-2:#C7E9F3;--rail:#CDD9E0;--sky:#EAF7FB;--page:#EEF2F4;font-family:Inter,system-ui,sans-serif;color:var(--navy);background:var(--page);padding-bottom:clamp(28px,4vw,56px)}
.bt-arc *,.bt-arc *::before,.bt-arc *::after{box-sizing:border-box}

/* The theme's 1.2em block margin was landing on .bt-crumb and .bt-grid ON TOP of
   the flex gaps that are supposed to own the vertical rhythm here — 28px under
   the title instead of 9, 41px above the cards instead of 22. :where() keeps
   this at zero specificity so the deliberate margins below (.bt-hero h1,
   .bt-hero p, .bt-empty p) still win. */
.bt-arc :where(p,div,nav,h1,h2,h3,h4,ul,ol,figure,article){margin-block:0}

/* ---- Hero ---- */
.bt-hero{max-width:1680px;width:calc(100% - clamp(24px,5vw,56px));margin:clamp(28px,4vw,56px) auto 0;text-align:center}
.bt-hero .bt-eyebrow{font-family:Outfit,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--link);margin:0}
.bt-hero h1{margin:14px 0 0;font-family:Outfit,sans-serif;font-size:clamp(34px,5vw,62px);line-height:1.05;font-weight:700;letter-spacing:-.028em;color:var(--navy)}
.bt-hero p:not(.bt-eyebrow){margin:18px auto 0;max-width:62ch;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:var(--ink);text-wrap:pretty}

/* ---- Shell / two columns ---- */
.bt-shell{max-width:1680px;width:calc(100% - clamp(24px,5vw,56px));margin:clamp(12px,1.6vw,20px) auto 0;display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px);align-items:flex-start}
.bt-shell>.wp-block-column{margin:0;min-width:0}
.bt-shell>.bt-side-col{flex:1 1 270px;max-width:100%}
.bt-shell>.bt-main-col{flex:999 1 420px}
.bt-side{background:#fff;border:1.5px solid var(--line-2);border-radius:22px;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:20px}
.bt-main{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
/* The rail is not sticky: with the full product list it runs taller than the
   viewport, and a sticky element taller than the window pins its own bottom
   out of reach. It is sized by its content and scrolls with the page. */
@media (min-width:900px){.bt-shell>.bt-side-col{max-width:320px}}

/* ---- Sidebar bits ---- */
.bt-side-head{display:flex;align-items:baseline;gap:12px}
.bt-side-head h2{flex:1;min-width:0;margin:0;font-family:Outfit,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em}
.bt-reset{appearance:none;border:0;background:transparent;padding:0;font-family:Outfit,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--link);cursor:pointer;transition:color .15s ease}
.bt-reset:hover{color:var(--navy)}
.bt-rule{height:1px;background:var(--line)}
.bt-label{font-family:Outfit,sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.bt-label span{color:var(--navy)}
/* No max-height and no overflow: the list shows every product in the category
   and the page scroll carries it, rather than a small scroll box in the rail. */
.bt-names{display:flex;flex-direction:column;gap:12px}
.bt-name{appearance:none;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:13px;cursor:pointer;text-align:left;width:100%}
.bt-box{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;border:2px solid var(--rail);background:#fff;transition:border-color .15s ease,background .15s ease}
.bt-box svg{opacity:0;transition:opacity .12s ease}
.bt-name[aria-pressed="true"] .bt-box{border-color:var(--cyan);background:var(--cyan)}
.bt-name[aria-pressed="true"] .bt-box svg{opacity:1}
/* Sub categories are one-at-a-time, so those rows are radios: same row rhythm
   as the checkbox list, round mark instead of a check. */
.bt-box--radio{border-radius:50%}
.bt-dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;transition:opacity .12s ease}
.bt-radio[aria-checked="true"] .bt-box{border-color:var(--cyan);background:var(--cyan)}
.bt-radio[aria-checked="true"] .bt-dot{opacity:1}
.bt-radio[aria-checked="true"] .bt-name-t{font-weight:600;color:var(--navy)}
.bt-name-t{font-family:Outfit,sans-serif;font-size:16px;font-weight:500;color:var(--ink);line-height:1.3}
.bt-name[aria-pressed="true"] .bt-name-t{font-weight:600;color:var(--navy)}
.bt-ends{display:flex;justify-content:space-between;margin-top:9px;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---- Dual range slider ---- */
.bt-dual{position:relative;height:20px}
.bt-dual .bt-track{position:absolute;left:0;right:0;top:8px;height:4px;border-radius:999px;background:var(--rail)}
.bt-dual .bt-fill{position:absolute;top:8px;height:4px;border-radius:999px;background:var(--cyan)}
.bt-range{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;width:100%;height:20px;margin:0;background:transparent;pointer-events:none;outline:none}
.bt-range::-webkit-slider-runnable-track{height:20px;background:transparent;border:0}
.bt-range::-moz-range-track{height:20px;background:transparent;border:0}
.bt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cyan-2);border:2px solid var(--navy);cursor:grab;pointer-events:auto;margin-top:1px}
.bt-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cyan-2);border:2px solid var(--navy);cursor:grab;pointer-events:auto}
.bt-range:active::-webkit-slider-thumb{cursor:grabbing;background:var(--cyan-3)}
.bt-range:active::-moz-range-thumb{cursor:grabbing;background:var(--cyan-3)}

/* ---- Toolbar ---- */
/* Scoped to .bt-main: the site header's bar carries the same .bt-bar class, and
   an unscoped flex rule here turned the header's inner shell into a shrink-to-fit
   flex item on every archive page. */
.bt-main .bt-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px}
.bt-bar-l{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px}
.bt-bar .bt-h1{margin:0;font-family:Outfit,sans-serif;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.022em;color:var(--navy)}
.bt-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--mute)}
.bt-crumb a{color:var(--link);text-decoration:none}
.bt-crumb a:hover{color:var(--navy)}
.bt-crumb .bt-here{color:var(--navy);font-weight:500}
.bt-count{font-size:14.5px;color:var(--mute)}

/* ---- Product grid + card ---- */
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(14px,1.6vw,22px)}
.bt-grid>*{margin:0}
.bt-card{background:#fff;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s ease,box-shadow .18s ease}
.bt-card:hover,.bt-card:focus-within{border-color:var(--cyan)}
.bt-card[hidden]{display:none}
.bt-media{position:relative;aspect-ratio:1/1;background:var(--navy);overflow:hidden}
.bt-media>a{position:absolute;inset:0;background-size:cover;background-position:center}
.bt-flag{position:absolute;top:12px;left:12px;font-family:Outfit,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);background:var(--cyan);border-radius:6px;padding:5px 9px}
.bt-body{padding:16px 18px 0;display:flex;flex-direction:column;gap:7px;flex:1}
.bt-cat{font-family:Outfit,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.bt-name-h{font-family:Outfit,sans-serif;font-size:17.5px;font-weight:600;line-height:1.28;letter-spacing:-.01em;margin:0;color:var(--navy)}
.bt-dose{font-size:13.5px;color:var(--mute)}
.bt-prices{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.bt-price{font-family:Outfit,sans-serif;font-size:23px;font-weight:700;font-variant-numeric:tabular-nums}
.bt-was{font-size:15px;color:#A8BCC7;text-decoration:line-through;font-variant-numeric:tabular-nums}
.bt-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bt-pill{display:inline-flex;align-items:center;gap:5px;background:var(--sky);border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:600;color:var(--link)}
.bt-view{margin:auto -18px 0;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--navy);padding:16px 0;font-family:Outfit,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.005em;color:#fff;text-decoration:none;transition:background .15s ease}
.bt-view:hover{background:#164A7A;color:#fff}
.bt-view:active{background:#08213A}

/* ---- Empty state ---- */
.bt-empty{display:none;background:#fff;border:1.5px dashed var(--line-2);border-radius:20px;padding:clamp(36px,5vw,64px);text-align:center}
.bt-empty.is-on{display:block}
.bt-empty-t{font-family:Outfit,sans-serif;font-size:20px;font-weight:600;margin-bottom:8px}
.bt-empty p{margin:0 0 20px;font-size:14.5px;color:var(--mute)}
.bt-empty button{appearance:none;border:0;border-radius:999px;background:var(--navy);color:#fff;font-family:Outfit,sans-serif;font-size:14.5px;font-weight:600;padding:13px 26px;cursor:pointer;transition:background .15s ease}
.bt-empty button:hover{background:#164A7A}

.bt-arc button:focus-visible,.bt-arc a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- Filter rail, grid-first source order ----
   The rail renders on the LEFT to match the Nasal Sprays archive, but the grid
   comes FIRST in the markup so a screen reader and a phone reach the products
   before seventy filter checkboxes. row-reverse buys the visual order without
   paying for it in source order; on a phone it unwinds to a plain column, so
   the grid stays first there too. */
.bt-shell--rail-left{flex-direction:row-reverse}
@media (max-width:899px){.bt-shell--rail-left{flex-direction:column}}

/* Stock pill, top-left of the card image. The Sale flag moves to the right so
   the two never overlap. */
.bt-media {
	position: relative;
}

.bt-stock {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	font-family: var(--bt-display), sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #0b2c4d;
	background: #fff;
	border-radius: 999px;
	padding: 5px 10px;
	box-shadow: 0 2px 8px rgba(11, 44, 77, 0.18);
}


.bt-stock.is-out {
	color: #7c93a3;
}


.bt-flag {
	left: auto;
	right: 12px;
}
/* ---------- Card image focal point ---------- */

/* The product renders place the vial hard against the right of the frame - so
   far right that even a full-right crop leaves it near 55%, measured on the
   live images. A centre crop put it at 78%. The card now loads the uncropped
   600px size and crops here rather than using WooCommerce's pre-cropped square.
   Truly centred vials need the source photos re-exported with the subject
   centred; this is the closest crop can get. */
.bt-media > a {
	background-position: 100% 50%;
}