/*
 * CC Storefront size guide. Colours and fonts come from the theme: the look is in :where()
 * (zero specificity), so any site rule wins. The buttons are reset with element selectors so
 * a theme's global button style (e.g. Elementor's kit) does not turn them into big buttons.
 */
:where(.cc-size-guide__row) { display: flex; justify-content: flex-end; margin: 0 0 0.75em; }
button.cc-size-guide__link {
	display: inline; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
button.cc-size-guide__link:hover, button.cc-size-guide__link:focus { background: none; color: inherit; }
:where(dialog.cc-size-guide) {
	width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0;
	border: 1px solid rgba(127, 127, 127, 0.3); color: CanvasText; background: Canvas; overflow: auto;
}
:where(dialog.cc-size-guide)::backdrop { background: rgba(0, 0, 0, 0.6); }
:where(.cc-size-guide__header) {
	position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1em;
	padding: 16px 20px; background: inherit; border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}
:where(.cc-size-guide__title) { margin: 0; font-size: 1.25em; }
dialog.cc-size-guide button.cc-size-guide__close {
	position: relative; flex: none; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; cursor: pointer;
}
dialog.cc-size-guide button.cc-size-guide__close::before, dialog.cc-size-guide button.cc-size-guide__close::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor;
}
dialog.cc-size-guide button.cc-size-guide__close::before { transform: translate(-50%, -50%) rotate(45deg); }
dialog.cc-size-guide button.cc-size-guide__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
:where(.cc-size-guide__content) { padding: 20px; }
:where(.cc-size-guide__content) table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
:where(.cc-size-guide__content) :is(th, td) { padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(127, 127, 127, 0.2); background: none; text-align: left; }
:where(.cc-size-guide__content) > :last-child { margin-bottom: 0; }
/* [cc_size_guide chart="key" inline="yes"]: the chart in a page, no box padding. */
:where(.cc-size-guide-inline .cc-size-guide__content) { padding: 0; }