/* Shiva Scroll 2.0 */
:root {
	--s20-primary : #ff9800;
	--s20-text    : #333;
	--s20-muted   : #666;
	--s20-bg      : #fff;
	--s20-border  : #e0e0e0;
	--s20-shadow  : 0 2px 10px rgba(0,0,0,0.09);
	--s20-ease    : all 0.3s ease;
}

/* Wrapper */
.shiva20-wrapper {
	width:100%; max-width:100%; position:relative;
	box-sizing:border-box; overflow:hidden;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	background:var(--s20-bg); color:var(--s20-text);
}
.shiva20-wrapper.shiva20-full-width {
	width:100vw; max-width:100vw;
	left:50%; right:50%;
	margin-left:-50vw; margin-right:-50vw;
	overflow-x:hidden;
}

/* ── TABS ── */
.shiva20-tabs-wrap {
	display:flex; align-items:center;
	background:#f7f7f7; border-bottom:3px solid #e8e8e8;
	width:100%; box-sizing:border-box; overflow:hidden;
}
.shiva20-tabs-viewport { flex:1; min-width:0; overflow:hidden; }

/* Desktop: normal scrollable row */
.shiva20-tabs-track {
	display:flex; flex-wrap:nowrap;
	overflow-x:auto; scroll-behavior:smooth;
	scrollbar-width:none; -ms-overflow-style:none;
}
.shiva20-tabs-track::-webkit-scrollbar { display:none; }

.shiva20-tab {
	flex-shrink:0; padding:15px 28px;
	background:transparent; border:none;
	border-bottom:4px solid transparent; margin-bottom:-3px;
	cursor:pointer; font-size:17px; font-weight:600;
	color:var(--s20-muted); white-space:nowrap;
	transition:var(--s20-ease);
}
.shiva20-tab:hover { color:var(--s20-primary); background:rgba(255,152,0,0.05); }
.shiva20-tab.active {
	color:var(--s20-primary); border-bottom-color:var(--s20-primary);
	background:rgba(255,152,0,0.05); font-size:18px; font-weight:700;
}

/* Desktop tab arrows */
.shiva20-tab-btns {
	display:flex; flex-direction:row; align-items:center;
	gap:4px; flex-shrink:0; padding:0 10px;
}
.shiva20-tab-prev,.shiva20-tab-next {
	width:30px; height:30px; border-radius:50%;
	background:#fff; border:1px solid #ddd;
	color:var(--s20-primary); font-size:20px; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:var(--s20-ease); padding:0; line-height:1;
	box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
.shiva20-tab-prev:hover,.shiva20-tab-next:hover { background:var(--s20-primary); color:#fff; border-color:var(--s20-primary); }
.shiva20-tab-prev:disabled,.shiva20-tab-next:disabled { opacity:0.2; cursor:default; pointer-events:none; }

/* ── MOBILE TABS - CSS marquee, pauses on touch ── */
@keyframes shiva20-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(var(--shiva20-marquee-w, -50%)); }
}

@media (max-width:768px) {
	.shiva20-tab-btns  { display:none !important; }
	.shiva20-tabs-viewport { overflow:hidden !important; }
	.shiva20-tabs-track {
		overflow:hidden !important;
		flex-wrap:nowrap !important;
		width:max-content;
		will-change:transform;
	}
	.shiva20-tabs-track.marquee-on {
		animation: shiva20-marquee 20s linear infinite;
	}
	.shiva20-tabs-track.marquee-paused {
		animation-play-state: paused !important;
	}
	.shiva20-tab-clone { pointer-events:none; opacity:0.7; }
	.shiva20-tab { font-size:15px; padding:13px 22px; }
	.shiva20-tab.active { font-size:15px; }
}

/* ── Scroll Area ── */
.shiva20-scroll-area {
	display:flex; align-items:center; gap:10px; padding:20px 12px;
}
.shiva20-track-wrap { flex:1; overflow:hidden; }
.shiva20-track {
	display:flex; gap:20px; overflow-x:auto; overflow-y:hidden;
	scroll-behavior:smooth; padding:8px 4px 14px; scrollbar-width:none;
}
.shiva20-track::-webkit-scrollbar { display:none; }
.shiva20-group { display:contents; }

/* Card */
.shiva20-card {
	flex:0 0 calc(100%/4 - 15px); background:var(--s20-bg);
	border:1px solid var(--s20-border); border-radius:10px;
	overflow:hidden; transition:var(--s20-ease);
	box-shadow:var(--s20-shadow); display:flex; flex-direction:column;
}
.shiva20-card:hover { box-shadow:0 10px 24px rgba(0,0,0,0.13); transform:translateY(-4px); }

/* Image */
.shiva20-image { position:relative; overflow:hidden; background:#f5f5f5; aspect-ratio:1; }
.shiva20-img-trigger,.shiva20-img-link { display:block; width:100%; height:100%; }
.shiva20-image img { width:100%; height:100%; object-fit:cover; display:block; transition:var(--s20-ease); }
.shiva20-card:hover .shiva20-image img { transform:scale(1.06); }
.shiva20-img-trigger { cursor:zoom-in; }
.shiva20-sale { position:absolute; top:10px; left:10px; background:#e74c3c; color:#fff; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:700; }

/* Content */
.shiva20-content { padding:14px; flex:1; display:flex; flex-direction:column; gap:8px; }
.shiva20-title { margin:0; font-size:14px; font-weight:600; line-height:1.4; color:var(--s20-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; }
.shiva20-title a { color:inherit; text-decoration:none; }
.shiva20-title a:hover { color:var(--s20-primary); }
.shiva20-rating { font-size:12px; }
.shiva20-price { font-size:15px; font-weight:700; color:#27ae60; }
.shiva20-price del { color:var(--s20-muted); font-size:12px; font-weight:normal; margin-right:4px; }
.shiva20-action { margin-top:auto; }
.shiva20-action .button { width:100%; background:#1a9bdb; color:#fff; border:none; padding:10px; border-radius:25px; cursor:pointer; font-weight:600; font-size:13px; transition:var(--s20-ease); text-align:center; display:block; text-decoration:none; }
.shiva20-action .button:hover { background:#1585c0; }

/* Arrows */
.shiva20-arrow {
	background:#fff; border:1px solid #e8e8e8; width:48px; height:48px;
	border-radius:50%; cursor:pointer; display:flex; align-items:center;
	justify-content:center; color:var(--s20-primary); font-size:32px;
	line-height:1; transition:var(--s20-ease);
	box-shadow:0 4px 16px rgba(0,0,0,0.12); flex-shrink:0; z-index:10;
}
.shiva20-arrow:hover { background:var(--s20-primary); color:#fff; transform:scale(1.1); border-color:var(--s20-primary); }
.shiva20-arrow:disabled { opacity:0.2; cursor:not-allowed; pointer-events:none; }

/* Dots */
.shiva20-dots { display:flex; justify-content:center; gap:8px; padding:6px 0 16px; }
.shiva20-dot { width:10px; height:10px; border-radius:50%; background:var(--s20-border); border:none; cursor:pointer; transition:var(--s20-ease); padding:0; }
.shiva20-dot.active { background:var(--s20-primary); transform:scale(1.2); }

/* Swipe hint */
.shiva20-swipe-hint { display:none; flex-direction:column; align-items:center; gap:5px; padding:4px 0 16px; }
.shiva20-swipe-hand { font-size:26px; animation:s20hand 1.8s ease-in-out infinite; }
@keyframes s20hand { 0%,100%{transform:translateX(8px);opacity:0.4;} 40%{transform:translateX(-12px);opacity:1;} }
.shiva20-swipe-bar { width:70px; height:4px; background:#eee; border-radius:4px; position:relative; overflow:hidden; }
.shiva20-swipe-dot { width:20px; height:4px; background:var(--s20-primary); border-radius:4px; position:absolute; top:0; animation:s20bar 1.8s ease-in-out infinite; }
@keyframes s20bar { 0%,100%{left:50px;opacity:0.3;} 40%{left:0;opacity:1;} }
.shiva20-swipe-text { font-size:10px; color:#bbb; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }

/* Responsive */
@media(max-width:768px) {
	.shiva20-arrow       { display:none !important; }
	.shiva20-swipe-hint  { display:flex; }
	.shiva20-scroll-area { padding:14px 0; gap:0; }
	.shiva20-track       { gap:12px; padding:8px 10px 12px; }
	.shiva20-content     { padding:10px; }
	.shiva20-title       { font-size:13px; }
	.shiva20-price       { font-size:13px; }
}