/* THERMOCON Product Catalog — cross-page inquiry basket
   Loads on every page, so it stays small and claims no global selectors. */

:root {
	--thcc-accent: #1f4e79;
	--thcc-accent-dark: #163a5a;
	--thcc-line: #e2e8ee;
	--thcc-text: #1c2530;
	--thcc-muted: #5b6875;
}

/* ---------- CTA rail ---------- */

.thcc-rail {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.thcc-rail-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 62px;
	padding: 11px 4px;
	background: var(--thcc-accent);
	color: #fff;
	border: 0;
	border-radius: 8px 0 0 8px;
	font: 500 10px/1.15 inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .16s ease, width .16s ease;
}

.thcc-rail-btn:hover,
.thcc-rail-btn:focus-visible { background: var(--thcc-accent-dark); color: #fff; }
.thcc-rail-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.thcc-rail-ic svg { width: 20px; height: 20px; display: block; }
.thcc-rail-lbl { display: block; }

.thcc-rail-basket { background: #b8860b; }
.thcc-rail-basket:hover, .thcc-rail-basket:focus-visible { background: #9a710a; }

.thcc-rail-count {
	position: absolute;
	top: 4px; left: 6px;
	min-width: 18px; height: 18px;
	padding: 0 4px;
	background: #fff;
	color: #b8860b;
	border-radius: 9px;
	font: 700 11px/18px inherit;
}

/* Below the fold on phones the rail would cover the content, so it becomes a
   bottom bar with the same buttons. */
@media (max-width: 640px) {
	.thcc-rail {
		top: auto; bottom: 0; right: 0; left: 0;
		transform: none;
		flex-direction: row;
		gap: 0;
		box-shadow: 0 -2px 12px rgba(0,0,0,.12);
	}
	.thcc-rail-btn { flex: 1; width: auto; border-radius: 0; flex-direction: row; gap: 7px; padding: 12px 6px; }
	.thcc-rail-ic svg { width: 17px; height: 17px; }
	.thcc-rail-count { position: static; }
}

/* ---------- drawer ---------- */

.thcc-drawer { position: fixed; inset: 0; z-index: 9995; visibility: hidden; }
.thcc-drawer.is-open { visibility: visible; }

.thcc-drawer-backdrop {
	position: absolute; inset: 0;
	background: rgba(16,24,32,.5);
	opacity: 0;
	transition: opacity .22s ease;
}
.thcc-drawer.is-open .thcc-drawer-backdrop { opacity: 1; }

.thcc-drawer-panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(430px, 100%);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .24s cubic-bezier(.4,0,.2,1);
	box-shadow: -4px 0 28px rgba(0,0,0,.18);
}
.thcc-drawer.is-open .thcc-drawer-panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.thcc-drawer-panel, .thcc-drawer-backdrop { transition: none; }
}

html.thcc-drawer-open { overflow: hidden; }

.thcc-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px 10px;
	border-bottom: 1px solid var(--thcc-line);
}
.thcc-drawer-title { margin: 0; font-size: 18px; color: var(--thcc-text); }
.thcc-drawer-x {
	background: none; border: 0; font-size: 26px; line-height: 1;
	color: var(--thcc-muted); cursor: pointer; padding: 0 4px;
}
.thcc-drawer-x:focus-visible { outline: 2px solid var(--thcc-accent); }

.thcc-drawer-sub { margin: 10px 20px 0; font-size: 13px; color: var(--thcc-muted); }

.thcc-drawer-empty { padding: 34px 24px; text-align: center; }
.thcc-drawer-empty-t { margin: 0 0 6px; font-weight: 600; color: var(--thcc-text); }
.thcc-drawer-empty-s { margin: 0; font-size: 13px; color: var(--thcc-muted); }

.thcc-drawer-list {
	flex: 1;
	overflow-y: auto;
	margin: 10px 0 0;
	padding: 0 20px;
	list-style: none;
}

.thcc-drawer-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--thcc-line);
}

.thcc-drawer-thumb {
	flex: 0 0 56px;
	width: 56px; height: 56px;
	object-fit: contain;
	border-radius: 6px;
	background: #f4f6f8;
	border: 1px solid var(--thcc-line);
}
.thcc-drawer-thumb-empty { display: block; }

.thcc-drawer-body { flex: 1; min-width: 0; }

.thcc-drawer-name {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--thcc-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.thcc-drawer-name:hover { color: var(--thcc-accent); text-decoration: underline; }

.thcc-drawer-sku { display: block; font-size: 11px; color: var(--thcc-muted); margin-top: 1px; }

.thcc-drawer-meta { margin-top: 5px; font-size: 11.5px; color: var(--thcc-muted); line-height: 1.5; }
.thcc-drawer-meta-i { display: block; }

.thcc-drawer-rm {
	flex: 0 0 auto;
	background: none; border: 0;
	font-size: 20px; line-height: 1;
	color: var(--thcc-muted);
	cursor: pointer; padding: 2px 4px;
}
.thcc-drawer-rm:hover { color: #b32d2e; }
.thcc-drawer-rm:focus-visible { outline: 2px solid var(--thcc-accent); }

.thcc-drawer-foot {
	display: flex; gap: 10px; align-items: center;
	padding: 14px 20px;
	border-top: 1px solid var(--thcc-line);
	background: #fafbfc;
}

.thcc-drawer-clear {
	background: none; border: 0;
	color: var(--thcc-muted);
	font-size: 13px; cursor: pointer;
	text-decoration: underline;
}

.thcc-drawer-send {
	flex: 1;
	padding: 13px 16px;
	background: var(--thcc-accent);
	color: #fff;
	border: 0; border-radius: 6px;
	font: 600 14px/1 inherit;
	cursor: pointer;
}
.thcc-drawer-send:hover { background: var(--thcc-accent-dark); }
.thcc-drawer-send:focus-visible { outline: 2px solid var(--thcc-accent); outline-offset: 2px; }

/* ---------- add button ---------- */

.thcc-add {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 12px 20px;
	background: var(--thcc-accent);
	color: #fff;
	border: 0; border-radius: 6px;
	font: 600 14px/1 inherit;
	cursor: pointer;
}
.thcc-add:hover { background: var(--thcc-accent-dark); }
.thcc-add.is-in { background: #2e7d32; }
.thcc-add.is-in::before { content: "\2713\00a0"; }

/* ---------- toast ---------- */

.thcc-toast {
	position: fixed;
	left: 50%; bottom: 26px;
	transform: translateX(-50%) translateY(10px);
	z-index: 9999;
	max-width: min(440px, calc(100vw - 32px));
	padding: 12px 18px;
	background: var(--thcc-text);
	color: #fff;
	border-radius: 8px;
	font-size: 13.5px;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.thcc-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
	.thcc-toast { bottom: 74px; }   /* clear of the bottom rail */
}

/* Primary inquiry button on the product page — same visual weight and same
   behaviour as the "Request a quote" button inside the hub tables. */
.thcc-quote {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 12px 22px;
	background: var(--thcc-accent);
	color: #fff;
	border: 0; border-radius: 6px;
	font: 600 14px/1 inherit;
	cursor: pointer;
}
.thcc-quote:hover { background: var(--thcc-accent-dark); }
.thcc-quote:focus-visible { outline: 2px solid var(--thcc-accent); outline-offset: 2px; }

/* The list button becomes the secondary action beside it. */
.thcc-add-secondary { background: #fff; color: var(--thcc-accent); border: 1px solid var(--thcc-accent); }
.thcc-add-secondary:hover { background: #f0f6fb; color: var(--thcc-accent); }
.thcc-add-secondary.is-in { background: #2e7d32; color: #fff; border-color: #2e7d32; }