/* ============================================================
   Raza Gems — Motta Theme Overrides
   Scoped to body.raza-demo-active so nothing leaks when off.
   Restyles Motta's existing header, cart, hamburger, search
   modal, mobile navigation bar, and footer to match Raza Gems.
   ============================================================ */

body.raza-demo-active {
	--raza-gold:     #c9a84c;
	--raza-gold-dk:  #a8872e;
	--raza-black:    #1a1a1a;
	--raza-dark:     #111;
	--raza-muted:    #7c818b;
}

/* ─────────────────────────────────────────────────────────
   1. CAMPAIGN BAR (gold strip above header)
───────────────────────────────────────────────────────── */
body.raza-demo-active .campaign-bar,
body.raza-demo-active .campaign-bar__container {
	background: var(--raza-gold) !important;
	color: #fff !important;
}
body.raza-demo-active .campaign-bar .campaign-bar__item,
body.raza-demo-active .campaign-bar__item * {
	color: #fff !important;
	--mt-color__primary: #fff !important;
}
body.raza-demo-active .campaign-bar__button {
	color: #fff !important;
	border-color: rgba(255,255,255,0.5) !important;
}

/* ─────────────────────────────────────────────────────────
   2. HEADER — centred logo, gold accents
───────────────────────────────────────────────────────── */
body.raza-demo-active .site-header {
	background: #fff;
}
body.raza-demo-active .header-logo {
	color: var(--raza-gold) !important;
}
body.raza-demo-active .header-logo a {
	color: var(--raza-gold) !important;
	font-weight: 700;
	letter-spacing: 2px;
}

/* Header action icons — gold when active */
body.raza-demo-active .header-search .header-search__icon,
body.raza-demo-active .header-account .motta-button,
body.raza-demo-active .header-wishlist .motta-button,
body.raza-demo-active .header-cart .motta-button,
body.raza-demo-active .header-compare .motta-button {
	color: var(--raza-black) !important;
}
body.raza-demo-active .header-search:hover .header-search__icon,
body.raza-demo-active .header-account:hover .motta-button,
body.raza-demo-active .header-wishlist:hover .motta-button,
body.raza-demo-active .header-cart:hover .motta-button,
body.raza-demo-active .header-compare:hover .motta-button {
	color: var(--raza-gold) !important;
}

/* Cart / wishlist counter badges — gold */
body.raza-demo-active .header-cart__counter,
body.raza-demo-active .header-wishlist__counter,
body.raza-demo-active .header-compare__counter {
	background: var(--raza-gold) !important;
	color: #fff !important;
}

/* Primary menu links */
body.raza-demo-active .primary-navigation .nav-menu > li > a,
body.raza-demo-active .secondary-navigation .nav-menu > li > a {
	color: var(--raza-black) !important;
	font-weight: 500;
}
body.raza-demo-active .primary-navigation .nav-menu > li:hover > a,
body.raza-demo-active .primary-navigation .nav-menu > li.current-menu-item > a,
body.raza-demo-active .secondary-navigation .nav-menu > li:hover > a {
	color: var(--raza-gold) !important;
}

/* ─────────────────────────────────────────────────────────
   3. HAMBURGER PANEL (mobile menu off-canvas)
───────────────────────────────────────────────────────── */
body.raza-demo-active .off-canvas__header,
body.raza-demo-active .motta-panel__header {
	border-bottom: 1px solid #eee !important;
}
body.raza-demo-active .off-canvas__title,
body.raza-demo-active .motta-panel__title {
	letter-spacing: 2px;
	font-weight: 700;
	color: var(--raza-black) !important;
}

body.raza-demo-active .hamburger-menu a,
body.raza-demo-active .off-canvas .menu a,
body.raza-demo-active .mobile-menu a {
	color: var(--raza-black) !important;
	font-weight: 500;
	padding: 16px 20px !important;
	border-bottom: 1px solid #f0f0f0 !important;
}
body.raza-demo-active .hamburger-menu a:hover,
body.raza-demo-active .off-canvas .menu a:hover,
body.raza-demo-active .mobile-menu a:hover {
	color: var(--raza-gold) !important;
	background: #fafafa !important;
}

/* "LOG IN" / "CREATE ACCOUNT" buttons at panel bottom */
body.raza-demo-active .account-panel__buttons .motta-button,
body.raza-demo-active .hamburger-panel .motta-button--base,
body.raza-demo-active .account-panel .motta-button--base {
	background: var(--raza-gold) !important;
	border-color: var(--raza-gold) !important;
	color: #fff !important;
	border-radius: 40px !important;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 14px 24px !important;
}
body.raza-demo-active .account-panel__buttons .motta-button:hover,
body.raza-demo-active .hamburger-panel .motta-button--base:hover {
	background: var(--raza-gold-dk) !important;
	border-color: var(--raza-gold-dk) !important;
}
body.raza-demo-active .account-panel__buttons .motta-button--subtle,
body.raza-demo-active .account-panel__buttons .motta-button--text {
	background: #fff !important;
	color: var(--raza-black) !important;
	border: 1px solid var(--raza-black) !important;
}

/* ─────────────────────────────────────────────────────────
   4. SEARCH MODAL (the "Search Our Site" overlay)
───────────────────────────────────────────────────────── */
body.raza-demo-active .motta-modal--search .motta-modal__content,
body.raza-demo-active .search-modal,
body.raza-demo-active .motta-type--input-search-modal {
	border-radius: 40px !important;
	border: 1.5px solid #ddd !important;
}
body.raza-demo-active .motta-modal--search .header-search__field,
body.raza-demo-active .motta-modal__close {
	color: var(--raza-black) !important;
}
body.raza-demo-active .motta-modal--search .header-search__button {
	color: var(--raza-black) !important;
	background: transparent !important;
}
body.raza-demo-active .motta-modal--search .header-search__button:hover {
	color: var(--raza-gold) !important;
}

/* ─────────────────────────────────────────────────────────
   5. CART PANEL (side drawer)
───────────────────────────────────────────────────────── */
body.raza-demo-active .cart-panel__title,
body.raza-demo-active .panel-cart__title {
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--raza-black) !important;
}
body.raza-demo-active .free-shipping-bar,
body.raza-demo-active .woocommerce-free-shipping-bar {
	background: #f8f8f8 !important;
}
body.raza-demo-active .free-shipping-bar__progress,
body.raza-demo-active .woocommerce-free-shipping-bar__progress {
	background: var(--raza-gold) !important;
}
body.raza-demo-active .free-shipping-bar__text strong,
body.raza-demo-active .woocommerce-free-shipping-bar a {
	color: var(--raza-gold) !important;
}

/* Cart empty state */
body.raza-demo-active .cart-panel .motta-cart-empty__icon,
body.raza-demo-active .cart-panel__empty-icon {
	color: #d0d0d0 !important;
}

/* Return To Shop / Checkout buttons */
body.raza-demo-active .cart-panel .button,
body.raza-demo-active .cart-panel .motta-button,
body.raza-demo-active .cart-panel__buttons .button,
body.raza-demo-active .widget_shopping_cart .buttons .button {
	background: var(--raza-gold) !important;
	color: #fff !important;
	border-color: var(--raza-gold) !important;
	border-radius: 40px !important;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 14px 28px !important;
}
body.raza-demo-active .cart-panel .button:hover,
body.raza-demo-active .cart-panel .motta-button:hover,
body.raza-demo-active .widget_shopping_cart .buttons .button:hover {
	background: var(--raza-gold-dk) !important;
	border-color: var(--raza-gold-dk) !important;
}

/* The "Checkout" secondary white button */
body.raza-demo-active .cart-panel .checkout.wc-forward,
body.raza-demo-active .cart-panel .motta-button--large {
	background: var(--raza-black) !important;
	color: #fff !important;
}
body.raza-demo-active .cart-panel .checkout.wc-forward:hover {
	background: var(--raza-gold) !important;
}

/* ─────────────────────────────────────────────────────────
   6. MOBILE NAVIGATION BAR (bottom)
───────────────────────────────────────────────────────── */
body.raza-demo-active .motta-mobile-navigation-bar {
	background: #fff !important;
	border-top: 1px solid #eee !important;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}
body.raza-demo-active .motta-mobile-navigation-bar a {
	color: var(--raza-black) !important;
}
body.raza-demo-active .motta-mobile-navigation-bar a:hover,
body.raza-demo-active .motta-mobile-navigation-bar a.current {
	color: var(--raza-gold) !important;
}
body.raza-demo-active .motta-mobile-navigation-bar .counter {
	background: var(--raza-gold) !important;
	color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   7. FOOTER (dark)
───────────────────────────────────────────────────────── */
body.raza-demo-active .site-footer {
	background: var(--raza-dark) !important;
	color: rgba(255,255,255,0.7) !important;
}
body.raza-demo-active .site-footer h1,
body.raza-demo-active .site-footer h2,
body.raza-demo-active .site-footer h3,
body.raza-demo-active .site-footer h4,
body.raza-demo-active .site-footer h5,
body.raza-demo-active .site-footer .widget-title,
body.raza-demo-active .site-footer .widgettitle {
	color: #fff !important;
	font-weight: 700 !important;
}
body.raza-demo-active .site-footer a {
	color: rgba(255,255,255,0.7) !important;
	transition: color 0.2s;
}
body.raza-demo-active .site-footer a:hover {
	color: var(--raza-gold) !important;
}

/* Footer social icons */
body.raza-demo-active .site-footer .socials-navigation a,
body.raza-demo-active .site-footer .social-icons a {
	color: rgba(255,255,255,0.7) !important;
	border-color: rgba(255,255,255,0.2) !important;
}
body.raza-demo-active .site-footer .socials-navigation a:hover {
	color: var(--raza-gold) !important;
	border-color: var(--raza-gold) !important;
}

/* Newsletter form in footer */
body.raza-demo-active .site-footer input[type="email"],
body.raza-demo-active .site-footer input[type="text"] {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	color: #fff !important;
	border-radius: 40px !important;
}
body.raza-demo-active .site-footer input[type="email"]::placeholder,
body.raza-demo-active .site-footer input[type="text"]::placeholder {
	color: rgba(255,255,255,0.35) !important;
}
body.raza-demo-active .site-footer input[type="submit"],
body.raza-demo-active .site-footer button[type="submit"] {
	background: #fff !important;
	color: var(--raza-black) !important;
	border-radius: 40px !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	padding: 12px 24px !important;
	border: none;
}
body.raza-demo-active .site-footer input[type="submit"]:hover,
body.raza-demo-active .site-footer button[type="submit"]:hover {
	background: var(--raza-gold) !important;
	color: #fff !important;
}

/* Footer divider line before copyright */
body.raza-demo-active .site-footer .footer-bottom,
body.raza-demo-active .site-footer .motta-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* Payment method icons */
body.raza-demo-active .site-footer .payment-methods img,
body.raza-demo-active .site-footer img.payment-icon {
	background: #fff;
	padding: 4px 8px;
	border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────
   8. BACK-TO-TOP BUTTON
───────────────────────────────────────────────────────── */
body.raza-demo-active #gotop {
	background: var(--raza-black) !important;
	color: #fff !important;
	border-radius: 50% !important;
}
body.raza-demo-active #gotop:hover {
	background: var(--raza-gold) !important;
}

/* ─────────────────────────────────────────────────────────
   9. GLOBAL BUTTON OVERRIDES (WooCommerce + generic)
───────────────────────────────────────────────────────── */
body.raza-demo-active .woocommerce a.button.alt,
body.raza-demo-active .woocommerce button.button.alt,
body.raza-demo-active .woocommerce input.button.alt,
body.raza-demo-active .woocommerce-page a.button.alt,
body.raza-demo-active .woocommerce-page button.button.alt {
	background: var(--raza-gold) !important;
	border-color: var(--raza-gold) !important;
	border-radius: 40px !important;
	color: #fff !important;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 14px 28px !important;
}
body.raza-demo-active .woocommerce a.button.alt:hover,
body.raza-demo-active .woocommerce button.button.alt:hover {
	background: var(--raza-gold-dk) !important;
}

/* ─────────────────────────────────────────────────────────
   10. ALL RAZA PAGES — remove Motta's page header only
   Do NOT override widths/margins — Kirki controls the layout.
───────────────────────────────────────────────────────── */
body.raza-demo-active .page-header,
body.raza-demo-active .page-header--products,
body.raza-demo-active .page-header__title,
body.raza-demo-active .breadcrumb,
body.raza-demo-active .motta-breadcrumb {
	display: none !important;
}

body.raza-demo-active #site-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Hide any generic post title on raza pages */
body.raza-demo-active .page > .entry-header,
body.raza-demo-active .entry-title {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────
   FIX: Kirki inner container divs have margin-left:auto
   and margin-right:0 which pushes content to the right.
   Force all direct children of Kirki sections to center.
───────────────────────────────────────────────────────── */
body.raza-demo-active .kirki-body section > div,
body.raza-demo-active [data-kirki="body"] section > div {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Also target the hero slide content wrapper */
body.raza-demo-active .kirki-body section > div > div,
body.raza-demo-active [data-kirki="body"] section > div > div {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ─────────────────────────────────────────────────────────
   11. HEADER LAYOUT — recommendations only
   Most header changes require Motta Customizer settings.
   These CSS tweaks tighten spacing without restructuring.
───────────────────────────────────────────────────────── */
/* Subtle: force logo gold-tint + smaller spacing */
body.raza-demo-active .site-header .header-logo a:not(:has(img)) {
	color: var(--raza-gold) !important;
	font-weight: 800 !important;
	letter-spacing: 2px;
}

/* Campaign bar tighter close button so it doesn't overflow */
body.raza-demo-active .campaign-bar .motta-button--close,
body.raza-demo-active .campaign-bar button[aria-label*="lose"] {
	color: #fff !important;
	opacity: 0.8;
}
