/* GCL Kit Switch 1.1: "Buy it as" dropdown in the product buy box. Hugs its content, styled like .gcl-pick. */
.gcl-ks { margin: 4px 0 18px; }
.gcl-ks__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink, #0F172A); }
.gcl-ks__hint { font-weight: 500; color: var(--accent, #15803D); }
.gcl-ks__dd { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.gcl-ks__btn {
	box-sizing: border-box; display: flex; align-items: center; gap: 14px; min-width: 260px; max-width: 100%; min-height: 48px;
	padding: 8px 12px 8px 16px; border: 1px solid var(--line, #E2E8F0); border-radius: var(--r-control, 12px);
	background: #FFFFFF; cursor: pointer; list-style: none; user-select: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gcl-ks__btn::-webkit-details-marker { display: none; }
.gcl-ks__btn::marker { content: ""; }
.gcl-ks__btn:hover { border-color: #94A3B8; }
.gcl-ks__btn:focus-visible { outline: 2px solid var(--accent, #15803D); outline-offset: 2px; }
.gcl-ks__dd[open] > .gcl-ks__btn { border-color: var(--accent, #15803D); box-shadow: inset 0 0 0 1px var(--accent, #15803D); }
.gcl-ks__val { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink, #0F172A); }
.gcl-ks__price { flex: none; font-size: 14px; font-weight: 600; color: var(--ink, #0F172A); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gcl-ks__chev { flex: none; color: var(--muted, #64748B); transition: transform .15s ease; }
.gcl-ks__dd[open] .gcl-ks__chev { transform: rotate(180deg); }

.gcl-ks__menu {
	position: absolute; z-index: 40; left: 0; top: calc(100% + 6px); box-sizing: border-box;
	width: max-content; min-width: 100%; max-width: min(460px, calc(100vw - 32px)); max-height: min(400px, 60vh); overflow-y: auto;
	padding: 6px; background: #FFFFFF; border: 1px solid var(--line, #E2E8F0); border-radius: var(--r-control, 12px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, .16); overscroll-behavior: contain;
}
.gcl-ks__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 8px; color: var(--ink, #0F172A); text-decoration: none; }
a.gcl-ks__item:hover, a.gcl-ks__item:focus-visible { background: var(--surface, #F8FAFC); color: var(--ink, #0F172A); text-decoration: none; outline: none; }
a.gcl-ks__item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent, #15803D); }
.gcl-ks__item.is-current { background: var(--accent-tint, #F0FDF4); }
.gcl-ks__tick { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent, #15803D); }
.gcl-ks__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gcl-ks__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink, #0F172A); }
.gcl-ks__note { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--muted, #64748B); }
.gcl-ks__item .gcl-ks__price { margin-top: 1px; font-size: 13.5px; }
.gcl-ks__group { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; padding: 10px 10px 6px 36px; border-top: 1px solid var(--line, #E2E8F0); }
.gcl-ks__item--sub { padding-top: 8px; padding-bottom: 8px; }
.gcl-ks__item--sub .gcl-ks__name { font-weight: 500; }

@media (max-width: 480px) {
	.gcl-ks__dd, .gcl-ks__btn { width: 100%; min-width: 0; }
	.gcl-ks__menu { width: 100%; max-width: none; }
}