/**
 * Product Information Slide-Out Panel.
 *
 * Styles the two trigger rows on the product summary and the right-side
 * slide-out panel (overlay, header, tabs, content, responsive). Scoped to the
 * konte-pinfo-* class namespace so nothing else on the site is affected.
 */

/* -------------------------------------------------------------------------
 * Trigger rows
 *
 * The `.konte-pinfo-actions-row` block that used to live here (wishlist + share
 * on one row) was removed by the Add to Cart redesign: the wishlist button now
 * renders inside the cart form beside ADD, and share is hidden, so the wrapper
 * no longer exists. See css/add-to-cart-actions.css and AI_WORK_LOG.md 2026-07-16.
 * ---------------------------------------------------------------------- */

.returns-row
{
	margin-top:30px;
	display: flex;
    justify-content: space-between;
    align-items: center; /* optional */
    width: 100%; 
}

.returns-text
{
	color: var(--ink_text);

/* Body 12 */
font-family: var(--font2);
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.delivery-row
{
	 display: flex;
    gap: 20px; /* space between spans */
    align-items: center;
}

.delivery-method
{
 display:  inline-block;
 color: var(--ink_text);
font-family: var(--font2);
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.delivery-time
{
 display:  inline-block;
 color: var(--ink_text);
font-family: var(--font2);
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.delivery-price
{
 display:  inline-block;
}
.price-amount
{
color: var(--ink_text);
text-align: right;

font-family: var(--font2);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.price-note
{
color: var(--ink_text);
text-align: right;
font-family: var(--font2);
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: normal;
}


.konte-pinfo-triggers {
	/* No top divider — the reference stacks the titles on open whitespace,
	   separated from the gold Gallery Content line above by margin alone. */
	margin: 8px 0 0;
}

/*
 * First trigger row + compact rating (mobile only) — FALLBACK SLOT.
 *
 * The mobile rating's preferred home is the "PRODUCT TECH SPEC" row of the
 * short description (.konte-pdt-spec-row, css/product-rating.css). That row is
 * optional per-product content, so products without it render the rating here
 * instead. The two slots are mutually exclusive: PHP only builds one of them
 * per request (see konte_child_pdp_mobile_rating_claimed()).
 *
 * Cross-module: the rating markup and its typography belong to the pdp/rating
 * module (inc/product-rating.php, css/product-rating.css). Only the row layout
 * lives here, because this surface owns the row. On desktop the rating already
 * renders above the title inside .konte-pdp-meta-row, so the copy here is
 * hidden at every width and revealed below 768px — where that meta row is
 * itself hidden (css/product-rating.css:83).
 *
 * The rating is a sibling of the <button>, never a child: it must not fire the
 * delegated [data-konte-pinfo-open] handler in js/konte-product-info-panel.js.
 * PHP omits the wrapper entirely when the product has no reviews.
 */
.konte-pinfo-trigger-row .konte-product-rating {
	display: none;
}

@media (max-width: 767.98px) {
	.konte-pinfo-trigger-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	/* Overrides the base width:100% below, which would otherwise push the
	   rating off the row. */
	.konte-pinfo-trigger-row .konte-pinfo-trigger {
		width: auto;
		flex: 0 1 auto;
	}

	.konte-pinfo-trigger-row .konte-product-rating {
		display: inline-flex;
		flex: 0 0 auto;
	}
}

.konte-pinfo-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	/* Open vertical rhythm; no row divider (removed to match the reference). */
	padding: 8px 2px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	
	
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
	
	cursor: pointer;
	transition: color 0.2s ease, opacity 0.2s ease;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 16px;
	font-style: normal;
	
	line-height: normal;
}

.konte-pinfo-trigger:hover,
.konte-pinfo-trigger:focus {
	color: var(--ink_text);
	opacity: 0.7;
	background: none;
}

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

.konte-pinfo-trigger__label {
	flex: 1 1 auto;
}

/* Plus/minus glyph removed to match the reference (no icons on the headers).
   Hidden via CSS so the markup + click/expand behaviour stay intact. */
.konte-pinfo-trigger__icon {
	display: none;
}

.konte-pinfo-trigger__icon::before,
.konte-pinfo-trigger__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.konte-pinfo-trigger__icon::before {
	width: 12px;
	height: 1px;
}

.konte-pinfo-trigger__icon::after {
	width: 1px;
	height: 12px;
}

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

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

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

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

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

.konte-pinfo-panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 37.35%;
	max-width: 90vw;
	height: 100%;
	padding: 40px 35px 40px 35px;
	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-pinfo-overlay.is-open .konte-pinfo-panel {
	transform: translateX(0);
}

.konte-pinfo-panel__close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ink_text);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

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

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

/* Header */

.konte-pinfo-panel__head {
	margin-bottom: 26px;
}

.konte-pinfo-panel__eyebrow {
	margin: 0 0 6px;
	letter-spacing: 0.06em;
	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-pinfo-panel__title {
	margin: 0;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink_text);
	font-family: var(--font2) !important;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

/* Tabs */

.konte-pinfo-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--bg_clr1);
}

.konte-pinfo-tab {
	position: relative;
	margin: 0;
	padding: 0 0 12px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	
	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-pinfo-tab::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.konte-pinfo-tab:hover {
	color: var(--h_clr);
	background: none;
}

.konte-pinfo-tab.is-active {
	color: var(--ink_text);
}

.konte-pinfo-tab.is-active::after {
	transform: scaleX(1);
}

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

/* Tab content */

.konte-pinfo-body {
	flex: 1 1 auto;
}

.konte-pinfo-tabpanel {
	color: var(--ink_text);
	font-size: 0.875rem;
	line-height: normal;
}

/* Cross-fade in when activated (panels without [hidden] are visible). */
.konte-pinfo-tabpanel[hidden] {
	display: none;
}

.konte-pinfo-tabpanel.is-active {
	animation: konte-pinfo-fade 0.3s ease;
}

@keyframes konte-pinfo-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.konte-pinfo-tabpanel h1,
.konte-pinfo-tabpanel h2,
.konte-pinfo-tabpanel h3,
.konte-pinfo-tabpanel h4 {
	margin: 1.4em 0 0.5em;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.konte-pinfo-tabpanel h1:first-child,
.konte-pinfo-tabpanel h2:first-child,
.konte-pinfo-tabpanel h3:first-child,
.konte-pinfo-tabpanel h4:first-child {
	margin-top: 0;
}

.konte-pinfo-tabpanel p {
	margin: 30px 0px 0px 0px;
}

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

.konte-pinfo-tabpanel li {
	margin: 0 0 0.4em;
	color: var(--ink_text);
font-family: var(--font2);
font-size: 0.750rem !important;
font-style: normal;
font-weight: 300;
line-height: normal;

}

.konte-pinfo-tabpanel a {
	color: var(--ink_text);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Body scroll lock
 * ---------------------------------------------------------------------- */

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

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

@media (max-width: 600px) {
	.konte-pinfo-panel {
		width: 100%;
		max-width: 100%;
		padding: 17px 15px 25px;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.konte-pinfo-backdrop,
	.konte-pinfo-panel,
	.konte-pinfo-tab::after {
		transition: none;
	}

	.konte-pinfo-tabpanel.is-active {
		animation: none;
	}
}


@media (max-width: 767.98px) {

	.konte-pinfo-panel {
		width: 100%;
		max-width: 100%;
		padding: 1.82vh 15px 3.74vh !important;
	}

	.konte-pinfo-panel__eyebrow
	{
		    margin: 0 0 0.96vh;
	}

	.konte-pinfo-panel__close
	{
		transform: translateY(-5px);
	}

	.konte-pinfo-panel__head {
    margin-bottom: 6.14vh;
	}

	.konte-pinfo-tabs
	{
		gap: 22px;
		margin-bottom: 4.34vh;
	}

	.konte-pinfo-tabpanel p {
	margin: 2.54vh 0px 0px 0px;
	}

	.details-divider
	{
		    margin-top: 2.89vh;
			margin-bottom: 2.03vh;
	}

	.details-product-id
	{
		margin-top: 4.34vh;
	}
}