/*
Theme Name: Blocksy Child
Theme URI: https://example.com
Description: Custom child theme for Blocksy.
Author: Your Name
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* Store notice bar — centers the message text (default is start-aligned).
   margin: 0 kills the browser's default <p> margin, which left a visible
   white gap below the bar in "top" position mode (Blocksy only sets
   position: relative for that mode, no margin reset). */
.woocommerce-store-notice.demo_store {
	text-align: center;
	margin: 0;
	padding: 8px 34px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Even smaller on mobile, matching the header ticker's mobile size. */
@media ( max-width: 767px ) {
	.woocommerce-store-notice.demo_store {
		padding: 8px 30px;
		font-size: 10.5px;
	}
}

/* Blocksy positions the dismiss button with inset-inline-end, which resolves
   to the LEFT side on this RTL site — flip it to the right, where a close
   control reads naturally for RTL. */
.woocommerce-store-notice__dismiss-link {
	inset-inline-end: auto;
	inset-inline-start: 30px;
}

/* Companion Pro's "Trending" widget — appears near the footer on every page
   (not just blog pages), so it's styled here rather than in a
   conditionally-enqueued stylesheet. Label text itself is translated via
   the trending_block_label theme_mod filter in functions.php.
   The extension's own CSS lays this out as a 4-column CSS grid (meant for
   several trending posts side by side). With only one published post right
   now, that grid still reserves all 4 equal-width column tracks, so the
   single item gets pinned to the first column with three empty column-
   widths of dead space trailing next to it — that's the "empty gray bar"
   look. Switching the row to flex (items only take the width they need)
   plus a real card treatment (bigger image, background, shadow) fixes it
   regardless of how many posts exist, so it won't need revisiting once
   there are more. */
.ct-trending-block {
	background: #e1e8ed;
	padding: 40px 0;
}

.ct-trending-block .ct-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex !important;
	flex-wrap: wrap;
	gap: 20px;
}

.ct-trending-block .ct-module-title {
	flex: 0 0 100%;
	color: #132040;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.ct-trending-block-item {
	flex: 0 1 320px;
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba( 19, 32, 64, 0.08 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ct-trending-block-item:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 19, 32, 64, 0.14 );
}

.ct-trending-block-item .ct-media-container {
	--trending-block-image-width: 88px;
	--trending-block-image-radius: 14px;
}

.ct-trending-block-item-content .ct-post-title {
	color: #132040;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
}

.ct-trending-block-item-content .ct-post-title:hover {
	color: #c9a24b;
}