/*
 * Hides the studio React app's own nav bar on studio pages, since
 * templates/partials/header.php (the plugin's original site-wide nav) is
 * now rendered above the React root instead. The hero, catalogue, and
 * voucher experience below it are unchanged — only the header/nav bar
 * reverts to the previous design.
 */
#main-navigation {
  display: none !important;
}

/*
 * Loading the legacy stylesheet (needed for the restored header above)
 * also brought in a light html/body background rule intended for the
 * plugin's other pages. The studio hero fades its images to transparent
 * at the bottom, expecting a dark backdrop behind them — the light
 * background was showing through as a grey band. Only applies here,
 * since this file only loads on studio pages.
 */
html[data-sdgv-theme="dark"],
html[data-sdgv-theme="dark"] body {
  background: #0a0a0a !important;
}

html[data-sdgv-theme="light"],
html[data-sdgv-theme="light"] body {
  background: #fafafa !important;
}

/* Replaced by the plugin's original single image/video hero
   (sdgv_render_storefront_hero), rendered above the React root. */
#hero-section {
  display: none !important;
}

/*
 * The restored hero's "Shop Vouchers" button uses the legacy Design
 * Control Centre button colour (a different, darker gold than the
 * storefront's Imperial Gold accent) — confirmed by comparing computed
 * background colours live: #B8872A vs #C5A059. Matching it to the same
 * accent variable the rest of the studio page uses, so it's one
 * consistent colour instead of two different golds.
 */
.sdgv-cinematic-hero__cta--primary {
  background: var(--sdgv-btn-bg, #000000) !important;
  border-color: var(--sdgv-btn-bg, #000000) !important;
  color: var(--sdgv-btn-text, #ffffff) !important;
}
.sdgv-cinematic-hero__cta--primary:hover,
.sdgv-cinematic-hero__cta--primary:focus-visible {
  background: var(--sdgv-hover-bg, var(--sdgv-btn-bg, #000000)) !important;
  border-color: var(--sdgv-hover-bg, var(--sdgv-btn-bg, #000000)) !important;
  color: var(--sdgv-hover-text, var(--sdgv-btn-text, #ffffff)) !important;
}

/* The customer accent picker is replaced by the merchant's Portal setting. */
#vora-studio-root .rounded-2xl:has([id^="btn-palette-"]) {
  display: none !important;
}