.primary-menu,
.site-nav .menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 32px;
}

.primary-menu li,
.site-nav .menu li {
  position: relative;
}

.site-nav .current-menu-item > a::after,
.site-nav .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.primary-menu .sub-menu,
.site-nav .menu .sub-menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: -20px;
  display: none;
  min-width: 280px;
  margin: 0;
  padding: 14px 10px 10px;
  list-style: none;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.site-nav .menu .menu-item-has-children > .sub-menu::before {
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
  content: "";
}

.primary-menu .sub-menu .sub-menu,
.site-nav .menu .sub-menu .sub-menu {
  top: -14px;
  right: auto;
  left: calc(100% + 12px);
  min-width: 240px;
}

.site-nav .menu .sub-menu .menu-item-has-children > .sub-menu::before {
  top: 0;
  right: auto;
  left: -14px;
  width: 14px;
  height: 100%;
}

.site-nav .menu .sub-menu .menu-item-has-children > a {
  padding-right: 32px;
}

.site-nav .menu .sub-menu .menu-item-has-children > a::before {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #8296a5;
  content: "›";
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
}

@media (max-width: 1200px) and (min-width: 821px) {
  .primary-menu .sub-menu .sub-menu,
  .site-nav .menu .sub-menu .sub-menu {
    right: calc(100% + 12px);
    left: auto;
  }

  .site-nav .menu .sub-menu .menu-item-has-children > .sub-menu::before {
    right: -14px;
    left: auto;
  }
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.site-nav .menu li:hover > .sub-menu,
.site-nav .menu li:focus-within > .sub-menu {
  display: block;
}

.primary-menu .sub-menu a,
.site-nav .menu .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
}

.primary-menu .sub-menu a:hover,
.site-nav .menu .sub-menu a:hover {
  background: var(--mist);
}

.product-media > a {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.product-body h3 a:hover {
  color: var(--blue);
}

.form-status.is-success {
  color: #d9fbf4;
  background: rgba(20, 138, 129, 0.25);
  border: 1px solid rgba(91, 214, 201, 0.35);
}

.form-status.is-error {
  color: #fff0ee;
  background: rgba(166, 54, 40, 0.28);
  border: 1px solid rgba(255, 164, 154, 0.38);
}

.inquiry-form button:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.wp-content {
  max-width: 860px;
}

.wp-content > * + * {
  margin-top: 1.25em;
}

.wp-content h2,
.wp-content h3 {
  margin-top: 1.7em;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.wp-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-content img,
.wp-block-image img {
  height: auto;
  border-radius: var(--radius-sm);
}

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  margin-top: 36px;
  gap: 8px;
  list-style: none;
}

.page-numbers li {
  margin: 0;
}

.page-numbers a,
.page-numbers span {
  display: grid;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  color: var(--navy);
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  place-items: center;
}

.page-numbers .current {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 820px) {
  .primary-menu,
  .site-nav .menu {
    display: grid;
    width: 100%;
    gap: 0;
  }

  .primary-menu li,
  .site-nav .menu li {
    border-bottom: 1px solid #edf2f5;
  }

  .primary-menu a,
  .site-nav .menu a {
    display: block;
    padding: 14px 0;
  }

  .primary-menu .sub-menu,
  .site-nav .menu .sub-menu {
    position: static;
    display: block;
    width: 100%;
    padding: 0 0 8px 14px;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}