/* Size Guide for WooCommerce: trigger, popup and tables. Override the variables in your theme to restyle. */
.sgw,
.sgw-modal,
.sgw-preview {
	--sgw-text: #1d2327;
	--sgw-muted: #646970;
	--sgw-border: #dcdcde;
	--sgw-head-bg: #1d2327;
	--sgw-head-text: #fff;
	--sgw-stripe: #f6f7f7;
	--sgw-bg: #fff;
	--sgw-radius: 6px;
}

.sgw {
	margin: 0;
}

/* Link-style button. Selectors start with .sgw so theme button styles (e.g. Storefront's grey hover) don't apply. */
.sgw .sgw-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--sgw-link-size, inherit); /* Size Guides → Settings → Link text size. */
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Icon before the link text: built-in ruler or a custom SVG, sized in Settings. */
.sgw-icon {
	display: inline-flex;
	flex: none;
	line-height: 0;
}

.sgw-icon svg {
	width: var(--sgw-icon-size, 18px);
	height: var(--sgw-icon-size, 18px);
}

.sgw .sgw-trigger:hover,
.sgw .sgw-trigger:focus,
.sgw .sgw-trigger:active {
	background: none;
	border: 0;
	box-shadow: none;
}

.sgw .sgw-trigger:hover,
.sgw .sgw-trigger:focus-visible {
	text-decoration-thickness: 2px;
}

/* No focus box after a mouse click (themes such as Storefront outline every focused button).
   Keyboard users still get the outline when they Tab to the link or the close button. */
.sgw .sgw-trigger:focus:not(:focus-visible),
.sgw-modal .sgw-close:focus:not(:focus-visible),
.sgw-modal .sgw-inner:focus {
	outline: none;
	box-shadow: none;
}

/* Popup */
.sgw-modal {
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--sgw-radius);
	background: var(--sgw-bg);
	color: var(--sgw-text);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.sgw-modal::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.sgw-inner {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
}

/* Product name and title centred; the close button sits on the right, out of the flow. */
.sgw-head {
	position: relative;
	padding: 16px 56px;
	border-bottom: 1px solid var(--sgw-border);
	text-align: center;
}

.sgw-heading {
	min-width: 0;
}

/* Sizes are set in Size Guides → Settings (product name / popup title size). */
.sgw-title {
	margin: 0;
	font-size: var(--sgw-title-size, 20px);
	line-height: 1.3;
}

.sgw-product {
	margin: 0 0 4px;
	color: var(--sgw-muted);
	font-size: var(--sgw-product-size, 20px);
	line-height: 1.3;
}

.sgw-close {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.sgw-modal .sgw-close:hover,
.sgw-modal .sgw-close:focus,
.sgw-modal .sgw-close:active {
	background: none;
	color: inherit;
	box-shadow: none;
}

.sgw-modal .sgw-body {
	overflow-y: auto;
	padding: 16px 20px 20px;
	overscroll-behavior: contain;
}

/* Text before / after the tables */
.sgw-note {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--sgw-text);
}

.sgw-note-before {
	margin: 0 0 16px;
}

.sgw-note-after {
	margin: 16px 0 0;
	color: var(--sgw-muted);
}

.sgw-note > :first-child {
	margin-top: 0;
}

.sgw-note > :last-child {
	margin-bottom: 0;
}

.sgw-note img {
	max-width: 100%;
	height: auto;
}

/* [size_guide_table] */
.sgw-inline-title {
	margin: 0 0 12px;
}

html.sgw-locked {
	overflow: hidden;
}

/* Tables. Selectors start with .sgw-scroll so they beat theme table styles (e.g. Storefront's striped rows). */
.sgw-scroll {
	overflow-x: auto;
	margin: 0 0 16px;
	border: 1px solid var(--sgw-border);
	border-radius: var(--sgw-radius);
	-webkit-overflow-scrolling: touch;
}

.sgw-scroll:last-child {
	margin-bottom: 0;
}

.sgw-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

.sgw-scroll .sgw-table caption {
	padding: 10px 12px;
	font-weight: 600;
	text-align: left;
	caption-side: top;
}

.sgw-scroll .sgw-table th,
.sgw-scroll .sgw-table td {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid var(--sgw-border);
	background: var(--sgw-bg);
	color: var(--sgw-text);
}

.sgw-scroll .sgw-table thead th {
	background: var(--sgw-head-bg);
	color: var(--sgw-head-text);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.8rem;
}

.sgw-scroll .sgw-table tbody tr:nth-child(even) th,
.sgw-scroll .sgw-table tbody tr:nth-child(even) td {
	background: var(--sgw-stripe);
}

.sgw-scroll .sgw-table tbody tr:last-child th,
.sgw-scroll .sgw-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Keep the size column visible while scrolling sideways. */
.sgw-scroll .sgw-table th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	font-weight: 600;
	text-align: left;
}

.sgw-scroll .sgw-table tbody th:first-child {
	box-shadow: 1px 0 0 var(--sgw-border);
}

@media (max-width: 600px) {
	/* Centred on phones too, with a 16px gap round the edges. */
	.sgw-modal {
		width: calc(100vw - 32px);
		max-width: calc(100vw - 32px);
		max-height: calc(100dvh - 32px);
		margin: auto;
	}

	.sgw-inner {
		max-height: calc(100dvh - 32px);
	}

	.sgw-head {
		padding-left: 48px;
		padding-right: 48px;
	}

	.sgw-modal .sgw-body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.sgw-close {
		right: 8px;
	}

	.sgw-scroll .sgw-table th,
	.sgw-scroll .sgw-table td {
		padding: 8px 10px;
	}
}