/* ============================================================
   uicompose — Unified Site Header (matches index visual style)
   ============================================================ */

/* Inter is self-hosted via font-system.css (loaded on every page);
   the external rsms.me @import that lived here was redundant. */

:root {
  --uic-h-line: #e6e6e6;
  --uic-h-line-2: rgba(0, 0, 0, .12);
  --uic-h-purple: #8735ee;
  --uic-h-ink: #000;
  --uic-h-muted: #4c4a52;
  --uic-h-ease: cubic-bezier(.22, 1, .36, 1);
  --uic-h-font: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------
   Full header — only used on inner pages where .site-header
   is the root wrapper. Won't affect index (which uses its own
   WordPress theme header).
   ------------------------------------------------------------ */

.site-header {
  width: 100%;
  height: 72px;
  padding-inline: max(24px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  background: #fff;
  border-bottom: 1px solid var(--uic-h-line);
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: var(--uic-h-font);
}

/* Full-width variant — product listing + product-details pages */
.site-header.detail-header {
  padding-inline: 20px;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  height: 28px;
  width: auto;
  font-size: 0;
  line-height: 0;
}

.site-header .brand img {
  display: block;
  height: 26px;
  width: auto;
}

.site-header .brand .brand-mark,
.site-header .brand > span:not(.brand-text-svg) {
  display: none !important;
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  font-family: var(--uic-h-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.site-header .nav a {
  color: var(--uic-h-ink);
  font-family: var(--uic-h-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 12px 0;
  position: relative;
  transition: color .25s var(--uic-h-ease);
}

.site-header .nav a::after {
  display: none !important;
  content: none !important;
}

.site-header .nav a:hover,
.site-header .nav a.is-active {
  color: var(--uic-h-purple);
}

.site-header .contact {
  display: none !important;
}

/* ─────────────── Resources dropdown ───────────────
   A hover-/focus-triggered menu inside the main nav. Used for
   grouping About / Blog / Pricing under one "Resources" item. */
.site-header .nav .nav-dropdown {
  position: relative;
}
.site-header .nav .nav-dropdown-trigger {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--uic-h-ink);
  font-family: var(--uic-h-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .25s var(--uic-h-ease);
}
.site-header .nav .nav-dropdown-trigger svg {
  transition: transform .2s var(--uic-h-ease);
}
.site-header .nav .nav-dropdown:hover .nav-dropdown-trigger,
.site-header .nav .nav-dropdown:focus-within .nav-dropdown-trigger {
  color: var(--uic-h-purple);
}
.site-header .nav .nav-dropdown:hover .nav-dropdown-trigger svg,
.site-header .nav .nav-dropdown:focus-within .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.site-header .nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 180px;
  padding: 8px;
  background: #fff;
  border: 1px solid #ece8f3;
  border-radius: 12px;
  box-shadow: 0 18px 48px -16px rgba(15, 15, 20, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
/* Invisible hover bridge across the trigger → menu gap. Without it, the
   cursor crossing the 4px gap leaves the hover area and the dropdown
   closes before reaching the menu. The bridge extends the menu's hover
   surface up over the gap so the hover stays continuous. */
.site-header .nav .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 12px;
}
.site-header .nav .nav-dropdown:hover .nav-dropdown-menu,
.site-header .nav .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-header .nav .nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--uic-h-ink);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.site-header .nav .nav-dropdown-menu a:hover {
  background: #f7f4fb;
  color: var(--uic-h-purple);
}
.site-header .nav .nav-dropdown-menu a.is-active {
  background: #ede4ff;
  color: var(--uic-h-purple);
}

/* ------------------------------------------------------------
   Search + Category bar
   Hardened with !important so WordPress / Bootstrap / Elementor
   styles on the index page cannot override layout or sizing.
   ------------------------------------------------------------ */

.site-header-end {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.site-header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 50px !important;
  width: max-content !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition: border-color .25s var(--uic-h-ease), box-shadow .25s var(--uic-h-ease);
}

/* The previous version of this file contained ~128 lines of
   workarounds targeting the WP/elementor home-page header
   (`header.con-1`, `.theme-main-menu.header-layout1`, `.main-menu`).
   The home page now uses the same `.site-header` structure as the
   inner pages, so all of those selectors are dead code. Removed
   intentionally — if you reintroduce a WP header anywhere, restore
   from git rather than rebuilding by hand. */

.site-header-actions:focus-within {
  border-color: var(--uic-h-purple) !important;
  box-shadow: 0 0 0 3px rgba(135, 53, 238, .12) !important;
}

.site-header-search {
  position: relative !important;
  width: 240px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px 0 44px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.site-header-search svg {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  color: var(--uic-h-muted) !important;
  pointer-events: none !important;
  flex: 0 0 18px !important;
  display: block !important;
  overflow: visible !important;
}

.site-header-search svg circle,
.site-header-search svg line,
.site-header-search svg path {
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

.site-header-search input {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--uic-h-font);
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--uic-h-ink) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.site-header-search input::placeholder {
  color: var(--uic-h-muted) !important;
  opacity: 1 !important;
}

.site-header-category {
  position: relative !important;
  width: 132px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(0, 0, 0, .12) !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 132px !important;
}

.site-header-category select {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 38px 0 18px !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  font-family: var(--uic-h-font);
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--uic-h-ink) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.site-header-category::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid var(--uic-h-ink) !important;
  transform: translateY(-50%) !important;
  background: none !important;
  pointer-events: none !important;
}

.site-header-category select::-ms-expand {
  display: none !important;
}

/* ------------------------------------------------------------
   Cart + Auth buttons (right-side actions cluster)
   ------------------------------------------------------------ */

/* Auth buttons should paint with the header immediately. auth-state.js
   upgrades the labels to Dashboard / Sign out from cache or the server,
   but the default Sign in / Sign up CTAs remain visible on first paint. */

.site-header-auth {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: 14px !important;
  font-family: var(--uic-h-font) !important;
}

.site-header-cart {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--uic-h-ink) !important;
  cursor: pointer !important;
  transition: border-color .25s var(--uic-h-ease), transform .25s var(--uic-h-ease), box-shadow .25s var(--uic-h-ease), color .25s var(--uic-h-ease) !important;
}

.site-header-cart svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  color: currentColor !important;
  pointer-events: none !important;
  display: block !important;
}

.site-header-cart svg path,
.site-header-cart svg circle,
.site-header-cart svg line {
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none !important;
}

.site-header-cart:hover {
  border-color: var(--uic-h-purple) !important;
  color: var(--uic-h-purple) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(135, 53, 238, .14) !important;
}

.site-header-cart .cart-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--uic-h-purple) !important;
  color: #fff !important;
  font-family: var(--uic-h-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

.site-header-signin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--uic-h-ink) !important;
  font-family: var(--uic-h-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: border-color .25s var(--uic-h-ease), color .25s var(--uic-h-ease), transform .25s var(--uic-h-ease), box-shadow .25s var(--uic-h-ease) !important;
}

.site-header-signin:hover {
  border-color: var(--uic-h-purple) !important;
  color: var(--uic-h-purple) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(135, 53, 238, .12) !important;
}

.site-header-signup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: var(--uic-h-ink) !important;
  color: #fff !important;
  font-family: var(--uic-h-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
  cursor: pointer !important;
  /* Hover = colour change only (no lift, shadow or shine sweep). */
  transition: background-color .2s var(--uic-h-ease) !important;
}

.site-header-signup:hover {
  background: var(--uic-h-purple) !important;
}

@media (max-width: 1180px) {
  .site-header-auth {
    gap: 8px !important;
    margin-left: 8px !important;
  }

  .site-header-signin {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .site-header-signup {
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  .site-header-cart {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ------------------------------------------------------------
   Hero search bar (replaces hero CTA)
   ------------------------------------------------------------ */

.hero-search-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: 32px auto 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 30 !important;
}

.hero-search-bar {
  display: flex !important;
  align-items: stretch !important;
  height: 64px !important;
  width: min(620px, calc(100% - 32px)) !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
  border-radius: 14px !important;
  overflow: visible !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: var(--uic-h-font) !important;
  transition: border-color .25s var(--uic-h-ease), box-shadow .25s var(--uic-h-ease) !important;
}

.hero-search-bar:focus-within {
  border-color: var(--uic-h-purple) !important;
  box-shadow: 0 0 0 3px rgba(135, 53, 238, .12) !important;
}

.hero-search-bar .hero-search-input {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px 0 56px !important;
  background: transparent !important;
}

.hero-search-bar .hero-search-input svg {
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  color: var(--uic-h-muted) !important;
  pointer-events: none !important;
  display: block !important;
}

.hero-search-bar .hero-search-input svg circle,
.hero-search-bar .hero-search-input svg line {
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

.hero-search-bar input[type="search"],
.hero-search-bar input[type="text"] {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--uic-h-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--uic-h-ink) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.hero-search-bar input::placeholder {
  color: var(--uic-h-muted) !important;
  opacity: 1 !important;
}

.hero-search-bar .hero-search-category {
  position: relative !important;
  z-index: 35 !important;
  flex: 0 0 178px !important;
  width: 178px !important;
  height: 100% !important;
  border-left: 1px solid rgba(0, 0, 0, .12) !important;
  background: #fff !important;
}

.hero-search-bar .uic-select-trigger {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 42px 0 22px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-family: var(--uic-h-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--uic-h-ink) !important;
  text-align: left !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  appearance: none !important;
}

.hero-search-bar .hero-search-category::after {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  border-right: 1.8px solid var(--uic-h-ink) !important;
  border-bottom: 1.8px solid var(--uic-h-ink) !important;
  background: transparent !important;
  transform: translateY(-70%) rotate(45deg) !important;
  transition: transform .25s var(--uic-h-ease) !important;
  pointer-events: none !important;
}

.hero-search-bar .hero-search-category[data-open="true"]::after {
  transform: translateY(-30%) rotate(225deg) !important;
}

.hero-search-bar .hero-search-category:focus-within::after {
  transform: translateY(-30%) rotate(225deg) !important;
}

/* Custom dropdown menu */
.hero-search-bar .uic-select-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border: 1px solid var(--uic-h-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 18px 40px rgba(24, 18, 34, .1), 0 4px 10px rgba(24, 18, 34, .04) !important;
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
  z-index: 80 !important;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--uic-h-ease), transform .2s var(--uic-h-ease);
}

.hero-search-bar .hero-search-category[data-open="true"] .uic-select-menu {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}

.hero-search-bar .hero-search-category:focus-within .uic-select-menu {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}

.hero-search-bar .uic-select-menu button {
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--uic-h-ink) !important;
  font-family: var(--uic-h-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color .2s var(--uic-h-ease), color .2s var(--uic-h-ease) !important;
}

.hero-search-bar .uic-select-menu button:hover {
  background: rgba(135, 53, 238, .08) !important;
  color: var(--uic-h-purple) !important;
}

.hero-search-bar .uic-select-menu button[aria-selected="true"] {
  background: rgba(135, 53, 238, .1) !important;
  color: var(--uic-h-purple) !important;
}

.hero-search-bar .uic-select-menu button[aria-selected="true"]::after {
  content: "✓" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--uic-h-purple) !important;
}

.hero-search-bar .hero-search-submit {
  flex: 0 0 auto !important;
  padding: 0 28px !important;
  margin: 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--uic-h-ink) !important;
  color: #fff !important;
  font-family: var(--uic-h-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .3s var(--uic-h-ease), box-shadow .3s var(--uic-h-ease), background-color .3s var(--uic-h-ease) !important;
}

.hero-search-bar .hero-search-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 0 28%, rgba(255, 255, 255, .22) 42%, transparent 56%);
  transform: translateX(-120%);
  transition: transform .7s var(--uic-h-ease);
}

.hero-search-bar .hero-search-submit:hover {
  background: var(--uic-h-purple) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(135, 53, 238, .28) !important;
}

.hero-search-bar .hero-search-submit:hover::before {
  transform: translateX(120%);
}

@media (max-width: 720px) {
  .hero-search-bar {
    height: 56px !important;
    border-radius: 12px !important;
  }

  .hero-search-bar .hero-search-input {
    padding-left: 48px !important;
  }

  .hero-search-bar .hero-search-input svg {
    left: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .hero-search-bar .hero-search-category {
    display: none !important;
  }

  .hero-search-bar .hero-search-submit {
    padding: 0 18px !important;
    font-size: 14px !important;
  }
}

/* ------------------------------------------------------------
   Hero floating pointer shapes — anchor to centered content box
   (1140px container), not viewport edges. Hide on tab/mobile.
   ------------------------------------------------------------ */

.home-banner {
  position: relative !important;
}

/* Two floating speech-bubble badges around the hero. Rebuilt in HTML/CSS
   (was raster .pointer-1.png / .pointer-2.png) so the text inside is
   live-editable from the site-design admin. Aim: match the original
   PNG design exactly — flat solid colour, gentle tilt, triangular
   pointer that "sticks out" toward the headline. */
.home-banner .uic-hero-tag {
  position: absolute !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  padding: 11px 28px !important;   /* height −15%, width unchanged */
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 15px !important;      /* +10% just the text, keep bubble size */
  font-weight: 500 !important;     /* medium */
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 24px rgba(15, 15, 20, .06) !important;
}
.home-banner .uic-hero-tag span { display: inline-block; }
.home-banner .uic-hero-tag--purple {
  background: #a259ff !important;
  left: 50% !important;
  margin-left: -740px !important;
  top: 22% !important;
  transform: rotate(-4deg);
  /* Animates the `translate` property (independent of `transform`),
     so the existing rotation stays intact. */
  animation: uic-hero-tag-float 4s ease-in-out infinite;
}
.home-banner .uic-hero-tag--mint {
  background: #00d2a3 !important;
  right: 50% !important;
  margin-right: -740px !important;
  /* +100px lower per feedback (was 38% + 50px). */
  top: calc(38% + 150px) !important;
  transform: rotate(4deg);
  animation: uic-hero-tag-float 4s ease-in-out infinite;
  /* Offset start so the mint pill doesn't move in lockstep with the
     purple one — feels more alive. */
  animation-delay: -2s;
}
@keyframes uic-hero-tag-float {
  0%, 100% { translate: 0 -10px; }
  50%      { translate: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-banner .uic-hero-tag--purple,
  .home-banner .uic-hero-tag--mint { animation: none; }
}
/* Triangular pointer "tail" — sits BELOW the pill with a small gap so
   it reads as a separate callout arrow (matches the original PNG art).
   Purple's tail is at bottom-right; mint mirrors to bottom-left. */
/* Side-pointing tails — purple bubble sits to the LEFT of the
   headline so its tail sticks out the RIGHT side, pointing toward the
   heading. Mint bubble is on the right, so its tail points LEFT. */
.home-banner .uic-hero-tag::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: 1;
}
.home-banner .uic-hero-tag--purple::after {
  width: 16px;       /* −10% again */
  height: 19px;
  right: -12px;
  bottom: -12px;
  /* Triangle pointing right with a slight downward lean toward the heading. */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(40deg);
}
.home-banner .uic-hero-tag--mint::after {
  width: 16px;
  height: 19px;
  left: -15px;
  bottom: -8px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: rotate(-40deg);
}

@media (max-width: 1199px) {
  .home-banner .uic-hero-tag {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Hero responsive — fluid title + spacing, no slider overlap
   ------------------------------------------------------------ */

.home-banner .main-title {
  font-size: clamp(30px, 4.6vw, 70px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
}

.home-banner .home-description,
.home-banner .description {
  font-size: clamp(14px, 1.2vw, 18px) !important;
  line-height: 1.5 !important;
}

.home-banner .version-number {
  font-size: clamp(12px, 0.9vw, 14px) !important;
}

.home-banner .platform-badge-wrap .badge {
  font-size: clamp(12px, 1vw, 14px) !important;
  /* Force every badge to the same height so labels of different widths
     (Figma vs HTML vs Framer) line up perfectly. */
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  gap: 8px;
}
.home-banner .platform-badge-wrap .badge img.platform-logo {
  height: 20px !important;
  width: auto !important;
  display: inline-block !important;
}
/* Mobile: badges wrap to multiple lines — give them a small consistent
   row-gap so they don't visually crash into each other. The horizontal
   gap is already handled by the wrap's flex/inline gap on the public
   site; this just adds 5px breathing room between rows. */
@media (max-width: 760px) {
  .home-banner .platform-badge-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    row-gap: 5px !important;
  }
}

/* Banner needs breathing room before the slider section */
.home-banner {
  padding-bottom: clamp(48px, 6vw, 96px) !important;
}

/* Keep Elementor's tilt on the slider, just give the section enough
   breathing room above so it never crashes into the hero. */
.elementor-element.template-list-slider-bg,
.template-list-slider-bg {
  margin-top: 0 !important;
  padding-top: clamp(24px, 3vw, 48px) !important;
}

@media (max-width: 1199px) {
  .home-banner {
    padding-top: clamp(40px, 6vw, 80px) !important;
    padding-bottom: clamp(40px, 6vw, 80px) !important;
  }

  .home-banner .main-title {
    font-size: clamp(28px, 5vw, 48px) !important;
  }
}

@media (max-width: 720px) {
  .home-banner .main-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    padding-inline: 8px !important;
  }

  .home-banner .home-description,
  .home-banner .description {
    font-size: 14px !important;
    padding-inline: 8px !important;
  }
}

/* keep hidden helper boxes from breaking flex layout */
#uicSearchResult,
#uicSearchResultMobile {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  z-index: 60 !important;
}

/* product-details inherits the default .site-header styling
   (full-width bg, container-width content) — no width override here. */

/* ---- Responsive ---- */

@media (max-width: 1180px) {
  .site-header {
    padding: 0 32px;
    gap: 24px;
  }

  .site-header .nav {
    gap: 36px;
  }

  .site-header-search {
    width: 200px !important;
  }

  .site-header-category {
    width: 116px !important;
    flex-basis: 116px !important;
  }
}

/* Admin live-preview iframes (anything loaded with ?admin-preview=1)
   ALWAYS use the compact header layout regardless of iframe width.
   The body gets `.is-admin-preview` from theme.js — match that here.
   Same rules as the @media (max-width: 1180px) block below. */
body.is-admin-preview .site-header,
html.is-admin-preview .site-header {
  height: auto;
  padding: 14px 22px;
  grid-template-columns: 1fr auto;
  gap: 14px 22px;
}
body.is-admin-preview .site-header .nav,
html.is-admin-preview .site-header .nav {
  /* !important needed to beat polish.css's
     `.nav { display: inline-flex !important }` rule. */
  display: none !important;
}

@media (max-width: 1180px) {
  /* Breakpoint bumped from 1050 → 1180 so the desktop nav collapses
     to the hamburger on tablets AND inside the admin's live-preview
     iframe (which renders at ~900–1000px wide depending on viewport).
     Without this, the nav + auth buttons wrap to two rows in the
     iframe. */
  .site-header {
    height: auto;
    padding: 14px 22px;
    grid-template-columns: 1fr auto;
    gap: 14px 22px;
  }

  .site-header .nav {
    display: none;
  }

  .site-header-actions {
    grid-column: 1 / -1;
    width: 100% !important;
    height: 46px !important;
  }

  .site-header-search {
    flex: 1 !important;
    width: auto !important;
  }
}

@media (max-width: 720px) {
  .site-header-category {
    width: 110px !important;
    flex-basis: 110px !important;
  }
}