/*
Theme Name: RadPick
Theme URI: https://radpick.com
Description: RadPick — Flatsome child theme. Electric-blue primary on white, red sale accent, Poppins.
Author: RadPick
Template: flatsome
Version: 2.1.0
Text Domain: radpick-child
*/

/* 1. Brand tokens — RadPick palette: electric-blue primary, red sale accent */
:root {
  --rp-primary:  #2563eb; /* electric blue — buttons, top bar, nav pill, links (Flatsome --primary-color) */
  --rp-primary-d:#1d4ed8; /* hover */
  --rp-accent:   #d32f2f; /* sale prices */
  --rp-accent-d: #b71c1c;
  --rp-red:      #d32f2f;
  --rp-yellow:   #f2ba36;
  --rp-text:     #414141; /* body copy */
  --rp-ink:      #111111; /* headings */
  --rp-bg:       #ffffff;
  --rp-bg-alt:   #f7f7f8;
  --rp-border:   #e8e8e8;
}

/* 2. Typography — Poppins everywhere */
body, .nav, button, input, select, textarea {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  color: var(--rp-text);
}
h1,h2,h3,h4,h5,h6,.heading-font,.entry-title,.product-title,.widget-title {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--rp-ink);
}

/* 3. Brand color application (locks brand even if Customizer drifts) */
a { color: var(--rp-primary); }
a:hover { color: var(--rp-primary-d); }

.button.primary,
button[type="submit"] {
  background-color: var(--rp-primary);
  border-color: var(--rp-primary);
  color: #fff;
  border-radius: 4px;
}
/* Outline primary buttons fill blue on hover */
.button.primary.is-outline:hover {
  background-color: var(--rp-primary);
  border-color: var(--rp-primary);
  color: #fff;
}
.button.primary:hover { background-color: var(--rp-primary-d); border-color: var(--rp-primary-d); }
.button.secondary { background-color: var(--rp-ink); border-color: var(--rp-ink); color:#fff; }

/* Sale price red accent; sale badge red (distinct from the blue brand) */
.woocommerce .price ins,
.woocommerce .price > .amount { color: var(--rp-accent); text-decoration: none; }
.woocommerce span.onsale { background-color: var(--rp-accent); color:#fff; }
/* category card product-count text */
.product-category .count, ul.product-categories li .count { color: var(--rp-text); }

/* 4. Header — white main bar, blue top bar -------------------------------- */
/* Top bar (blue) links */
#top-bar, .header-top { background-color: var(--rp-primary) !important; }
#top-bar a, .header-top a, #top-bar .nav > li > a { color: #fff !important; }
#top-bar .nav > li > a:hover { color: #cfe0ff !important; }

/* WooCommerce store notice ("Free shipping…") — match the blue brand */
.woocommerce-store-notice,
p.demo_store,
.demo_store { background-color: var(--rp-primary) !important; color: #fff !important; }

/* Main header (white): black logo text + black icons */
.header-main { background-color: #ffffff !important; border-bottom: 1px solid var(--rp-border); }
.header-main .logo a,
.header-main #logo a { color: var(--rp-ink) !important; font-weight: 800; letter-spacing: .5px; }
.header-main .header-nav-icons a,
.header-main .cart-icon strong,
.header-main .icon-search,
.header-main .nav > li > a { color: var(--rp-ink) !important; }

/* Search box in header: light gray field + black button */
.header-main form.searchform input.search-field,
.header-main .ux-search-box input[type="search"] {
  background: #f2f2f3; border: 1px solid var(--rp-border); border-radius: 0; height: 44px;
}
.header-main .ux-search-box .ux-search-box__submit,
.header-main form.searchform button[type="submit"] {
  background: var(--rp-primary) !important; border: 0; border-radius: 0; color: #fff !important;
}

/* Bottom nav row: WHITE bar, dark links, black active "HOME" pill */
.header-bottom { background-color: #fff !important; border-top: 1px solid var(--rp-border); }
.header-bottom .nav > li > a { color: var(--rp-ink) !important; font-weight: 600; text-transform: uppercase; }
.header-bottom .nav > li > a:hover { color: #666666 !important; }
.header-bottom .nav > li.active > a,
.header-bottom .nav > li.current-menu-item > a,
.header-bottom .nav > li.current_page_item > a {
  background: var(--rp-primary); color: #fff !important; border-radius: 20px; padding: 6px 18px;
}
/* dropdown menus black, white text */
.nav-dropdown { background-color: var(--rp-primary); }
.nav-dropdown li > a { color: #fff; }
.nav-dropdown li > a:hover { background-color: #333333; color: #fff; }

/* 5. Full-bleed hero banner — break out of the boxed .row-main */
.rp-hero-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	line-height: 0;            /* kill the inline-image gap under the banner */
}
.rp-hero-fullbleed img {
	display: block;
	width: 100%;
	height: auto;
}
/* Remove the boxed top padding above the hero so it sits right under the nav */
.home #content .col-inner > .rp-hero-fullbleed:first-child { margin-top: 0; }
.home #content.page-wrapper { padding-top: 0; }

/* 6. Featured category cards — homepage row (big rounded) */
.rp-section-sub {
	text-align: center;
	max-width: 860px;
	margin: 0 auto 4px;
	color: #414141;
	font-size: 16px;
	line-height: 1.5;
}
.rp-featured-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	max-width: 1336px;
	margin: 26px auto 0;
}
.rp-cat-card {
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.rp-cat-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .45s ease;
}
.rp-cat-card:hover .rp-cat-img { transform: scale(1.06); }
.rp-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 48%);
}
.rp-cat-label {
	position: absolute;
	left: 0; right: 0; bottom: 18px;
	z-index: 2;
	text-align: center;
	color: #fff;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .4px;
}
@media (max-width: 849px) {
	.rp-featured-cats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}