/* =====================================================
   WB Product Showcase — Elementor widget styles v3
   Slides with fade transition + thumbnails (no arrows/dots)
   Image is NEVER cropped (object-fit: contain).
   ===================================================== */

.wb-showcase{
	--wb-orange:#E8481C;
	--wb-orange-deep:#9E2E0C;
	--wb-ink:#1A1410;
	--wb-ink-soft:#52473D;
	--wb-line:#EAD9BF;
	--wb-line-2:#D9C29F;
	--wb-stage-bg:#FFF5E7;
	--wb-shadow:0 6px 18px -10px rgba(60,30,10,.35);

	background:#FFFFFF;
	box-sizing:border-box;
	color:var(--wb-ink);
}
.wb-showcase *,
.wb-showcase *::before,
.wb-showcase *::after{ box-sizing:border-box; }

/* Two-column layout */
.wb-showcase-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:50px;
	align-items:start;
}
@media (max-width:880px){
	.wb-showcase-grid{ grid-template-columns:1fr; gap:30px; }
}

/* ===================================================
   GALLERY
   =================================================== */
.wb-gallery{ display:block; }

/* Cream stage (the visible box with rounded corners) */
.wb-stage{
	background:var(--wb-stage-bg);
	border-radius:14px;
	padding:18px;
	box-shadow:var(--wb-shadow);
}

/* Slides container — natural height (no forced ratio, no letterboxing) */
.wb-slides{
	position:relative;
	width:100%;
	border-radius:10px;
	overflow:hidden;
	background:#FFFFFF;
	/* Grid stacking: all slides occupy same cell.
	   Container height = tallest slide's natural height. */
	display:grid;
	grid-template-columns:1fr;
}
.wb-slide{
	grid-column:1;
	grid-row:1;
	opacity:0;
	transition:opacity .5s ease;
	pointer-events:none;
	display:block;
	width:100%;
}
.wb-slide.is-active{ opacity:1; z-index:2; pointer-events:auto; }
.wb-slide img{
	width:100%;
	height:auto;            /* natural full height of the image */
	display:block;
	object-fit:contain;
}
.wb-noimg{
	padding:40px;
	text-align:center;
	color:#bbb;
	font-size:.9rem;
}

/* ===================================================
   THUMBNAILS (replaces arrows + dots)
   =================================================== */
.wb-thumbs{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:14px;
}
.wb-thumb{
	flex:0 0 auto;
	width:72px;
	height:72px;
	padding:4px;
	border:2px solid var(--wb-line-2);
	border-radius:8px;
	background:#fff;
	cursor:pointer;
	overflow:hidden;
	transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
	outline:none;
}
.wb-thumb:hover{
	border-color:var(--wb-orange);
	transform:translateY(-2px);
	box-shadow:0 4px 12px -4px rgba(232,72,28,.35);
}
.wb-thumb:focus-visible{
	border-color:var(--wb-orange);
	box-shadow:0 0 0 3px rgba(232,72,28,.25);
}
.wb-thumb.is-active{
	border-color:var(--wb-orange);
	box-shadow:0 4px 12px -4px rgba(232,72,28,.4);
}
.wb-thumb img{
	width:100%;
	height:100%;
	object-fit:contain;     /* thumb image not cropped either */
	display:block;
}
@media (max-width:560px){
	.wb-thumb{ width:60px; height:60px; }
}

/* ===================================================
   BUY DETAILS (right column)
   =================================================== */
.wb-buy{ display:block; }

.wb-eyebrow{
	display:inline-block;
	font-weight:900;
	text-transform:uppercase;
	font-size:.85rem;
	letter-spacing:1.5px;
	color:#C73A12;
	margin-bottom:10px;
}
.wb-title{
	font-family:"Oswald", Impact, sans-serif;
	text-transform:uppercase;
	font-weight:700;
	font-size:clamp(1.8rem, 4vw, 2.8rem);
	line-height:1.05;
	margin:0 0 14px;
	color:var(--wb-ink);
}
.wb-reviews{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	margin-bottom:18px; font-weight:700; color:var(--wb-ink);
}
.wb-stars{
	color:#F4B73E; letter-spacing:2px; font-size:1.2rem;
	line-height:1; display:inline-block;
}
.wb-reviews b{ font-weight:900; }
.wb-sep{ opacity:.45; }

.wb-price{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:14px;
	margin-bottom:14px;
}
.wb-price-now{
	font-family:"Oswald", Impact, sans-serif;
	font-weight:700; font-size:3rem; line-height:.9;
	color:var(--wb-orange);
}
.wb-price-now .woocommerce-Price-currencySymbol{ font-size:.6em; }
.wb-price-old{
	color:#8A7A6B; font-size:1.3rem; font-weight:700;
	text-decoration:line-through;
}

.wb-save{
	display:inline-block;
	background:#D40A0A; color:#fff;
	font-weight:900; font-size:.78rem;
	letter-spacing:.5px; text-transform:uppercase;
	padding:7px 12px; border-radius:6px; margin-bottom:18px;
}

.wb-btn{
	display:flex; width:100%; max-width:480px;
	align-items:center; justify-content:center;
	font-family:inherit; font-weight:900;
	font-size:1.05rem; letter-spacing:.5px; text-transform:uppercase;
	text-decoration:none; color:#fff;
	background:var(--wb-orange);
	padding:18px 28px; border-radius:8px;
	box-shadow:0 6px 0 0 var(--wb-orange-deep), 0 18px 28px -14px rgba(158,46,12,.55);
	cursor:pointer;
	transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
	border:0; margin:2px 0;
}
.wb-btn:hover{
	background:#F25C2A; transform:translateY(-2px);
	box-shadow:0 8px 0 0 var(--wb-orange-deep), 0 22px 32px -14px rgba(158,46,12,.55);
	color:#fff;
}
.wb-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 0 var(--wb-orange-deep); }

.wb-trust{
	margin-top:14px; font-size:.9rem; font-weight:700;
	color:var(--wb-ink-soft);
}

.wb-desc{
	margin-top:18px; padding-top:18px;
	border-top:1px dashed var(--wb-line);
	color:var(--wb-ink-soft); font-size:.98rem; line-height:1.65;
}
.wb-desc p{ margin:0 0 10px; }
.wb-desc p:last-child{ margin-bottom:0; }
.wb-desc ul, .wb-desc ol{ padding-left:20px; margin:0 0 10px; }
.wb-desc strong{ color:var(--wb-ink); }

/* Placeholder (no product selected) */
.wb-placeholder{
	padding:40px 20px; text-align:center;
	background:#FFF7EE;
	border:1px dashed var(--wb-line-2);
	border-radius:14px; color:var(--wb-ink-soft); font-weight:600;
}
