/* Quick View Buttons for WooCommerce - front end */

:root {
	--wcqb-gap: 10px;
	--wcqb-justify: flex-start;
	--wcqb-btn-bg: #2c2d33;
	--wcqb-btn-color: #ffffff;
	--wcqb-btn-hover-bg: #15161a;
	--wcqb-btn-hover-color: #ffffff;
	--wcqb-btn-border: #2c2d33;
	--wcqb-btn-bw: 1px;
	--wcqb-btn-radius: 4px;
	--wcqb-btn-py: 10px;
	--wcqb-btn-px: 18px;
	--wcqb-btn-fs: 15px;
	--wcqb-btn-fw: 500;
	--wcqb-btn-tt: none;
	--wcqb-icon-size: 20px;
	--wcqb-modal-width: 900px;
	--wcqb-modal-bg: #ffffff;
	--wcqb-modal-radius: 8px;
	--wcqb-modal-title-size: 20px;
	--wcqb-modal-text: #222222;
	--wcqb-overlay: rgba(0, 0, 0, 0.75);
	--wcqb-tbl-head-bg: #f3f4f6;
	--wcqb-tbl-head-color: #1f2328;
	--wcqb-tbl-border: #e2e4e7;
	--wcqb-tbl-stripe: #fafbfc;
	--wcqb-tbl-fs: 15px;
	--wcqb-tbl-align: center;
	--wcqb-logo-width: 160px;
	--wcqb-wm-width: 60%;
	--wcqb-wm-opacity: 0.08;
	--wcqb-wm-image: none;
}

/* ---------- Button layout ---------- */

.wcqb-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcqb-gap);
	justify-content: var(--wcqb-justify);
	margin: 0 0 1.2em;
	clear: both;
}

.wcqb-buttons.wcqb-align-full .wcqb-btn {
	flex: 1 1 100%;
}

/* ---------- Buttons ---------- */

.wcqb-buttons .wcqb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: var(--wcqb-btn-py) var(--wcqb-btn-px);
	border: var(--wcqb-btn-bw) solid transparent;
	border-radius: var(--wcqb-btn-radius);
	background: none;
	font-size: var(--wcqb-btn-fs);
	font-weight: var(--wcqb-btn-fw);
	text-transform: var(--wcqb-btn-tt);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.wcqb-buttons .wcqb-btn--icon-right {
	flex-direction: row-reverse;
}

.wcqb-buttons .wcqb-btn:active {
	transform: translateY(1px);
}

.wcqb-buttons .wcqb-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Filled */
.wcqb-buttons .wcqb-btn--filled {
	background-color: var(--wcqb-btn-bg);
	color: var(--wcqb-btn-color);
	border-color: var(--wcqb-btn-border);
}

.wcqb-buttons .wcqb-btn--filled:hover,
.wcqb-buttons .wcqb-btn--filled:focus {
	background-color: var(--wcqb-btn-hover-bg);
	color: var(--wcqb-btn-hover-color);
}

/* Outline */
.wcqb-buttons .wcqb-btn--outline {
	background-color: transparent;
	color: var(--wcqb-btn-bg);
	border-color: var(--wcqb-btn-border);
}

.wcqb-buttons .wcqb-btn--outline:hover,
.wcqb-buttons .wcqb-btn--outline:focus {
	background-color: var(--wcqb-btn-bg);
	color: var(--wcqb-btn-color);
}

/* Text link (underlined text, no box) */
.wcqb-buttons .wcqb-btn.wcqb-btn--link {
	background: none;
	border-color: transparent;
	box-shadow: none;
	padding: 0;
	min-height: 0;
	border-radius: 0;
	color: var(--wcqb-btn-bg);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Put the underline on the text itself too, so themes that strip it from
   buttons (or flex layouts that don't pass it down) can't hide it. */
.wcqb-buttons .wcqb-btn.wcqb-btn--link .wcqb-btn__text {
	text-decoration: underline !important;
	text-decoration-line: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wcqb-buttons .wcqb-btn.wcqb-btn--link:hover,
.wcqb-buttons .wcqb-btn.wcqb-btn--link:focus {
	background: none;
	box-shadow: none;
	color: var(--wcqb-btn-hover-bg);
	text-decoration: underline !important;
}

.wcqb-buttons.wcqb-align-full .wcqb-btn--link {
	justify-content: flex-start;
}

.wcqb-btn__icon {
	width: var(--wcqb-icon-size);
	height: var(--wcqb-icon-size);
	max-width: var(--wcqb-icon-size);
	object-fit: contain;
	display: block;
	margin: 0;
	border-radius: 2px;
	flex: 0 0 auto;
}

/* ---------- Modal ---------- */

.wcqb-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.wcqb-modal.is-open {
	display: flex;
}

.wcqb-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--wcqb-overlay);
	animation: wcqb-fade 0.18s ease;
}

.wcqb-modal__box {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wcqb-modal-width);
	max-height: 90vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--wcqb-modal-bg);
	color: var(--wcqb-modal-text);
	border-radius: var(--wcqb-modal-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	padding: 24px;
	animation: wcqb-pop 0.2s ease;
}

/* Themes often set a blanket `position: relative` on buttons inside a product
   page, which drags this out of its corner, so the anchoring is pinned with
   enough specificity to win and the side offsets are reset explicitly. */
.wcqb-modal .wcqb-modal__box > .wcqb-modal__close {
	position: absolute !important;
	top: 8px;
	right: 8px;
	left: auto;
	bottom: auto;
	margin: 0;
	float: none;
	transform: none;
	min-width: 0;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #6b7280;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.wcqb-modal .wcqb-modal__close:hover,
.wcqb-modal .wcqb-modal__close:focus {
	background: none;
	color: #111;
	opacity: 1;
}

.wcqb-modal--close-dark .wcqb-modal__close {
	background: none;
	color: #111;
}

.wcqb-modal--close-dark .wcqb-modal__close:hover,
.wcqb-modal--close-dark .wcqb-modal__close:focus {
	background: none;
	color: #000;
}

.wcqb-modal__title {
	margin: 0 44px 14px 0;
	font-size: var(--wcqb-modal-title-size);
	line-height: 1.3;
	color: inherit;
}

.wcqb-modal__title:empty {
	display: none;
}

.wcqb-modal__body {
	text-align: center;
	/* Two scales the script below turns down to fit the popup: row padding
	   first (rows get tighter, text stays full size), then text. Text has a
	   hard 12px floor in the rule below, because a chart nobody can read is
	   worse than one that scrolls. Both stay at 1 on small screens. */
	--wcqb-fit: 1;
	--wcqb-pad: 1;
}

.wcqb-modal__body .wcqb-table-wrap + .wcqb-modal__text {
	margin-top: 14px;
}

.wcqb-modal__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.wcqb-modal__text {
	margin-top: 16px;
	text-align: left;
	font-size: 15px;
	line-height: 1.6;
}

.wcqb-modal__text p:last-child {
	margin-bottom: 0;
}

/* Following a row across eight size columns is the hard part of reading a
   size chart, so the row under the pointer is highlighted. */
.wcqb-modal__body .wcqb-chart tbody tr:hover th,
.wcqb-modal__body .wcqb-chart tbody tr:hover td {
	background: rgba(0, 0, 0, 0.06);
}

/* Short laptop windows: claw back vertical space from the chrome so the
   chart itself keeps as much room as possible. */
@media (min-width: 601px) and (max-height: 860px) {
	.wcqb-modal {
		padding: 10px;
	}

	.wcqb-modal__box {
		padding: 16px 18px;
		max-height: 95vh;
	}

	.wcqb-modal__title {
		font-size: 17px;
		margin-bottom: 10px;
	}

	.wcqb-ctabs {
		margin-bottom: 10px;
	}

	.wcqb-units {
		margin-bottom: 6px;
	}
}

body.wcqb-modal-open {
	overflow: hidden;
}

/* ---------- Logo ---------- */

.wcqb-modal__logo {
	margin: 0 0 14px;
	text-align: center;
}

.wcqb-modal__logo-img {
	display: inline-block;
	width: auto;
	max-width: var(--wcqb-logo-width);
	height: auto;
	max-height: 90px;
	object-fit: contain;
}

/* ---------- Size chart table ---------- */

.wcqb-table-wrap {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	/* A faint edge fade hints that there is more to scroll to on narrow screens. */
	background:
		linear-gradient(to right, var(--wcqb-modal-bg) 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, var(--wcqb-modal-bg) 30%, rgba(255, 255, 255, 0)) right center;
	background-repeat: no-repeat;
	background-size: 28px 100%;
	background-attachment: local, local;
}

.wcqb-modal__body .wcqb-chart {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: max(12px, calc(var(--wcqb-tbl-fs) * var(--wcqb-fit)));
	line-height: 1.4;
	color: inherit;
	text-align: var(--wcqb-tbl-align);
	background: none;
}

.wcqb-modal__body .wcqb-chart th,
.wcqb-modal__body .wcqb-chart td {
	padding: calc(10px * var(--wcqb-pad)) calc(14px * var(--wcqb-pad));
	border: 1px solid var(--wcqb-tbl-border);
	text-align: inherit;
	vertical-align: middle;
	white-space: nowrap;
	background: none;
	color: inherit;
}

.wcqb-modal__body .wcqb-chart thead th {
	background: var(--wcqb-tbl-head-bg);
	color: var(--wcqb-tbl-head-color);
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 1;
}

.wcqb-modal__body .wcqb-chart tbody th {
	font-weight: 600;
}

.wcqb-modal__body .wcqb-chart tbody tr:nth-child(even) th,
.wcqb-modal__body .wcqb-chart tbody tr:nth-child(even) td {
	background: var(--wcqb-tbl-stripe);
}

/* The watermark sits behind the chart and never intercepts a tap. */
.wcqb-modal--watermark .wcqb-table-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--wcqb-wm-image);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: var(--wcqb-wm-width) auto;
	opacity: var(--wcqb-wm-opacity);
	pointer-events: none;
}

.wcqb-modal--watermark .wcqb-chart {
	position: relative;
	z-index: 1;
}

/* Cells must stay see-through, and evenly so: a solid stripe would dim the
   watermark on every other row and make it look banded. The plain colour is
   kept first as a fallback for browsers without color-mix(). */
.wcqb-modal--watermark .wcqb-chart tbody tr:nth-child(even) th,
.wcqb-modal--watermark .wcqb-chart tbody tr:nth-child(even) td {
	background: var(--wcqb-tbl-stripe);
	background: color-mix(in srgb, var(--wcqb-tbl-stripe) 30%, transparent);
}

/* The heading row stays solid so it still separates from the chart, but the
   watermark is kept out from under it so it reads as one clean shape. */
.wcqb-modal--watermark .wcqb-table-wrap::before {
	background-position: center 60%;
}

/* ---------- Unit toggle ---------- */

.wcqb-units {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 8px;
}

.wcqb-units__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--wcqb-tbl-border);
	border-radius: 20px;
	background: none;
	color: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0.85;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.wcqb-units__btn::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	transition: opacity 0.15s ease;
}

.wcqb-units__btn[aria-pressed="true"]::before {
	opacity: 1;
}

.wcqb-units__btn:hover,
.wcqb-units__btn:focus {
	background: var(--wcqb-tbl-head-bg);
	opacity: 1;
}

.wcqb-charts--cm-off .wcqb-cm {
	display: none;
}

.wcqb-cm {
	opacity: 0.7;
	white-space: nowrap;
}

/* ---------- Zoom ---------- */

.wcqb-zoom {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.03);
	touch-action: pan-y;
	cursor: zoom-in;
}

.wcqb-zoom.is-zoomed {
	touch-action: none;
	cursor: grab;
}

.wcqb-zoom.is-dragging {
	cursor: grabbing;
}

.wcqb-zoom .wcqb-modal__img {
	transform-origin: center center;
	transition: transform 0.12s ease-out;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
	border-radius: 0;
}

.wcqb-zoom.is-dragging .wcqb-modal__img {
	transition: none;
}

.wcqb-zoom__controls {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	gap: 6px;
	z-index: 2;
}

.wcqb-zoom__btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.72);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wcqb-zoom__btn:hover,
.wcqb-zoom__btn:focus {
	background: rgba(0, 0, 0, 0.9);
	color: #fff;
}

.wcqb-zoom__btn[disabled] {
	opacity: 0.4;
	cursor: default;
}

.wcqb-zoom__btn--reset {
	font-size: 15px;
}

.wcqb-zoom__hint {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 5px 10px;
	border-radius: 20px;
	background: rgba(20, 20, 20, 0.6);
	color: #fff;
	font-size: 12px;
	line-height: 1.2;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.wcqb-zoom.is-zoomed .wcqb-zoom__hint,
.wcqb-zoom__hint.is-gone {
	opacity: 0;
}

@keyframes wcqb-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wcqb-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.wcqb-modal {
		padding: 10px;
	}

	.wcqb-modal__box {
		padding: 18px 14px;
		max-height: 94vh;
	}

	.wcqb-buttons .wcqb-btn {
		flex: 1 1 auto;
	}

	.wcqb-buttons .wcqb-btn--link {
		flex: 0 1 auto;
	}

	.wcqb-modal__body {
		--wcqb-fit: 1;
		--wcqb-pad: 1;
	}

	.wcqb-modal__body .wcqb-chart th,
	.wcqb-modal__body .wcqb-chart td {
		padding: 8px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcqb-modal__overlay,
	.wcqb-modal__box,
	.wcqb-zoom .wcqb-modal__img {
		animation: none;
		transition: none;
	}
}

/* ---------- Country tabs ---------- */

.wcqb-ctabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0 0 2px;
}

.wcqb-ctab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--wcqb-tbl-border);
	border-radius: 24px;
	background: none;
	color: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0.7;
	transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

/* Themes often paint their own background onto buttons inside a product
   page, which would make every tab look selected. */
.wcqb-modal .wcqb-ctabs .wcqb-ctab {
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.wcqb-ctab:hover,
.wcqb-ctab:focus {
	opacity: 1;
	background: var(--wcqb-tbl-head-bg);
	border-color: var(--wcqb-btn-bg);
}

/* The selected country is filled in with the shop's own button colour, so it
   reads as chosen at a glance rather than as one of three identical pills.
   Themes like to restyle buttons inside a product page, hence the weight. */
.wcqb-modal .wcqb-ctabs .wcqb-ctab.is-active,
.wcqb-modal .wcqb-ctabs .wcqb-ctab[aria-selected="true"] {
	opacity: 1;
	background: var(--wcqb-btn-bg) !important;
	border-color: var(--wcqb-btn-bg) !important;
	color: var(--wcqb-btn-color) !important;
	font-weight: 700;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.wcqb-ctab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wcqb-flag {
	flex: 0 0 auto;
	line-height: 1;
}

.wcqb-flag--emoji {
	font-size: 18px;
	/* Keep flags on a font that actually draws them where one exists. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

.wcqb-flag--img {
	width: 22px;
	height: auto;
	max-height: 16px;
	object-fit: contain;
	display: block;
	border-radius: 2px;
	margin: 0;
}

.wcqb-cpane--hidden {
	display: none;
}

@media (max-width: 600px) {
	.wcqb-ctabs {
		gap: 5px;
	}

	.wcqb-ctab {
		padding: 6px 11px;
		font-size: 13px;
	}
}

/* ---------- Flag fallback where the platform has no flag emoji ---------- */

/* Hide the glyph that will not draw and put the country code in its place.
   This span is only rendered when no flag image was uploaded, so a real flag
   and a code chip can never appear side by side. */
.wcqb-no-flag-emoji .wcqb-flag--emoji {
	font-size: 0;
	line-height: 1;
}

.wcqb-no-flag-emoji .wcqb-flag--emoji[data-code]:not([data-code=""])::after {
	content: attr(data-code);
	display: inline-block;
	padding: 2px 5px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	opacity: 0.8;
}

/* ---------- Chart popups: only the table scrolls ---------- */

/* Added by the script when the popup holds a chart. Without it a tall chart
   would scroll the whole box, carrying the close button and the country tabs
   off the top of the screen. */
.wcqb-modal--chart .wcqb-modal__box {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.wcqb-modal--chart .wcqb-modal__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.wcqb-modal--chart .wcqb-charts {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.wcqb-modal--chart .wcqb-cpane {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.wcqb-modal--chart .wcqb-cpane--hidden {
	display: none;
}

/* The scroll container for both axes, so the sticky heading row pins to it.
   It has to flex rather than take a percentage height, or the bounded height
   never reaches it and overflowing rows are clipped out of reach. */
.wcqb-modal--chart .wcqb-table-wrap {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

/* Notes under the chart stay put rather than scrolling with it. */
.wcqb-modal--chart .wcqb-modal__text {
	flex: 0 0 auto;
}

/* ---------- Sitting beside a field label ---------- */

/* Before the script has moved them to their final spot, the buttons are taken
   completely out of the page flow (no height, no margins), so they do not
   push the form down and then pull it back up when they move. That jump is
   what caused the layout shift (CLS). */
.wcqb-buttons--attach:not(.is-placed) {
	position: absolute !important;
	visibility: hidden;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

.wcqb-buttons--attach.is-placed {
	visibility: visible;
}

/* If the script never runs (blocked / delayed for good), bring them back into
   the normal flow after a few seconds so they are never lost. */
@keyframes wcqb-reveal {
	to {
		position: static;
		visibility: visible;
		width: 100%;
		height: auto;
		margin: 12px 0 14px;
		overflow: visible;
		pointer-events: auto;
	}
}
.wcqb-buttons--attach:not(.is-placed) {
	animation: wcqb-reveal 0s 4s forwards;
}

/* Placed after the field's last option (e.g. under all the sizes): its own
   row, wrapping if there are several buttons, in the normal button style. */
.wcqb-buttons--attach {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 0 0 auto;
	align-self: stretch;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	clear: both;
	justify-content: flex-end;
	margin: 12px 0 14px;
	gap: var(--wcqb-gap, 10px);
	text-transform: none;
	letter-spacing: normal;
}

/* Buttons placed as the last item of an options list (e.g. after 5XL): same
   flex row as the options, pushed to the right edge. If the last row is full
   they wrap onto their own line, still right-aligned. */
.wcqb-attach-item {
	display: flex;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.wcqb-attach-item::marker {
	content: none;
}

.wcqb-attach-item .wcqb-buttons--attach {
	flex: 0 0 auto;
	align-self: center;
	width: auto;
	margin: 0;
	justify-content: flex-end;
}