/* ============================================================
   Bit of Comfort — product compare (bar + toggles + /compare/ page)
   Loaded wherever the compare UI appears: shop/category archives,
   the PDP, and the Compare Products page template. Owns ALL compare
   styling (the .boc-compare-* rules moved here out of the comps-era
   sheet back when the PDP stopped loading it; that sheet is gone now).
   Tokens from style.css :root.
   ============================================================ */

/* --- Selected-state toggles (category cards + PDP add-compare link) --- */
.boc-compare-toggle.is-active { color: var(--boc-red); font-weight: 600; }
.boc-compare-toggle.is-active svg { stroke: var(--boc-red); }
.add-compare.is-active { color: var(--boc-red); }
.add-compare.is-active svg { stroke: var(--boc-red); }

/* PDP compare-table footer: View Product | Compare — the card's attached
   split-buttons treatment, cloned from boc-styles.css (its rules are scoped
   to .product-card): one 4px-radius unit, halves square where they meet,
   2px blue borders, filled left / outlined right, Compare goes red when the
   product is in the selection. Full cell width so it sits centered. */
.boc-compare-split {
	display: flex;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
}
/* `a, button`: the compare-table toggle became <button type="button"> in the
   R-6 disclosure sweep. This rule was element-keyed, so the swap dropped the
   whole split-button skin off it — flex sizing, 14px/500, 9px padding and
   nowrap all went to UA defaults and the control shrank 1280x36 to 96x34.
   Measured against the pre-conversion build. The three rules below key on
   the same element and move with it. */
.boc-compare-split a,
.boc-compare-split button {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 14px;
	font-weight: 500;
	padding: 9px 0;
	text-decoration: none;
	white-space: nowrap;
}
.boc-compare-split a svg,
.boc-compare-split button svg {
	width: 14px;
	height: 14px;
	margin-right: 6px;
}
.boc-compare-split .boc-compare-view {
	border: 2px solid var(--boc-blue);
	background: var(--boc-blue);
	color: #fff;
	border-radius: 4px 0 0 4px;
}
.boc-compare-split .boc-compare-toggle--table {
	border: 2px solid var(--boc-blue);
	border-left: 0;
	background: #fff;
	color: var(--boc-blue);
	border-radius: 0 4px 4px 0;
}
.boc-compare-split a:hover,
.boc-compare-split button:hover {
	background: #1867a6; /* the card's split-buttons hover blue */
	border-color: #1867a6;
	color: #fff;
}
.boc-compare-split a:hover svg,
.boc-compare-split button:hover svg { stroke: #fff; }
.boc-compare-split .boc-compare-toggle--table.is-active { color: var(--boc-red); }
.boc-compare-split .boc-compare-toggle--table.is-active svg { stroke: var(--boc-red); }
.boc-compare-split .boc-compare-toggle--table.is-active:hover { color: #fff; }
.boc-compare-split .boc-compare-toggle--table.is-active:hover svg { stroke: #fff; }

/* --- Sticky compare bar (template-parts/compare-bar.php) --- */
.boc-compare-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--boc-blue-dark);
	color: #fff;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.15);
	z-index: 40;
}
.boc-compare-bar[hidden] { display: none !important; }
.boc-compare-bar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: var(--boc-space-3);
}
.boc-compare-bar__count { font-weight: 600; font-size: 1.47rem; }
.boc-compare-bar__items { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.boc-compare-bar__chip {
	position: relative;
	width: 44px;
	height: 44px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
.boc-compare-bar__chip img { width: 100%; height: 100%; object-fit: contain; }
.boc-compare-bar__rm {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 0;
	background: #1b1b1b;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
/* The Compare action — an <a> now (it navigates to /compare/). Same red
   primary-button look the bar's old .boc-btn--primary <button> had. */
.boc-compare-bar__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--boc-red);
	color: #fff;
	border-radius: var(--boc-radius);
	font-weight: 700;
	font-size: 1.52rem;
	padding: 0.7em 1.4em;
	text-decoration: none;
	transition: filter 0.15s;
}
.boc-compare-bar__go:hover { filter: brightness(0.92); color: #fff; }
.boc-compare-bar__go[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.boc-compare-bar__clear {
	background: none;
	border: 0;
	color: #d8e2ee;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}
/* Feedback pulse when a 5th add is refused (selection capped at 4). */
.boc-compare-bar--bump { animation: boc-compare-bump 0.45s ease; }
@keyframes boc-compare-bump {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-8px); }
	60% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
	.boc-compare-bar--bump { animation: none; }
}

/* --- /compare/ page ------------------------------------------------ */
.boc-compare-page .boc-compare-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--boc-space-3);
	margin: var(--boc-space-4) 0;
}
.boc-compare-page .boc-compare-title-row h1 {
	font-family: var(--boc-font-head);
	color: var(--boc-ink);
	font-size: 3.2rem;
	margin: 0;
}
.boc-compare-clear {
	color: var(--boc-muted);
	font-size: 1.36rem;
	text-decoration: underline;
	white-space: nowrap;
}
.boc-compare-hint {
	background: #ecf3fa; /* the PDP section-nav tint */
	border-radius: var(--boc-radius);
	padding: var(--boc-space-3) var(--boc-space-4);
	font-size: 1.47rem;
	margin: 0 0 var(--boc-space-4);
}

/* Empty state — an invitation, not a dead end. */
.boc-compare-empty {
	text-align: center;
	padding: var(--boc-space-6) var(--boc-space-4);
	border: 1px solid var(--boc-line);
	border-radius: var(--boc-radius);
	background: var(--boc-bg-alt);
	margin-bottom: var(--boc-space-6);
}
.boc-compare-empty__title {
	font-family: var(--boc-font-head);
	font-size: 2.2rem;
	color: var(--boc-ink);
	margin: 0 0 var(--boc-space-2);
}
.boc-compare-empty p { font-size: 1.47rem; }
.boc-compare-empty__links {
	display: flex;
	gap: var(--boc-space-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--boc-space-4);
}

/* Comparison table. Desktop: fits the container, product header row is
   position:sticky. Mobile (<=860px): the wrapper becomes an x-scroll
   container with the spec-label column pinned left — an overflow
   container kills page-vertical sticky, so the wrapper only gets
   overflow-x inside the media query. */
.boc-compare-scroll { margin-bottom: var(--boc-space-6); }
/* Bordered like the PDP "Compare With Similar Products" table: outer frame +
   vertical column separators, values left-aligned. */
.boc-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--boc-line);
	font-size: 1.47rem;
	color: var(--boc-ink);
}
.boc-compare-table thead th.boc-compare-product,
.boc-compare-table tbody td {
	border-left: 1px solid var(--boc-line);
}
.boc-compare-table thead th {
	position: sticky;
	top: 64px; /* clears the collapsed fixed header (same offset as the PDP section jumps) */
	z-index: 3;
	background: #fff;
	vertical-align: top;
	text-align: left;
	padding: var(--boc-space-3);
	border-bottom: 2px solid var(--boc-line);
}
.boc-compare-table .boc-compare-corner { z-index: 4; }

/* Product header cells */
.boc-compare-product { position: relative; min-width: 180px; }
.boc-compare-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--boc-line);
	background: #fff;
	color: var(--boc-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.boc-compare-remove:hover { color: var(--boc-red); border-color: var(--boc-red); }
.boc-compare-product__img { display: block; margin-bottom: var(--boc-space-2); }
.boc-compare-product__img img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 110px;
	object-fit: contain;
	margin: 0 auto;
}
.boc-compare-product__title {
	display: block;
	color: var(--boc-blue);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--boc-space-2);
	text-decoration: none;
}
.boc-compare-product__title:hover { text-decoration: underline; }

/* Price row (Key Specs) — "$259.95 / each" + strikethrough original on sale,
   like the PDP table. Model/price left the header cells for these rows. */
.boc-compare-price .current { font-weight: 700; }
.boc-compare-product__each { font-size: 1.36rem; }
.boc-compare-price .original {
	color: var(--boc-muted);
	text-decoration: line-through;
	font-size: 1.36rem;
	margin-left: 6px;
}
.boc-compare-product .arrow-btn { white-space: nowrap; }
.boc-compare-product__oos { color: var(--boc-muted); font-weight: 600; }

/* Spec-group header rows — the PDP section-nav tint band. */
.boc-compare-group__head th {
	background: #ecf3fa;
	text-align: left;
	font-family: var(--boc-font-head);
	font-size: 1.6rem;
	color: var(--boc-ink);
	padding: var(--boc-space-2) var(--boc-space-3);
	border-bottom: 1px solid var(--boc-line);
}

/* Collapsed group bands — Key Specs stays open (no toggle); the full spec
   groups start is-collapsed and compare.js toggles them. */
.boc-compare-group.is-collapsed tr:not(.boc-compare-group__head) { display: none; }
.boc-compare-group__toggle {
	display: flex;
	align-items: center;
	gap: var(--boc-space-2);
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-family: var(--boc-font-head);
	color: var(--boc-ink);
	text-align: left;
}
.boc-compare-group__count {
	margin-left: auto;
	color: var(--boc-muted);
	font-family: var(--boc-font-body);
	font-size: 1.3rem;
}
.boc-compare-group__toggle svg {
	width: 18px;
	height: 18px;
	stroke: var(--boc-blue);
	transition: transform 0.2s ease;
}
.boc-compare-group:not(.is-collapsed) .boc-compare-group__toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.boc-compare-group__toggle svg { transition: none; }
}

/* Spec rows: muted label column, striped values, N/A stays quiet. */
.boc-compare-table tbody th[scope="row"] {
	text-align: left;
	font-weight: 400;
	color: var(--boc-muted);
	background: #fff;
	padding: var(--boc-space-2) var(--boc-space-3);
	border-bottom: 1px solid var(--boc-line);
	min-width: 140px;
}
.boc-compare-table tbody td {
	text-align: left;
	padding: var(--boc-space-2) var(--boc-space-3);
	border-bottom: 1px solid var(--boc-line);
}
.boc-compare-group tr:nth-child(even) td,
.boc-compare-group tr:nth-child(even) th[scope="row"] { background: #f7f9fb; }

/* Mobile: horizontal scroll, spec-label column pinned. Product header
   cells stop being page-sticky here (overflow container limitation).
   The group-band toggle caps to the viewport so its chevron stays visible
   while the table x-scrolls (the band cell spans the full table width). */
@media (max-width: 860px) {
	.boc-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.boc-compare-table thead th { position: static; }
	.boc-compare-product { min-width: 170px; }
	.boc-compare-table .boc-compare-corner,
	.boc-compare-table tbody th[scope="row"],
	.boc-compare-group__head th {
		position: sticky;
		left: 0;
		z-index: 2;
	}
	.boc-compare-table tbody th[scope="row"] { min-width: 110px; max-width: 140px; }
	.boc-compare-group__toggle { max-width: calc(100vw - 80px); }
	.boc-compare-page .boc-compare-title-row h1 { font-size: 2.6rem; }
	.boc-compare-bar__count { display: none; } /* chips + button carry the state on small screens */
}

/* 5-column comparisons don't fit under ~1080px — same x-scroll mode as the
   860px block, scoped to the --wide wrapper the template adds at 5 products. */
@media (max-width: 1080px) {
	.boc-compare-scroll--wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.boc-compare-scroll--wide .boc-compare-table thead th { position: static; }
	.boc-compare-scroll--wide .boc-compare-product { min-width: 170px; }
	.boc-compare-scroll--wide .boc-compare-table .boc-compare-corner,
	.boc-compare-scroll--wide .boc-compare-table tbody th[scope="row"],
	.boc-compare-scroll--wide .boc-compare-group__head th {
		position: sticky;
		left: 0;
		z-index: 2;
	}
	.boc-compare-scroll--wide .boc-compare-table tbody th[scope="row"] { min-width: 110px; max-width: 140px; }
	.boc-compare-scroll--wide .boc-compare-group__toggle { max-width: calc(100vw - 80px); }
}

/* (.boc-sr-only used to be duplicated here so the compare page didn't depend
   on the legacy sheet; style.css owns the single global copy now.) */

/* Keyboard focus */
.boc-compare-bar__go:focus-visible,
.boc-compare-bar__rm:focus-visible,
.boc-compare-bar__clear:focus-visible,
.boc-compare-remove:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.boc-compare-remove:focus-visible,
.boc-compare-clear:focus-visible,
.boc-compare-group__toggle:focus-visible {
	outline: 2px solid var(--boc-blue);
	outline-offset: 2px;
}