/* Defaults – every value can be changed from the widget's Style tab. */
.rhm {
  --rhm-gap: 32px;
  /* --rhm-media-w: image column width; unset = all columns equal */
  --rhm-media-h: 360px;
  --rhm-media-radius: 12px;
  --rhm-media-bg: rgba(0, 0, 0, .05);
  --rhm-img-fit: cover;
  --rhm-img-pos: center center;
  --rhm-fade: 450ms;
  --rhm-col-align: start;
  --rhm-heading-color: #0f3b2c;
  --rhm-heading-gap: 28px;
  --rhm-line: #e3e3e3;
  --rhm-line-w: 1px;
  --rhm-line-style: solid;
  --rhm-item-py: 24px;
  --rhm-item-gap: 16px;
  --rhm-title-color: #0f3b2c;
  --rhm-title-gap: 6px;
  --rhm-desc-color: #5f6b66;
  --rhm-price-color: #0f3b2c;
  --rhm-active-bg: #24874f;
  --rhm-active-text: #fff;
  --rhm-active-px: 12px;
  --rhm-active-radius: 6px;
  --rhm-speed: 300ms;
  --rhm-wave-offset: 8px;  /* gap between the separator (line/wave) and the active box */
  --rhm-wave-h: 3px;       /* wave height (the separator slot is this tall) */
  --rhm-wave-l: 18px;      /* length of one wave */
  --rhm-wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q6-2 12 4T24 4' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  display: grid;
  gap: var(--rhm-gap);
}

/* Layouts. Menu columns share the space equally; the image column is equal
   too unless "Image Column Width" is set. */
.rhm:where(.rhm--two.rhm--img-middle) {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--rhm-media-w, 1fr)) minmax(0, 1fr);
  grid-template-areas: "left media right";
}
.rhm:where(.rhm--two.rhm--img-left) {
  grid-template-columns: minmax(0, var(--rhm-media-w, 1fr)) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "media left right";
}
.rhm:where(.rhm--two.rhm--img-right) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, var(--rhm-media-w, 1fr));
  grid-template-areas: "left right media";
}
.rhm:where(.rhm--one.rhm--img-left) {
  grid-template-columns: minmax(0, var(--rhm-media-w, 1fr)) minmax(0, 1fr);
  grid-template-areas: "media left";
}
.rhm:where(.rhm--one.rhm--img-right) {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--rhm-media-w, 1fr));
  grid-template-areas: "left media";
}

.rhm .rhm__col--left  { grid-area: left; }
.rhm .rhm__col--right { grid-area: right; }
.rhm .rhm__col        { align-self: var(--rhm-col-align); }
.rhm .rhm__media      { grid-area: media; }

.rhm .rhm__heading {
  margin: 0 0 var(--rhm-heading-gap);
  color: var(--rhm-heading-color);
  font-size: 32px;
  line-height: 1.1;
  text-transform: uppercase;
}
/* Layout of a list (nothing here changes on hover, so the list never moves):
     [top separator]  item  [separator]  item  [separator] ...
   A separator is a slot as tall as the wave. Normally it shows the divider
   line in its middle; around the active item it shows the wave instead. */
.rhm {
  --rhm-sep-h: var(--rhm-line-w);
}
.rhm.rhm--wave {
  --rhm-sep-h: max(var(--rhm-wave-h), var(--rhm-line-w));
}
/* The active box may be taller than a normal item (Box Padding Top / Bottom).
   A list keeps that extra height as room at its bottom while none of its items
   is active and hands it to the active item with the same timing – so no list
   changes height, and the image beside the lists does not jump when the mouse
   goes from one list to the other. */
.rhm {
  --rhm-grow: max(0px, calc(var(--rhm-wave-offset) * 2 + var(--rhm-active-pt, max(0px, var(--rhm-item-py) - var(--rhm-wave-offset))) + var(--rhm-active-pb, max(0px, var(--rhm-item-py) - var(--rhm-wave-offset))) - var(--rhm-item-py) * 2));
}
.rhm .rhm__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: var(--rhm-sep-h) 0 var(--rhm-grow); /* room for the top separator */
  transition: padding-bottom var(--rhm-speed) ease;
}
.rhm .rhm__list:has(> .rhm__item.is-active) {
  padding-bottom: 0;
}
.rhm .rhm__item {
  position: relative;
  margin: 0;
  padding: 0;
}
.rhm .rhm__link {
  position: relative;
  z-index: 1; /* above the active box */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rhm-item-gap);
  padding: var(--rhm-item-py) 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: padding var(--rhm-speed) ease;
}

/* Separators: the item's own slot (.rhm__sep) and the list's top slot (::before/::after). */
.rhm .rhm__sep {
  position: relative;
  display: block;
  height: var(--rhm-sep-h);
}
.rhm .rhm__sep::before,
.rhm .rhm__list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rhm-sep-h) / 2 - var(--rhm-line-w) / 2);
  border-top: var(--rhm-line-w) var(--rhm-line-style) var(--rhm-line);
  transition: opacity var(--rhm-speed) ease;
}
.rhm.rhm--wave .rhm__sep::after,
.rhm.rhm--wave .rhm__list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--rhm-sep-h);
  background: var(--rhm-wave-color, var(--rhm-active-bg));
  -webkit-mask: var(--rhm-wave-img) repeat-x left center / var(--rhm-wave-l) var(--rhm-wave-h);
          mask: var(--rhm-wave-img) repeat-x left center / var(--rhm-wave-l) var(--rhm-wave-h);
  opacity: 0;
  transition: opacity var(--rhm-speed) ease;
  pointer-events: none;
}
/* Around the active item: line out, wave in. */
.rhm.rhm--wave .rhm__item.is-active > .rhm__sep::before,
.rhm.rhm--wave .rhm__item:has(+ .is-active) > .rhm__sep::before,
.rhm.rhm--wave .rhm__list:has(> .is-active:first-child)::before { opacity: 0; }
.rhm.rhm--wave .rhm__item.is-active > .rhm__sep::after,
.rhm.rhm--wave .rhm__item:has(+ .is-active) > .rhm__sep::after,
.rhm.rhm--wave .rhm__list:has(> .is-active:first-child)::after { opacity: 1; }
.rhm .rhm__link:focus,
.rhm .rhm__item:focus { outline: none; }
.rhm .rhm__link:focus-visible,
.rhm .rhm__item:focus-visible { outline: 2px solid var(--rhm-active-bg); outline-offset: 4px; }
.rhm .rhm__title {
  margin: 0 0 var(--rhm-title-gap);
  color: var(--rhm-title-color);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color var(--rhm-speed) ease;
}
.rhm .rhm__desc {
  margin: 0;
  color: var(--rhm-desc-color);
  font-size: 14px;
  line-height: 1.5;
  transition: color var(--rhm-speed) ease;
}
.rhm .rhm__price {
  flex: 0 0 auto;
  color: var(--rhm-price-color);
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--rhm-speed) ease;
}
/* WooCommerce sale price: old price smaller and faded */
.rhm .rhm__price del {
  margin-right: 6px;
  font-size: .7em;
  color: var(--rhm-price-old, inherit);
  opacity: var(--rhm-price-old-op, .6);
}
.rhm .rhm__price ins { text-decoration: none; color: inherit; }
.rhm .rhm__price .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Active item: colored box painted behind the text, between the separators,
   with a gap to them. Box padding top/bottom default to Vertical Padding − gap,
   which keeps the item the same height as a normal one (nothing moves). */
.rhm .rhm__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--rhm-wave-offset);
  bottom: calc(var(--rhm-sep-h) + var(--rhm-wave-offset));
  background: var(--rhm-active-bg);
  border-radius: var(--rhm-active-radius);
  opacity: 0;
  transition: opacity var(--rhm-speed) ease;
  pointer-events: none;
}
.rhm .rhm__item.is-active::before { opacity: 1; }
.rhm .rhm__item.is-active .rhm__link {
  padding-top: calc(var(--rhm-wave-offset) + var(--rhm-active-pt, max(0px, var(--rhm-item-py) - var(--rhm-wave-offset))));
  padding-bottom: calc(var(--rhm-wave-offset) + var(--rhm-active-pb, max(0px, var(--rhm-item-py) - var(--rhm-wave-offset))));
}
/* Left/right inset of the active item: the text keeps the same width in both
   states (room reserved on its right), and is only shifted with transform –
   so a description never re-wraps and nothing moves. */
.rhm .rhm__text  { padding-right: calc(var(--rhm-active-px) * 2); transition: transform var(--rhm-speed) ease; }
.rhm .rhm__price { transition: transform var(--rhm-speed) ease, color var(--rhm-speed) ease; }
.rhm .rhm__item.is-active .rhm__text  { transform: translateX(var(--rhm-active-px)); }
.rhm .rhm__item.is-active .rhm__price { transform: translateX(calc(var(--rhm-active-px) * -1)); }
.rhm .rhm__item.is-active .rhm__title { color: var(--rhm-active-title, var(--rhm-active-text)); }
.rhm .rhm__item.is-active .rhm__desc  { color: var(--rhm-active-desc, var(--rhm-active-text)); }
.rhm .rhm__item.is-active .rhm__price { color: var(--rhm-active-price, var(--rhm-active-text)); }

/* Center image: the box keeps its background; product images are stacked
   on top of it and the active one fades in. */
.rhm .rhm__media {
  position: relative;
  align-self: var(--rhm-media-align, stretch);
  min-height: var(--rhm-media-h);
  border-radius: var(--rhm-media-radius);
  overflow: hidden;
  background-color: var(--rhm-media-bg);
  /* A background image always fills the box (can be changed in the Background control). */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.rhm .rhm__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto; /* centres the image when Width/Height are smaller than the box */
  max-width: none;
  object-fit: var(--rhm-img-fit);
  object-position: var(--rhm-img-pos);
  border-radius: 0;
  opacity: 0;
  transition: opacity var(--rhm-fade) ease;
}
.rhm .rhm__image.is-active { opacity: 1; }

.rhm .rhm__empty { grid-column: 1 / -1; margin: 0; padding: 16px; background: #fff8e5; }

/* Tablet: two menus side by side under the image; one-menu layout keeps its two columns. */
@media (max-width: 1024px) {
  .rhm.rhm--two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "media media" "left right";
  }
}
/* Mobile: everything stacked, image first. */
@media (max-width: 767px) {
  .rhm.rhm--two {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "left" "right";
  }
  .rhm.rhm--one {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "left";
  }
}

/* Image switched off per device: hide it and let the menus use the space. */
@media (min-width: 1025px) {
  .rhm.rhm--no-img-desktop .rhm__media { display: none; }
  .rhm.rhm--no-img-desktop.rhm--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "left right"; }
  .rhm.rhm--no-img-desktop.rhm--one { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left"; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .rhm.rhm--no-img-tablet .rhm__media { display: none; }
  .rhm.rhm--no-img-tablet.rhm--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "left right"; }
  .rhm.rhm--no-img-tablet.rhm--one { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left"; }
}
@media (max-width: 767px) {
  .rhm.rhm--no-img-mobile .rhm__media { display: none; }
  .rhm.rhm--no-img-mobile.rhm--two { grid-template-areas: "left" "right"; }
  .rhm.rhm--no-img-mobile.rhm--one { grid-template-areas: "left"; }
}