/* =====================================================================
   KZT Product Designer — Product Tab widget
   ===================================================================== */

.kzt-pd-tabs {
	--kzt-pt-accent: var( --kzt-pd-cta, #f19b3b );
	--kzt-pt-head-bg: #111827;
	--kzt-pt-head-color: #ffffff;
	--kzt-pt-line: #ececf0;
	--kzt-pt-text: #1f2328;
	--kzt-pt-muted: #6b7280;
	color: var( --kzt-pt-text );
}

/* ---------- Header + nav ---------- */
.kzt-pt-head {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	border: 1px solid var( --kzt-pt-line );
	border-radius: var( --kzt-pd-radius, 14px );
	overflow: hidden;
	margin-bottom: 18px;
	background: #fff;
}

.kzt-pt-title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var( --kzt-pt-head-bg );
	color: var( --kzt-pt-head-color );
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.kzt-pt-title__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 2px solid currentColor;
}

.kzt-pt-title__ic svg,
.kzt-pt-title__ic i {
	width: 18px;
	height: 18px;
	font-size: 16px;
	fill: currentColor;
}

.kzt-pt-nav {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: stretch;
}

.kzt-pt-tabbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 14px 20px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --kzt-pt-muted );
	position: relative;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease;
}

.kzt-pt-tabbtn__ic {
	display: inline-flex;
}

.kzt-pt-tabbtn__ic svg,
.kzt-pt-tabbtn__ic i {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.kzt-pt-tabbtn:hover {
	color: var( --kzt-pt-text );
}

/* Style: underline */
.kzt-pt-style-style1 .kzt-pt-tabbtn.is-active {
	color: var( --kzt-pt-accent );
}

.kzt-pt-style-style1 .kzt-pt-tabbtn.is-active::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var( --kzt-pt-accent );
}

/* Style: filled */
.kzt-pt-style-style2 .kzt-pt-tabbtn.is-active {
	color: #fff;
	background: var( --kzt-pt-accent );
}

/* ---------- Body ---------- */
.kzt-pt-body {
	display: flex;
	gap: 20px;
	align-items: stretch;
}

.kzt-pt-main {
	flex: 1 1 auto;
	min-width: 0; /* critical so the carousel can overflow-scroll */
}

.kzt-pt-side {
	flex: 0 0 26%;
	max-width: 26%;
}

.kzt-pt-side-right .kzt-pt-side {
	order: 2;
}

.kzt-pt-side__inner {
	position: relative;
	height: 100%;
	min-height: 320px;
	border-radius: var( --kzt-pd-radius, 14px );
	overflow: hidden;
	background: #ece9e4 center / cover no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.kzt-pt-side__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.42 ), rgba( 0, 0, 0, 0 ) 55% );
}

.kzt-pt-side__ribbon {
	position: absolute;
	top: 16px;
	right: -34px;
	z-index: 3;
	transform: rotate( 45deg );
	background: var( --kzt-pt-accent );
	color: #fff;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	padding: 5px 40px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.2 );
}

.kzt-pt-side__body {
	position: relative;
	z-index: 2;
	padding: 20px;
	color: #fff;
}

.kzt-pt-side__badge {
	display: inline-block;
	background: var( --kzt-pt-accent );
	color: #fff;
	font-weight: 800;
	font-size: 0.72rem;
	padding: 5px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.kzt-pt-side__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}

.kzt-pt-side__sub {
	font-weight: 800;
	color: var( --kzt-pt-accent );
	font-size: 1.1rem;
	margin-top: 2px;
}

.kzt-pt-side__price {
	margin-top: 8px;
	font-weight: 800;
	font-size: 1.15rem;
}

.kzt-pt-side__btn {
	display: inline-block;
	margin-top: 14px;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	background: var( --kzt-pt-accent );
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.2s ease;
}

.kzt-pt-side__btn:hover {
	transform: translateY( -2px );
	filter: brightness( 0.95 );
}

/* ---------- Top banner ---------- */
.kzt-pt-topbanner {
	margin-bottom: 16px;
	border-radius: var( --kzt-pd-radius, 14px );
	overflow: hidden;
}

.kzt-pt-topbanner img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
}

.kzt-pt-topbanner a:hover img {
	transform: scale( 1.03 );
}

/* ---------- Panels ---------- */
.kzt-pt-panel {
	display: none;
}

.kzt-pt-panel.is-active {
	display: block;
}

.kzt-pt-viewport {
	position: relative;
}

.kzt-pt-empty {
	color: var( --kzt-pt-muted );
	padding: 20px 0;
}

/* ---------- Track: grid + carousel ---------- */
.kzt-pt-track {
	--kzt-pt-cols: 3;
	--kzt-pt-rows: 2;
	--kzt-pt-gap: 22px;
	display: grid;
	gap: var( --kzt-pt-gap );
}

.kzt-pt-track.is-grid {
	grid-template-columns: repeat( var( --kzt-pt-cols ), minmax( 0, 1fr ) );
}

.kzt-pt-track.is-carousel {
	grid-auto-flow: column;
	grid-template-rows: repeat( var( --kzt-pt-rows ), auto );
	grid-auto-columns: calc( ( 100% - ( var( --kzt-pt-cols ) - 1 ) * var( --kzt-pt-gap ) ) / var( --kzt-pt-cols ) );
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.kzt-pt-track.is-carousel::-webkit-scrollbar {
	display: none;
}

.kzt-pt-track.is-carousel > .kzt-pt-item {
	scroll-snap-align: start;
}

/* ---------- Card ---------- */
.kzt-pt-item {
	min-width: 0;
}

.kzt-pt-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	position: relative;
}

.kzt-pt-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.kzt-pt-badge {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 999px;
	color: #fff;
	line-height: 1;
}

.kzt-pt-badge--sale {
	background: var( --kzt-pd-sale, #e0463a );
}

.kzt-pt-badge--feature {
	background: var( --kzt-pt-accent );
}

.kzt-pt-badge--out {
	background: #111827;
}

.kzt-pt-thumb {
	display: block;
	overflow: hidden;
	border-radius: var( --kzt-pd-radius-sm, 9px );
	background: #f6f6f8;
}

.kzt-pt-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

.kzt-pt-card:hover .kzt-pt-thumb img {
	transform: scale( 1.05 );
}

/* Image ratio */
.kzt-pt-ratio-square img {
	aspect-ratio: 1 / 1;
}

.kzt-pt-ratio-portrait img {
	aspect-ratio: 3 / 4;
}

.kzt-pt-ratio-landscape img {
	aspect-ratio: 4 / 3;
}

.kzt-pt-ratio-natural img {
	aspect-ratio: auto;
	height: auto;
}

/* Image fit */
.kzt-pt-fit-cover img {
	object-fit: cover !important;
}

.kzt-pt-fit-contain {
	background: #fff;
}

.kzt-pt-fit-contain img {
	object-fit: contain !important;
	object-position: center;
	padding: 6%;
	background: #fff;
}

/* Info column — flex so the button always sits at the bottom (aligned). */
.kzt-pt-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 0 0;
}

.kzt-pt-cat {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --kzt-pt-muted );
	margin-bottom: 4px;
}

.kzt-pt-name {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	color: var( --kzt-pt-text );
	text-decoration: none;
	display: block;
}

.kzt-pt-name:hover {
	color: var( --kzt-pt-accent );
}

.kzt-pt-rating {
	margin-top: 8px;
	color: var( --kzt-pd-primary, #111827 );
	font-size: 0.8em;
}

.kzt-pt-rating .star-rating {
	margin: 0;
}

.kzt-pt-price {
	margin-top: 8px;
	font-weight: 800;
	color: var( --kzt-pt-text );
	font-size: 1.05rem;
}

.kzt-pt-price del {
	color: var( --kzt-pt-muted );
	font-weight: 400;
	opacity: 0.75;
	margin-left: 6px;
	font-size: 0.86em;
}

.kzt-pt-price ins {
	text-decoration: none;
}

/* Add-to-cart — pushed to the bottom so cards line up. */
.kzt-pt-cart {
	margin-top: 14px;
}

.kzt-pt-cart .button,
.kzt-pt-cart a.button {
	background: var( --kzt-pt-accent ) !important;
	color: var( --kzt-pd-on-cta, #fff ) !important;
	border: 0 !important;
	border-radius: var( --kzt-pd-radius-sm, 9px ) !important;
	font-weight: 700 !important;
	padding: 0.8em 1.2em !important;
	font-size: 0.82rem !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.kzt-pt-cart .button:hover,
.kzt-pt-cart a.button:hover {
	filter: brightness( 0.95 );
	transform: translateY( -1px );
}

.kzt-pt-cart a.added_to_cart {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	color: var( --kzt-pt-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
   Card STYLES (chosen in the widget: "Card style")
   ============================================================ */

/* --- KZT Product Grid (default): clean boxed white card, full-width CTA --- */
.kzt-pt-card-grid .kzt-pt-card {
	border: 1px solid var( --kzt-pt-line );
	border-radius: var( --kzt-pd-radius, 14px );
	padding: 14px;
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.kzt-pt-card-grid .kzt-pt-card:hover {
	box-shadow: 0 16px 40px rgba( 17, 24, 39, 0.12 );
	transform: translateY( -5px );
	border-color: transparent;
}

.kzt-pt-card-grid .kzt-pt-cart .button,
.kzt-pt-card-grid .kzt-pt-cart a.button {
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --- Boxed: same but with a soft floating shadow at rest --- */
.kzt-pt-card-boxed .kzt-pt-card {
	border: 1px solid var( --kzt-pt-line );
	border-radius: var( --kzt-pd-radius, 14px );
	padding: 14px;
	box-shadow: 0 6px 22px rgba( 17, 24, 39, 0.06 );
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.kzt-pt-card-boxed .kzt-pt-card:hover {
	box-shadow: 0 20px 48px rgba( 17, 24, 39, 0.16 );
	transform: translateY( -6px );
}

.kzt-pt-card-boxed .kzt-pt-cart .button,
.kzt-pt-card-boxed .kzt-pt-cart a.button {
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --- Minimal: borderless, compact, inline pill button --- */
.kzt-pt-card-minimal .kzt-pt-card {
	padding: 2px;
}

.kzt-pt-card-minimal .kzt-pt-cart .button,
.kzt-pt-card-minimal .kzt-pt-cart a.button {
	display: inline-block;
	border-radius: 999px !important;
}

/* --- Compact: tighter type + full-width button, good for 4–6 columns --- */
.kzt-pt-card-compact .kzt-pt-card {
	border: 1px solid var( --kzt-pt-line );
	border-radius: var( --kzt-pd-radius, 14px );
	padding: 10px;
}

.kzt-pt-card-compact .kzt-pt-info {
	padding-top: 10px;
}

.kzt-pt-card-compact .kzt-pt-name {
	font-size: 0.88rem;
}

.kzt-pt-card-compact .kzt-pt-price {
	font-size: 0.95rem;
}

.kzt-pt-card-compact .kzt-pt-cart .button,
.kzt-pt-card-compact .kzt-pt-cart a.button {
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	padding: 0.7em 1em !important;
	font-size: 0.76rem !important;
}

/* ---------- Arrows ---------- */
.kzt-pt-arrow {
	position: absolute;
	top: 38%;
	z-index: 5;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var( --kzt-pt-text );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.16 );
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.kzt-pt-arrow:hover {
	background: var( --kzt-pt-accent );
	color: #fff;
}

.kzt-pt-arrow--prev {
	left: -8px;
}

.kzt-pt-arrow--next {
	right: -8px;
}

.kzt-pt-arrow.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ---------- Dots ---------- */
.kzt-pt-dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 16px;
}

.kzt-pt-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #d6d6dd;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, width 0.2s ease;
}

.kzt-pt-dot.is-active {
	width: 22px;
	background: var( --kzt-pt-accent );
}

/* ---------- Swipe hint ---------- */
.kzt-pt-swipe {
	display: none;
	justify-content: center;
	margin-top: 12px;
}

.kzt-pt-swipe span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var( --kzt-pt-muted );
	background: #f2f2f5;
	padding: 6px 14px;
	border-radius: 999px;
}

.kzt-pt-swipe span::before {
	content: "‹";
	font-size: 1rem;
}

.kzt-pt-swipe span::after {
	content: "›";
	font-size: 1rem;
	animation: kzt-pt-nudge 1.4s ease-in-out infinite;
}

@keyframes kzt-pt-nudge {
	0%, 100% { transform: translateX( 0 ); }
	50% { transform: translateX( 4px ); }
}

.kzt-pt-swipe.is-gone {
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

/* ---------- View all ---------- */
.kzt-pt-viewall {
	margin-top: 16px;
	text-align: right;
}

.kzt-pt-viewall a {
	font-weight: 700;
	color: var( --kzt-pt-accent );
	text-decoration: none;
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.kzt-pt-side {
		flex-basis: 32% !important;
		max-width: 32% !important;
	}
}

@media ( max-width: 767px ) {
	.kzt-pt-body {
		flex-direction: column;
	}
	.kzt-pt-side,
	.kzt-pt-side-right .kzt-pt-side {
		flex-basis: auto !important;
		max-width: none !important;
		order: 0;
	}
	.kzt-pt-side__inner {
		min-height: 200px;
	}
	.kzt-pt-title {
		width: 100%;
		justify-content: center;
	}
	.kzt-pt-nav {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.kzt-pt-nav::-webkit-scrollbar {
		display: none;
	}
	.kzt-pt-arrow {
		display: none; /* touch users swipe; keep it clean */
	}
	.kzt-pt-swipe {
		display: flex;
	}
}