/* =============================================================================
   stl-public.css  v1.2  — Desktop + Tablet + Mobile
   ============================================================================= */

/* ── Section ─────────────────────────────────────────────────────────────────── */

.stl-section {
	max-width:  1400px;      /* wide enough for arrows to sit at edges */
	margin:     60px auto;
	padding:    0 20px;
	box-sizing: border-box;
	position:   relative;   /* anchor for absolutely-positioned arrows */
}

/* ── Section title ───────────────────────────────────────────────────────────── */

.stl-section-title {
	text-align:     center;
	font-size:      15px;
	font-weight:    400;
	letter-spacing: 5px;
	text-transform: uppercase;
	color:          #111;
	margin:         0 0 40px;
	line-height:    1;
}

.stl-section-title .stl-title-bold { font-weight: 700; }

/* ── Wrapper: contains track + absolutely-positioned arrows ──────────────────── */

.stl-wrapper {
	position: relative;   /* arrows position relative to this */
	/* NO overflow:hidden here — the track itself clips its inner row */
	margin: 0 60px;       /* space so arrows sit at section edges */
}

/* ── Navigation arrows — absolute, outside the track ────────────────────────── */

.stl-nav {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	width:           44px;
	height:          44px;
	border-radius:   50%;
	border:          1px solid #ddd;
	background:      #fff;
	color:           #555;
	font-size:       22px;
	line-height:     1;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	box-shadow:      0 2px 8px rgba(0,0,0,.08);
	transition:      background .2s, color .2s, border-color .2s, box-shadow .2s;
	padding:         0;
	z-index:         20;
}

/* Position arrows relative to .stl-section */
.stl-nav--prev {
	left: 0;            /* flush to section left edge (inside 20px padding) */
}
.stl-nav--next {
	right: 0;           /* flush to section right edge */
}

.stl-nav:hover:not(:disabled) {
	background:   #111;
	color:        #fff;
	border-color: #111;
	box-shadow:   0 4px 14px rgba(0,0,0,.18);
}

.stl-nav:disabled { opacity: .3; cursor: default; }

/* ── Track: the overflow clipper (does NOT move) ────────────────────────────── */

.stl-track {
	overflow: hidden;   /* clips the inner row — arrows are outside so still clickable */
	width:    100%;
}

/* ── Track inner: the flex row that slides via translateX ─────────────────────── */

.stl-track-inner {
	display:     flex;
	will-change: transform;
	/* transform applied by JS */
}

/* ── Each look ───────────────────────────────────────────────────────────────── */

.stl-look {
	flex:        0 0 100%;
	min-width:   100%;
	display:     grid;
	grid-template-columns: 1fr 1fr;
	gap:         48px;
	align-items: center;
	box-sizing:  border-box;
}

/* ── Model image wrap ────────────────────────────────────────────────────────── */

.stl-image-wrap {
	position:    relative;
	line-height: 0;
}

.stl-look-img {
	width:         100%;
	height:        auto;
	display:       block;
	border-radius: 4px;
}

/* ── Hotspot dot ─────────────────────────────────────────────────────────────── */

.stl-hotspot {
	position:        absolute;
	width:           24px;   /* overridden by inline <style> from settings */
	height:          24px;
	background:      rgba(255,255,255,.9);
	border:          none;
	border-radius:   50%;
	transform:       translate(-50%, -50%);
	cursor:          pointer;
	padding:         0;
	box-shadow:      0 2px 10px rgba(0,0,0,.2);
	z-index:         10;
	transition:      transform .2s, box-shadow .2s, opacity .2s;
}

.stl-hotspot:hover,
.stl-hotspot--active {
	transform:  translate(-50%, -50%) scale(1.25);
	box-shadow: 0 4px 16px rgba(0,0,0,.28);
	opacity:    1 !important;
}

/* Pulse ring */
.stl-hotspot__pulse {
	position:      absolute;
	top:  50%; left: 50%;
	width: 100%; height: 100%;
	border-radius: 50%;
	background:    rgba(255,255,255,.5);
	transform:     translate(-50%,-50%);
	animation:     stl-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes stl-pulse {
	0%   { transform: translate(-50%,-50%) scale(1);   opacity: .9; }
	65%  { transform: translate(-50%,-50%) scale(2.4); opacity: 0;  }
	100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0;  }
}

/* ── Mobile "VIEW PRODUCTS" trigger — hidden on desktop/tablet ───────────────── */

.stl-mobile-cta { display: none; }

/* ── Product panel (right column) ────────────────────────────────────────────── */

.stl-product-panel {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	min-height:      400px;
}

/* ── Product card ────────────────────────────────────────────────────────────── */

.stl-product-card {
	display:        none;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	width:          100%;
	animation:      stl-fade-in .35s ease;
}

.stl-product-card--active { display: flex; }

@keyframes stl-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* Product image */
.stl-product-img-wrap {
	width:         100%;
	max-width:     340px;
	margin-bottom: 20px;
	background:    #f5f5f5;
	border-radius: 4px;
	overflow:      hidden;
	aspect-ratio:  3 / 4;
}

.stl-product-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .45s ease;
}

.stl-product-img-wrap:hover .stl-product-img { transform: scale(1.04); }

/* Product info */
.stl-product-info {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            12px;
	width:          100%;
	max-width:      300px;
}

.stl-product-name {
	font-size:      13px;
	font-weight:    600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          #111;
	margin:         0;
	line-height:    1.4;
}

/* WooCommerce price */
.stl-product-price { font-size: 13px; color: #555; margin: 0; }
.stl-product-price .price      { color: #555; }
.stl-product-price .price ins  { text-decoration: none; color: #e53935; font-weight: 600; }
.stl-product-price .price del  { color: #bbb; font-size: .9em; margin-right: 4px; }

/* ── Colour swatches ─────────────────────────────────────────────────────────── */

.stl-swatches {
	display:         flex;
	gap:             6px;
	flex-wrap:       wrap;
	justify-content: center;
}

.stl-swatch {
	display:       inline-block;
	width:         22px;
	height:        22px;
	border-radius: 50%;
	border:        2px solid #e0e0e0;
	box-shadow:    inset 0 0 0 1px rgba(0,0,0,.08);
	transition:    border-color .18s, transform .18s;
}

.stl-swatch:hover { border-color: #555; transform: scale(1.15); }

/* ── CTA button ─────────────────────────────────────────────────────────────── */

.stl-btn-view {
	display:         block;
	width:           100%;
	max-width:       280px;
	padding:         15px 24px;
	text-align:      center;
	text-decoration: none;
	font-size:       11px;
	font-weight:     700;
	letter-spacing:  2.5px;
	text-transform:  uppercase;
	background:      #000;
	color:           #fff;
	border-radius:   0;
	transition:      background .22s, transform .15s, box-shadow .22s;
	margin-top:      4px;
	cursor:          pointer;
}

.stl-btn-view:hover {
	transform:  translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ── Dot navigator ───────────────────────────────────────────────────────────── */

.stl-dots {
	display:         flex;
	gap:             8px;
	justify-content: center;
	margin-top:      22px;
}

.stl-dot {
	width:         9px;
	height:        9px;
	border-radius: 50%;
	border:        none;
	background:    #ccc;
	padding:       0;
	cursor:        pointer;
	transition:    background .2s, transform .2s;
}

.stl-dot--active { background: #111; transform: scale(1.25); }
.stl-dot:hover:not(.stl-dot--active) { background: #888; }

/* ── No looks ────────────────────────────────────────────────────────────────── */

.stl-no-looks { text-align: center; color: #bbb; padding: 48px; }

/* ── Bottom sheet overlay & panel ────────────────────────────────────────────── */

.stl-overlay {
	display:    none;
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,.5);
	z-index:    1000;
	opacity:    0;
	transition: opacity .3s ease;
}

.stl-overlay.stl-overlay--open {
	display: block;
	opacity: 1;
}

.stl-sheet {
	position:      fixed;
	bottom:        0;
	left:          0;
	right:         0;
	background:    #fff;
	border-radius: 18px 18px 0 0;
	z-index:       1001;
	transform:     translateY(100%);
	transition:    transform .42s cubic-bezier(0.32, 0.72, 0, 1);
	max-height:    88vh;
	overflow-y:    auto;
	-webkit-overflow-scrolling: touch;
}

.stl-sheet.stl-sheet--open { transform: translateY(0); }

/* Drag handle */
.stl-sheet::before {
	content:       '';
	display:       block;
	width:         40px;
	height:        4px;
	border-radius: 2px;
	background:    #ddd;
	margin:        12px auto 0;
}

/* Sheet header */
.stl-sheet-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 20px 14px;
	border-bottom:   1px solid #f0f0f0;
	position:        sticky;
	top:             0;
	background:      #fff;
	z-index:         1;
}

.stl-sheet-close {
	width:         36px;
	height:        36px;
	border:        1px solid #e0e0e0;
	background:    #fff;
	border-radius: 50%;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	color:         #333;
	flex-shrink:   0;
	transition:    background .15s;
}

.stl-sheet-close:hover { background: #f5f5f5; }

.stl-sheet-title {
	font-size:      13px;
	font-weight:    600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          #111;
}

.stl-sheet-spacer { width: 36px; }

/* Sheet body */
.stl-sheet-body { padding: 24px 20px 40px; }

/* Cloned card inside sheet */
.stl-sheet-card {
	display:        flex !important;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	animation:      stl-fade-in .3s ease;
}

.stl-sheet-card .stl-product-img-wrap {
	max-width:    100%;
	aspect-ratio: 3 / 4;
}

.stl-sheet-card .stl-btn-view { max-width: 100%; }

body.stl-no-scroll { overflow: hidden; }

/* =============================================================================
   TABLET  769px – 860px
   Single-column layout, arrows visible, NO peek
   ============================================================================= */

@media (min-width: 769px) and (max-width: 860px) {
	.stl-look {
		grid-template-columns: 1fr;
		gap:                   24px;
	}

	.stl-product-panel { min-height: unset; }

	.stl-product-img-wrap {
		max-width:    260px;
		aspect-ratio: 1 / 1;
	}
}

/* =============================================================================
   MOBILE  ≤ 768px
   Swipe carousel with peek, no arrows, bottom sheet
   ============================================================================= */

@media (max-width: 768px) {

	/* Section is the outer clipper — clips the peek at screen edges */
	.stl-section {
		padding:  0;
		margin:   40px auto;
		overflow: hidden;  /* <-- section clips, not wrapper */
	}

	/* Wrapper: narrowed so adjacent looks peek from left/right */
	.stl-wrapper {
		margin:   0 8%;    /* 8% peek on each side */
		overflow: visible; /* let track-inner extend beyond */
	}

	/* Track: must be visible on mobile so inner row can peek past wrapper */
	.stl-track {
		overflow: visible; /* section handles clipping */
	}

	/* Gap between look cards so next card is partially visible */
	.stl-track-inner {
		gap: 10px;
	}

	/* Hide desktop arrows */
	.stl-nav { display: none !important; }

	/* Look: single column */
	.stl-look {
		grid-template-columns: 1fr;
		gap:                   0;
		flex:                  0 0 100%;
		min-width:             100%;
	}

	/* Hide desktop product panel */
	.stl-product-panel { display: none !important; }

	/* Show mobile CTA button */
	.stl-mobile-cta {
		display:        block;
		width:          100%;
		padding:        14px;
		margin-top:     12px;
		background:     #111;
		color:          #fff;
		border:         none;
		font-size:      11px;
		font-weight:    700;
		letter-spacing: 2px;
		text-transform: uppercase;
		cursor:         pointer;
		text-align:     center;
		transition:     background .2s;
	}

	.stl-mobile-cta:hover { background: #333; }

	.stl-section-title { font-size: 13px; letter-spacing: 3px; margin-bottom: 24px; }
}