/* =========================================================================
 * HDM Store Carts — the store directory inside the blog article (Tiles style).
 * Mobile-first, scoped under body.hdm-blog-article .hdm-sc. Reuses the blog
 * module's --bs-* tokens (defined on body.hdm-blog-article) with fallbacks.
 * ========================================================================= */

body.hdm-blog-article .hdm-sc {
	--sc-navy: var(--bs-navy, #0f172a);
	--sc-ink: var(--bs-ink, #334155);
	--sc-ink-2: var(--bs-ink-2, #475569);
	--sc-label: var(--bs-label, #64748b);
	--sc-line: var(--bs-line, #e2e8f0);
	--sc-soft: #eef2f7;
	--sc-white: #fff;
	--sc-blue: var(--bs-blue, #1d4ed8);
	--sc-blue-so: #eaf1fe;
	--sc-pos: #15803d;
	--sc-pos-deep: #166534;
	--sc-pos-so: #e9f6ee;
	--sc-mid: #b45309;
	--sc-mid-deep: #9a3412;
	--sc-mid-so: #fff4e5;
	--sc-neg: #b91c1c;
	--sc-neg-deep: #991b1b;
	--sc-neg-so: #fdecec;
	--sc-g-bigbox: #1d4ed8;
	--sc-g-grocery: #15803d;
	--sc-g-warehouse: #b45309;
	--sc-g-homeimp: #0f766e;
	--sc-g-other: #6d28d9;
	--sc-r: 20px;
	--sc-shadow: 0 10px 30px -18px rgba(15, 23, 42, .25);
	--sc-shadow-h: 0 18px 36px -18px rgba(15, 23, 42, .35);
	--sc-display: var(--bs-display, "Sen", "Inter", system-ui, sans-serif);
	margin: 1.6rem 0 2.2rem;
	color: var(--sc-ink);
}
body.hdm-blog-article .hdm-sc :where(ul, ol, li, p, dl, dt, dd, div, span, h3, h4) { margin: 0; padding: 0; list-style: none; background: none; box-sizing: border-box; }
body.hdm-blog-article .hdm-sc [hidden] { display: none !important; }
body.hdm-blog-article .hdm-sc .hdm-sc-ico { flex: 0 0 auto; }

/* ---- Intro panel + summary tiles --------------------------------------- */
body.hdm-blog-article .hdm-sc__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
body.hdm-blog-article .hdm-sc__intro {
	display: flex; flex-direction: column; justify-content: center; gap: 10px;
	padding: 24px 24px 26px;
	background: var(--sc-blue-so);
	border-radius: 24px;
}
body.hdm-blog-article .hdm-sc__eyebrow { font-size: .72rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-blue); }
body.hdm-blog-article .hdm-sc__lead {
	margin: 0 !important;
	font-family: var(--sc-display);
	font-size: 1.6rem !important; font-weight: 800; line-height: 1.12 !important;
	color: var(--sc-navy);
}
body.hdm-blog-article .hdm-sc__sub { margin: 0 !important; font-size: .95rem !important; line-height: 1.55 !important; color: var(--sc-ink); max-width: 560px; }

body.hdm-blog-article .hdm-sc__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0; padding: 0 !important;
}
body.hdm-blog-article .hdm-sc__stat {
	display: flex; flex-direction: column; gap: 4px;
	padding: 18px 20px;
	border-radius: var(--sc-r);
	background: var(--sc-soft);
}
body.hdm-blog-article .hdm-sc__stat--pos { background: var(--sc-pos-so); }
body.hdm-blog-article .hdm-sc__stat--mid { background: var(--sc-mid-so); }
body.hdm-blog-article .hdm-sc__stat--neg { background: var(--sc-neg-so); }
body.hdm-blog-article .hdm-sc__stat--date { background: var(--sc-navy); }
body.hdm-blog-article .hdm-sc__stat-val {
	font-family: var(--sc-display);
	font-size: 2.6rem !important; font-weight: 800; line-height: 1 !important;
	color: var(--sc-navy);
	font-variant-numeric: tabular-nums lining-nums;
}
body.hdm-blog-article .hdm-sc__stat--pos .hdm-sc__stat-val { color: var(--sc-pos); }
body.hdm-blog-article .hdm-sc__stat--mid .hdm-sc__stat-val { color: var(--sc-mid); }
body.hdm-blog-article .hdm-sc__stat--neg .hdm-sc__stat-val { color: var(--sc-neg); }
body.hdm-blog-article .hdm-sc__stat--date .hdm-sc__stat-val { color: var(--sc-white); font-size: 1.25rem !important; line-height: 1.1 !important; padding-top: 10px; }
body.hdm-blog-article .hdm-sc__stat-lab { font-size: .8rem !important; font-weight: 700; line-height: 1.3 !important; color: var(--sc-ink-2); }
body.hdm-blog-article .hdm-sc__stat--pos .hdm-sc__stat-lab { color: var(--sc-pos-deep); }
body.hdm-blog-article .hdm-sc__stat--mid .hdm-sc__stat-lab { color: var(--sc-mid-deep); }
body.hdm-blog-article .hdm-sc__stat--neg .hdm-sc__stat-lab { color: var(--sc-neg-deep); }
body.hdm-blog-article .hdm-sc__stat--date .hdm-sc__stat-lab { color: #cbd5e1; }

/* ---- Segmented filter --------------------------------------------------- */
body.hdm-blog-article .hdm-sc__bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	padding: 22px 0 16px;
}
body.hdm-blog-article .hdm-sc__seg {
	display: inline-flex; flex-wrap: wrap; gap: 4px;
	padding: 5px;
	background: var(--sc-soft);
	border-radius: 999px;
}
body.hdm-blog-article .hdm-sc__chip {
	appearance: none; -webkit-appearance: none;
	margin: 0; padding: .6rem 1rem;
	font: inherit; font-family: var(--sc-display); font-size: .86rem !important; font-weight: 700; line-height: 1.2 !important;
	color: var(--sc-ink); background: transparent;
	border: 0; border-radius: 999px;
	cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease;
	text-transform: none; letter-spacing: 0; box-shadow: none;
}
body.hdm-blog-article .hdm-sc__chip:hover { color: var(--sc-navy); background: rgba(255, 255, 255, .6); }
body.hdm-blog-article .hdm-sc__chip.is-active,
body.hdm-blog-article .hdm-sc__chip[aria-pressed="true"] { color: var(--sc-navy); background: var(--sc-white); box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 16px -8px rgba(15, 23, 42, .3); }
body.hdm-blog-article .hdm-sc__chip:focus-visible { outline: 3px solid var(--sc-blue); outline-offset: 2px; }
body.hdm-blog-article .hdm-sc__count { font-size: .82rem !important; color: var(--sc-label); font-weight: 600; }

/* ---- Groups ------------------------------------------------------------- */
body.hdm-blog-article .hdm-sc__group { margin: 0 0 1.6rem; }
body.hdm-blog-article .hdm-sc__group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 .9rem; }
body.hdm-blog-article .hdm-sc__group-title {
	margin: 0 !important; padding: 0 !important;
	font-family: var(--sc-display);
	font-size: 1.25rem !important; font-weight: 800; line-height: 1.2 !important;
	color: var(--sc-navy);
	border: 0;
}
body.hdm-blog-article .hdm-sc__group-n { font-size: .74rem !important; font-weight: 800; color: var(--sc-ink-2); background: var(--sc-soft); padding: .2rem .6rem; border-radius: 999px; }
body.hdm-blog-article .hdm-sc__group-rule { flex: 1; height: 1px; background: var(--sc-line); }

/* ---- Grid + tiles ------------------------------------------------------- */
body.hdm-blog-article .hdm-sc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0; padding: 0 !important;
}
body.hdm-blog-article .hdm-sc-card {
	display: flex; flex-direction: column;
	border-radius: var(--sc-r);
	overflow: hidden;
	background: var(--sc-white);
	border: 1px solid var(--sc-line);
	box-shadow: var(--sc-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
body.hdm-blog-article .hdm-sc-card:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-h); }

body.hdm-blog-article .hdm-sc-card__top {
	display: flex; flex-direction: column; gap: 14px;
	padding: 20px 20px 16px;
	background: var(--sc-pos-so);
}
body.hdm-blog-article .hdm-sc-card--mid .hdm-sc-card__top { background: var(--sc-mid-so); }
body.hdm-blog-article .hdm-sc-card--neg .hdm-sc-card__top { background: var(--sc-neg-so); }
body.hdm-blog-article .hdm-sc-card__marks { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.hdm-blog-article .hdm-sc-card__mono {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 14px;
	font-family: var(--sc-display); font-size: 1.25rem !important; font-weight: 800; line-height: 1 !important;
	color: var(--sc-white); background: var(--sc-g-other);
}
body.hdm-blog-article .hdm-sc-card--g-bigbox .hdm-sc-card__mono { background: var(--sc-g-bigbox); }
body.hdm-blog-article .hdm-sc-card--g-grocery .hdm-sc-card__mono { background: var(--sc-g-grocery); }
body.hdm-blog-article .hdm-sc-card--g-warehouse .hdm-sc-card__mono { background: var(--sc-g-warehouse); }
body.hdm-blog-article .hdm-sc-card--g-homeimp .hdm-sc-card__mono { background: var(--sc-g-homeimp); }
body.hdm-blog-article .hdm-sc-card--neg .hdm-sc-card__mono { background: var(--sc-label); }
body.hdm-blog-article .hdm-sc-card__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 999px;
	background: var(--sc-white); color: var(--sc-pos);
}
body.hdm-blog-article .hdm-sc-card--mid .hdm-sc-card__mark { color: var(--sc-mid); }
body.hdm-blog-article .hdm-sc-card--neg .hdm-sc-card__mark { color: var(--sc-neg); }
body.hdm-blog-article .hdm-sc-card__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.hdm-blog-article .hdm-sc-card__name {
	margin: 0 !important; padding: 0 !important;
	font-family: var(--sc-display);
	font-size: 1.12rem !important; font-weight: 800; line-height: 1.2 !important;
	color: var(--sc-navy);
}
body.hdm-blog-article .hdm-sc-card__status { font-size: .74rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-pos); }
body.hdm-blog-article .hdm-sc-card--mid .hdm-sc-card__status { color: var(--sc-mid); }
body.hdm-blog-article .hdm-sc-card--neg .hdm-sc-card__status { color: var(--sc-neg); }

body.hdm-blog-article .hdm-sc-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 16px 20px 18px; }
body.hdm-blog-article .hdm-sc-card__headline {
	margin: 0 !important;
	font-size: .93rem !important; font-weight: 700; line-height: 1.5 !important;
	color: var(--sc-navy);
}
body.hdm-blog-article .hdm-sc-card__rows { display: flex; flex-direction: column; gap: 9px; margin: 0; }
body.hdm-blog-article .hdm-sc-card__row {
	display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 8px; align-items: start;
	font-size: .86rem !important; line-height: 1.45 !important; color: var(--sc-ink-2);
}
body.hdm-blog-article .hdm-sc-card__row .hdm-sc-ico { color: var(--sc-blue); margin-top: 2px; }
body.hdm-blog-article .hdm-sc-card__row dt { grid-column: 2; font-size: .68rem !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sc-label); line-height: 1.2 !important; }
body.hdm-blog-article .hdm-sc-card__row dd { grid-column: 2; margin: 0 !important; }
body.hdm-blog-article .hdm-sc-card__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0 !important; }
body.hdm-blog-article .hdm-sc-card__chips li {
	padding: .22rem .6rem;
	font-size: .72rem !important; font-weight: 700; line-height: 1.2 !important;
	color: var(--sc-ink-2); background: var(--sc-soft);
	border-radius: 999px;
}
body.hdm-blog-article .hdm-sc-card__foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	margin-top: auto; padding-top: 12px;
	border-top: 1px solid var(--sc-soft);
}
body.hdm-blog-article .hdm-sc-card__kind {
	padding: .18rem .5rem;
	font-size: .62rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2 !important;
	color: var(--sc-ink-2); background: var(--sc-soft); border-radius: 999px;
}
body.hdm-blog-article .hdm-sc-card__kind--official { color: var(--sc-pos); background: var(--sc-pos-so); }
body.hdm-blog-article .hdm-sc-card__src {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .78rem !important; font-weight: 700; line-height: 1.2 !important;
	color: var(--sc-blue); text-decoration: none;
}
body.hdm-blog-article .hdm-sc-card__src:hover { text-decoration: underline; color: var(--sc-blue); }
body.hdm-blog-article .hdm-sc-card__checked { margin-left: auto; font-size: .72rem !important; color: var(--sc-label); font-weight: 600; }

/* ---- Empty state + footnote -------------------------------------------- */
body.hdm-blog-article .hdm-sc__empty { padding: 1rem; text-align: center !important; color: var(--sc-ink-2); background: var(--sc-soft); border-radius: var(--sc-r); }
body.hdm-blog-article .hdm-sc__foot { margin: .4rem 0 0 !important; font-size: .86rem !important; line-height: 1.55 !important; color: var(--sc-ink-2); }
body.hdm-blog-article .hdm-sc__foot a { color: var(--sc-blue); }

/* ---- Breakpoints -------------------------------------------------------- */
@media (min-width: 600px) {
	body.hdm-blog-article .hdm-sc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	body.hdm-blog-article .hdm-sc__top { grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; }
	body.hdm-blog-article .hdm-sc__intro { padding: 28px 32px; }
	body.hdm-blog-article .hdm-sc__lead { font-size: 1.9rem !important; }
	body.hdm-blog-article .hdm-sc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	body.hdm-blog-article .hdm-sc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	body.hdm-blog-article .hdm-sc-card,
	body.hdm-blog-article .hdm-sc__chip { transition: none; }
	body.hdm-blog-article .hdm-sc-card:hover { transform: none; }
}