/**
 * Reviews & Ratings section + submission popup (variable products).
 */



span.konte-review-modal__eyebrow
{
	color: var(--ink_text);
}

.konte-premium-reviews {
	margin: 0 0 4rem;
	background: #fff;
	color: var(--ink_text);
}

.konte-premium-reviews__shell {
	max-width: 100%;
	padding: 0 1.5rem;
}

.konte-premium-reviews__title {
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #e2e2df;
	color: var(--ink_text);
	font-family: var(--font1);
	font-size: 40px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

/* ---------------------------------------------------------------------------
 * Header row + mobile panel chrome
 *
 * The heading is a <button> so it can open the mobile panel. The reset below
 * keeps it rendering exactly like the plain heading text it replaced, and the
 * ★ average / × / "See more reviews" controls stay hidden until the mobile
 * block switches the section into collapsible mode. Desktop is unchanged: the
 * header div collapses onto the <h2>'s own box because its siblings are
 * display:none.
 * ------------------------------------------------------------------------ */

.konte-premium-reviews__toggle {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--font1);
	font-size: 40px;
	font-style: normal;
	font-weight: 500;
	color: var(--ink_text);
	text-align: inherit;
	cursor: default;
}

.konte-premium-reviews__toggle-icon,
.konte-premium-reviews__header-summary,
.konte-premium-reviews__close,
.konte-premium-reviews__see-more {
	display: none;
}

/* Shown only inside the mobile panel; styling mirrors the "+ Show N More"
   control in css/shop-filter-sidebar.css. */
.konte-premium-reviews__see-more {
	width: 100%;
	margin: 1.5rem 0 0;
	padding: 0.75rem 0 1.25rem;
	border: 0;
	/* Divider between the clamped list and the Rating block, as in the reference. */
	border-bottom: 1px solid var(--b_clr);
	background: none;
	-webkit-appearance: none;
	appearance: none;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

/* Body scroll lock while the reviews panel is open. Kept separate from
   .konte-review-noscroll so the submission modal, which can open on top of the
   panel, does not release the panel's lock when it closes. */
.konte-reviews-noscroll {
	overflow: hidden;
}

/* Two-area layout: reviews list + rating sidebar */
.konte-premium-reviews__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3rem;
	align-items: start;
}

/* ---------------------------------------------------------------------------
 * Left: review cards
 * ------------------------------------------------------------------------ */



 @media (max-width: 767.98px) {
	/* mobile-only rules here */

	/* ---------------------------------------------------------------------
	 * Collapsible panel
	 *
	 * One DOM, three states. Collapsed: heading row only. .is-open: the shell
	 * becomes a full-screen overlay showing the first two cards, "See more
	 * reviews", Rating and Submit. .is-open.is-all-open: the same overlay with
	 * every card and no sidebar. The --collapsible class is added by JS, so if
	 * the script fails the section still renders in full, inline.
	 *
	 * There is deliberately no max-height on the card list here: an inner
	 * scroll box inside a scrolling overlay traps the user's swipe. The card
	 * count is clamped with :nth-child instead.
	 * ------------------------------------------------------------------ */

	 .konte-review-modal__submit
	 {
		    padding: 0rem 1.5rem;
	 }

	.konte-premium-reviews__bars
	{
		    margin: 0 0 2.625rem !important;
	}

	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__shell
	{
		        padding-bottom: 3rem !important;
	}

	.konte-premium-reviews__star-picker
	{
		gap: 0.875rem;
	}

	.konte-premium-reviews__see-more
	{
		    margin: 0rem 0 0 !important;
    padding: 0rem 0 1.25rem !important;
	}


	.konte-premium-reviews__bar-row
	{
		    margin-bottom: 1.25rem;
			gap: 0.8125rem !important;
	}
.konte-premium-reviews__rating-head
{
	    margin-bottom: 2.1875rem !important;
	margin-top: 1.9rem;
}



.commentlist.konte-premium-reviews__list > li:nth-child(2) {
     border-bottom: none;
}

.commentlist.konte-premium-reviews__list > li:last-child {
    border: none;
}

	.konte-review-card
	{
		padding: 2.4rem 0 !important;
	}


	 .konte-review-card__actions{
		    margin-top: 1.3rem !important;
	 }

	 .konte-review-card__rating{
		    margin: 0 0 0.815rem;
	 }

	.konte-review-card__inner {
        grid-template-columns: 1fr;
        gap: 1.0rem;
    }
	.konte-review-card__meta-row
	{
		gap: 0.23em 0.35em !important;
	}
	
	.konte-review-card__author
	{
		    margin: 0 0 1.13rem !important;
	}

	.konte-premium-reviews__see-more
	{
		font-size: 12px;
	}

	.konte-premium-reviews__toggle
	{
		color:var(--ink_text);
		font-family: var(--font1);
		font-size: 28px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.476px;
	}



	 .konte-premium-reviews
	 {
		border-top: 1px solid var(--b_clr);
	 }
	 
	 .konte-premium-reviews__title
	{	
		border-bottom: 1px solid transparent;
		padding-top:20px;
	}		


	 .konte-premium-reviews__title
	 {
		margin: 0 0 0 0;
	 }

	 .konte-premium-reviews
	 {
		margin: 0 0 0 0;
	 }

	.konte-premium-reviews--collapsible .konte-premium-reviews__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		cursor: pointer;
	}

	.konte-premium-reviews--collapsible .konte-premium-reviews__toggle-icon {
		display: block;
		flex: 0 0 auto;
		width: 0.55rem;
		height: 0.55rem;
		margin-right: 0.35rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-25%) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.konte-premium-reviews--collapsible .konte-premium-reviews__toggle[aria-expanded="true"] .konte-premium-reviews__toggle-icon {
		transform: translateY(10%) rotate(225deg);
	}

	/* Collapsed: heading row only. */
	.konte-premium-reviews--collapsible #konte-premium-reviews-panel {
		display: none;
	}

	/* Open: promote the shell to a full-screen panel. 99990 keeps it below the
	   submission modal overlay (z-index: 100000), which opens from inside it. */
	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__shell {
		position: fixed;
		inset: 0;
		z-index: 99990;
		/* .konte-container carries 5px side margins, which would shrink the
		   fixed box and leave the page showing through at both edges. */
		margin: 0;
		max-width: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: var(--bg_clr1);
		padding: 1.5rem 1rem 2.5rem;
	}

	.konte-premium-reviews--collapsible.is-open #konte-premium-reviews-panel {
		display: block;
	}

	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__header {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
	}

	/* No rule under the panel header — the reference runs the first review card
	   straight beneath it. The collapsed heading keeps its divider. */
	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__title {
		flex: 1 1 auto;
		min-width: 0;
		margin-bottom: 1.3rem;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* The chevron is redundant once the panel is open — the × closes it. */
	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__toggle-icon {
		display: none;
	}

	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__toggle {
		cursor: default;
	}

	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__header-summary {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		flex: 0 0 auto;
		margin-top: 1.6rem;
		color: var(--ink_text);
		font-family: var(--font2);
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
	}

	.konte-premium-reviews--collapsible.is-open .konte-premium-reviews__close {
		display: block;
		flex: 0 0 auto;
		width: 2.25rem;
		height: 2.25rem;
		margin-top: 1.08rem;
		padding: 0;
		border: 0;
		background: none;
		-webkit-appearance: none;
		appearance: none;
		color: var(--ink_text);
		font-size: 1.75rem;
		line-height: 1;
		cursor: pointer;
	}

	/* First panel: only the first two cards, then the see-more button. */
	.konte-premium-reviews--collapsible.is-open:not(.is-all-open) .konte-review-card:nth-child(n+3) {
		display: none;
	}

	.konte-premium-reviews--has-more.konte-premium-reviews--collapsible.is-open:not(.is-all-open) .konte-premium-reviews__see-more {
		display: block;
	}

	/* Second panel: every card, no Rating/Submit sidebar. The header average stays —
	   it is the same star + score the first panel shows, in the same slot. */
	.konte-premium-reviews--collapsible.is-open.is-all-open .konte-premium-reviews__sidebar {
		display: none;
	}
 }

 @media (min-width: 1200px) {

    /* desktop-only rules here */
.konte-premium-reviews__scroll {
	/* Show ~2 cards; the rest scroll vertically. */
	max-height: 22rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 0.75rem;
}



}



.konte-premium-reviews__scroll:focus {
	outline: none;
}

.konte-premium-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.konte-review-card {
	margin: 0;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--b_clr);
}

.konte-review-card:first-child {
	padding-top: 0;
}

.konte-review-card__inner {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 1.75rem;
}

/* Left meta column */
.konte-review-card__author {
	margin: 0 0 0.75rem;
	text-transform: uppercase;
	color:var(--ink_text);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* The label/value spans below set their own 12px/var(--ink_text), so this row deliberately
   carries only layout. Spacing between the pair is explicit rather than relying on the
   incidental whitespace between the two tags, and the 0.15em row-gap keeps the pair
   readable when a long value wraps inside the 150px meta column. */
.konte-review-card__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.35em;
	margin: 0 0 0.25rem;
	line-height: 1.4;
}

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

.konte-review-card__meta-value {
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* Right content column */

/* Five Unicode glyphs (filled ★ up to the rating, hollow ☆ after). Deliberately
   not .star-rating: that class is redefined by the parent's woocommerce.css for
   its SVG-sprite markup and would impose font-size:12px + overflow:hidden. */
.konte-review-card__rating {
	display: flex;
	width: fit-content;
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	line-height: 1;
}

.konte-review-card__star {
	color: var(--ink_text);
}

.konte-review-card__title {
	display: block;
	margin: 0 0 0.15rem;
	font-size: 0.875rem;
	font-weight: 700;
	color:var(--ink_text);
	font-family: var(--font2);
	font-style: normal;
	line-height: normal;
}

.konte-review-card__date {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.750rem;
	color: var(--h_clr);
	font-family: var(--font2);
	
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-review-card__content {
	font-size: 0.875rem;
	color: var(--ink_text);
	font-family: var(--font2);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-review-card__content p:last-child {
	margin-bottom: 0;
}

/* Helpful / report action row */
.konte-review-card__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 0.85rem;
	font-size: 0.75rem;
	color: #6b6b6b;
}

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

.konte-review-card__vote {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.75rem;
	color: var(--ink_text);
	cursor: pointer;
}

.konte-review-card__vote:disabled {
	cursor: default;
	opacity: 0.6;
}

/* Voted state: the chosen thumb fills solid black. A CSS `fill` outranks the
   inline fill="#fff" presentation attribute on the SVG, so the class alone
   repaints the glyph — no markup change needed. */
.konte-review-card__vote.is-voted .konte-review-card__vote-icon svg {
	fill: var(--ink_text);
}

/* Voting disables both buttons, so the rule above would otherwise be dimmed to
   grey by :disabled. The chosen thumb stays at full strength; only the
   unchosen one dims. */
.konte-review-card__vote.is-voted:disabled {
	cursor: default;
	opacity: 1;
}

.konte-review-card__vote-icon {
	display: inline-flex;
	line-height: 1;
}

.konte-review-card__vote-icon svg {
	width: 1rem;
	height: 1rem;
	display: block;
	    fill: var(--bg_clr1) !important;
}

.konte-review-card__vote-icon--down svg {
	transform: rotate(180deg);
}

.konte-review-card__report {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.75rem;
	color: var(--ink_text);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	font-family: var(--font2);

}

.konte-review-card__reported {
	font-size: 0.75rem;
	color: #2e7d32;
}

/* Empty state */
.konte-premium-reviews__empty {
	margin: 0;
	padding: 1.5rem 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink_text);
}

/* ---------------------------------------------------------------------------
 * Right: rating sidebar
 * ------------------------------------------------------------------------ */

.konte-premium-reviews__rating-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.konte-premium-reviews__rating-title {
	font-size: 0.875rem;
	color: var(--ink_text);
	font-family: var(--font2);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-premium-reviews__rating-summary {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	font-size: 0.750rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.konte-premium-reviews__rating-star {
	color: var(--ink_text);
}

.konte-premium-reviews__average {
	font-size: 0.750rem;
	color: var(--ink_text);
	font-family: var(--font2);
	
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-premium-reviews__count-link {
	
	color:var(--h_clr);
	font-family: var(--font2);
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-premium-reviews__bars {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.konte-premium-reviews__bar-row {
	display: grid;
	grid-template-columns: 4.25rem 1fr 1.5rem;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
}

.konte-premium-reviews__bar-label {
	white-space: nowrap;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-premium-reviews__bar-track {
	display: block;
	height: 14px;
	background: #f0f0ee;
	border: 1px solid #d9d9d6;
	position: relative;
	overflow: hidden;
}

.konte-premium-reviews__bar-fill {
	display: block;
	height: 100%;
	background: var(--ink_text);
	min-width: 0;
	transition: width 0.3s ease;
}

.konte-premium-reviews__bar-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.750rem;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-premium-reviews__no-rating {
	margin: 0 0 2rem;
	font-size: 0.8125rem;
	color: #6b6b6b;
}

/* Submit-a-review block */
.konte-premium-reviews__submit {
	text-align: center;
}

/* The title is a <button> that opens the submission modal. The reset below keeps
   it rendering exactly like the <span> it replaced; the underline appears on
   hover/focus only, so the resting design is unchanged. */
.konte-premium-reviews__submit-title {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	text-align: inherit;
	text-decoration: none;
	cursor: pointer;
	font-size: 0.875rem;
	text-transform: uppercase;
	color: var(--ink_text);
	font-family: var(--font2);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	transition: color 0.2s ease;
}

.konte-premium-reviews__submit-title:hover,
.konte-premium-reviews__submit-title:focus-visible {
	color: var(--ink_text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.konte-premium-reviews__submit-title:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 3px;
}

/* fit-content + gap: 0 + padded buttons — see the note on .konte-review-modal__stars below. The row
   must contain no pixel that is not a star, or the cumulative hover flickers. `auto` side margins
   centre the shrink-to-fit row, which justify-content no longer can. */
.konte-premium-reviews__star-picker {
	display: flex;
	gap: 0;
	width: fit-content;
	margin: 15px auto 0;
}

/* Deliberately identical to the modal picker (.konte-review-modal__star, further down this file) —
   the two pickers are the same control in two places, so treat those rules as the source of truth
   and keep this block in step with them. The button is the hit area; its inner span is the box. */
.konte-premium-reviews__star-btn {
	padding: 0 0.25rem;
	border: 0;
	background: none;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.konte-premium-reviews__star-btn > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--b_clr);
	background: var(--bg_clr1);
	color: #d0d0d0;
	border-radius: 12px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Keyboard focus marks a single button, so it stays out of the cumulative rules below. */
.konte-premium-reviews__star-btn:focus-visible > span {
	border-color: var(--ink_text);
	color: var(--ink_text);
}

/* Cumulative hover: pointing at star N fills 1..N. The row-level rule fills every star, then the
   sibling rule hands the stars after the cursor their base colours back. */
@media (hover: hover) {
	.konte-premium-reviews__star-picker:hover .konte-premium-reviews__star-btn > span {
		background: var(--ink_text);
		border-color: var(--ink_text);
		color: #fff;
	}

	.konte-premium-reviews__star-btn:hover ~ .konte-premium-reviews__star-btn > span {
		background: var(--bg_clr1);
		border-color: var(--b_clr);
		color: #d0d0d0;
	}
}

.konte-premium-reviews__submit-btn {
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--ink_text);
	background: var(--ink_text);
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Submission modal
 * ------------------------------------------------------------------------ */

.konte-review-noscroll {
	overflow: hidden;
}

.konte-review-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.konte-review-modal-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}

.konte-review-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 25, 0.5);
}

.konte-review-modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(1080px, 94vw);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--bg_clr1);
	border: 1px solid var(--b_clr);
	border-radius: 20px;
	padding: 2.75rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.konte-review-modal__close {
	position: absolute;
	top: 0.65rem;
	right: 0.85rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink_text);
	cursor: pointer;
}

.konte-review-modal__close:hover {
	color: var(--ink_text);
}

.konte-review-modal__notice {
	margin: 0;
	padding: 1rem 0;
	font-size: 0.9375rem;
}

.konte-review-modal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 3rem;
	align-items: stretch;
}

/* Left column (form fields) */
.konte-review-modal__eyebrow {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--font2);
}

.konte-review-modal__rating-block {
	margin-bottom: 1.25rem;
}

/* The row hugs its buttons (fit-content) and the buttons tile edge to edge (gap: 0, the spacing
   carried as button padding instead). That is deliberate and load-bearing: the cumulative hover
   below fills on *container* :hover and un-fills on *button* :hover, so any pixel inside the row
   that is not on a button would fill all five stars at once. Re-introducing `gap` here, or letting
   the row stretch past its buttons, brings back the flicker when the cursor crosses between two
   stars or leaves the row. */
.konte-review-modal__stars {
	display: flex;
	gap: 0;
	width: fit-content;
	/* Cancels the first button's left padding so star 1 stays flush with the label above. */
	margin-left: -0.2rem;
}

/* The button is the hit area — the visible box lives on its inner span. */
.konte-review-modal__star {
	padding: 0 0.2rem;
	border: 0;
	background: none;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.konte-review-modal__star > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--b_clr);
	border-radius: 12px;
	background: var(--bg_clr1);
	color: #d0d0d0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.konte-review-modal__star.is-selected > span {
	background: var(--ink_text);
	border-color: var(--ink_text);
	color: #fff;
}

/* Cumulative hover: pointing at star N previews 1..N in the selected style. The sibling rule is
   specificity 0,4,0 so it also un-fills an already selected star that sits after the cursor. */
@media (hover: hover) {
	.konte-review-modal__stars:hover .konte-review-modal__star > span {
		background: var(--ink_text);
		border-color: var(--ink_text);
		color: #fff;
	}

	.konte-review-modal__stars .konte-review-modal__star:hover ~ .konte-review-modal__star > span {
		background: var(--bg_clr1);
		border-color: var(--b_clr);
		color: #d0d0d0;
	}
}

.konte-review-modal__rating-text {
	margin: 0.6rem 0 0;
	min-height: 1.1em;
	font-size: 0.75rem;
	color: var(--ink_text);
	font-family: var(--font2);
}

/* Set by the submit gate when no star was picked; cleared as soon as one is. */
.konte-review-modal__rating-text.is-error {
	color: #b3261e;
	font-weight: 700;
}

.konte-review-field {
	margin: 0 0 1.1rem;
}

.konte-review-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink_text);
	font-family: var(--font2);
}

/* `select` is in this list because the Size Purchased field is a <select> (it offers
   the product's real sizes so the value maps onto the Fit Summary aggregator). It was
   converted from a text input on 2026-07-20 without the selector list being extended,
   which left it with native browser chrome — notably no width:100%, so it shrank to
   content width and sat ragged beside its three siblings in the field group. */
.konte-review-field input[type="text"],
.konte-review-field input[type="email"],
.konte-review-field input[type="number"],
.konte-review-field select,
.konte-review-field textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--b_clr);
	border-radius: 12px;
	background: var(--bg_clr1);
	font-size: 0.875rem;
	color: var(--ink_text);
	font-family: var(--font2);
}

.konte-review-field input[type="text"]:focus,
.konte-review-field input[type="email"]:focus,
.konte-review-field input[type="number"]:focus,
.konte-review-field select:focus,
.konte-review-field textarea:focus {
	border-color: var(--ink_text);
	outline: none;
}

/* A native select does not match an input even given identical box tokens, so the
   remaining differences are normalised here rather than in the shared rule above. */
.konte-review-field select {
	/* WebKit otherwise ignores background and border-radius on a select entirely. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Selects do not inherit the page font, so without this the options render in the
	   OS UI font beside four fields that don't. */
	font-family: inherit;
	/* `normal`, not a unitless ratio — it makes the select's box resolve to exactly the
	   same height as the sibling inputs from the same padding. */
	line-height: normal;
	cursor: pointer;
	/* Chevron as an inline data: URI — no extra asset, no extra request. Stroke
	   #161619 to match the control's text colour. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23161619' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	/* Clears the chevron so a long size label never runs under it. */
	padding-right: 2.25rem;
}

/* The placeholder option, greyed to match .konte-review-field input::placeholder. The
   field carries no `required` attribute, so :invalid is unavailable here. */
.konte-review-field select:has(option[value=""]:checked) {
	color: #a5a5a5;
}

/* …but the options themselves stay full-strength in the open dropdown. */
.konte-review-field select option {
	color: var(--ink_text);
}

.konte-review-field textarea {
	resize: vertical;
	min-height: 6rem;
}

.konte-review-field input::placeholder,
.konte-review-field textarea::placeholder {
	color: #a5a5a5;
}

.konte-review-field .required {
	color: #c0392b;
}

/* Compact grid for age/height/size/body */
.konte-review-field-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

/* Last row of the pair grid ends the left column: drop its trailing margin so the
   column box stops exactly at the Body Type input, which is what the Submit button
   in the right column aligns its bottom edge to. Restored at <=575px, where the
   grid collapses to one column and Size Purchased needs the spacing again. */
.konte-review-field-group .konte-review-field--size,
.konte-review-field-group .konte-review-field--body {
	margin-bottom: 0;
}

/* Terms */
.konte-review-field--terms {
	margin-top: 0.4rem;
}

.konte-review-modal__terms-label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink_text);
}

.konte-review-modal__terms-label input {
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.konte-review-modal__terms-label a {
	color: var(--ink_text);
	text-decoration: underline;
}

/* Right column (image + fit + terms + submit). The gap is 1.25rem rather than the
   1.5rem used elsewhere: with the consent block now in this column the two columns
   are within a few pixels of each other, and the tighter gap keeps the left column
   the taller of the two, which is what lets Submit align to the Body Type field. */
.konte-review-modal__aside {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* The consent block sits in the space between the fit scale and Submit. Auto margins
   on both sides absorb the column's leftover height in two equal shares, so the block
   is centred in that space and Submit lands flush with the bottom of the grid row
   (i.e. level with the bottom of the Body Type field in the left column). */
.konte-review-modal__aside .konte-review-field--terms {
	margin: auto 0;
}

.konte-review-modal__media {
	background: #fff;
	border: 1px solid #ececea;
	border-radius: 16px;
	padding: 1.25rem;
	text-align: center;
}

/* The card hugs the image's natural aspect ratio: a square photo yields a
   square card (no empty bands), while a portrait "Review Popup Image" yields a
   tall portrait card to match the reference — no cropping in either case. */
.konte-review-modal__media img,
.konte-review-modal__img {
	display: block;
	width: 100%;
	height: auto;
}

.konte-review-modal__fit-title {
	display: block;
	margin-bottom: 0.85rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color:var(--ink_text);
	font-family: var(--font2);
}

.konte-review-modal__fit-scale {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	position: relative;
}

.konte-review-modal__fit-scale::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: #cfc9bd;
	z-index: 0;
}

.konte-review-modal__fit-option {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	flex: 1;
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink_text);
	cursor: pointer;
	text-align: center;
	font-family: var(--font2);
}

.konte-review-modal__fit-option input {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--ink_text);
	border-radius: 50%;
	background: #f7f3ec;
	cursor: pointer;
	transition: background 0.15s ease;
}

.konte-review-modal__fit-option input:checked {
	background: var(--ink_text);
	box-shadow: inset 0 0 0 0px #f7f3ec;
}

.konte-review-modal__fit-option input:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 2px;
}

.konte-review-modal__fit-option input:checked + span {
	color: var(--ink_text);
	font-weight: 700;
	white-space: nowrap
}

/* Bottom pin is now carried by the consent block's auto margins above; Submit simply
   follows it at the column gap. */
.konte-review-modal__submit-wrap {
	margin-top: 0;
}

.konte-review-modal__submit {
	width: 100%;
	padding: 1rem 1.5rem;
	border: 1.5px solid var(--ink_text);
	border-radius: 14px;
	background: transparent;
	color: var(--ink_text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	font-family: var(--font2);
}

.konte-review-modal__submit:hover,
.konte-review-modal__submit:focus-visible {
	background: var(--ink_text);
	color: #fff;
}

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

@media (max-width: 991px) {
	.konte-premium-reviews__layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.konte-premium-reviews__sidebar {
		max-width: 420px;
	}
}

@media (max-width: 767px) {
	/* Single column; flatten the aside so its children reorder around the form:
	   image -> fit -> form fields -> submit (submit at the very bottom). */
	.konte-review-modal__grid {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.konte-review-modal__aside {
		display: contents;
	}

	.konte-review-modal__media {
		order: 1;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}

	.konte-review-modal__fit {
		order: 2;
	}

	.konte-review-modal__main {
		order: 3;
	}

	/* The aside is `display: contents` here, so the consent block is a direct flex child
	   of the grid: it needs an explicit order (it would otherwise default to 0 and jump
	   to the top) and no auto margins, which have no space to absorb in this flow. */
	.konte-review-modal__aside .konte-review-field--terms {
		order: 4;
		margin: 0;
	}

	.konte-review-modal__submit-wrap {
		order: 5;
		margin-top: 0;
	}

	.konte-review-modal {
		padding: 2.5rem 1.25rem 1.75rem;
	}
}

@media (max-width: 575px) {
	.konte-premium-reviews__shell {
		padding: 0 1rem;
	}

	.konte-review-card__inner {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.konte-review-field-group {
		grid-template-columns: 1fr;
	}

	/* Single column now, so Size Purchased is no longer on the closing row — it needs
	   its normal field spacing back above Body Type. */
	.konte-review-field-group .konte-review-field--size {
		margin-bottom: 1.1rem;
	}

	.konte-premium-reviews__title {
		font-size: 1.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.konte-review-modal-overlay,
	.konte-premium-reviews__bar-fill,
	.konte-review-modal__star > span,
	.konte-premium-reviews__star-btn > span,
	.konte-premium-reviews__submit-title,
	.konte-premium-reviews__toggle-icon {
		transition: none;
	}
}