/**
 * Measurement & Size Guide — trigger + slide-out panel.
 *
 * The overlay/panel shell is a namespaced clone of css/product-info-panel.css
 * (which already ships the required 33.2% panel width), so the two drawers on a
 * variable PDP look and move identically. Everything is scoped to the
 * konte-sguide-* namespace so nothing else on the site is affected.
 */

/* -------------------------------------------------------------------------
 * Trigger (between the size selector and the add-to-cart button)
 * ---------------------------------------------------------------------- */

 .label_value
{
		margin-left:26px;
}
.label_mgt
	   {
		margin-left:15px;
	   }


.woocommerce div.product .woocommerce-variation-price
{
	    margin-bottom: 0px !important;
}

 .label_mg
 {
	font-weight: 700;
 }


.konte-sguide-trigger-wrap {
	margin: 2px 0 9px;
}

.konte-sguide-trigger {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--ink_text);
	font-size: 12px;
	
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	
	cursor: pointer;
	transition: opacity 0.2s ease;
	
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	font-family: var(--font2);
}

.konte-sguide-trigger:hover,
.konte-sguide-trigger:focus-visible {
	color: var(--ink_text);
	opacity: 0.6;
	background: none;
}

.konte-sguide-trigger:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 2px;
}

@media (max-width: 767.98px) {
	/* Mobile reaches the guide from inside the size bottom sheet instead — the
	   a.ksp-sizeguide link built by fillHead() in js/konte-pdp-size-summary.js, which
	   carries data-konte-sguide-open and so opens this same panel. The inline trigger
	   below the variations table is therefore a duplicate. Same breakpoint as
	   css/pdp-size-summary.css, where the size UI swaps to that sheet.

	   display:none ONLY, and on the wrapper rather than the button so its
	   margin (above) collapses with it and no gap is left under the variations table.
	   The button must stay in the DOM: fillHead() uses the presence of
	   .konte-sguide-trigger as the gate for showing the sheet's link at all, and reads
	   .konte-sguide-trigger__label for its text. Unhooking the PHP renderer would
	   remove the guide from mobile entirely.

	   The panel itself (wp_footer, .konte-sguide-overlay) is untouched. */

	   

	.konte-sguide-bottom
	{
		margin-bottom: 38px;
	}

	.label_value
	{
		margin-left: 24px;
	}

	.label_mgt
	{
		    margin-left: 17px;
	}

	.konte-sguide-image
	{
		padding: 1px !important;
		margin: 0 0 36px !important;
	}

	.konte-sguide-howto
	{
		    margin-top: 41px !important;
			margin-bottom: 18px !important;
	}
	.konte-sguide-table-wrap
	{
		margin-bottom: 33px !important;
	}

	.konte-sguide-table td
	{
		padding-top: 14px !important;
	}

	.konte-sguide-sizes
	{
		margin-bottom: 15px !important;
	}

	.konte-sguide-panel
	{
		        padding-top: 76px !important;
	}

	.konte-sguide-article
	{
		margin-bottom: 34px !important;
	}

	.konte-sguide-trigger-wrap {
		display: none;
	}

	.konte-sguide-system
	{
		margin-bottom: 15px !important;
	}

	.konte-sguide-size
	{
	padding: 11px 24px 29px 11px !important;
	}

	.konte-sguide-units
	{
		gap:15px !important;
	}
}

/* -------------------------------------------------------------------------
 * Overlay + slide-out panel
 * ---------------------------------------------------------------------- */

.konte-sguide-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

.konte-sguide-overlay.is-open {
	visibility: visible;
	pointer-events: auto;
}

.konte-sguide-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.konte-sguide-overlay.is-open .konte-sguide-backdrop {
	opacity: 1;
}

.konte-sguide-panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 33.2%;
	max-width: 90vw;
	height: 100%;
	padding: 40px 40px 40px;
	background: var(--bg_clr1);
	box-shadow: -6px 0 30px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.konte-sguide-overlay.is-open .konte-sguide-panel {
	transform: translateX(0);
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.konte-sguide-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 34px;
}

.konte-sguide-panel__title {
	margin: 0;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink_text);
	font-family: var(--font2) !important;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-sguide-panel__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: -6px -8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ink_text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.konte-sguide-panel__close:hover {
	opacity: 0.6;
	background: none;
}

.konte-sguide-panel__close:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 2px;
}

.konte-sguide-panel__body {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------------
 * ARTICLE + size-system row
 * ---------------------------------------------------------------------- */

.konte-sguide-article {
	margin: 0 0 30px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-sguide-system {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.konte-sguide-system__label {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* Unit toggle */

.konte-sguide-units {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.konte-sguide-unit-btn {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease;
	color: var(--h_clr);
	font-family: var(--font2);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-sguide-unit-btn:hover {
	color: #555;
	background: none;
}

.konte-sguide-unit-btn.is-selected {
	color: var(--ink_text);
}

.konte-sguide-unit-btn:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Size selector
 * ---------------------------------------------------------------------- */

.konte-sguide-sizes {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin-bottom: 34px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.konte-sguide-size {
	flex: 1 1 0;
	min-width: 58px;
	margin: 0 0 0 -1px;
	padding: 16px 4px;
	border: 1px solid var(--b_clr);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--h_clr);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	/* Keep full size names ("XX-Large") on a single line; the row scrolls
	   horizontally (overflow-x on .konte-sguide-sizes) if they ever exceed it. */
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.konte-sguide-size:first-child {
	margin-left: 0;
}

.konte-sguide-size:hover {
	color: #555;
	background: none;
}

/* The selected swatch draws a full box; the -1px margins collapse the shared
   borders, so lifting it above its neighbours keeps all four sides visible. */
.konte-sguide-size.is-selected {
	position: relative;
	z-index: 1;
	border-color: var(--ink_text);
	color: var(--ink_text);
}

.konte-sguide-size:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
 * Measurement table
 * ---------------------------------------------------------------------- */

.konte-sguide-table-wrap {
	margin-bottom: 34px;
	overflow-x: auto;

	/* The long-hand, not the shorthand: `overscroll-behavior: contain` here
	   would trap a trackpad's vertical component inside the table instead of
	   letting it scroll the panel. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

/* Fills the panel while it fits, then grows and scrolls rather than squashing. */
.konte-sguide-table {
	width: 100%;
	min-width: max-content;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 13px;
}

.konte-sguide-table th,
.konte-sguide-table td {
	padding: 13px 14px 13px 0;
	border: 0;
	background: none;
	text-align: left;
	white-space: nowrap;
}

.konte-sguide-table thead th {
	padding-bottom: 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.konte-sguide-table__corner {
	width: 40%;
}

.konte-sguide-table__label {
	white-space: normal;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* Unit toggle: the server renders both units and CSS hides one, so switching
   is a single attribute flip on the table with no reflow of content. */
.konte-sguide-table[data-unit="cm"] .konte-sguide-v[data-unit="in"],
.konte-sguide-table[data-unit="in"] .konte-sguide-v[data-unit="cm"] {
	display: none;
}

/* Selected column reads black and bold; the rest grey out. */
.konte-sguide-cell {
	color: var(--h_clr);
	transition: color 0.2s ease;
	color: var(--h_clr);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-sguide-cell.is-selected {
	color: var(--ink_text);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Three-column window
 *
 * js/konte-measurement-size-guide.js rewrites the server-rendered table into
 * three fixed slot columns (selected size, plus one either side) and adds
 * .is-windowed. Everything below is scoped to that class so the no-JS table —
 * every column, scrolling horizontally — keeps the layout above untouched.
 *
 * The slots never move; their contents slide. The measurement label column is
 * deliberately outside all of this and stays put.
 * ---------------------------------------------------------------------- */

.konte-sguide-table.is-windowed {
	/* Three columns always fit, so drop the max-content sizing that exists to
	   let the full table overflow .konte-sguide-table-wrap. */
	min-width: 0;
	table-layout: fixed;
}

.konte-sguide-table.is-windowed .konte-sguide-table__corner {
	width: 40%;
}

.konte-sguide-table.is-windowed .konte-sguide-slot {
	width: 20%;
}

/* Under table-layout:fixed the declared width IS the column width, so the cell
   padding above would otherwise be added on top of percentages that already sum
   to 100 and squeeze the columns back out of proportion. */
.konte-sguide-table.is-windowed th,
.konte-sguide-table.is-windowed td {
	box-sizing: border-box;
}

.konte-sguide-slide {
	display: block;
	position: relative;
	/* Clips the value entering and the one leaving. */
	overflow: hidden;
}

/* The two faces swap roles on every move — the one that slides in becomes the
   resting one and the one that slides out parks off-screen holding the old
   value, ready to be the next arrival. Nothing is reset when the animation
   ends, which is what keeps the last frame clean.

   Deliberately no `transition` here: the movement is driven by Web Animations
   in konte-measurement-size-guide.js, which states both ends of the slide as
   keyframes so the entering side cannot depend on where a face was last
   parked. SLIDE_MS / SLIDE_EASING there are the timing. */
.konte-sguide-slide__face {
	display: block;
	transform: translateX(0);
}

/* The first face stays in flow so the cell keeps its height whichever of the
   two is showing; the second overlays it. Neither can be "the" resting face in
   CSS, because which one that is alternates. */
.konte-sguide-slide__face + .konte-sguide-slide__face {
	position: absolute;
	inset: 0;
}

/* -------------------------------------------------------------------------
 * Copy blocks + image
 * ---------------------------------------------------------------------- */

 .konte-sguide-description
 {
	color: var(--ink_text);
font-family: var(--font2);
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: normal;
 }


.konte-sguide-bottom {
	color: var(--ink_text);
	font-size: 13px;
	line-height: 1.7;
}

.konte-sguide-description p,
.konte-sguide-bottom p {
	margin: 0 0 1em;
}

.konte-sguide-description p:last-child,
.konte-sguide-bottom p:last-child {
	margin-bottom: 0;
}

.konte-sguide-description a,
.konte-sguide-bottom a {
	color: var(--ink_text);
	text-decoration: underline;
}

.konte-sguide-bottom ul,
.konte-sguide-bottom ol {
	margin: 0 0 1em 1.1em;
	padding: 0;
}

.konte-sguide-bottom li {
	margin: 0 0 0.5em;
}

.konte-sguide-howto {
	margin: 34px 0 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink_text);
font-family: var(--font2) !important;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.konte-sguide-image {
	margin: 0 0 30px;
	padding: 18px;
	border: 1px solid #e7e2da;
	background: #fff;
	text-align: center;
}

.konte-sguide-image__img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Body scroll lock
 *
 * Deliberately NOT the pinfo panel's class: sharing it would couple two
 * independent drawers, so closing either would unlock scrolling for both.
 * ---------------------------------------------------------------------- */

body.konte-sguide-noscroll {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.konte-sguide-panel {
		width: 100%;
		max-width: 100%;
		padding: 32px 24px;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.konte-sguide-backdrop,
	.konte-sguide-panel,
	.konte-sguide-cell,
	.konte-sguide-size,
	.konte-sguide-unit-btn {
		transition: none;
	}
}