/* ============================================================
   Scepter Virtual Try-On – Frontend Styles
   Matches the layout shown in the reference screenshot:
   Left = product grid, Right = model, Bottom = category bar
   + "Kup strój" buy bar
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
.svt-widget {
	--svt-black    : #1a1a1a;
	--svt-accent   : #FF6B00;
	--svt-sale     : #e63000;
	--svt-border   : #e8e8e8;
	--svt-bg       : #f5f5f5;
	--svt-white    : #ffffff;
	--svt-text     : #333333;
	--svt-muted    : #888888;
	--svt-radius   : 10px;
	--svt-radius-sm: 6px;
	--svt-shadow   : 0 2px 12px rgba(0,0,0,.09);
	--svt-font     : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Widget shell ────────────────────────────────────────── */
.svt-widget {
	font-family   : var(--svt-font);
	color         : var(--svt-text);
	background    : var(--svt-white);
	border-radius : var(--svt-radius);
	overflow      : hidden;
	box-shadow    : var(--svt-shadow);
	max-width     : 1200px;
	margin        : 0 auto;
}

/* ── Accessibility ───────────────────────────────────────── */
.svt-sr-only {
	position : absolute;
	width    : 1px;
	height   : 1px;
	padding  : 0;
	margin   : -1px;
	overflow : hidden;
	clip     : rect(0,0,0,0);
	border   : 0;
}

/* ── Header ──────────────────────────────────────────────── */
.svt-header {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 16px 20px;
	border-bottom   : 1px solid var(--svt-border);
}

.svt-title {
	font-size   : 20px;
	font-weight : 700;
	margin      : 0;
	line-height : 1.2;
}

/* ── Buttons ─────────────────────────────────────────────── */
.svt-btn {
	display       : inline-flex;
	align-items   : center;
	gap           : 6px;
	padding       : 9px 18px;
	border        : none;
	border-radius : var(--svt-radius-sm);
	font-family   : var(--svt-font);
	font-size     : 14px;
	font-weight   : 600;
	cursor        : pointer;
	transition    : background .15s, color .15s, opacity .15s;
	white-space   : nowrap;
}

.svt-btn-primary {
	background : var(--svt-black);
	color      : #fff;
}
.svt-btn-primary:hover { background: #333; }
.svt-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.svt-btn-ghost {
	background   : transparent;
	color        : var(--svt-muted);
	border       : 1px solid var(--svt-border);
}
.svt-btn-ghost:hover { background: var(--svt-bg); color: var(--svt-text); }

/* ── Layout (two-column) ─────────────────────────────────── */
.svt-layout {
	display               : grid;
	grid-template-columns : 1fr 360px;
	min-height            : 520px;
	max-height            : 72vh;
}

/* ── Products panel (left) ───────────────────────────────── */
.svt-products-panel {
	border-right  : 1px solid var(--svt-border);
	display       : flex;
	flex-direction: column;
	overflow      : hidden;
}

.svt-products-bar {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 10px 14px;
	border-bottom   : 1px solid var(--svt-border);
	background      : var(--svt-bg);
	font-size       : 13px;
	font-weight     : 600;
	flex-shrink     : 0;
}

/* Pagination */
.svt-pagination {
	display    : flex;
	align-items: center;
	gap        : 6px;
}

.svt-pg-btn {
	width         : 28px;
	height        : 28px;
	border        : 1px solid var(--svt-border);
	border-radius : var(--svt-radius-sm);
	background    : var(--svt-white);
	cursor        : pointer;
	font-size     : 18px;
	line-height   : 1;
	display       : flex;
	align-items   : center;
	justify-content: center;
	transition    : background .15s, color .15s;
}
.svt-pg-btn:hover:not(:disabled) { background: var(--svt-black); color: #fff; border-color: var(--svt-black); }
.svt-pg-btn:disabled { opacity: .4; cursor: not-allowed; }

.svt-pg-info { font-size: 12px; color: var(--svt-muted); min-width: 36px; text-align: center; }

/* Product grid */
.svt-products-grid {
	display              : grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap                  : 12px;
	padding              : 14px;
	overflow-y           : auto;
	flex                 : 1;
}

/* ── Product card ────────────────────────────────────────── */
.svt-product-card {
	border        : 2px solid transparent;
	border-radius : var(--svt-radius-sm);
	overflow      : hidden;
	background    : var(--svt-white);
	cursor        : pointer;
	transition    : border-color .15s, box-shadow .15s;
	outline-offset: 2px;
}
.svt-product-card:focus-visible { outline: 2px solid var(--svt-accent); }
.svt-product-card:hover         { border-color: var(--svt-black); box-shadow: var(--svt-shadow); }
.svt-product-card.is-selected   { border-color: var(--svt-accent); }

.svt-product-img-wrap {
	position    : relative;
	aspect-ratio: 1 / 1;
	overflow    : hidden;
	background  : var(--svt-bg);
}

.svt-product-img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
	transition : transform .3s;
}
.svt-product-card:hover .svt-product-img { transform: scale(1.06); }

/* "Więcej szczegółów" hover overlay */
.svt-product-hover {
	position   : absolute;
	inset      : auto 0 0;
	padding    : 7px 4px;
	background : rgba(0,0,0,.72);
	color      : #fff;
	font-size  : 11px;
	text-align : center;
	transform  : translateY(100%);
	transition : transform .2s;
}
.svt-product-card:hover .svt-product-hover { transform: translateY(0); }

/* Badges */
.svt-badge {
	position      : absolute;
	top           : 8px;
	padding       : 2px 7px;
	font-size     : 10px;
	font-weight   : 700;
	border-radius : 3px;
	text-transform: uppercase;
	line-height   : 1.4;
}
.svt-badge--sale  { left: 8px;  background: var(--svt-sale); color: #fff; }
.svt-badge--check { right: 8px; background: var(--svt-accent); color: #fff; }

/* Product info */
.svt-product-info { padding: 8px 8px 10px; }

.svt-product-name {
	font-size   : 12px;
	font-weight : 600;
	margin      : 0 0 2px;
	line-height : 1.35;
	overflow    : hidden;
	display     : -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.svt-product-sub {
	font-size : 11px;
	color     : var(--svt-muted);
	margin    : 0 0 4px;
}

.svt-product-price {
	margin    : 0;
	font-size : 13px;
}

.svt-price         { font-weight: 700; }
.svt-price-sale    { font-weight: 700; color: var(--svt-sale); }
.svt-price-old     { font-size: 11px; color: var(--svt-muted); text-decoration: line-through; margin-left: 4px; }

/* Messages */
.svt-msg {
	grid-column : 1 / -1;
	text-align  : center;
	color       : var(--svt-muted);
	padding     : 40px 16px;
	font-size   : 14px;
}
.svt-msg--error { color: var(--svt-sale); }

/* ── Skeleton loader ─────────────────────────────────────── */
.svt-skeleton-grid {
	display              : grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap                  : 12px;
	width                : 100%;
}

@keyframes svt-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

.svt-skeleton-card {
	border-radius: var(--svt-radius-sm);
	overflow: hidden;
}

.svt-skeleton-img,
.svt-skeleton-line {
	background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
	background-size: 800px 100%;
	animation: svt-shimmer 1.4s infinite linear;
}

.svt-skeleton-img {
	width          : 100%;
	aspect-ratio   : 1 / 1;
}

.svt-skeleton-line {
	height        : 12px;
	border-radius : 4px;
	margin        : 10px 8px 4px;
	width         : 50%;
}

.svt-skeleton-line--wide {
	width : 80%;
	margin-bottom: 0;
}

/* ── Model panel (right) ─────────────────────────────────── */
.svt-model-panel {
	display       : flex;
	flex-direction: column;
	overflow      : hidden;
}

/* Model selector row */
.svt-model-selector {
	padding      : 12px 14px;
	border-bottom: 1px solid var(--svt-border);
	background   : var(--svt-bg);
	flex-shrink  : 0;
}

.svt-selector-label {
	font-size    : 12px;
	color        : var(--svt-muted);
	margin       : 0 0 8px;
	font-weight  : 600;
}

.svt-model-btns {
	display : flex;
	gap     : 8px;
	flex-wrap: wrap;
}

.svt-model-btn {
	padding       : 6px 16px;
	border        : 1.5px solid var(--svt-border);
	border-radius : 20px;
	background    : var(--svt-white);
	cursor        : pointer;
	font-size     : 13px;
	font-family   : var(--svt-font);
	font-weight   : 500;
	transition    : all .15s;
}
.svt-model-btn:hover,
.svt-model-btn.is-active {
	background   : var(--svt-black);
	color        : #fff;
	border-color : var(--svt-black);
}

/* Upload row */
.svt-upload-row {
	margin-top: 10px;
}

.svt-upload-label {
	display      : inline-flex;
	align-items  : center;
	gap          : 6px;
	padding      : 6px 14px;
	border       : 1.5px dashed var(--svt-border);
	border-radius: var(--svt-radius-sm);
	cursor       : pointer;
	font-size    : 12px;
	color        : var(--svt-muted);
	transition   : border-color .15s, color .15s;
}
.svt-upload-label:hover { border-color: var(--svt-black); color: var(--svt-black); }

.svt-upload-hint {
	font-size : 11px;
	color     : var(--svt-muted);
	margin    : 4px 0 0;
}

/* Model stage */
.svt-model-stage {
	position        : relative;
	flex            : 1;
	display         : flex;
	align-items     : center;
	justify-content : center;
	background      : var(--svt-bg);
	overflow        : hidden;
	min-height      : 280px;
}

.svt-model-img {
	max-width  : 100%;
	max-height : 100%;
	object-fit : contain;
	display    : block;
	position   : relative;
	z-index    : 1;
}

/* CSS garment overlay */
.svt-garment-overlay {
	position: absolute;
	inset   : 0;
	z-index : 2;
	pointer-events: none;
}

.svt-garment-layer {
	position       : absolute;
	inset          : 0;
	display        : flex;
	align-items    : center;
	justify-content: center;
}

.svt-garment-layer img {
	max-width  : 100%;
	max-height : 100%;
	object-fit : contain;
	mix-blend-mode: multiply;
}

/* Layer z-index order */
.svt-garment-layer--baselayer { z-index: 1; }
.svt-garment-layer--boots     { z-index: 2; }
.svt-garment-layer--pants     { z-index: 3; }
.svt-garment-layer--jacket    { z-index: 4; }
.svt-garment-layer--gloves    { z-index: 5; }
.svt-garment-layer--headwear  { z-index: 6; }
.svt-garment-layer--mask      { z-index: 7; }
.svt-garment-layer--goggles   { z-index: 8; }

/* Model placeholder */
.svt-model-placeholder {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	justify-content: center;
	gap            : 10px;
	color          : var(--svt-muted);
	text-align     : center;
	padding        : 24px;
}
.svt-model-placeholder p { margin: 0; font-size: 14px; }

/* AI loading overlay */
.svt-model-loading {
	position        : absolute;
	inset           : 0;
	background      : rgba(255,255,255,.88);
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	justify-content : center;
	gap             : 14px;
	z-index         : 10;
}
.svt-model-loading p { margin: 0; font-size: 13px; color: var(--svt-muted); }

/* Navigation arrows */
.svt-arrow {
	position        : absolute;
	top             : 50%;
	transform       : translateY(-50%);
	z-index         : 5;
	width           : 36px;
	height          : 36px;
	border-radius   : 50%;
	border          : 1px solid var(--svt-border);
	background      : rgba(255,255,255,.9);
	backdrop-filter : blur(4px);
	font-size       : 20px;
	line-height     : 1;
	cursor          : pointer;
	display         : flex;
	align-items     : center;
	justify-content : center;
	transition      : background .15s, color .15s, opacity .15s;
}
.svt-arrow:hover           { background: var(--svt-black); color: #fff; border-color: var(--svt-black); }
.svt-arrow--prev           { left: 8px; }
.svt-arrow--next           { right: 8px; }

/* Selected summary thumbnails */
.svt-selected-summary {
	border-top : 1px solid var(--svt-border);
	padding    : 10px 14px;
	flex-shrink: 0;
}

.svt-selected-title {
	font-size  : 11px;
	color      : var(--svt-muted);
	font-weight: 600;
	margin     : 0 0 6px;
}

.svt-selected-thumbs {
	display  : flex;
	flex-wrap: wrap;
	gap      : 6px;
}

.svt-thumb {
	position      : relative;
	width         : 44px;
	height        : 44px;
	border        : 1px solid var(--svt-border);
	border-radius : 5px;
	overflow      : hidden;
}
.svt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svt-thumb-remove {
	position      : absolute;
	top           : -5px;
	right         : -5px;
	width         : 16px;
	height        : 16px;
	background    : var(--svt-black);
	color         : #fff;
	border        : none;
	border-radius : 50%;
	font-size     : 10px;
	cursor        : pointer;
	display       : flex;
	align-items   : center;
	justify-content: center;
	line-height   : 1;
	transition    : background .15s;
}
.svt-thumb-remove:hover { background: var(--svt-sale); }

/* ── Spinner ──────────────────────────────────────────────── */
.svt-spinner {
	width        : 36px;
	height       : 36px;
	border       : 3px solid var(--svt-border);
	border-top   : 3px solid var(--svt-black);
	border-radius: 50%;
	animation    : svt-spin .75s linear infinite;
}

@keyframes svt-spin { to { transform: rotate(360deg); } }

/* ── Category bar ────────────────────────────────────────── */
.svt-category-bar {
	border-top : 1px solid var(--svt-border);
	background : var(--svt-white);
}

.svt-categories {
	display          : flex;
	overflow-x       : auto;
	scrollbar-width  : none;  /* Firefox */
}
.svt-categories::-webkit-scrollbar { display: none; }

.svt-cat-tab {
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	gap             : 5px;
	padding         : 10px 18px;
	border          : none;
	border-bottom   : 3px solid transparent;
	background      : none;
	cursor          : pointer;
	font-family     : var(--svt-font);
	font-size       : 11px;
	color           : var(--svt-muted);
	white-space     : nowrap;
	transition      : color .15s, border-color .15s;
	position        : relative;
	flex-shrink     : 0;
}
.svt-cat-tab:hover          { color: var(--svt-text); }
.svt-cat-tab.is-active      { color: var(--svt-black); border-bottom-color: var(--svt-black); font-weight: 700; }

.svt-cat-icon {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 22px;
	height          : 22px;
}

.svt-cat-badge {
	position        : absolute;
	top             : 7px;
	right           : 7px;
	width           : 14px;
	height          : 14px;
	background      : var(--svt-accent);
	color           : #fff;
	border-radius   : 50%;
	font-size       : 9px;
	font-weight     : 700;
	display         : flex;
	align-items     : center;
	justify-content : center;
}

/* ── Buy bar ─────────────────────────────────────────────── */
.svt-buy-bar {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 14px 20px;
	border-top      : 1px solid var(--svt-border);
	background      : var(--svt-white);
	box-shadow      : 0 -2px 12px rgba(0,0,0,.08);
}

.svt-buy-summary {
	display        : flex;
	flex-direction : column;
	gap            : 2px;
}

.svt-buy-count {
	font-size  : 12px;
	color      : var(--svt-muted);
}

.svt-buy-total {
	font-size  : 18px;
	font-weight: 700;
}

.svt-buy-btn {
	font-size  : 15px;
	padding    : 12px 24px;
	gap        : 10px;
}

.svt-buy-price-badge {
	font-size  : 16px;
	font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 820px) {
	.svt-layout {
		grid-template-columns : 1fr;
		max-height            : none;
	}

	.svt-products-panel {
		border-right  : none;
		border-bottom : 1px solid var(--svt-border);
		max-height    : 380px;
	}

	.svt-products-grid {
		grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
	}

	.svt-model-stage {
		min-height: 320px;
		max-height: 480px;
	}
}

@media (max-width: 500px) {
	.svt-buy-bar {
		flex-direction : column;
		gap            : 12px;
		align-items    : stretch;
	}

	.svt-buy-btn {
		width          : 100%;
		justify-content: center;
	}

	.svt-products-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}