/**
 * Ship-to selector.
 *
 * Flexora applies aggressive global styling to anything button-like (pill
 * background, padding, radius, shadow), which otherwise turns this trigger into
 * a filled pill and stacks the flag above the label. Every property the theme
 * touches is therefore reset explicitly with !important, per the project's
 * standing rule for custom button-like elements. Selectors stay scoped to
 * .abb-shipto so nothing else on the page is affected.
 */

.abb-shipto {
	/* Flag size, tunable without touching the plugin: override --abb-flag-w on
	   .abb-shipto (or any ancestor) from your own CSS. Height is derived from the
	   3:2 ratio of the source images so it can never crop. */
	--abb-flag-w: 30px;
	--abb-flag-h: 20px;
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: center;
	/* Sit on the same centreline as the sibling nav items (language icon, Log In,
	   cart). Without this the inline-flex box aligns on the text baseline and the
	   flag + code drift a couple of pixels above the rest of the row. */
	vertical-align: middle;
	line-height: 1;
}

/* Trigger: strip Flexora's button treatment back to a plain inline control. */
.abb-shipto button.abb-shipto__trigger {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	cursor: pointer;
	white-space: nowrap !important;
}

.abb-shipto button.abb-shipto__trigger:hover,
.abb-shipto button.abb-shipto__trigger:focus,
.abb-shipto button.abb-shipto__trigger:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	transform: none !important;
}

.abb-shipto__label-text {
	font: inherit;
	white-space: nowrap;
}

/* Flag sits inline, never stacked. Fixed box so the nav never shifts. */
.abb-shipto__flag {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* 24x16 matches the 3:2 ratio of the source flag images (flagcdn w40 is
	   40x27). A 24x18 box is 4:3, so `cover` was cropping the sides, which showed
	   up as an uneven left/right band on symmetric flags like Canada's. */
	width: var(--abb-flag-w);
	height: var(--abb-flag-h);
	line-height: 0 !important;
}

.abb-shipto__flag img {
	display: block !important;
	width: var(--abb-flag-w) !important;
	height: var(--abb-flag-h) !important;
	max-width: none !important;
	/* `contain` never clips; the image is letterboxed instead if a flag's ratio
	   differs (Nepal and Switzerland are not 3:2). */
	object-fit: contain;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}

.abb-shipto__code {
	font: inherit;
	white-space: nowrap;
}

/* Chevron. Hidden by default (the header trigger is deliberately minimal) and
   switched on with the `chevron` class, so the footer pill can match the
   language switcher exactly. Rotates when the list is open. */
.abb-shipto__chevron {
	display: none;
	width: 12px;
	height: 7px;
	flex: 0 0 auto;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'><path d='M10.65 0.75L6.575 4.825C6.09375 5.30625 5.30625 5.30625 4.825 4.825L0.75 0.75' stroke='%23292D32' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform .18s ease;
}

.abb-shipto.chevron .abb-shipto__chevron {
	display: inline-block;
}

.abb-shipto.is-open .abb-shipto__chevron {
	transform: rotate(180deg);
}

/* Dropdown panel */
.abb-shipto__list {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 999999;
	margin: 0 !important;
	padding: 8px 0 !important;
	list-style: none !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
}

.abb-shipto__list[hidden] {
	display: none !important;
}

/* Full-screen tap target behind the open panel. Sits just under the portaled
   list so a tap anywhere outside closes it, which a document click listener
   cannot guarantee on iOS. */
.abb-shipto__backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
}

/* When portaled to <body> the panel is a sibling of everything else, so it needs
   its own stacking context and box styling rather than inheriting from the
   widget it came from. */
.abb-shipto__list--portaled {
	z-index: 2147483000 !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14) !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	list-style: none !important;
	overflow-y: auto;
}

/* Mobile: the panel is anchored to the viewport by the script (see
   positionList). These rules just make sure it can span the screen and scroll,
   rather than being held to the desktop min-width. */
.abb-shipto__list--portaled li.abb-shipto__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	color: #374151 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.abb-shipto__list--portaled li.abb-shipto__item.is-selected,
.abb-shipto__list--portaled li.abb-shipto__item:hover {
	background: #f4f1ea !important;
	color: #1f3a2a !important;
}

.abb-shipto__list--portaled img.abb-shipto__item-flag {
	display: block !important;
	flex: 0 0 auto;
	width: 24px !important;
	height: 16px !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	object-fit: contain;
}

@media (max-width: 767px) {
	.abb-shipto__list {
		min-width: 0 !important;
		max-width: none !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Panel heading. Names the control for touch users, who never see the trigger
   tooltip. Not an option, so it is skipped by the click handler and by AT. */
.abb-shipto li.abb-shipto__heading,
.abb-shipto__list--portaled li.abb-shipto__heading {
	display: block !important;
	margin: 0 0 4px !important;
	padding: 4px 16px 10px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	background: transparent !important;
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	list-style: none !important;
	cursor: default !important;
	pointer-events: none;
}

.abb-shipto li.abb-shipto__item {
		/* Comfortable tap target on touch screens. */
		padding: 12px 16px !important;
		white-space: normal;
	}
}

/* Panel heading. Names the control for touch users, who never see the trigger
   tooltip. Not an option, so it is skipped by the click handler and by AT. */
.abb-shipto li.abb-shipto__heading,
.abb-shipto__list--portaled li.abb-shipto__heading {
	display: block !important;
	margin: 0 0 4px !important;
	padding: 4px 16px 10px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	background: transparent !important;
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	list-style: none !important;
	cursor: default !important;
	pointer-events: none;
}

.abb-shipto li.abb-shipto__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 9px 16px !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	color: #374151 !important;
	font: inherit !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	cursor: pointer;
	white-space: nowrap;
}

.abb-shipto li.abb-shipto__item:hover,
.abb-shipto li.abb-shipto__item:focus,
.abb-shipto li.abb-shipto__item.is-selected {
	background: #f4f1ea !important;
	color: #1f3a2a !important;
	outline: none;
}

.abb-shipto img.abb-shipto__item-flag {
	display: block !important;
	flex: 0 0 auto;
	width: 24px !important;
	height: 16px !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	object-fit: contain;
}

.abb-shipto__item-name {
	font: inherit;
}