/* ══════════════════════════════════════════════════════════════
   Raspina Product Showcase Styles
   Applies to Woodmart products widget (bestsellers, newest, etc.)
   ══════════════════════════════════════════════════════════════ */

:root {
	--rs-primary: #c62828;
	--rs-primary-strong: #e53935;
	--rs-gold: #d4af37;
	--rs-gold-deep: #c9a13b;
	--rs-cream: #f7f0e6;
	--rs-cream-deep: #ead7b7;
	--rs-text: #3f2723;
	--rs-muted: #7a5e55;
	--rs-border: rgba(201, 161, 59, 0.26);
	--rs-shadow: 0 12px 28px rgba(83, 45, 36, 0.12);
	--rs-radius: 20px;
}

/* ─────────────────────────────────────────────────
   Section Container
   ───────────────────────────────────────────────── */
.raspina-products-section {
	background: linear-gradient(165deg, #fff 0%, var(--rs-cream) 100%);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
	box-shadow: var(--rs-shadow);
	padding: clamp(16px, 2vw, 28px);
	margin: 30px 0;
}

/* ─────────────────────────────────────────────────
   Section Title
   ───────────────────────────────────────────────── */
.raspina-products-section .wd-section-title,
.raspina-products-section .title-wrapper,
.raspina-products-section .section-title {
	margin-bottom: 20px;
}

.raspina-products-section .wd-section-title .title,
.raspina-products-section .title-wrapper .title,
.raspina-products-section .section-title h2,
.raspina-products-section .element-title {
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 800;
	color: var(--rs-primary);
	margin: 0;
	line-height: 1.4;
}

.raspina-products-section .wd-section-title .subtitle,
.raspina-products-section .title-wrapper .subtitle {
	color: var(--rs-muted);
	font-size: 14px;
	margin-top: 6px;
}

/* ─────────────────────────────────────────────────
   Products Grid / Carousel Wrapper
   ───────────────────────────────────────────────── */
.raspina-products-section .products,
.raspina-products-section .wd-carousel-wrap {
	gap: 16px;
}

/* ─────────────────────────────────────────────────
   Product Card
   ───────────────────────────────────────────────── */
.raspina-products-section .product-grid-item,
.raspina-products-section .product {
	background: #fff;
	border: 1px solid rgba(201, 161, 59, 0.2);
	border-radius: 16px;
	padding: 14px;
	transition: transform 0.24s ease, box-shadow 0.24s ease;
	overflow: hidden;
}

.raspina-products-section .product-grid-item:hover,
.raspina-products-section .product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 24px rgba(83, 45, 36, 0.14);
}

/* Product Image */
.raspina-products-section .product-image-link,
.raspina-products-section .product-element-top {
	border-radius: 12px;
	overflow: hidden;
	background: var(--rs-cream);
}

.raspina-products-section .product-image-link img,
.raspina-products-section .product-element-top img {
	transition: transform 0.3s ease;
}

.raspina-products-section .product:hover .product-image-link img,
.raspina-products-section .product:hover .product-element-top img {
	transform: scale(1.04);
}

/* Product Title */
.raspina-products-section .wd-entities-title a,
.raspina-products-section .product-title a,
.raspina-products-section .woocommerce-loop-product__title {
	color: var(--rs-text);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	transition: color 0.2s ease;
}

.raspina-products-section .wd-entities-title a:hover,
.raspina-products-section .product-title a:hover,
.raspina-products-section .woocommerce-loop-product__title:hover {
	color: var(--rs-primary);
}

/* Product Price */
.raspina-products-section .price {
	color: var(--rs-primary);
	font-weight: 800;
	font-size: 15px;
}

.raspina-products-section .price del {
	color: #bca19a;
	font-weight: 500;
	font-size: 12px;
	margin-inline-end: 5px;
}

.raspina-products-section .price ins {
	text-decoration: none;
	color: var(--rs-primary);
}

/* Sale Badge */
.raspina-products-section .onsale,
.raspina-products-section .product-labels .onsale {
	background: linear-gradient(135deg, var(--rs-primary) 0%, var(--rs-primary-strong) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	border-radius: 999px;
	padding: 4px 10px;
}

/* New/Hot Badge */
.raspina-products-section .new,
.raspina-products-section .product-labels .new {
	background: linear-gradient(135deg, var(--rs-gold) 0%, var(--rs-gold-deep) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	border-radius: 999px;
	padding: 4px 10px;
}

/* Rating Stars */
.raspina-products-section .star-rating span::before {
	color: var(--rs-gold);
}

/* Add to Cart Button */
.raspina-products-section .add_to_cart_button,
.raspina-products-section .product_type_simple {
	background: linear-gradient(135deg, var(--rs-primary) 0%, var(--rs-primary-strong) 100%);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-weight: 700;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.raspina-products-section .add_to_cart_button:hover,
.raspina-products-section .product_type_simple:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(198, 40, 40, 0.25);
}

/* ─────────────────────────────────────────────────
   Carousel Navigation
   ───────────────────────────────────────────────── */
.raspina-products-section .wd-nav-arrows .wd-btn-arrow {
	background: #fff;
	border: 1px solid var(--rs-border);
	color: var(--rs-text);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	box-shadow: 0 4px 12px rgba(83, 45, 36, 0.1);
	transition: all 0.2s ease;
}

.raspina-products-section .wd-nav-arrows .wd-btn-arrow:hover {
	background: var(--rs-primary);
	color: #fff;
	border-color: var(--rs-primary);
}

/* Carousel Pagination Dots */
.raspina-products-section .wd-nav-pagin-wrap .wd-nav-pagin span {
	background: var(--rs-cream-deep);
}

.raspina-products-section .wd-nav-pagin-wrap .wd-nav-pagin span.wd-active {
	background: var(--rs-gold);
}

/* ─────────────────────────────────────────────────
   View More Button
   ───────────────────────────────────────────────── */
.raspina-products-section .wd-more-btn,
.raspina-products-section .view-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 2px solid var(--rs-gold);
	color: var(--rs-gold-deep);
	border-radius: 999px;
	padding: 10px 24px;
	font-weight: 700;
	font-size: 14px;
	transition: all 0.2s ease;
	margin-top: 16px;
}

.raspina-products-section .wd-more-btn:hover,
.raspina-products-section .view-more-btn:hover {
	background: var(--rs-gold);
	color: #fff;
}

/* ─────────────────────────────────────────────────
   Empty State
   ───────────────────────────────────────────────── */
.raspina-products-section .no-products,
.raspina-products-section .woocommerce-info {
	background: #fff;
	border: 1px dashed var(--rs-border);
	border-radius: 12px;
	padding: 20px;
	color: var(--rs-muted);
	text-align: center;
}

/* ─────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.raspina-products-section {
		padding: 14px;
		border-radius: 16px;
	}

	.raspina-products-section .product-grid-item,
	.raspina-products-section .product {
		padding: 10px;
	}
}

@media (max-width: 640px) {
	.raspina-products-section {
		padding: 12px;
		border-radius: 14px;
		margin: 20px 0;
	}

	.raspina-products-section .wd-section-title .title,
	.raspina-products-section .element-title {
		font-size: 20px;
	}

	.raspina-products-section .wd-nav-arrows .wd-btn-arrow {
		width: 36px;
		height: 36px;
	}
}
