/* Rivora — site header */

.rivora-top {
  position: sticky;
  top: 0;
  z-index: 500;
}

.rivora-header {
  /* Positioning context for the mega-menu panels: they are markup children of
     their <li> but must span the full header width, so the <li> is kept
     `position: static` and this is the nearest positioned ancestor. */
  position: relative;
  background: rgba(250, 248, 245, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rivora-border-subtle);
  font-family: var(--rivora-font-body);
}

.rivora-header__row {
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.rivora-header__logo {
  flex-shrink: 0;
  line-height: 0;
}

.rivora-header__logo .custom-logo-link {
  display: flex;
  align-items: center;
}

/*
 * ".rivora-header " prefix is deliberate, not decorative: Kadence's own
 * woocommerce.min.css ships ".woocommerce img, .woocommerce-page img
 * { height:auto; max-width:100% }", which has the same specificity as a bare
 * ".rivora-header__logo img" and loads AFTER our header.css on any
 * WooCommerce page (shop/cart/product/etc. all get a woocommerce-page body
 * class) — so it silently won the cascade and the logo rendered at native
 * size. Two classes beats one class+element regardless of load order.
 */
.rivora-header .rivora-header__logo img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.rivora-header__logo-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--rivora-ink-1);
  text-decoration: none;
  white-space: nowrap;
}

/* Desktop nav */
.rivora-header__nav--desktop {
  display: flex;
  align-items: center;
}

.rivora-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* static, not relative: see the note on .rivora-header — the mega panel must
   resolve against the header, not against this item. */
.rivora-nav-list__item {
  position: static;
  display: flex;
  align-items: center;
}

.rivora-nav-list__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rivora-link-initial);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  /* Padding + matching negative margin (no layout change) stretches the
     hover target down to the header's edge, so the pointer never leaves the
     item on its way to the panel below and the menu can't flicker shut. */
  padding-block: 18px;
  margin-block: -18px;
}

.rivora-nav-list__link:hover,
.rivora-nav-list__item--active > .rivora-nav-list__link,
.rivora-nav-list__item.is-open > .rivora-nav-list__link {
  color: var(--rivora-link-hover);
}

.rivora-nav-list__caret {
  flex-shrink: 0;
  transition: transform .2s ease;
}

.rivora-nav-list__item:hover .rivora-nav-list__caret,
.rivora-nav-list__item.is-open .rivora-nav-list__caret,
.rivora-nav-list__item:focus-within .rivora-nav-list__caret {
  transform: rotate(180deg);
}

/* ===== Desktop mega menu ===== */
.rivora-mega {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 30;
  background: var(--rivora-surface-card);
  border-top: 1px solid var(--rivora-border-subtle);
  box-shadow: var(--rivora-shadow-card-hover);
  /* Hidden with visibility rather than [hidden]/display:none so the panel can
     animate, and so the links stay in the DOM for crawlers while staying out
     of the tab order and the accessibility tree when closed. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* :hover on the <li> covers the panel too — CSS hover propagates up the DOM
   tree, and the panel is a descendant of the item — so the menu survives the
   pointer moving from the label into the panel with no JS involved. */
.rivora-nav-list__item:hover > .rivora-mega,
.rivora-nav-list__item.is-open > .rivora-mega,
.rivora-nav-list__item:focus-within > .rivora-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.rivora-mega__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 30px clamp(16px, 4vw, 32px) 22px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.rivora-mega__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 26px clamp(30px, 5vw, 70px);
}

.rivora-mega__col {
  flex: 0 1 auto;
  min-width: 150px;
}

.rivora-mega__col-title {
  display: block;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rivora-border-subtle);
  color: var(--rivora-ink-1);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.rivora-mega__col-title:hover {
  color: var(--rivora-gold-dark);
}

.rivora-mega__list,
.rivora-mega__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Natural widths in a wrapping row, not equal grid tracks: a category with a
   handful of children would otherwise get them strung out across the full
   1360px panel with big voids between. */
.rivora-mega__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px clamp(22px, 2.6vw, 40px);
}

.rivora-mega__list a,
.rivora-mega__grid a {
  display: block;
  padding: 6px 0;
  color: var(--rivora-ink-2);
  font-size: 13.5px;
  text-decoration: none;
}

.rivora-mega__list a:hover,
.rivora-mega__grid a:hover {
  color: var(--rivora-gold-dark);
}

.rivora-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rivora-border-subtle);
  width: 100%;
  color: var(--rivora-gold-dark);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.rivora-mega__all:hover {
  color: var(--rivora-gold-primary);
}

/* Actions cluster */
.rivora-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  flex-shrink: 0;
}

.rivora-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--rivora-ink-2);
  line-height: 0;
  position: relative;
  text-decoration: none;
}

.rivora-icon-btn:hover,
.rivora-icon-btn:focus,
.rivora-icon-btn:active {
  background: transparent;
  color: var(--rivora-gold-dark);
  box-shadow: none;
}

/* Search */
.rivora-header__search {
  position: relative;
  display: flex;
  align-items: center;
}

.rivora-search-panel {
  position: absolute;
  top: calc(100% + 18px);
  inset-inline-end: -8px;
  z-index: 40;
  background: var(--rivora-surface-card);
  border-radius: 999px;
  box-shadow: var(--rivora-shadow-card-hover);
  padding: 6px 8px;
}

.rivora-search-panel[hidden] {
  display: none;
}

.rivora-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rivora-search-input {
  width: 240px;
  max-width: 60vw;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rivora-font-body);
  font-size: 14px;
  color: var(--rivora-ink-1);
  padding: 8px 6px;
  border-radius: 999px;
}

.rivora-search-submit {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0 6px 0 0;
  color: var(--rivora-ink-3);
  cursor: pointer;
  display: flex;
}

.rivora-search-submit:hover,
.rivora-search-submit:focus,
.rivora-search-submit:active {
  background: transparent;
  color: var(--rivora-gold-dark);
  box-shadow: none;
}

.rivora-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  z-index: 41;
  background: var(--rivora-surface-card);
  border-radius: var(--rivora-radius-card);
  box-shadow: var(--rivora-shadow-card-hover);
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.rivora-search-suggestions[hidden] {
  display: none;
}

.rivora-search-suggestions__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.rivora-search-suggestions__item:hover,
.rivora-search-suggestions__item:focus-visible {
  background: var(--rivora-border-subtle);
}

.rivora-search-suggestions__img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--rivora-border-subtle);
}

.rivora-search-suggestions__body {
  min-width: 0;
}

.rivora-search-suggestions__name {
  display: block;
  font-size: 13px;
  color: var(--rivora-ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rivora-search-suggestions__cat {
  display: block;
  font-size: 12px;
  color: var(--rivora-ink-3);
  margin-top: 2px;
}

.rivora-search-suggestions__empty {
  padding: 12px 8px;
  font-size: 13px;
  color: var(--rivora-ink-3);
  text-align: center;
}

/* Account dropdown */
.rivora-header__account {
  position: relative;
  display: flex;
  align-items: center;
}

.rivora-account-panel {
  position: absolute;
  top: calc(100% + 18px);
  /* The account icon sits near the viewport's left edge; per the design the
     panel opens toward the page (design: left:0) — in the RTL header row
     that's inline-end, otherwise the panel hangs off-screen. */
  inset-inline-end: 0;
  z-index: 40;
  min-width: 220px;
  background: var(--rivora-surface-card);
  border-radius: var(--rivora-radius-card);
  box-shadow: var(--rivora-shadow-card-hover);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rivora-account-panel[hidden] {
  display: none;
}

.rivora-account-panel__user {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--rivora-border-subtle);
  margin-bottom: 4px;
}

.rivora-account-panel__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--rivora-ink-1);
  margin-bottom: 3px;
}

.rivora-account-panel__email {
  font-size: 12.5px;
  color: var(--rivora-ink-3);
  direction: ltr;
  text-align: end;
}

.rivora-account-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--rivora-ink-2);
  text-decoration: none;
  font-size: 14px;
}

.rivora-account-panel a:hover {
  background: var(--rivora-surface-2);
  color: var(--rivora-gold-dark);
}

/* Cart */
.rivora-header__cart {
  padding-inline-end: 2px;
}

.rivora-cart-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rivora-gold-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.rivora-cart-count--hidden {
  display: none;
}

/* Mobile toggle button — hidden on desktop */
.rivora-js-mobile-toggle {
  display: none;
}

/* Mobile full-screen nav overlay.
   font-family is required here: the drawer is a SIBLING of .rivora-header
   (see inc/header.php), so it does not inherit the header's Vazirmatn and
   would fall back to the system font. */
.rivora-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--rivora-surface-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-family: var(--rivora-font-body);
}

.rivora-mobile-nav[hidden] {
  display: none;
}

.rivora-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--rivora-border-subtle);
  flex-shrink: 0;
}

.rivora-mobile-nav__head .rivora-js-mobile-close {
  background: var(--rivora-surface-2);
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

/* Drill-down: every level is a sibling panel filling the drawer body, one
   visible at a time. Sibling (not nested) panels keep deep trees usable —
   no runaway indentation, and the tap target stays full-width at any level. */
.rivora-mobile-nav__body {
  position: relative;
  flex: 1;
  min-height: 0;
}

.rivora-mobile-nav__panels {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.rivora-mobile-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--rivora-surface-bg);
  padding: 8px clamp(16px, 4vw, 32px) 40px;
  /* RTL drawer: deeper levels wait off the left edge and slide in "forward". */
  transform: translateX(-100%);
  opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
}

.rivora-mobile-panel[hidden] {
  display: none;
}

.rivora-mobile-panel--active {
  transform: none;
  opacity: 1;
}

/* A panel the visitor has drilled past: pushed back the other way, so going
   deeper and coming back read as opposite motions. */
.rivora-mobile-panel--behind {
  transform: translateX(30%);
  opacity: 0;
}

.rivora-mobile-panel__back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 12px 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--rivora-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--rivora-ink-1);
}

/* Explicit background on the interaction states — Kadence paints a global
   `button:hover` background on any button that doesn't set its own. */
.rivora-mobile-panel__back:hover,
.rivora-mobile-panel__back:focus,
.rivora-mobile-panel__back:active {
  background: transparent;
  color: var(--rivora-gold-dark);
  box-shadow: none;
}

.rivora-mobile-panel__all {
  display: block;
  margin: 4px 0 10px;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--rivora-surface-2);
  color: var(--rivora-gold-dark);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.rivora-mobile-nav-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rivora-mobile-nav-list__item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--rivora-border-subtle);
}

/* The label is always a plain link to the category archive; drilling into
   sub-categories is the separate chevron button. Nothing is unreachable and
   nothing depends on JS to be a link. */
.rivora-mobile-nav-list__link {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 16px 2px;
  color: var(--rivora-ink-1);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.rivora-mobile-nav-list__item--active > .rivora-mobile-nav-list__link {
  color: var(--rivora-gold-dark);
}

.rivora-mobile-nav-list__drill {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--rivora-surface-2);
  color: var(--rivora-ink-2);
  cursor: pointer;
}

.rivora-mobile-nav-list__drill:hover,
.rivora-mobile-nav-list__drill:focus,
.rivora-mobile-nav-list__drill:active {
  background: var(--rivora-border-subtle);
  color: var(--rivora-gold-dark);
  box-shadow: none;
}

body.rivora-mobile-nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .rivora-mobile-panel,
  .rivora-mega,
  .rivora-nav-list__caret {
    transition: none;
  }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .rivora-header__nav--desktop {
    display: none;
  }

  .rivora-js-mobile-toggle {
    display: flex;
  }

  .rivora-search-input {
    width: 180px;
  }
}

@media (max-width: 480px) {
  .rivora-search-panel {
    inset-inline-end: -70px;
  }

  .rivora-search-input {
    width: 55vw;
  }
}