/* HFT Search and Filter — Brand v2.1 styling.
   Navy #1B437D · Navy-900 #12305A · Blue #0758A1 · Green-deep #1F8551
   CTA pink #D6337B (hover #B62A67) · Gold #FBB915 · Cream #FBF5EC
   Slate #93A0AD / #5A6B7D · Hairline #EEE6DA · Pink tint #FBE8F1
   Fonts: Fredoka (display/headings/chips), Nunito Sans (body),
   Source Serif 4 (product/card titles). */

.hft-saf-app,
.hft-saf-bar,
.hft-popular {
	--hft-navy: #1B437D;
	--hft-navy-900: #12305A;
	--hft-blue: #0758A1;
	--hft-green: #1F8551;
	--hft-sage: #0758A1;         /* legacy accent var — remapped to brand blue (never green) */
	--hft-rose: #D6337B;         /* CTA pink */
	--hft-rose-hover: #B62A67;
	--hft-gold: #FBB915;
	--hft-cream: #FBF5EC;
	--hft-taupe: #93A0AD;        /* slate */
	--hft-slate: #5A6B7D;
	--hft-sage-mist: #EEE6DA;    /* warm hairline */
	--hft-rose-petal: #FBE8F1;   /* light pink tint */
	font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
	color: var(--hft-navy);
}

.hft-saf-app h1, .hft-saf-app h4,
.hft-popular h1, .hft-popular h2, .hft-popular h3 {
	font-family: "Fredoka", "Nunito Sans", system-ui, sans-serif;
}

/* ---- Search bar (Brand v2.1: cream pill, magnifier on the LEFT, blue focus) ---- */
.hft-saf-search { position: relative; display: flex; align-items: center; max-width: 560px; }
.hft-saf-input {
	flex: 1; padding: 12px 16px 12px 44px; border: 0;
	border-radius: 999px; font-size: 16px; outline: none; background: transparent;
	color: var(--hft-navy); font-weight: 600;
}
.hft-saf-input::placeholder { color: var(--hft-slate); opacity: 1; }
.hft-saf-submit {
	border: 0; padding: 0; background: transparent; color: var(--hft-navy); cursor: pointer;
}

.hft-saf-suggest {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
	background: #fff; border: 1px solid var(--hft-sage-mist); border-radius: 12px;
	box-shadow: 0 10px 30px rgba(18,48,90,.12); overflow: hidden;
}
.hft-suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--hft-navy); }
.hft-suggest-item:hover { background: var(--hft-cream); }
.hft-suggest-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.hft-suggest-all { display: block; padding: 12px 14px; font-weight: 700; color: var(--hft-rose); text-decoration: none; border-top: 1px solid var(--hft-sage-mist); }
.hft-suggest-none { padding: 14px; color: var(--hft-taupe); }

/* ---- Top bar above filter row ---- */
.hft-saf-topbar { margin-bottom: 18px; }

/* ---- Filter bar (TPT-style horizontal) ---- */
.hft-filter-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
	margin-bottom: 22px; padding-bottom: 18px;
	border-bottom: 1px solid var(--hft-sage-mist);
}
.hft-facets-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Each facet group renders as a dropdown */
.hft-facet-group { position: relative; margin: 0; }
.hft-facet-title {
	margin: 0; display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px; font-family: "Nunito Sans", system-ui, sans-serif;
	font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
	color: var(--hft-navy); background: #fff;
	border: 1.5px solid var(--hft-sage); border-radius: 999px;
	cursor: pointer; user-select: none;
	transition: background .12s, border-color .12s, color .12s;
}
.hft-facet-title::after {
	content: ""; width: 7px; height: 7px; margin-left: 2px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.hft-facet-title:hover { border-color: var(--hft-rose); color: var(--hft-rose); }
.hft-facet-group.has-active > .hft-facet-title {
	border-color: var(--hft-rose); color: var(--hft-rose); background: var(--hft-rose-petal);
}
.hft-facet-group.open > .hft-facet-title {
	background: var(--hft-navy); border-color: var(--hft-navy); color: #fff;
}
.hft-facet-group.open > .hft-facet-title::after { transform: rotate(-135deg) translateY(2px); }

/* Dropdown panel */
.hft-facet-list {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
	min-width: 240px; max-width: 340px; max-height: 340px; overflow: auto;
	list-style: none; margin: 0; padding: 8px;
	border: 1px solid var(--hft-sage-mist); border-radius: 14px;
	box-shadow: 0 14px 36px rgba(31,42,68,.16);
	display: none;
	background: #fff;
	/* v0.5.2 #1: ALWAYS-VISIBLE rose scrollbar whenever the list overflows (many
	   options). We deliberately do NOT set the standard scrollbar-width/
	   scrollbar-color: on macOS those make Safari/Chrome use the OVERLAY scrollbar
	   that auto-hides until you scroll. Styling ONLY the ::-webkit-scrollbar
	   pseudo-elements forces a persistent (non-overlay) bar that stays visible the
	   whole time the dropdown is scrollable. Short lists (overflow:auto, no
	   overflow) show no bar. Firefox falls back to its default always-visible bar. */
}
.hft-facet-list::-webkit-scrollbar { width: 10px; -webkit-appearance: none; }
.hft-facet-list::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.hft-facet-list::-webkit-scrollbar-thumb {
	background: #93A0AD; border-radius: 999px; border: 2px solid #fff; min-height: 36px;
}
.hft-facet-list::-webkit-scrollbar-thumb:hover { background: #5A6B7D; }
.hft-facet-group.open > .hft-facet-list { display: block; }
.hft-facet-list li { margin: 0; }
.hft-facet-list label {
	display: flex; align-items: center; gap: 10px; padding: 8px 10px;
	font-size: 15px; border-radius: 8px; cursor: pointer;
}
.hft-facet-list label:hover { background: #f3f4f6; }
.hft-facet { width: 16px; height: 16px; accent-color: var(--hft-sage); flex: none; }
.hft-facet-name { flex: 1; }
.hft-facet-count { color: var(--hft-taupe); font-size: 13px; }

/* "All Filters" button (reserved for future combined panel) */
.hft-all-filters-btn {
	padding: 9px 16px; font-size: 15px; font-weight: 700; cursor: pointer;
	color: var(--hft-navy); background: var(--hft-rose-petal);
	border: 1.5px solid transparent; border-radius: 999px;
}
.hft-all-filters-btn:hover { border-color: var(--hft-rose); color: var(--hft-rose); }

/* Active filter chips */
.hft-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hft-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 600;
	color: var(--hft-rose-hover); background: var(--hft-rose-petal); border-radius: 999px;
}
.hft-chip button {
	border: 0; background: transparent; color: var(--hft-rose-hover);
	font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; display: flex;
}
.hft-chip button:hover { color: var(--hft-navy); }
.hft-chip-clear {
	padding: 5px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
	color: var(--hft-taupe); background: transparent; border: 0; text-decoration: underline;
}
.hft-chip-clear:hover { color: var(--hft-rose); }

/* ---- Results ---- */
.hft-results-head { margin-bottom: 16px; }
.hft-results-title { margin: 0; font-size: 28px; }
.hft-results-count { margin: 4px 0 0; color: var(--hft-taupe); }
.hft-no-results { color: var(--hft-taupe); font-size: 16px; padding: 24px 0; }
/* card styling lives in the "TPT-style cards" block near the end of this file */

/* ---- Mobile ---- */
@media (max-width: 767px) {
	.hft-saf-search { max-width: none; }
	.hft-facets-row { width: 100%; }
	.hft-facet-group { flex: 1 1 calc(50% - 5px); }
	.hft-facet-title { width: 100%; justify-content: space-between; }
	.hft-facet-list { left: 0; right: 0; min-width: 0; max-width: none; width: 100%; }
}

/* ---- Popular directory ---- */
.hft-popular { max-width: 1100px; margin: 0 auto; }
.hft-popular-head { margin: 0 0 22px; }
.hft-popular-head h1 { font-size: 34px; line-height: 1.15; margin: 0 0 10px; color: var(--hft-navy); }
.hft-popular-intro { color: var(--hft-taupe); font-size: 17px; line-height: 1.55; max-width: 760px; margin: 0; }
.hft-popular-empty a { color: var(--hft-rose); }

/* Jump-to-grade nav */
.hft-popular-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px;
	padding: 14px 16px; background: var(--hft-cream); border-radius: 14px; }
.hft-popular-nav a { font-size: 14px; font-weight: 700; color: var(--hft-navy); text-decoration: none;
	padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #e7ddd2;
	transition: background .15s, color .15s, border-color .15s; }
.hft-popular-nav a:hover { background: var(--hft-sage); color: #fff; border-color: var(--hft-sage); }

/* Grade section card */
.hft-popular-grade { margin: 0 0 30px; padding: 22px 24px; background: #fff;
	border: 1px solid #ede4d9; border-radius: 16px; box-shadow: 0 2px 10px rgba(31,42,68,.04);
	scroll-margin-top: 90px; }
.hft-popular-grade-title { font-size: 25px; color: var(--hft-navy); border-bottom: 3px solid var(--hft-gold);
	padding-bottom: 8px; margin: 0 0 18px; }
.hft-popular-subject { margin: 0 0 20px; }
.hft-popular-subject:last-child { margin-bottom: 0; }
.hft-popular-subject-title { font-size: 19px; color: var(--hft-sage); margin: 0 0 8px; font-weight: 800; }
.hft-popular-skill-title { font-size: 15px; color: var(--hft-rose); margin: 12px 0 4px; font-weight: 800;
	text-transform: uppercase; letter-spacing: .04em; font-family: "Nunito Sans", system-ui, sans-serif; }
.hft-popular-links { list-style: none; margin: 0 0 4px; padding: 0; columns: 3; column-gap: 32px; }
.hft-popular-links li { margin: 0 0 7px; break-inside: avoid; }
.hft-popular-links a { color: var(--hft-navy); text-decoration: none; font-size: 15.5px;
	border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.hft-popular-links a:hover { color: var(--hft-rose); border-color: var(--hft-rose); }
.hft-popular-count { color: var(--hft-taupe); font-size: 14px; font-style: italic; margin: 6px 0 0; }
.hft-popular-empty { color: var(--hft-taupe); padding: 30px 0; }
@media (max-width: 980px) { .hft-popular-links { columns: 2; } }
@media (max-width: 600px) {
	.hft-popular-links { columns: 1; }
	.hft-popular-grade { padding: 18px 16px; }
	.hft-popular-head h1 { font-size: 28px; }
}


/* ===== Live-search dropdown: 3 terms + 3 products + see-all (TPT-style) ===== */
.hft-saf-search{position:relative}
.hft-saf-suggest{position:absolute;z-index:99999;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #e7e9ef;border-radius:12px;box-shadow:0 12px 32px rgba(31,42,68,.16);padding:6px 0;max-height:72vh;overflow-y:auto}
.hft-saf-suggest[hidden]{display:none}
.hft-suggest-label{font:600 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a91a3;padding:10px 16px 6px}
.hft-suggest-term{display:flex;align-items:center;gap:10px;padding:9px 16px;color:#1B437D;text-decoration:none;font:500 15px/1.2 system-ui,-apple-system,sans-serif}
.hft-suggest-term:before{content:"";width:15px;height:15px;flex:0 0 15px;opacity:.55;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B437D' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E")}
.hft-suggest-term:hover{background:#f4f6f5}
.hft-suggest-term strong{font-weight:800}
.hft-suggest-products{border-top:1px solid #eef0f4;margin-top:4px;padding-top:4px}
.hft-suggest-product{display:flex;align-items:center;gap:12px;padding:8px 16px;text-decoration:none}
.hft-suggest-product:hover{background:#f4f6f5}
.hft-suggest-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:8px;object-fit:cover;background:#f0f2f6;border:1px solid #eceef3}
.hft-suggest-title{color:#1B437D;font:500 14px/1.3 system-ui,-apple-system,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hft-suggest-all{display:block;text-align:center;padding:11px 16px;margin-top:4px;border-top:1px solid #eef0f4;color:#D6337B;font:700 14px/1 system-ui,-apple-system,sans-serif;text-decoration:none}
.hft-suggest-all:hover{color:#B62A67;background:#fcf5f7}
.hft-suggest-none{padding:14px 16px;color:#8a91a3;font:400 14px/1.4 system-ui,-apple-system,sans-serif}


/* overrides to beat theme/Elementor link styles inside the dropdown */
.hft-saf-suggest a,.hft-saf-suggest a:link,.hft-saf-suggest a:visited,.hft-saf-suggest a:hover{text-decoration:none!important;box-shadow:none!important}
.hft-saf-suggest a.hft-suggest-term,.hft-saf-suggest a.hft-suggest-term strong{color:#1B437D!important}
.hft-saf-suggest a.hft-suggest-term strong{font-weight:700}
.hft-saf-suggest a.hft-suggest-product .hft-suggest-title{color:#1B437D!important}
.hft-saf-suggest a.hft-suggest-all{color:#D6337B!important}
.hft-saf-suggest a.hft-suggest-all:hover{color:#B62A67!important}


/* ===== v0.3.2 — Live search bar + dropdown: TPT layout, HFT skin (Nunito Sans) ===== */
/* Search bar: connected pill; override theme/Elementor input+button styling */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search{position:relative;display:flex;align-items:center;max-width:640px;background:#FBF5EC;border:1.6px solid #ECE3D5;border-radius:999px;padding:0 12px;transition:box-shadow .14s,border-color .14s}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search:hover,
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search:focus-within{border-color:#0758A1;box-shadow:0 0 0 1px #0758A1}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-input{flex:1;min-width:0;padding:10px 8px 10px 44px!important;font:600 17px/1.2 "Nunito Sans",system-ui,sans-serif!important;color:#1B437D!important;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;outline:0!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-input::placeholder{color:#5A6B7D!important;opacity:1}
/* Magnifier: bare navy icon, absolutely positioned on the LEFT (click still searches). */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit{position:absolute!important;left:16px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;padding:0!important;width:auto!important;min-width:0!important;height:auto!important;flex:0 0 auto!important;color:#1B437D!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit:hover{background:transparent!important;color:#0758A1!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit svg{width:21px!important;height:21px!important;stroke:currentColor!important;display:block}
/* #5 — In the HEADER, the cream pill fills its slot so there is no dead cream
   strip to the right of the field (the header bg was showing through the gap
   left by the 640px cap, which read as the field "growing" on focus). The
   in-page /resources bar (.hft-saf-app) keeps its centered 640px cap. */
.hft-saf-bar .hft-saf-search{max-width:none!important;width:100%!important;box-sizing:border-box!important;}
/* Dropdown container */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest{top:calc(100% + 8px)!important;border:1px solid var(--hft-sage-mist)!important;border-radius:14px!important;box-shadow:0 16px 40px rgba(31,42,68,.16)!important;padding:6px 0!important}
/* Section label */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-label{font:800 11px/1 "Nunito Sans",system-ui,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;color:var(--hft-taupe)!important;padding:12px 18px 6px!important}
/* Text suggestion rows */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term{gap:12px!important;padding:10px 18px!important;font:500 15px/1.25 "Nunito Sans",system-ui,sans-serif!important;color:var(--hft-navy)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term strong{font-weight:800!important;color:var(--hft-navy)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term:hover{background:var(--hft-sage-mist)!important}
/* Product rows */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-products{border-top:1px solid var(--hft-sage-mist)!important;margin-top:4px;padding-top:6px}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-product{gap:14px!important;padding:9px 18px!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-product:hover{background:var(--hft-sage-mist)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-thumb{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:8px!important;border:1px solid var(--hft-sage-mist)!important;background:var(--hft-cream)!important;object-fit:cover}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-title{font:600 14px/1.3 "Nunito Sans",system-ui,sans-serif!important;color:var(--hft-navy)!important}
/* See all footer */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all{text-align:center!important;padding:12px 16px!important;margin-top:6px;border-top:1px solid var(--hft-sage-mist)!important;font:800 14px/1 "Nunito Sans",system-ui,sans-serif!important;color:var(--hft-rose)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all:hover{color:var(--hft-rose-hover)!important;background:var(--hft-rose-petal)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-none{font:400 14px/1.4 "Nunito Sans",system-ui,sans-serif!important;color:var(--hft-taupe)!important;padding:14px 18px!important}


/* ===== v0.3.3 — fix term text split (flex gap broke words: "Fr"+"actions") ===== */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term{display:block!important;position:relative;padding:10px 18px 10px 46px!important;line-height:1.35}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term:before{position:absolute!important;left:18px;top:50%;transform:translateY(-50%);margin:0!important}


/* ===== v0.3.4 — TPT-format dropdown: airy spacing, sentence-case labels, see-all w/ query ===== */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest{border-radius:16px!important;box-shadow:0 4px 18px rgba(31,42,68,.14)!important;padding:8px 0!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-label{font:600 13px/1.2 "Nunito Sans",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--hft-taupe)!important;padding:12px 20px 4px!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term{font:400 16px/1.5 "Nunito Sans",system-ui,sans-serif!important;padding:9px 20px 9px 48px!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term strong{font-weight:800!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term:before{left:20px!important;width:16px!important;height:16px!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-products{padding-top:4px!important;margin-top:2px!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-product{padding:10px 20px!important;gap:14px!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-title{font:500 15px/1.35 "Nunito Sans",system-ui,sans-serif!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all{text-align:left!important;padding:13px 20px!important;margin-top:4px;font:400 16px/1.4 "Nunito Sans",system-ui,sans-serif!important;color:var(--hft-navy)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all strong{font-weight:800!important;color:var(--hft-rose)!important}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all:hover{color:var(--hft-navy)!important;background:var(--hft-rose-petal)!important}


/* ---- v0.3.5: TPT pills (selected value + clear x) + magnifier ---- */
.hft-facet-title { appearance: none; -webkit-appearance: none; }
.hft-facet-label { line-height: 1.2; }
.hft-facet-group.has-active .hft-facet-label::after { content: ":"; margin: 0 4px 0 1px; opacity: .65; }
.hft-facet-value { font-weight: 800; }
.hft-facet-value:empty { display: none; }
.hft-facet-clear { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 999px; background: rgba(214,51,123,.18); color: var(--hft-rose); font-size: 14px; line-height: 1; font-weight: 700; cursor: pointer; }
.hft-facet-group.has-active .hft-facet-clear { display: inline-flex; }
.hft-facet-clear:hover { background: var(--hft-rose); color: #fff; }
.hft-saf-submit { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; }
.hft-saf-submit svg { width: 20px; height: 20px; display: block; }


/* ---- v0.3.5b: out-specify Elementor's .elementor-kit-38 button defaults ---- */
.hft-saf-app .hft-facet-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--hft-navy); background: #fff; border: 1.5px solid var(--hft-sage); border-radius: 999px; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; text-shadow: none; }
.hft-saf-app .hft-facet-title:hover { background: rgba(90,107,125,.10); border-color: rgba(90,107,125,.32); color: var(--hft-navy); }
.hft-saf-app .hft-facet-group.has-active > .hft-facet-title { background: rgba(90,107,125,.15); border-color: rgba(90,107,125,.40); color: var(--hft-navy); }
.hft-saf-app .hft-facet-group.open > .hft-facet-title { background: rgba(90,107,125,.18); border-color: rgba(90,107,125,.45); color: var(--hft-navy); }

/* ===== All-filters drawer (v0.3.7) ===== */
.hft-saf-app .hft-all-filters-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border-color:var(--hft-sage);color:var(--hft-navy);}
.hft-saf-app .hft-all-filters-btn:hover{border-color:rgba(90,107,125,.32);color:var(--hft-navy);background:rgba(90,107,125,.10);}
.hft-saf-app .hft-all-filters-btn.has-active{border-color:rgba(90,107,125,.40);color:var(--hft-navy);background:rgba(90,107,125,.15);}
.hft-all-filters-count{font-weight:800;}
.hft-all-filters-count:empty{display:none;}
.hft-saf-drawer-overlay{position:fixed;inset:0;z-index:9998;background:rgba(31,42,68,.45);opacity:0;transition:opacity .25s;}
.hft-saf-drawer-overlay.open{opacity:1;}
.hft-saf-drawer{position:fixed;top:0;right:0;z-index:9999;height:100%;width:380px;max-width:90vw;display:flex;flex-direction:column;background:#fff;box-shadow:-12px 0 40px rgba(31,42,68,.18);transform:translateX(100%);transition:transform .25s ease;}
.hft-saf-drawer.open{transform:translateX(0);}
.hft-saf-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--hft-sage-mist);}
.hft-saf-drawer-title{font-family:"Fredoka","Nunito Sans",sans-serif;font-size:22px;font-weight:700;color:var(--hft-navy);}
.hft-saf-drawer .hft-saf-drawer-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--hft-taupe);padding:0 4px;}
.hft-saf-drawer .hft-saf-drawer-close:hover{color:var(--hft-rose);background:transparent;}
.hft-saf-drawer-body{flex:1;overflow-y:auto;padding:8px 20px 20px;}
/* v0.5.2: persistent rose scrollbar on the "All filters" modal/drawer body when it
   overflows — same always-visible cue as the filter dropdowns. WebKit pseudos only
   (no standard scrollbar-color/width) so macOS doesn't auto-hide it. */
.hft-saf-drawer-body::-webkit-scrollbar{width:10px;-webkit-appearance:none;}
.hft-saf-drawer-body::-webkit-scrollbar-track{background:transparent;margin:6px 0;}
.hft-saf-drawer-body::-webkit-scrollbar-thumb{background:#93A0AD;border-radius:999px;border:2px solid #fff;min-height:36px;}
.hft-saf-drawer-body::-webkit-scrollbar-thumb:hover{background:#5A6B7D;}
.hft-saf-drawer-foot{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--hft-sage-mist);}
.hft-saf-drawer .hft-saf-drawer-clear{flex:0 0 auto;border:1.5px solid var(--hft-sage);background:#fff;color:var(--hft-navy);border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;}
.hft-saf-drawer .hft-saf-drawer-clear:hover{border-color:var(--hft-rose);color:var(--hft-rose);background:#fff;}
.hft-saf-drawer .hft-saf-drawer-apply{flex:1;border:0;background:var(--hft-rose);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;}
.hft-saf-drawer .hft-saf-drawer-apply:hover{background:var(--hft-rose-hover);}
.hft-saf-drawer .hft-facet-group{position:static;border-bottom:1px solid var(--hft-sage-mist);padding:6px 0;margin:0;}
.hft-saf-drawer .hft-facet-group:last-child{border-bottom:0;}
.hft-saf-drawer .hft-facet-title{width:100%;justify-content:space-between;background:transparent;border:0;border-radius:0;padding:12px 2px;font-size:16px;color:var(--hft-navy);}
.hft-saf-drawer .hft-facet-title:hover{color:var(--hft-rose);background:transparent;}
.hft-saf-drawer .hft-facet-group.has-active > .hft-facet-title{background:transparent;color:var(--hft-rose);}
.hft-saf-drawer .hft-facet-title::after{transform:rotate(45deg);}
.hft-saf-drawer .hft-facet-group.collapsed > .hft-facet-title::after{transform:rotate(-45deg);}
.hft-saf-drawer .hft-facet-list{position:static;display:block;box-shadow:none;border:0;padding:0 0 8px;max-height:none;min-width:0;max-width:none;}
.hft-saf-drawer .hft-facet-group.collapsed > .hft-facet-list{display:none;}
.hft-saf-drawer .hft-facet-clear{display:none;}
.hft-saf-drawer .hft-facet-group.has-active .hft-facet-clear{display:inline-flex;}
@media (max-width:767px){.hft-saf-drawer{width:100%;max-width:100%;}}

/* === HFT SAF v0.3.9 Phase 1b finish === */
.hft-saf-app .hft-facets-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch;flex:1 1 100%;width:100%;}
.hft-saf-app .hft-facets-row > .hft-facet-group,
.hft-saf-app .hft-facets-row > .hft-all-filters-btn{flex:1 1 0;min-width:0;}
.hft-saf-app .hft-facets-row > .hft-all-filters-btn{order:99;}
.hft-saf-app .hft-facet-group{position:relative;}
.hft-saf-app .hft-facet-title,
.hft-saf-app .hft-all-filters-btn{width:100%;display:flex;align-items:center;gap:6px;justify-content:flex-start;background:#ffffff;border:1px solid #E1E4E8;border-radius:999px;padding:9px 14px;font-family:'Nunito Sans',sans-serif;font-size:14px;font-weight:600;color:var(--hft-navy,#1B437D);cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
/* v0.6.75: filter-pill hover + selected are now a light, transparent brand
   gray (slate tint) instead of pink/rose — softer, on-brand, less shouty. */
.hft-saf-app .hft-facet-title:hover,
.hft-saf-app .hft-all-filters-btn:hover{background:rgba(90,107,125,.10);border-color:rgba(90,107,125,.32);color:var(--hft-navy,#1B437D);}
.hft-saf-app .hft-facet-title,.hft-saf-app .hft-all-filters-btn{min-width:0;}
.hft-saf-app .hft-facet-label{overflow:hidden;text-overflow:ellipsis;}
.hft-saf-app .hft-facet-title::after,
.hft-saf-app .hft-all-filters-btn::after{content:"";margin-left:auto;flex:0 0 auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;opacity:.6;position:relative;top:-2px;}
.hft-saf-app .hft-facet-group.open .hft-facet-title::after{transform:rotate(-135deg);top:1px;}
.hft-saf-app .hft-facet-group.has-active .hft-facet-title,
.hft-saf-app .hft-all-filters-btn.has-active{background:rgba(90,107,125,.15);border-color:rgba(90,107,125,.40);color:var(--hft-navy,#1B437D);}
.hft-saf-app .hft-facet-group.has-active .hft-facet-title::after{margin-left:6px;}
.hft-saf-app .hft-facet-value:empty{display:none;}
.hft-saf-app .hft-facet-group.has-active .hft-facet-value{font-weight:700;}
.hft-saf-app .hft-facet-clear{display:none;}
.hft-saf-app .hft-facet-group.has-active .hft-facet-clear{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:0 0 auto;width:auto;height:auto;border-radius:0;background:none;color:var(--hft-slate,#5A6B7D);font-size:16px;line-height:1;font-weight:700;padding-right:9px;margin-right:0;border-right:1px solid rgba(90,107,125,.35);}
/* (4) circle radios */
.hft-saf-app .hft-facet{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #C7CDD4;border-radius:50%;background:#fff;margin:0 8px 0 0;flex:0 0 auto;cursor:pointer;position:relative;vertical-align:middle;}
.hft-saf-app .hft-facet:checked{border-color:var(--hft-rose,#D6337B);}
.hft-saf-app .hft-facet:checked::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--hft-rose,#D6337B);transform:translate(-50%,-50%);}
.hft-saf-app .hft-facet-group li label{display:flex;align-items:center;gap:8px;cursor:pointer;}
.hft-saf-app .hft-facet-name{flex:1 1 auto;}

/* === shape lock v0.3.13 — pills stay rounded in every state (bar + modal) === */
.hft-saf-app .hft-facet-title,
.hft-saf-app .hft-facet-group.open > .hft-facet-title,
.hft-saf-app .hft-facet-title:hover,
.hft-saf-app .hft-facet-group.has-active .hft-facet-title,
.hft-saf-app .hft-all-filters-btn,
.hft-saf-app .hft-all-filters-btn:hover,
.hft-saf-drawer .hft-facet-title,
.hft-saf-drawer .hft-facet-title:hover{border-radius:999px !important;}

/* drawer-foot shape lock v0.3.15 — Clear all / Show results stay rounded on hover */
.hft-saf-drawer .hft-saf-drawer-clear,
.hft-saf-drawer .hft-saf-drawer-clear:hover,
.hft-saf-drawer .hft-saf-drawer-apply,
.hft-saf-drawer .hft-saf-drawer-apply:hover{border-radius:999px !important;}
.hft-saf-drawer .hft-saf-drawer-close,
.hft-saf-drawer .hft-saf-drawer-close:hover{border-radius:50% !important;}


/* ===== Brand v2.1 — magnifier is a bare navy icon on the LEFT (see search-bar block above) ===== */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search{ position:relative !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-input{ border-radius:999px !important; padding-right:16px !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit{ position:absolute !important; left:16px !important; right:auto !important; top:50% !important; transform:translateY(-50%) !important; width:auto !important; height:auto !important; min-width:0 !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#1B437D !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit:hover{ background:transparent !important; color:#0758A1 !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit svg{ stroke:currentColor !important; }

/* ===== Phase 1C #6 — results header controls + list/grid views ===== */
.hft-saf-app .hft-results-headrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.hft-saf-app .hft-results-meta{ min-width:0; }
.hft-saf-app .hft-results-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hft-saf-app .hft-saf-sortwrap{ display:inline-flex; align-items:center; gap:8px; font:600 13px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-taupe); }
.hft-saf-app .hft-saf-sort{ font:600 14px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-navy); background:#fff; border:2px solid var(--hft-sage); border-radius:999px !important; padding:9px 34px 9px 16px; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F2A44' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; }
.hft-saf-app .hft-saf-sort:focus{ outline:none; border-color:var(--hft-rose) !important; }
.hft-saf-app .hft-saf-viewtoggle{ display:inline-flex; border:2px solid var(--hft-sage); border-radius:999px !important; overflow:hidden; }
.hft-saf-app .hft-saf-view{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; min-width:42px; padding:0; margin:0; border:none !important; border-radius:0 !important; background:#fff; color:var(--hft-taupe); cursor:pointer; }
.hft-saf-app .hft-saf-view + .hft-saf-view{ border-left:2px solid var(--hft-sage) !important; }
.hft-saf-app .hft-saf-view.is-active{ background:var(--hft-rose); color:#fff; }
.hft-saf-app .hft-saf-view:hover:not(.is-active){ background:var(--hft-sage-mist); }
/* card layout lives in the "TPT-style cards" block near the end of this file */

/* ===== Phase 1C #6b — TPT header above filters (magnifier stays LEFT, v2.1) ===== */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-input{ padding-right:16px !important; }
/* header now lives above filters; hide any copy left in results section */
.hft-saf-app .hft-saf-results > .hft-results-head{ display:none !important; }
.hft-saf-app .hft-results-head-host{ margin:4px 0 14px; }
.hft-saf-app .hft-results-head-host .hft-results-head{ margin:0; }
/* title + count inline (TPT) */
.hft-saf-app .hft-results-headrow{ display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.hft-saf-app .hft-results-meta{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0; }
.hft-saf-app .hft-results-title{ margin:0; font-family:"Fredoka","Nunito Sans",sans-serif; font-weight:700; font-size:30px; line-height:1.1; color:var(--hft-navy); }
.hft-saf-app .hft-results-count{ margin:0; font:600 15px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-taupe); }
.hft-saf-app .hft-results-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* Sort: inline text dropdown (TPT) */
.hft-saf-app .hft-saf-sortwrap{ display:inline-flex; align-items:center; gap:6px; font:600 15px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-taupe); }
.hft-saf-app .hft-saf-sortlabel{ color:#5A6B7D; }   /* clean slate, was muddy taupe on cream bg */
.hft-saf-app .hft-saf-sort{ font:700 15px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-navy); background-color:transparent !important; border:none !important; border-radius:0 !important; padding:4px 22px 4px 2px !important; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F2A44' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 2px center !important; }
.hft-saf-app .hft-saf-sort:focus{ outline:none; border-color:transparent !important; }
/* View toggle: TPT pill, circled active, HFT palette */
.hft-saf-app .hft-saf-viewtoggle{ display:inline-flex; align-items:center; gap:4px; padding:4px; background:#fff !important; border:1px solid var(--hft-sage-mist) !important; border-radius:999px !important; overflow:visible; }
.hft-saf-app .hft-saf-view{ width:36px !important; height:36px !important; min-width:36px !important; border:none !important; border-radius:50% !important; background:transparent !important; color:var(--hft-taupe) !important; box-shadow:none; transition:background .12s, color .12s, box-shadow .12s; }
.hft-saf-app .hft-saf-view + .hft-saf-view{ border-left:none !important; }
.hft-saf-app .hft-saf-view:hover:not(.is-active){ background:var(--hft-sage-mist) !important; color:var(--hft-navy) !important; }
.hft-saf-app .hft-saf-view.is-active{ background:#fff !important; color:var(--hft-navy) !important; box-shadow:inset 0 0 0 2px var(--hft-sage) !important; }

/* ===== Phase 1C #6c — soft-gray hover on Sort pill + view buttons ===== */
.hft-saf-app .hft-saf-sortwrap{ padding:8px 14px; border-radius:999px !important; background:transparent; transition:background .12s; cursor:pointer; }
.hft-saf-app .hft-saf-sortwrap:hover{ background:#F3F4F6; }
.hft-saf-app .hft-saf-view:hover:not(.is-active){ background:#F3F4F6 !important; color:var(--hft-navy) !important; }

/* ===== Phase 1C #6d — custom sort dropdown menu (TPT design, HFT colors) ===== */
.hft-saf-app .hft-saf-sort{ position:relative; padding:0 !important; border:none !important; background-image:none !important; }
.hft-saf-app .hft-saf-sort-toggle{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:none !important; border-radius:999px !important; background:transparent !important; cursor:pointer; font:600 15px/1 "Nunito Sans",system-ui,sans-serif; color:#5A6B7D; transition:background .12s; }
.hft-saf-app .hft-saf-sort-toggle:hover{ background:#f3f4f6 !important; }
.hft-saf-app .hft-saf-sort-value{ font-weight:700; color:var(--hft-navy); }
.hft-saf-app .hft-saf-sort-caret{ color:var(--hft-navy); transition:transform .15s; }
.hft-saf-app .hft-saf-sort.open .hft-saf-sort-caret{ transform:rotate(180deg); }
.hft-saf-app .hft-saf-sort-menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:248px; margin:0; padding:8px; list-style:none; background:#fff; border:1px solid var(--hft-sage-mist); border-radius:16px; box-shadow:0 14px 34px rgba(31,42,68,.16); z-index:60; }
.hft-saf-app .hft-saf-sort-menu[hidden]{ display:none; }
.hft-saf-app .hft-saf-sort-opt{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border-radius:10px; cursor:pointer; font:600 16px/1.1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-navy); list-style:none; }
.hft-saf-app .hft-saf-sort-opt:hover{ background:#F3F4F6; }
.hft-saf-app .hft-saf-sort-opt.is-selected{ background:#F3F4F6; }
.hft-saf-app .hft-saf-sort-check{ color:var(--hft-rose); opacity:0; flex:0 0 auto; }
.hft-saf-app .hft-saf-sort-opt.is-selected .hft-saf-sort-check{ opacity:1; }

/* ===== Phase 1C #6e — pill hover fix + active view green fill ===== */
/* v0.6.75: non-selected, non-open pill hover = light transparent brand gray
   (slate tint), navy text — replaces the old rose-petal hover. This is the
   higher-specificity !important rule that actually paints the hover state. */
.hft-saf-app .hft-facet-group:not(.has-active):not(.open) > .hft-facet-title:hover{ background:rgba(90,107,125,.10) !important; border-color:rgba(90,107,125,.32) !important; color:var(--hft-navy,#1B437D) !important; }
.hft-saf-app .hft-facet-group:not(.has-active):not(.open) > .hft-facet-title:hover .hft-facet-value,
.hft-saf-app .hft-facet-group:not(.has-active):not(.open) > .hft-facet-title:hover .hft-facet-label{ color:var(--hft-navy,#1B437D) !important; }
/* active list/grid button: soft transparent green fill inside the circle */
.hft-saf-app .hft-saf-view.is-active{ background:rgba(107,143,123,0.16) !important; color:var(--hft-navy) !important; box-shadow:inset 0 0 0 2px var(--hft-sage) !important; }

/* ===== Brand v2.1 — magnifier LEFT, ~21px navy icon (final word in the cascade) ===== */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-input{ border:0 !important; border-radius:999px !important; padding:10px 16px 10px 44px !important; background:transparent !important; box-shadow:none !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit{ left:16px !important; right:auto !important; width:auto !important; height:auto !important; min-width:0 !important; background:transparent !important; color:#1B437D !important; border-radius:0 !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-search .hft-saf-submit svg{ width:21px !important; height:21px !important; stroke:currentColor !important; }


/* Phase 1D: dynamic faceting — hide options with 0 results for the current selection */
.hft-saf-app .hft-facet-group li.hft-unavailable,
.hft-saf-drawer .hft-facet-group li.hft-unavailable{display:none!important;}
.hft-saf-app .hft-facet-group.hft-group-empty,
.hft-saf-drawer .hft-facet-group.hft-group-empty{display:none!important;}

/* Phase 1D: lock not-yet-selected options while a filter request is in flight (prevents racing past the 0-result hiding) */
.hft-saf-app .hft-facet-group li.hft-locked,
.hft-saf-drawer .hft-facet-group li.hft-locked{pointer-events:none;opacity:.5;}

/* === HFT SAF v0.3.31 All-filters levers icon === */
.hft-saf-app .hft-all-filters-btn::before{content:"";display:inline-block;flex:0 0 auto;width:17px;height:17px;margin-right:1px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231F2A44'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cline%20x1='8'%20y1='3'%20x2='8'%20y2='21'/%3E%3Cline%20x1='16'%20y1='3'%20x2='16'%20y2='21'/%3E%3Ccircle%20cx='8'%20cy='15'%20r='2.7'%20fill='white'/%3E%3Ccircle%20cx='16'%20cy='9'%20r='2.7'%20fill='white'/%3E%3C/svg%3E");}

/* === HFT SAF v0.3.32 Drawer footer buttons smaller (≈pill height) === */
.hft-saf-drawer .hft-saf-drawer-foot .hft-saf-drawer-clear,
.hft-saf-drawer .hft-saf-drawer-foot .hft-saf-drawer-apply{font-size:14px !important;font-weight:600 !important;line-height:1.2 !important;padding:9px 16px !important;min-height:0 !important;}

/* === HFT SAF v0.3.33 Pill focus state fix (theme button:focus painted pills rose) === */
/* Keyboard focus only (:focus-visible). Mouse click leaves :focus but NOT
   :focus-visible, so after click-open → click-close → mouse-off the pill returns
   to the white default instead of keeping a grey focus background. */
.hft-saf-app .hft-facet-group:not(.has-active):not(.open) > .hft-facet-title:focus-visible,
.hft-saf-app .hft-all-filters-btn:not(.has-active):focus-visible{background:#f3f4f6 !important;border-color:#E1E4E8 !important;color:#1B437D !important;}
/* Mouse focus/active (no :focus-visible) on a closed, inactive pill = plain white. */
.hft-saf-app .hft-facet-group:not(.has-active):not(.open) > .hft-facet-title:focus:not(:focus-visible),
.hft-saf-app .hft-all-filters-btn:not(.has-active):focus:not(:focus-visible){background:#ffffff !important;border-color:#E1E4E8 !important;color:#1B437D !important;}
.hft-saf-app .hft-facet-group.open > .hft-facet-title:focus,
.hft-saf-app .hft-facet-group.open > .hft-facet-title:focus-visible{background:rgba(90,107,125,.18) !important;border-color:rgba(90,107,125,.45) !important;color:var(--hft-navy,#1B437D) !important;}
.hft-saf-app .hft-facet-group.has-active > .hft-facet-title:focus,
.hft-saf-app .hft-facet-group.has-active > .hft-facet-title:focus-visible,
.hft-saf-app .hft-all-filters-btn.has-active:focus,
.hft-saf-app .hft-all-filters-btn.has-active:focus-visible{background:rgba(90,107,125,.15) !important;border-color:rgba(90,107,125,.40) !important;color:var(--hft-navy,#1B437D) !important;}

/* =====================================================================
   TPT-style result cards — HFT brand (v0.3.34)
   Shared card DOM; List vs Grid handled purely by .hft-view-* classes
   so the JS view toggle keeps working without a re-fetch.
   ===================================================================== */
/* Page background for the Resources (beta + launch) page — applies wherever the SAF app renders.
   Excludes the site-wide footer filters modal (.hft-saf-sw) so it doesn't recolor every page. */
body:has(.hft-saf-app:not(.hft-saf-sw)){ background-color:#FBF5EC !important; }
.hft-saf-app .hft-cards{ margin-top:18px; }
.hft-saf-app .hft-card{
	position:relative; /* positioning context for the top-right format pill */
	display:flex; flex-direction:column; background:#fff;
	/* Brand v2.2: NO visible frame at rest (transparent 2px reserves the space so
	   there's zero layout shift); on hover a thin border in the card's own FORMAT
	   color (--fmt) appears, matching the top format band. */
	border:2px solid transparent; border-radius:14px; overflow:hidden;
	transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hft-saf-app .hft-card:hover{
	/* Matches the /brand-kit/ "tags in place" card hover: lift + tight navy shadow. */
	transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(27,67,125,.45);
	border-color:var(--fmt,var(--hft-navy));
}
/* ---- Portrait 8.5x11 frame, image shown WHOLE (no crop) ----
   The frame matches worksheet proportions (8.5/11). object-fit:contain shows the
   full image: portrait worksheets fill edge-to-edge with no side whitespace, while
   horizontal art (and song/video/micro thumbnails) sits centered with white space
   above and below. White letterbox blends into the card. */
.hft-saf-app .hft-card-imgwrap{
	position:relative; display:flex; align-items:center; justify-content:center;
	aspect-ratio:8.5/11; width:100%;
	/* Phase 1 (v0.6.71): fill the white letterbox behind the product with the
	   card's FORMAT color (--fmt) at 80% (videos step to 90% below). #fff is the
	   pre-color-mix fallback for older browsers. */
	background:#fff;
	background:color-mix(in srgb, var(--fmt,#fff) 80%, transparent);
	overflow:hidden; line-height:0;
	/* border-box so padding stays INSIDE the card width — content-box pushed the
	   image right + clipped it (v0.6.72 fix). Equal padding all four sides so the
	   product is evenly inset with matching top/bottom + left/right. */
	box-sizing:border-box; padding:8px;
}
/* v0.6.72: width/height:auto + max-*:100% makes the <img> ELEMENT shrink-wrap to
   its displayed rectangle (contain-fit within the padded slot) for BOTH portrait
   and landscape. Because the element is now the exact image rectangle (no baked-in
   letterbox), border-radius rounds the ACTUAL product corners — which object-fit
   on a full-size element could not do. The centered image leaves the format color
   as an even letterbox above/below (landscape) or a thin mat (portrait). */
.hft-saf-app .hft-card-img{
	width:auto; height:auto; max-width:100%; max-height:100%;
	object-fit:contain; object-position:center center;
	display:block; border-radius:8px; transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
/* Videos (and legacy DVDs): red at 90% instead of 80%. */
.hft-saf-app .hft-card[data-format="videos"] .hft-card-imgwrap,
.hft-saf-app .hft-card[data-format="video-dvds"] .hft-card-imgwrap{
	background:#fff;
	background:color-mix(in srgb, var(--fmt) 90%, transparent);
}
.hft-saf-app .hft-card-img.is-portrait{ object-position:top center; }   /* tall: keep the top */
/* Slight zoom-on-hover for a little life. */
.hft-saf-app .hft-card:hover .hft-card-img{ transform:scale(1.035); }
.hft-saf-app .hft-card-img--empty{ width:100%; height:100%; display:block; background:var(--hft-cream); }

/* ---- Play badge (v0.6.26, migrated from retired snippet #43 "card play badge").
   Pure-CSS play button on songs/videos/micro-lessons card images: a dark circle
   (::before) + a white triangle (::after), centered, with a hover scale.
   The old snippet also carried two CONFLICTING rules that were DROPPED on migration:
     .hft-saf-results .hft-fav{display:none!important}      (hid every result heart)
     .hft-saf-results .hft-card-btnrow{justify-content:center} (leftover) ---- */
.hft-saf-app .hft-card[data-format="songs"] .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="videos"] .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="micro-lessons"] .hft-card-imgwrap::before{
	content:""; position:absolute; top:50%; left:50%;
	width:74px; height:74px; border-radius:50%;
	background:rgba(20,22,28,.72); box-shadow:0 4px 16px rgba(0,0,0,.35);
	transform:translate(-50%,-50%); pointer-events:none; z-index:3;
	transition:transform .15s ease, background .15s ease;
}
.hft-saf-app .hft-card[data-format="songs"] .hft-card-imgwrap::after,
.hft-saf-app .hft-card[data-format="videos"] .hft-card-imgwrap::after,
.hft-saf-app .hft-card[data-format="micro-lessons"] .hft-card-imgwrap::after{
	content:""; position:absolute; top:50%; left:50%;
	width:0; height:0; border-style:solid;
	border-width:13px 0 13px 21px;
	border-color:transparent transparent transparent #fff;
	transform:translate(-50%,-50%) translateX(3px); pointer-events:none; z-index:4;
}
.hft-saf-app .hft-card[data-format="songs"]:hover .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="videos"]:hover .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="micro-lessons"]:hover .hft-card-imgwrap::before{
	transform:translate(-50%,-50%) scale(1.06);
}

/* ===== v0.6.73 Phase 2 — framed mini player (videos/songs/micro-lessons + legacy) =====
   card_image() wraps the thumbnail in .hft-card-player: a dark frame holding a 16:9
   screen (thumbnail + play button + duration badge) and a decorative scrubber row.
   The frame centers in the format-color slot. The old ::before/::after play badge is
   disabled for these formats (the frame carries its own play button). ⚠️Scrubber +
   times are DECORATIVE (no real durations indexed) — the card links to the product. */
.hft-saf-app .hft-card[data-format="songs"] .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="videos"] .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="micro-lessons"] .hft-card-imgwrap::before,
.hft-saf-app .hft-card[data-format="songs"] .hft-card-imgwrap::after,
.hft-saf-app .hft-card[data-format="videos"] .hft-card-imgwrap::after,
.hft-saf-app .hft-card[data-format="micro-lessons"] .hft-card-imgwrap::after{ content:none; }

.hft-saf-app .hft-card-player{ display:block; width:100%; background:#15181d; border-radius:10px; padding:7px 7px 5px; }
.hft-saf-app .hft-card-screen{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000; }
.hft-saf-app .hft-card-player .hft-card-img{
	width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; border-radius:0;
}
.hft-saf-app .hft-card-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:52px; height:52px; border-radius:50%; background:rgba(20,22,28,.72);
	box-shadow:0 4px 16px rgba(0,0,0,.35); z-index:3; pointer-events:none;
	transition:transform .15s ease, background .15s ease;
}
.hft-saf-app .hft-card-play::after{
	content:""; position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%) translateX(3px);
	border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff;
}
.hft-saf-app .hft-card:hover .hft-card-play{ transform:translate(-50%,-50%) scale(1.06); background:rgba(20,22,28,.85); }
.hft-saf-app .hft-card-dur{
	position:absolute; top:7px; right:7px; z-index:3; pointer-events:none;
	background:rgba(0,0,0,.72); color:#fff; padding:2px 6px; border-radius:4px;
	font:700 10px/1 "Nunito Sans",system-ui,sans-serif; letter-spacing:.02em;
}
.hft-saf-app .hft-card-scrub{ display:flex; align-items:center; gap:7px; padding:7px 3px 1px; pointer-events:none; }
.hft-saf-app .hft-scrub-tri{ width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; flex:0 0 auto; }
.hft-saf-app .hft-scrub-bar{ position:relative; flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.28); }
.hft-saf-app .hft-scrub-bar b{ position:absolute; left:0; top:0; bottom:0; width:35%; background:#fff; border-radius:4px; }
.hft-saf-app .hft-scrub-bar::after{ content:""; position:absolute; left:35%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#fff; }
.hft-saf-app .hft-scrub-t{ font:700 9.5px/1 "Nunito Sans",system-ui,sans-serif; color:#c7ccd1; font-style:normal; flex:0 0 auto; }
/* ---- Format pill (used by the List-view rail as a small format badge) ---- */
.hft-saf-app .hft-card-format{
	display:inline-flex; align-self:flex-start; align-items:center; z-index:2;
	font:800 11px/1 "Fredoka","Nunito Sans",system-ui,sans-serif; letter-spacing:.04em;
	text-transform:uppercase; color:#fff; background:var(--fmt,var(--hft-navy));
	padding:5px 9px; border-radius:999px;
}
/* ---- Grade eyebrow (Brand v2.1): the .hft-card-format in the card body now
   shows the GRADE (uppercase) in the GRADE-LEVEL color (inline --grade), not the
   format name. No pill/background — a bare colored eyebrow above the title. ---- */
.hft-saf-app .hft-card-body > .hft-card-format.hft-eyebrow-on{
	display:block; align-self:auto; z-index:auto;
	background:none; color:var(--grade,var(--hft-navy)); padding:0; border-radius:0;
	margin:0 0 5px; font:800 10.5px/1.1 "Fredoka","Nunito Sans",system-ui,sans-serif;
	letter-spacing:.09em; text-transform:uppercase;
}
/* ---- Per-format color (Brand v2.1 canonical /brand-kit/ tag colors) ---- */
.hft-saf-app .hft-card[data-format="worksheets"]         { --fmt:#1F8551; } /* Worksheet — Green */
.hft-saf-app .hft-card[data-format="graphic-organizers"] { --fmt:#0F7A63; } /* Graphic Organizer — Teal-Green */
.hft-saf-app .hft-card[data-format="assessments"]        { --fmt:#0758A1; } /* Assessment — Blue */
.hft-saf-app .hft-card[data-format="digital-learning"]   { --fmt:#2A72B5; } /* Digital Learning — Blue */
.hft-saf-app .hft-card[data-format="google-classroom"]   { --fmt:#1D6A94; } /* Google Classroom — Blue */
.hft-saf-app .hft-card[data-format="workbooks"]          { --fmt:#1B437D; } /* Workbook — Navy */
.hft-saf-app .hft-card[data-format="curriculum"]         { --fmt:#12305A; } /* Curriculum — Navy-900 */
.hft-saf-app .hft-card[data-format="bundles"]            { --fmt:#3F6FB5; } /* Bundle — Blue */
.hft-saf-app .hft-card[data-format="activities"]         { --fmt:#D6337B; } /* Activity — Pink */
.hft-saf-app .hft-card[data-format="micro-lessons"]      { --fmt:#9E3C74; } /* Micro Lesson — Magenta */
.hft-saf-app .hft-card[data-format="songs"]              { --fmt:#7A3FA8; } /* Song — Purple */
.hft-saf-app .hft-card[data-format="videos"]             { --fmt:#CC2E2E; } /* Video — Red */
.hft-saf-app .hft-card[data-format="summer-school"]      { --fmt:#D2470B; } /* Summer School — Orange */
.hft-saf-app .hft-card[data-format="flash-cards"]        { --fmt:#5A6B7D; } /* Flash Cards — Slate */
.hft-saf-app .hft-card[data-format="lesson-plans"]       { --fmt:#3E4C5A; } /* Lesson Plan — Slate */
.hft-saf-app .hft-card[data-format="common-core-lessons"]{ --fmt:#617488; } /* Common Core — Slate */
.hft-saf-app .hft-card[data-format="relief-packs"]       { --fmt:#7A6459; } /* Relief Pack — Warm Brown */
.hft-saf-app .hft-card[data-format="music-cds"]          { --fmt:#7A3FA8; } /* Music CD (legacy) — Purple */
.hft-saf-app .hft-card[data-format="video-dvds"]         { --fmt:#CC2E2E; } /* Video DVD (legacy) — Red */
/* ---- Format BAR (v0.3.93): full-width colored header across the TOP of the
   card, above the image, white label left-justified with left padding. Replaces
   the old below-image pill in GRID view. Color = --fmt (inherited from .hft-card
   [data-format]). Hidden by default; shown per-view below. The card's
   border-radius + overflow:hidden clip the bar's top corners. */
.hft-saf-app .hft-card-fmtbar{
	position:relative; display:none; align-items:center; width:100%; box-sizing:border-box;
	background:var(--fmt,var(--hft-navy)); color:#fff;
	/* Brand kit format pill (.idpill) is Nunito Sans 800 — NOT Fredoka. Fredoka is a
	   chunky rounded display face and read too heavy/bubbly here; Nunito Sans 800
	   (a real weight, axis 200–1000) is the crisp label the brand kit uses. */
	font:800 14px/1 "Nunito Sans",system-ui,sans-serif; letter-spacing:.06em;
	/* Tall enough for the full 44px heart hover circle to sit inside the band with
	   an even margin; right padding clears the circle so the label never tucks under it. */
	text-transform:uppercase; padding:8px 56px 8px 18px; min-height:52px;
}
/* Brand v2.1: the favorite heart lives on the format band, top-right, in white. */
/* Brand-kit heart: a full 44px CIRCLE (big tap target — no near-misses) whose
   white circular highlight appears on hover, exactly like the /brand-kit/
   "tags in place" section. Negative-free absolute placement keeps the thin band
   height; the circle simply overflows onto the thumbnail (clipped by the card). */
/* :not(#no-such-id) boosts specificity to (1,3,0) so the centering !important
   BEATS the global brand press effect `button:not(#no-such-id):active{
   transform:scale(.97)!important}` (1,1,1) — otherwise that rule replaced the
   heart's translateY(-50%) on a held press and it DROPPED ~22px, then popped
   back on release. Now the heart never moves on press: hard press == soft press. */
.hft-saf-app .hft-card-fmtbar .hft-fav:not(#no-such-id){
	position:absolute; top:50%; right:6px; left:auto; bottom:auto;
	transform:translateY(-50%) !important; margin:0; z-index:6;
	/* !important beats the general `.hft-fav{border-radius:0;width:auto}` armor
	   (also inlined in the critical CSS) so the heart is a real 44px circle. */
	width:44px !important; height:44px !important; border-radius:50% !important; padding:0 !important;
	background:transparent; border:0;
	display:flex; align-items:center; justify-content:center;
	transition:background .15s;
}
.hft-saf-app .hft-card-fmtbar .hft-fav:hover,
.hft-saf-app .hft-card-fmtbar .hft-fav:focus-visible{ background:rgba(255,255,255,.16) !important; }
.hft-saf-app .hft-card-fmtbar .hft-fav .hft-fav-ico{ width:19px; height:19px; }
/* NO :hover/:active scale on the icon — that fought the existing JS burst
   animation on click and made the heart "jump down then back up". The click
   effect (burst sparkle) is unchanged; only the circular highlight is new. */
.hft-saf-app .hft-card-fmtbar .hft-fav .hft-fav-ico path{ stroke:#fff; }
.hft-saf-app .hft-card-fmtbar .hft-fav.is-fav .hft-fav-ico path{ fill:#fff; stroke:#fff; }
/* Stay WHITE on the coloured band even on hover (override the generic pink-stroke hover). */
.hft-saf-app .hft-card-fmtbar .hft-fav:hover .hft-fav-ico path{ stroke:#fff; }
.hft-saf-app .hft-card-fmtbar .hft-fav.is-fav:hover .hft-fav-ico path{ fill:#fff; stroke:#fff; }

/* --- Force-click / drag hardening for ALL favorite hearts ---------------
   On a macOS trackpad a HARD (force) click could start a native drag or text
   selection on the heart's SVG instead of firing a clean click — so the hard
   click "didn't work" and the heart appeared to drag/drop. Disable drag +
   selection on the heart, and make the icon pointer-transparent so the <button>
   is ALWAYS the event target (soft and hard clicks behave identically). */
.hft-fav{
	-webkit-user-select:none; user-select:none;
	-webkit-user-drag:none;
	touch-action:manipulation;
}
.hft-fav .hft-fav-ico,
.hft-fav svg,
.hft-fav svg *{
	pointer-events:none;
	-webkit-user-drag:none;
}
/* Card links + images are draggable by default; a press that drifts off the
   heart onto them would start a link/image drag (title underline + swallowed
   click). Kill the drag; pointer-capture (hft-saf.js) keeps the release on the
   heart regardless. */
.hft-saf-app .hft-card a,
.hft-saf-app .hft-card img,
.hft-favs-app .hft-card a,
.hft-favs-app .hft-card img{ -webkit-user-drag:none; }
/* ---- Body ---- */
.hft-saf-app .hft-card-body{
	display:flex; flex-direction:column; gap:9px; padding:13px 15px 16px; flex:1;
}
.hft-saf-app .hft-card-title{
	font:700 16.5px/1.28 "Source Serif 4",Georgia,serif; color:#1B437D;
	text-decoration:none; text-underline-offset:2px;
	text-decoration-color:#1B437D;
}
/* Hover: turn brand pink, no underline. */
.hft-saf-app .hft-card-title:hover,
.hft-saf-app .hft-card-title:focus{ color:#D6337B; -webkit-text-fill-color:#D6337B; text-decoration:none; }
.hft-saf-app .hft-card-desc{
	margin:0; font:400 13.5px/1.5 "Nunito Sans",system-ui,sans-serif; color:#5A6B7D;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* ---- Clickable taxonomy chips ---- */
.hft-saf-app .hft-card-tax{ display:flex; flex-wrap:wrap; gap:6px; }
/* Brand-kit tri-color facet chips: each facet owns a hue, hover = its saturated
   version. Subject=Blue, Grade=Pink, Skill/Topic=Gold. Navy text at rest. */
.hft-saf-app .hft-card-chip{
	font:600 12px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-navy);
	background:#E6EFF7; padding:5px 11px; border-radius:999px;
	text-decoration:none; transition:background .12s ease, color .12s ease;
}
.hft-saf-app .hft-card-chip:hover{ background:#0758A1; color:#fff; }
.hft-saf-app .hft-card-chip.hft-chip-grade{ background:#FBE8F1; }
.hft-saf-app .hft-card-chip.hft-chip-grade:hover{ background:#D6337B; color:#fff; }
.hft-saf-app .hft-card-chip.hft-chip-skill{ background:#FDF3D9; }
.hft-saf-app .hft-card-chip.hft-chip-skill:hover{ background:#FBB915; color:var(--hft-navy); }
/* ---- Action button ---- */
.hft-saf-app .hft-card-actions{ margin-top:auto; padding-top:2px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Brand v2.2: card price is ALWAYS near-black #231F20 (FREE or paid). */
.hft-saf-app .hft-card-price,
.hft-saf-app .hft-card-price .woocommerce-Price-amount,
.hft-saf-app .hft-card-price .amount,
.hft-saf-app .hft-card-price ins{
	font-weight:800; color:#231F20; -webkit-text-fill-color:#231F20;
}
.hft-saf-app .hft-card-price{ font:800 16px/1 "Nunito Sans",system-ui,sans-serif; }
.hft-saf-app .hft-card-price del{ color:var(--hft-taupe); font-weight:600; margin-right:5px; -webkit-text-fill-color:var(--hft-taupe); }
.hft-saf-app .hft-card-price ins{ text-decoration:none; }
.hft-saf-app .hft-card-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	font:800 13.5px/1 "Nunito Sans",system-ui,sans-serif; color:#fff;
	background:var(--hft-rose); border:0; border-radius:999px; padding:11px 14px; min-height:44px;
	text-decoration:none; cursor:pointer;
	transition:background .14s ease, box-shadow .14s ease, transform .14s ease;
}
/* Lock text white on all states — hover only darkens the background, never the text */
.hft-saf-app .hft-card-btn,
.hft-saf-app .hft-card-btn:link,
.hft-saf-app .hft-card-btn:visited,
.hft-saf-app .hft-card-btn:hover,
.hft-saf-app .hft-card-btn:focus,
.hft-saf-app .hft-card-btn:active{ color:#fff !important; }
.hft-saf-app .hft-card-btn:hover{ background:var(--hft-rose-hover); box-shadow:0 6px 16px rgba(214,51,123,.34); }
.hft-saf-app .hft-card-btn:active{ transform:translateY(1px); }
.hft-saf-app .hft-card-btn.added::after{ content:""; }  /* keep Woo "added" state clean */
.hft-saf-app .hft-card-btn-ico{ flex:none; }

/* ============ GRID VIEW — exactly 4 per row ============ */
.hft-saf-app .hft-cards.hft-view-grid{
	display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.hft-saf-app .hft-cards.hft-view-grid .hft-card{ flex-direction:column; }
.hft-saf-app .hft-cards.hft-view-grid .hft-card-title{
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	/* Phase 1 (v0.6.71): reserve a constant 2-line height so the grade pill,
	   title and download button line up across every card in the grid and the
	   CTA never shifts whether a title is 1 line or 2. */
	min-height:2.56em;
}
.hft-saf-app .hft-cards.hft-view-grid .hft-card-desc,
.hft-saf-app .hft-cards.hft-view-grid .hft-card-tax{ display:none; }   /* grid hides desc + chips */
.hft-saf-app .hft-cards.hft-view-grid .hft-card-btn{ width:100%; }
/* v0.3.93 — Grid: show the top format BAR; hide the old below-image pill. */
.hft-saf-app .hft-cards.hft-view-grid .hft-card-fmtbar{ display:flex; }
.hft-saf-app .hft-cards.hft-view-grid .hft-card-body > .hft-card-format{ display:none; }

/* ============ LIST VIEW ============ */
/* v0.6.27 — List view mirrors the GRID card in a horizontal layout:
   colored format band across the top (format label + white heart), image on the
   left, body (grade eyebrow, title, description, chips) + price/button on the
   right. The .hft-card-rail supplies price+button only; its duplicate format pill
   and heart are hidden because the band owns them. Mobile (<768px) is unchanged —
   it collapses both views to a single-column grid-style card. */
.hft-saf-app .hft-cards.hft-view-list{ display:flex; flex-direction:column; gap:16px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card{
	display:grid; align-items:start;
	grid-template-columns:auto minmax(0,1fr) auto;
	grid-template-areas:"band band band" "img body buy";
	column-gap:8px;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-fmtbar{ grid-area:band; display:flex; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-imgwrap{
	grid-area:img; width:340px; min-width:340px; aspect-ratio:1/1;
	align-self:start; margin:20px 24px 20px 20px; border-radius:12px;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-img{ object-fit:contain; object-position:center; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-body{ grid-area:body; align-self:start; padding:20px 16px 16px 0; gap:10px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-title{ font-size:22px; padding-right:0; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-desc{ -webkit-line-clamp:3; font-size:16px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-body > .hft-card-format.hft-eyebrow-on{ font-size:13px; margin-bottom:7px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-tax{ gap:8px; margin-top:2px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-chip{ font-size:13.5px; padding:6px 13px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-actions{ display:none; }
/* ---- Whole-card click target (TPT-style) — both List & Grid views ----
   The title link is stretched to cover the entire card, so clicking anywhere
   on the card opens the single resource page. The format pill is left under the
   overlay so it routes there too. Category chips + Add-to-Cart/Download buttons
   are raised above the overlay so they keep their own clicks.
   (Grid hides chips, so only the button needs raising there.) */
.hft-saf-app .hft-card-title::after{
	content:""; position:absolute; inset:0; z-index:1;
}
.hft-saf-app .hft-card-format{ z-index:0; }   /* pill -> resource page */
.hft-saf-app .hft-card-chip,
.hft-saf-app .hft-card-btn{
	position:relative; z-index:3;   /* excluded: keep their own clicks */
}

/* ============ Pagination ============ */
.hft-saf-app .hft-saf-pager{
	display:flex; justify-content:center; align-items:center; gap:6px;
	flex-wrap:wrap; margin:30px 0 6px;
}
.hft-saf-app .hft-saf-page{
	min-width:40px; height:40px; padding:0 13px; display:inline-flex;
	align-items:center; justify-content:center; border-radius:10px;
	font:700 14px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-navy);
	background:#fff; border:1.5px solid var(--hft-sage-mist); text-decoration:none;
	cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease;
}
/* v0.6.74: pagination uses brand-kit blue (navy) instead of pink. */
.hft-saf-app a.hft-saf-page:hover{ border-color:var(--hft-navy); color:var(--hft-navy); }
.hft-saf-app .hft-saf-page.is-current{ background:var(--hft-navy); border-color:var(--hft-navy); color:#fff; cursor:default; }
.hft-saf-app .hft-saf-page.is-disabled{ opacity:.45; cursor:default; }
.hft-saf-app .hft-saf-page.is-gap{ border:0; background:transparent; min-width:auto; padding:0 4px; color:var(--hft-taupe); cursor:default; }

/* ============ Responsive ============ */
@media (max-width:1024px){ .hft-saf-app .hft-cards.hft-view-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){
	.hft-saf-app .hft-cards.hft-view-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
	.hft-saf-app .hft-cards.hft-view-list .hft-card-imgwrap{ width:150px; min-width:150px; }
	.hft-saf-app .hft-cards.hft-view-list .hft-card-title{ font-size:16px; }
}
@media (max-width:430px){
	.hft-saf-app .hft-cards.hft-view-list .hft-card-imgwrap{ width:118px; min-width:118px; }
}

/* =====================================================================
   v0.3.46 — card hover border = format color (thicker) + spacing + sort hover
   ===================================================================== */
/* (1) List/Grid card hover: border matches the format id color.
   NOTE: border WIDTH stays constant (no 1.5->2.5 growth) — growing it reflowed the
   card's inner text. The "thicker" look is now an inset ring (see v0.3.49 block). */
.hft-saf-app .hft-card:hover{
	border-color:var(--fmt,var(--hft-sage)) !important;
}
/* (2) More breathing room above the title at the top + below the pagination */
.hft-saf-app:not(.hft-saf-sw){ padding-top:28px; }
.hft-saf-app .hft-saf-pager{ margin-bottom:36px; }
/* v0.6.5 — when a result set fits on ONE page the pager isn't rendered, so the
   last card row used to butt right up against the footer. Give the card grid the
   same bottom breathing room the pager provides, but ONLY when it's the last thing
   in the results section (i.e. no pager follows it). */
.hft-saf-app .hft-saf-results .hft-cards:last-child{ margin-bottom:36px; }
/* v0.4.5 #6: the site-wide footer filters modal wrapper holds only fixed-position
   children (drawer + overlay), so it must take zero layout space on every page. */
.hft-saf-sw{ padding:0 !important; margin:0 !important; }
/* (3) Sort by: hover background = white (was soft gray) */
.hft-saf-app .hft-saf-sortwrap:hover,
.hft-saf-app .hft-saf-sort-toggle:hover{ background:#fff !important; }

/* =====================================================================
   v0.3.49 — List-view right rail (format pill + price + Add-to-Cart/Download),
   roomier description, and a hover that does NOT reflow card internals.
   GRID view is untouched: the rail is hidden and the body-actions row is used.
   Shared DOM (CSS-only view toggle): each card carries BOTH a body-actions block
   (grid) and a .hft-card-rail (list); CSS shows exactly one per view.
   ===================================================================== */
/* Rail is List-only */
.hft-saf-app .hft-card-rail{ display:none; }
/* v0.6.27 — the rail now supplies ONLY the price + action button, as a bottom row
   in the right-hand column (band owns the format label + heart). */
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail{
	grid-area:buy; display:flex; flex-direction:column; align-items:flex-end;
	justify-content:flex-end; align-self:end; gap:12px; width:auto; min-width:0; flex:none; margin:0;
	padding:16px 24px 20px 8px; border:0;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-body > .hft-card-format{ display:none; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail > .hft-card-format{ display:none; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail .hft-fav{ display:none !important; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail .hft-card-buy{
	margin:0; width:auto; display:flex; flex-direction:column; align-items:flex-end;
	justify-content:flex-end; gap:12px; text-align:right;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail .hft-card-price{ text-align:left; margin:0; }
/* FREE price — near-black #231F20 (same as paid price) */
.hft-saf-app .hft-card-price--free{ color:#231F20; -webkit-text-fill-color:#231F20; }
/* Hover = lift shadow only; the full-perimeter colored border is the constant-width
   border above (color set by the v0.3.46 rule). No inset ring (it clipped at the image). */
.hft-saf-app .hft-card:hover{
	box-shadow:0 12px 28px rgba(31,42,68,.13);
}
@media (max-width:760px){
	.hft-saf-app .hft-cards.hft-view-list .hft-card-rail{
		flex:0 0 132px; width:132px; min-width:132px; padding:12px 12px 13px;
	}
}

/* =====================================================================
   v0.3.54 — results header: keep Sort + List/Grid anchored top-RIGHT.
   A long combo title (deep filter selection) used to wrap the controls
   onto a new line and left-align them. Now the title wraps WITHIN its
   own column and the controls stay pinned to the right.
   ===================================================================== */
.hft-saf-app .hft-results-controls{ margin-left:auto; }   /* right-align even if it wraps */
@media (min-width:768px){
	.hft-saf-app .hft-results-headrow{ flex-wrap:nowrap; align-items:flex-start; }
	.hft-saf-app .hft-results-meta{ flex:1 1 auto; min-width:0; }   /* title wraps here, doesn't push controls */
	.hft-saf-app .hft-results-controls{ flex:0 0 auto; }
}

/* =====================================================================
   v0.3.55 — filter pill: a long selected VALUE must never clip the × clear
   or the ▾ caret. Only the value truncates (ellipsis); the trailing icons
   are fixed-size and always shown.
   ===================================================================== */
.hft-saf-app .hft-facets-row .hft-facet-label{ flex:0 0 auto; }          /* short label stays put */
.hft-saf-app .hft-facets-row .hft-facet-group.has-active .hft-facet-value{
	flex:1 1 auto; min-width:0;                                          /* this is the ONLY thing that shrinks */
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hft-saf-app .hft-facets-row .hft-facet-group.has-active .hft-facet-clear{ flex:0 0 auto; }   /* × always visible */
.hft-saf-app .hft-facets-row .hft-facet-title::after{ flex:0 0 auto; }   /* caret always visible */

/* ===== v0.3.57 — filter breadcrumb above the results title ===== */
.hft-saf-app .hft-breadcrumb{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	margin:0 0 8px; font:600 14px/1.3 "Nunito Sans",system-ui,sans-serif;
}
.hft-saf-app .hft-breadcrumb .hft-crumb{ color:var(--hft-sage); text-decoration:none; }
.hft-saf-app .hft-breadcrumb .hft-crumb:hover{ color:var(--hft-rose); text-decoration:underline; }
.hft-saf-app .hft-breadcrumb .hft-crumb-current{ color:var(--hft-taupe); font-weight:700; }
.hft-saf-app .hft-breadcrumb .hft-crumb-sep{ color:#C9CFD6; }

/* =====================================================================
   v0.3.66 — Mobile layout overhaul
   - Hide the facet pill row; "All filters" moves into the results-controls
     row (right of Sort by), replacing the List/Grid toggle.
   - Results are always a single column of grid-style cards.
   - Header hamburger opens the All-filters drawer (wired in JS).
   - Search bar lifts to the top of the screen while typing (live dropdown).
   ===================================================================== */
/* The in-controls "All filters" button is mobile-only — hidden on desktop. */
.hft-saf-app .hft-results-controls .hft-all-filters-btn{ display:none; }

@media (max-width:767px){
	/* (5) Remove the whole filter pill row — pills AND its All-filters button.
	   The drawer markup lives outside .hft-filter-bar, so it still works. */
	.hft-saf-app .hft-filter-bar{ display:none !important; }

	/* (3/5) Controls row: Sort by on the left, All filters on the right
	   (where the List/Grid toggle used to be). */
	.hft-saf-app .hft-saf-viewtoggle{ display:none !important; }
	.hft-saf-app .hft-results-controls .hft-all-filters-btn{
		display:inline-flex; order:99; margin-left:auto;
		width:auto !important; flex:0 0 auto;   /* compact pill, not the full-width bar variant */
	}
	.hft-saf-app .hft-results-controls .hft-saf-sort{ flex:0 0 auto; }
	.hft-saf-app .hft-results-headrow{ flex-wrap:wrap; align-items:flex-start; gap:10px 12px; }
	.hft-saf-app .hft-results-meta{ flex:1 1 100%; }                 /* row 1: title + count */
	.hft-saf-app .hft-results-controls{
		flex:1 1 100%; width:100%; margin-left:0;
		display:flex; align-items:center; justify-content:space-between; gap:10px;
	}

	/* (2/6) Single-column, grid-style cards regardless of the stored view. */
	.hft-saf-app .hft-cards.hft-view-grid,
	.hft-saf-app .hft-cards.hft-view-list{
		display:grid !important; grid-template-columns:1fr !important; gap:14px;
	}
	.hft-saf-app .hft-cards .hft-card{ flex-direction:column !important; }
	.hft-saf-app .hft-cards .hft-card-imgwrap{
		width:100% !important; min-width:0 !important; aspect-ratio:8.5/11; align-self:auto;
	}
	.hft-saf-app .hft-cards .hft-card-rail{ display:none !important; }            /* list rail off */
	.hft-saf-app .hft-cards .hft-card-desc,
	.hft-saf-app .hft-cards .hft-card-tax{ display:none !important; }             /* grid-style: hide desc + chips */
	.hft-saf-app .hft-cards .hft-card-body{ padding:13px 15px 16px !important; gap:9px; }
	/* v0.3.93 — mobile (both views collapse to single-column grid-style): show the
	   top format BAR, hide the old below-image pill. */
	.hft-saf-app .hft-cards .hft-card-fmtbar{ display:flex !important; }
	.hft-saf-app .hft-cards .hft-card-body > .hft-card-format{ display:none !important; }
	.hft-saf-app .hft-cards .hft-card-actions{ display:flex !important; margin-top:auto; }
	.hft-saf-app .hft-cards .hft-card-btn{ width:100%; }
	.hft-saf-app .hft-cards .hft-card-title{ padding-right:0 !important; font-size:16px; }

	/* (4) Search bar focus on mobile.
	   We no longer reposition the bar. Previously it was pinned with
	   `position:fixed` on :focus-within (in-page) / .hft-bar-lifted (header),
	   which caused (a) a double-tap because the input reflowed at the moment of
	   focus, and (b) a jump to the top of the PAGE because `fixed` resolves
	   against a transformed ancestor. The bar now stays in normal flow and JS
	   simply scrolls it to the top of the viewport on focus (see hft-saf.js).
	   We only cap the live-results dropdown so it fits the screen. */
	.hft-saf-app .hft-saf-search .hft-saf-suggest,
	.hft-saf-bar .hft-saf-search .hft-saf-suggest{
		max-height:calc(100vh - 96px);
	}
}

/* =====================================================================
   v0.3.75 — My Favorites (heart)
   - Card heart + format pill share one row: heart LEFT, pill RIGHT.
     Grid uses the body row; List uses the rail row (same visual rule).
   - Heart is brand rose, outline by default and solid when favorited.
   - Heart must clear the whole-card title overlay (z-index:3) to stay
     clickable. Styles are global (not scoped to .hft-saf-app) so the
     single-product heart and the My Account tab also pick them up.
   ===================================================================== */
.hft-card-pillrow{
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	width:100%;
}
/* Keep the pill in normal flow inside the row (beats the list-view absolute rule). */
.hft-saf-app .hft-card-pillrow .hft-card-format{ position:static; align-self:center; margin:0; }

/* Heart button — HARD RESET so the theme's global <button> styling (rose pill
   background, border, 30px radius, big padding) can never turn it into a blob.
   It must be a bare, transparent heart icon. */
button.hft-fav, a.hft-fav, .hft-fav{
	-webkit-appearance:none !important; appearance:none !important;
	background:none !important; background-color:transparent !important;
	background-image:none !important; border:0 !important; outline:0;
	border-radius:0 !important; box-shadow:none !important; text-shadow:none !important;
	margin:0 !important; padding:1px !important;
	width:auto !important; min-width:0 !important; max-width:none !important;
	height:auto !important; min-height:0 !important; line-height:0 !important;
	cursor:pointer; display:inline-flex; align-items:center;
	position:relative; z-index:3; color:#D6337B !important;
	-webkit-tap-highlight-color:transparent !important; /* no gray box flash on click/tap */
	-webkit-touch-callout:none;
}
button.hft-fav:hover, button.hft-fav:focus, button.hft-fav:active,
a.hft-fav:hover, a.hft-fav:focus, a.hft-fav:active{
	background:none !important; background-color:transparent !important;
	box-shadow:none !important; border:0 !important; transform:none;
}
.hft-fav:focus-visible{ outline:2px solid #D6337B; outline-offset:2px; }
.hft-fav .hft-fav-ico{ display:block; width:24px; height:24px; overflow:visible; }
.hft-fav .hft-fav-ico path{
	fill:none; stroke:#D6337B; stroke-width:1.7;
	transition:fill .15s ease, stroke .15s ease, transform .15s ease;
}
.hft-fav:hover .hft-fav-ico path{ stroke:#B62A67; }   /* outline only — no fill box */
.hft-fav.is-fav .hft-fav-ico path{ fill:#D6337B; stroke:#D6337B; }
.hft-fav.is-fav:hover .hft-fav-ico path{ fill:#B62A67; stroke:#B62A67; }
/* No press-shrink on the icon — on a held/hard trackpad press it lingered and
   read as the heart "dropping"/glitching. The click burst is the only feedback. */
.hft-fav:active .hft-fav-ico{ transform:none; }

/* Favorite confirmation is now the unified .hft-toast (see hft-saf.js). */

/* Single product page: heart + label sit on their OWN ROW, BELOW the quantity +
   Add to Cart / Download control. The label reads "Add to My Favorites" and
   cross-fades to "Saved" once the resource is hearted (state from .is-fav,
   applied client-side by paint()). */
.hft-fav-single.hft-fav-single--below{
	display:flex !important; align-items:center; gap:10px; margin:14px 0 2px;
}
button.hft-fav--single{
	padding:0 !important; margin:0 !important; width:auto !important;
	display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.hft-fav--single .hft-fav-ico{ width:28px; height:28px; }
/* Cross-fading label to the right of the heart. "Saved" is stacked on top of
   "Add to My Favorites" (absolute) so the swap fades in place with no reflow. */
.hft-fav-single--below .hft-fav-label{
	position:relative; display:inline-block; line-height:1.2; cursor:pointer;
	-webkit-user-select:none; user-select:none;
	font:700 16px/1.2 "Nunito Sans",system-ui,sans-serif;
}
.hft-fav-single--below .hft-fav-label-add,
.hft-fav-single--below .hft-fav-label-saved{ transition:opacity .35s ease; }
.hft-fav-single--below .hft-fav-label-add{ color:#1B437D; opacity:1; }
.hft-fav-single--below .hft-fav-label-saved{
	position:absolute; left:0; top:0; white-space:nowrap; color:#D6337B; opacity:0;
}
.hft-fav--single.is-fav ~ .hft-fav-label .hft-fav-label-add{ opacity:0; }
.hft-fav--single.is-fav ~ .hft-fav-label .hft-fav-label-saved{ opacity:1; }

/* Single product BUY layout (quantity + Add to Cart — guests / non-members).
   Two fixes, scoped to this layout only so the member "Download" view is untouched:
   1) Left-justify the quantity box. Elementor renders the add-to-cart form as
      display:flex;gap:12px, and WooCommerce's clearfix `form.cart::before` (a
      space) becomes a phantom flex item that eats the first 12px gap, indenting
      the qty box. Neutralizing the pseudo-elements drops the indent (the real
      qty↔button 12px gap is unaffected).
   2) Tighten the (too-large) space between the price and the quantity row. */
.elementor-widget-woocommerce-product-add-to-cart form.cart::before,
.elementor-widget-woocommerce-product-add-to-cart form.cart::after{ content:none !important; }
.elementor-widget-woocommerce-product-add-to-cart.e-add-to-cart--show-quantity-yes{ margin-top:-14px; }

/* My Account > My Favorites tab */
.hft-favs-title{ margin:0 0 14px; font:800 22px/1.2 "Nunito Sans",system-ui,sans-serif; color:#1B437D; }
.hft-favs-empty{ color:#5A6B7D; font:400 15px/1.5 "Nunito Sans",system-ui,sans-serif; }
.hft-favs-empty a{ color:#D6337B; font-weight:700; }
.hft-favs-app{ padding-top:4px !important; }
/* v0.4.7 #4: SAF card titles in BLACK across the WHOLE My Account page — the
   Favorites tab AND the Dashboard "New resources" slider (both render .hft-saf-app
   cards). The My Account page styles content links via
   `body.woocommerce-account .woocommerce-MyAccount-content a` using BOTH color AND
   -webkit-text-fill-color (!important), so the override must out-specify it
   (`body.woocommerce-account .hft-saf-app .hft-card-title` = 0,3,1) and set
   -webkit-text-fill-color too. Scoped to the account page, so /resources/ stays navy. */
body.woocommerce-account .hft-saf-app .hft-card-title,
body.woocommerce-account .hft-saf-app .hft-card-title:hover,
body.woocommerce-account .hft-saf-app .hft-card-title:focus{
	color:#000 !important; -webkit-text-fill-color:#000 !important; text-decoration-color:#000 !important;
}
/* Account tab grid: 3-up reads better in the narrower account column. */
/* Match the filter grid card SIZE (~270px) exactly. The account content column is
   narrower than the resources page, and the filter grid's column count is keyed to
   the VIEWPORT (not the container), so reusing repeat(4,1fr) would shrink these
   cards. auto-fill + a fixed min keeps each card the same size as the filter grid
   and just wraps to fewer columns in the narrower column. */
.hft-favs-app .hft-cards.hft-view-grid{
	grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)) !important;
	gap:20px !important;
}

/* v0.4.5 #3: "Clear all favorites" button — brand ghost pill that fills rose on
   hover. Hardened with !important + -webkit-text-fill-color so the theme's global
   <button> styling can't turn it into a blob (a recurring issue on this site). */
.hft-favs-toolbar{ display:flex; justify-content:flex-start; margin:2px 0 18px; }
.hft-favs .hft-favs-clear-all{
	display:inline-flex !important; align-items:center !important; justify-content:center !important;
	gap:7px !important; box-sizing:border-box !important;
	font-family:"Nunito Sans",system-ui,sans-serif !important;
	font-size:14px !important; font-weight:700 !important; line-height:1 !important;
	letter-spacing:normal !important; text-transform:none !important; text-indent:0 !important;
	white-space:nowrap !important;
	color:#D6337B !important; -webkit-text-fill-color:#D6337B !important;
	background:#fff !important; background-image:none !important;
	border:1.5px solid #D6337B !important; border-radius:999px !important;
	box-shadow:none !important; padding:10px 20px !important; min-height:0 !important;
	height:auto !important; width:auto !important; cursor:pointer !important;
	text-decoration:none !important; -webkit-appearance:none !important; appearance:none !important;
	transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease !important;
}
.hft-favs .hft-favs-clear-all:hover,
.hft-favs .hft-favs-clear-all:focus-visible{
	background:#D6337B !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
	border-color:#D6337B !important; box-shadow:0 4px 12px rgba(214,51,123,.25) !important;
}
.hft-favs .hft-favs-clear-all:active{ background:#B62A67 !important; border-color:#B62A67 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hft-favs .hft-favs-clear-all::before,
.hft-favs .hft-favs-clear-all::after{ content:none !important; display:none !important; }
.hft-favs .hft-favs-clear-all.is-busy{ opacity:.6 !important; pointer-events:none !important; }

/* My Account nav: heart icon for the new tab, matching the sibling mask icons */
.woocommerce-MyAccount-navigation-link--my-favorites a::before{
	content:""; display:block; width:18px; height:18px; background-color:#0758A1;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.7l-1.3-1.2C5.9 15.2 2.7 12.3 2.7 8.7 2.7 5.8 5 3.6 7.8 3.6c1.6 0 3.1.7 4.2 2 1.1-1.3 2.6-2 4.2-2 2.8 0 5.1 2.2 5.1 5.1 0 3.6-3.2 6.5-8 10.8L12 20.7z'/%3E%3C/svg%3E") no-repeat 50% 50%;
	        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.7l-1.3-1.2C5.9 15.2 2.7 12.3 2.7 8.7 2.7 5.8 5 3.6 7.8 3.6c1.6 0 3.1.7 4.2 2 1.1-1.3 2.6-2 4.2-2 2.8 0 5.1 2.2 5.1 5.1 0 3.6-3.2 6.5-8 10.8L12 20.7z'/%3E%3C/svg%3E") no-repeat 50% 50%;
	-webkit-mask-size:contain; mask-size:contain;
}

/* =====================================================================
   v0.3.78 — bulletproof card action button.
   The non-member Add-to-Cart button carries WooCommerce classes
   (.add_to_cart_button .ajax_add_to_cart) and the My-Account Download sits in
   WooCommerce account markup, so the theme's button styling was overriding
   ours (blank/oversized bars for non-admin visitors). Lock every visual
   property with !important and kill any theme pseudo-element icon/label.
   ===================================================================== */
.hft-saf-app .hft-card .hft-card-btn,
.hft-favs-app .hft-card .hft-card-btn,
.woocommerce-MyAccount-content .hft-card .hft-card-btn{
	display:inline-flex !important; align-items:center !important; justify-content:center !important;
	gap:7px !important; box-sizing:border-box !important;
	font-family:"Nunito Sans",system-ui,sans-serif !important;
	font-size:13.5px !important; font-weight:800 !important; line-height:1 !important;
	letter-spacing:normal !important; text-transform:none !important; text-indent:0 !important;
	white-space:nowrap !important; vertical-align:middle !important;
	color:#fff !important; background:#D6337B !important; background-image:none !important;
	border:0 !important; border-radius:999px !important; box-shadow:none !important;
	padding:11px 14px !important; min-height:44px !important; height:auto !important;
	width:auto !important; max-width:100% !important; text-decoration:none !important;
}
.hft-saf-app .hft-card .hft-card-btn:hover,
.hft-favs-app .hft-card .hft-card-btn:hover,
.woocommerce-MyAccount-content .hft-card .hft-card-btn:hover{
	background:#B62A67 !important; color:#fff !important;
}
/* Button stretches to fill the row; the heart sits to its right (see btnrow). */
.hft-saf-app .hft-cards.hft-view-grid .hft-card-btnrow,
.hft-favs-app .hft-cards .hft-card-btnrow{ width:100%; }
.hft-saf-app .hft-card-btnrow .hft-card-btn{ flex:1 1 auto !important; width:auto !important; }
.hft-card .hft-card-btn .hft-card-btn-ico{ width:16px !important; height:16px !important; flex:none !important; }
/* Strip any theme/Woo ::before/::after (cart glyph, "View cart", checkmarks) */
.hft-card .hft-card-btn::before,
.hft-card .hft-card-btn::after{ content:none !important; display:none !important; }

/* =====================================================================
   v0.3.86 — heart moved to the RIGHT of the action button (list + grid),
   matched to the button's height. Bare icon (no box), vertically centered.
   ===================================================================== */
.hft-saf-app .hft-card-btnrow{ display:flex; align-items:stretch; gap:8px; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail .hft-card-btnrow{ width:auto; margin:0 0 0 auto; }
.hft-saf-app .hft-card-btnrow .hft-fav{
	flex:0 0 auto !important; align-self:stretch !important;
	width:40px !important; min-width:40px !important; height:auto !important;
	margin:0 !important; padding:0 !important;
	background:none !important; border:0 !important; box-shadow:none !important;
	display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* Heart icon as tall as the button to its left (button ≈ 38px). */
.hft-saf-app .hft-card-btnrow .hft-fav{ padding:0 !important; }
.hft-saf-app .hft-card-btnrow .hft-fav .hft-fav-ico{ width:36px; height:36px; }
/* The list rail's old "center the lone button" rule shouldn't shrink the row. */
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail .hft-card-btnrow .hft-card-btn{ align-self:auto; }

/* =====================================================================
   v0.4.0 — Header search bar (.hft-saf-bar) parity.
   The menu/header instance lives outside .hft-saf-app, so the theme's
   global rules leak in. Two concrete leaks fixed here:
   1) the theme renders <strong> as display:block, which split the bold
      prefix onto its own line and looked like "Abb reviations".
   2) stray bold spacing/letter-spacing inside the suggestion text.
   Scoped to the suggestion term <strong> so it's safe everywhere. */
.hft-saf-suggest .hft-suggest-term strong,
.hft-saf-suggest .hft-suggest-title strong,
.hft-saf-suggest .hft-suggest-all strong{
	display:inline !important;
	margin:0 !important;
	padding:0 !important;
	letter-spacing:normal !important;
	word-spacing:normal !important;
	background:none !important;
}
/* Header bar host shouldn't add box/flow of its own; the form keeps its width. */
.hft-saf-bar{ display:block; width:100%; }

/* ============================================================
   v0.4.8 #3 — Download confirmation toast (replaces somdn's gear spinner)
   somdn adds a `loading` class to the Download button on submit; the theme/
   WooCommerce renders a spinning "gear" via that class's pseudo-elements.
   Suppress it everywhere our download buttons live and show a clean toast
   ("Resource downloaded!") via hft-saf.js instead. The real file download is
   unaffected (somdn still submits the form).
   ============================================================ */
.somdn-download-button.loading::before,  .somdn-download-button.loading::after,
.somdn-download-form button.loading::before, .somdn-download-form button.loading::after,
.hft-card-btn.is-download.loading::before,   .hft-card-btn.is-download.loading::after {
	display: none !important; content: none !important; animation: none !important;
	background: none !important;
}
.somdn-download-button.loading,
.somdn-download-form button.loading,
.hft-card-btn.is-download.loading { opacity: 1 !important; color: inherit !important; }

/* --- Unified brand-kit confirmation toast (.hft-toast) ------------------
   ONE shared toast for download, add-to-cart and favorites (hft-saf.js).
   Navy 16px SURFACE (not a pill), white .ic circle with a pink icon, .msg,
   and an optional .undo pill. Matches the /brand-kit/ component; retires
   Code Snippets 192 (cart) + 196 (favorites) so there is one source. */
.hft-toast {
	position: fixed; left: 50%; bottom: 26px;
	transform: translateX(-50%) translateY(14px);
	display: flex; align-items: center; gap: 12px;
	background: var(--hft-navy, #1B437D); color: #fff;
	font-family: var(--font-body, "Nunito Sans", system-ui, sans-serif);
	font-weight: 800; font-size: 14.5px;
	padding: 12px 14px 12px 18px;
	border-radius: 16px;
	box-shadow: 0 18px 40px -16px rgba(18,48,90,.6);
	opacity: 0; pointer-events: none;
	transition: opacity .18s ease, transform .22s cubic-bezier(.3,1.4,.5,1);
	z-index: 2147483647; max-width: calc(100vw - 32px);
}
.hft-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.hft-toast .ic {
	flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center;
}
.hft-toast .ic svg { width: 13px; height: 13px; display: block; color: var(--cta, #D6337B); }
.hft-toast .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hft-toast .undo {
	flex: none; background: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer;
	font-family: var(--font-body, "Nunito Sans", system-ui, sans-serif); font-weight: 800; font-size: 13px;
	padding: 8px 16px; min-height: 36px; border-radius: 999px; /* true pill, not a 30px rounded rectangle */
	transition: background .15s;
}
.hft-toast .undo:hover { background: rgba(255,255,255,.26); }
.hft-toast .undo:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hft-navy,#1B437D), 0 0 0 4px #fff; }
@media (max-width:520px) {
	.hft-toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(14px); max-width: none; }
	.hft-toast.show { transform: translateY(0); }
}
@media (prefers-reduced-motion:reduce) { .hft-toast { transition: opacity .12s; } }

/* ============================================================
   v0.4.8 #4 — Single-product taxonomy chips
   Mirrors the List-view Grade / Subject / Skill chips onto the product page,
   injected by hft-saf.js just below the "Instant download" line. The product
   template has no .hft-saf-app wrapper, so the card-chip look is re-scoped to
   .hft-pdp-chips here (same colors, hover, and cumulative filter URLs).
   ============================================================ */
.hft-pdp-chips {
	/* The brand CSS vars live on .hft-saf-app / .hft-saf-bar; these chips are
	   injected into the product template OUTSIDE those scopes, so redeclare the
	   handful we need here (same values) or the pills render colorless. */
	--hft-navy: #1B437D; --hft-rose: #D6337B; --hft-rose-petal: #FBE8F1;
	--hft-cream: #FBF5EC; --hft-sage: #0758A1; --hft-sage-mist: #EEE6DA;
	display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px;
}
.hft-pdp-chips .hft-card-chip {
	font: 600 12.5px/1 "Nunito Sans", system-ui, sans-serif; color: var(--hft-navy);
	background: #E6EFF7; padding: 6px 13px; border-radius: 999px;
	text-decoration: none; transition: background .12s ease, color .12s ease;
}
.hft-pdp-chips .hft-card-chip:hover { background: #0758A1; color: #fff; }
.hft-pdp-chips .hft-card-chip.hft-chip-grade { background: #FBE8F1; }
.hft-pdp-chips .hft-card-chip.hft-chip-grade:hover { background: #D6337B; color: #fff; }
.hft-pdp-chips .hft-card-chip.hft-chip-skill { background: #FDF3D9; }
.hft-pdp-chips .hft-card-chip.hft-chip-skill:hover { background: #FBB915; color: var(--hft-navy); }

/* =====================================================================
   v0.6.5 — Homepage resource carousels ("New resources this week",
   "Most popular"). The wrapper carries .hft-saf-app so the cards inherit
   the exact /resources/ grid-card styling; .hft-rslider only changes the
   container into a horizontal, snap-scrolling track + adds nav arrows.
   ===================================================================== */
.hft-saf-app.hft-rslider{
	--rs-per:4; --rs-gap:20px;
	max-width:1240px; margin:0 auto; padding:8px 0 18px; background:transparent;
}
.hft-rslider-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:16px; margin:0 0 16px;
}
.hft-rslider-title{
	margin:0; font-family:"Fredoka","Nunito Sans",sans-serif; font-weight:800;
	font-size:27px; line-height:1.15; color:var(--hft-navy);
}
.hft-rslider-nav{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

/* Circle arrow buttons — locked to a perfect circle in EVERY state so the
   theme/hover/focus can never square them off (see hft-slider-arrow-shape). */
.hft-rslider-arrow{
	appearance:none !important; -webkit-appearance:none !important;
	flex:0 0 auto !important; box-sizing:border-box !important;
	width:44px !important; height:44px !important; min-width:44px !important;
	aspect-ratio:1/1 !important; padding:0 !important; margin:0 !important;
	display:inline-flex !important; align-items:center !important; justify-content:center !important;
	border:0 !important; border-radius:50% !important;
	background:var(--hft-rose) !important; color:#fff !important;
	box-shadow:none !important; cursor:pointer;
	transition:background .15s ease, transform .12s ease;
}
.hft-rslider-arrow:hover{ background:var(--hft-rose-hover) !important; transform:translateY(-1px); }
.hft-rslider-arrow:focus,
.hft-rslider-arrow:focus-visible,
.hft-rslider-arrow:active{
	width:44px !important; height:44px !important; aspect-ratio:1/1 !important;
	border-radius:50% !important; outline:none !important; background:var(--hft-rose) !important;
}
.hft-rslider-arrow:hover:focus,
.hft-rslider-arrow:hover:focus-visible{ background:var(--hft-rose-hover) !important; }
.hft-rslider-arrow:focus-visible{ box-shadow:0 0 0 3px rgba(214,51,123,.30) !important; }
.hft-rslider-arrow svg{ width:20px; height:20px; display:block; pointer-events:none; }
.hft-rslider-arrow[disabled]{ opacity:.34 !important; cursor:default; pointer-events:none; transform:none !important; }

/* "See all" pill that replaces the next arrow on the final screen. */
.hft-rslider-seeall{
	display:inline-flex !important; align-items:center; gap:7px;
	height:44px; padding:0 22px; border-radius:999px;
	background:var(--hft-rose); color:#fff !important; text-decoration:none !important;
	font:800 15px/1 "Nunito Sans",system-ui,sans-serif; white-space:nowrap;
	transition:background .15s ease;
}
.hft-rslider-seeall:hover{ background:var(--hft-rose-hover); color:#fff !important; }
.hft-rslider-seeall[hidden]{ display:none !important; }
.hft-rslider-seeall-ico{ width:16px; height:16px; flex:none; }

/* Horizontal viewport — a fixed window; the flex track inside is moved with a
   CSS transform (JS-driven), which is far more robust than native overflow
   scrolling inside themed/transformed ancestors. 4px padding keeps card focus
   rings + hover shadows from being clipped. */
.hft-rslider-viewport{
	overflow:hidden;
	margin:0 -4px; padding:4px;
}

/* Turn the inherited grid into a flex track (extra .hft-rslider-track class
   out-specifies every .hft-cards.hft-view-grid rule, incl. the mobile !important
   single-column override, so the carousel stays horizontal at all widths). */
.hft-saf-app .hft-cards.hft-view-grid.hft-rslider-track{
	display:flex !important; grid-template-columns:none !important;
	flex-wrap:nowrap; gap:var(--rs-gap); margin-top:0; width:max-content;
	will-change:transform;
	/* MUST stay transition:none — ANY transition on `transform` (incl. a global
	   theme `transition:all`) triggers a quirk that reverts the value to 0 on this
	   themed element. The slide is animated in JS via a requestAnimationFrame tween
	   that writes transform:!important each frame, so no CSS transition is needed. */
	transition:none !important;
}
/* Each card is a FIXED pixel width (set by JS = (viewport - gaps)/per). A
   sensible fallback width keeps a 4-up layout before JS runs. */
.hft-saf-app .hft-cards.hft-view-grid.hft-rslider-track > .hft-card{
	flex:0 0 auto !important;
	width:var(--rs-card-w, 270px) !important;
}

@media (max-width:1024px){ .hft-saf-app.hft-rslider{ --rs-per:3; } }
@media (max-width:760px){
	.hft-saf-app.hft-rslider{ --rs-per:2; --rs-gap:14px; }
	.hft-rslider-title{ font-size:22px; }
}
@media (max-width:480px){ .hft-saf-app.hft-rslider{ --rs-per:1.15; } }


/* =====================================================================
   Brand v2.1 — grade eyebrow visibility (final word in the cascade).
   The old view rules hide `.hft-card-body > .hft-card-format` in grid/list/
   mobile (it used to be a redundant format label). The repurposed GRADE
   eyebrow (.hft-eyebrow-on) must stay visible in every view.
   ===================================================================== */
.hft-saf-app .hft-cards.hft-view-grid .hft-card-body > .hft-card-format.hft-eyebrow-on,
.hft-saf-app .hft-cards.hft-view-list .hft-card-body > .hft-card-format.hft-eyebrow-on,
.hft-saf-app .hft-cards .hft-card-body > .hft-card-format.hft-eyebrow-on{ display:block !important; }

/* =====================================================================
   Brand v2.1 — empty-focus search panel (#hftx-panel).
   Rendered by hft-saf.js inside .hft-saf-search when the input is focused
   AND empty; the type-ahead (.hft-saf-suggest) takes over once the user types.
   ===================================================================== */
#hftx-panel{ position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:1200;
  background:#FFFCF6; border:1px solid #E9E0D4; border-radius:16px; box-shadow:0 18px 50px rgba(18,48,90,.16);
  padding:14px 16px 4px; font-family:"Nunito Sans",system-ui,sans-serif; display:none; max-height:min(76vh,640px); overflow:auto; }
#hftx-panel.hftx-open{ display:block; }
.hftx-chiprow{ display:flex; gap:8px; overflow-x:auto; padding-bottom:13px; border-bottom:1px solid #EEE6DA; margin-bottom:13px; }
.hftx-chip{ flex:none; display:inline-flex; align-items:center; gap:7px; background:#FBF5EC; color:#1B437D; font-family:"Fredoka","Nunito Sans",sans-serif; font-weight:700; font-size:13.5px; padding:8px 14px; border-radius:999px; text-decoration:none; white-space:nowrap; }
.hftx-chip:hover{ background:#EEE6DA; }
.hftx-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.hftx-sec{ margin:2px 0 15px; }
.hftx-lbl{ font-family:"Fredoka","Nunito Sans",sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#93A0AD; margin:0 0 9px; display:flex; align-items:center; justify-content:space-between; }
.hftx-clear{ color:#D6337B; font-weight:700; font-size:12px; text-transform:none; letter-spacing:0; cursor:pointer; text-decoration:none; }
.hftx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hftx-schip{ display:inline-flex; align-items:center; gap:7px; background:#FBF5EC; color:#1B437D; font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:999px; text-decoration:none; }
.hftx-schip:hover{ background:#EEE6DA; }
.hftx-schip svg{ width:13px; height:13px; opacity:.5; }
.hftx-row{ display:flex; align-items:center; gap:12px; padding:8px 6px; border-radius:10px; text-decoration:none; }
.hftx-row:hover{ background:#FBF5EC; }
.hftx-thumb{ width:46px; height:46px; border-radius:8px; border:1px solid #E9E0D4; flex:none; object-fit:cover; background:#fff; }
.hftx-rowtitle{ font-family:"Source Serif 4",Georgia,serif; color:#1B437D; font-weight:700; font-size:14.5px; line-height:1.2; }
.hftx-foot{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid #EEE6DA; margin-top:4px; padding:12px 4px; position:sticky; bottom:0; background:#FFFCF6; }
.hftx-count{ font-size:12.5px; color:#93A0AD; }
.hftx-seeall{ color:#D6337B; font-weight:800; font-size:14px; text-decoration:none; }

/* =====================================================================
   v0.6.32 — Type-ahead suggest dropdown (.hft-saf-suggest) restyled to
   MATCH the empty-focus #hftx-panel. Previously the panel switched from the
   cream branded chip panel (on focus) to a plain white Suggestions/Products
   list (on type) — "reverts to old styling". These rules come LATER than the
   v2.1 block above with the same :is(...) specificity, so they win, and give
   the typed dropdown the same cream surface, Fredoka labels, cream hover and
   Source-Serif product titles as #hftx-panel.
   ===================================================================== */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest{
  background:#FFFCF6 !important;
  border:1px solid #E9E0D4 !important;
  border-radius:16px !important;
  box-shadow:0 18px 50px rgba(18,48,90,.16) !important;
  padding:8px 6px !important;
}
/* Section labels — match .hftx-lbl */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-label{
  font:700 11px/1 "Fredoka","Nunito Sans",sans-serif !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#93A0AD !important;
  padding:12px 14px 8px !important;
}
/* Text suggestion rows — match .hftx-schip-ish rows, cream hover, rounded */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term{
  display:block !important;
  position:relative;
  margin:0 6px !important;
  padding:10px 12px 10px 40px !important;
  border-radius:10px !important;
  font:600 15px/1.3 "Nunito Sans",system-ui,sans-serif !important;
  color:#1B437D !important;
}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term strong{ font-weight:800 !important; color:#1B437D !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term:hover{ background:#FBF5EC !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-term:before{ left:14px !important; top:50% !important; transform:translateY(-50%) !important; }
/* Products group */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-products{
  border-top:1px solid #EEE6DA !important;
  margin-top:6px !important;
  padding-top:6px !important;
}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-product{
  margin:0 6px !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  gap:12px !important;
}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-product:hover{ background:#FBF5EC !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-thumb{
  width:46px !important; height:46px !important; flex:0 0 46px !important;
  border-radius:8px !important; border:1px solid #E9E0D4 !important; background:#fff !important; object-fit:cover;
}
/* Product titles — SOW batch A–H item F: FULL match to the Suggestions rows
   (was Source Serif 4 / serif). Now family, weight, size, line-height and color
   all equal .hft-suggest-term above (Nunito Sans 600 15px/1.3, #1B437D). */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-title{
  font:600 15px/1.3 "Nunito Sans",system-ui,sans-serif !important;
  color:#1B437D !important;
}
/* "See all results" footer */
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all{
  text-align:left !important;
  margin:6px 6px 2px !important;
  padding:12px 14px !important;
  border-top:1px solid #EEE6DA !important;
  border-radius:10px !important;
  font:400 15px/1.3 "Nunito Sans",system-ui,sans-serif !important;
  color:#1B437D !important;
}
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all strong{ font-weight:800 !important; color:#D6337B !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-all:hover{ background:#FBF5EC !important; color:#1B437D !important; }
:is(.hft-saf-app,.hft-saf-bar) .hft-saf-suggest .hft-suggest-none{
  font:400 14px/1.4 "Nunito Sans",system-ui,sans-serif !important;
  color:#93A0AD !important; padding:14px 16px !important;
}

/* Amazon-style hover: darken the fill only, text colour stays put. The button bg +
   ink are inline CSS vars (--hft-cbtn / --hft-cbtn-ink) so these win even over the
   inline !important base. Works in every container (SAF app, favorites, My Account,
   PDP related slider). Buy (cart/download) = sail yellow -> darker gold; View = navy. */
.hft-card-btn.is-cart:hover, .hft-card-btn.is-download:hover{ --hft-cbtn:#F2AE0C !important; }
.hft-card-btn.is-view:hover{ --hft-cbtn:#12305A !important; }

/* ============================================================================
   HFT Results v3 (2026-07-22 SOW #4,#12,#16–#20) — unified pill system, five-
   across grid with grade pill, brand-kit list view, popular restyle, mobile
   fixes. Appended LAST so it wins over the per-dimension rules above.
   ============================================================================ */

/* ---- Card / product titles = Fredoka (brand-kit Elementary "school house"
        default). Resolves the Source-Serif vs Fredoka contradiction. ---- */
.hft-saf-app .hft-card-title,
.hft-saf-app .hft-cards .hft-card-title,
.hft-saf-app .hft-rslider .hft-card-title,
.hft-pdp-related .hft-card-title,
#hftx-panel .hftx-rowtitle,
#hftx-panel .hft-card-title{
	/* Match the brand kit exactly: Fredoka SemiBold 600 (the base `font:700`
	   shorthand was leaving these at 700 = too bold vs the brand-kit demo). */
	font-family:"Fredoka","Nunito Sans",system-ui,sans-serif !important;
	font-weight:600 !important;
}

/* ---- Unified pills: soft tint at rest (inline --chips), full hue on hover
        (inline --chipc), white text on hover. Skill = navy via inline vars.
        (SOW #16 / #17 — "soft color, then hard color on hover".) ---- */
.hft-saf-app .hft-card-chip,
.hft-saf-app .hft-card-chip.hft-chip-grade,
.hft-saf-app .hft-card-chip.hft-chip-subject,
.hft-saf-app .hft-card-chip.hft-chip-skill,
.hft-saf-app .hft-card-chip.hft-chip-format,
.hft-pdp-chips .hft-card-chip,
.hft-pdp-chips .hft-card-chip.hft-chip-grade,
.hft-pdp-chips .hft-card-chip.hft-chip-subject,
.hft-pdp-chips .hft-card-chip.hft-chip-skill,
.hft-pdp-chips .hft-card-chip.hft-chip-format{
	background:var(--chips,#EAF0F7) !important; color:var(--hft-navy,#1B437D) !important;
	-webkit-text-fill-color:var(--hft-navy,#1B437D) !important;
	border:0; transition:background .14s ease, color .14s ease;
}
.hft-saf-app .hft-card-chip:hover,
.hft-saf-app .hft-card-chip.hft-chip-grade:hover,
.hft-saf-app .hft-card-chip.hft-chip-subject:hover,
.hft-saf-app .hft-card-chip.hft-chip-skill:hover,
.hft-saf-app .hft-card-chip.hft-chip-format:hover,
.hft-pdp-chips .hft-card-chip:hover,
.hft-pdp-chips .hft-card-chip.hft-chip-grade:hover,
.hft-pdp-chips .hft-card-chip.hft-chip-subject:hover,
.hft-pdp-chips .hft-card-chip.hft-chip-skill:hover,
.hft-pdp-chips .hft-card-chip.hft-chip-format:hover{
	background:var(--chipc,#0758A1) !important; color:#fff !important;
	-webkit-text-fill-color:#fff !important;
}

/* ---- Grade LABEL above the title (grid card): REMOVED (Josh 2026-08-03).
   Hidden in all views; grade still shows as a clickable chip in list/PDP. ---- */
.hft-saf-app .hft-card-gradepill{ display:none !important; }

/* ---- List-view format word above the title (hidden elsewhere). ---- */
.hft-saf-app .hft-card-fmtlabel{ display:none; }

/* ============ GRID VIEW — five across (SOW #18) ============ */
.hft-saf-app .hft-cards.hft-view-grid{ grid-template-columns:repeat(5,1fr) !important; }
.hft-saf-app .hft-cards.hft-view-grid .hft-card-favtop{ display:none; }
@media (max-width:1280px){ .hft-saf-app .hft-cards.hft-view-grid{ grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width:1024px){ .hft-saf-app .hft-cards.hft-view-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:760px){  .hft-saf-app .hft-cards.hft-view-grid{ grid-template-columns:repeat(2,1fr) !important; } }
/* (≤767 mobile block above forces a single column via !important — left intact.) */

/* ============ LIST VIEW — brand-kit "Results — list view" (SOW #20) ============
   Left format-accent border, no top band, heart top-right, price + button bottom-right,
   grade shown as a chip (not the pill), format word above the title. */
.hft-saf-app .hft-cards.hft-view-list .hft-card-gradepill{ display:none; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-fmtlabel{
	display:inline-flex; align-self:flex-start;
	/* Match the brand-kit .idpill: Nunito Sans 800, not Fredoka. */
	font:800 11px/1 "Nunito Sans",system-ui,sans-serif; letter-spacing:.06em;
	text-transform:uppercase; color:var(--fmt,var(--hft-navy,#1B437D)); margin:0 0 2px;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card{
	grid-template-areas:"img body buy" !important;
	grid-template-columns:auto minmax(0,1fr) auto !important;
	border-left:5px solid var(--fmt,var(--hft-navy,#1B437D));
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-fmtbar{ display:none !important; }
.hft-saf-app .hft-cards.hft-view-list .hft-card-favtop{
	display:flex; position:absolute; top:12px; right:14px; z-index:6;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-favtop .hft-fav{
	display:flex !important; width:40px !important; height:40px !important;
	/* Center the heart icon + its click/hover circle inside the 40px button so
	   the tap effect sits ON the heart, not off to the right (SOW #2). */
	align-items:center !important; justify-content:center !important;
	padding:0 !important; border-radius:999px !important;
	-webkit-tap-highlight-color:transparent;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-favtop .hft-fav:hover,
.hft-saf-app .hft-cards.hft-view-list .hft-card-favtop .hft-fav:focus-visible{
	background:rgba(27,67,125,.10) !important;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-favtop .hft-fav .hft-fav-ico{
	width:20px; height:20px; display:block;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail{
	grid-area:buy; display:flex !important; flex-direction:column; align-items:flex-end;
	justify-content:flex-end; align-self:stretch; gap:12px; width:auto; min-width:0; flex:none;
	margin:0; padding:18px 22px 20px 8px; border:0;
}
.hft-saf-app .hft-cards.hft-view-list .hft-card-rail .hft-card-buy{
	margin-top:auto; width:auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right;
}

/* ---- #4 iOS: 16px search field prevents the zoom-scroll jump on focus. ---- */
@media (max-width:767px){
	.hft-saf-input,
	.hft-saf-search input[type="search"],
	.hft-saf-search input[type="text"]{ font-size:16px !important; }
}

/* ============ /popular/ restyle (SOW #12) — brand-kit clean ============ */
.hft-popular{ max-width:1080px; margin:0 auto; padding:8px 0 40px; font-family:"Nunito Sans",system-ui,sans-serif; }
.hft-popular-head{ margin:0 0 24px; }
.hft-popular-intro{ color:var(--hft-slate,#5A6B7D); font-size:17px; line-height:1.6; max-width:720px; margin:0; }
.hft-popular-nav{ position:sticky; top:78px; z-index:5; display:flex; flex-wrap:wrap; gap:8px;
	margin:0 0 26px; padding:12px 14px; background:#fff; border:1px solid var(--hft-line,#E9E0D4);
	border-radius:16px; box-shadow:0 12px 28px -20px rgba(18,48,90,.42); }
.hft-popular-nav a{ font:800 13px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-navy,#1B437D);
	text-decoration:none; padding:8px 14px; border-radius:999px; background:var(--hft-cream,#FBF5EC);
	transition:background .15s, color .15s; }
.hft-popular-nav a:hover{ background:var(--hft-navy,#1B437D); color:#fff; }
.hft-popular-grade{ margin:0 0 22px; padding:26px 28px; background:#fff;
	border:1px solid var(--hft-line,#E9E0D4); border-radius:20px;
	box-shadow:0 18px 40px -30px rgba(18,48,90,.4); scroll-margin-top:96px; }
.hft-popular-grade-title{ font:700 24px/1.15 "Fredoka","Nunito Sans",system-ui,sans-serif;
	color:var(--hft-navy,#1B437D); margin:0 0 18px; padding:0 0 12px;
	border-bottom:2px solid var(--hft-cream-200,#EEE6DA); display:flex; align-items:center; gap:10px; }
.hft-popular-grade-title::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--hft-gold,#FBB915); flex:none; }
.hft-popular-subject{ margin:0 0 18px; }
.hft-popular-subject:last-child{ margin-bottom:0; }
.hft-popular-subject-title{ font:800 16px/1.2 "Nunito Sans",system-ui,sans-serif; color:var(--hft-blue,#0758A1); margin:0 0 10px; }
.hft-popular-skill-title{ font:800 12px/1 "Nunito Sans",system-ui,sans-serif; color:var(--hft-slate,#5A6B7D);
	text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; }
.hft-popular-links{ list-style:none; margin:0 0 6px; padding:0;
	display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 20px; }
.hft-popular-links li{ margin:0; }
.hft-popular-links a{ display:inline-block; color:var(--hft-navy,#1B437D); text-decoration:none; font-size:15px;
	line-height:1.4; padding:3px 0; border-bottom:1px solid transparent; transition:color .14s, border-color .14s; }
.hft-popular-links a:hover{ color:var(--hft-cta,#D6337B); border-color:var(--hft-cta,#D6337B); }
.hft-popular-count{ color:var(--hft-slate,#5A6B7D); font-size:14px; font-style:italic; margin:8px 0 0; }
@media (max-width:600px){ .hft-popular-grade{ padding:20px 18px; } .hft-popular-nav{ top:0; } }

/* ==========================================================================
   SOW batch A–H, item D — narrow the results section to ~90% width, centered,
   on desktop for BOTH List and Grid views. .hft-saf-results holds the cards
   grid AND the pager, so both narrow together. The toolbar (.hft-results-head-
   host) and the off-canvas filter drawer (.hft-saf-drawer) are intentionally
   left full-width. Mobile/tablet stay full-width (rule is desktop-only).
   ========================================================================== */
@media (min-width: 1025px){
	.hft-saf-app .hft-saf-results{ max-width:90%; margin-inline:auto; }
}