/* Relay Radio Store Build 0026 — featured merchandise.
 * Applies only to the two correctly identified homepage modules.
 * Uses the original WooCommerce images, product links, prices and carousels. */

body.relay-store-theme.home .relay-featured-panel {
  --rf-border: rgba(54, 146, 202, .43);
  --rf-accent: #18c5ee;
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box;
  margin: 0 6px 8px !important;
  padding: 25px 22px 24px !important;
  background: linear-gradient(158deg, #14263c 0%, #0c1b30 58%, #0a1426 100%) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 17px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 16px 36px rgba(0, 0, 0, .26) !important;
  overflow: visible;
}
body.relay-store-theme.home .relay-featured-panel[data-relay-featured="newarrivals"] {
  --rf-border: rgba(148, 98, 230, .43);
  --rf-accent: #c28aff;
  background: linear-gradient(155deg, #1a213e 0%, #10182d 58%, #0a1425 100%) !important;
}
body.relay-store-theme.home .relay-featured-panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rf-accent), #408cfc, transparent);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--rf-accent) 35%, transparent);
  pointer-events: none;
  z-index: 2;
}
body.relay-store-theme.home .relay-featured-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 80% 0, rgba(52,133,208,.09), transparent 38%);
  pointer-events: none;
  z-index: -1;
}

/* Titles are real headings from the existing Elementor/Porto widgets. */
body.relay-store-theme.home .relay-featured-panel .relay-featured-heading {
  display: block !important;
  color: #f5f9ff !important;
  font-size: clamp(1.03rem, 1.4vw, 1.24rem) !important;
  font-weight: 850 !important;
  letter-spacing: .045em !important;
  line-height: 1.35 !important;
  margin: 0 0 21px !important;
  padding: 0 0 15px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  background: none !important;
  border-bottom: 1px solid rgba(105, 161, 210, .17) !important;
}
body.relay-store-theme.home .relay-featured-panel .relay-featured-heading::before,
body.relay-store-theme.home .relay-featured-panel .relay-featured-heading::after {
  border: 0 !important;
}

/* Preserve Porto's carousel layout and its Owl dimensions. Only the product
   card *inside* each slide is visually refashioned. */
body.relay-store-theme.home .relay-featured-panel .product-col,
body.relay-store-theme.home .relay-featured-panel li.product.relay-featured-product {
  box-sizing: border-box;
  padding: 0 2px 6px !important;
  background: transparent !important;
  text-align: center;
}
body.relay-store-theme.home .relay-featured-panel .product-col .product-inner,
body.relay-store-theme.home .relay-featured-panel li.product .product-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 11px 11px 16px !important;
  border: 1px solid rgba(73, 132, 181, .35) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #101d32 0%, #0d1729 100%) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.20) !important;
  overflow: hidden;
  height: 100%;
  text-align: center !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.relay-store-theme.home .relay-featured-panel .product-col .product-inner:hover,
body.relay-store-theme.home .relay-featured-panel li.product .product-inner:hover {
  transform: translateY(-3px);
  border-color: rgba(60,207,243,.6) !important;
  box-shadow: 0 15px 32px rgba(0,0,0,.32), 0 0 0 1px rgba(17,195,240,.08) !important;
}
body.relay-store-theme.home .relay-featured-panel[data-relay-featured="newarrivals"] .product-inner:hover {
  border-color: rgba(183,123,245,.65) !important;
}

/* Neutral, equal-size display stage around each *real* product photo.
   We never change src/srcset, replace the image, or color-filter merchandise. */
body.relay-store-theme.home .relay-featured-panel .product-col .product-image,
body.relay-store-theme.home .relay-featured-panel li.product .product-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: clamp(185px, 19vw, 248px) !important;
  min-height: 185px;
  padding: 10px;
  margin: 0 0 15px !important;
  background: #edf2f8 !important;
  border: 1px solid rgba(221,229,241,.95) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.82);
  overflow: hidden;
}
body.relay-store-theme.home .relay-featured-panel .product-col .product-image img,
body.relay-store-theme.home .relay-featured-panel li.product .product-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  filter: none !important;
  transition: transform .2s ease;
}
body.relay-store-theme.home .relay-featured-panel .product-col .product-inner:hover .product-image img,
body.relay-store-theme.home .relay-featured-panel li.product .product-inner:hover .product-image img {
  transform: scale(1.025);
}
/* Porto may have its own extra image layer (hover photo). Do not change
   visibility/opacity/display behavior of those layers. */

body.relay-store-theme.home .relay-featured-panel .product-col .product-content,
body.relay-store-theme.home .relay-featured-panel .product-col .product-details,
body.relay-store-theme.home .relay-featured-panel li.product .product-content,
body.relay-store-theme.home .relay-featured-panel li.product .product-details {
  padding: 0 5px 4px !important;
  min-height: 94px;
  background: transparent !important;
  text-align: center !important;
}
body.relay-store-theme.home .relay-featured-panel .category-list,
body.relay-store-theme.home .relay-featured-panel .product-categories {
  color: #98b4cb !important;
  margin: 0 0 9px !important;
  font-size: .7rem !important;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center !important;
}
body.relay-store-theme.home .relay-featured-panel .product-title,
body.relay-store-theme.home .relay-featured-panel .product-title a,
body.relay-store-theme.home .relay-featured-panel .woocommerce-loop-product__title,
body.relay-store-theme.home .relay-featured-panel .woocommerce-loop-product__title a {
  color: #eff7ff !important;
  margin: 0 0 10px !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  text-align: center !important;
}
body.relay-store-theme.home .relay-featured-panel .product-title a:hover,
body.relay-store-theme.home .relay-featured-panel .woocommerce-loop-product__title a:hover {
  color: #67d9ff !important;
}
body.relay-store-theme.home .relay-featured-panel .price,
body.relay-store-theme.home .relay-featured-panel .price .amount {
  display: inline-block;
  color: #fff !important;
  font-size: 1.10rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  text-align: center !important;
}

/* Visible, cohesive controls; nothing intercepts genuine product links. */
body.relay-store-theme.home .relay-featured-panel .owl-nav .owl-prev,
body.relay-store-theme.home .relay-featured-panel .owl-nav .owl-next,
body.relay-store-theme.home .relay-featured-panel .owl-nav button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 34px !important;
  height: 34px !important;
  color: #e8f9ff !important;
  background: #152a43 !important;
  border: 1px solid rgba(97,174,222,.7) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.24) !important;
  transition: background .2s ease, border-color .2s ease;
}
body.relay-store-theme.home .relay-featured-panel .owl-nav .owl-prev:hover,
body.relay-store-theme.home .relay-featured-panel .owl-nav .owl-next:hover {
  background: #1d4768 !important;
  border-color: #62d7ff !important;
}
body.relay-store-theme.home .relay-featured-panel .owl-nav .disabled {
  opacity: .38 !important;
  cursor: default;
}
body.relay-store-theme.home .relay-featured-panel .owl-dots .owl-dot.active span {
  background: var(--rf-accent) !important;
}

@media (max-width: 991px) {
  body.relay-store-theme.home .relay-featured-panel { margin: 0 4px 12px !important; padding: 20px 15px !important; }
  body.relay-store-theme.home .relay-featured-panel .product-col .product-image,
  body.relay-store-theme.home .relay-featured-panel li.product .product-image { height: 205px !important; }
}
@media (max-width: 600px) {
  body.relay-store-theme.home .relay-featured-panel { padding: 18px 12px !important; }
  body.relay-store-theme.home .relay-featured-panel .product-col .product-image,
  body.relay-store-theme.home .relay-featured-panel li.product .product-image { height: 225px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.relay-store-theme.home .relay-featured-panel .product-inner,
  body.relay-store-theme.home .relay-featured-panel .product-image img { transition: none !important; }
}

/* 0026 refinement: the legacy Elementor product modules add backgrounds on
 * multiple nested wrappers. Leave only one outer Relay panel and one card
 * frame; avoid the old padded panel-inside-panel appearance. */
body.relay-store-theme.home .elementor-143 .relay-featured-panel.relay-featured-panel {
  border-color: var(--rf-border) !important;
  border-radius: 17px !important;
  padding: 25px 22px 24px !important;
  background: linear-gradient(158deg, #14263c 0%, #0c1b30 58%, #0a1426 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 16px 36px rgba(0, 0, 0, .26) !important;
}
body.relay-store-theme.home .elementor-143 .relay-featured-panel.relay-featured-panel[data-relay-featured="newarrivals"] {
  background: linear-gradient(155deg, #1a213e 0%, #10182d 58%, #0a1425 100%) !important;
}
body.relay-store-theme.home .elementor-143 .relay-featured-panel :is(
  .porto-products, .products-slider, .product-slider-wrapper,
  .owl-carousel, .owl-stage-outer,
  .elementor-widget-porto_products > .elementor-widget-container,
  .elementor-widget-porto-products > .elementor-widget-container
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Do not change Owl carousel width or slide geometry. */
@media (max-width: 991px) {
  body.relay-store-theme.home .elementor-143 .relay-featured-panel.relay-featured-panel { padding: 20px 15px !important; }
}
@media (max-width: 600px) {
  body.relay-store-theme.home .elementor-143 .relay-featured-panel.relay-featured-panel { padding: 18px 12px !important; }
}