/* Relay Radio Store — homepage and legacy-demo cleanup */

/* Porto product shortcodes used on the homepage should read as Relay panels, not white demo cards. */
body.relay-store-theme.home .porto-products,
body.relay-store-theme.home .products-slider,
body.relay-store-theme.home .elementor-widget-porto_products > .elementor-widget-container,
body.relay-store-theme.home .elementor-widget-porto-products > .elementor-widget-container {
	background: linear-gradient(180deg, rgba(18,25,44,.96), rgba(12,18,33,.96)) !important;
	border: 1px solid var(--relay-border) !important;
	border-radius: var(--relay-radius-lg) !important;
	box-shadow: var(--relay-shadow-soft);
}

body.relay-store-theme.home .porto-products {
	padding: 22px !important;
}

/* Catch the common Elementor/WPB column wrappers used by older Porto demos. */
body.relay-store-theme.home .elementor-column:has(.porto-products) > .elementor-widget-wrap,
body.relay-store-theme.home .elementor-column:has(.porto-products) > .elementor-widget-wrap > .elementor-widget-wrap,
body.relay-store-theme.home .wpb_column:has(.porto-products) > .vc_column-inner {
	background: linear-gradient(180deg, rgba(18,25,44,.96), rgba(12,18,33,.96)) !important;
	border-color: var(--relay-border) !important;
	border-radius: var(--relay-radius-lg) !important;
}

body.relay-store-theme.home .section-title,
body.relay-store-theme.home .products-slider-title,
body.relay-store-theme.home .porto-products .section-title,
body.relay-store-theme.home .porto-products h2,
body.relay-store-theme.home .porto-products h3 {
	color: #f4f7ff !important;
	border-color: var(--relay-border) !important;
}

body.relay-store-theme.home .section-title .inline-title,
body.relay-store-theme.home .section-title .line,
body.relay-store-theme.home .section-title:before,
body.relay-store-theme.home .section-title:after {
	border-color: rgba(151,166,202,.30) !important;
}

body.relay-store-theme.home .porto-products .product-col,
body.relay-store-theme.home .porto-products li.product {
	background: transparent !important;
}

body.relay-store-theme.home .porto-products .product-inner {
	background: linear-gradient(180deg, rgba(24,33,56,.98), rgba(15,21,38,.98)) !important;
}

body.relay-store-theme.home .porto-products .product-content,
body.relay-store-theme.home .porto-products .product-details {
	background: transparent !important;
}

body.relay-store-theme.home .porto-products .product-title,
body.relay-store-theme.home .porto-products .product-title a,
body.relay-store-theme.home .porto-products .woocommerce-loop-product__title,
body.relay-store-theme.home .porto-products .woocommerce-loop-product__title a {
	color: #f4f7ff !important;
}

body.relay-store-theme.home .porto-products .price,
body.relay-store-theme.home .porto-products .price .amount {
	color: #dce8ff !important;
}

body.relay-store-theme.home .porto-products .category-list,
body.relay-store-theme.home .porto-products .category-list a {
	color: #8896af !important;
}

/* Give existing homepage image banners the same soft panel treatment without altering their artwork. */
body.relay-store-theme.home .main-content img {
	border-radius: 12px;
}
body.relay-store-theme.home .main-content .porto-products img,
body.relay-store-theme.home .main-content .product-image img {
	border-radius: 0;
}

/* WooCommerce archive sidebar: darken useful filters and suppress the obvious Porto demo HTML residue. */
body.relay-store-theme.woocommerce .sidebar-content .widget,
body.relay-store-theme.woocommerce .sidebar .widget {
	background: rgba(17,24,42,.72);
	border: 1px solid var(--relay-border);
	border-radius: var(--relay-radius);
	padding: 18px;
	margin-bottom: 16px;
}
body.relay-store-theme.woocommerce .sidebar-content .widget-title,
body.relay-store-theme.woocommerce .sidebar .widget-title {
	color: #f4f7ff;
	font-size: .82rem;
	font-weight: 900;
	letter-spacing: .04em;
}
body.relay-store-theme.woocommerce .sidebar-content .widget a,
body.relay-store-theme.woocommerce .sidebar .widget a { color: #aeb9ce; }
body.relay-store-theme.woocommerce .sidebar-content .widget a:hover,
body.relay-store-theme.woocommerce .sidebar .widget a:hover { color: #fff; }
body.relay-store-theme.woocommerce .sidebar-content .widget_custom_html,
body.relay-store-theme.woocommerce .sidebar .widget_custom_html { display: none !important; }

/* Build 0003: stronger selectors for the two legacy homepage product columns.
 * The old Porto page builder stores a white background on the column wrapper,
 * outside the product shortcode itself, so Build 0002 could not override it.
 */
body.relay-store-theme.home .wpb_column:has(.products) > .vc_column-inner,
body.relay-store-theme.home .wpb_column:has(.product-col) > .vc_column-inner,
body.relay-store-theme.home .elementor-column:has(.products) > .elementor-widget-wrap,
body.relay-store-theme.home .elementor-widget-wrap:has(> .elementor-widget .products),
body.relay-store-theme.home .elementor-element:has(> .elementor-widget-container > .products) > .elementor-widget-container {
	background: linear-gradient(180deg, rgba(18,25,44,.98), rgba(12,18,33,.98)) !important;
	border: 1px solid var(--relay-border) !important;
	border-radius: var(--relay-radius-lg) !important;
	box-shadow: var(--relay-shadow-soft) !important;
}

body.relay-store-theme.home .wpb_column:has(.products) > .vc_column-inner,
body.relay-store-theme.home .wpb_column:has(.product-col) > .vc_column-inner {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

body.relay-store-theme.home .wpb_column:has(.products) .wpb_heading,
body.relay-store-theme.home .wpb_column:has(.product-col) .wpb_heading,
body.relay-store-theme.home .elementor-column:has(.products) .elementor-heading-title,
body.relay-store-theme.home .elementor-column:has(.product-col) .elementor-heading-title {
	color: #f4f7ff !important;
}

/* Old demo headings sometimes carry hard-coded red text. */
body.relay-store-theme.home .wpb_column:has(.products) h2,
body.relay-store-theme.home .wpb_column:has(.products) h3,
body.relay-store-theme.home .wpb_column:has(.product-col) h2,
body.relay-store-theme.home .wpb_column:has(.product-col) h3,
body.relay-store-theme.home .elementor-column:has(.products) h2,
body.relay-store-theme.home .elementor-column:has(.products) h3 {
	color: #f4f7ff !important;
}

/* Keep the actual merchandise photo area light and color-neutral. */
body.relay-store-theme.home .wpb_column:has(.products) .product-image,
body.relay-store-theme.home .wpb_column:has(.product-col) .product-image,
body.relay-store-theme.home .elementor-column:has(.products) .product-image {
	background: #f6f7fa !important;
}

/* Build 0004: catch the legacy homepage product modules that are not using
 * Porto's normal archive .product-col wrapper. Some old builder modules keep
 * their white background on a higher wrapper, so target every common product
 * module container that actually contains merchandise. */
body.relay-store-theme.home .main-content :is(
	.wpb_wrapper,
	.vc_column-inner,
	.elementor-widget-container,
	.elementor-widget-wrap,
	.elementor-element,
	.porto-block,
	.porto-products,
	.products-slider,
	.product-slider-wrapper,
	.owl-carousel,
	.owl-stage-outer
):has(.product-col),
body.relay-store-theme.home .main-content :is(
	.wpb_wrapper,
	.vc_column-inner,
	.elementor-widget-container,
	.elementor-widget-wrap,
	.elementor-element,
	.porto-block,
	.porto-products,
	.products-slider,
	.product-slider-wrapper
):has(.product_list_widget) {
	background: linear-gradient(180deg, rgba(18,25,44,.98), rgba(12,18,33,.98)) !important;
	border-color: var(--relay-border) !important;
	color: var(--relay-text-soft) !important;
}

body.relay-store-theme.home .main-content .product-col,
body.relay-store-theme.home .main-content .product-col > .product-inner,
body.relay-store-theme.home .main-content .product-col .product-content,
body.relay-store-theme.home .main-content .product_list_widget,
body.relay-store-theme.home .main-content .product_list_widget > li {
	background-color: transparent !important;
}

body.relay-store-theme.home .main-content .product-col > .product-inner {
	background: linear-gradient(180deg, rgba(21,29,49,.98), rgba(14,20,36,.98)) !important;
	border: 1px solid var(--relay-border) !important;
	border-radius: var(--relay-radius) !important;
}

body.relay-store-theme.home .main-content .product_list_widget > li {
	border-color: var(--relay-border) !important;
}

body.relay-store-theme.home .main-content .product_list_widget .product-title,
body.relay-store-theme.home .main-content .product_list_widget .amount,
body.relay-store-theme.home .main-content .product-col .product-title,
body.relay-store-theme.home .main-content .product-col .product-title a,
body.relay-store-theme.home .main-content .product-col .price,
body.relay-store-theme.home .main-content .product-col .price .amount {
	color: #f4f7ff !important;
}

/* Old Porto demo modules can use a fixed white background directly on a
 * column. Only touch columns that contain a WooCommerce product loop. */
body.relay-store-theme.home .main-content [style*="background-color: #fff"]:has(.product-col),
body.relay-store-theme.home .main-content [style*="background-color:#fff"]:has(.product-col),
body.relay-store-theme.home .main-content [style*="background: #fff"]:has(.product-col),
body.relay-store-theme.home .main-content [style*="background:#fff"]:has(.product-col),
body.relay-store-theme.home .main-content [style*="background-color: rgb(255, 255, 255)"]:has(.product-col) {
	background: linear-gradient(180deg, rgba(18,25,44,.98), rgba(12,18,33,.98)) !important;
}

/* Build 0013 — exact homepage hero fix.
 *
 * The live Elementor document (page 143) applies 25.5% LEFT PADDING directly
 * to hero section b63355d. That generated rule is the reason the Owl content
 * has always measured ~810px instead of the full ~1088px content holder.
 * Override that exact persisted Elementor section, not Porto's page layout. */
body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d {
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d > .elementor-container,
body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d > .elementor-container.porto-carousel,
body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d > .elementor-container.owl-carousel {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d .owl-stage-outer,
body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d .owl-stage,
body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d .owl-item {
	max-width: none !important;
}

body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d .owl-item img,
body.relay-store-theme.home .elementor-143 .elementor-element.elementor-element-b63355d img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 12px;
}

/* Keep the legacy divider labels readable regardless of Elementor/Porto's
 * generated heading color. */
body.relay-store-theme.home .relay-home-divider-label,
body.relay-store-theme.home .elementor-143 .section-title .relay-home-divider-label {
	display: inline-block !important;
	color: #f4f7ff !important;
	-webkit-text-fill-color: #f4f7ff !important;
	font-weight: 800 !important;
	opacity: 1 !important;
	visibility: visible !important;
}


/* Build 0014 — remove Porto/Bootstrap thumbnail chrome from the homepage hero.
 *
 * Porto wraps the Elementor/Owl hero images in .img-thumbnail, which normally
 * adds light padding/background/border. Those pixels appear as white edges
 * around the otherwise dark Relay hero artwork. Scope this strictly to the
 * known homepage hero section so product/gallery thumbnails are untouched. */
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
.img-thumbnail,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
.img-thumbnail.full {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    max-width: 100% !important;
}

body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
.img-thumbnail .inner {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
.img-thumbnail img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Build 0015 — definitive homepage hero edge cleanup.
 *
 * The remaining white "border" is exposed parent background around the image's
 * own rounded corners. Put the radius on the Owl viewport instead, clip there,
 * and neutralize all hero-only Elementor/Owl wrapper chrome. */
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d > .elementor-container,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .owl-stage-outer,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .owl-stage,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .owl-item,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .owl-item > *,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .elementor-element,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .elementor-widget-container,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d figure,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d a,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .img-thumbnail,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d .img-thumbnail .inner {
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
.owl-stage-outer {
    overflow: hidden !important;
    border-radius: 12px !important;
}

body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
.owl-item img,
body.relay-store-theme.home
.elementor-143
.elementor-element.elementor-element-b63355d
img {
    border-radius: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}