/* ============================================================
   Freaura — SIZE GUIDE popup (PDP)
   Trigger sits in the Size label row; modal is printed once per product.
   Loaded only on single product pages that actually have a chart.
   ============================================================ */

/* ---- Trigger ---- */
.frx-size-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
/* This is a <button>, so Astra's global button styling applies to it — including
   a grey background, a box-shadow, and a DARK background on :hover, which showed
   as a filled block behind the text. Every one of those has to be neutralised
   explicitly (and on :hover/:focus too, since Astra styles those states
   separately) for the trigger to read as a plain text link. */
.frx-size-guide-trigger,
.frx-size-guide-trigger:hover,
.frx-size-guide-trigger:focus,
.frx-size-guide-trigger:focus-visible,
.frx-size-guide-trigger:active {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0;
	border-radius: 0;
	outline: none;
	padding: 0 0 2px;
	margin: 0;
	line-height: 1.2;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 0.5px solid currentColor;
	transition: color 0.3s ease;
}
.frx-size-guide-trigger { color: var(--ink-soft) !important; }
/* Colour-only hover: no fill, no movement — the underline is currentColor so it
   follows the text. */
.frx-size-guide-trigger:hover,
.frx-size-guide-trigger:focus-visible { color: var(--brass) !important; }
/* Keyboard focus still needs to be visible, just not a filled block. */
.frx-size-guide-trigger:focus-visible { outline: 1px dotted var(--brass); outline-offset: 4px; }

/* ---- Modal ----
   The [hidden] rule needs !important and must come AFTER the display rule:
   `display: flex` on the element would otherwise override the browser's default
   `[hidden] { display: none }`, leaving the modal permanently visible. Declared
   in this order so closing actually closes. */
.frx-size-guide {
	position: fixed;
	inset: 0;
	z-index: 100000;   /* above the sticky header */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.frx-size-guide[hidden] { display: none !important; }
.frx-size-guide-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 9, 8, 0.55);
}
.frx-size-guide-dialog {
	position: relative;
	background: var(--cream);
	color: var(--ink);
	width: 100%;
	/* Wide enough for all 8 measurement columns without horizontal scrolling on a
	   normal desktop screen; still capped by the viewport on smaller ones. */
	max-width: min(1280px, calc(100vw - 48px));
	max-height: 88vh;
	overflow-y: auto;
	padding: 44px 44px 40px;
	box-shadow: 0 24px 70px rgba(10, 9, 8, 0.28);
	top: 20px;
}
.frx-size-guide-close {
	position: absolute;
	top: 14px; right: 18px;
	background: none; border: 0; padding: 6px;
	font-size: 26px; line-height: 1;
	color: var(--ink-soft); cursor: pointer;
	transition: color 0.3s ease;
}
.frx-size-guide-close:hover { color: var(--brass); }

.frx-size-guide-title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: none;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--ink);
}
.frx-size-guide-title .it { font-style: italic; color: var(--emerald); }
.frx-size-guide-sub {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-soft);
	/* No max-width: the 60ch cap was wrapping this onto two lines even though the
	   dialog is wide enough to hold it in one. */
	margin: 0 0 26px;
}

/* ---- Table ----
   Eight columns will not fit a phone, so the table scrolls inside its own
   container rather than forcing the dialog (or the page) to scroll sideways. */
.frx-size-guide-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 40px;
}
.frx-size-guide-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: 13px;
	white-space: nowrap;
}
/* Headers stay on ONE line. The longest is "6.Inside Trouser Length" (23 chars),
   which is what sets the widest column — so the header row gets tighter tracking,
   a slightly smaller size and less horizontal padding than the body cells to make
   it fit. Below the desktop breakpoint they are allowed to wrap again, since the
   table scrolls there anyway. */
.frx-size-guide-table thead th { white-space: nowrap; }
.frx-size-guide-table th,
.frx-size-guide-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 0.5px solid var(--line);
}
.frx-size-guide-table thead th {
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.02em;
	padding-left: 10px;
	padding-right: 10px;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	vertical-align: bottom;
}
/* The small numeral ties each column to its callout on the diagram below. */
.frx-size-guide-table thead th .num {
	/* The numeral ties each column to its callout on the diagram below. It carries
	   its own full stop and a small trailing gap, so no min-width column is
	   needed — that was padding single digits out and pushing the labels away. */
	display: inline;
	margin-right: 1px;
	color: var(--brass);
	font-weight: 600;
}
.frx-size-guide-table tbody th {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--ink);
}
/* The last row KEEPS its bottom border — dropping it left the table looking
   cropped, since there is nothing below to close it off. */
.frx-size-guide-table tbody tr:last-child th,
.frx-size-guide-table tbody tr:last-child td { border-bottom: 0.5px solid var(--line); }
.frx-size-guide-table tbody tr:hover td,
.frx-size-guide-table tbody tr:hover th { background: var(--cream-deep); }

/* ---- Measuring diagram, below the table ---- */
/* Flat, like the table: no rule above it and no padded container, so the diagram
   sits directly on the dialog rather than inside a second box. */
.frx-size-guide-figure {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	/* Astra styles `.ast-article-single figure` with a 30px drop shadow, and that
	   selector outranks a single class — hence !important. */
	box-shadow: none !important;
}
/* Matches the "How to measure" heading on the Size Guide page (.frx-legal h2:
   display face, italic, emerald) at a slightly smaller size for the modal. */
.frx-size-guide-figure figcaption {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.3;
	color: var(--emerald);
	text-align: left;
	margin-bottom: 20px;
}
.frx-size-guide-figure img {
	display: block;
	margin: 0 auto;      /* natural size, centred */
	max-width: 100%;
	height: auto;
	box-shadow: none;    /* the theme adds a shadow to content images; not wanted here */
	border: 0.5px solid var(--line);
}

/* Stop the page behind the modal scrolling while it is open. */
body.frx-size-guide-open { overflow: hidden; }

@media (max-width: 782px) {
	.frx-size-guide { padding: 12px; }
	.frx-size-guide-dialog { padding: 38px 20px 28px; max-height: 92vh; }
	.frx-size-guide-sub { font-size: 15px; margin-bottom: 20px; }
	.frx-size-guide-table { font-size: 12px; }
	.frx-size-guide-table th,
	.frx-size-guide-table td { padding: 10px 12px; }
	/* Wrapping is fine here: the table scrolls horizontally on small screens, so
	   forcing one line would only make the scroll longer. */
	.frx-size-guide-table thead th { white-space: normal; }
}